@veltra/desktop 1.6.4 → 1.6.5
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.js.map +1 -1
- package/dist/components/auto-complete/auto-complete.js.map +1 -1
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/batch-edit/batch-edit-form.js.map +1 -1
- package/dist/components/batch-edit/batch-edit-list.js.map +1 -1
- package/dist/components/batch-edit/batch-edit.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/card/card-cover.js.map +1 -1
- package/dist/components/cascade/cascade-panel-item.js.map +1 -1
- package/dist/components/cascade/cascade.js.map +1 -1
- package/dist/components/checkbox/checkbox-button.js.map +1 -1
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.js.map +1 -1
- package/dist/components/code-editor/basic-setup.js +2 -2
- package/dist/components/code-editor/code-editor.js +1 -1
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/code-editor/shell-extension.js +1 -1
- package/dist/components/collapse/collapse-item.js.map +1 -1
- package/dist/components/condition-editor/components/condition-group.js.map +1 -1
- package/dist/components/condition-editor/components/condition-row.js.map +1 -1
- package/dist/components/contextmenu/contextmenu-item.js.map +1 -1
- package/dist/components/contextmenu/contextmenu-panel.js.map +1 -1
- package/dist/components/contextmenu/contextmenu-sub.js.map +1 -1
- package/dist/components/contextmenu/contextmenu.js.map +1 -1
- package/dist/components/date-panel/date-panel.js.map +1 -1
- package/dist/components/date-panel/headers/day.js.map +1 -1
- package/dist/components/date-panel/headers/month.js.map +1 -1
- package/dist/components/date-panel/headers/year.js.map +1 -1
- package/dist/components/date-panel/panels/day.js.map +1 -1
- package/dist/components/date-panel/panels/month.js.map +1 -1
- package/dist/components/date-panel/panels/year.js.map +1 -1
- package/dist/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/dropdown/dropdown.js.map +1 -1
- package/dist/components/dual-nav/dual-nav-app.js.map +1 -1
- package/dist/components/dual-nav/dual-nav.js.map +1 -1
- package/dist/components/empty/empty.js.map +1 -1
- package/dist/components/expression-editor/components/path-preview.js.map +1 -1
- package/dist/components/expression-editor/components/variable-picker.js.map +1 -1
- package/dist/components/expression-editor/expression-editor.js.map +1 -1
- package/dist/components/file-picker/file-picker.js.map +1 -1
- package/dist/components/file-viewer/file-viewer.js.map +1 -1
- package/dist/components/file-viewer/previewers/docx-previewer.js.map +1 -1
- package/dist/components/file-viewer/previewers/image-previewer.js.map +1 -1
- package/dist/components/file-viewer/previewers/pdf-previewer.js.map +1 -1
- package/dist/components/file-viewer/previewers/sheet-previewer.js.map +1 -1
- package/dist/components/file-viewer/previewers/text-previewer.js.map +1 -1
- package/dist/components/file-viewer/previewers/video-previewer.js.map +1 -1
- package/dist/components/float-button/float-button.js.map +1 -1
- package/dist/components/grid/grid-item.js.map +1 -1
- package/dist/components/grid/grid.js.map +1 -1
- package/dist/components/grid-input/grid-input.js.map +1 -1
- package/dist/components/group-input/group-input.js.map +1 -1
- package/dist/components/group-nav/group-nav-item.js.map +1 -1
- package/dist/components/group-nav/group-nav.js.map +1 -1
- package/dist/components/layout/layout-resizer.js.map +1 -1
- package/dist/components/layout/layout.js.map +1 -1
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/loading/loading.js.map +1 -1
- package/dist/components/message/message-box.js.map +1 -1
- package/dist/components/message/message.js.map +1 -1
- package/dist/components/message-confirm/message-confirm-box.js +1 -0
- package/dist/components/message-confirm/message-confirm-box.js.map +1 -1
- package/dist/components/message-confirm/message-confirm.js +13 -6
- package/dist/components/message-confirm/message-confirm.js.map +1 -1
- package/dist/components/message-confirm/message-confirm2.js +6 -4
- package/dist/components/message-confirm/message-confirm2.js.map +1 -1
- package/dist/components/message-confirm/style2.css +7 -0
- package/dist/components/multi-select/multi-select.js.map +1 -1
- package/dist/components/multi-tree-select/multi-tree-select.js.map +1 -1
- package/dist/components/nav/nav-icon.js.map +1 -1
- package/dist/components/nav/nav-item-collapsed.js.map +1 -1
- package/dist/components/nav/nav-item.js.map +1 -1
- package/dist/components/nav/nav-sub-collapsed.js.map +1 -1
- package/dist/components/nav/nav-sub.js.map +1 -1
- package/dist/components/nav/nav.js.map +1 -1
- package/dist/components/notification/notification-box.js.map +1 -1
- package/dist/components/notification/notification.js.map +1 -1
- package/dist/components/number-input/number-input.js.map +1 -1
- package/dist/components/number-range-input/number-range-input.js.map +1 -1
- package/dist/components/paginator/paginator.js.map +1 -1
- package/dist/components/palette/palette-color-switch.js.map +1 -1
- package/dist/components/palette/palette.js.map +1 -1
- package/dist/components/password-input/password-input.js.map +1 -1
- package/dist/components/pop-confirm/pop-confirm.js.map +1 -1
- package/dist/components/progress/progress.js.map +1 -1
- package/dist/components/progress-nodes/progress-nodes.js.map +1 -1
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/radio-group/radio-group.js.map +1 -1
- package/dist/components/rich-text-editor/rich-text-editor.js.map +1 -1
- package/dist/components/rich-text-editor/toolbar.js.map +1 -1
- package/dist/components/scroll/scroll.js.map +1 -1
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/steps/steps.js.map +1 -1
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/table-body.js.map +1 -1
- package/dist/components/table/table-cell.js.map +1 -1
- package/dist/components/table/table-foot.js.map +1 -1
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/table-editor/table-editor.js.map +1 -1
- package/dist/components/tabs/tabs-horizontal.js.map +1 -1
- package/dist/components/tabs/tabs-vertical.js.map +1 -1
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/tag/tag.js.map +1 -1
- package/dist/components/textarea/textarea.js.map +1 -1
- package/dist/components/theme/theme.js.map +1 -1
- package/dist/components/tip/tip.js.map +1 -1
- package/dist/components/tree/tree-node.js.map +1 -1
- package/dist/components/tree/tree.js.map +1 -1
- package/dist/components/tree-select/tree-select.js.map +1 -1
- package/dist/components/watermark/watermark.js.map +1 -1
- package/dist/node_modules/.bun/@codemirror_autocomplete@6.20.3/node_modules/@codemirror/autocomplete/dist/index.js +1 -1
- package/dist/node_modules/.bun/{@codemirror_commands@6.10.4 → @codemirror_commands@6.11.0}/node_modules/@codemirror/commands/dist/index.js +6 -5
- package/dist/node_modules/.bun/@codemirror_commands@6.11.0/node_modules/@codemirror/commands/dist/index.js.map +1 -0
- package/dist/node_modules/.bun/@codemirror_lang-css@6.3.1/node_modules/@codemirror/lang-css/dist/index.js +1 -1
- package/dist/node_modules/.bun/{@codemirror_lang-html@6.4.11 → @codemirror_lang-html@6.4.12}/node_modules/@codemirror/lang-html/dist/index.js +15 -6
- package/dist/node_modules/.bun/{@codemirror_lang-html@6.4.11 → @codemirror_lang-html@6.4.12}/node_modules/@codemirror/lang-html/dist/index.js.map +1 -1
- package/dist/node_modules/.bun/@codemirror_lang-javascript@6.2.5/node_modules/@codemirror/lang-javascript/dist/index.js +1 -1
- package/dist/node_modules/.bun/@codemirror_lang-markdown@6.5.2/node_modules/@codemirror/lang-markdown/dist/index.js +2 -2
- package/dist/node_modules/.bun/@codemirror_language@6.12.4/node_modules/@codemirror/language/dist/index.js +1 -1
- package/dist/node_modules/.bun/@codemirror_lint@6.9.7/node_modules/@codemirror/lint/dist/index.js +2 -2
- package/dist/node_modules/.bun/@codemirror_search@6.7.1/node_modules/@codemirror/search/dist/index.js +2 -2
- package/dist/node_modules/.bun/@codemirror_state@6.7.1/node_modules/@codemirror/state/dist/index.js +1 -1
- package/dist/node_modules/.bun/@codemirror_theme-one-dark@6.1.3/node_modules/@codemirror/theme-one-dark/dist/index.js +1 -1
- package/dist/node_modules/.bun/{@codemirror_view@6.43.8 → @codemirror_view@6.43.9}/node_modules/@codemirror/view/dist/index.js +5 -4
- package/dist/node_modules/.bun/{@codemirror_view@6.43.8 → @codemirror_view@6.43.9}/node_modules/@codemirror/view/dist/index.js.map +1 -1
- package/dist/node_modules/.bun/@lezer_css@1.3.6/node_modules/@lezer/css/dist/index.js +268 -0
- package/dist/node_modules/.bun/@lezer_css@1.3.6/node_modules/@lezer/css/dist/index.js.map +1 -0
- package/dist/node_modules/.bun/{@marijn_find-cluster-break@1.0.2 → @marijn_find-cluster-break@1.0.3}/node_modules/@marijn/find-cluster-break/src/index.js +2 -2
- package/dist/node_modules/.bun/{@marijn_find-cluster-break@1.0.2 → @marijn_find-cluster-break@1.0.3}/node_modules/@marijn/find-cluster-break/src/index.js.map +1 -1
- package/dist/node_modules/.bun/{crelt@1.0.6 → crelt@1.0.7}/node_modules/crelt/index.js +1 -1
- package/dist/node_modules/.bun/{crelt@1.0.6 → crelt@1.0.7}/node_modules/crelt/index.js.map +1 -1
- package/package.json +8 -8
- package/src/components/message-confirm/__test__/message-confirm.test.ts +60 -0
- package/src/components/message-confirm/message-confirm-box.vue +1 -1
- package/src/components/message-confirm/message-confirm.ts +6 -4
- package/src/components/message-confirm/message-confirm.vue +5 -4
- package/src/components/message-confirm/style.scss +9 -1
- package/dist/node_modules/.bun/@codemirror_commands@6.10.4/node_modules/@codemirror/commands/dist/index.js.map +0 -1
- package/dist/node_modules/.bun/@lezer_css@1.3.4/node_modules/@lezer/css/dist/index.js +0 -268
- package/dist/node_modules/.bun/@lezer_css@1.3.4/node_modules/@lezer/css/dist/index.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paginator.js","names":[],"sources":["../../../src/components/paginator/paginator.vue"],"sourcesContent":["<template>\n <div :class=\"[cls.b, cls.m(size)]\" ref=\"paginatorRef\">\n <div>共 {{ total }} 条</div>\n\n <u-select\n :class=\"cls.e('size-select')\"\n v-model=\"pageSize\"\n size=\"small\"\n :options=\"sizeOptions\"\n :clearable=\"false\"\n @change=\"handleChangePageSize\"\n />\n\n <ul :class=\"[cls.e('pages')]\" v-if=\"!simple\">\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', preDisabled)]\"\n @click=\"handleJumpToFirst\"\n @mouseenter=\"hovered.first = true\"\n @mouseleave=\"hovered.first = false\"\n v-ripple=\"!preDisabled\"\n >\n <span v-if=\"hovered.first\">1</span>\n <UIcon v-else><DArrowLeft /></UIcon>\n </li>\n\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', pageNumber === 1)]\"\n @click=\"handleJumpToPrev\"\n v-ripple=\"!preDisabled\"\n >\n <UIcon><ArrowLeft /></UIcon>\n </li>\n\n <li\n v-for=\"num in pageNumbers\"\n :key=\"num\"\n :class=\"[cls.e('btn'), bem.is('active', pageNumber === num)]\"\n @click=\"handleChangePageNumber(num)\"\n v-ripple\n >\n {{ num }}\n </li>\n\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', nextDisabled)]\"\n @click=\"handleJumpToNext\"\n v-ripple=\"!nextDisabled\"\n >\n <UIcon><ArrowRight /></UIcon>\n </li>\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', nextDisabled)]\"\n @click=\"handleJumpToLast\"\n @mouseenter=\"hovered.last = true\"\n @mouseleave=\"hovered.last = false\"\n v-ripple=\"!nextDisabled\"\n >\n <span v-if=\"hovered.last\">{{ totalPages }}</span>\n <UIcon v-else><DArrowRight /></UIcon>\n </li>\n </ul>\n\n <div :class=\"cls.e('jumper')\">\n <span>前往</span>\n <u-number-input\n :class=\"cls.e('page-input')\"\n size=\"small\"\n :min=\"1\"\n :max=\"totalPages\"\n :precision=\"0\"\n :model-value=\"pageNumber\"\n :clearable=\"false\"\n @keyup.enter=\"handleKeyEnter\"\n @change=\"pageNumber = $event!\"\n />\n <span>/ {{ totalPages }}</span>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n } from '@cat-kit/core'\nimport { useConfig, useFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, reactive, shallowRef } from 'vue'\n\nimport type { PaginatorProps, PaginatorEmits, _PaginatorExposed, ComponentSize } from '../../types'\nimport { UIcon } from '../icon'\nimport { UNumberInput } from '../number-input'\nimport { USelect } from '../select'\n\ndefineOptions({ name: 'UPaginator' })\n\nconst { config } = useConfig()\n\nconst props = withDefaults(defineProps<PaginatorProps>(), { total: 0 })\n\nconst emit = defineEmits<PaginatorEmits>()\n\nconst cls = bem('paginator')\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst pageNumber = defineModel<number>('pageNumber', { default: 1 })\n\nconst pageSize = defineModel<number>('pageSize', { default: 10 })\n\nfunction emitPageSize(value: number) {\n emit('change:pageSize', value)\n}\n\nfunction emitPageNumber(value: number) {\n emit('change:pageNumber', value)\n}\n\nconst handleChangePageSize = (size?: Record<string, any>) => {\n emitPageSize(size?.value)\n pageNumber.value = 1\n}\n\nfunction handleChangePageNumber(num: number) {\n if (props.pageNumber === num) return\n pageNumber.value = num\n emitPageNumber(pageNumber.value)\n}\n\nconst currentSize = computed(() => {\n return props.pageSize ?? config.paginator.pageSize\n})\n\n/** 完整页码 */\nconst totalPages = computed(() => {\n return Math.ceil(props.total / currentSize.value)\n})\n\nconst sizeOptions = computed(() => {\n return (props.pageSizeOptions ?? config.paginator.pageSizeOptions).map((value) => {\n return { label: `${value}条`, value }\n })\n})\n\n/** 做多显示5个页码 */\nconst pageNumbers = computed(() => {\n const startPageNum = n(pageNumber.value - 2).range(1, Math.max(totalPages.value - 4, 1))\n\n return Array.from({ length: Math.min(totalPages.value, 5) }).map(\n (_, index) => startPageNum + index\n )\n})\n\nconst preDisabled = computed(() => {\n return pageNumber.value <= 1\n})\nconst nextDisabled = computed(() => {\n return pageNumber.value >= totalPages.value\n})\n\nfunction handleJumpToFirst() {\n if (preDisabled.value) return\n pageNumber.value = 1\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToLast() {\n if (nextDisabled.value) return\n pageNumber.value = totalPages.value\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToPrev() {\n if (preDisabled.value) return\n pageNumber.value = pageNumber.value - 1\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToNext() {\n if (nextDisabled.value) return\n\n pageNumber.value = pageNumber.value + 1\n emitPageNumber(pageNumber.value)\n}\n\nfunction handleKeyEnter(e: KeyboardEvent) {\n const target = e.target as HTMLInputElement\n const val = +target.value\n if (!isNaN(val) && val > 0 && val <= totalPages.value) {\n pageNumber.value = val\n emitPageNumber(pageNumber.value)\n }\n}\n\n/** 鼠标停留位置 */\nconst hovered = reactive({ first: false, last: false })\n\nconst paginatorRef = shallowRef<HTMLElement>()\n\ndefineExpose<_PaginatorExposed>({ el: paginatorRef })\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"paginator.js","names":[],"sources":["../../../src/components/paginator/paginator.vue"],"sourcesContent":["<template>\n <div :class=\"[cls.b, cls.m(size)]\" ref=\"paginatorRef\">\n <div>共 {{ total }} 条</div>\n\n <u-select\n :class=\"cls.e('size-select')\"\n v-model=\"pageSize\"\n size=\"small\"\n :options=\"sizeOptions\"\n :clearable=\"false\"\n @change=\"handleChangePageSize\"\n />\n\n <ul :class=\"[cls.e('pages')]\" v-if=\"!simple\">\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', preDisabled)]\"\n @click=\"handleJumpToFirst\"\n @mouseenter=\"hovered.first = true\"\n @mouseleave=\"hovered.first = false\"\n v-ripple=\"!preDisabled\"\n >\n <span v-if=\"hovered.first\">1</span>\n <UIcon v-else><DArrowLeft /></UIcon>\n </li>\n\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', pageNumber === 1)]\"\n @click=\"handleJumpToPrev\"\n v-ripple=\"!preDisabled\"\n >\n <UIcon><ArrowLeft /></UIcon>\n </li>\n\n <li\n v-for=\"num in pageNumbers\"\n :key=\"num\"\n :class=\"[cls.e('btn'), bem.is('active', pageNumber === num)]\"\n @click=\"handleChangePageNumber(num)\"\n v-ripple\n >\n {{ num }}\n </li>\n\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', nextDisabled)]\"\n @click=\"handleJumpToNext\"\n v-ripple=\"!nextDisabled\"\n >\n <UIcon><ArrowRight /></UIcon>\n </li>\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', nextDisabled)]\"\n @click=\"handleJumpToLast\"\n @mouseenter=\"hovered.last = true\"\n @mouseleave=\"hovered.last = false\"\n v-ripple=\"!nextDisabled\"\n >\n <span v-if=\"hovered.last\">{{ totalPages }}</span>\n <UIcon v-else><DArrowRight /></UIcon>\n </li>\n </ul>\n\n <div :class=\"cls.e('jumper')\">\n <span>前往</span>\n <u-number-input\n :class=\"cls.e('page-input')\"\n size=\"small\"\n :min=\"1\"\n :max=\"totalPages\"\n :precision=\"0\"\n :model-value=\"pageNumber\"\n :clearable=\"false\"\n @keyup.enter=\"handleKeyEnter\"\n @change=\"pageNumber = $event!\"\n />\n <span>/ {{ totalPages }}</span>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n } from '@cat-kit/core'\nimport { useConfig, useFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, reactive, shallowRef } from 'vue'\n\nimport type { PaginatorProps, PaginatorEmits, _PaginatorExposed, ComponentSize } from '../../types'\nimport { UIcon } from '../icon'\nimport { UNumberInput } from '../number-input'\nimport { USelect } from '../select'\n\ndefineOptions({ name: 'UPaginator' })\n\nconst { config } = useConfig()\n\nconst props = withDefaults(defineProps<PaginatorProps>(), { total: 0 })\n\nconst emit = defineEmits<PaginatorEmits>()\n\nconst cls = bem('paginator')\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst pageNumber = defineModel<number>('pageNumber', { default: 1 })\n\nconst pageSize = defineModel<number>('pageSize', { default: 10 })\n\nfunction emitPageSize(value: number) {\n emit('change:pageSize', value)\n}\n\nfunction emitPageNumber(value: number) {\n emit('change:pageNumber', value)\n}\n\nconst handleChangePageSize = (size?: Record<string, any>) => {\n emitPageSize(size?.value)\n pageNumber.value = 1\n}\n\nfunction handleChangePageNumber(num: number) {\n if (props.pageNumber === num) return\n pageNumber.value = num\n emitPageNumber(pageNumber.value)\n}\n\nconst currentSize = computed(() => {\n return props.pageSize ?? config.paginator.pageSize\n})\n\n/** 完整页码 */\nconst totalPages = computed(() => {\n return Math.ceil(props.total / currentSize.value)\n})\n\nconst sizeOptions = computed(() => {\n return (props.pageSizeOptions ?? config.paginator.pageSizeOptions).map((value) => {\n return { label: `${value}条`, value }\n })\n})\n\n/** 做多显示5个页码 */\nconst pageNumbers = computed(() => {\n const startPageNum = n(pageNumber.value - 2).range(1, Math.max(totalPages.value - 4, 1))\n\n return Array.from({ length: Math.min(totalPages.value, 5) }).map(\n (_, index) => startPageNum + index\n )\n})\n\nconst preDisabled = computed(() => {\n return pageNumber.value <= 1\n})\nconst nextDisabled = computed(() => {\n return pageNumber.value >= totalPages.value\n})\n\nfunction handleJumpToFirst() {\n if (preDisabled.value) return\n pageNumber.value = 1\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToLast() {\n if (nextDisabled.value) return\n pageNumber.value = totalPages.value\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToPrev() {\n if (preDisabled.value) return\n pageNumber.value = pageNumber.value - 1\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToNext() {\n if (nextDisabled.value) return\n\n pageNumber.value = pageNumber.value + 1\n emitPageNumber(pageNumber.value)\n}\n\nfunction handleKeyEnter(e: KeyboardEvent) {\n const target = e.target as HTMLInputElement\n const val = +target.value\n if (!isNaN(val) && val > 0 && val <= totalPages.value) {\n pageNumber.value = val\n emitPageNumber(pageNumber.value)\n }\n}\n\n/** 鼠标停留位置 */\nconst hovered = reactive({ first: false, last: false })\n\nconst paginatorRef = shallowRef<HTMLElement>()\n\ndefineExpose<_PaginatorExposed>({ el: paginatorRef })\n</script>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette-color-switch.js","names":[],"sources":["../../../src/components/palette/palette-color-switch.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('color-switch')\">\n <div :class=\"cls.e('color-type')\">HEX(A)</div>\n\n <u-input\n :class=\"cls.e('color-hexa')\"\n :clearable=\"false\"\n :model-value=\"color\"\n @change=\"handleUpdateColor\"\n :pattern=\"pattern\"\n />\n\n <u-button text type=\"primary\" :class=\"cls.e('clear-btn')\" @click=\"emit('clear')\">\n 清除\n </u-button>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject } from 'vue'\n\nimport { UButton } from '../button'\nimport { UInput } from '../input'\nimport { PaletteDIKey } from './di'\n\ndefineProps<{ color?: string }>()\n\nconst emit = defineEmits(['clear', 'update:color'])\n\nconst { cls } = inject(PaletteDIKey)!\n\nconst pattern = /^#([0-9a-fA-F]{3,4}){1,2}$/\n\nconst handleUpdateColor = (value: string) => {\n emit('update:color', value)\n}\n</script>\n"],"mappings":";;;;;;;;;;EA2BA,MAAM,OAAO;EAEb,MAAM,EAAE,QAAQ,OAAO,YAAY;EAEnC,MAAM,UAAU;EAEhB,MAAM,qBAAqB,UAAkB;GAC3C,KAAK,gBAAgB,KAAK;EAC5B;;GAlCE,OAAA,UAAA,GAAA,mBAcM,OAAA,EAdA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,cAAA,CAAA,EAAA,GAAA;IAChB,mBAA8C,OAAA,EAAxC,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,YAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"palette-color-switch.js","names":[],"sources":["../../../src/components/palette/palette-color-switch.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('color-switch')\">\n <div :class=\"cls.e('color-type')\">HEX(A)</div>\n\n <u-input\n :class=\"cls.e('color-hexa')\"\n :clearable=\"false\"\n :model-value=\"color\"\n @change=\"handleUpdateColor\"\n :pattern=\"pattern\"\n />\n\n <u-button text type=\"primary\" :class=\"cls.e('clear-btn')\" @click=\"emit('clear')\">\n 清除\n </u-button>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject } from 'vue'\n\nimport { UButton } from '../button'\nimport { UInput } from '../input'\nimport { PaletteDIKey } from './di'\n\ndefineProps<{ color?: string }>()\n\nconst emit = defineEmits(['clear', 'update:color'])\n\nconst { cls } = inject(PaletteDIKey)!\n\nconst pattern = /^#([0-9a-fA-F]{3,4}){1,2}$/\n\nconst handleUpdateColor = (value: string) => {\n emit('update:color', value)\n}\n</script>\n"],"mappings":";;;;;;;;;;EA2BA,MAAM,OAAO;EAEb,MAAM,EAAE,QAAQ,OAAO,YAAY;EAEnC,MAAM,UAAU;EAEhB,MAAM,qBAAqB,UAAkB;GAC3C,KAAK,gBAAgB,KAAK;EAC5B;;GAlCE,OAAA,UAAA,GAAA,mBAcM,OAAA,EAdA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,cAAA,CAAA,EAAA,GAAA;IAChB,mBAA8C,OAAA,EAAxC,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,YAAA,CAAA,EAAgB,GAAA,UAAM,CAAA;IAExC,YAME,MAAA,aAAA,GAAA;KALC,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,YAAA,CAAA;KACZ,WAAW;KACX,eAAa,QAAA;KACb,UAAQ;KACC;;IAGZ,YAEW,MAAA,WAAA,GAAA;KAFD,MAAA;KAAK,MAAK;KAAW,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,WAAA,CAAA;KAAgB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;;KAAW,SAAA,cAEjF,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFiF,gBAAA,QAEjF,EAAA,CAAA,EAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n <u-tip\n trigger=\"click\"\n :class=\"cls.e('panel')\"\n v-model:visible=\"visible\"\n :disabled=\"disabled || readonly\"\n >\n <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n <template #content>\n <!-- 饱和度和亮度 -->\n <PaletteSV ref=\"palette-sv\" />\n\n <!-- 色相 -->\n <PaletteHue ref=\"palette-hue\" />\n\n <!-- 透明度 -->\n <PaletteAlpha ref=\"palette-alpha\" />\n\n <!-- 颜色切换 -->\n <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n </template>\n </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({ name: 'UPalette' })\n\nconst props = withDefaults(defineProps<PaletteProps>(), {\n disabled: undefined,\n readonly: undefined\n})\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst cls = bem('palette')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]\n})\n\nconst { HSV, alpha, ...rest } = useHSV()\n\nconst color = defineModel<string>()\nconst RGB = computed(() => HSV2RGB(HSV))\nconst { userAction, isUserActive } = useUserAction()\n\nconst visible = shallowRef(false)\n\n/** 清除时跳过一次内部状态到 color 的同步,防止 updateAlpha 把已清空的 color 覆盖回来 */\nlet skipColorUpdate = false\n\nconst handleClear = userAction(() => {\n if (alpha.value !== 1) {\n skipColorUpdate = true\n }\n color.value = ''\n rest.updateAlpha(1)\n visible.value = false\n})\n\nwatch([alpha, RGB], ([alpha, RGB]) => {\n if (skipColorUpdate) {\n skipColorUpdate = false\n return\n }\n color.value = `#${RGB2HEX(RGB, alpha)}`\n})\n\nconst paletteSVRef = useTemplateRef('palette-sv')\nconst paletteHueRef = useTemplateRef('palette-hue')\nconst paletteAlphaRef = useTemplateRef('palette-alpha')\n\nwatch(\n color,\n (color) => {\n if (!color) return\n if (isUserActive()) return\n\n const parsed = HEX2RGBA(color)\n // 无法解析的颜色(如非法字符)视为未绑定,跳过同步,避免把 NaN 写回 modelValue\n if (!parsed) return\n\n const { RGB, alpha } = parsed\n const hsv = RGB2HSV(RGB)\n rest.updateHue(hsv.h)\n rest.updateSV({ s: hsv.s, v: hsv.v })\n rest.updateAlpha(alpha)\n\n paletteSVRef.value?.init()\n paletteHueRef.value?.init()\n paletteAlphaRef.value?.init()\n },\n { immediate: true }\n)\n\nprovide(PaletteDIKey, { cls, HSV, RGB, alpha, userAction, isUserActive, ...rest })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC;EAElF,MAAM,MAAM,IAAI,SAAS;EAEzB,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,KAAK;IAAG,IAAI,GAAG,YAAY,CAAC,MAAM,KAAK;GAAC;EACpE,CAAC;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,OAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,YAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,GAAG,CAAC;EACvC,MAAM,EAAE,YAAY,iBAAiB,cAAc;EAEnD,MAAM,UAAU,WAAW,KAAK;;EAGhC,IAAI,kBAAkB;EAEtB,MAAM,cAAc,iBAAiB;GACnC,IAAI,MAAM,UAAU,GAClB,kBAAkB;GAEpB,MAAM,QAAQ;GACd,KAAK,YAAY,CAAC;GAClB,QAAQ,QAAQ;EAClB,CAAC;EAED,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,SAAS;GACpC,IAAI,iBAAiB;IACnB,kBAAkB;IAClB;GACF;GACA,MAAM,QAAQ,IAAI,QAAQ,KAAK,KAAK;EACtC,CAAC;EAED,MAAM,eAAe,eAAe,YAAY;EAChD,MAAM,gBAAgB,eAAe,aAAa;EAClD,MAAM,kBAAkB,eAAe,eAAe;EAEtD,MACE,QACC,UAAU;GACT,IAAI,CAAC,OAAO;GACZ,IAAI,aAAa,GAAG;GAEpB,MAAM,SAAS,SAAS,KAAK;GAE7B,IAAI,CAAC,QAAQ;GAEb,MAAM,EAAE,KAAK,UAAU;GACvB,MAAM,MAAM,QAAQ,GAAG;GACvB,KAAK,UAAU,IAAI,CAAC;GACpB,KAAK,SAAS;IAAE,GAAG,IAAI;IAAG,GAAG,IAAI;GAAE,CAAC;GACpC,KAAK,YAAY,KAAK;GAEtB,aAAa,OAAO,KAAK;GACzB,cAAc,OAAO,KAAK;GAC1B,gBAAgB,OAAO,KAAK;EAC9B,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,QAAQ,cAAc;GAAE;GAAK;GAAK;GAAK;GAAO;GAAY;GAAc,GAAG;EAAK,CAAC;;GAhH/E,OAAA,UAAA,GAAA,YAqBQ,MAAA,WAAA,GAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;IACL,SAAS,QAAA;IAAA,oBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,QAAO,QAAA;IACvB,UAAU,MAAA,QAAA,KAAY,MAAA,QAAA;;IAIZ,SAAO,cACD;KAAf,mBAAA,UAAA;KACA,YAA8B,aAAA,EAAnB,KAAI,aAAY,GAAA,MAAA,GAAA;KAE3B,mBAAA,MAAA;KACA,YAAgC,aAAA,EAApB,KAAI,cAAa,GAAA,MAAA,GAAA;KAE7B,mBAAA,OAAA;KACA,YAAoC,aAAA,EAAtB,KAAI,gBAAe,GAAA,MAAA,GAAA;KAEjC,mBAAA,QAAA;KACA,YAAiE,aAAA;MAArC,OAAO,MAAA;MAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;MAAG,SAAO,MAAA,WAAA;;;
|
|
1
|
+
{"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n <u-tip\n trigger=\"click\"\n :class=\"cls.e('panel')\"\n v-model:visible=\"visible\"\n :disabled=\"disabled || readonly\"\n >\n <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n <template #content>\n <!-- 饱和度和亮度 -->\n <PaletteSV ref=\"palette-sv\" />\n\n <!-- 色相 -->\n <PaletteHue ref=\"palette-hue\" />\n\n <!-- 透明度 -->\n <PaletteAlpha ref=\"palette-alpha\" />\n\n <!-- 颜色切换 -->\n <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n </template>\n </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({ name: 'UPalette' })\n\nconst props = withDefaults(defineProps<PaletteProps>(), {\n disabled: undefined,\n readonly: undefined\n})\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst cls = bem('palette')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]\n})\n\nconst { HSV, alpha, ...rest } = useHSV()\n\nconst color = defineModel<string>()\nconst RGB = computed(() => HSV2RGB(HSV))\nconst { userAction, isUserActive } = useUserAction()\n\nconst visible = shallowRef(false)\n\n/** 清除时跳过一次内部状态到 color 的同步,防止 updateAlpha 把已清空的 color 覆盖回来 */\nlet skipColorUpdate = false\n\nconst handleClear = userAction(() => {\n if (alpha.value !== 1) {\n skipColorUpdate = true\n }\n color.value = ''\n rest.updateAlpha(1)\n visible.value = false\n})\n\nwatch([alpha, RGB], ([alpha, RGB]) => {\n if (skipColorUpdate) {\n skipColorUpdate = false\n return\n }\n color.value = `#${RGB2HEX(RGB, alpha)}`\n})\n\nconst paletteSVRef = useTemplateRef('palette-sv')\nconst paletteHueRef = useTemplateRef('palette-hue')\nconst paletteAlphaRef = useTemplateRef('palette-alpha')\n\nwatch(\n color,\n (color) => {\n if (!color) return\n if (isUserActive()) return\n\n const parsed = HEX2RGBA(color)\n // 无法解析的颜色(如非法字符)视为未绑定,跳过同步,避免把 NaN 写回 modelValue\n if (!parsed) return\n\n const { RGB, alpha } = parsed\n const hsv = RGB2HSV(RGB)\n rest.updateHue(hsv.h)\n rest.updateSV({ s: hsv.s, v: hsv.v })\n rest.updateAlpha(alpha)\n\n paletteSVRef.value?.init()\n paletteHueRef.value?.init()\n paletteAlphaRef.value?.init()\n },\n { immediate: true }\n)\n\nprovide(PaletteDIKey, { cls, HSV, RGB, alpha, userAction, isUserActive, ...rest })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC;EAElF,MAAM,MAAM,IAAI,SAAS;EAEzB,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,KAAK;IAAG,IAAI,GAAG,YAAY,CAAC,MAAM,KAAK;GAAC;EACpE,CAAC;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,OAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,YAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,GAAG,CAAC;EACvC,MAAM,EAAE,YAAY,iBAAiB,cAAc;EAEnD,MAAM,UAAU,WAAW,KAAK;;EAGhC,IAAI,kBAAkB;EAEtB,MAAM,cAAc,iBAAiB;GACnC,IAAI,MAAM,UAAU,GAClB,kBAAkB;GAEpB,MAAM,QAAQ;GACd,KAAK,YAAY,CAAC;GAClB,QAAQ,QAAQ;EAClB,CAAC;EAED,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,SAAS;GACpC,IAAI,iBAAiB;IACnB,kBAAkB;IAClB;GACF;GACA,MAAM,QAAQ,IAAI,QAAQ,KAAK,KAAK;EACtC,CAAC;EAED,MAAM,eAAe,eAAe,YAAY;EAChD,MAAM,gBAAgB,eAAe,aAAa;EAClD,MAAM,kBAAkB,eAAe,eAAe;EAEtD,MACE,QACC,UAAU;GACT,IAAI,CAAC,OAAO;GACZ,IAAI,aAAa,GAAG;GAEpB,MAAM,SAAS,SAAS,KAAK;GAE7B,IAAI,CAAC,QAAQ;GAEb,MAAM,EAAE,KAAK,UAAU;GACvB,MAAM,MAAM,QAAQ,GAAG;GACvB,KAAK,UAAU,IAAI,CAAC;GACpB,KAAK,SAAS;IAAE,GAAG,IAAI;IAAG,GAAG,IAAI;GAAE,CAAC;GACpC,KAAK,YAAY,KAAK;GAEtB,aAAa,OAAO,KAAK;GACzB,cAAc,OAAO,KAAK;GAC1B,gBAAgB,OAAO,KAAK;EAC9B,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,QAAQ,cAAc;GAAE;GAAK;GAAK;GAAK;GAAO;GAAY;GAAc,GAAG;EAAK,CAAC;;GAhH/E,OAAA,UAAA,GAAA,YAqBQ,MAAA,WAAA,GAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;IACL,SAAS,QAAA;IAAA,oBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,QAAO,QAAA;IACvB,UAAU,MAAA,QAAA,KAAY,MAAA,QAAA;;IAIZ,SAAO,cACD;KAAf,mBAAA,UAAA;KACA,YAA8B,aAAA,EAAnB,KAAI,aAAY,GAAA,MAAA,GAAA;KAE3B,mBAAA,MAAA;KACA,YAAgC,aAAA,EAApB,KAAI,cAAa,GAAA,MAAA,GAAA;KAE7B,mBAAA,OAAA;KACA,YAAoC,aAAA,EAAtB,KAAI,gBAAe,GAAA,MAAA,GAAA;KAEjC,mBAAA,QAAA;KACA,YAAiE,aAAA;MAArC,OAAO,MAAA;MAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;MAAG,SAAO,MAAA,WAAA;;;IAbpD,SAAA,cAAqE,CAArE,mBAAqE,QAAA;KAA9D,OAAK,eAAE,UAAA,KAAS;KAAG,OAAK,eAAA,EAAA,iBAAqB,MAAA,MAAK,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.vue"],"sourcesContent":["<template>\n <u-input\n :class=\"cls.b\"\n :model-value=\"passwordText\"\n v-bind=\"inputProps\"\n :size=\"size\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n :clearable=\"false\"\n @native:input=\"handleUpdatePwd\"\n @update:model-value=\"!$event && handleClear()\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n >\n <template #suffix>\n <span :class=\"cls.e('suffix')\">\n <UIcon v-if=\"showClear\" :class=\"cls.e('clear')\" title=\"清除\" @click.stop=\"handleClear\">\n <Close />\n </UIcon>\n <UIcon :class=\"cls.e('visibility-toggle')\" :size=\"18\" @click.stop=\"toggleVisible\">\n <Hide v-if=\"pwdVisible\" />\n <View v-else />\n </UIcon>\n </span>\n </template>\n\n <template #prefix v-if=\"slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n </u-input>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { Close, Hide, View } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, ref, shallowRef } from 'vue'\n\nimport type { PasswordInputProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'UPasswordInput' })\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n clearable: false,\n disabled: undefined,\n readonly: undefined\n})\n\nconst slots = defineSlots<{ prefix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst inputProps = computed(() => {\n return o(props).pick(['disabled', 'placeholder', 'size'])\n})\n\nconst cls = bem('password-input')\n\nconst model = defineModel<string>()\n\nconst hovered = ref(false)\n\nconst handleMouseEnter = (): void => {\n hovered.value = true\n}\n\nconst handleMouseLeave = (): void => {\n hovered.value = false\n}\n\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && !!model.value && hovered.value\n})\n\nconst passwordChar = '●'\n\nconst handleUpdatePwd = (e: Event): void => {\n const target = e.target as HTMLInputElement\n const val = target.value\n if (!val) {\n model.value = val\n return\n }\n\n // 字符从无到有\n if (!model.value) {\n model.value = val\n return\n }\n\n const pointIndex = target.selectionStart!\n let inputChar = pointIndex === 0 ? '' : val[pointIndex - 1]!\n if (inputChar === passwordChar) inputChar = ''\n\n // 光标右侧字符数量(当前字符长度减去光标位置)\n const rightLen = val.length - pointIndex\n // 光标左侧字符数量 (当光标前的字符是刚刚输入的,则为这个字符前的所有的字符,否则为光标前的所有赐福)\n const leftLen = inputChar === '' ? pointIndex : pointIndex - 1\n\n const leftVal = model.value.slice(0, leftLen)\n const rightVal = rightLen === 0 ? '' : model.value.slice(-rightLen)\n\n model.value = leftVal + inputChar + rightVal\n\n nextTick(() => {\n target.selectionStart = pointIndex\n target.selectionEnd = pointIndex\n })\n}\n\nconst handleClear = (): void => {\n model.value = ''\n}\n\nconst pwdVisible = shallowRef(false)\n\nconst passwordText = computed<string | undefined>(() => {\n if (pwdVisible.value) return model.value\n return model.value ? passwordChar.repeat(model.value.length) : ''\n})\n\nconst toggleVisible = () => {\n pwdVisible.value = !pwdVisible.value\n}\n</script>\n"],"mappings":";;;;;;;;AAoFA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAtCrB,MAAM,QAAQ;EAMd,MAAM,QAAQ,SAAA;EAEd,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,GAAG;GAClF,MAAM;GACN,UAAU;GACV,UAAU;EACZ,CAAC;EAED,MAAM,aAAa,eAAe;GAChC,OAAO,EAAE,KAAK,CAAC,CAAC,KAAK;IAAC;IAAY;IAAe;GAAM,CAAC;EAC1D,CAAC;EAED,MAAM,MAAM,IAAI,gBAAgB;EAEhC,MAAM,QAAQ,SAAmB,SAAA,YAAC;EAElC,MAAM,UAAU,IAAI,KAAK;EAEzB,MAAM,yBAA+B;GACnC,QAAQ,QAAQ;EAClB;EAEA,MAAM,yBAA+B;GACnC,QAAQ,QAAQ;EAClB;EAEA,MAAM,YAAY,eAAe;GAC/B,OAAO,MAAM,aAAa,CAAC,SAAS,SAAS,CAAC,CAAC,MAAM,SAAS,QAAQ;EACxE,CAAC;EAID,MAAM,mBAAmB,MAAmB;GAC1C,MAAM,SAAS,EAAE;GACjB,MAAM,MAAM,OAAO;GACnB,IAAI,CAAC,KAAK;IACR,MAAM,QAAQ;IACd;GACF;GAGA,IAAI,CAAC,MAAM,OAAO;IAChB,MAAM,QAAQ;IACd;GACF;GAEA,MAAM,aAAa,OAAO;GAC1B,IAAI,YAAY,eAAe,IAAI,KAAK,IAAI,aAAa;GACzD,IAAI,cAAc,cAAc,YAAY;GAG5C,MAAM,WAAW,IAAI,SAAS;GAE9B,MAAM,UAAU,cAAc,KAAK,aAAa,aAAa;GAE7D,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,OAAO;GAC5C,MAAM,WAAW,aAAa,IAAI,KAAK,MAAM,MAAM,MAAM,CAAC,QAAQ;GAElE,MAAM,QAAQ,UAAU,YAAY;GAEpC,eAAe;IACb,OAAO,iBAAiB;IACxB,OAAO,eAAe;GACxB,CAAC;EACH;EAEA,MAAM,oBAA0B;GAC9B,MAAM,QAAQ;EAChB;EAEA,MAAM,aAAa,WAAW,KAAK;EAEnC,MAAM,eAAe,eAAmC;GACtD,IAAI,WAAW,OAAO,OAAO,MAAM;GACnC,OAAO,MAAM,QAAQ,aAAa,OAAO,MAAM,MAAM,MAAM,IAAI;EACjE,CAAC;EAED,MAAM,sBAAsB;GAC1B,WAAW,QAAQ,CAAC,WAAW;EACjC;;GApIE,OAAA,UAAA,GAAA,YA4BU,MAAA,aAAA,GA5BV,WA4BU;IA3BP,OAAO,MAAA,GAAA,CAAG,CAAC;IACX,eAAa,aAAA;GACN,GAAA,WAAA,OAAU;IACjB,MAAM,MAAA,IAAA;IACN,UAAU,MAAA,QAAA;IACV,UAAU,MAAA,QAAA;IACV,WAAW;IACX,kBAAc;IACd,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAA,CAAG,UAAU,YAAW;IAC1C,cAAY;IACZ,cAAY;;IAEF,QAAM,cASR,CARP,mBAQO,QAAA,EARA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA,EAAA,GACJ,CAAA,UAAA,
|
|
1
|
+
{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.vue"],"sourcesContent":["<template>\n <u-input\n :class=\"cls.b\"\n :model-value=\"passwordText\"\n v-bind=\"inputProps\"\n :size=\"size\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n :clearable=\"false\"\n @native:input=\"handleUpdatePwd\"\n @update:model-value=\"!$event && handleClear()\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n >\n <template #suffix>\n <span :class=\"cls.e('suffix')\">\n <UIcon v-if=\"showClear\" :class=\"cls.e('clear')\" title=\"清除\" @click.stop=\"handleClear\">\n <Close />\n </UIcon>\n <UIcon :class=\"cls.e('visibility-toggle')\" :size=\"18\" @click.stop=\"toggleVisible\">\n <Hide v-if=\"pwdVisible\" />\n <View v-else />\n </UIcon>\n </span>\n </template>\n\n <template #prefix v-if=\"slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n </u-input>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { Close, Hide, View } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, ref, shallowRef } from 'vue'\n\nimport type { PasswordInputProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'UPasswordInput' })\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n clearable: false,\n disabled: undefined,\n readonly: undefined\n})\n\nconst slots = defineSlots<{ prefix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst inputProps = computed(() => {\n return o(props).pick(['disabled', 'placeholder', 'size'])\n})\n\nconst cls = bem('password-input')\n\nconst model = defineModel<string>()\n\nconst hovered = ref(false)\n\nconst handleMouseEnter = (): void => {\n hovered.value = true\n}\n\nconst handleMouseLeave = (): void => {\n hovered.value = false\n}\n\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && !!model.value && hovered.value\n})\n\nconst passwordChar = '●'\n\nconst handleUpdatePwd = (e: Event): void => {\n const target = e.target as HTMLInputElement\n const val = target.value\n if (!val) {\n model.value = val\n return\n }\n\n // 字符从无到有\n if (!model.value) {\n model.value = val\n return\n }\n\n const pointIndex = target.selectionStart!\n let inputChar = pointIndex === 0 ? '' : val[pointIndex - 1]!\n if (inputChar === passwordChar) inputChar = ''\n\n // 光标右侧字符数量(当前字符长度减去光标位置)\n const rightLen = val.length - pointIndex\n // 光标左侧字符数量 (当光标前的字符是刚刚输入的,则为这个字符前的所有的字符,否则为光标前的所有赐福)\n const leftLen = inputChar === '' ? pointIndex : pointIndex - 1\n\n const leftVal = model.value.slice(0, leftLen)\n const rightVal = rightLen === 0 ? '' : model.value.slice(-rightLen)\n\n model.value = leftVal + inputChar + rightVal\n\n nextTick(() => {\n target.selectionStart = pointIndex\n target.selectionEnd = pointIndex\n })\n}\n\nconst handleClear = (): void => {\n model.value = ''\n}\n\nconst pwdVisible = shallowRef(false)\n\nconst passwordText = computed<string | undefined>(() => {\n if (pwdVisible.value) return model.value\n return model.value ? passwordChar.repeat(model.value.length) : ''\n})\n\nconst toggleVisible = () => {\n pwdVisible.value = !pwdVisible.value\n}\n</script>\n"],"mappings":";;;;;;;;AAoFA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAtCrB,MAAM,QAAQ;EAMd,MAAM,QAAQ,SAAA;EAEd,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,GAAG;GAClF,MAAM;GACN,UAAU;GACV,UAAU;EACZ,CAAC;EAED,MAAM,aAAa,eAAe;GAChC,OAAO,EAAE,KAAK,CAAC,CAAC,KAAK;IAAC;IAAY;IAAe;GAAM,CAAC;EAC1D,CAAC;EAED,MAAM,MAAM,IAAI,gBAAgB;EAEhC,MAAM,QAAQ,SAAmB,SAAA,YAAC;EAElC,MAAM,UAAU,IAAI,KAAK;EAEzB,MAAM,yBAA+B;GACnC,QAAQ,QAAQ;EAClB;EAEA,MAAM,yBAA+B;GACnC,QAAQ,QAAQ;EAClB;EAEA,MAAM,YAAY,eAAe;GAC/B,OAAO,MAAM,aAAa,CAAC,SAAS,SAAS,CAAC,CAAC,MAAM,SAAS,QAAQ;EACxE,CAAC;EAID,MAAM,mBAAmB,MAAmB;GAC1C,MAAM,SAAS,EAAE;GACjB,MAAM,MAAM,OAAO;GACnB,IAAI,CAAC,KAAK;IACR,MAAM,QAAQ;IACd;GACF;GAGA,IAAI,CAAC,MAAM,OAAO;IAChB,MAAM,QAAQ;IACd;GACF;GAEA,MAAM,aAAa,OAAO;GAC1B,IAAI,YAAY,eAAe,IAAI,KAAK,IAAI,aAAa;GACzD,IAAI,cAAc,cAAc,YAAY;GAG5C,MAAM,WAAW,IAAI,SAAS;GAE9B,MAAM,UAAU,cAAc,KAAK,aAAa,aAAa;GAE7D,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,OAAO;GAC5C,MAAM,WAAW,aAAa,IAAI,KAAK,MAAM,MAAM,MAAM,CAAC,QAAQ;GAElE,MAAM,QAAQ,UAAU,YAAY;GAEpC,eAAe;IACb,OAAO,iBAAiB;IACxB,OAAO,eAAe;GACxB,CAAC;EACH;EAEA,MAAM,oBAA0B;GAC9B,MAAM,QAAQ;EAChB;EAEA,MAAM,aAAa,WAAW,KAAK;EAEnC,MAAM,eAAe,eAAmC;GACtD,IAAI,WAAW,OAAO,OAAO,MAAM;GACnC,OAAO,MAAM,QAAQ,aAAa,OAAO,MAAM,MAAM,MAAM,IAAI;EACjE,CAAC;EAED,MAAM,sBAAsB;GAC1B,WAAW,QAAQ,CAAC,WAAW;EACjC;;GApIE,OAAA,UAAA,GAAA,YA4BU,MAAA,aAAA,GA5BV,WA4BU;IA3BP,OAAO,MAAA,GAAA,CAAG,CAAC;IACX,eAAa,aAAA;GACN,GAAA,WAAA,OAAU;IACjB,MAAM,MAAA,IAAA;IACN,UAAU,MAAA,QAAA;IACV,UAAU,MAAA,QAAA;IACV,WAAW;IACX,kBAAc;IACd,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAA,CAAG,UAAU,YAAW;IAC1C,cAAY;IACZ,cAAY;;IAEF,QAAM,cASR,CARP,mBAQO,QAAA,EARA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA,EAAA,GACJ,CAAA,UAAA,SAAb,UAAA,GAAA,YAEQ,MAAA,WAAA,GAAA;;KAFiB,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;KAAW,OAAM;KAAM,SAAK,cAAO,aAAW,CAAA,MAAA,CAAA;;KACjF,SAAA,cAAS,CAAT,YAAS,MAAA,KAAA,CAAA,CAAA,CAAA;;IAEX,GAAA,GAAA,CAAA,OAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,GAAA,YAGQ,MAAA,WAAA,GAAA;KAHA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,mBAAA,CAAA;KAAwB,MAAM;KAAK,SAAK,cAAO,eAAa,CAAA,MAAA,CAAA;;KAC9E,SAAA,cAA0B,CAAd,WAAA,SAAZ,UAAA,GAAA,YAA0B,MAAA,IAAA,GAAA,EAAA,KAAA,EAAA,CAAA,MAC1B,UAAA,GAAA,YAAe,MAAA,IAAA,GAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA;;;;GAKG,GAAA,CAAA,MAAM,SAAA;IAAnB,MAAA;IACT,IAAA,cAAsB,CAAtB,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pop-confirm.js","names":[],"sources":["../../../src/components/pop-confirm/pop-confirm.vue"],"sourcesContent":["<template>\n <u-tip\n :class=\"cls.b\"\n :trigger=\"trigger\"\n :direction=\"direction\"\n :alignment=\"alignment\"\n :content-tag=\"contentTag\"\n v-model:visible=\"visible\"\n >\n <slot name=\"reference\" />\n\n <template #content>\n <div :class=\"[cls.m('main'), cls.m(size)]\">\n <u-icon :size=\"16\" :class=\"cls.m('icon')\" :style=\"{ color: iconColor }\">\n <component :is=\"icon\" />\n </u-icon>\n <span>\n {{ title }}\n </span>\n </div>\n <div :class=\"cls.m('action')\">\n <u-button size=\"small\" @click=\"cancel\" type=\"primary\" text>\n {{ cancelText }}\n </u-button>\n \n <u-button size=\"small\" type=\"primary\" @click=\"confirm\">\n {{ confirmText }}\n </u-button>\n </div>\n </template>\n </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { QuestionFilled } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { ref } from 'vue'\n\nimport type { PopConfirmProps, PopConfirmEmits } from '../../types'\nimport { UButton } from '../button'\nimport { UIcon } from '../icon'\nimport { UTip } from '../tip'\n\ndefineOptions({ name: 'UPopConfirm' })\n\nconst emit = defineEmits<PopConfirmEmits>()\n\nwithDefaults(defineProps<PopConfirmProps>(), {\n trigger: 'click',\n icon: QuestionFilled,\n direction: 'bottom',\n iconColor: '#ffc107',\n confirmText: '确认',\n cancelText: '取消'\n})\n\nconst cls = bem('pop-confirm')\n\nconst visible = ref(false)\n\nconst { formProps } = injectFormContext()\n\nconst { size } = useFormFallbackProps([formProps ?? {}], { size: 'default' })\n\nconst confirm = () => {\n emit('confirm')\n visible.value = false\n}\n\nconst cancel = () => {\n emit('cancel')\n visible.value = false\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EA+CA,MAAM,OAAO;EAWb,MAAM,MAAM,IAAI,aAAa;EAE7B,MAAM,UAAU,IAAI,KAAK;EAEzB,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,SAAS,qBAAqB,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,MAAM,UAAU,CAAC;EAE5E,MAAM,gBAAgB;GACpB,KAAK,SAAS;GACd,QAAQ,QAAQ;EAClB;EAEA,MAAM,eAAe;GACnB,KAAK,QAAQ;GACb,QAAQ,QAAQ;EAClB;;GAzEE,OAAA,UAAA,GAAA,YA6BQ,MAAA,WAAA,GAAA;IA5BL,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,CAAC;IACZ,SAAS,QAAA;IACT,WAAW,QAAA;IACX,WAAW,QAAA;IACX,eAAa,QAAA;IACN,SAAS,QAAA;IAAA,oBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,QAAO,QAAA;;IAIb,SAAO,cAQV,CAPN,mBAOM,OAAA,EAPA,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,GAAU,MAAA,GAAA,CAAG,CAAC,EAAE,MAAA,IAAA,CAAI,CAAA,CAAA,EAAA,GACrC,CAAA,YAES,MAAA,WAAA,GAAA;KAFA,MAAM;KAAK,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,CAAA;KAAW,OAAK,eAAA,EAAA,OAAW,QAAA,UAAS,CAAA;;
|
|
1
|
+
{"version":3,"file":"pop-confirm.js","names":[],"sources":["../../../src/components/pop-confirm/pop-confirm.vue"],"sourcesContent":["<template>\n <u-tip\n :class=\"cls.b\"\n :trigger=\"trigger\"\n :direction=\"direction\"\n :alignment=\"alignment\"\n :content-tag=\"contentTag\"\n v-model:visible=\"visible\"\n >\n <slot name=\"reference\" />\n\n <template #content>\n <div :class=\"[cls.m('main'), cls.m(size)]\">\n <u-icon :size=\"16\" :class=\"cls.m('icon')\" :style=\"{ color: iconColor }\">\n <component :is=\"icon\" />\n </u-icon>\n <span>\n {{ title }}\n </span>\n </div>\n <div :class=\"cls.m('action')\">\n <u-button size=\"small\" @click=\"cancel\" type=\"primary\" text>\n {{ cancelText }}\n </u-button>\n \n <u-button size=\"small\" type=\"primary\" @click=\"confirm\">\n {{ confirmText }}\n </u-button>\n </div>\n </template>\n </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { QuestionFilled } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { ref } from 'vue'\n\nimport type { PopConfirmProps, PopConfirmEmits } from '../../types'\nimport { UButton } from '../button'\nimport { UIcon } from '../icon'\nimport { UTip } from '../tip'\n\ndefineOptions({ name: 'UPopConfirm' })\n\nconst emit = defineEmits<PopConfirmEmits>()\n\nwithDefaults(defineProps<PopConfirmProps>(), {\n trigger: 'click',\n icon: QuestionFilled,\n direction: 'bottom',\n iconColor: '#ffc107',\n confirmText: '确认',\n cancelText: '取消'\n})\n\nconst cls = bem('pop-confirm')\n\nconst visible = ref(false)\n\nconst { formProps } = injectFormContext()\n\nconst { size } = useFormFallbackProps([formProps ?? {}], { size: 'default' })\n\nconst confirm = () => {\n emit('confirm')\n visible.value = false\n}\n\nconst cancel = () => {\n emit('cancel')\n visible.value = false\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EA+CA,MAAM,OAAO;EAWb,MAAM,MAAM,IAAI,aAAa;EAE7B,MAAM,UAAU,IAAI,KAAK;EAEzB,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,SAAS,qBAAqB,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,MAAM,UAAU,CAAC;EAE5E,MAAM,gBAAgB;GACpB,KAAK,SAAS;GACd,QAAQ,QAAQ;EAClB;EAEA,MAAM,eAAe;GACnB,KAAK,QAAQ;GACb,QAAQ,QAAQ;EAClB;;GAzEE,OAAA,UAAA,GAAA,YA6BQ,MAAA,WAAA,GAAA;IA5BL,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,CAAC;IACZ,SAAS,QAAA;IACT,WAAW,QAAA;IACX,WAAW,QAAA;IACX,eAAa,QAAA;IACN,SAAS,QAAA;IAAA,oBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,QAAO,QAAA;;IAIb,SAAO,cAQV,CAPN,mBAOM,OAAA,EAPA,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,GAAU,MAAA,GAAA,CAAG,CAAC,EAAE,MAAA,IAAA,CAAI,CAAA,CAAA,EAAA,GACrC,CAAA,YAES,MAAA,WAAA,GAAA;KAFA,MAAM;KAAK,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,CAAA;KAAW,OAAK,eAAA,EAAA,OAAW,QAAA,UAAS,CAAA;;KAClE,SAAA,cAAwB,EAAxB,UAAA,GAAA,YAAwB,wBAAR,QAAA,IAAI,CAAA,EAAA,CAAA;;IAEtB,GAAA,GAAA,CAAA,SAAA,OAAA,CAAA,GAAA,mBAEO,QAAA,MAAA,gBADF,QAAA,KAAK,GAAA,CAAA,CAAA,GAAA,CAGZ,GAAA,mBAQM,OAAA,EARA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA,EAAA,GAAA;KAChB,YAEW,MAAA,WAAA,GAAA;MAFD,MAAK;MAAS,SAAO;MAAQ,MAAK;MAAU,MAAA;;MACpD,SAAA,cAAgB,CAAb,gBAAA,gBAAA,QAAA,UAAU,GAAA,CAAA,CAAA,CAAA;;;KACJ,OAAA,OAAA,OAAA,KAAA,gBAAA,UAEX,EAAA;KAAA,YAEW,MAAA,WAAA,GAAA;MAFD,MAAK;MAAQ,MAAK;MAAW,SAAO;;MAC5C,SAAA,cAAiB,CAAd,gBAAA,gBAAA,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA;;;;IAjBpB,SAAA,cAAyB,CAAzB,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.js","names":[],"sources":["../../../src/components/progress/progress.vue"],"sourcesContent":["<template>\n <div :class=\"className\">\n <!-- 条形进度条 -->\n <div :class=\"cls.e('bar-wrap')\" v-if=\"!circle\">\n <div :class=\"cls.e('bar')\" :style=\"{ width: percentage + '%' }\">\n <slot v-bind=\"{ percentage, type }\">{{ percentage }}%</slot>\n </div>\n </div>\n\n <!-- 环形进度条 -->\n <div\n v-else\n :class=\"cls.e('circle')\"\n :style=\"{ height: withUnit(size, 'px'), width: withUnit(size, 'px') }\"\n >\n <svg viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" :r=\"r\" fill=\"none\" stroke=\"#f5f8fa\" stroke-width=\"8\" />\n <circle\n :class=\"cls.e('circle-ring')\"\n cx=\"50\"\n cy=\"50\"\n :r=\"r\"\n fill=\"none\"\n :stroke=\"stroke\"\n stroke-width=\"8\"\n :stroke-dasharray=\"dashArray\"\n :stroke-dashoffset=\"offset\"\n :stroke-linecap=\"percentage === 0 ? undefined : 'round'\"\n />\n </svg>\n\n <div :class=\"cls.e('circle-content')\">\n <slot v-bind=\"{ percentage, type }\"> {{ percentage }}% </slot>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n } from '@cat-kit/core'\nimport { bem, withUnit } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { ProgressProps, ColorType } from '../../types'\n\ndefineOptions({ name: 'UProgress' })\n\nconst props = withDefaults(defineProps<ProgressProps>(), { type: 'primary', circle: false })\n\ndefineSlots<{\n default: (props: {\n /** 进度百分比 */\n percentage: number\n /** 样式类型 */\n type: ColorType\n }) => any\n}>()\n\nconst cls = bem('progress')\n\nconst percentage = computed(() => {\n return n(props.percentage ?? 0).range(0, 100)\n})\n\nconst type = computed<ColorType>(() => {\n const { type } = props\n return typeof type === 'function' ? type(percentage.value) : type\n})\n\nconst className = computed(() => {\n return [cls.b, bem.is('circle', props.circle), cls.m(type.value)]\n})\n\n/** 描边 */\nconst stroke = computed(() => {\n return `var(--u-color-${type.value})`\n})\n\nconst r = 44\nconst c = 2 * Math.PI * r\nconst offset = c / 4\n\n/** 圆周 */\nconst dashArray = computed(() => {\n const dashLen = (c * percentage.value) / 100\n return `${dashLen}, ${c - dashLen}`\n})\n</script>\n"],"mappings":";;;;;;;;;;AA8EA,MAAM,IAAI;;;;;;;;;;;;;;;;;EA/BV,MAAM,QAAQ;EAWd,MAAM,MAAM,IAAI,UAAU;EAE1B,MAAM,aAAa,eAAe;GAChC,OAAO,EAAE,MAAM,cAAc,CAAC,CAAC,CAAC,MAAM,GAAG,GAAG;EAC9C,CAAC;EAED,MAAM,OAAO,eAA0B;GACrC,MAAM,EAAE,SAAS;GACjB,OAAO,OAAO,SAAS,aAAa,KAAK,WAAW,KAAK,IAAI;EAC/D,CAAC;EAED,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,GAAG,UAAU,MAAM,MAAM;IAAG,IAAI,EAAE,KAAK,KAAK;GAAC;EAClE,CAAC;;EAGD,MAAM,SAAS,eAAe;GAC5B,OAAO,iBAAiB,KAAK,MAAM;EACrC,CAAC;EAGD,MAAM,IAAI,IAAI,KAAK,KAAK;EACxB,MAAM,SAAS,IAAI;;EAGnB,MAAM,YAAY,eAAe;GAC/B,MAAM,UAAW,IAAI,WAAW,QAAS;GACzC,OAAO,GAAG,QAAQ,IAAI,IAAI;EAC5B,CAAC;;GArFC,OAAA,UAAA,GAAA,mBAkCM,OAAA,EAlCA,OAAK,eAAE,UAAA,KAAS,EAAA,GACpB,CAAA,mBAAA,SAAA,
|
|
1
|
+
{"version":3,"file":"progress.js","names":[],"sources":["../../../src/components/progress/progress.vue"],"sourcesContent":["<template>\n <div :class=\"className\">\n <!-- 条形进度条 -->\n <div :class=\"cls.e('bar-wrap')\" v-if=\"!circle\">\n <div :class=\"cls.e('bar')\" :style=\"{ width: percentage + '%' }\">\n <slot v-bind=\"{ percentage, type }\">{{ percentage }}%</slot>\n </div>\n </div>\n\n <!-- 环形进度条 -->\n <div\n v-else\n :class=\"cls.e('circle')\"\n :style=\"{ height: withUnit(size, 'px'), width: withUnit(size, 'px') }\"\n >\n <svg viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" :r=\"r\" fill=\"none\" stroke=\"#f5f8fa\" stroke-width=\"8\" />\n <circle\n :class=\"cls.e('circle-ring')\"\n cx=\"50\"\n cy=\"50\"\n :r=\"r\"\n fill=\"none\"\n :stroke=\"stroke\"\n stroke-width=\"8\"\n :stroke-dasharray=\"dashArray\"\n :stroke-dashoffset=\"offset\"\n :stroke-linecap=\"percentage === 0 ? undefined : 'round'\"\n />\n </svg>\n\n <div :class=\"cls.e('circle-content')\">\n <slot v-bind=\"{ percentage, type }\"> {{ percentage }}% </slot>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n } from '@cat-kit/core'\nimport { bem, withUnit } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { ProgressProps, ColorType } from '../../types'\n\ndefineOptions({ name: 'UProgress' })\n\nconst props = withDefaults(defineProps<ProgressProps>(), { type: 'primary', circle: false })\n\ndefineSlots<{\n default: (props: {\n /** 进度百分比 */\n percentage: number\n /** 样式类型 */\n type: ColorType\n }) => any\n}>()\n\nconst cls = bem('progress')\n\nconst percentage = computed(() => {\n return n(props.percentage ?? 0).range(0, 100)\n})\n\nconst type = computed<ColorType>(() => {\n const { type } = props\n return typeof type === 'function' ? type(percentage.value) : type\n})\n\nconst className = computed(() => {\n return [cls.b, bem.is('circle', props.circle), cls.m(type.value)]\n})\n\n/** 描边 */\nconst stroke = computed(() => {\n return `var(--u-color-${type.value})`\n})\n\nconst r = 44\nconst c = 2 * Math.PI * r\nconst offset = c / 4\n\n/** 圆周 */\nconst dashArray = computed(() => {\n const dashLen = (c * percentage.value) / 100\n return `${dashLen}, ${c - dashLen}`\n})\n</script>\n"],"mappings":";;;;;;;;;;AA8EA,MAAM,IAAI;;;;;;;;;;;;;;;;;EA/BV,MAAM,QAAQ;EAWd,MAAM,MAAM,IAAI,UAAU;EAE1B,MAAM,aAAa,eAAe;GAChC,OAAO,EAAE,MAAM,cAAc,CAAC,CAAC,CAAC,MAAM,GAAG,GAAG;EAC9C,CAAC;EAED,MAAM,OAAO,eAA0B;GACrC,MAAM,EAAE,SAAS;GACjB,OAAO,OAAO,SAAS,aAAa,KAAK,WAAW,KAAK,IAAI;EAC/D,CAAC;EAED,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,GAAG,UAAU,MAAM,MAAM;IAAG,IAAI,EAAE,KAAK,KAAK;GAAC;EAClE,CAAC;;EAGD,MAAM,SAAS,eAAe;GAC5B,OAAO,iBAAiB,KAAK,MAAM;EACrC,CAAC;EAGD,MAAM,IAAI,IAAI,KAAK,KAAK;EACxB,MAAM,SAAS,IAAI;;EAGnB,MAAM,YAAY,eAAe;GAC/B,MAAM,UAAW,IAAI,WAAW,QAAS;GACzC,OAAO,GAAG,QAAQ,IAAI,IAAI;EAC5B,CAAC;;GArFC,OAAA,UAAA,GAAA,mBAkCM,OAAA,EAlCA,OAAK,eAAE,UAAA,KAAS,EAAA,GACpB,CAAA,mBAAA,SAAA,GACuC,CAAA,QAAA,UAAvC,UAAA,GAAA,mBAIM,OAAA;;IAJA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,UAAA,CAAA;GAChB,GAAA,CAAA,mBAEM,OAAA;IAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,KAAA,CAAA;IAAU,OAAK,eAAA,EAAA,OAAW,WAAA,QAAU,IAAA,CAAA;GACpD,GAAA,CAAA,WAA4D,KAAA,QAAA,WAAA,eAAA,mBAAA;IAAA,YAA5C,WAAA;IAAU,MAAE,KAAA;GAAI,CAAA,CAAA,SAA4B,CAArB,gBAAA,gBAAA,WAAA,KAAU,IAAG,KAAC,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAKzD,MAAA,UAAA,GAAA,mBAwBM,UAAA,EAAA,KAAA,EAAA,GAAA,CAzBN,mBAAA,SAAA,GACA,mBAwBM,OAAA;IAtBH,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA;IACZ,OAAK,eAAA;KAAA,QAAY,MAAA,QAAA,CAAQ,CAAC,QAAA,MAAI,IAAA;KAAA,OAAgB,MAAA,QAAA,CAAQ,CAAC,QAAA,MAAI,IAAA;IAAA,CAAA;GAE5D,GAAA,EAAA,UAAA,GAAA,mBAcM,OAdN,YAcM,CAbJ,mBAA+E,UAAA;IAAvE,IAAG;IAAK,IAAG;IAAS;IAAG,MAAK;IAAO,QAAO;IAAU,gBAAa;GACzE,CAAA,GAAA,mBAWE,UAAA;IAVC,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA,CAAA;IACb,IAAG;IACH,IAAG;IACC;IACJ,MAAK;IACJ,QAAQ,OAAA;IACT,gBAAa;IACZ,oBAAkB,UAAA;IAClB,qBAAmB;IACnB,kBAAgB,WAAA,UAAU,IAAS,KAAA,IAAS;GAIjD,GAAA,MAAA,IAAA,UAAA,CAAA,CAAA,IAAA,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,gBAAA,CAAA,EAAA,GAChB,CAAA,WAA8D,KAAA,QAAA,WAAA,eAAA,mBAAA;IAAA,YAA9C,WAAA;IAAU,MAAE,KAAA;GAAI,CAAA,CAAA,SAA8B,CAAtB,gBAAA,gBAAA,WAAA,KAAU,IAAG,MAAE,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,EAAA,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-nodes.js","names":[],"sources":["../../../src/components/progress-nodes/progress-nodes.vue"],"sourcesContent":["<template>\n <div ref=\"container\" :class=\"className\" :style=\"containerStyle\" @scroll=\"checkScroll\">\n <ul :class=\"cls.e('list')\">\n <li\n v-for=\"(node, index) in nodes\"\n :key=\"node.key ?? index\"\n :class=\"[\n cls.e('item'),\n bem.is('checked', isChecked(node, index)),\n bem.is('active', isActive(node))\n ]\"\n @click=\"handleClick(node, index)\"\n >\n <div :class=\"cls.e('node')\">\n <!-- 虚线连接 -->\n <div v-if=\"index !== nodes.length - 1\" :class=\"cls.e('link')\"></div>\n\n <!-- 节点圆点 -->\n <span :class=\"cls.e('dot')\">\n <slot name=\"icon\" :node=\"node\" :index=\"index\" />\n </span>\n </div>\n\n <div :class=\"cls.e('label')\">\n <slot :node=\"node\" :index=\"index\">\n {{ getLabel(node) }}\n </slot>\n </div>\n </li>\n </ul>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useDrag, useResizeObserver } from '@veltra/compositions'\nimport { bem, fieldKey } from '@veltra/utils'\nimport { computed, shallowRef, toRefs, useTemplateRef, watch, nextTick } from 'vue'\n\nimport type { ProgressNodesProps, ProgressNodesEmits } from '../../types'\n\ndefineOptions({ name: 'UProgressNodes' })\n\nconst props = withDefaults(defineProps<ProgressNodesProps>(), {\n colorType: 'primary',\n labelKey: 'label',\n valueKey: 'value'\n})\n\nconst emit = defineEmits<ProgressNodesEmits>()\n\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\n\nconst { nodes } = toRefs(props)\n\nconst cls = bem('progress-nodes')\nconst containerRef = useTemplateRef('container')\nconst isDragging = shallowRef(false)\nconst isScrollable = shallowRef(false)\nconst showMaskStart = shallowRef(false)\nconst showMaskEnd = shallowRef(false)\n\nconst className = computed(() => [\n cls.b,\n cls.m(props.colorType),\n bem.is('scrollable', isScrollable.value),\n bem.is('dragging', isDragging.value),\n bem.is('mask-start', showMaskStart.value),\n bem.is('mask-end', showMaskEnd.value)\n])\n\nconst containerStyle = computed(() => {\n const style: Record<string, string> = {}\n const maxWidth = toCssSize(props.maxWidth)\n if (maxWidth) style.maxWidth = maxWidth\n return style\n})\n\nlet startScrollLeft = 0\n\nuseDrag({\n target: containerRef,\n onDragStart() {\n if (!isScrollable.value) return\n const container = containerRef.value\n if (!container) return\n isDragging.value = true\n startScrollLeft = container.scrollLeft\n },\n onDrag({ x }) {\n if (!isScrollable.value) return\n const container = containerRef.value\n if (!container) return\n container.scrollLeft = startScrollLeft - x\n },\n onDragEnd() {\n isDragging.value = false\n }\n})\n\nuseResizeObserver({ targets: containerRef, onResize: checkScroll })\n\nwatch(\n nodes,\n () => {\n nextTick(checkScroll)\n },\n { deep: true }\n)\n\nfunction checkScroll() {\n const container = containerRef.value\n if (!container) return\n\n const { scrollLeft, scrollWidth, clientWidth } = container\n isScrollable.value = scrollWidth > clientWidth + 1\n showMaskStart.value = scrollLeft > 0\n showMaskEnd.value = scrollLeft + clientWidth < scrollWidth - 1\n}\n\nfunction isChecked(node: Record<string, any>, index: number) {\n return props.check?.(node, index) ?? false\n}\n\nfunction isActive(node: Record<string, any>) {\n const value = o(node).get(valueKey.value)\n return props.modelValue === value\n}\n\nfunction getLabel(node: Record<string, any>) {\n return o(node).get(labelKey.value)\n}\n\nfunction handleClick(node: Record<string, any>, index: number) {\n const value = o(node).get(valueKey.value)\n emit('update:modelValue', value)\n emit('click', node, index)\n}\n\nfunction toCssSize(value?: number | string) {\n if (value === undefined) return undefined\n return typeof value === 'number' ? `${value}px` : value\n}\n</script>\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"progress-nodes.js","names":[],"sources":["../../../src/components/progress-nodes/progress-nodes.vue"],"sourcesContent":["<template>\n <div ref=\"container\" :class=\"className\" :style=\"containerStyle\" @scroll=\"checkScroll\">\n <ul :class=\"cls.e('list')\">\n <li\n v-for=\"(node, index) in nodes\"\n :key=\"node.key ?? index\"\n :class=\"[\n cls.e('item'),\n bem.is('checked', isChecked(node, index)),\n bem.is('active', isActive(node))\n ]\"\n @click=\"handleClick(node, index)\"\n >\n <div :class=\"cls.e('node')\">\n <!-- 虚线连接 -->\n <div v-if=\"index !== nodes.length - 1\" :class=\"cls.e('link')\"></div>\n\n <!-- 节点圆点 -->\n <span :class=\"cls.e('dot')\">\n <slot name=\"icon\" :node=\"node\" :index=\"index\" />\n </span>\n </div>\n\n <div :class=\"cls.e('label')\">\n <slot :node=\"node\" :index=\"index\">\n {{ getLabel(node) }}\n </slot>\n </div>\n </li>\n </ul>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useDrag, useResizeObserver } from '@veltra/compositions'\nimport { bem, fieldKey } from '@veltra/utils'\nimport { computed, shallowRef, toRefs, useTemplateRef, watch, nextTick } from 'vue'\n\nimport type { ProgressNodesProps, ProgressNodesEmits } from '../../types'\n\ndefineOptions({ name: 'UProgressNodes' })\n\nconst props = withDefaults(defineProps<ProgressNodesProps>(), {\n colorType: 'primary',\n labelKey: 'label',\n valueKey: 'value'\n})\n\nconst emit = defineEmits<ProgressNodesEmits>()\n\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\n\nconst { nodes } = toRefs(props)\n\nconst cls = bem('progress-nodes')\nconst containerRef = useTemplateRef('container')\nconst isDragging = shallowRef(false)\nconst isScrollable = shallowRef(false)\nconst showMaskStart = shallowRef(false)\nconst showMaskEnd = shallowRef(false)\n\nconst className = computed(() => [\n cls.b,\n cls.m(props.colorType),\n bem.is('scrollable', isScrollable.value),\n bem.is('dragging', isDragging.value),\n bem.is('mask-start', showMaskStart.value),\n bem.is('mask-end', showMaskEnd.value)\n])\n\nconst containerStyle = computed(() => {\n const style: Record<string, string> = {}\n const maxWidth = toCssSize(props.maxWidth)\n if (maxWidth) style.maxWidth = maxWidth\n return style\n})\n\nlet startScrollLeft = 0\n\nuseDrag({\n target: containerRef,\n onDragStart() {\n if (!isScrollable.value) return\n const container = containerRef.value\n if (!container) return\n isDragging.value = true\n startScrollLeft = container.scrollLeft\n },\n onDrag({ x }) {\n if (!isScrollable.value) return\n const container = containerRef.value\n if (!container) return\n container.scrollLeft = startScrollLeft - x\n },\n onDragEnd() {\n isDragging.value = false\n }\n})\n\nuseResizeObserver({ targets: containerRef, onResize: checkScroll })\n\nwatch(\n nodes,\n () => {\n nextTick(checkScroll)\n },\n { deep: true }\n)\n\nfunction checkScroll() {\n const container = containerRef.value\n if (!container) return\n\n const { scrollLeft, scrollWidth, clientWidth } = container\n isScrollable.value = scrollWidth > clientWidth + 1\n showMaskStart.value = scrollLeft > 0\n showMaskEnd.value = scrollLeft + clientWidth < scrollWidth - 1\n}\n\nfunction isChecked(node: Record<string, any>, index: number) {\n return props.check?.(node, index) ?? false\n}\n\nfunction isActive(node: Record<string, any>) {\n const value = o(node).get(valueKey.value)\n return props.modelValue === value\n}\n\nfunction getLabel(node: Record<string, any>) {\n return o(node).get(labelKey.value)\n}\n\nfunction handleClick(node: Record<string, any>, index: number) {\n const value = o(node).get(valueKey.value)\n emit('update:modelValue', value)\n emit('click', node, index)\n}\n\nfunction toCssSize(value?: number | string) {\n if (value === undefined) return undefined\n return typeof value === 'number' ? `${value}px` : value\n}\n</script>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.vue"],"sourcesContent":["<template>\n <label :class=\"classList\">\n <input\n type=\"radio\"\n :class=\"cls.e('native')\"\n :value=\"value\"\n v-model=\"model\"\n :disabled=\"disabled\"\n />\n\n <!-- radio框 -->\n <section :class=\"cls.e('button')\">\n <transition name=\"zoom-in\">\n <span :class=\"cls.e('inner')\" v-if=\"radioChecked\"></span>\n </transition>\n </section>\n\n <span :class=\"cls.e('label')\">\n <slot>{{ label }}</slot>\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 { RadioProps, RadioEmits } from '../../types'\n\ndefineOptions({ name: 'URadio' })\n\nconst model = defineModel<any>()\n\nconst props = withDefaults(defineProps<RadioProps>(), { disabled: undefined })\n\ndefineEmits<RadioEmits>()\n\nconst cls = bem('radio')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false\n})\n\nconst radioChecked = computed(() => model.value === props.value)\n\nconst classList = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('checked', radioChecked.value)\n ]\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,QAAQ,SAAgB,SAAA,YAAC;EAE/B,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,OAAO;EAEvB,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,GAAG;GACxE,MAAM;GACN,UAAU;EACZ,CAAC;EAED,MAAM,eAAe,eAAe,MAAM,UAAU,MAAM,KAAK;EAE/D,MAAM,YAAY,eAAe;GAC/B,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,KAAK;IAChB,IAAI,GAAG,YAAY,SAAS,KAAK;IACjC,IAAI,GAAG,WAAW,aAAa,KAAK;GACtC;EACF,CAAC;;GAxDC,OAAA,UAAA,GAAA,mBAmBQ,SAAA,EAnBA,OAAK,eAAE,UAAA,KAAS,EAAA,GAAA;IACtB,eAAA,mBAME,SAAA;KALA,MAAK;KACJ,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA;KACZ,OAAO,QAAA;KACC,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;KACb,UAAU,MAAA,QAAA;IADF,GAAA,MAAA,IAAA,UAAA,GAAA,CAAA,CAAA,aAAA,MAAA,KAAK,CAAA,CAAA;IAIhB,mBAAA,UAAA;IACA,mBAIU,WAAA,EAJA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA,EAAA,GACpB,CAAA,YAEa,YAAA,EAFD,MAAK,UAAS,GAAA;
|
|
1
|
+
{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.vue"],"sourcesContent":["<template>\n <label :class=\"classList\">\n <input\n type=\"radio\"\n :class=\"cls.e('native')\"\n :value=\"value\"\n v-model=\"model\"\n :disabled=\"disabled\"\n />\n\n <!-- radio框 -->\n <section :class=\"cls.e('button')\">\n <transition name=\"zoom-in\">\n <span :class=\"cls.e('inner')\" v-if=\"radioChecked\"></span>\n </transition>\n </section>\n\n <span :class=\"cls.e('label')\">\n <slot>{{ label }}</slot>\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 { RadioProps, RadioEmits } from '../../types'\n\ndefineOptions({ name: 'URadio' })\n\nconst model = defineModel<any>()\n\nconst props = withDefaults(defineProps<RadioProps>(), { disabled: undefined })\n\ndefineEmits<RadioEmits>()\n\nconst cls = bem('radio')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false\n})\n\nconst radioChecked = computed(() => model.value === props.value)\n\nconst classList = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('checked', radioChecked.value)\n ]\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,QAAQ,SAAgB,SAAA,YAAC;EAE/B,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,OAAO;EAEvB,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,GAAG;GACxE,MAAM;GACN,UAAU;EACZ,CAAC;EAED,MAAM,eAAe,eAAe,MAAM,UAAU,MAAM,KAAK;EAE/D,MAAM,YAAY,eAAe;GAC/B,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,KAAK;IAChB,IAAI,GAAG,YAAY,SAAS,KAAK;IACjC,IAAI,GAAG,WAAW,aAAa,KAAK;GACtC;EACF,CAAC;;GAxDC,OAAA,UAAA,GAAA,mBAmBQ,SAAA,EAnBA,OAAK,eAAE,UAAA,KAAS,EAAA,GAAA;IACtB,eAAA,mBAME,SAAA;KALA,MAAK;KACJ,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA;KACZ,OAAO,QAAA;KACC,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;KACb,UAAU,MAAA,QAAA;IADF,GAAA,MAAA,IAAA,UAAA,GAAA,CAAA,CAAA,aAAA,MAAA,KAAK,CAAA,CAAA;IAIhB,mBAAA,UAAA;IACA,mBAIU,WAAA,EAJA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA,EAAA,GACpB,CAAA,YAEa,YAAA,EAFD,MAAK,UAAS,GAAA;KACxB,SAAA,cAAyD,CAArB,aAAA,SAApC,UAAA,GAAA,mBAAyD,QAAA;;MAAlD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;;;;IAIvB,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA,EAAA,GACjB,CAAA,WAAwB,KAAA,QAAA,WAAA,CAAA,SAAA,CAAf,gBAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.js","names":["$attrs"],"sources":["../../../src/components/radio-group/radio-group.vue"],"sourcesContent":["<template>\n <div v-if=\"!readonly\" v-bind=\"$attrs\" :class=\"[cls.b, bem.is('block', block), cls.m(size)]\">\n <u-radio\n v-for=\"item of items\"\n :key=\"item[valueKey]\"\n :value=\"item[valueKey]\"\n :model-value=\"model\"\n @update:model-value=\"handleUpdate($event, item)\"\n :disabled=\"disabledItem?.(item) || disabled\"\n :size=\"size\"\n >\n {{ item[labelKey] }}\n </u-radio>\n </div>\n\n <template v-else>\n {{ items.find((item) => item[valueKey] === model)?.[labelKey] || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { RadioGroupProps, RadioGroupEmits } from '../../types'\nimport URadio from '../radio/radio.vue'\n\ndefineOptions({ name: 'URadioGroup', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n labelKey: 'label',\n valueKey: 'value',\n disabled: undefined,\n readonly: undefined\n})\n\nconst model = defineModel<any>()\n\nconst emit = defineEmits<RadioGroupEmits>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst cls = bem('radio-group')\n\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\n\nconst handleUpdate = (value: any, item: Record<string, any>) => {\n model.value = value\n emit('change', item)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,QAAQ;EAOd,MAAM,QAAQ,SAAgB,SAAA,YAAC;EAE/B,MAAM,OAAO;EAEb,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,GAAG;GAClF,MAAM;GACN,UAAU;GACV,UAAU;EACZ,CAAC;EAED,MAAM,MAAM,IAAI,aAAa;EAE7B,MAAM,WAAW,eAAe,SAAS,MAAM,UAAU,OAAO,CAAC;EACjE,MAAM,WAAW,eAAe,SAAS,MAAM,UAAU,OAAO,CAAC;EAEjE,MAAM,gBAAgB,OAAY,SAA8B;GAC9D,MAAM,QAAQ;GACd,KAAK,UAAU,IAAI;EACrB;;GAzDc,OAAA,CAAA,MAAA,QAAA,
|
|
1
|
+
{"version":3,"file":"radio-group.js","names":["$attrs"],"sources":["../../../src/components/radio-group/radio-group.vue"],"sourcesContent":["<template>\n <div v-if=\"!readonly\" v-bind=\"$attrs\" :class=\"[cls.b, bem.is('block', block), cls.m(size)]\">\n <u-radio\n v-for=\"item of items\"\n :key=\"item[valueKey]\"\n :value=\"item[valueKey]\"\n :model-value=\"model\"\n @update:model-value=\"handleUpdate($event, item)\"\n :disabled=\"disabledItem?.(item) || disabled\"\n :size=\"size\"\n >\n {{ item[labelKey] }}\n </u-radio>\n </div>\n\n <template v-else>\n {{ items.find((item) => item[valueKey] === model)?.[labelKey] || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { RadioGroupProps, RadioGroupEmits } from '../../types'\nimport URadio from '../radio/radio.vue'\n\ndefineOptions({ name: 'URadioGroup', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n labelKey: 'label',\n valueKey: 'value',\n disabled: undefined,\n readonly: undefined\n})\n\nconst model = defineModel<any>()\n\nconst emit = defineEmits<RadioGroupEmits>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst cls = bem('radio-group')\n\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\n\nconst handleUpdate = (value: any, item: Record<string, any>) => {\n model.value = value\n emit('change', item)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,QAAQ;EAOd,MAAM,QAAQ,SAAgB,SAAA,YAAC;EAE/B,MAAM,OAAO;EAEb,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,GAAG;GAClF,MAAM;GACN,UAAU;GACV,UAAU;EACZ,CAAC;EAED,MAAM,MAAM,IAAI,aAAa;EAE7B,MAAM,WAAW,eAAe,SAAS,MAAM,UAAU,OAAO,CAAC;EACjE,MAAM,WAAW,eAAe,SAAS,MAAM,UAAU,OAAO,CAAC;EAEjE,MAAM,gBAAgB,OAAY,SAA8B;GAC9D,MAAM,QAAQ;GACd,KAAK,UAAU,IAAI;EACrB;;GAzDc,OAAA,CAAA,MAAA,QAAA,KAAZ,UAAA,GAAA,mBAYM,OAZN,WAYM,EAAA,KAAA,EAAA,GAZwBA,KAAAA,QAAM,EAAG,OAAK;IAAG,MAAA,GAAA,CAAG,CAAC;IAAG,MAAA,GAAA,CAAG,CAAC,GAAE,SAAU,QAAA,KAAK;IAAG,MAAA,GAAA,CAAG,CAAC,EAAE,MAAA,IAAA,CAAI;GAAA,EAAA,CAAA,GACtF,EAAA,UAAA,IAAA,GAAA,mBAUU,UAAA,MAAA,WATO,QAAA,QAAR,SAAI;IADb,OAAA,UAAA,GAAA,YAUU,aAAA;KARP,KAAK,KAAK,SAAA;KACV,OAAO,KAAK,SAAA;KACZ,eAAa,MAAA;KACb,wBAAkB,WAAE,aAAa,QAAQ,IAAI;KAC7C,UAAU,QAAA,eAAe,IAAI,KAAK,MAAA,QAAA;KAClC,MAAM,MAAA,IAAA;;KAEP,SAAA,cAAoB,CAAjB,gBAAA,gBAAA,KAAK,SAAA,MAAQ,GAAA,CAAA,CAAA,CAAA;;;;;;;;;GAIpB,CAAA,GAAA,GAAA,EAAA,GAAA,EAAA,MAAA,UAAA,GAAA,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CADN,gBAAA,gBAAA,QAAA,MAAM,MAAM,SAAS,KAAK,SAAA,WAAc,MAAA,KAAK,CAAA,GAAI,SAAA,UAAa,MAAA,kBAAA,CAAkB,GAAA,CAAA,CAAA,GAAA,EAAA"}
|
|
@@ -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 { 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 () => {\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 { editor: editorInstance }\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.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 () => {\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 { editor: editorInstance }\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.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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.js","names":[],"sources":["../../../src/components/rich-text-editor/toolbar.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('toolbar')\">\n <template v-for=\"(item, index) in toolbar\" :key=\"index\">\n <div v-if=\"item === '|'\" :class=\"cls.e('separator')\"></div>\n\n <div v-else-if=\"item === 'heading'\" :class=\"[cls.e('toolbar-dropdown')]\">\n <select\n :class=\"[cls.e('heading-select'), { 'is-disabled': disabled }]\"\n :value=\"activeHeading\"\n :disabled=\"disabled\"\n @change=\"onHeadingChange\"\n >\n <option value=\"paragraph\">正文</option>\n <option value=\"h1\">Heading 1</option>\n <option value=\"h2\">Heading 2</option>\n <option value=\"h3\">Heading 3</option>\n <option value=\"h4\">Heading 4</option>\n <option value=\"h5\">Heading 5</option>\n <option value=\"h6\">Heading 6</option>\n </select>\n </div>\n\n <button\n v-else\n type=\"button\"\n :class=\"[\n cls.e('toolbar-btn'),\n { 'is-active': isActive(item) },\n { 'is-disabled': disabled }\n ]\"\n :disabled=\"disabled\"\n :title=\"getTitle(item)\"\n @click=\"onToolbarAction(item)\"\n >\n <span :class=\"cls.e('toolbar-icon')\" v-html=\"getIcon(item)\"></span>\n </button>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode } from '@lexical/list'\nimport { $createHeadingNode, $isHeadingNode, type HeadingTagType } from '@lexical/rich-text'\nimport { $isQuoteNode, $createQuoteNode } from '@lexical/rich-text'\nimport { $setBlocksType } from '@lexical/selection'\nimport { $getNearestNodeOfType } from '@lexical/utils'\nimport { bem } from '@veltra/utils'\nimport {\n $getSelection,\n $isRangeSelection,\n FORMAT_TEXT_COMMAND,\n UNDO_COMMAND,\n REDO_COMMAND,\n type LexicalEditor,\n $createParagraphNode,\n type RangeSelection\n} from 'lexical'\nimport { ref, onBeforeUnmount, watch } from 'vue'\n\nimport type { ToolbarItem } from '../../types'\n\nconst props = defineProps<{\n editor: LexicalEditor | null\n toolbar: ToolbarItem[]\n disabled: boolean\n}>()\n\nconst cls = bem('rich-text-editor')\n\n// Active states\nconst isBold = ref(false)\nconst isItalic = ref(false)\nconst isUnderline = ref(false)\nconst isStrikethrough = ref(false)\nconst isLink = ref(false)\nconst isBulletList = ref(false)\nconst isOrderedList = ref(false)\nconst isBlockquote = ref(false)\nconst activeHeading = ref('paragraph')\n\nlet cleanupListener: (() => void) | null = null\n\nfunction setupListener(editorInstance: LexicalEditor) {\n cleanupListener?.()\n cleanupListener = editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(\n () => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n updateToolbarState(selection)\n },\n { editor: editorInstance }\n )\n })\n}\n\nfunction updateToolbarState(selection: RangeSelection) {\n isBold.value = selection.hasFormat('bold')\n isItalic.value = selection.hasFormat('italic')\n isUnderline.value = selection.hasFormat('underline')\n isStrikethrough.value = selection.hasFormat('strikethrough')\n\n // Check block type\n const anchorNode = selection.anchor.getNode()\n let element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow()\n\n if ($isHeadingNode(element)) {\n activeHeading.value = (element as any).getTag()\n } else {\n activeHeading.value = 'paragraph'\n }\n\n // Check list\n const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n if (parentList) {\n const listType = (parentList as any).getListType()\n isBulletList.value = listType === 'bullet'\n isOrderedList.value = listType === 'number'\n } else {\n isBulletList.value = false\n isOrderedList.value = false\n }\n\n // Check blockquote\n isBlockquote.value = $isQuoteNode(element)\n\n // Check link\n const parent = anchorNode.getParent()\n isLink.value = $isLinkNode(parent)\n}\n\nwatch(\n () => props.editor,\n (editorInstance) => {\n if (editorInstance) {\n setupListener(editorInstance)\n }\n },\n { immediate: true }\n)\n\nfunction isActive(item: ToolbarItem): boolean {\n switch (item) {\n case 'bold':\n return isBold.value\n case 'italic':\n return isItalic.value\n case 'underline':\n return isUnderline.value\n case 'strikethrough':\n return isStrikethrough.value\n case 'bullet-list':\n return isBulletList.value\n case 'ordered-list':\n return isOrderedList.value\n case 'blockquote':\n return isBlockquote.value\n case 'link':\n return isLink.value\n default:\n return false\n }\n}\n\nfunction onToolbarAction(item: ToolbarItem) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n switch (item) {\n case 'bold':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n break\n case 'italic':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n break\n case 'underline':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')\n break\n case 'strikethrough':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')\n break\n case 'code':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')\n break\n case 'bullet-list':\n editorInstance.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n break\n case 'ordered-list':\n editorInstance.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)\n break\n case 'blockquote':\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (isBlockquote.value) {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createQuoteNode())\n }\n }\n })\n break\n case 'link':\n toggleLink(editorInstance)\n break\n case 'undo':\n editorInstance.dispatchCommand(UNDO_COMMAND, undefined)\n break\n case 'redo':\n editorInstance.dispatchCommand(REDO_COMMAND, undefined)\n break\n }\n\n // Keep focus on editor\n editorInstance.focus()\n}\n\nfunction onHeadingChange(event: Event) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n const value = (event.target as HTMLSelectElement).value\n\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (value === 'paragraph') {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createHeadingNode(value as HeadingTagType))\n }\n }\n })\n\n editorInstance.focus()\n}\n\nfunction toggleLink(editorInstance: LexicalEditor) {\n let shouldRemoveLink = false\n\n editorInstance.read(() => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n const parent = selection.anchor.getNode().getParent()\n shouldRemoveLink = $isLinkNode(parent)\n })\n\n if (shouldRemoveLink) {\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n return\n }\n\n const url = prompt('请输入链接地址:', 'https://')\n if (url && url !== 'https://') {\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)\n }\n}\n\nfunction getTitle(item: ToolbarItem): string {\n const titles: Record<string, string> = {\n bold: '加粗',\n italic: '斜体',\n underline: '下划线',\n strikethrough: '删除线',\n code: '行内代码',\n 'bullet-list': '无序列表',\n 'ordered-list': '有序列表',\n blockquote: '引用',\n 'code-block': '代码块',\n link: '链接',\n undo: '撤销',\n redo: '重做'\n }\n return titles[item] ?? item\n}\n\nfunction getIcon(item: ToolbarItem): string {\n const icons: Record<string, string> = {\n bold: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/><path d=\"M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/></svg>',\n italic:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"/><line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"/><line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"/></svg>',\n underline:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3\"/><line x1=\"4\" y1=\"21\" x2=\"20\" y2=\"21\"/></svg>',\n strikethrough:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 4H9a3 3 0 0 0-2.83 4\"/><path d=\"M14 12a4 4 0 0 1 0 8H6\"/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/></svg>',\n code: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/></svg>',\n 'bullet-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"/><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"/><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"/><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"/></svg>',\n 'ordered-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"10\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"10\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"10\" y1=\"18\" x2=\"21\" y2=\"18\"/><path d=\"M4 6h1v4\"/><path d=\"M4 10h2\"/><path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\"/></svg>',\n blockquote:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z\"/><path d=\"M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3z\"/></svg>',\n 'code-block':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"2\"/><path d=\"m8 10-3 2 3 2\"/><path d=\"m16 10 3 2-3 2\"/><path d=\"m13 7-2 10\"/></svg>',\n link: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/></svg>',\n undo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/></svg>',\n redo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\"/></svg>'\n }\n return icons[item] ?? ''\n}\n\nonBeforeUnmount(() => {\n cleanupListener?.()\n cleanupListener = null\n})\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"toolbar.js","names":[],"sources":["../../../src/components/rich-text-editor/toolbar.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('toolbar')\">\n <template v-for=\"(item, index) in toolbar\" :key=\"index\">\n <div v-if=\"item === '|'\" :class=\"cls.e('separator')\"></div>\n\n <div v-else-if=\"item === 'heading'\" :class=\"[cls.e('toolbar-dropdown')]\">\n <select\n :class=\"[cls.e('heading-select'), { 'is-disabled': disabled }]\"\n :value=\"activeHeading\"\n :disabled=\"disabled\"\n @change=\"onHeadingChange\"\n >\n <option value=\"paragraph\">正文</option>\n <option value=\"h1\">Heading 1</option>\n <option value=\"h2\">Heading 2</option>\n <option value=\"h3\">Heading 3</option>\n <option value=\"h4\">Heading 4</option>\n <option value=\"h5\">Heading 5</option>\n <option value=\"h6\">Heading 6</option>\n </select>\n </div>\n\n <button\n v-else\n type=\"button\"\n :class=\"[\n cls.e('toolbar-btn'),\n { 'is-active': isActive(item) },\n { 'is-disabled': disabled }\n ]\"\n :disabled=\"disabled\"\n :title=\"getTitle(item)\"\n @click=\"onToolbarAction(item)\"\n >\n <span :class=\"cls.e('toolbar-icon')\" v-html=\"getIcon(item)\"></span>\n </button>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode } from '@lexical/list'\nimport { $createHeadingNode, $isHeadingNode, type HeadingTagType } from '@lexical/rich-text'\nimport { $isQuoteNode, $createQuoteNode } from '@lexical/rich-text'\nimport { $setBlocksType } from '@lexical/selection'\nimport { $getNearestNodeOfType } from '@lexical/utils'\nimport { bem } from '@veltra/utils'\nimport {\n $getSelection,\n $isRangeSelection,\n FORMAT_TEXT_COMMAND,\n UNDO_COMMAND,\n REDO_COMMAND,\n type LexicalEditor,\n $createParagraphNode,\n type RangeSelection\n} from 'lexical'\nimport { ref, onBeforeUnmount, watch } from 'vue'\n\nimport type { ToolbarItem } from '../../types'\n\nconst props = defineProps<{\n editor: LexicalEditor | null\n toolbar: ToolbarItem[]\n disabled: boolean\n}>()\n\nconst cls = bem('rich-text-editor')\n\n// Active states\nconst isBold = ref(false)\nconst isItalic = ref(false)\nconst isUnderline = ref(false)\nconst isStrikethrough = ref(false)\nconst isLink = ref(false)\nconst isBulletList = ref(false)\nconst isOrderedList = ref(false)\nconst isBlockquote = ref(false)\nconst activeHeading = ref('paragraph')\n\nlet cleanupListener: (() => void) | null = null\n\nfunction setupListener(editorInstance: LexicalEditor) {\n cleanupListener?.()\n cleanupListener = editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(\n () => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n updateToolbarState(selection)\n },\n { editor: editorInstance }\n )\n })\n}\n\nfunction updateToolbarState(selection: RangeSelection) {\n isBold.value = selection.hasFormat('bold')\n isItalic.value = selection.hasFormat('italic')\n isUnderline.value = selection.hasFormat('underline')\n isStrikethrough.value = selection.hasFormat('strikethrough')\n\n // Check block type\n const anchorNode = selection.anchor.getNode()\n let element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow()\n\n if ($isHeadingNode(element)) {\n activeHeading.value = (element as any).getTag()\n } else {\n activeHeading.value = 'paragraph'\n }\n\n // Check list\n const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n if (parentList) {\n const listType = (parentList as any).getListType()\n isBulletList.value = listType === 'bullet'\n isOrderedList.value = listType === 'number'\n } else {\n isBulletList.value = false\n isOrderedList.value = false\n }\n\n // Check blockquote\n isBlockquote.value = $isQuoteNode(element)\n\n // Check link\n const parent = anchorNode.getParent()\n isLink.value = $isLinkNode(parent)\n}\n\nwatch(\n () => props.editor,\n (editorInstance) => {\n if (editorInstance) {\n setupListener(editorInstance)\n }\n },\n { immediate: true }\n)\n\nfunction isActive(item: ToolbarItem): boolean {\n switch (item) {\n case 'bold':\n return isBold.value\n case 'italic':\n return isItalic.value\n case 'underline':\n return isUnderline.value\n case 'strikethrough':\n return isStrikethrough.value\n case 'bullet-list':\n return isBulletList.value\n case 'ordered-list':\n return isOrderedList.value\n case 'blockquote':\n return isBlockquote.value\n case 'link':\n return isLink.value\n default:\n return false\n }\n}\n\nfunction onToolbarAction(item: ToolbarItem) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n switch (item) {\n case 'bold':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n break\n case 'italic':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n break\n case 'underline':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')\n break\n case 'strikethrough':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')\n break\n case 'code':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')\n break\n case 'bullet-list':\n editorInstance.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n break\n case 'ordered-list':\n editorInstance.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)\n break\n case 'blockquote':\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (isBlockquote.value) {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createQuoteNode())\n }\n }\n })\n break\n case 'link':\n toggleLink(editorInstance)\n break\n case 'undo':\n editorInstance.dispatchCommand(UNDO_COMMAND, undefined)\n break\n case 'redo':\n editorInstance.dispatchCommand(REDO_COMMAND, undefined)\n break\n }\n\n // Keep focus on editor\n editorInstance.focus()\n}\n\nfunction onHeadingChange(event: Event) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n const value = (event.target as HTMLSelectElement).value\n\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (value === 'paragraph') {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createHeadingNode(value as HeadingTagType))\n }\n }\n })\n\n editorInstance.focus()\n}\n\nfunction toggleLink(editorInstance: LexicalEditor) {\n let shouldRemoveLink = false\n\n editorInstance.read(() => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n const parent = selection.anchor.getNode().getParent()\n shouldRemoveLink = $isLinkNode(parent)\n })\n\n if (shouldRemoveLink) {\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n return\n }\n\n const url = prompt('请输入链接地址:', 'https://')\n if (url && url !== 'https://') {\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)\n }\n}\n\nfunction getTitle(item: ToolbarItem): string {\n const titles: Record<string, string> = {\n bold: '加粗',\n italic: '斜体',\n underline: '下划线',\n strikethrough: '删除线',\n code: '行内代码',\n 'bullet-list': '无序列表',\n 'ordered-list': '有序列表',\n blockquote: '引用',\n 'code-block': '代码块',\n link: '链接',\n undo: '撤销',\n redo: '重做'\n }\n return titles[item] ?? item\n}\n\nfunction getIcon(item: ToolbarItem): string {\n const icons: Record<string, string> = {\n bold: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/><path d=\"M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/></svg>',\n italic:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"/><line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"/><line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"/></svg>',\n underline:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3\"/><line x1=\"4\" y1=\"21\" x2=\"20\" y2=\"21\"/></svg>',\n strikethrough:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 4H9a3 3 0 0 0-2.83 4\"/><path d=\"M14 12a4 4 0 0 1 0 8H6\"/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/></svg>',\n code: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/></svg>',\n 'bullet-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"/><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"/><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"/><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"/></svg>',\n 'ordered-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"10\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"10\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"10\" y1=\"18\" x2=\"21\" y2=\"18\"/><path d=\"M4 6h1v4\"/><path d=\"M4 10h2\"/><path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\"/></svg>',\n blockquote:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z\"/><path d=\"M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3z\"/></svg>',\n 'code-block':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"2\"/><path d=\"m8 10-3 2 3 2\"/><path d=\"m16 10 3 2-3 2\"/><path d=\"m13 7-2 10\"/></svg>',\n link: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/></svg>',\n undo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/></svg>',\n redo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\"/></svg>'\n }\n return icons[item] ?? ''\n}\n\nonBeforeUnmount(() => {\n cleanupListener?.()\n cleanupListener = null\n})\n</script>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll.js","names":[],"sources":["../../../src/components/scroll/scroll.vue"],"sourcesContent":["<template>\n <div :class=\"className\" :style=\"style\" ref=\"scrollRef\">\n <div\n ref=\"containerRef\"\n :class=\"[cls.e('container'), containerClass]\"\n @scroll.passive=\"handleScroll\"\n :style=\"containerStyle\"\n >\n <component\n ref=\"contentRef\"\n :style=\"contentStyle\"\n :class=\"[cls.e('content'), contentClass]\"\n :is=\"tag\"\n >\n <slot />\n </component>\n </div>\n\n <u-scroll-bar type=\"y\" :class=\"cls.e('bar-y')\" @drag=\"handleDragY\" ref=\"barY\" />\n <u-scroll-bar type=\"x\" :class=\"cls.e('bar-x')\" @drag=\"handleDragX\" ref=\"barX\" />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { debounce } from '@cat-kit/core'\nimport { useResizeObserver } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport { type CSSProperties, computed, provide, shallowRef } from 'vue'\n\nimport type { ScrollPosition, _ScrollExposed, ScrollProps, ScrollEmits } from '../../types'\nimport { ScrollDIKey } from './di'\nimport UScrollBar from './scroll-bar.vue'\n\ndefineOptions({ name: 'UScroll' })\n\nconst props = withDefaults(defineProps<ScrollProps>(), { tag: 'div' })\n\nconst emit = defineEmits<ScrollEmits>()\n\ndefineSlots<{\n /** 默认插槽 */\n default(): any\n /** 内容插槽 */\n content(): any\n}>()\n\nconst cls = bem('scroll')\n\nconst className = computed(() => {\n return [cls.b, bem.is('always', props.always)]\n})\n\nconst style = computed<CSSProperties>(() => {\n return { height: withUnit(props.height, 'px') }\n})\n\nconst contentRef = shallowRef<HTMLElement>()\nconst scrollRef = shallowRef<HTMLElement>()\nconst containerRef = shallowRef<HTMLElement>()\nconst barX = shallowRef<InstanceType<typeof UScrollBar>>()\nconst barY = shallowRef<InstanceType<typeof UScrollBar>>()\nconst minSize = 20\n\nconst trackSize = { width: 0, height: 0 }\n\nconst updateBar = () => {\n const container = containerRef.value\n if (!container) return\n\n const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = container\n\n emit('scroll', {\n x: scrollLeft,\n y: scrollTop,\n sw: scrollWidth,\n sh: scrollHeight,\n cw: clientWidth,\n ch: clientHeight\n })\n\n if (scrollHeight !== clientHeight) {\n const barYHeight = Math.max((clientHeight / scrollHeight) * trackSize.height, minSize)\n const barYTop = (scrollTop / (scrollHeight - clientHeight)) * (trackSize.height - barYHeight)\n barY.value?.update(barYHeight, barYTop)\n } else {\n barY.value?.update(0, 0)\n }\n\n if (scrollWidth !== clientWidth) {\n const barXWidth = Math.max((clientWidth / scrollWidth) * trackSize.width, minSize)\n const barXLeft = (scrollLeft / (scrollWidth - clientWidth)) * (trackSize.width - barXWidth)\n barX.value?.update(barXWidth, barXLeft)\n } else {\n barX.value?.update(0, 0)\n }\n}\n\nconst handleDragX = debounce(\n (offset: number, size: number) => {\n const container = containerRef.value\n if (!container) return\n const { clientWidth, scrollWidth } = container\n container.scrollLeft = (offset / (trackSize.width - size)) * (scrollWidth - clientWidth)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleDragY = debounce(\n (offset: number, size: number) => {\n const container = containerRef.value\n if (!container) return\n const { clientHeight, scrollHeight } = container\n container.scrollTop = (offset / (trackSize.height - size)) * (scrollHeight - clientHeight)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleScroll = () => {\n updateBar()\n}\n\nuseResizeObserver({\n targets: [contentRef, scrollRef],\n onResize: (entries) => {\n const trackEl = scrollRef.value\n if (trackEl) {\n trackSize.width = trackEl.clientWidth\n trackSize.height = trackEl.clientHeight\n barX.value?.setTrackSize(trackSize.width)\n barY.value?.setTrackSize(trackSize.height)\n }\n updateBar()\n if (entries.length) {\n emit(\n 'resize',\n entries.map((entry) => entry.target as HTMLElement)\n )\n }\n }\n})\n\nconst scrollToLeft = (left: number) => {\n const container = containerRef.value\n if (!container) return\n container.scrollTo({ left })\n}\n\nconst scrollToTop = (top: number) => {\n const container = containerRef.value\n if (!container) return\n container.scrollTo({ top })\n}\n\nconst scrollTo = (position: ScrollPosition) => {\n if (position.x !== undefined) scrollToLeft(position.x)\n if (position.y !== undefined) scrollToTop(position.y)\n}\n\nprovide(ScrollDIKey, { cls })\n\nconst exposed: _ScrollExposed = {\n el: scrollRef,\n contentRef,\n containerRef,\n scrollTo,\n update: updateBar\n}\n\ndefineExpose(exposed)\n</script>\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"scroll.js","names":[],"sources":["../../../src/components/scroll/scroll.vue"],"sourcesContent":["<template>\n <div :class=\"className\" :style=\"style\" ref=\"scrollRef\">\n <div\n ref=\"containerRef\"\n :class=\"[cls.e('container'), containerClass]\"\n @scroll.passive=\"handleScroll\"\n :style=\"containerStyle\"\n >\n <component\n ref=\"contentRef\"\n :style=\"contentStyle\"\n :class=\"[cls.e('content'), contentClass]\"\n :is=\"tag\"\n >\n <slot />\n </component>\n </div>\n\n <u-scroll-bar type=\"y\" :class=\"cls.e('bar-y')\" @drag=\"handleDragY\" ref=\"barY\" />\n <u-scroll-bar type=\"x\" :class=\"cls.e('bar-x')\" @drag=\"handleDragX\" ref=\"barX\" />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { debounce } from '@cat-kit/core'\nimport { useResizeObserver } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport { type CSSProperties, computed, provide, shallowRef } from 'vue'\n\nimport type { ScrollPosition, _ScrollExposed, ScrollProps, ScrollEmits } from '../../types'\nimport { ScrollDIKey } from './di'\nimport UScrollBar from './scroll-bar.vue'\n\ndefineOptions({ name: 'UScroll' })\n\nconst props = withDefaults(defineProps<ScrollProps>(), { tag: 'div' })\n\nconst emit = defineEmits<ScrollEmits>()\n\ndefineSlots<{\n /** 默认插槽 */\n default(): any\n /** 内容插槽 */\n content(): any\n}>()\n\nconst cls = bem('scroll')\n\nconst className = computed(() => {\n return [cls.b, bem.is('always', props.always)]\n})\n\nconst style = computed<CSSProperties>(() => {\n return { height: withUnit(props.height, 'px') }\n})\n\nconst contentRef = shallowRef<HTMLElement>()\nconst scrollRef = shallowRef<HTMLElement>()\nconst containerRef = shallowRef<HTMLElement>()\nconst barX = shallowRef<InstanceType<typeof UScrollBar>>()\nconst barY = shallowRef<InstanceType<typeof UScrollBar>>()\nconst minSize = 20\n\nconst trackSize = { width: 0, height: 0 }\n\nconst updateBar = () => {\n const container = containerRef.value\n if (!container) return\n\n const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = container\n\n emit('scroll', {\n x: scrollLeft,\n y: scrollTop,\n sw: scrollWidth,\n sh: scrollHeight,\n cw: clientWidth,\n ch: clientHeight\n })\n\n if (scrollHeight !== clientHeight) {\n const barYHeight = Math.max((clientHeight / scrollHeight) * trackSize.height, minSize)\n const barYTop = (scrollTop / (scrollHeight - clientHeight)) * (trackSize.height - barYHeight)\n barY.value?.update(barYHeight, barYTop)\n } else {\n barY.value?.update(0, 0)\n }\n\n if (scrollWidth !== clientWidth) {\n const barXWidth = Math.max((clientWidth / scrollWidth) * trackSize.width, minSize)\n const barXLeft = (scrollLeft / (scrollWidth - clientWidth)) * (trackSize.width - barXWidth)\n barX.value?.update(barXWidth, barXLeft)\n } else {\n barX.value?.update(0, 0)\n }\n}\n\nconst handleDragX = debounce(\n (offset: number, size: number) => {\n const container = containerRef.value\n if (!container) return\n const { clientWidth, scrollWidth } = container\n container.scrollLeft = (offset / (trackSize.width - size)) * (scrollWidth - clientWidth)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleDragY = debounce(\n (offset: number, size: number) => {\n const container = containerRef.value\n if (!container) return\n const { clientHeight, scrollHeight } = container\n container.scrollTop = (offset / (trackSize.height - size)) * (scrollHeight - clientHeight)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleScroll = () => {\n updateBar()\n}\n\nuseResizeObserver({\n targets: [contentRef, scrollRef],\n onResize: (entries) => {\n const trackEl = scrollRef.value\n if (trackEl) {\n trackSize.width = trackEl.clientWidth\n trackSize.height = trackEl.clientHeight\n barX.value?.setTrackSize(trackSize.width)\n barY.value?.setTrackSize(trackSize.height)\n }\n updateBar()\n if (entries.length) {\n emit(\n 'resize',\n entries.map((entry) => entry.target as HTMLElement)\n )\n }\n }\n})\n\nconst scrollToLeft = (left: number) => {\n const container = containerRef.value\n if (!container) return\n container.scrollTo({ left })\n}\n\nconst scrollToTop = (top: number) => {\n const container = containerRef.value\n if (!container) return\n container.scrollTo({ top })\n}\n\nconst scrollTo = (position: ScrollPosition) => {\n if (position.x !== undefined) scrollToLeft(position.x)\n if (position.y !== undefined) scrollToTop(position.y)\n}\n\nprovide(ScrollDIKey, { cls })\n\nconst exposed: _ScrollExposed = {\n el: scrollRef,\n contentRef,\n containerRef,\n scrollTo,\n update: updateBar\n}\n\ndefineExpose(exposed)\n</script>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","names":["$attrs","$slots"],"sources":["../../../src/components/select/select.vue"],"sourcesContent":["<template>\n <u-dropdown\n v-if=\"!readonly\"\n v-bind=\"$attrs\"\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 @mouseenter=\"hovered = true\"\n @mouseleave=\"hovered = false\"\n >\n <!-- 触发 -->\n <template #trigger>\n <u-input\n ref=\"inputRef\"\n :size=\"size\"\n :disabled=\"disabled\"\n :placeholder=\"inputPlaceholder\"\n :clearable=\"false\"\n :model-value=\"inputValue\"\n @update:model-value=\"handleQueryInput\"\n @keydown=\"handleKeydown\"\n :native-readonly=\"!filterable || !querying\"\n @click.capture=\"handleTriggerClickCapture\"\n >\n <template #prefix v-if=\"$slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n\n <template #suffix>\n <transition name=\"zoom-in\" mode=\"out-in\">\n <u-icon\n v-if=\"showClear\"\n :class=\"cls.e('clear')\"\n title=\"清除\"\n key=\"clear\"\n @click.stop=\"handleClear\"\n >\n <Close />\n </u-icon>\n <u-icon v-else :class=\"cls.e('arrow')\" key=\"arrow\">\n <ArrowDown />\n </u-icon>\n </transition>\n </template>\n </u-input>\n </template>\n\n <!-- 下拉内容 -->\n <template #content>\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, useUserAction, useVirtualizer } from '@veltra/compositions'\nimport { ArrowDown, Close } from '@veltra/icons/normal'\nimport { bem, fieldKey, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type {\n SelectEmits,\n SelectProps,\n _SelectExposed,\n DropdownExposed,\n InputExposed,\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: 'USelect', inheritAttrs: false })\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 labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\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)\n/** 内部展示文案,仅由选项推导;通过 update:text 单向通知父级 */\nconst label = shallowRef<string>()\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(labelKey.value) : String(props.modelValue ?? '')\n})\n\nconst dropdownRef = shallowRef<DropdownExposed>()\nconst scrollRef = shallowRef<ScrollExposed>()\nconst inputRef = useTemplateRef<InputExposed>('inputRef')\n\nconst filterable = computed(() => {\n return props.filterable || typeof props.options === 'function'\n})\n\nconst { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreatedOptions } =\n useOptions({ props })\n\nconst dropdownVisible = shallowRef(false)\n\n/**\n * 是否处于查询态:决定触发输入框显示查询串还是选中标签。\n * 与面板可见状态解耦 —— 选择后立即退出查询态,\n * 不等面板关闭动画结束(否则显示值会延迟一个动画时长才恢复)。\n */\nconst querying = shallowRef(false)\n\n/** 触发输入框的值:查询态下承载查询串,否则展示选中标签 */\nconst inputValue = computed(() => {\n if (filterable.value && querying.value) return queryString.value\n return displayedValue.value\n})\n\n/** 查询态下已选标签降级为占位提示 */\nconst inputPlaceholder = computed(() => {\n if (filterable.value && querying.value && displayedValue.value) {\n return displayedValue.value\n }\n return props.placeholder\n})\n\nfunction handleQueryInput(value: string) {\n if (!filterable.value) return\n queryString.value = value\n}\n\nconst hovered = shallowRef(false)\n\n/** 悬停且存在选中值时展示清除按钮(替代下拉箭头) */\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && hovered.value && !!displayedValue.value\n})\n\n/**\n * 过滤模式下拦截输入区域的点击:\n * 阻止 dropdown 的 trigger 开合切换,保持面板展开以不中断输入。\n * 非输入区域(箭头、留白)放行,维持原开合行为。\n */\nfunction handleTriggerClickCapture(e: MouseEvent) {\n if (!filterable.value || disabled.value) return\n if (!(e.target instanceof HTMLInputElement)) return\n\n e.stopPropagation()\n if (!dropdownVisible.value) dropdownRef.value?.open()\n}\n\nconst { userAction, isUserActive } = useUserAction()\n\n/** 更新内部文案;值变化时单向 emit update:text */\nfunction setLabel(next?: string) {\n if (label.value === next) return\n label.value = next\n emit('update:text', next)\n}\n\n/** 按 modelValue 与完整选项列表同步高亮索引、选中项与显示标签(外部回显用,O(n)) */\nfunction syncSelected(modelValue: any, sourceOptions: Record<string, any>[] | undefined) {\n // 查询输入期间高亮第一项(创建模式下通常是临时项,便于回车创建)\n if (queryString.value) {\n currentIndex.value = options.value.length ? 0 : -1\n return\n }\n\n if (!sourceOptions?.length) return\n\n if (modelValue !== undefined && modelValue !== null && modelValue !== '') {\n currentIndex.value = sourceOptions.findIndex(\n (option) => o(option).get(valueKey.value) === modelValue\n )\n selected.value = currentIndex.value >= 0 ? sourceOptions[currentIndex.value] : undefined\n setLabel(selected.value ? o(selected.value).get(labelKey.value) : undefined)\n } else {\n currentIndex.value = -1\n selected.value = undefined\n setLabel(undefined)\n }\n}\n\n// 回显:以 allOptions 匹配,避免过滤列表缺项时清掉已选文案;用户动作期内跳过\nwatch(\n [() => props.modelValue, allOptions],\n ([modelValue]) => {\n if (isUserActive()) return\n syncSelected(modelValue, allOptions.value)\n },\n { immediate: true }\n)\n\n// 过滤时单独同步高亮(allOptions 不变,不会触发上方回显 watch)\nwatch([queryString, options], () => {\n if (!queryString.value) return\n currentIndex.value = options.value.length ? 0 : -1\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 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.value),\n val: o(option).get(valueKey.value),\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\nwatch(dropdownVisible, (visible) => {\n if (visible) {\n // 面板展开后进入查询态并聚焦输入框,可以立即输入查询\n if (filterable.value) {\n queryString.value = ''\n querying.value = true\n nextTick(() => inputRef.value?.el?.focus())\n }\n } else {\n querying.value = false\n queryString.value = ''\n }\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n if (!visible) {\n queryString.value = ''\n }\n}\n\n/** 单选:用户动作内 O(1) 写入值与文案,跳过 modelValue 回显的 O(n) 查找 */\nconst handleSelect = userAction((option: Record<string, any>, _index: number) => {\n const value = option?.[valueKey.value]\n selected.value = option\n\n emit('update:modelValue', value)\n setLabel(option?.[labelKey.value])\n emit('change', option)\n if (option.__isTemp) {\n // 转正后列表同步重建为完整源(临时项置顶索引失效),必须按 value 重定位\n temOptionsToCreatedOptions()\n }\n // 立即退出查询态,输入框同步恢复显示选中标签\n querying.value = false\n queryString.value = ''\n // 按当前列表定位高亮,避免创建项转正后仍停留在点击时的临时索引(通常为 0)\n currentIndex.value = options.value.findIndex((item) => o(item).get(valueKey.value) === value)\n if (currentIndex.value >= 0) {\n selected.value = options.value[currentIndex.value]\n }\n dropdownRef.value?.close()\n})\n\n/** 清除选项 */\nconst handleClear = userAction(() => {\n selected.value = undefined\n currentIndex.value = -1\n setLabel(undefined)\n clearCreatedOptions()\n emit('update:modelValue', undefined)\n emit('change', undefined)\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":["$attrs","$slots"],"sources":["../../../src/components/select/select.vue"],"sourcesContent":["<template>\n <u-dropdown\n v-if=\"!readonly\"\n v-bind=\"$attrs\"\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 @mouseenter=\"hovered = true\"\n @mouseleave=\"hovered = false\"\n >\n <!-- 触发 -->\n <template #trigger>\n <u-input\n ref=\"inputRef\"\n :size=\"size\"\n :disabled=\"disabled\"\n :placeholder=\"inputPlaceholder\"\n :clearable=\"false\"\n :model-value=\"inputValue\"\n @update:model-value=\"handleQueryInput\"\n @keydown=\"handleKeydown\"\n :native-readonly=\"!filterable || !querying\"\n @click.capture=\"handleTriggerClickCapture\"\n >\n <template #prefix v-if=\"$slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n\n <template #suffix>\n <transition name=\"zoom-in\" mode=\"out-in\">\n <u-icon\n v-if=\"showClear\"\n :class=\"cls.e('clear')\"\n title=\"清除\"\n key=\"clear\"\n @click.stop=\"handleClear\"\n >\n <Close />\n </u-icon>\n <u-icon v-else :class=\"cls.e('arrow')\" key=\"arrow\">\n <ArrowDown />\n </u-icon>\n </transition>\n </template>\n </u-input>\n </template>\n\n <!-- 下拉内容 -->\n <template #content>\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, useUserAction, useVirtualizer } from '@veltra/compositions'\nimport { ArrowDown, Close } from '@veltra/icons/normal'\nimport { bem, fieldKey, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type {\n SelectEmits,\n SelectProps,\n _SelectExposed,\n DropdownExposed,\n InputExposed,\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: 'USelect', inheritAttrs: false })\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 labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\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)\n/** 内部展示文案,仅由选项推导;通过 update:text 单向通知父级 */\nconst label = shallowRef<string>()\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(labelKey.value) : String(props.modelValue ?? '')\n})\n\nconst dropdownRef = shallowRef<DropdownExposed>()\nconst scrollRef = shallowRef<ScrollExposed>()\nconst inputRef = useTemplateRef<InputExposed>('inputRef')\n\nconst filterable = computed(() => {\n return props.filterable || typeof props.options === 'function'\n})\n\nconst { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreatedOptions } =\n useOptions({ props })\n\nconst dropdownVisible = shallowRef(false)\n\n/**\n * 是否处于查询态:决定触发输入框显示查询串还是选中标签。\n * 与面板可见状态解耦 —— 选择后立即退出查询态,\n * 不等面板关闭动画结束(否则显示值会延迟一个动画时长才恢复)。\n */\nconst querying = shallowRef(false)\n\n/** 触发输入框的值:查询态下承载查询串,否则展示选中标签 */\nconst inputValue = computed(() => {\n if (filterable.value && querying.value) return queryString.value\n return displayedValue.value\n})\n\n/** 查询态下已选标签降级为占位提示 */\nconst inputPlaceholder = computed(() => {\n if (filterable.value && querying.value && displayedValue.value) {\n return displayedValue.value\n }\n return props.placeholder\n})\n\nfunction handleQueryInput(value: string) {\n if (!filterable.value) return\n queryString.value = value\n}\n\nconst hovered = shallowRef(false)\n\n/** 悬停且存在选中值时展示清除按钮(替代下拉箭头) */\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && hovered.value && !!displayedValue.value\n})\n\n/**\n * 过滤模式下拦截输入区域的点击:\n * 阻止 dropdown 的 trigger 开合切换,保持面板展开以不中断输入。\n * 非输入区域(箭头、留白)放行,维持原开合行为。\n */\nfunction handleTriggerClickCapture(e: MouseEvent) {\n if (!filterable.value || disabled.value) return\n if (!(e.target instanceof HTMLInputElement)) return\n\n e.stopPropagation()\n if (!dropdownVisible.value) dropdownRef.value?.open()\n}\n\nconst { userAction, isUserActive } = useUserAction()\n\n/** 更新内部文案;值变化时单向 emit update:text */\nfunction setLabel(next?: string) {\n if (label.value === next) return\n label.value = next\n emit('update:text', next)\n}\n\n/** 按 modelValue 与完整选项列表同步高亮索引、选中项与显示标签(外部回显用,O(n)) */\nfunction syncSelected(modelValue: any, sourceOptions: Record<string, any>[] | undefined) {\n // 查询输入期间高亮第一项(创建模式下通常是临时项,便于回车创建)\n if (queryString.value) {\n currentIndex.value = options.value.length ? 0 : -1\n return\n }\n\n if (!sourceOptions?.length) return\n\n if (modelValue !== undefined && modelValue !== null && modelValue !== '') {\n currentIndex.value = sourceOptions.findIndex(\n (option) => o(option).get(valueKey.value) === modelValue\n )\n selected.value = currentIndex.value >= 0 ? sourceOptions[currentIndex.value] : undefined\n setLabel(selected.value ? o(selected.value).get(labelKey.value) : undefined)\n } else {\n currentIndex.value = -1\n selected.value = undefined\n setLabel(undefined)\n }\n}\n\n// 回显:以 allOptions 匹配,避免过滤列表缺项时清掉已选文案;用户动作期内跳过\nwatch(\n [() => props.modelValue, allOptions],\n ([modelValue]) => {\n if (isUserActive()) return\n syncSelected(modelValue, allOptions.value)\n },\n { immediate: true }\n)\n\n// 过滤时单独同步高亮(allOptions 不变,不会触发上方回显 watch)\nwatch([queryString, options], () => {\n if (!queryString.value) return\n currentIndex.value = options.value.length ? 0 : -1\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 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.value),\n val: o(option).get(valueKey.value),\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\nwatch(dropdownVisible, (visible) => {\n if (visible) {\n // 面板展开后进入查询态并聚焦输入框,可以立即输入查询\n if (filterable.value) {\n queryString.value = ''\n querying.value = true\n nextTick(() => inputRef.value?.el?.focus())\n }\n } else {\n querying.value = false\n queryString.value = ''\n }\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n if (!visible) {\n queryString.value = ''\n }\n}\n\n/** 单选:用户动作内 O(1) 写入值与文案,跳过 modelValue 回显的 O(n) 查找 */\nconst handleSelect = userAction((option: Record<string, any>, _index: number) => {\n const value = option?.[valueKey.value]\n selected.value = option\n\n emit('update:modelValue', value)\n setLabel(option?.[labelKey.value])\n emit('change', option)\n if (option.__isTemp) {\n // 转正后列表同步重建为完整源(临时项置顶索引失效),必须按 value 重定位\n temOptionsToCreatedOptions()\n }\n // 立即退出查询态,输入框同步恢复显示选中标签\n querying.value = false\n queryString.value = ''\n // 按当前列表定位高亮,避免创建项转正后仍停留在点击时的临时索引(通常为 0)\n currentIndex.value = options.value.findIndex((item) => o(item).get(valueKey.value) === value)\n if (currentIndex.value >= 0) {\n selected.value = options.value[currentIndex.value]\n }\n dropdownRef.value?.close()\n})\n\n/** 清除选项 */\nconst handleClear = userAction(() => {\n selected.value = undefined\n currentIndex.value = -1\n setLabel(undefined)\n clearCreatedOptions()\n emit('update:modelValue', undefined)\n emit('change', undefined)\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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"}
|