├── packages ├── vue2 │ ├── utils │ │ ├── index.ts │ │ └── diff.ts │ ├── components │ │ ├── Container │ │ │ ├── types.d.ts │ │ │ ├── createContainer.ts │ │ │ └── index.ts │ │ ├── Node │ │ │ ├── createNode.ts │ │ │ ├── constants.ts │ │ │ └── index.ts │ │ └── Root │ │ │ ├── app.ts │ │ │ └── leafer.ts │ ├── .gitignore │ ├── types │ │ ├── resolver.d.ts │ │ └── index.d.ts │ ├── composables │ │ ├── useGetParentNodeName.ts │ │ ├── useGetPropsAndEventByAttrs │ │ │ ├── utils.ts │ │ │ ├── index.test.ts │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── useInsertBefore.ts │ │ ├── useCreateEvents.ts │ │ ├── useGetContainer.ts │ │ ├── useEffectUpdate.ts │ │ └── useSomeNode.ts │ ├── resolver.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── index.ts │ └── package.json ├── vue3 │ ├── index.ts │ ├── composables │ │ ├── index.ts │ │ ├── useGetPropsAndEventByAttrs │ │ │ ├── utils.ts │ │ │ ├── index.test.ts │ │ │ └── index.ts │ │ ├── useEffectUpdate.ts │ │ └── useLogger.ts │ ├── renderer │ │ ├── index.ts │ │ └── renderer.ts │ ├── tags │ │ └── Empty.ts │ ├── .gitignore │ ├── tsconfig.json │ ├── utils │ │ └── index.ts │ ├── compiler.ts │ ├── types │ │ ├── LeaferVueComponent.ts │ │ ├── LeaferEventType.ts │ │ └── index.ts │ ├── tsup.config.ts │ ├── components │ │ └── application │ │ │ └── index.ts │ └── package.json └── uni-app │ └── package.json ├── examples ├── vue2 │ ├── env.d.ts │ ├── public │ │ ├── test.jpg │ │ └── favicon.ico │ ├── src │ │ ├── main.ts │ │ ├── assets │ │ │ ├── logo.svg │ │ │ ├── main.css │ │ │ └── base.css │ │ └── App.vue │ ├── tsconfig.config.json │ ├── tsconfig.json │ ├── index.html │ ├── .gitignore │ ├── vite.config.ts │ ├── package.json │ └── README.md └── vue3 │ ├── env.d.ts │ ├── public │ ├── test.jpg │ └── favicon.ico │ ├── .vscode │ └── extensions.json │ ├── src │ ├── main.ts │ └── App.vue │ ├── tsconfig.json │ ├── tsconfig.app.json │ ├── tsconfig.node.json │ ├── index.html │ ├── .gitignore │ ├── vite.config.ts │ ├── package.json │ └── README.md ├── playground ├── src │ ├── constants.ts │ ├── main.css │ ├── env.d.ts │ ├── template │ │ ├── main.vue │ │ ├── _tsconfig.json │ │ └── welcome.vue │ ├── utils │ │ ├── encode.ts │ │ └── dependency.ts │ ├── main.ts │ ├── components │ │ ├── Settings.vue │ │ └── Header.vue │ ├── assets │ │ └── logo.svg │ ├── components.d.ts │ ├── App.vue │ └── composables │ │ └── store.ts ├── public │ ├── logo.ico │ └── logo.png ├── README.md ├── tsconfig.json ├── unocss.config.ts ├── index.html ├── package.json └── vite.config.ts ├── .npmrc ├── docs ├── public │ ├── logo.ico │ ├── logo.png │ └── leafer-vue.proxy.js ├── intro │ ├── uni.md │ ├── nuxt.md │ └── vue2.md ├── .vitepress │ ├── theme │ │ ├── composables │ │ │ └── dark.ts │ │ ├── components │ │ │ ├── HomePage.vue │ │ │ ├── ApiTyping │ │ │ │ └── index.vue │ │ │ ├── repl │ │ │ │ └── index.vue │ │ │ ├── Sponsors.vue │ │ │ └── MoreStarts.vue │ │ ├── Layout.vue │ │ ├── index.ts │ │ ├── blur.css │ │ └── var.css │ ├── plugin │ │ ├── index.ts │ │ └── tooltip.ts │ └── config.ts ├── shims.d.ts ├── tsconfig.json ├── guide │ ├── components │ │ ├── path │ │ │ ├── pen.md │ │ │ ├── path.md │ │ │ ├── Pen.vue │ │ │ └── Path.vue │ │ ├── container │ │ │ ├── group.md │ │ │ ├── box.md │ │ │ ├── frame.md │ │ │ ├── Group.vue │ │ │ ├── Box.vue │ │ │ └── Frame.vue │ │ ├── custom │ │ │ ├── custom.md │ │ │ └── index.vue │ │ ├── shape │ │ │ ├── polygon.md │ │ │ ├── rect.md │ │ │ ├── star.md │ │ │ ├── ellipse.md │ │ │ ├── line.md │ │ │ ├── Star.vue │ │ │ ├── Rect.vue │ │ │ ├── Ellipse.vue │ │ │ ├── Polygon.vue │ │ │ └── Line.vue │ │ ├── app │ │ │ ├── leafer.md │ │ │ ├── leaferApp.md │ │ │ └── leaferApp.vue │ │ ├── image │ │ │ ├── image.md │ │ │ ├── canvas.md │ │ │ ├── Image.vue │ │ │ └── Canvas.vue │ │ └── text │ │ │ └── text.md │ ├── events │ │ ├── leafer │ │ │ ├── Leafer │ │ │ │ ├── index.vue │ │ │ │ └── leafer.md │ │ │ ├── Resize │ │ │ │ ├── resize.md │ │ │ │ └── index.vue │ │ │ ├── Watch │ │ │ │ ├── watch.md │ │ │ │ └── index.vue │ │ │ ├── Layout │ │ │ │ ├── index.vue │ │ │ │ └── layout.md │ │ │ └── Render │ │ │ │ ├── index.vue │ │ │ │ └── render.md │ │ ├── action │ │ │ ├── Pointer │ │ │ │ ├── index.vue │ │ │ │ └── pointer.md │ │ │ ├── Drag │ │ │ │ ├── index.vue │ │ │ │ └── drag.md │ │ │ ├── Drop │ │ │ │ ├── index.vue │ │ │ │ └── drop.md │ │ │ ├── Swipe │ │ │ │ ├── index.vue │ │ │ │ └── swipe.md │ │ │ ├── Key │ │ │ │ ├── key.md │ │ │ │ └── index.vue │ │ │ ├── Zoom │ │ │ │ ├── zoom.md │ │ │ │ └── index.vue │ │ │ ├── Rotate │ │ │ │ ├── index.vue │ │ │ │ └── rotate.md │ │ │ └── Move │ │ │ │ ├── move.md │ │ │ │ └── index.vue │ │ ├── element │ │ │ ├── Image │ │ │ │ └── image.md │ │ │ ├── Property │ │ │ │ ├── property.md │ │ │ │ └── index.vue │ │ │ └── Child │ │ │ │ ├── index.vue │ │ │ │ └── child.md │ │ └── events.md │ ├── start │ │ ├── introduction.md │ │ ├── index.vue │ │ └── usage.md │ └── other │ │ ├── export │ │ └── export.md │ │ └── animate │ │ └── animate.md ├── awesome │ └── index.md ├── uno.config.ts ├── plugin │ ├── editor.vue │ └── index.md ├── components.d.ts ├── vite.config.ts ├── package.json └── index.md ├── .github ├── images │ └── logo.png └── workflows │ ├── deploy.yml │ ├── release2.yml │ └── release3.yml ├── pnpm-workspace.yaml ├── .gitignore ├── netlify.toml ├── eslint.config.js ├── tsconfig.json ├── .vscode └── settings.json ├── LICENSE ├── README.md └── package.json /packages/vue2/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './diff' 2 | -------------------------------------------------------------------------------- /examples/vue2/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/vue3/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/vue3/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components/application/index' 2 | -------------------------------------------------------------------------------- /playground/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const IS_DEV = import.meta.env.DEV 2 | -------------------------------------------------------------------------------- /playground/src/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --el-color-primary: #40883C; 3 | } 4 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies=false 2 | auto-install-peers=true 3 | shamefully-hoist=true 4 | -------------------------------------------------------------------------------- /docs/public/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FliPPeDround/leafer-vue/HEAD/docs/public/logo.ico -------------------------------------------------------------------------------- /docs/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FliPPeDround/leafer-vue/HEAD/docs/public/logo.png -------------------------------------------------------------------------------- /packages/vue2/components/Container/types.d.ts: -------------------------------------------------------------------------------- 1 | export type Container = 'Frame' | 'Box' | 'Group' 2 | -------------------------------------------------------------------------------- /.github/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FliPPeDround/leafer-vue/HEAD/.github/images/logo.png -------------------------------------------------------------------------------- /playground/public/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FliPPeDround/leafer-vue/HEAD/playground/public/logo.ico -------------------------------------------------------------------------------- /playground/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FliPPeDround/leafer-vue/HEAD/playground/public/logo.png -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - playground 3 | - 'packages/**' 4 | - 'examples/**' 5 | - docs 6 | -------------------------------------------------------------------------------- /examples/vue2/public/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FliPPeDround/leafer-vue/HEAD/examples/vue2/public/test.jpg -------------------------------------------------------------------------------- /examples/vue3/public/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FliPPeDround/leafer-vue/HEAD/examples/vue3/public/test.jpg -------------------------------------------------------------------------------- /playground/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FliPPeDround/leafer-vue/HEAD/examples/vue2/public/favicon.ico -------------------------------------------------------------------------------- /examples/vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FliPPeDround/leafer-vue/HEAD/examples/vue3/public/favicon.ico -------------------------------------------------------------------------------- /packages/vue3/composables/index.ts: -------------------------------------------------------------------------------- 1 | export * from './useEffectUpdate' 2 | export * from './useGetPropsAndEventByAttrs' 3 | -------------------------------------------------------------------------------- /examples/vue3/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/vue3/renderer/index.ts: -------------------------------------------------------------------------------- 1 | import { renderer } from './renderer' 2 | 3 | export const createApp = renderer.createApp 4 | -------------------------------------------------------------------------------- /packages/vue3/tags/Empty.ts: -------------------------------------------------------------------------------- 1 | import { Leaf } from 'leafer-ui' 2 | 3 | export class Empty extends Leaf { 4 | visible = false 5 | } 6 | -------------------------------------------------------------------------------- /docs/intro/uni.md: -------------------------------------------------------------------------------- 1 | # uni-app 2 | 3 | 
4 | 🏗 Working in Progress
5 |
6 | 7 | 8 | -------------------------------------------------------------------------------- /playground/src/template/main.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /examples/vue2/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app') 7 | -------------------------------------------------------------------------------- /examples/vue3/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | const app = createApp(App) 5 | app.mount('#app') 6 | -------------------------------------------------------------------------------- /packages/vue2/.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | .DS_Store 3 | .idea 4 | *.log 5 | *.tgz 6 | coverage 7 | dist 8 | lib-cov 9 | logs 10 | node_modules 11 | temp 12 | -------------------------------------------------------------------------------- /packages/vue3/.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | .DS_Store 3 | .idea 4 | *.log 5 | *.tgz 6 | coverage 7 | dist 8 | lib-cov 9 | logs 10 | node_modules 11 | temp 12 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/composables/dark.ts: -------------------------------------------------------------------------------- 1 | import { useDark } from '@vueuse/core' 2 | 3 | export const isDark = useDark({ 4 | storageKey: 'vitepress-theme-appearance', 5 | }) 6 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/HomePage.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /packages/vue2/types/resolver.d.ts: -------------------------------------------------------------------------------- 1 | import type { ComponentResolver } from 'unplugin-vue-components' 2 | 3 | declare function LeaferVueResolver(): ComponentResolver 4 | 5 | export { LeaferVueResolver } 6 | -------------------------------------------------------------------------------- /docs/intro/nuxt.md: -------------------------------------------------------------------------------- 1 | #
Nuxt
2 | 3 | 
4 | 🏗 Working in Progress
5 |
6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/vue3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "references": [ 3 | { 4 | "path": "./tsconfig.node.json" 5 | }, 6 | { 7 | "path": "./tsconfig.app.json" 8 | } 9 | ], 10 | "files": [] 11 | } 12 | -------------------------------------------------------------------------------- /packages/vue2/composables/useGetParentNodeName.ts: -------------------------------------------------------------------------------- 1 | import { getCurrentInstance } from 'vue-demi' 2 | 3 | export function useGetParentNodeName() { 4 | return getCurrentInstance()?.proxy?.$parent?.$options.name 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | .DS_Store 3 | .idea 4 | *.log 5 | *.tgz 6 | coverage 7 | dist 8 | lib-cov 9 | logs 10 | node_modules 11 | temp 12 | 13 | docs/.vitepress/cache 14 | docs/.vitepress/dist 15 | 16 | build 17 | leafer-vue.proxy.js 18 | -------------------------------------------------------------------------------- /examples/vue2/tsconfig.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.node.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "types": ["node"] 6 | }, 7 | "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/vue2/components/Node/createNode.ts: -------------------------------------------------------------------------------- 1 | import type { Node } from './constants' 2 | import { UI } from 'leafer-ui' 3 | 4 | export function createNode(Node: Node, config: any) { 5 | return UI.one({ 6 | tag: Node, 7 | ...config, 8 | }) 9 | } 10 | -------------------------------------------------------------------------------- /packages/vue2/composables/useGetPropsAndEventByAttrs/utils.ts: -------------------------------------------------------------------------------- 1 | export function getEventNameByAttrName(attrName: string) { 2 | return attrName 3 | .slice(2) 4 | .replace(/([A-Z])/g, (_, letter, index) => index === 0 ? letter.toLowerCase() : `.${letter.toLowerCase()}`) 5 | } 6 | -------------------------------------------------------------------------------- /packages/vue3/composables/useGetPropsAndEventByAttrs/utils.ts: -------------------------------------------------------------------------------- 1 | export function getEventNameByAttrName(attrName: string) { 2 | return attrName 3 | .slice(2) 4 | .replace(/([A-Z])/g, (_, letter, index) => index === 0 ? letter.toLowerCase() : `.${letter.toLowerCase()}`) 5 | } 6 | -------------------------------------------------------------------------------- /docs/.vitepress/plugin/index.ts: -------------------------------------------------------------------------------- 1 | import type { MarkdownRenderer } from 'vitepress' 2 | import { groupIconMdPlugin } from 'vitepress-plugin-group-icons' 3 | import tooltip from './tooltip' 4 | 5 | export function mdPlugin(md: MarkdownRenderer) { 6 | md.use(tooltip) 7 | md.use(groupIconMdPlugin) 8 | } 9 | -------------------------------------------------------------------------------- /playground/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 | # Leafer Vue Playground 6 | 7 | ## Credits 8 | 9 | - [vuejs/repl](https://github.com/vuejs/repl) 10 | - [element-plus/element-plus-playground](https://github.com/element-plus/element-plus-playground) 11 | -------------------------------------------------------------------------------- /packages/vue2/composables/index.ts: -------------------------------------------------------------------------------- 1 | export * from './useCreateEvents' 2 | export * from './useEffectUpdate' 3 | export * from './useGetContainer' 4 | export * from './useGetParentNodeName' 5 | export * from './useGetPropsAndEventByAttrs' 6 | export * from './useInsertBefore' 7 | export * from './useSomeNode' 8 | -------------------------------------------------------------------------------- /packages/vue2/components/Node/constants.ts: -------------------------------------------------------------------------------- 1 | export const NodesType = [ 2 | 'Rect', 3 | 'Ellipse', 4 | 'Polygon', 5 | 'Star', 6 | 'Line', 7 | 'Image', 8 | 'Canvas', 9 | 'Text', 10 | 'Path', 11 | 'Pen', 12 | ] as const 13 | 14 | // 获取GeometriesType枚举类型 15 | export type Node = typeof NodesType[number] 16 | -------------------------------------------------------------------------------- /playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "@/*": ["src/*"] 7 | }, 8 | "types": [], 9 | "skipLibCheck": true 10 | }, 11 | "include": ["src"], 12 | "exclude": ["src/template/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/vue2/utils/diff.ts: -------------------------------------------------------------------------------- 1 | export function diff(oldValue: Record, newValue: Record) { 2 | const result: Record = {} 3 | 4 | for (const key in newValue) { 5 | if (oldValue[key] !== newValue[key]) 6 | result[key] = newValue[key] 7 | } 8 | 9 | return result 10 | } 11 | -------------------------------------------------------------------------------- /examples/vue2/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "docs/dist" 3 | command = "pnpm run deploy" 4 | 5 | [build.environment] 6 | NPM_FLAGS = "--version" 7 | NODE_VERSION = "20" 8 | 9 | [[redirects]] 10 | from = "/*" 11 | to = "index.html" 12 | status = 200 13 | 14 | [[redirects]] 15 | from = "/play/*" 16 | to = "/play/index.html" 17 | status = 200 18 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import antfu from '@antfu/eslint-config' 2 | 3 | export default await antfu({ 4 | ignores: [ 5 | '*.global.js', 6 | 'build', 7 | 'node_modules', 8 | '.vitepress', 9 | 'docs/.vitepress/cache/deps/*.*', 10 | '**/public/*.js', 11 | ], 12 | rules: { 13 | 'no-alert': 'off', 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /docs/shims.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { ComponentOptions } from 'vue' 3 | 4 | const Component: ComponentOptions 5 | export default Component 6 | } 7 | 8 | declare module '*.md' { 9 | import type { ComponentOptions } from 'vue' 10 | 11 | const Component: ComponentOptions 12 | export default Component 13 | } 14 | -------------------------------------------------------------------------------- /packages/vue2/resolver.ts: -------------------------------------------------------------------------------- 1 | import type { ComponentResolver } from 'unplugin-vue-components' 2 | 3 | export function LeaferVueResolver(): ComponentResolver { 4 | return { 5 | type: 'component', 6 | resolve: (name: string) => { 7 | if (name.match(/^lf[A-Z]/)) 8 | return { name, from: 'leafer-vue' } 9 | }, 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/Layout.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 13 | -------------------------------------------------------------------------------- /docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "types": [ 6 | "leafer-vue", 7 | "vite/client" 8 | ] 9 | }, 10 | "include": ["**/**/*.vue", "shims.d.ts", ".vitepress/**/*.ts", ".vitepress/**/*.vue"], 11 | "exclude": ["node_modules/**/*"] 12 | } 13 | -------------------------------------------------------------------------------- /docs/guide/components/path/pen.md: -------------------------------------------------------------------------------- 1 | 4 | # Pen 5 | > 6 | > 像绘画一样，快速画出不同样式的路径组合。 7 | > 8 | 9 | ## 用法 10 | 11 | 12 | 13 | > 详情查看[Path |🌿 Leafer UI](https://www.leaferjs.com/ui/reference/display/Path.html)。 14 | > 15 | > 事件请查看[事件处理 |🌿 Leafer Vue](/guide/events/events) 16 | -------------------------------------------------------------------------------- /docs/awesome/index.md: -------------------------------------------------------------------------------- 1 | # Awesome Leafer Vue 2 | 3 | > 🌟 欢迎分享你的 Leafer Vue 项目！ 4 | > 5 | > 如果你使用 Leafer Vue 开发了有趣的项目，欢迎提交到这里与大家分享。无论是创意应用、实用工具还是学习示例，我们都期待看到你的作品！ 6 | > 7 | 8 | | 项目 | 描述 | 链接 | 9 | | :--- | :--- | :--- | 10 | | [leafer-labubu](https://github.com/xiaohe0601/leafer-labubu) | 🧸 LABUBU Created with Leafer Vue | [预览](https://labubu.xiaohe.ink/) | 11 | -------------------------------------------------------------------------------- /examples/vue2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.web.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "@/*": ["./src/*"] 7 | } 8 | }, 9 | 10 | "references": [ 11 | { 12 | "path": "./tsconfig.config.json" 13 | } 14 | ], 15 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"] 16 | } 17 | -------------------------------------------------------------------------------- /examples/vue3/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/*": ["./src/*"] 8 | }, 9 | "types": ["leafer-vue"] 10 | }, 11 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 12 | "exclude": ["src/**/__tests__/*"] 13 | } 14 | -------------------------------------------------------------------------------- /examples/vue3/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/node18/tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "module": "ESNext", 6 | "types": ["node"] 7 | }, 8 | "include": [ 9 | "vite.config.*", 10 | "vitest.config.*", 11 | "cypress.config.*", 12 | "nightwatch.conf.*", 13 | "playwright.config.*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /playground/src/utils/encode.ts: -------------------------------------------------------------------------------- 1 | // prefer old unicode hacks for backward compatibility 2 | // https://base64.guru/developers/javascript/examples/unicode-strings 3 | export function utoa(data: string): string { 4 | return btoa(unescape(encodeURIComponent(data))) 5 | } 6 | 7 | export function atou(base64: string): string { 8 | return decodeURIComponent(escape(atob(base64))) 9 | } 10 | -------------------------------------------------------------------------------- /docs/uno.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, presetAttributify, presetIcons, presetUno, transformerDirectives } from 'unocss' 2 | 3 | export default defineConfig({ 4 | presets: [ 5 | presetUno(), 6 | presetIcons(), 7 | presetAttributify(), 8 | ], 9 | transformers: [ 10 | transformerDirectives({ 11 | applyVariable: ['--at-apply', '--uno'], 12 | }), 13 | ], 14 | }) 15 | -------------------------------------------------------------------------------- /packages/vue2/composables/useInsertBefore.ts: -------------------------------------------------------------------------------- 1 | import { getCurrentInstance } from 'vue-demi' 2 | 3 | export function useInsertBefore(canvas: HTMLCanvasElement) { 4 | const selfElement = getCurrentInstance()?.proxy?.$el as HTMLElement 5 | const parentElement = selfElement.parentElement! 6 | const nextElement = selfElement.nextElementSibling 7 | parentElement.insertBefore(canvas, nextElement) 8 | } 9 | -------------------------------------------------------------------------------- /playground/src/template/_tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "jsx": "preserve", 5 | "module": "ESNext", 6 | "moduleResolution": "Bundler", 7 | "types": ["leafer-vue"], 8 | "allowImportingTsExtensions": true, 9 | "allowJs": true, 10 | "checkJs": true 11 | }, 12 | "vueCompilerOptions": { 13 | "target": 3.3 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/vue3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/vue3/composables/useEffectUpdate.ts: -------------------------------------------------------------------------------- 1 | import type { IUI } from '@leafer-ui/interface' 2 | import { watch } from 'vue' 3 | import { useGetPropsByAttrs } from './index' 4 | 5 | export function useEffectUpdate( 6 | attrs: Record, 7 | instance: IUI, 8 | ) { 9 | watch( 10 | () => useGetPropsByAttrs(attrs), 11 | (newConfig) => { 12 | instance.set(newConfig) 13 | }, 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /playground/unocss.config.ts: -------------------------------------------------------------------------------- 1 | import transformerDirective from '@unocss/transformer-directives' 2 | import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss' 3 | 4 | export default defineConfig({ 5 | presets: [presetUno(), presetAttributify(), presetIcons()], 6 | transformers: [transformerDirective()], 7 | shortcuts: { 8 | 'color-primary': 'color-[var(--el-color-primary)]', 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /docs/guide/events/leafer/Leafer/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /playground/src/main.ts: -------------------------------------------------------------------------------- 1 | import App from '@/App.vue' 2 | import { createApp } from 'vue' 3 | import '@unocss/reset/tailwind.css' 4 | import '@vue/repl/style.css' 5 | import 'element-plus/theme-chalk/dark/css-vars.css' 6 | import 'uno.css' 7 | import './main.css' 8 | 9 | // @ts-expect-error Custom window property 10 | window.VUE_DEVTOOLS_CONFIG = { 11 | defaultSelectedAppId: 'repl', 12 | } 13 | 14 | createApp(App).mount('#app') 15 | -------------------------------------------------------------------------------- /examples/vue2/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | /cypress/videos/ 17 | /cypress/screenshots/ 18 | 19 | # Editor directories and files 20 | .vscode 21 | !.vscode/extensions.json 22 | .idea 23 | *.suo 24 | *.ntvs* 25 | *.njsproj 26 | *.sln 27 | *.sw? 28 | -------------------------------------------------------------------------------- /docs/guide/components/container/group.md: -------------------------------------------------------------------------------- 1 | 4 | 5 | # Group 6 | > 7 | > 创建 Group。用于将元素进行打组，自身没有样式，可以不断嵌套。 8 | > 9 | > 实际宽高随子元素变化，不能设置，可以通过 bounds 获取实际宽高信息。 10 | 11 | ## 用法 12 | 13 | 14 | 15 | ## 属性 16 | > 详情查看[Group |🌿 Leafer UI](https://www.leaferjs.com/ui/reference/display/Group.html)。 17 | > 18 | > 事件请查看[事件处理 |🌿 Leafer Vue](/guide/events/events) 19 | -------------------------------------------------------------------------------- /packages/vue2/components/Container/createContainer.ts: -------------------------------------------------------------------------------- 1 | import type { Container } from './types' 2 | import { Box, Frame, Group } from 'leafer-ui' 3 | 4 | const containerConstructors = { 5 | Frame, 6 | Box, 7 | Group, 8 | } 9 | 10 | export function createContainer(container: Container, config: any) { 11 | const constructor = containerConstructors[container] 12 | const instance = new constructor(config) 13 | return instance 14 | } 15 | -------------------------------------------------------------------------------- /examples/vue3/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | -------------------------------------------------------------------------------- /packages/vue2/composables/useCreateEvents.ts: -------------------------------------------------------------------------------- 1 | import type { IUI } from 'leafer-ui' 2 | import { onUnmounted } from 'vue-demi' 3 | 4 | export function useCreateEvents(events: Record, instance: IUI) { 5 | Object.keys(events).forEach((key) => { 6 | const eventName = key as keyof typeof events 7 | instance.on(eventName, events[key]) 8 | 9 | onUnmounted(() => { 10 | instance.off(eventName, events[key]) 11 | }) 12 | }) 13 | } 14 | -------------------------------------------------------------------------------- /packages/vue2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2018", 4 | "lib": ["esnext", "DOM"], 5 | "baseUrl": ".", 6 | "module": "esnext", 7 | "moduleResolution": "node", 8 | "paths": { 9 | "@/*": ["./*"] 10 | }, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "strictNullChecks": true, 14 | "esModuleInterop": true, 15 | "skipDefaultLibCheck": true, 16 | "skipLibCheck": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/vue3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2018", 4 | "lib": ["esnext", "DOM"], 5 | "baseUrl": ".", 6 | "module": "esnext", 7 | "moduleResolution": "node", 8 | "paths": { 9 | "@/*": ["./*"] 10 | }, 11 | "resolveJsonModule": true, 12 | "strict": true, 13 | "strictNullChecks": true, 14 | "esModuleInterop": true, 15 | "skipDefaultLibCheck": true, 16 | "skipLibCheck": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /docs/guide/components/custom/custom.md: -------------------------------------------------------------------------------- 1 | # Custom 2 | > 自定义元素，详情请查看[Custom |🌿 Leafer UI](https://www.leaferjs.com/ui/reference/display/custom/base/register.html) 3 | 4 | ## 用法 5 | 8 | 9 | 10 | 11 | > [!TIP] 12 | > - 自定义tag名不能与内置的tag名冲突，需要全局唯一 13 | > - 自定义类名不能与`