@veltra/desktop 1.1.1 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/action/action-group.vue.d.ts +2 -2
- package/dist/components/auto-complete/auto-complete.js +3 -3
- package/dist/components/auto-complete/auto-complete.js.map +1 -1
- package/dist/components/auto-complete/auto-complete.vue.d.ts +2 -2
- package/dist/components/auto-complete/style2.css +2 -2
- package/dist/components/batch-edit/batch-edit.vue.d.ts +1 -1
- package/dist/components/cascade/cascade.js +3 -3
- package/dist/components/cascade/cascade.js.map +1 -1
- package/dist/components/cascade/cascade.vue.d.ts +5 -5
- package/dist/components/cascade/style2.css +1 -1
- package/dist/components/checkbox/checkbox-button.js +3 -3
- package/dist/components/checkbox/checkbox-button.js.map +1 -1
- package/dist/components/checkbox/checkbox-button.vue.d.ts +1 -1
- package/dist/components/checkbox/checkbox.js +3 -3
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/checkbox/style2.css +2 -2
- package/dist/components/checkbox-group/checkbox-group.js +3 -3
- package/dist/components/checkbox-group/checkbox-group.js.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.vue.d.ts +1 -1
- package/dist/components/code-editor/code-editor.js +3 -3
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/code-editor/style2.css +1 -1
- package/dist/components/collapse/collapse-item.js +10 -35
- package/dist/components/collapse/collapse-item.js.map +1 -1
- package/dist/components/collapse/collapse.js +4 -2
- package/dist/components/collapse/collapse.js.map +1 -1
- package/dist/components/collapse/di.js +1 -0
- package/dist/components/collapse/di.js.map +1 -1
- package/dist/components/date-picker/date-picker.js +3 -3
- package/dist/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/date-picker/date-picker.vue.d.ts +3 -3
- package/dist/components/date-range-picker/date-range-picker.js +3 -3
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.vue.d.ts +3 -3
- package/dist/components/date-range-picker/style2.css +1 -1
- package/dist/components/dialog/style2.css +1 -1
- package/dist/components/drawer/drawer.vue.d.ts +2 -2
- package/dist/components/expression-editor/expression-editor.js +3 -3
- package/dist/components/expression-editor/expression-editor.js.map +1 -1
- package/dist/components/expression-editor/style2.css +5 -5
- package/dist/components/file-viewer/file-viewer.vue.d.ts +1 -1
- package/dist/components/form/form.js.map +1 -1
- package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js +2 -3
- package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/form-item/form-item.js.map +1 -1
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/form-item/style2.css +0 -1
- package/dist/components/grid-input/style2.css +3 -3
- package/dist/components/group-input/group-input.js +3 -3
- package/dist/components/group-input/group-input.js.map +1 -1
- package/dist/components/input/input.js.map +1 -1
- package/dist/components/input/input.vue.d.ts +4 -4
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/input/style2.css +1 -1
- package/dist/components/menu/di.js +1 -0
- package/dist/components/menu/di.js.map +1 -1
- package/dist/components/menu/menu-sub.js +7 -15
- package/dist/components/menu/menu-sub.js.map +1 -1
- package/dist/components/menu/menu.js +8 -2
- package/dist/components/menu/menu.js.map +1 -1
- package/dist/components/multi-select/multi-select.js +3 -3
- package/dist/components/multi-select/multi-select.js.map +1 -1
- package/dist/components/multi-select/multi-select.vue.d.ts +4 -4
- package/dist/components/multi-select/style2.css +2 -2
- package/dist/components/multi-tree-select/multi-tree-select.js +3 -3
- package/dist/components/multi-tree-select/multi-tree-select.js.map +1 -1
- package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +6 -6
- package/dist/components/multi-tree-select/style2.css +2 -2
- package/dist/components/notification/notification.vue.d.ts +1 -1
- package/dist/components/number/number.vue.d.ts +1 -1
- package/dist/components/number-input/number-input.js +3 -3
- package/dist/components/number-input/number-input.js.map +1 -1
- package/dist/components/number-input/number-input.vue.d.ts +4 -4
- package/dist/components/number-range-input/number-range-input.js +3 -3
- package/dist/components/number-range-input/number-range-input.js.map +1 -1
- package/dist/components/number-range-input/number-range-input.vue.d.ts +1 -1
- package/dist/components/palette/palette.js +3 -3
- package/dist/components/palette/palette.js.map +1 -1
- package/dist/components/password-input/password-input.js +4 -4
- package/dist/components/password-input/password-input.js.map +1 -1
- package/dist/components/password-input/password-input.vue.d.ts +1 -1
- package/dist/components/pop-confirm/pop-confirm.js +3 -3
- package/dist/components/pop-confirm/pop-confirm.js.map +1 -1
- package/dist/components/pop-confirm/pop-confirm.vue.d.ts +1 -1
- package/dist/components/progress-nodes/progress-nodes.vue.d.ts +2 -2
- package/dist/components/radio/radio.js +3 -3
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/radio/style2.css +1 -1
- package/dist/components/radio-group/radio-group.js +3 -3
- package/dist/components/radio-group/radio-group.js.map +1 -1
- package/dist/components/radio-group/radio-group.vue.d.ts +1 -1
- package/dist/components/radio-group/style2.css +1 -1
- package/dist/components/rich-text-editor/rich-text-editor.js +3 -3
- package/dist/components/rich-text-editor/rich-text-editor.js.map +1 -1
- package/dist/components/rich-text-editor/rich-text-editor.vue.d.ts +1 -1
- package/dist/components/rich-text-editor/style2.css +5 -5
- package/dist/components/select/select.js +4 -4
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/select/select.vue.d.ts +3 -3
- package/dist/components/slider/slider.js +3 -3
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/steps/steps.vue.d.ts +1 -1
- package/dist/components/switch/style2.css +1 -1
- package/dist/components/switch/switch.js +3 -3
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/table.vue.d.ts +2 -2
- package/dist/components/tabs/tabs-horizontal.vue.d.ts +3 -3
- package/dist/components/tabs/tabs-vertical.vue.d.ts +3 -3
- package/dist/components/tabs/tabs.vue.d.ts +3 -3
- package/dist/components/tag/tag.js +3 -3
- package/dist/components/tag/tag.js.map +1 -1
- package/dist/components/textarea/style2.css +1 -1
- package/dist/components/textarea/textarea.js +3 -3
- package/dist/components/textarea/textarea.js.map +1 -1
- package/dist/components/textarea/textarea.vue.d.ts +4 -4
- package/dist/components/tree/tree.js +3 -3
- package/dist/components/tree/tree.js.map +1 -1
- package/dist/components/tree-select/tree-select.js +3 -3
- package/dist/components/tree-select/tree-select.js.map +1 -1
- package/dist/components/tree-select/tree-select.vue.d.ts +6 -6
- package/package.json +11 -11
- package/src/components/auto-complete/auto-complete.vue +3 -2
- package/src/components/auto-complete/style.scss +2 -2
- package/src/components/cascade/cascade.vue +3 -2
- package/src/components/cascade/style.scss +1 -1
- package/src/components/checkbox/checkbox-button.vue +3 -2
- package/src/components/checkbox/checkbox.vue +3 -2
- package/src/components/checkbox/style.scss +2 -2
- package/src/components/checkbox-group/checkbox-group.vue +3 -2
- package/src/components/code-editor/code-editor.vue +3 -2
- package/src/components/code-editor/style.scss +1 -1
- package/src/components/collapse/collapse-item.vue +11 -49
- package/src/components/collapse/collapse.vue +7 -2
- package/src/components/collapse/di.ts +2 -1
- package/src/components/collapse/style.scss +1 -1
- package/src/components/date-picker/date-picker.vue +3 -2
- package/src/components/date-range-picker/date-range-picker.vue +3 -2
- package/src/components/date-range-picker/style.scss +1 -1
- package/src/components/dialog/style.scss +1 -1
- package/src/components/expression-editor/expression-editor.vue +3 -2
- package/src/components/expression-editor/style.scss +5 -5
- package/src/components/form/form.vue +2 -2
- package/src/components/form-item/form-item.vue +3 -2
- package/src/components/form-item/style.scss +0 -1
- package/src/components/grid-input/style.scss +1 -1
- package/src/components/group-input/group-input.vue +3 -2
- package/src/components/input/input.vue +3 -2
- package/src/components/input/style.scss +1 -1
- package/src/components/menu/di.ts +2 -1
- package/src/components/menu/menu-sub.vue +6 -9
- package/src/components/menu/menu.vue +11 -2
- package/src/components/multi-select/multi-select.vue +3 -2
- package/src/components/multi-select/style.scss +2 -2
- package/src/components/multi-tree-select/multi-tree-select.vue +3 -2
- package/src/components/multi-tree-select/style.scss +2 -2
- package/src/components/number-input/number-input.vue +3 -2
- package/src/components/number-range-input/number-range-input.vue +3 -2
- package/src/components/palette/palette.vue +3 -2
- package/src/components/password-input/password-input.vue +4 -3
- package/src/components/pop-confirm/pop-confirm.vue +3 -2
- package/src/components/radio/radio.vue +3 -2
- package/src/components/radio/style.scss +1 -1
- package/src/components/radio-group/radio-group.vue +3 -2
- package/src/components/radio-group/style.scss +1 -1
- package/src/components/rich-text-editor/rich-text-editor.vue +3 -2
- package/src/components/rich-text-editor/style.scss +5 -5
- package/src/components/select/select.vue +4 -3
- package/src/components/slider/slider.vue +3 -2
- package/src/components/switch/style.scss +1 -1
- package/src/components/switch/switch.vue +3 -2
- package/src/components/tag/tag.vue +3 -2
- package/src/components/textarea/style.scss +1 -1
- package/src/components/textarea/textarea.vue +3 -2
- package/src/components/tree/tree.vue +3 -2
- package/src/components/tree-select/tree-select.vue +3 -2
- package/dist/components/menu/use-menu-transition.js +0 -71
- package/dist/components/menu/use-menu-transition.js.map +0 -1
- package/src/components/menu/use-menu-transition.ts +0 -69
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _sfc_main$1 from "./toolbar.js";
|
|
2
2
|
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, shallowRef, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
|
|
3
|
-
import { bem } from "@veltra/utils";
|
|
4
|
-
import {
|
|
3
|
+
import { bem, injectFormContext } from "@veltra/utils";
|
|
4
|
+
import { useFormFallbackProps } from "@veltra/compositions";
|
|
5
5
|
import { createEmptyHistoryState, registerHistory } from "@lexical/history";
|
|
6
6
|
import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
|
|
7
7
|
import { AutoLinkNode, LinkNode } from "@lexical/link";
|
|
@@ -83,7 +83,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
83
83
|
const props = __props;
|
|
84
84
|
const model = useModel(__props, "modelValue");
|
|
85
85
|
const cls = bem("rich-text-editor");
|
|
86
|
-
const { formProps } =
|
|
86
|
+
const { formProps } = injectFormContext();
|
|
87
87
|
const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props]);
|
|
88
88
|
const isDisabled = computed(() => !!disabled.value);
|
|
89
89
|
const isReadonly = computed(() => !!readonly.value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../src/components/rich-text-editor/rich-text-editor.vue"],"sourcesContent":["<template>\n <div :class=\"className\">\n <toolbar\n v-if=\"!isReadonly && toolbarItems.length > 0\"\n :editor=\"editor\"\n :toolbar=\"toolbarItems\"\n :disabled=\"isDisabled\"\n />\n <div :class=\"cls.e('content')\">\n <div\n ref=\"editorContainer\"\n :class=\"cls.e('editable')\"\n :contenteditable=\"!isDisabled && !isReadonly\"\n ></div>\n <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n {{ placeholder }}\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { ToolbarItem } from '../../types'\n\nconst LEXICAL_THEME = {\n paragraph: 'u-rte-paragraph',\n heading: {\n h1: 'u-rte-h1',\n h2: 'u-rte-h2',\n h3: 'u-rte-h3',\n h4: 'u-rte-h4',\n h5: 'u-rte-h5',\n h6: 'u-rte-h6'\n },\n text: {\n bold: 'u-rte-bold',\n italic: 'u-rte-italic',\n underline: 'u-rte-underline',\n strikethrough: 'u-rte-strikethrough'\n },\n list: {\n ul: 'u-rte-ul',\n ol: 'u-rte-ol',\n listitem: 'u-rte-li',\n nested: { listitem: 'u-rte-li--nested' }\n },\n quote: 'u-rte-blockquote',\n\n link: 'u-rte-link',\n image: 'u-rte-image'\n}\n\nconst DEFAULT_TOOLBAR: ToolbarItem[] = [\n 'undo',\n 'redo',\n '|',\n 'heading',\n '|',\n 'bold',\n 'italic',\n 'underline',\n 'strikethrough',\n '|',\n 'bullet-list',\n 'ordered-list',\n '|',\n 'blockquote',\n '|',\n 'link'\n]\n</script>\n\n<script lang=\"ts\" setup>\nimport { registerHistory, createEmptyHistoryState } from '@lexical/history'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport { LinkNode, AutoLinkNode } from '@lexical/link'\nimport { ListNode, ListItemNode, registerList } from '@lexical/list'\nimport { registerRichText } from '@lexical/rich-text'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { createEditor, $getRoot, $createParagraphNode, type LexicalEditor } from 'lexical'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { RichTextEditorProps } from '../../types'\nimport Toolbar from './toolbar.vue'\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n disabled: undefined,\n readonly: undefined,\n format: 'html',\n toolbar: () => DEFAULT_TOOLBAR,\n placeholder: ''\n})\n\nconst model = defineModel<string>()\n\nconst cls = bem('rich-text-editor')\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst isDisabled = computed(() => !!disabled.value)\nconst isReadonly = computed(() => !!readonly.value)\n\nconst className = computed<string[]>(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', isDisabled.value),\n bem.is('readonly', isReadonly.value)\n ]\n})\n\nconst toolbarItems = computed<ToolbarItem[]>(() => {\n return props.toolbar ?? DEFAULT_TOOLBAR\n})\n\nconst editorContainer = useTemplateRef('editorContainer')\nconst editor = shallowRef<LexicalEditor | null>(null)\nconst showPlaceholder = ref(true)\nlet isComposing = false\nlet cleanupFns: (() => void)[] = []\n\nfunction initEditor() {\n if (!editorContainer.value) return\n\n const editorInstance = createEditor({\n namespace: 'URichTextEditor',\n theme: LEXICAL_THEME,\n nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode],\n editable: !isDisabled.value && !isReadonly.value,\n onError: (error: Error) => {\n console.error('Lexical error:', error)\n }\n })\n\n editorInstance.setRootElement(editorContainer.value)\n\n // Register plugins\n cleanupFns.push(registerRichText(editorInstance))\n cleanupFns.push(registerList(editorInstance))\n cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))\n\n // Set initial value\n if (model.value) {\n setEditorContent(editorInstance, model.value)\n }\n\n // Listen for content changes\n cleanupFns.push(\n editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const root = $getRoot()\n const textContent = root.getTextContent()\n showPlaceholder.value = textContent.trim().length === 0\n\n if (isComposing) return\n\n let value: string\n if (props.format === 'json') {\n value = JSON.stringify(editorState.toJSON())\n } else {\n value = $generateHtmlFromNodes(editorInstance)\n }\n\n // Avoid circular updates: only emit if content really changed\n if (value !== model.value) {\n isComposing = true\n model.value = value\n // Use microtask to reset after Vue processes the update\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n })\n )\n\n // Composing event listeners for IME\n const rootElement = editorInstance.getRootElement()\n if (rootElement) {\n const onCompositionStart = () => {\n isComposing = true\n }\n const onCompositionEnd = () => {\n isComposing = false\n }\n rootElement.addEventListener('compositionstart', onCompositionStart)\n rootElement.addEventListener('compositionend', onCompositionEnd)\n cleanupFns.push(() => {\n rootElement.removeEventListener('compositionstart', onCompositionStart)\n rootElement.removeEventListener('compositionend', onCompositionEnd)\n })\n }\n\n editor.value = editorInstance\n}\n\nfunction setEditorContent(editorInstance: LexicalEditor, value: string) {\n editorInstance.update(() => {\n const root = $getRoot()\n root.clear()\n\n if (props.format === 'json') {\n try {\n const parsedState = editorInstance.parseEditorState(value)\n editorInstance.setEditorState(parsedState)\n } catch {\n // If JSON parse fails, treat as empty\n root.append($createParagraphNode())\n }\n } else {\n // HTML format\n const parser = new DOMParser()\n const dom = parser.parseFromString(value, 'text/html')\n const nodes = $generateNodesFromDOM(editorInstance, dom)\n root.append(...nodes)\n }\n })\n}\n\n// Watch external model changes\nwatch(model, (newVal) => {\n if (!editor.value || isComposing) return\n\n const editorInstance = editor.value\n\n // Compare current content to avoid circular updates\n editorInstance.getEditorState().read(() => {\n let currentValue: string\n if (props.format === 'json') {\n currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())\n } else {\n currentValue = $generateHtmlFromNodes(editorInstance)\n }\n\n if (currentValue !== newVal) {\n isComposing = true\n setEditorContent(editorInstance, newVal ?? '')\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n})\n\n// Watch disabled/readonly changes\nwatch([isDisabled, isReadonly], () => {\n if (editor.value) {\n editor.value.setEditable(!isDisabled.value && !isReadonly.value)\n }\n})\n\nonMounted(() => {\n initEditor()\n})\n\nonBeforeUnmount(() => {\n cleanupFns.forEach((fn) => fn())\n cleanupFns = []\n editor.value = null\n})\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../src/components/rich-text-editor/rich-text-editor.vue"],"sourcesContent":["<template>\n <div :class=\"className\">\n <toolbar\n v-if=\"!isReadonly && toolbarItems.length > 0\"\n :editor=\"editor\"\n :toolbar=\"toolbarItems\"\n :disabled=\"isDisabled\"\n />\n <div :class=\"cls.e('content')\">\n <div\n ref=\"editorContainer\"\n :class=\"cls.e('editable')\"\n :contenteditable=\"!isDisabled && !isReadonly\"\n ></div>\n <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n {{ placeholder }}\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { ToolbarItem } from '../../types'\n\nconst LEXICAL_THEME = {\n paragraph: 'u-rte-paragraph',\n heading: {\n h1: 'u-rte-h1',\n h2: 'u-rte-h2',\n h3: 'u-rte-h3',\n h4: 'u-rte-h4',\n h5: 'u-rte-h5',\n h6: 'u-rte-h6'\n },\n text: {\n bold: 'u-rte-bold',\n italic: 'u-rte-italic',\n underline: 'u-rte-underline',\n strikethrough: 'u-rte-strikethrough'\n },\n list: {\n ul: 'u-rte-ul',\n ol: 'u-rte-ol',\n listitem: 'u-rte-li',\n nested: { listitem: 'u-rte-li--nested' }\n },\n quote: 'u-rte-blockquote',\n\n link: 'u-rte-link',\n image: 'u-rte-image'\n}\n\nconst DEFAULT_TOOLBAR: ToolbarItem[] = [\n 'undo',\n 'redo',\n '|',\n 'heading',\n '|',\n 'bold',\n 'italic',\n 'underline',\n 'strikethrough',\n '|',\n 'bullet-list',\n 'ordered-list',\n '|',\n 'blockquote',\n '|',\n 'link'\n]\n</script>\n\n<script lang=\"ts\" setup>\nimport { registerHistory, createEmptyHistoryState } from '@lexical/history'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport { LinkNode, AutoLinkNode } from '@lexical/link'\nimport { ListNode, ListItemNode, registerList } from '@lexical/list'\nimport { registerRichText } from '@lexical/rich-text'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { createEditor, $getRoot, $createParagraphNode, type LexicalEditor } from 'lexical'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { RichTextEditorProps } from '../../types'\nimport Toolbar from './toolbar.vue'\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n disabled: undefined,\n readonly: undefined,\n format: 'html',\n toolbar: () => DEFAULT_TOOLBAR,\n placeholder: ''\n})\n\nconst model = defineModel<string>()\n\nconst cls = bem('rich-text-editor')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst isDisabled = computed(() => !!disabled.value)\nconst isReadonly = computed(() => !!readonly.value)\n\nconst className = computed<string[]>(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', isDisabled.value),\n bem.is('readonly', isReadonly.value)\n ]\n})\n\nconst toolbarItems = computed<ToolbarItem[]>(() => {\n return props.toolbar ?? DEFAULT_TOOLBAR\n})\n\nconst editorContainer = useTemplateRef('editorContainer')\nconst editor = shallowRef<LexicalEditor | null>(null)\nconst showPlaceholder = ref(true)\nlet isComposing = false\nlet cleanupFns: (() => void)[] = []\n\nfunction initEditor() {\n if (!editorContainer.value) return\n\n const editorInstance = createEditor({\n namespace: 'URichTextEditor',\n theme: LEXICAL_THEME,\n nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode],\n editable: !isDisabled.value && !isReadonly.value,\n onError: (error: Error) => {\n console.error('Lexical error:', error)\n }\n })\n\n editorInstance.setRootElement(editorContainer.value)\n\n // Register plugins\n cleanupFns.push(registerRichText(editorInstance))\n cleanupFns.push(registerList(editorInstance))\n cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))\n\n // Set initial value\n if (model.value) {\n setEditorContent(editorInstance, model.value)\n }\n\n // Listen for content changes\n cleanupFns.push(\n editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const root = $getRoot()\n const textContent = root.getTextContent()\n showPlaceholder.value = textContent.trim().length === 0\n\n if (isComposing) return\n\n let value: string\n if (props.format === 'json') {\n value = JSON.stringify(editorState.toJSON())\n } else {\n value = $generateHtmlFromNodes(editorInstance)\n }\n\n // Avoid circular updates: only emit if content really changed\n if (value !== model.value) {\n isComposing = true\n model.value = value\n // Use microtask to reset after Vue processes the update\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n })\n )\n\n // Composing event listeners for IME\n const rootElement = editorInstance.getRootElement()\n if (rootElement) {\n const onCompositionStart = () => {\n isComposing = true\n }\n const onCompositionEnd = () => {\n isComposing = false\n }\n rootElement.addEventListener('compositionstart', onCompositionStart)\n rootElement.addEventListener('compositionend', onCompositionEnd)\n cleanupFns.push(() => {\n rootElement.removeEventListener('compositionstart', onCompositionStart)\n rootElement.removeEventListener('compositionend', onCompositionEnd)\n })\n }\n\n editor.value = editorInstance\n}\n\nfunction setEditorContent(editorInstance: LexicalEditor, value: string) {\n editorInstance.update(() => {\n const root = $getRoot()\n root.clear()\n\n if (props.format === 'json') {\n try {\n const parsedState = editorInstance.parseEditorState(value)\n editorInstance.setEditorState(parsedState)\n } catch {\n // If JSON parse fails, treat as empty\n root.append($createParagraphNode())\n }\n } else {\n // HTML format\n const parser = new DOMParser()\n const dom = parser.parseFromString(value, 'text/html')\n const nodes = $generateNodesFromDOM(editorInstance, dom)\n root.append(...nodes)\n }\n })\n}\n\n// Watch external model changes\nwatch(model, (newVal) => {\n if (!editor.value || isComposing) return\n\n const editorInstance = editor.value\n\n // Compare current content to avoid circular updates\n editorInstance.getEditorState().read(() => {\n let currentValue: string\n if (props.format === 'json') {\n currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())\n } else {\n currentValue = $generateHtmlFromNodes(editorInstance)\n }\n\n if (currentValue !== newVal) {\n isComposing = true\n setEditorContent(editorInstance, newVal ?? '')\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n})\n\n// Watch disabled/readonly changes\nwatch([isDisabled, isReadonly], () => {\n if (editor.value) {\n editor.value.setEditable(!isDisabled.value && !isReadonly.value)\n }\n})\n\nonMounted(() => {\n initEditor()\n})\n\nonBeforeUnmount(() => {\n cleanupFns.forEach((fn) => fn())\n cleanupFns = []\n editor.value = null\n})\n</script>\n"],"mappings":"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"}
|
|
@@ -12,9 +12,9 @@ declare const __VLS_export: _$vue.DefineComponent<RichTextEditorProps & {
|
|
|
12
12
|
}> & Readonly<{
|
|
13
13
|
"onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
|
|
14
14
|
}>, {
|
|
15
|
+
placeholder: string;
|
|
15
16
|
disabled: boolean;
|
|
16
17
|
readonly: boolean;
|
|
17
|
-
placeholder: string;
|
|
18
18
|
format: RichTextFormat;
|
|
19
19
|
toolbar: ToolbarItem[];
|
|
20
20
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
/** 暗色:data-theme 与系统偏好,与 UITheme.injectBuiltInThemes 选择器策略一致 */
|
|
18
18
|
.u-rich-text-editor {
|
|
19
19
|
width: 100%;
|
|
20
|
-
border: 1px solid var(--u-border-color);
|
|
20
|
+
border: 1px solid var(--u-border-muted-color);
|
|
21
21
|
border-radius: var(--u-radius-default);
|
|
22
22
|
background-color: var(--u-color-bg);
|
|
23
23
|
transition: border-color 0.25s ease;
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
appearance: none;
|
|
101
101
|
padding: 2px 24px 2px 8px;
|
|
102
102
|
height: 28px;
|
|
103
|
-
border: 1px solid var(--u-border-color);
|
|
103
|
+
border: 1px solid var(--u-border-muted-color);
|
|
104
104
|
border-radius: 4px;
|
|
105
105
|
background-color: transparent;
|
|
106
106
|
color: var(--u-text-color);
|
|
@@ -151,14 +151,14 @@
|
|
|
151
151
|
}
|
|
152
152
|
.u-rich-text-editor.is-disabled {
|
|
153
153
|
background-color: var(--u-color-disabled);
|
|
154
|
-
border-color: var(--u-border-color);
|
|
154
|
+
border-color: var(--u-border-muted-color);
|
|
155
155
|
cursor: not-allowed;
|
|
156
156
|
}
|
|
157
157
|
.u-rich-text-editor.is-disabled:hover {
|
|
158
|
-
border-color: var(--u-border-color);
|
|
158
|
+
border-color: var(--u-border-muted-color);
|
|
159
159
|
}
|
|
160
160
|
.u-rich-text-editor.is-readonly:hover {
|
|
161
|
-
border-color: var(--u-border-color);
|
|
161
|
+
border-color: var(--u-border-muted-color);
|
|
162
162
|
}
|
|
163
163
|
|
|
164
164
|
.u-rte-paragraph {
|
|
@@ -6,8 +6,8 @@ import input_default from "../input/input.js";
|
|
|
6
6
|
import { useOptions } from "./use-options.js";
|
|
7
7
|
import { useKeyboard } from "./use-keyboard.js";
|
|
8
8
|
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useModel, watch, withCtx, withDirectives } from "vue";
|
|
9
|
-
import { FORM_EMPTY_CONTENT, bem, scrollIntoContainerView, withUnit } from "@veltra/utils";
|
|
10
|
-
import {
|
|
9
|
+
import { FORM_EMPTY_CONTENT, bem, injectFormContext, scrollIntoContainerView, withUnit } from "@veltra/utils";
|
|
10
|
+
import { useFormFallbackProps, useVirtualizer } from "@veltra/compositions";
|
|
11
11
|
import { o } from "@cat-kit/core";
|
|
12
12
|
import { ArrowDown, Search } from "@veltra/icons/normal";
|
|
13
13
|
import { vFocus } from "@veltra/directives";
|
|
@@ -66,7 +66,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
66
66
|
const emit = __emit;
|
|
67
67
|
const cls = bem("select");
|
|
68
68
|
const optionClass = cls.e("option");
|
|
69
|
-
const { formProps } =
|
|
69
|
+
const { formProps } = injectFormContext();
|
|
70
70
|
const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
|
|
71
71
|
size: "default",
|
|
72
72
|
disabled: false,
|
|
@@ -77,7 +77,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
77
77
|
const selected = shallowRef();
|
|
78
78
|
const displayedValue = computed(() => {
|
|
79
79
|
if (label.value) return label.value;
|
|
80
|
-
return selected.value ? o(selected.value).get(props.labelKey) : String(props.modelValue);
|
|
80
|
+
return selected.value ? o(selected.value).get(props.labelKey) : String(props.modelValue ?? "");
|
|
81
81
|
});
|
|
82
82
|
const dropdownRef = shallowRef();
|
|
83
83
|
const scrollRef = shallowRef();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","names":["$slots"],"sources":["../../../src/components/select/select.vue"],"sourcesContent":["<template>\n <u-dropdown\n v-if=\"!readonly\"\n trigger=\"click\"\n :class=\"[cls.b, bem.is('disabled', disabled)]\"\n ref=\"dropdownRef\"\n v-model:visible=\"dropdownVisible\"\n :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n :content-style=\"contentStyle\"\n :disabled=\"disabled\"\n :min-width=\"minWidth\"\n :width=\"width\"\n @keydown=\"handleKeydown\"\n @update:visible=\"handleDropdownVisible\"\n >\n <!-- 触发 -->\n <template #trigger>\n <u-input\n :size=\"size\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder\"\n :clearable=\"clearable\"\n :model-value=\"displayedValue\"\n @clear=\"handleClear\"\n @keydown=\"handleKeydown\"\n native-readonly\n >\n <template #prefix v-if=\"$slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n\n <template #suffix>\n <u-icon :class=\"cls.e('arrow')\">\n <ArrowDown />\n </u-icon>\n </template>\n </u-input>\n </template>\n\n <!-- 下拉内容 -->\n <template #content>\n <!-- 过滤器 -->\n <div v-if=\"filterable\" :class=\"cls.e('content-filter')\">\n <u-input placeholder=\"输入关键字进行搜索\" tabindex=\"0\" v-focus v-model=\"queryString\">\n <template #suffix>\n <u-icon>\n <Search />\n </u-icon>\n </template>\n </u-input>\n </div>\n\n <!--\n 单选列表。虚拟化启用时,内容容器 height 由 useVirtualizer 命令式写入;\n 此处 content-style 仅承担 grid 相关样式,避免 height 变化触发模板重渲染。\n -->\n <u-scroll\n v-if=\"options.length\"\n tag=\"ul\"\n :class=\"cls.e('options')\"\n ref=\"scrollRef\"\n :content-class=\"[\n cls.e('options-wrap'),\n bem.is('virtual', virtualEnabled),\n bem.is('grid', !!grid)\n ]\"\n :content-style=\"{\n gridTemplateColumns: grid ? `repeat(${grid.cols}, minmax(0px, 1fr))` : undefined,\n gridGap: grid ? withUnit(grid.gap, 'px') : undefined\n }\"\n >\n <template v-if=\"virtualEnabled\">\n <!-- @vue-ignore -->\n <li\n v-for=\"{ option, index, val, label, key, offset } of virtualOptions\"\n :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n @click=\"handleSelect(option, index)\"\n :key=\"key\"\n :style=\"{ transform: `translateY(${offset}px)` }\"\n :data-index=\"index\"\n :ref=\"(el) => measureElement(index, el as Element | null)\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ label }}\n </slot>\n </li>\n </template>\n\n <template v-else>\n <li\n v-for=\"(option, index) of options\"\n :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n @click=\"handleSelect(option, index)\"\n :data-index=\"index\"\n :title=\"o(option).get(labelKey)\"\n :key=\"o(option).get(valueKey)\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ o(option).get(labelKey) }}\n </slot>\n </li>\n </template>\n </u-scroll>\n\n <div v-else :class=\"cls.e('empty')\">\n <UEmpty />\n </div>\n </template>\n </u-dropdown>\n\n <template v-else>\n {{ displayedValue || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { vFocus } from '@veltra/directives'\nimport { ArrowDown, Search } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, watch } from 'vue'\n\nimport type {\n SelectEmits,\n SelectProps,\n _SelectExposed,\n DropdownExposed,\n ScrollExposed\n} from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UEmpty } from '../empty'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UScroll } from '../scroll'\nimport { useKeyboard } from './use-keyboard'\nimport { useOptions } from './use-options'\n\ndefineOptions({ name: 'Select' })\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n labelKey: 'label',\n valueKey: 'value',\n placeholder: '请选择',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<SelectEmits>()\n\ndefineSlots<{\n /** 前缀插槽 */\n prefix?: () => any\n /** 默认插槽 */\n default?: (scope: { option: Record<string, any>; index: number }) => any\n}>()\n\nconst cls = bem('select')\n\nconst optionClass = cls.e('option')\n\nconst { formProps } = useFormComponent()\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst currentIndex = shallowRef(-1)\nconst label = defineModel('text')\nconst selected = shallowRef<Record<string, any>>()\n\nconst displayedValue = computed(() => {\n if (label.value) return label.value\n\n return selected.value ? o(selected.value).get(props.labelKey) : String(props.modelValue)\n})\n\nconst dropdownRef = shallowRef<DropdownExposed>()\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst filterable = computed(() => {\n return props.filterable || typeof props.options === 'function'\n})\n\nconst { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions } = useOptions({\n props\n})\n\n// TODO: 优化\nlet userSelecting = false\nfunction lock() {\n userSelecting = true\n}\n\nfunction unlock() {\n nextTick(() => {\n userSelecting = false\n })\n}\n\n// 回显\nwatch(\n [() => props.modelValue, options],\n ([modelValue, options]) => {\n if (userSelecting) return\n\n if (!options?.length) return\n\n if (modelValue !== undefined) {\n const { valueKey } = props\n currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)\n\n selected.value = options[currentIndex.value]\n } else {\n currentIndex.value = -1\n selected.value = undefined\n }\n },\n { immediate: true }\n)\n\nconst baseVirtualEnabled = computed(() => options.value.length > 80)\nconst virtualEnabled = computed(() => baseVirtualEnabled.value && !props.grid)\n\nconst { virtualizer, items } = useVirtualizer({\n count: computed(() => options.value.length),\n scrollEl: () => scrollRef.value?.containerRef ?? null,\n contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),\n gap: 4,\n estimateSize: () => 40\n})\n\nconst virtualOptions = computed(() => {\n const _options = options.value\n const { labelKey, valueKey } = props\n return items.value.map((item) => {\n const option = _options[item.index]!\n return {\n option,\n index: item.index,\n label: o(option).get(labelKey),\n val: o(option).get(valueKey),\n key: item.index,\n offset: item.start\n }\n })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n virtualizer.measureElement(index, el)\n\nfunction scrollTo(index: number): void {\n virtualizer.scrollToIndex(index, { align: 'center' })\n}\n\nwatch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {\n if (!scroll || !props.modelValue) return\n\n if (virtualEnabled) {\n const index = options.value.findIndex((option) => option === selected.value)\n index !== -1 && dropdownVisible.value && nextTick(() => scrollTo(index))\n } else {\n const selectedEl = scroll?.contentRef?.getElementsByClassName('is-selected')[0]\n if (selectedEl) {\n scrollIntoContainerView(selectedEl as HTMLElement, scroll.containerRef ?? null)\n }\n }\n})\n\nconst dropdownVisible = shallowRef(false)\n\nwatch(dropdownVisible, (v) => {\n if (!v) {\n queryString.value = ''\n }\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n if (!visible) {\n queryString.value = ''\n }\n}\n\n/** 单选 */\nconst handleSelect = (option: Record<string, any>, index: number) => {\n lock()\n selected.value = option\n\n emit('update:modelValue', option?.[props.valueKey])\n label.value = option?.[props.labelKey]\n emit('change', option)\n if (option.__isTemp) {\n temOptionsToCreatedOptions()\n }\n currentIndex.value = index\n dropdownRef.value?.close()\n\n unlock()\n}\n\n/** 清除选项 */\nconst handleClear = () => {\n lock()\n selected.value = undefined\n clearCreatedOptions()\n emit('update:modelValue', undefined)\n emit('change', undefined)\n unlock()\n}\n\nfunction getCurrentEl() {\n return scrollRef.value?.contentRef?.querySelector('li.is-selected') as HTMLElement | undefined\n}\n\nconst { handleKeydown } = useKeyboard({\n options,\n currentIndex,\n selectOption: handleSelect,\n getCurrentEl\n})\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select.js","names":["$slots"],"sources":["../../../src/components/select/select.vue"],"sourcesContent":["<template>\n <u-dropdown\n v-if=\"!readonly\"\n trigger=\"click\"\n :class=\"[cls.b, bem.is('disabled', disabled)]\"\n ref=\"dropdownRef\"\n v-model:visible=\"dropdownVisible\"\n :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n :content-style=\"contentStyle\"\n :disabled=\"disabled\"\n :min-width=\"minWidth\"\n :width=\"width\"\n @keydown=\"handleKeydown\"\n @update:visible=\"handleDropdownVisible\"\n >\n <!-- 触发 -->\n <template #trigger>\n <u-input\n :size=\"size\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder\"\n :clearable=\"clearable\"\n :model-value=\"displayedValue\"\n @clear=\"handleClear\"\n @keydown=\"handleKeydown\"\n native-readonly\n >\n <template #prefix v-if=\"$slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n\n <template #suffix>\n <u-icon :class=\"cls.e('arrow')\">\n <ArrowDown />\n </u-icon>\n </template>\n </u-input>\n </template>\n\n <!-- 下拉内容 -->\n <template #content>\n <!-- 过滤器 -->\n <div v-if=\"filterable\" :class=\"cls.e('content-filter')\">\n <u-input placeholder=\"输入关键字进行搜索\" tabindex=\"0\" v-focus v-model=\"queryString\">\n <template #suffix>\n <u-icon>\n <Search />\n </u-icon>\n </template>\n </u-input>\n </div>\n\n <!--\n 单选列表。虚拟化启用时,内容容器 height 由 useVirtualizer 命令式写入;\n 此处 content-style 仅承担 grid 相关样式,避免 height 变化触发模板重渲染。\n -->\n <u-scroll\n v-if=\"options.length\"\n tag=\"ul\"\n :class=\"cls.e('options')\"\n ref=\"scrollRef\"\n :content-class=\"[\n cls.e('options-wrap'),\n bem.is('virtual', virtualEnabled),\n bem.is('grid', !!grid)\n ]\"\n :content-style=\"{\n gridTemplateColumns: grid ? `repeat(${grid.cols}, minmax(0px, 1fr))` : undefined,\n gridGap: grid ? withUnit(grid.gap, 'px') : undefined\n }\"\n >\n <template v-if=\"virtualEnabled\">\n <!-- @vue-ignore -->\n <li\n v-for=\"{ option, index, val, label, key, offset } of virtualOptions\"\n :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n @click=\"handleSelect(option, index)\"\n :key=\"key\"\n :style=\"{ transform: `translateY(${offset}px)` }\"\n :data-index=\"index\"\n :ref=\"(el) => measureElement(index, el as Element | null)\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ label }}\n </slot>\n </li>\n </template>\n\n <template v-else>\n <li\n v-for=\"(option, index) of options\"\n :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n @click=\"handleSelect(option, index)\"\n :data-index=\"index\"\n :title=\"o(option).get(labelKey)\"\n :key=\"o(option).get(valueKey)\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ o(option).get(labelKey) }}\n </slot>\n </li>\n </template>\n </u-scroll>\n\n <div v-else :class=\"cls.e('empty')\">\n <UEmpty />\n </div>\n </template>\n </u-dropdown>\n\n <template v-else>\n {{ displayedValue || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { vFocus } from '@veltra/directives'\nimport { ArrowDown, Search } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, watch } from 'vue'\n\nimport type {\n SelectEmits,\n SelectProps,\n _SelectExposed,\n DropdownExposed,\n ScrollExposed\n} from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UEmpty } from '../empty'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UScroll } from '../scroll'\nimport { useKeyboard } from './use-keyboard'\nimport { useOptions } from './use-options'\n\ndefineOptions({ name: 'Select' })\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n labelKey: 'label',\n valueKey: 'value',\n placeholder: '请选择',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<SelectEmits>()\n\ndefineSlots<{\n /** 前缀插槽 */\n prefix?: () => any\n /** 默认插槽 */\n default?: (scope: { option: Record<string, any>; index: number }) => any\n}>()\n\nconst cls = bem('select')\n\nconst optionClass = cls.e('option')\n\nconst { formProps } = injectFormContext()\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst currentIndex = shallowRef(-1)\nconst label = defineModel('text')\nconst selected = shallowRef<Record<string, any>>()\n\nconst displayedValue = computed(() => {\n if (label.value) return label.value\n\n return selected.value ? o(selected.value).get(props.labelKey) : String(props.modelValue ?? '')\n})\n\nconst dropdownRef = shallowRef<DropdownExposed>()\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst filterable = computed(() => {\n return props.filterable || typeof props.options === 'function'\n})\n\nconst { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions } = useOptions({\n props\n})\n\n// TODO: 优化\nlet userSelecting = false\nfunction lock() {\n userSelecting = true\n}\n\nfunction unlock() {\n nextTick(() => {\n userSelecting = false\n })\n}\n\n// 回显\nwatch(\n [() => props.modelValue, options],\n ([modelValue, options]) => {\n if (userSelecting) return\n\n if (!options?.length) return\n\n if (modelValue !== undefined) {\n const { valueKey } = props\n currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)\n\n selected.value = options[currentIndex.value]\n } else {\n currentIndex.value = -1\n selected.value = undefined\n }\n },\n { immediate: true }\n)\n\nconst baseVirtualEnabled = computed(() => options.value.length > 80)\nconst virtualEnabled = computed(() => baseVirtualEnabled.value && !props.grid)\n\nconst { virtualizer, items } = useVirtualizer({\n count: computed(() => options.value.length),\n scrollEl: () => scrollRef.value?.containerRef ?? null,\n contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),\n gap: 4,\n estimateSize: () => 40\n})\n\nconst virtualOptions = computed(() => {\n const _options = options.value\n const { labelKey, valueKey } = props\n return items.value.map((item) => {\n const option = _options[item.index]!\n return {\n option,\n index: item.index,\n label: o(option).get(labelKey),\n val: o(option).get(valueKey),\n key: item.index,\n offset: item.start\n }\n })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n virtualizer.measureElement(index, el)\n\nfunction scrollTo(index: number): void {\n virtualizer.scrollToIndex(index, { align: 'center' })\n}\n\nwatch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {\n if (!scroll || !props.modelValue) return\n\n if (virtualEnabled) {\n const index = options.value.findIndex((option) => option === selected.value)\n index !== -1 && dropdownVisible.value && nextTick(() => scrollTo(index))\n } else {\n const selectedEl = scroll?.contentRef?.getElementsByClassName('is-selected')[0]\n if (selectedEl) {\n scrollIntoContainerView(selectedEl as HTMLElement, scroll.containerRef ?? null)\n }\n }\n})\n\nconst dropdownVisible = shallowRef(false)\n\nwatch(dropdownVisible, (v) => {\n if (!v) {\n queryString.value = ''\n }\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n if (!visible) {\n queryString.value = ''\n }\n}\n\n/** 单选 */\nconst handleSelect = (option: Record<string, any>, index: number) => {\n lock()\n selected.value = option\n\n emit('update:modelValue', option?.[props.valueKey])\n label.value = option?.[props.labelKey]\n emit('change', option)\n if (option.__isTemp) {\n temOptionsToCreatedOptions()\n }\n currentIndex.value = index\n dropdownRef.value?.close()\n\n unlock()\n}\n\n/** 清除选项 */\nconst handleClear = () => {\n lock()\n selected.value = undefined\n clearCreatedOptions()\n emit('update:modelValue', undefined)\n emit('change', undefined)\n unlock()\n}\n\nfunction getCurrentEl() {\n return scrollRef.value?.contentRef?.querySelector('li.is-selected') as HTMLElement | undefined\n}\n\nconst { handleKeydown } = useKeyboard({\n options,\n currentIndex,\n selectOption: handleSelect,\n getCurrentEl\n})\n</script>\n"],"mappings":"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"}
|
|
@@ -26,12 +26,12 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
|
|
|
26
26
|
"onUpdate:text"?: ((value: any) => any) | undefined;
|
|
27
27
|
"onUpdate:label"?: ((label?: string | undefined) => any) | undefined;
|
|
28
28
|
}>, {
|
|
29
|
-
disabled: boolean;
|
|
30
29
|
labelKey: string;
|
|
31
30
|
valueKey: string;
|
|
32
|
-
readonly: boolean;
|
|
33
|
-
placeholder: string;
|
|
34
31
|
clearable: boolean;
|
|
32
|
+
placeholder: string;
|
|
33
|
+
disabled: boolean;
|
|
34
|
+
readonly: boolean;
|
|
35
35
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
36
36
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
37
37
|
declare const _default: typeof __VLS_export;
|
|
@@ -2,8 +2,8 @@ import { sliderContextKey } from "./di.js";
|
|
|
2
2
|
import _sfc_main$1 from "./slider-thumb.js";
|
|
3
3
|
import { useSlider } from "./use-slider.js";
|
|
4
4
|
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, normalizeClass, normalizeStyle, openBlock, provide, renderList, toDisplayString, unref, watch, withModifiers } from "vue";
|
|
5
|
-
import { bem } from "@veltra/utils";
|
|
6
|
-
import {
|
|
5
|
+
import { bem, injectFormContext } from "@veltra/utils";
|
|
6
|
+
import { useFormFallbackProps, useUserAction } from "@veltra/compositions";
|
|
7
7
|
//#region src/components/slider/slider.vue
|
|
8
8
|
const _hoisted_1 = { key: 1 };
|
|
9
9
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
@@ -35,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
35
35
|
const props = __props;
|
|
36
36
|
const emit = __emit;
|
|
37
37
|
const cls = bem("slider");
|
|
38
|
-
const { formProps } =
|
|
38
|
+
const { formProps } = injectFormContext();
|
|
39
39
|
const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props]);
|
|
40
40
|
const className = computed(() => {
|
|
41
41
|
return [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","names":[],"sources":["../../../src/components/slider/slider.vue"],"sourcesContent":["<template>\n <div v-if=\"!readonly\" :class=\"className\">\n <div :class=\"cls.e('track')\" ref=\"sliderRef\" @click=\"handleClickSlider\">\n <div :class=\"cls.e('bar')\" :style=\"barStyles\" />\n\n <slider-thumb v-model=\"offset1\" @click.stop />\n <slider-thumb v-if=\"range\" v-model=\"offset2\" @click.stop />\n\n <div\n v-for=\"tick in ticks\"\n :style=\"{ [vertical ? 'bottom' : 'left']: `${tick}%` }\"\n :class=\"cls.e('tick')\"\n />\n </div>\n </div>\n\n <div v-else>\n {{ props.modelValue }}\n </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends number | [number, number]\">\nimport {
|
|
1
|
+
{"version":3,"file":"slider.js","names":[],"sources":["../../../src/components/slider/slider.vue"],"sourcesContent":["<template>\n <div v-if=\"!readonly\" :class=\"className\">\n <div :class=\"cls.e('track')\" ref=\"sliderRef\" @click=\"handleClickSlider\">\n <div :class=\"cls.e('bar')\" :style=\"barStyles\" />\n\n <slider-thumb v-model=\"offset1\" @click.stop />\n <slider-thumb v-if=\"range\" v-model=\"offset2\" @click.stop />\n\n <div\n v-for=\"tick in ticks\"\n :style=\"{ [vertical ? 'bottom' : 'left']: `${tick}%` }\"\n :class=\"cls.e('tick')\"\n />\n </div>\n </div>\n\n <div v-else>\n {{ props.modelValue }}\n </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends number | [number, number]\">\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, watch } from 'vue'\n\nimport type { SliderProps, SliderEmits } from '../../types'\nimport { sliderContextKey } from './di'\nimport SliderThumb from './slider-thumb.vue'\nimport { useSlider } from './use-slider'\n\ndefineOptions({\n name: 'Slider'\n})\n\nconst props = withDefaults(defineProps<SliderProps<T>>(), {\n min: 0,\n max: 100,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<SliderEmits<T>>()\n\nconst cls = bem('slider')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst className = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('range', props.range),\n bem.is('horizontal', !props.vertical),\n bem.is('vertical', props.vertical)\n ]\n})\n\nconst {\n offset1,\n offset2,\n sliderRef,\n slideRange,\n sliderSize,\n sliderOffset2Value,\n value2SliderOffset,\n getOffsetByStep\n} = useSlider(props)\n\nconst barStyles = computed(() => {\n const { vertical } = props\n const offsetProp = vertical ? 'bottom' : 'left'\n const sizeProp = vertical ? 'height' : 'width'\n\n if (!props.range) {\n return {\n [offsetProp]: 0,\n [sizeProp]: `${Math.abs(offset1.value)}px`\n }\n }\n return {\n [offsetProp]: `${Math.min(Math.abs(offset1.value), Math.abs(offset2.value))}px`,\n [sizeProp]: `${Math.abs(offset1.value - offset2.value)}px`\n }\n})\n\nconst { userAction, isUserActive } = useUserAction()\n\nwatch(\n [sliderSize, ...['modelValue', 'range', 'max', 'min', 'vertical'].map((k) => () => props[k])],\n ([size, value, range]) => {\n if (isUserActive()) return\n if (value === undefined || size === 0) return\n\n if (range) {\n offset1.value = value2SliderOffset((value as [number, number])[0])\n offset2.value = value2SliderOffset((value as [number, number])[1])\n } else {\n offset1.value = value2SliderOffset(value as number)\n }\n },\n { immediate: true }\n)\n\nconst ticks = computed(() => {\n const { step, min, max } = props\n if (!step) return []\n const tickLength = Math.ceil((max! - min!) / step)\n const offsetPercent = (step / (max! - min!)) * 100\n\n return [...Array.from({ length: tickLength }, (_, i) => i * offsetPercent), 100]\n})\n\nwatch(\n [offset1, offset2],\n userAction((v) => {\n if (props.range) {\n emit('update:modelValue', v.map(sliderOffset2Value).sort() as T)\n } else {\n emit('update:modelValue', sliderOffset2Value(v[0]) as T)\n }\n })\n)\n\nfunction handleClickSlider(e: MouseEvent) {\n if (disabled.value || props.range) return\n\n // 获取点击位置相对于滑块的偏移量\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()\n\n offset1.value = getOffsetByStep(e.clientX - rect.left)\n}\n\nprovide(sliderContextKey, {\n sliderProps: props,\n disabled,\n range: slideRange,\n cls,\n getOffsetByStep\n})\n</script>\n"],"mappings":"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"}
|
|
@@ -15,8 +15,8 @@ declare const __VLS_base: _$vue.DefineComponent<StepsProps, {}, {}, {}, {}, _$vu
|
|
|
15
15
|
"onUpdate:current"?: ((value?: string | number | undefined) => any) | undefined;
|
|
16
16
|
"onItem-click"?: ((item: Record<string, any>, index: number) => any) | undefined;
|
|
17
17
|
}>, {
|
|
18
|
-
direction: "horizontal" | "vertical";
|
|
19
18
|
labelKey: string;
|
|
19
|
+
direction: "horizontal" | "vertical";
|
|
20
20
|
finishedStepType: _$_veltra_utils0.ColorType;
|
|
21
21
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
22
22
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
align-items: center;
|
|
72
72
|
border-radius: 100px;
|
|
73
73
|
background-color: var(--u-bg-color-bottom);
|
|
74
|
-
border: 1px solid var(--u-border-color);
|
|
74
|
+
border: 1px solid var(--u-border-muted-color);
|
|
75
75
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
76
76
|
padding: 2px;
|
|
77
77
|
flex-shrink: 0;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, openBlock, toDisplayString, unref, useModel, withModifiers } from "vue";
|
|
2
|
-
import { bem } from "@veltra/utils";
|
|
3
|
-
import {
|
|
2
|
+
import { bem, injectFormContext } from "@veltra/utils";
|
|
3
|
+
import { useFormFallbackProps } from "@veltra/compositions";
|
|
4
4
|
//#region src/components/switch/switch.vue
|
|
5
5
|
const _hoisted_1 = ["checked", "disabled"];
|
|
6
6
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
@@ -33,7 +33,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
33
33
|
const emit = __emit;
|
|
34
34
|
const model = useModel(__props, "modelValue");
|
|
35
35
|
const cls = bem("switch");
|
|
36
|
-
const { formProps } =
|
|
36
|
+
const { formProps } = injectFormContext();
|
|
37
37
|
const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props]);
|
|
38
38
|
const switchClass = computed(() => {
|
|
39
39
|
return [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/switch/switch.vue"],"sourcesContent":["<template>\n <label :class=\"switchClass\" @click.stop>\n <input\n type=\"checkbox\"\n :class=\"cls.e('native')\"\n hidden\n :checked=\"model\"\n :disabled=\"disabled\"\n @input=\"handleInput\"\n />\n <span :class=\"[cls.e('text'), bem.is('selected', !model)]\" v-if=\"inactiveText\">\n {{ inactiveText }}\n </span>\n\n <div :class=\"cls.e('button')\">\n <span :class=\"cls.e('thumb')\"></span>\n </div>\n\n <span v-if=\"activeText\" :class=\"[cls.e('text'), bem.is('selected', model)]\">\n {{ activeText }}\n </span>\n </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport {
|
|
1
|
+
{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/switch/switch.vue"],"sourcesContent":["<template>\n <label :class=\"switchClass\" @click.stop>\n <input\n type=\"checkbox\"\n :class=\"cls.e('native')\"\n hidden\n :checked=\"model\"\n :disabled=\"disabled\"\n @input=\"handleInput\"\n />\n <span :class=\"[cls.e('text'), bem.is('selected', !model)]\" v-if=\"inactiveText\">\n {{ inactiveText }}\n </span>\n\n <div :class=\"cls.e('button')\">\n <span :class=\"cls.e('thumb')\"></span>\n </div>\n\n <span v-if=\"activeText\" :class=\"[cls.e('text'), bem.is('selected', model)]\">\n {{ activeText }}\n </span>\n </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { SwitchEmits, SwitchProps, _SwitchExposed } from '../../types'\n\ndefineOptions({\n name: 'Switch'\n})\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<SwitchEmits>()\n\nconst model = defineModel<boolean>()\n\nconst cls = bem('switch')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst switchClass = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('readonly', readonly.value),\n bem.is('checked', model.value)\n ]\n})\n\nconst handleInput = (e: Event) => {\n if (disabled.value || readonly.value) return\n\n const newValue = (e.target as HTMLInputElement).checked\n model.value = newValue\n emit('change', newValue)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAoB,SAAA,aAAC;EAEnC,MAAM,MAAM,IAAI,SAAQ;EAExB,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,CAAA;EAElF,MAAM,cAAc,eAAe;AACjC,UAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAM;IACjB,IAAI,GAAG,YAAY,SAAS,MAAM;IAClC,IAAI,GAAG,YAAY,SAAS,MAAM;IAClC,IAAI,GAAG,WAAW,MAAM,MAAK;IAC/B;IACD;EAED,MAAM,eAAe,MAAa;AAChC,OAAI,SAAS,SAAS,SAAS,MAAO;GAEtC,MAAM,WAAY,EAAE,OAA4B;AAChD,SAAM,QAAQ;AACd,QAAK,UAAU,SAAQ;;;uBAjEvB,mBAoBQ,SAAA;IApBA,OAAK,eAAE,YAAA,MAAW;IAAG,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;;IACrC,mBAOE,SAAA;KANA,MAAK;KACJ,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA;KACb,QAAA;KACC,SAAS,MAAA;KACT,UAAU,MAAA,SAAQ;KAClB,SAAO;;IAEuD,QAAA,gBAAA,WAAA,EAAjE,mBAEO,QAAA;;KAFA,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,EAAC,OAAA,EAAU,MAAA,IAAG,CAAC,GAAE,YAAA,CAAc,MAAA,MAAK,CAAA,CAAA;uBAClD,QAAA,aAAY,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA;IAGjB,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA,EAAA,EAAA,CAChB,mBAAqC,QAAA,EAA9B,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA,EAAA,EAAA,MAAA,EAAA,CAAA,EAAA,EAAA;IAGT,QAAA,cAAA,WAAA,EAAZ,mBAEO,QAAA;;KAFkB,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,EAAC,OAAA,EAAU,MAAA,IAAG,CAAC,GAAE,YAAa,MAAA,MAAK,CAAA,CAAA;uBACnE,QAAA,WAAU,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA"}
|
|
@@ -25,17 +25,17 @@ type __VLS_Slots = {
|
|
|
25
25
|
declare const __VLS_base: _$vue.DefineComponent<TableProps, _TableExposed, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
|
|
26
26
|
"update:selected": (value: Record<string, any> | undefined) => any;
|
|
27
27
|
"update:checked": (value: Record<string, any>[]) => any;
|
|
28
|
-
"update:current": (row?: TableRow | undefined) => any;
|
|
29
28
|
"update:rows": (rows: TableRow[]) => any;
|
|
30
29
|
"update:forest": (rows?: _$_cat_kit_core0.Forest<Record<string, unknown>, any> | undefined) => any;
|
|
30
|
+
"update:current": (row?: TableRow | undefined) => any;
|
|
31
31
|
"cell-click": (row: TableRow, column: TableColumn, ev: MouseEvent) => any;
|
|
32
32
|
"row-click": (row: TableRow, ev: MouseEvent) => any;
|
|
33
33
|
}, string, _$vue.PublicProps, Readonly<TableProps> & Readonly<{
|
|
34
34
|
"onUpdate:selected"?: ((value: Record<string, any> | undefined) => any) | undefined;
|
|
35
35
|
"onUpdate:checked"?: ((value: Record<string, any>[]) => any) | undefined;
|
|
36
|
-
"onUpdate:current"?: ((row?: TableRow | undefined) => any) | undefined;
|
|
37
36
|
"onUpdate:rows"?: ((rows: TableRow[]) => any) | undefined;
|
|
38
37
|
"onUpdate:forest"?: ((rows?: _$_cat_kit_core0.Forest<Record<string, unknown>, any> | undefined) => any) | undefined;
|
|
38
|
+
"onUpdate:current"?: ((row?: TableRow | undefined) => any) | undefined;
|
|
39
39
|
"onCell-click"?: ((row: TableRow, column: TableColumn, ev: MouseEvent) => any) | undefined;
|
|
40
40
|
"onRow-click"?: ((row: TableRow, ev: MouseEvent) => any) | undefined;
|
|
41
41
|
}>, {
|
|
@@ -15,17 +15,17 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
|
15
15
|
declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
|
16
16
|
"update:modelValue": (value: string | undefined) => any;
|
|
17
17
|
} & {
|
|
18
|
+
"update:modelValue": (value: string) => any;
|
|
18
19
|
close: (item: TabItem, index: number) => any;
|
|
19
20
|
click: (item: TabItem, index: number) => any;
|
|
20
|
-
"update:modelValue": (value: string) => any;
|
|
21
21
|
}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
22
23
|
onClose?: ((item: TabItem, index: number) => any) | undefined;
|
|
23
24
|
onClick?: ((item: TabItem, index: number) => any) | undefined;
|
|
24
|
-
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
25
25
|
}>, {
|
|
26
26
|
closable: boolean;
|
|
27
|
-
rounded: boolean;
|
|
28
27
|
position: "top" | "bottom";
|
|
28
|
+
rounded: boolean;
|
|
29
29
|
block: boolean;
|
|
30
30
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
31
31
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -14,17 +14,17 @@ type __VLS_Slots = {} & { [K in NonNullable<typeof __VLS_2>]?: (props: typeof __
|
|
|
14
14
|
declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
|
15
15
|
"update:modelValue": (value: string | undefined) => any;
|
|
16
16
|
} & {
|
|
17
|
+
"update:modelValue": (value: string) => any;
|
|
17
18
|
close: (item: TabItem, index: number) => any;
|
|
18
19
|
click: (item: TabItem, index: number) => any;
|
|
19
|
-
"update:modelValue": (value: string) => any;
|
|
20
20
|
}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
21
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
21
22
|
onClose?: ((item: TabItem, index: number) => any) | undefined;
|
|
22
23
|
onClick?: ((item: TabItem, index: number) => any) | undefined;
|
|
23
|
-
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
24
24
|
}>, {
|
|
25
25
|
closable: boolean;
|
|
26
|
-
rounded: boolean;
|
|
27
26
|
position: "left" | "right";
|
|
27
|
+
rounded: boolean;
|
|
28
28
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
29
29
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
30
30
|
declare const _default: typeof __VLS_export;
|
|
@@ -10,17 +10,17 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
|
10
10
|
declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
|
11
11
|
"update:modelValue": (value: string | undefined) => any;
|
|
12
12
|
} & {
|
|
13
|
+
"update:modelValue": (value: string) => any;
|
|
13
14
|
close: (item: TabItem, index: number) => any;
|
|
14
15
|
click: (item: TabItem, index: number) => any;
|
|
15
|
-
"update:modelValue": (value: string) => any;
|
|
16
16
|
}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
17
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
17
18
|
onClose?: ((item: TabItem, index: number) => any) | undefined;
|
|
18
19
|
onClick?: ((item: TabItem, index: number) => any) | undefined;
|
|
19
|
-
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
20
20
|
}>, {
|
|
21
21
|
closable: boolean;
|
|
22
|
-
rounded: boolean;
|
|
23
22
|
position: "left" | "right" | "top" | "bottom";
|
|
23
|
+
rounded: boolean;
|
|
24
24
|
block: boolean;
|
|
25
25
|
keepAlive: boolean;
|
|
26
26
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _sfc_main$1 from "../icon/icon.js";
|
|
2
2
|
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx, withModifiers } from "vue";
|
|
3
|
-
import { bem } from "@veltra/utils";
|
|
4
|
-
import {
|
|
3
|
+
import { bem, injectFormContext } from "@veltra/utils";
|
|
4
|
+
import { useFormFallbackProps } from "@veltra/compositions";
|
|
5
5
|
import { Close } from "@veltra/icons/normal";
|
|
6
6
|
//#region src/components/tag/tag.vue
|
|
7
7
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
@@ -19,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
19
19
|
const cls = bem("tag");
|
|
20
20
|
const props = __props;
|
|
21
21
|
const emit = __emit;
|
|
22
|
-
const { formProps } =
|
|
22
|
+
const { formProps } = injectFormContext();
|
|
23
23
|
const { size } = useFormFallbackProps([formProps ?? {}, props], { size: "default" });
|
|
24
24
|
const handleClose = () => {
|
|
25
25
|
emit("close");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.js","names":[],"sources":["../../../src/components/tag/tag.vue"],"sourcesContent":["<template>\n <span :class=\"className\">\n <span :class=\"cls.e('content')\">\n <slot />\n </span>\n\n <u-icon v-if=\"closable\" @click.stop=\"handleClose\" :class=\"cls.e('icon-close')\">\n <Close />\n </u-icon>\n </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport {
|
|
1
|
+
{"version":3,"file":"tag.js","names":[],"sources":["../../../src/components/tag/tag.vue"],"sourcesContent":["<template>\n <span :class=\"className\">\n <span :class=\"cls.e('content')\">\n <slot />\n </span>\n\n <u-icon v-if=\"closable\" @click.stop=\"handleClose\" :class=\"cls.e('icon-close')\">\n <Close />\n </u-icon>\n </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { Close } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { TagEmits, TagProps } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({\n name: 'Tag'\n})\n\nconst cls = bem('tag')\n\nconst props = defineProps<TagProps>()\n\nconst emit = defineEmits<TagEmits>()\n\nconst { formProps } = injectFormContext()\nconst { size } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default'\n})\n\nconst handleClose = () => {\n emit('close')\n}\n\nconst className = computed(() => {\n const { type } = props\n return [\n cls.b,\n cls.m(size.value),\n type && cls.m('color-' + type),\n bem.is('round', props.round),\n bem.is('dark', props.dark)\n ]\n})\n\n// const classRound = computed(() => {\n// return [bem.is('round', props.round)]\n// })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA0BA,MAAM,MAAM,IAAI,MAAK;EAErB,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,EAAE,cAAc,mBAAkB;EACxC,MAAM,EAAE,SAAS,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAC9D,MAAM,WACP,CAAA;EAED,MAAM,oBAAoB;AACxB,QAAK,QAAO;;EAGd,MAAM,YAAY,eAAe;GAC/B,MAAM,EAAE,SAAS;AACjB,UAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAM;IACjB,QAAQ,IAAI,EAAE,WAAW,KAAK;IAC9B,IAAI,GAAG,SAAS,MAAM,MAAM;IAC5B,IAAI,GAAG,QAAQ,MAAM,KAAI;IAC3B;IACD;;uBAjDC,mBAQO,QAAA,EARA,OAAK,eAAE,UAAA,MAAS,EAAA,EAAA,CACrB,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,UAAA,CAAA,EAAA,EAAA,CACjB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,EAGI,QAAA,YAAA,WAAA,EAAd,YAES,MAAA,YAAA,EAAA;;IAFgB,SAAK,cAAO,aAAW,CAAA,OAAA,CAAA;IAAG,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,aAAA,CAAA;;2BACpD,CAAT,YAAS,MAAA,MAAA,CAAA,CAAA,CAAA"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _sfc_main$1 from "../icon/icon.js";
|
|
2
2
|
import { calcTextareaHeight } from "./utils.js";
|
|
3
3
|
import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, ref, shallowRef, toDisplayString, unref, useModel, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
|
|
4
|
-
import { FORM_EMPTY_CONTENT, bem } from "@veltra/utils";
|
|
5
|
-
import { useFocus,
|
|
4
|
+
import { FORM_EMPTY_CONTENT, bem, injectFormContext } from "@veltra/utils";
|
|
5
|
+
import { useFocus, useFormFallbackProps } from "@veltra/compositions";
|
|
6
6
|
import { Close } from "@veltra/icons/normal";
|
|
7
7
|
//#region src/components/textarea/textarea.vue
|
|
8
8
|
const _hoisted_1 = [
|
|
@@ -68,7 +68,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
68
68
|
setup(__props, { emit: __emit }) {
|
|
69
69
|
const props = __props;
|
|
70
70
|
const cls = bem("textarea");
|
|
71
|
-
const { formProps } =
|
|
71
|
+
const { formProps } = injectFormContext();
|
|
72
72
|
const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
|
|
73
73
|
size: "default",
|
|
74
74
|
disabled: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/textarea/textarea.vue"],"sourcesContent":["<template>\n <div\n v-if=\"!readonly\"\n :class=\"textareaClass\"\n @mouseenter=\"hovered = true\"\n @mouseleave=\"hovered = false\"\n >\n <textarea\n :class=\"cls.e('native')\"\n :placeholder=\"placeholder\"\n v-model=\"model\"\n :maxlength=\"maxlength\"\n :rows=\"rows\"\n :cols=\"cols\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n :disabled=\"disabled\"\n :readonly=\"nativeReadonly\"\n ref=\"textareaRef\"\n />\n <span v-if=\"props.maxlength && props.showCount\" :class=\"cls.m('count')\">\n {{ initNum }}/{{ props.maxlength }}\n </span>\n <Transition name=\"zoom-in\" mode=\"out-in\">\n <u-icon\n v-if=\"props.clearable && model! && hovered && !disabled && !readonly\"\n :class=\"cls.m('clear')\"\n @click.stop=\"handleClear\"\n >\n <Close />\n </u-icon>\n </Transition>\n </div>\n\n <span v-else style=\"white-space: pre-wrap\">\n {{ model || FORM_EMPTY_CONTENT }}\n </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFocus,
|
|
1
|
+
{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/textarea/textarea.vue"],"sourcesContent":["<template>\n <div\n v-if=\"!readonly\"\n :class=\"textareaClass\"\n @mouseenter=\"hovered = true\"\n @mouseleave=\"hovered = false\"\n >\n <textarea\n :class=\"cls.e('native')\"\n :placeholder=\"placeholder\"\n v-model=\"model\"\n :maxlength=\"maxlength\"\n :rows=\"rows\"\n :cols=\"cols\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n :disabled=\"disabled\"\n :readonly=\"nativeReadonly\"\n ref=\"textareaRef\"\n />\n <span v-if=\"props.maxlength && props.showCount\" :class=\"cls.m('count')\">\n {{ initNum }}/{{ props.maxlength }}\n </span>\n <Transition name=\"zoom-in\" mode=\"out-in\">\n <u-icon\n v-if=\"props.clearable && model! && hovered && !disabled && !readonly\"\n :class=\"cls.m('clear')\"\n @click.stop=\"handleClear\"\n >\n <Close />\n </u-icon>\n </Transition>\n </div>\n\n <span v-else style=\"white-space: pre-wrap\">\n {{ model || FORM_EMPTY_CONTENT }}\n </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFocus, useFormFallbackProps } from '@veltra/compositions'\nimport { Close } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, ref, shallowRef, watch } from 'vue'\n\nimport type { TextareaProps, TextareaEmits, ComponentSize } from '../../types'\nimport { UIcon } from '../icon'\nimport { calcTextareaHeight } from './utils'\n\ndefineOptions({\n name: 'Textarea'\n})\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n placeholder: '请输入',\n resize: true,\n clearable: true,\n disabled: undefined,\n readonly: undefined,\n autosize: false\n})\n\nconst cls = bem('textarea')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default' as ComponentSize,\n disabled: false,\n readonly: false\n})\n\nconst emit = defineEmits<TextareaEmits>()\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null)\n\nconst model = defineModel<string>()\n\nconst hovered = shallowRef(false)\n\nconst { focus, handleBlur, handleFocus } = useFocus((focused) => {\n focused ? emit('focus') : emit('blur')\n})\n\nconst textareaClass = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('resize-none', !props.resize),\n bem.is('disabled', disabled.value),\n bem.is('readonly', readonly.value),\n bem.is('focus', focus.value),\n cls.m('more')\n ]\n})\n\nconst handleInput = (e: Event) => {\n const value = (e.target as HTMLTextAreaElement).value\n if (value.length > props.maxlength!) {\n // 如果输入的字符数超过了最大长度,截取字符串到最大长度\n const truncatedValue = value.slice(0, props.maxlength)\n emit('update:modelValue', truncatedValue)\n } else {\n // 如果没有超过最大长度,则正常更新模型值\n emit('update:modelValue', value)\n }\n}\n\nconst initNum = computed(() => {\n if (!props.maxlength) return 0\n return props.maxlength - (model.value?.length ?? 0)\n})\n\nconst handleClear = () => {\n model.value = ''\n emit('clear')\n}\n\nconst handleChange = (e: Event) => {\n emit('change', (e.target as HTMLTextAreaElement).value)\n}\n\nwatch(\n [model, textareaRef],\n ([model, textareaRef]) => {\n if (!textareaRef) return\n if (!props.autosize) return\n calcTextareaHeight(textareaRef)\n },\n { immediate: true }\n)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDA,MAAM,QAAQ;EASd,MAAM,MAAM,IAAI,WAAU;EAE1B,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE;GAClF,MAAM;GACN,UAAU;GACV,UAAU;GACX,CAAA;EAED,MAAM,OAAO;EAEb,MAAM,cAAc,IAAgC,KAAI;EAExD,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,UAAU,WAAW,MAAK;EAEhC,MAAM,EAAE,OAAO,YAAY,gBAAgB,UAAU,YAAY;AAC/D,aAAU,KAAK,QAAQ,GAAG,KAAK,OAAM;IACtC;EAED,MAAM,gBAAgB,eAAe;AACnC,UAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAM;IACjB,IAAI,GAAG,eAAe,CAAC,MAAM,OAAO;IACpC,IAAI,GAAG,YAAY,SAAS,MAAM;IAClC,IAAI,GAAG,YAAY,SAAS,MAAM;IAClC,IAAI,GAAG,SAAS,MAAM,MAAM;IAC5B,IAAI,EAAE,OAAM;IACd;IACD;EAED,MAAM,eAAe,MAAa;GAChC,MAAM,QAAS,EAAE,OAA+B;AAChD,OAAI,MAAM,SAAS,MAAM,UAGvB,MAAK,qBADkB,MAAM,MAAM,GAAG,MAAM,UAClB,CAAc;OAGxC,MAAK,qBAAqB,MAAK;;EAInC,MAAM,UAAU,eAAe;AAC7B,OAAI,CAAC,MAAM,UAAW,QAAO;AAC7B,UAAO,MAAM,aAAa,MAAM,OAAO,UAAU;IAClD;EAED,MAAM,oBAAoB;AACxB,SAAM,QAAQ;AACd,QAAK,QAAO;;EAGd,MAAM,gBAAgB,MAAa;AACjC,QAAK,UAAW,EAAE,OAA+B,MAAK;;AAGxD,QACE,CAAC,OAAO,YAAY,GACnB,CAAC,OAAO,iBAAiB;AACxB,OAAI,CAAC,YAAa;AAClB,OAAI,CAAC,MAAM,SAAU;AACrB,sBAAmB,YAAW;KAEhC,EAAE,WAAW,MAAK,CACpB;;WAnIW,MAAA,SAAQ,IAAA,WAAA,EADjB,mBAiCM,OAAA;;IA/BH,OAAK,eAAE,cAAA,MAAa;IACpB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,QAAO;IACnB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,QAAO;;mBAEpB,mBAcE,YAAA;KAbC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA;KACZ,aAAa,QAAA;kEACL,MAAK,QAAA;KACb,WAAW,QAAA;KACX,MAAM,QAAA;KACN,MAAM,QAAA;KACN,SAAO;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,YAAA,IAAA,MAAA,YAAA,CAAA,GAAA,KAAW;KAClB,QAAI,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,WAAA,IAAA,MAAA,WAAA,CAAA,GAAA,KAAU;KAChB,UAAQ;KACR,UAAU,MAAA,SAAQ;KAClB,UAAU,QAAA;cACP;KAAJ,KAAI;4CAVK,MAAA,MAAK,CAAA,CAAA;IAYJ,MAAM,aAAa,MAAM,aAAA,WAAA,EAArC,mBAEO,QAAA;;KAF0C,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;uBACxD,QAAA,MAAO,GAAG,MAAC,gBAAG,MAAM,UAAS,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA;IAElC,YAQa,YAAA;KARD,MAAK;KAAU,MAAK;;4BAOrB,CALD,MAAM,aAAa,MAAA,SAAU,QAAA,SAAO,CAAK,MAAA,SAAQ,IAAA,CAAK,MAAA,SAAQ,IAAA,WAAA,EADtE,YAMS,MAAA,YAAA,EAAA;;MAJN,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;MACZ,SAAK,cAAO,aAAW,CAAA,OAAA,CAAA;;6BAEf,CAAT,YAAS,MAAA,MAAA,CAAA,CAAA,CAAA;;;;;2BAKf,mBAEO,QAFP,YAEO,gBADF,MAAA,SAAS,MAAA,mBAAkB,CAAA,EAAA,EAAA"}
|
|
@@ -11,21 +11,21 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
|
|
|
11
11
|
"update:modelValue": (value: string | undefined) => any;
|
|
12
12
|
} & {
|
|
13
13
|
"update:modelValue": (value: string) => any;
|
|
14
|
-
clear: () => any;
|
|
15
14
|
change: (value: string) => any;
|
|
16
15
|
focus: () => any;
|
|
16
|
+
clear: () => any;
|
|
17
17
|
blur: () => any;
|
|
18
18
|
}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
19
19
|
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
20
|
-
onClear?: (() => any) | undefined;
|
|
21
20
|
onChange?: ((value: string) => any) | undefined;
|
|
22
21
|
onFocus?: (() => any) | undefined;
|
|
22
|
+
onClear?: (() => any) | undefined;
|
|
23
23
|
onBlur?: (() => any) | undefined;
|
|
24
24
|
}>, {
|
|
25
|
+
clearable: boolean;
|
|
26
|
+
placeholder: string;
|
|
25
27
|
disabled: boolean;
|
|
26
28
|
readonly: boolean;
|
|
27
|
-
placeholder: string;
|
|
28
|
-
clearable: boolean;
|
|
29
29
|
resize: boolean;
|
|
30
30
|
autosize: boolean;
|
|
31
31
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
@@ -7,8 +7,8 @@ import { useFilter } from "./use-filter.js";
|
|
|
7
7
|
import { useSelect } from "./use-select.js";
|
|
8
8
|
import { useTreeNodes } from "./use-tree-nodes.js";
|
|
9
9
|
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderList, shallowRef, unref, useSlots, watch, watchEffect, withCtx } from "vue";
|
|
10
|
-
import { bem, nextFrame, scrollIntoContainerView } from "@veltra/utils";
|
|
11
|
-
import {
|
|
10
|
+
import { bem, injectFormContext, nextFrame, scrollIntoContainerView } from "@veltra/utils";
|
|
11
|
+
import { useFormFallbackProps, useVirtualizer } from "@veltra/compositions";
|
|
12
12
|
//#region src/components/tree/tree.vue
|
|
13
13
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
14
14
|
name: "Tree",
|
|
@@ -47,7 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
47
47
|
const props = __props;
|
|
48
48
|
const emit = __emit;
|
|
49
49
|
const cls = bem("tree");
|
|
50
|
-
const { formProps } =
|
|
50
|
+
const { formProps } = injectFormContext();
|
|
51
51
|
const { size } = useFormFallbackProps([formProps ?? {}, props], { size: "default" });
|
|
52
52
|
const scrollRef = shallowRef();
|
|
53
53
|
const className = computed(() => {
|