@veltra/desktop 1.1.15 → 1.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/action/action-group.vue.d.ts +2 -2
- package/dist/components/action/action-group.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/action/action.js.map +1 -1
- package/dist/components/action/action.vue.d.ts +1 -1
- package/dist/components/action/style2.css +0 -4
- package/dist/components/auto-complete/auto-complete.js.map +1 -1
- package/dist/components/auto-complete/style.js +1 -1
- package/dist/components/auto-complete/use-keyboard.js.map +1 -1
- package/dist/components/auto-complete/use-suggestions.js.map +1 -1
- package/dist/components/badge/badge.js +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/batch-edit/helper.js.map +1 -1
- package/dist/components/batch-edit/style.js +1 -1
- package/dist/components/batch-edit/use-edit.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/button/button-group.js.map +1 -1
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/calendar/calendar.js.map +1 -1
- package/dist/components/calendar/utils.js.map +1 -1
- package/dist/components/card/card-action.js.map +1 -1
- package/dist/components/card/card-content.js.map +1 -1
- package/dist/components/card/card-cover.js.map +1 -1
- package/dist/components/card/card-header.js.map +1 -1
- package/dist/components/card/card.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/cascade/cascade.vue.d.ts +3 -3
- package/dist/components/cascade/node.js.map +1 -1
- package/dist/components/cascade/use-check.js.map +1 -1
- package/dist/components/cascade/use-data-map.js.map +1 -1
- package/dist/components/cascade/use-select.js +1 -1
- package/dist/components/cascade/use-select.js.map +1 -1
- package/dist/components/check-tag/check-tag.js.map +1 -1
- package/dist/components/checkbox/checkbox-button.js.map +1 -1
- package/dist/components/checkbox/checkbox-button.vue.d.ts +1 -1
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/checkbox/style.js +1 -1
- package/dist/components/checkbox-group/checkbox-group.js.map +1 -1
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/collapse/collapse-item.js.map +1 -1
- package/dist/components/collapse/collapse.js.map +1 -1
- package/dist/components/condition-editor/components/condition-group.js +138 -103
- package/dist/components/condition-editor/components/condition-group.js.map +1 -1
- package/dist/components/condition-editor/components/condition-row.js +146 -95
- package/dist/components/condition-editor/components/condition-row.js.map +1 -1
- package/dist/components/condition-editor/condition-editor.js +18 -40
- package/dist/components/condition-editor/condition-editor.js.map +1 -1
- package/dist/components/condition-editor/condition-editor.vue.d.ts +0 -2
- package/dist/components/condition-editor/core/evaluator.d.ts +22 -0
- package/dist/components/condition-editor/core/evaluator.js +111 -50
- package/dist/components/condition-editor/core/evaluator.js.map +1 -1
- package/dist/components/condition-editor/core/operators.js.map +1 -1
- package/dist/components/condition-editor/index.d.ts +2 -1
- package/dist/components/condition-editor/style2.css +159 -82
- package/dist/components/context-menu/api.js.map +1 -1
- package/dist/components/context-menu/context-menu-item.js.map +1 -1
- package/dist/components/context-menu/context-menu.js.map +1 -1
- package/dist/components/context-menu/style.js +1 -1
- package/dist/components/date-panel/date-panel.js.map +1 -1
- package/dist/components/date-panel/date-panel.vue.d.ts +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-panel/use-date-select.js.map +1 -1
- package/dist/components/date-panel/use-panel-date.js.map +1 -1
- package/dist/components/date-panel/use-panel.js.map +1 -1
- package/dist/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/date-picker/date-picker.vue.d.ts +1 -1
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.vue.d.ts +1 -1
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/dialog/style.js +2 -2
- package/dist/components/dialog/use-maximum.js.map +1 -1
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/drawer/style.js +1 -1
- package/dist/components/dropdown/dropdown.js +1 -0
- package/dist/components/dropdown/dropdown.js.map +1 -1
- package/dist/components/dropdown/style.js +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/core/chip.js.map +1 -1
- package/dist/components/expression-editor/core/editor.js.map +1 -1
- package/dist/components/expression-editor/core/mention.js.map +1 -1
- package/dist/components/expression-editor/core/model.js.map +1 -1
- package/dist/components/expression-editor/di.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-picker/helper.js.map +1 -1
- package/dist/components/file-viewer/file-viewer.js.map +1 -1
- package/dist/components/file-viewer/helper.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/pdf-viewport-scroll.js.map +1 -1
- package/dist/components/file-viewer/previewers/pdf-zoom-bridge.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/form/dynamic-form-model.js.map +1 -1
- package/dist/components/form/form-model.js.map +1 -1
- package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/form/helper.js.map +1 -1
- package/dist/components/form/use-node-interceptor.js.map +1 -1
- package/dist/components/form-item/form-item.js.map +1 -1
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/gantt-chart/gantt-chart.js.map +1 -1
- package/dist/components/grid/breakpoint.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/use-responsive.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-input/use-group-items.js.map +1 -1
- package/dist/components/icon/icon.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +4 -0
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/input/style.js +1 -1
- package/dist/components/kbd/kbd.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-item.js.map +1 -1
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/loading/directive.js.map +1 -1
- package/dist/components/loading/loading.js.map +1 -1
- package/dist/components/loading/style.js +1 -1
- package/dist/components/menu/helper.js.map +1 -1
- package/dist/components/menu/menu-item-collapsed.js.map +1 -1
- package/dist/components/menu/menu-item.js.map +1 -1
- package/dist/components/menu/menu-sub-collapsed.js.map +1 -1
- package/dist/components/menu/menu-sub.js.map +1 -1
- package/dist/components/menu/menu.js.map +1 -1
- package/dist/components/menu/use-menu-item.js.map +1 -1
- package/dist/components/menu/walk-menu-path.js.map +1 -1
- package/dist/components/message/helper.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/message2.js.map +1 -1
- package/dist/components/message-confirm/message-confirm.js.map +1 -1
- package/dist/components/message-confirm/message-confirm2.js.map +1 -1
- package/dist/components/multi-select/multi-select-option.js.map +1 -1
- package/dist/components/multi-select/multi-select.js.map +1 -1
- package/dist/components/multi-select/multi-select.vue.d.ts +2 -2
- package/dist/components/multi-select/style.js +1 -1
- package/dist/components/multi-tree-select/multi-tree-select.js.map +1 -1
- package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +2 -2
- package/dist/components/multi-tree-select/style.js +1 -1
- package/dist/components/node-render/node-render.js.map +1 -1
- package/dist/components/notification/index.js.map +1 -1
- package/dist/components/notification/notification.js.map +1 -1
- package/dist/components/number/number.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/color-transform.js.map +1 -1
- package/dist/components/palette/palette-alpha.js.map +1 -1
- package/dist/components/palette/palette-color-switch.js.map +1 -1
- package/dist/components/palette/palette-hue.js.map +1 -1
- package/dist/components/palette/palette-sv.js.map +1 -1
- package/dist/components/palette/palette.js.map +1 -1
- package/dist/components/palette/use-hsv.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/pop-confirm/pop-confirm.vue.d.ts +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/style.js +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-bar.js +2 -0
- package/dist/components/scroll/scroll-bar.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/select/select.vue.d.ts +2 -2
- package/dist/components/select/use-keyboard.js.map +1 -1
- package/dist/components/select/use-options.js.map +1 -1
- package/dist/components/slider/slider-thumb.js.map +1 -1
- package/dist/components/slider/slider.js +1 -1
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/slider/use-slider.js.map +1 -1
- package/dist/components/steps/steps.js.map +1 -1
- package/dist/components/steps/steps.vue.d.ts +3 -3
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/di.js.map +1 -1
- package/dist/components/table/node/col.js.map +1 -1
- package/dist/components/table/node/row.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-head.js.map +1 -1
- package/dist/components/table/table-row.js.map +1 -1
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/table/use-check.js.map +1 -1
- package/dist/components/table/use-col-resize.js.map +1 -1
- package/dist/components/table/use-columns.js.map +1 -1
- package/dist/components/table/use-fixed-columns.js.map +1 -1
- package/dist/components/table/use-rows.js.map +1 -1
- package/dist/components/table/use-table.js.map +1 -1
- package/dist/components/table-editor/table-editor.js.map +1 -1
- package/dist/components/tabs/style.js +1 -1
- package/dist/components/tabs/tabs-horizontal.js.map +1 -1
- package/dist/components/tabs/tabs-horizontal.vue.d.ts +2 -2
- package/dist/components/tabs/tabs-vertical.js.map +1 -1
- package/dist/components/tabs/tabs-vertical.vue.d.ts +2 -2
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/tabs/tabs.vue.d.ts +2 -2
- package/dist/components/tabs/use-tabs-bar.js.map +1 -1
- package/dist/components/tag/tag.js.map +1 -1
- package/dist/components/text/text.js.map +1 -1
- package/dist/components/textarea/style.js +1 -1
- package/dist/components/textarea/textarea.js.map +1 -1
- package/dist/components/textarea/textarea.vue.d.ts +1 -1
- package/dist/components/textarea/utils.js.map +1 -1
- package/dist/components/theme/schema.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/tip/tip.vue.d.ts +1 -1
- package/dist/components/tip/use-nest.js.map +1 -1
- package/dist/components/tree/tree-node.js.map +1 -1
- package/dist/components/tree/tree-node2.js.map +1 -1
- package/dist/components/tree/tree.js.map +1 -1
- package/dist/components/tree/tree.vue.d.ts +1 -1
- package/dist/components/tree/use-check.js.map +1 -1
- package/dist/components/tree/use-filter.js.map +1 -1
- package/dist/components/tree/use-select.js.map +1 -1
- package/dist/components/tree/use-tree-nodes.js.map +1 -1
- package/dist/components/tree-select/tree-select.js.map +1 -1
- package/dist/components/tree-select/tree-select.vue.d.ts +2 -2
- package/dist/components/watermark/watermark.js.map +1 -1
- package/dist/index.d.ts +4 -3
- package/dist/index.js +2 -1
- package/dist/install.js.map +1 -1
- package/dist/types/batch-edit.d.ts +2 -2
- package/dist/types/condition-editor.d.ts +21 -9
- package/dist/types/index.d.ts +2 -2
- package/package.json +13 -16
- package/src/components/action/style.scss +0 -6
- package/src/components/auto-complete/style.scss +0 -1
- package/src/components/auto-complete/style.ts +1 -1
- package/src/components/badge/badge.vue +1 -1
- package/src/components/batch-edit/style.ts +1 -1
- package/src/components/button/style.scss +1 -1
- package/src/components/cascade/use-select.ts +8 -6
- package/src/components/checkbox/style.ts +1 -1
- package/src/components/collapse/__test__/collapse.test.ts +3 -3
- package/src/components/condition-editor/components/condition-group.vue +118 -87
- package/src/components/condition-editor/components/condition-row.vue +137 -89
- package/src/components/condition-editor/condition-editor.vue +19 -48
- package/src/components/condition-editor/core/evaluator.ts +143 -57
- package/src/components/condition-editor/index.ts +6 -0
- package/src/components/condition-editor/style.scss +189 -102
- package/src/components/context-menu/style.ts +1 -1
- package/src/components/dialog/style.ts +2 -2
- package/src/components/drawer/style.ts +1 -1
- package/src/components/dropdown/style.ts +1 -1
- package/src/components/expression-editor/style.scss +1 -1
- package/src/components/form-item/form-item.vue +4 -9
- package/src/components/input/style.ts +1 -1
- package/src/components/loading/style.ts +1 -1
- package/src/components/menu/style.scss +1 -1
- package/src/components/message/style.scss +1 -1
- package/src/components/multi-select/style.ts +1 -1
- package/src/components/multi-tree-select/style.ts +1 -1
- package/src/components/number-input/__test__/number-input.test.ts +1 -1
- package/src/components/radio/style.ts +1 -1
- package/src/components/slider/slider.vue +1 -1
- package/src/components/table/di.ts +1 -1
- package/src/components/tabs/style.ts +1 -1
- package/src/components/textarea/style.ts +1 -1
- package/src/types/batch-edit.ts +2 -2
- package/src/types/condition-editor.ts +22 -8
|
@@ -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({\n name: 'Paginator'\n})\n\nconst { config } = useConfig()\n\nconst props = withDefaults(defineProps<PaginatorProps>(), {\n total: 0\n})\n\nconst emit = defineEmits<PaginatorEmits>()\n\nconst cls = bem('paginator')\n\nconst { size } = useFallbackProps([props], {\n size: 'default' as ComponentSize\n})\n\nconst pageNumber = defineModel<number>('pageNumber', {\n default: 1\n})\n\nconst pageSize = defineModel<number>('pageSize', {\n default: 10\n})\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({\n first: false,\n last: false\n})\n\nconst paginatorRef = shallowRef<HTMLElement>()\n\ndefineExpose<_PaginatorExposed>({\n el: paginatorRef\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiGA,MAAM,EAAE,WAAW,WAAU;EAE7B,MAAM,QAAQ;EAId,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,YAAW;EAE3B,MAAM,EAAE,SAAS,iBAAiB,CAAC,
|
|
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({\n name: 'Paginator'\n})\n\nconst { config } = useConfig()\n\nconst props = withDefaults(defineProps<PaginatorProps>(), {\n total: 0\n})\n\nconst emit = defineEmits<PaginatorEmits>()\n\nconst cls = bem('paginator')\n\nconst { size } = useFallbackProps([props], {\n size: 'default' as ComponentSize\n})\n\nconst pageNumber = defineModel<number>('pageNumber', {\n default: 1\n})\n\nconst pageSize = defineModel<number>('pageSize', {\n default: 10\n})\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({\n first: false,\n last: false\n})\n\nconst paginatorRef = shallowRef<HTMLElement>()\n\ndefineExpose<_PaginatorExposed>({\n el: paginatorRef\n})\n</script>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-transform.js","names":[],"sources":["../../../src/components/palette/color-transform.ts"],"sourcesContent":["import type { PaletteRGB, PaletteHSV } from '../../types'\n\n/**\n * 将色相值转换为 RGB 颜色\n * @param h 色相值\n * @returns RGB 颜色\n */\nexport function HUE2RGB(h: number): PaletteRGB {\n // 将色相值映射到0-5的范围\n const segment = h / 60\n const x = 1 - Math.abs((segment % 2) - 1) // 计算中间值\n let r = 0,\n g = 0,\n b = 0\n // 根据色相所在的区间计算RGB值\n if (segment >= 0 && segment < 1) {\n ;[r, g, b] = [1, x, 0]\n } else if (segment < 2) {\n ;[r, g, b] = [x, 1, 0]\n } else if (segment < 3) {\n ;[r, g, b] = [0, 1, x]\n } else if (segment < 4) {\n ;[r, g, b] = [0, x, 1]\n } else if (segment < 5) {\n ;[r, g, b] = [x, 0, 1]\n } else {\n ;[r, g, b] = [1, 0, x]\n }\n // 将RGB值从0-1范围映射到0-255范围\n return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }\n}\n\n/**\n * 将色调、饱和度和亮度转换为 RGB 颜色\n * @param hsv 色调、饱和度和亮度\n */\nexport function HSV2RGB(hsv: PaletteHSV): PaletteRGB {\n const { h, s, v } = hsv\n\n // 使用色相区间映射获取基础RGB值\n const { r, g, b } = HUE2RGB(h)\n\n // 应用饱和度和亮度\n const saturationFactor = 1 - s\n const valueFactor = v\n\n return {\n r: Math.round((r + (255 - r) * saturationFactor) * valueFactor),\n g: Math.round((g + (255 - g) * saturationFactor) * valueFactor),\n b: Math.round((b + (255 - b) * saturationFactor) * valueFactor)\n }\n}\n\n/**\n * 将 RGB 颜色转换为 HEX 颜色\n * @param RGB RGB 颜色\n * @param alpha 透明度\n * @returns HEX 颜色\n */\nexport function RGB2HEX(RGB: PaletteRGB, alpha = 1): string {\n let hexStr = ['r', 'g', 'b']\n .map((key) => RGB[key].toString(16).padStart(2, '0'))\n .join('')\n .toUpperCase()\n\n if (alpha < 1) {\n hexStr += Math.round(alpha * 255)\n .toString(16)\n .padStart(2, '0')\n .toUpperCase()\n }\n\n return hexStr\n}\n\n/**\n * 将 RGB 颜色转换为 HSV 颜色\n * @param RGB RGB 颜色\n * @returns HSV 颜色\n */\nexport function RGB2HSV(RGB: PaletteRGB): PaletteHSV {\n // 归一化到0-1范围\n const red = RGB.r / 255\n const green = RGB.g / 255\n const blue = RGB.b / 255\n const max = Math.max(red, green, blue)\n const min = Math.min(red, green, blue)\n const delta = max - min\n let h = 0\n if (delta !== 0) {\n if (max === red) {\n h = ((green - blue) / delta) % 6\n } else if (max === green) {\n h = (blue - red) / delta + 2\n } else {\n h = (red - green) / delta + 4\n }\n h = (h * 60 + 360) % 360 // 确保正值\n }\n const s = max === 0 ? 0 : delta / max\n const v = max\n return { h, s, v }\n}\n\n/**\n * 将 HEX 颜色转换为 RGB 颜色\n * @param hex HEX 颜色\n * @returns RGB 颜色\n */\nexport function HEX2RGBA(hex: string): { RGB: PaletteRGB; alpha: number } {\n const rgb = { r: 0, g: 0, b: 0 }\n let alpha = 1\n\n if (hex.startsWith('#')) {\n hex = hex.slice(1)\n }\n\n if (hex.length === 3 || hex.length === 4) {\n hex = hex\n .split('')\n .map((char) => char + char)\n .join('')\n }\n\n const alphaStr = hex.slice(6)\n if (alphaStr) {\n alpha = parseInt(alphaStr, 16) / 255\n }\n rgb.r = parseInt(hex.slice(0, 2), 16)\n rgb.g = parseInt(hex.slice(2, 4), 16)\n rgb.b = parseInt(hex.slice(4, 6), 16)\n\n return { RGB: rgb, alpha }\n}\n"],"mappings":";;;;;;AAOA,SAAgB,QAAQ,GAAuB;CAE7C,MAAM,UAAU,IAAI;CACpB,MAAM,IAAI,IAAI,KAAK,IAAK,UAAU,IAAK,EAAE;CACzC,IAAI,IAAI,GACN,IAAI,GACJ,IAAI;
|
|
1
|
+
{"version":3,"file":"color-transform.js","names":[],"sources":["../../../src/components/palette/color-transform.ts"],"sourcesContent":["import type { PaletteRGB, PaletteHSV } from '../../types'\n\n/**\n * 将色相值转换为 RGB 颜色\n * @param h 色相值\n * @returns RGB 颜色\n */\nexport function HUE2RGB(h: number): PaletteRGB {\n // 将色相值映射到0-5的范围\n const segment = h / 60\n const x = 1 - Math.abs((segment % 2) - 1) // 计算中间值\n let r = 0,\n g = 0,\n b = 0\n // 根据色相所在的区间计算RGB值\n if (segment >= 0 && segment < 1) {\n ;[r, g, b] = [1, x, 0]\n } else if (segment < 2) {\n ;[r, g, b] = [x, 1, 0]\n } else if (segment < 3) {\n ;[r, g, b] = [0, 1, x]\n } else if (segment < 4) {\n ;[r, g, b] = [0, x, 1]\n } else if (segment < 5) {\n ;[r, g, b] = [x, 0, 1]\n } else {\n ;[r, g, b] = [1, 0, x]\n }\n // 将RGB值从0-1范围映射到0-255范围\n return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }\n}\n\n/**\n * 将色调、饱和度和亮度转换为 RGB 颜色\n * @param hsv 色调、饱和度和亮度\n */\nexport function HSV2RGB(hsv: PaletteHSV): PaletteRGB {\n const { h, s, v } = hsv\n\n // 使用色相区间映射获取基础RGB值\n const { r, g, b } = HUE2RGB(h)\n\n // 应用饱和度和亮度\n const saturationFactor = 1 - s\n const valueFactor = v\n\n return {\n r: Math.round((r + (255 - r) * saturationFactor) * valueFactor),\n g: Math.round((g + (255 - g) * saturationFactor) * valueFactor),\n b: Math.round((b + (255 - b) * saturationFactor) * valueFactor)\n }\n}\n\n/**\n * 将 RGB 颜色转换为 HEX 颜色\n * @param RGB RGB 颜色\n * @param alpha 透明度\n * @returns HEX 颜色\n */\nexport function RGB2HEX(RGB: PaletteRGB, alpha = 1): string {\n let hexStr = ['r', 'g', 'b']\n .map((key) => RGB[key].toString(16).padStart(2, '0'))\n .join('')\n .toUpperCase()\n\n if (alpha < 1) {\n hexStr += Math.round(alpha * 255)\n .toString(16)\n .padStart(2, '0')\n .toUpperCase()\n }\n\n return hexStr\n}\n\n/**\n * 将 RGB 颜色转换为 HSV 颜色\n * @param RGB RGB 颜色\n * @returns HSV 颜色\n */\nexport function RGB2HSV(RGB: PaletteRGB): PaletteHSV {\n // 归一化到0-1范围\n const red = RGB.r / 255\n const green = RGB.g / 255\n const blue = RGB.b / 255\n const max = Math.max(red, green, blue)\n const min = Math.min(red, green, blue)\n const delta = max - min\n let h = 0\n if (delta !== 0) {\n if (max === red) {\n h = ((green - blue) / delta) % 6\n } else if (max === green) {\n h = (blue - red) / delta + 2\n } else {\n h = (red - green) / delta + 4\n }\n h = (h * 60 + 360) % 360 // 确保正值\n }\n const s = max === 0 ? 0 : delta / max\n const v = max\n return { h, s, v }\n}\n\n/**\n * 将 HEX 颜色转换为 RGB 颜色\n * @param hex HEX 颜色\n * @returns RGB 颜色\n */\nexport function HEX2RGBA(hex: string): { RGB: PaletteRGB; alpha: number } {\n const rgb = { r: 0, g: 0, b: 0 }\n let alpha = 1\n\n if (hex.startsWith('#')) {\n hex = hex.slice(1)\n }\n\n if (hex.length === 3 || hex.length === 4) {\n hex = hex\n .split('')\n .map((char) => char + char)\n .join('')\n }\n\n const alphaStr = hex.slice(6)\n if (alphaStr) {\n alpha = parseInt(alphaStr, 16) / 255\n }\n rgb.r = parseInt(hex.slice(0, 2), 16)\n rgb.g = parseInt(hex.slice(2, 4), 16)\n rgb.b = parseInt(hex.slice(4, 6), 16)\n\n return { RGB: rgb, alpha }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette-alpha.js","names":[],"sources":["../../../src/components/palette/palette-alpha.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('alpha')\" ref=\"alphaRef\">\n <div :class=\"cls.e('alpha-bg')\" :style=\"{ background: alphaSliderBG }\"></div>\n\n <span :class=\"cls.e('alpha-thumb')\" @click.stop :style=\"alphaThumbStyle\"></span>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, shallowRef, onMounted, watch } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n name: 'PaletteAlpha'\n})\n\nconst { cls, updateAlpha, hueRGB, alpha, userAction, isUserActive } = inject(PaletteDIKey)!\n\nconst alphaRef = shallowRef<HTMLElement>()\n\nconst alphaThumbTransformX = shallowRef(0)\n\nconst alphaThumbStyle = computed(() => {\n return { transform: `translateX(${alphaThumbTransformX.value}px)` }\n})\n\nlet alphaWidth = 0\nconst rangeX = [0, 0] as [number, number]\n\nfunction getAlphaWidth() {\n alphaWidth = alphaRef.value?.offsetWidth ?? 0\n rangeX[1] = alphaWidth\n}\n\nconst updateOffsetX = userAction((offsetX: number) => {\n alphaThumbTransformX.value = offsetX\n updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0)\n})\n\nconst alphaDragger = useDrag({\n target: alphaRef,\n rangeX,\n onDrag({ offsetX }) {\n updateOffsetX(offsetX)\n },\n onDragStart(e) {\n getAlphaWidth()\n\n alphaDragger.update({ offsetX: e.offsetX })\n\n updateOffsetX(e.offsetX)\n }\n})\n\nconst alphaSliderBG = computed(() => {\n const { r, g, b } = hueRGB.value\n return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1))`\n})\n\nfunction init(): void {\n getAlphaWidth()\n alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * alpha.value : 0\n}\n\nonMounted(() => {\n init()\n})\n\nwatch(\n alpha,\n (newAlphaValue) => {\n if (isUserActive()) return\n alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0\n },\n { flush: 'post' }\n)\n\ndefineExpose({\n init\n})\n</script>\n"],"mappings":";;;;;;;;EAkBA,MAAM,EAAE,KAAK,aAAa,QAAQ,OAAO,YAAY,iBAAiB,OAAO,
|
|
1
|
+
{"version":3,"file":"palette-alpha.js","names":[],"sources":["../../../src/components/palette/palette-alpha.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('alpha')\" ref=\"alphaRef\">\n <div :class=\"cls.e('alpha-bg')\" :style=\"{ background: alphaSliderBG }\"></div>\n\n <span :class=\"cls.e('alpha-thumb')\" @click.stop :style=\"alphaThumbStyle\"></span>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, shallowRef, onMounted, watch } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n name: 'PaletteAlpha'\n})\n\nconst { cls, updateAlpha, hueRGB, alpha, userAction, isUserActive } = inject(PaletteDIKey)!\n\nconst alphaRef = shallowRef<HTMLElement>()\n\nconst alphaThumbTransformX = shallowRef(0)\n\nconst alphaThumbStyle = computed(() => {\n return { transform: `translateX(${alphaThumbTransformX.value}px)` }\n})\n\nlet alphaWidth = 0\nconst rangeX = [0, 0] as [number, number]\n\nfunction getAlphaWidth() {\n alphaWidth = alphaRef.value?.offsetWidth ?? 0\n rangeX[1] = alphaWidth\n}\n\nconst updateOffsetX = userAction((offsetX: number) => {\n alphaThumbTransformX.value = offsetX\n updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0)\n})\n\nconst alphaDragger = useDrag({\n target: alphaRef,\n rangeX,\n onDrag({ offsetX }) {\n updateOffsetX(offsetX)\n },\n onDragStart(e) {\n getAlphaWidth()\n\n alphaDragger.update({ offsetX: e.offsetX })\n\n updateOffsetX(e.offsetX)\n }\n})\n\nconst alphaSliderBG = computed(() => {\n const { r, g, b } = hueRGB.value\n return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1))`\n})\n\nfunction init(): void {\n getAlphaWidth()\n alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * alpha.value : 0\n}\n\nonMounted(() => {\n init()\n})\n\nwatch(\n alpha,\n (newAlphaValue) => {\n if (isUserActive()) return\n alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0\n },\n { flush: 'post' }\n)\n\ndefineExpose({\n init\n})\n</script>\n"],"mappings":";;;;;;;;EAkBA,MAAM,EAAE,KAAK,aAAa,QAAQ,OAAO,YAAY,iBAAiB,OAAO,aAAY;EAEzF,MAAM,WAAW,YAAwB;EAEzC,MAAM,uBAAuB,WAAW,EAAC;EAEzC,MAAM,kBAAkB,eAAe;GACrC,OAAO,EAAE,WAAW,cAAc,qBAAqB,MAAM,MAAK;IACnE;EAED,IAAI,aAAa;EACjB,MAAM,SAAS,CAAC,GAAG,EAAC;EAEpB,SAAS,gBAAgB;GACvB,aAAa,SAAS,OAAO,eAAe;GAC5C,OAAO,KAAK;;EAGd,MAAM,gBAAgB,YAAY,YAAoB;GACpD,qBAAqB,QAAQ;GAC7B,YAAY,aAAa,IAAI,UAAU,aAAa,EAAC;IACtD;EAED,MAAM,eAAe,QAAQ;GAC3B,QAAQ;GACR;GACA,OAAO,EAAE,WAAW;IAClB,cAAc,QAAO;;GAEvB,YAAY,GAAG;IACb,eAAc;IAEd,aAAa,OAAO,EAAE,SAAS,EAAE,SAAS,CAAA;IAE1C,cAAc,EAAE,QAAO;;GAE1B,CAAA;EAED,MAAM,gBAAgB,eAAe;GACnC,MAAM,EAAE,GAAG,GAAG,MAAM,OAAO;GAC3B,OAAO,kCAAkC,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE;IACnF;EAED,SAAS,OAAa;GACpB,eAAc;GACd,qBAAqB,QAAQ,aAAa,IAAI,aAAa,MAAM,QAAQ;;EAG3E,gBAAgB;GACd,MAAK;IACN;EAED,MACE,QACC,kBAAkB;GACjB,IAAI,cAAa,EAAG;GACpB,qBAAqB,QAAQ,aAAa,IAAI,aAAa,gBAAgB;KAE7E,EAAE,OAAO,QACX,CAAA;EAEA,SAAa,EACX,MACD,CAAA;;uBAhFC,mBAIM,OAAA;IAJA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,QAAA,CAAA;aAAe;IAAJ,KAAI;OAC/B,mBAA6E,OAAA;IAAvE,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,WAAA,CAAA;IAAe,OAAK,eAAA,EAAA,YAAgB,cAAA,OAAa,CAAA;gBAEnE,mBAAgF,QAAA;IAAzE,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,cAAA,CAAA;IAAkB,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;IAAE,OAAK,eAAE,gBAAA,MAAe"}
|
|
@@ -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<{\n color?: string\n}>()\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":";;;;;;;;;;EA6BA,MAAM,OAAO;EAEb,MAAM,EAAE,QAAQ,OAAO,
|
|
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<{\n color?: string\n}>()\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":";;;;;;;;;;EA6BA,MAAM,OAAO;EAEb,MAAM,EAAE,QAAQ,OAAO,aAAY;EAEnC,MAAM,UAAU;EAEhB,MAAM,qBAAqB,UAAkB;GAC3C,KAAK,gBAAgB,MAAK;;;uBAnC1B,mBAcM,OAAA,EAdA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,eAAA,CAAA,EAAA,EAAA;IAChB,mBAA8C,OAAA,EAAxC,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,aAAA,CAAA,EAAA,EAAgB,UAAM,EAAA;IAExC,YAME,MAAA,cAAA,EAAA;KALC,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,aAAA,CAAA;KACZ,WAAW;KACX,eAAa,QAAA;KACb,UAAQ;KACC;;IAGZ,YAEW,MAAA,YAAA,EAAA;KAFD,MAAA;KAAK,MAAK;KAAW,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,YAAA,CAAA;KAAgB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;4BAEtE,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFiF,QAEjF,GAAA,CAAA,EAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette-hue.js","names":[],"sources":["../../../src/components/palette/palette-hue.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('hue')\" ref=\"hueRef\">\n <span :class=\"cls.e('hue-thumb')\" @click.stop :style=\"hueThumbStyle\"></span>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { inject, onMounted } from 'vue'\nimport { shallowRef, computed } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n name: 'PaletteHue'\n})\n\nconst { cls, updateHue, HSV, userAction } = inject(PaletteDIKey)!\n\nconst hueRef = shallowRef<HTMLElement>()\n\nconst transformX = shallowRef(0)\nlet sliderWidth = 0\n\nconst hueThumbStyle = computed(() => {\n return { transform: `translateX(${transformX.value}px)` }\n})\n\nconst rangeX = [0, 0] as [number, number]\n\nfunction getSliderWidth() {\n sliderWidth = hueRef.value?.offsetWidth ?? 0\n rangeX[1] = sliderWidth\n}\n\nconst updateOffsetX = userAction((offsetX: number) => {\n transformX.value = offsetX\n updateHue(Math.round((offsetX / sliderWidth) * 360))\n})\n\nconst sliderDragger = useDrag({\n target: hueRef,\n rangeX,\n onDrag({ offsetX }) {\n updateOffsetX(offsetX)\n },\n onDragStart(e) {\n getSliderWidth()\n\n sliderDragger.update({ offsetX: e.offsetX })\n\n updateOffsetX(e.offsetX)\n }\n})\n\nfunction init(): void {\n getSliderWidth()\n transformX.value = (sliderWidth * HSV.h) / 360\n}\n\nonMounted(() => {\n init()\n})\n\ndefineExpose({\n init\n})\n</script>\n"],"mappings":";;;;;;;;EAiBA,MAAM,EAAE,KAAK,WAAW,KAAK,eAAe,OAAO,
|
|
1
|
+
{"version":3,"file":"palette-hue.js","names":[],"sources":["../../../src/components/palette/palette-hue.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('hue')\" ref=\"hueRef\">\n <span :class=\"cls.e('hue-thumb')\" @click.stop :style=\"hueThumbStyle\"></span>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { inject, onMounted } from 'vue'\nimport { shallowRef, computed } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n name: 'PaletteHue'\n})\n\nconst { cls, updateHue, HSV, userAction } = inject(PaletteDIKey)!\n\nconst hueRef = shallowRef<HTMLElement>()\n\nconst transformX = shallowRef(0)\nlet sliderWidth = 0\n\nconst hueThumbStyle = computed(() => {\n return { transform: `translateX(${transformX.value}px)` }\n})\n\nconst rangeX = [0, 0] as [number, number]\n\nfunction getSliderWidth() {\n sliderWidth = hueRef.value?.offsetWidth ?? 0\n rangeX[1] = sliderWidth\n}\n\nconst updateOffsetX = userAction((offsetX: number) => {\n transformX.value = offsetX\n updateHue(Math.round((offsetX / sliderWidth) * 360))\n})\n\nconst sliderDragger = useDrag({\n target: hueRef,\n rangeX,\n onDrag({ offsetX }) {\n updateOffsetX(offsetX)\n },\n onDragStart(e) {\n getSliderWidth()\n\n sliderDragger.update({ offsetX: e.offsetX })\n\n updateOffsetX(e.offsetX)\n }\n})\n\nfunction init(): void {\n getSliderWidth()\n transformX.value = (sliderWidth * HSV.h) / 360\n}\n\nonMounted(() => {\n init()\n})\n\ndefineExpose({\n init\n})\n</script>\n"],"mappings":";;;;;;;;EAiBA,MAAM,EAAE,KAAK,WAAW,KAAK,eAAe,OAAO,aAAY;EAE/D,MAAM,SAAS,YAAwB;EAEvC,MAAM,aAAa,WAAW,EAAC;EAC/B,IAAI,cAAc;EAElB,MAAM,gBAAgB,eAAe;GACnC,OAAO,EAAE,WAAW,cAAc,WAAW,MAAM,MAAK;IACzD;EAED,MAAM,SAAS,CAAC,GAAG,EAAC;EAEpB,SAAS,iBAAiB;GACxB,cAAc,OAAO,OAAO,eAAe;GAC3C,OAAO,KAAK;;EAGd,MAAM,gBAAgB,YAAY,YAAoB;GACpD,WAAW,QAAQ;GACnB,UAAU,KAAK,MAAO,UAAU,cAAe,IAAI,CAAA;IACpD;EAED,MAAM,gBAAgB,QAAQ;GAC5B,QAAQ;GACR;GACA,OAAO,EAAE,WAAW;IAClB,cAAc,QAAO;;GAEvB,YAAY,GAAG;IACb,gBAAe;IAEf,cAAc,OAAO,EAAE,SAAS,EAAE,SAAS,CAAA;IAE3C,cAAc,EAAE,QAAO;;GAE1B,CAAA;EAED,SAAS,OAAa;GACpB,gBAAe;GACf,WAAW,QAAS,cAAc,IAAI,IAAK;;EAG7C,gBAAgB;GACd,MAAK;IACN;EAED,SAAa,EACX,MACD,CAAA;;uBAjEC,mBAEM,OAAA;IAFA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,MAAA,CAAA;aAAa;IAAJ,KAAI;OAC7B,mBAA4E,QAAA;IAArE,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,YAAA,CAAA;IAAgB,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;IAAE,OAAK,eAAE,cAAA,MAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette-sv.js","names":[],"sources":["../../../src/components/palette/palette-sv.vue"],"sourcesContent":["<template>\n <!-- 调色画布 -->\n <div :class=\"cls.e('sv')\" ref=\"svRef\">\n <div :class=\"cls.e('sv-s')\" :style=\"{ backgroundImage: canvasBackground }\"></div>\n <div :class=\"cls.e('sv-v')\">{{}}</div>\n\n <div\n :class=\"cls.e('sv-thumb')\"\n ref=\"svThumbRef\"\n @click.stop\n @mousedown.stop\n :style=\"svThumbStyle\"\n ></div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, reactive, shallowRef, onMounted } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n name: 'PaletteSV'\n})\n\nconst { cls, hueRGB, HSV, updateSV, userAction } = inject(PaletteDIKey)!\n\nconst svRef = shallowRef<HTMLDivElement>()\n\nconst canvasSize = {\n width: 0,\n height: 0\n}\n\nconst rangeX = [0, 0] as [number, number]\nconst rangeY = [0, 0] as [number, number]\n\nconst getCanvasSize = () => {\n if (!svRef.value) return\n const { offsetHeight, offsetWidth } = svRef.value!\n\n canvasSize.width = offsetWidth\n rangeX[1] = offsetWidth\n\n canvasSize.height = offsetHeight\n rangeY[1] = offsetHeight\n}\n\nconst transform = reactive({\n x: 0,\n y: 0\n})\n\nconst svThumbStyle = computed(() => {\n return {\n transform: `translate(${transform.x}px, ${transform.y}px)`\n }\n})\n\nconst updateThumb = userAction((offsetX: number, offsetY: number) => {\n transform.x = offsetX\n transform.y = offsetY\n\n // 根据画布位置计算饱和度和亮度\n // 水平方向表示饱和度,从左到右饱和度逐渐增高\n // 垂直方向表示亮度,上亮下暗\n const s = Math.max(0, Math.min(1, offsetX / canvasSize.width))\n const v = Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))\n\n // 更新饱和度和亮度\n updateSV({ s, v })\n})\n\nconst svDragger = useDrag({\n target: svRef,\n rangeX,\n rangeY,\n\n onDrag({ offsetX, offsetY }) {\n updateThumb(offsetX, offsetY)\n },\n onDragStart(e) {\n getCanvasSize()\n\n const { offsetX, offsetY } = e\n\n updateThumb(offsetX, offsetY)\n\n svDragger.update({ offsetX, offsetY })\n }\n})\n\nconst canvasBackground = computed(() => {\n const { r, g, b } = hueRGB.value\n return `linear-gradient(to right, rgb(255, 255, 255), rgb(${r}, ${g}, ${b}))`\n})\n\nfunction init(): void {\n getCanvasSize()\n transform.x = canvasSize.width * HSV.s\n transform.y = canvasSize.height * (1 - HSV.v)\n}\n\nonMounted(() => {\n init()\n})\n\ndefineExpose({\n init\n})\n</script>\n"],"mappings":";;;;;;;;EA0BA,MAAM,EAAE,KAAK,QAAQ,KAAK,UAAU,eAAe,OAAO,
|
|
1
|
+
{"version":3,"file":"palette-sv.js","names":[],"sources":["../../../src/components/palette/palette-sv.vue"],"sourcesContent":["<template>\n <!-- 调色画布 -->\n <div :class=\"cls.e('sv')\" ref=\"svRef\">\n <div :class=\"cls.e('sv-s')\" :style=\"{ backgroundImage: canvasBackground }\"></div>\n <div :class=\"cls.e('sv-v')\">{{}}</div>\n\n <div\n :class=\"cls.e('sv-thumb')\"\n ref=\"svThumbRef\"\n @click.stop\n @mousedown.stop\n :style=\"svThumbStyle\"\n ></div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, reactive, shallowRef, onMounted } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n name: 'PaletteSV'\n})\n\nconst { cls, hueRGB, HSV, updateSV, userAction } = inject(PaletteDIKey)!\n\nconst svRef = shallowRef<HTMLDivElement>()\n\nconst canvasSize = {\n width: 0,\n height: 0\n}\n\nconst rangeX = [0, 0] as [number, number]\nconst rangeY = [0, 0] as [number, number]\n\nconst getCanvasSize = () => {\n if (!svRef.value) return\n const { offsetHeight, offsetWidth } = svRef.value!\n\n canvasSize.width = offsetWidth\n rangeX[1] = offsetWidth\n\n canvasSize.height = offsetHeight\n rangeY[1] = offsetHeight\n}\n\nconst transform = reactive({\n x: 0,\n y: 0\n})\n\nconst svThumbStyle = computed(() => {\n return {\n transform: `translate(${transform.x}px, ${transform.y}px)`\n }\n})\n\nconst updateThumb = userAction((offsetX: number, offsetY: number) => {\n transform.x = offsetX\n transform.y = offsetY\n\n // 根据画布位置计算饱和度和亮度\n // 水平方向表示饱和度,从左到右饱和度逐渐增高\n // 垂直方向表示亮度,上亮下暗\n const s = Math.max(0, Math.min(1, offsetX / canvasSize.width))\n const v = Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))\n\n // 更新饱和度和亮度\n updateSV({ s, v })\n})\n\nconst svDragger = useDrag({\n target: svRef,\n rangeX,\n rangeY,\n\n onDrag({ offsetX, offsetY }) {\n updateThumb(offsetX, offsetY)\n },\n onDragStart(e) {\n getCanvasSize()\n\n const { offsetX, offsetY } = e\n\n updateThumb(offsetX, offsetY)\n\n svDragger.update({ offsetX, offsetY })\n }\n})\n\nconst canvasBackground = computed(() => {\n const { r, g, b } = hueRGB.value\n return `linear-gradient(to right, rgb(255, 255, 255), rgb(${r}, ${g}, ${b}))`\n})\n\nfunction init(): void {\n getCanvasSize()\n transform.x = canvasSize.width * HSV.s\n transform.y = canvasSize.height * (1 - HSV.v)\n}\n\nonMounted(() => {\n init()\n})\n\ndefineExpose({\n init\n})\n</script>\n"],"mappings":";;;;;;;;EA0BA,MAAM,EAAE,KAAK,QAAQ,KAAK,UAAU,eAAe,OAAO,aAAY;EAEtE,MAAM,QAAQ,YAA2B;EAEzC,MAAM,aAAa;GACjB,OAAO;GACP,QAAQ;GACV;EAEA,MAAM,SAAS,CAAC,GAAG,EAAC;EACpB,MAAM,SAAS,CAAC,GAAG,EAAC;EAEpB,MAAM,sBAAsB;GAC1B,IAAI,CAAC,MAAM,OAAO;GAClB,MAAM,EAAE,cAAc,gBAAgB,MAAM;GAE5C,WAAW,QAAQ;GACnB,OAAO,KAAK;GAEZ,WAAW,SAAS;GACpB,OAAO,KAAK;;EAGd,MAAM,YAAY,SAAS;GACzB,GAAG;GACH,GAAG;GACJ,CAAA;EAED,MAAM,eAAe,eAAe;GAClC,OAAO,EACL,WAAW,aAAa,UAAU,EAAE,MAAM,UAAU,EAAE,MACxD;IACD;EAED,MAAM,cAAc,YAAY,SAAiB,YAAoB;GACnE,UAAU,IAAI;GACd,UAAU,IAAI;GASd,SAAS;IAAE,GAJD,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,WAAW,MAAM,CAIlD;IAAG,GAHJ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,UAAU,WAAW,OAAO,CAGpD;IAAG,CAAA;IAClB;EAED,MAAM,YAAY,QAAQ;GACxB,QAAQ;GACR;GACA;GAEA,OAAO,EAAE,SAAS,WAAW;IAC3B,YAAY,SAAS,QAAO;;GAE9B,YAAY,GAAG;IACb,eAAc;IAEd,MAAM,EAAE,SAAS,YAAY;IAE7B,YAAY,SAAS,QAAO;IAE5B,UAAU,OAAO;KAAE;KAAS;KAAS,CAAA;;GAExC,CAAA;EAED,MAAM,mBAAmB,eAAe;GACtC,MAAM,EAAE,GAAG,GAAG,MAAM,OAAO;GAC3B,OAAO,qDAAqD,EAAE,IAAI,EAAE,IAAI,EAAE;IAC3E;EAED,SAAS,OAAa;GACpB,eAAc;GACd,UAAU,IAAI,WAAW,QAAQ,IAAI;GACrC,UAAU,IAAI,WAAW,UAAU,IAAI,IAAI;;EAG7C,gBAAgB;GACd,MAAK;IACN;EAED,SAAa,EACX,MACD,CAAA;;2DA7GC,mBAAA,SAAA,EACA,mBAWM,OAAA;IAXA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,KAAA,CAAA;aAAY;IAAJ,KAAI;;IAC5B,mBAAiF,OAAA;KAA3E,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,OAAA,CAAA;KAAW,OAAK,eAAA,EAAA,iBAAqB,iBAAA,OAAgB,CAAA;;IACvE,mBAAsC,OAAA,EAAhC,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,OAAA,CAAA,EAAA,EAAA,iBAAA,EAAA,EAAA;IAElB,mBAMO,OAAA;KALJ,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,WAAA,CAAA;KACb,KAAI;KACH,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;KACV,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,IAAe,CAAA,OAAA,CAAA;KACd,OAAK,eAAE,aAAA,MAAY"}
|
|
@@ -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({\n name: 'Palette'\n})\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 { RGB, alpha } = HEX2RGBA(color)\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, {\n cls,\n HSV,\n RGB,\n alpha,\n userAction,\n isUserActive,\n ...rest\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,
|
|
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({\n name: 'Palette'\n})\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 { RGB, alpha } = HEX2RGBA(color)\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, {\n cls,\n HSV,\n RGB,\n alpha,\n userAction,\n isUserActive,\n ...rest\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAC,EAAG,MAAM,CAAA;EAElF,MAAM,MAAM,IAAI,UAAS;EAEzB,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,MAAK;IAAG,IAAI,GAAG,YAAY,CAAC,MAAM,MAAK;IAAC;IACnE;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,QAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,IAAI,CAAA;EACvC,MAAM,EAAE,YAAY,iBAAiB,eAAc;EAEnD,MAAM,UAAU,WAAW,MAAK;;EAGhC,IAAI,kBAAkB;EAEtB,MAAM,cAAc,iBAAiB;GACnC,IAAI,MAAM,UAAU,GAClB,kBAAkB;GAEpB,MAAM,QAAQ;GACd,KAAK,YAAY,EAAC;GAClB,QAAQ,QAAQ;IACjB;EAED,MAAM,CAAC,OAAO,IAAG,GAAI,CAAC,OAAO,SAAS;GACpC,IAAI,iBAAiB;IACnB,kBAAkB;IAClB;;GAEF,MAAM,QAAQ,IAAI,QAAQ,KAAK,MAAK;IACrC;EAED,MAAM,eAAe,eAAe,aAAY;EAChD,MAAM,gBAAgB,eAAe,cAAa;EAClD,MAAM,kBAAkB,eAAe,gBAAe;EAEtD,MACE,QACC,UAAU;GACT,IAAI,CAAC,OAAO;GACZ,IAAI,cAAa,EAAG;GAEpB,MAAM,EAAE,KAAK,UAAU,SAAS,MAAK;GACrC,MAAM,MAAM,QAAQ,IAAG;GACvB,KAAK,UAAU,IAAI,EAAC;GACpB,KAAK,SAAS;IAAE,GAAG,IAAI;IAAG,GAAG,IAAI;IAAG,CAAA;GACpC,KAAK,YAAY,MAAK;GAEtB,aAAa,OAAO,MAAK;GACzB,cAAc,OAAO,MAAK;GAC1B,gBAAgB,OAAO,MAAK;KAE9B,EAAE,WAAW,MACf,CAAA;EAEA,QAAQ,cAAc;GACpB;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GACJ,CAAA;;uBAtHC,YAqBQ,MAAA,YAAA,EAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,QAAA,CAAA;IACL,SAAS,QAAA;8DAAA,QAAO,QAAA;IACvB,UAAU,MAAA,SAAA,IAAY,MAAA,SAAA;;IAIZ,SAAO,cACD;KAAf,mBAAA,WAAA;KACA,YAA8B,aAAA,EAAnB,KAAI,cAAY,EAAA,MAAA,IAAA;KAE3B,mBAAA,OAAA;KACA,YAAgC,aAAA,EAApB,KAAI,eAAa,EAAA,MAAA,IAAA;KAE7B,mBAAA,QAAA;KACA,YAAoC,aAAA,EAAtB,KAAI,iBAAe,EAAA,MAAA,IAAA;KAEjC,mBAAA,SAAA;KACA,YAAiE,aAAA;MAArC,OAAO,MAAA;8DAAA,MAAK,QAAA;MAAG,SAAO,MAAA,YAAA;;;2BAbiB,CAArE,mBAAqE,QAAA;KAA9D,OAAK,eAAE,UAAA,MAAS;KAAG,OAAK,eAAA,EAAA,iBAAqB,MAAA,OAAK,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hsv.js","names":[],"sources":["../../../src/components/palette/use-hsv.ts"],"sourcesContent":["import { n } from '@cat-kit/core'\nimport { reactive, readonly, ref, computed, type Ref, type ComputedRef } from 'vue'\n\nimport type { PaletteRGB } from '../../types'\nimport { HUE2RGB } from './color-transform'\n\ninterface UseHSVReturned {\n HSV: { h: number; s: number; v: number }\n alpha: Ref<number>\n hueRGB: ComputedRef<PaletteRGB>\n updateHue: (deg: number) => void\n updateSV: ({ s, v }: { s: number; v: number }) => void\n updateAlpha: (a: number) => void\n}\n\nexport function useHSV(): UseHSVReturned {\n const HSV = reactive({ h: 0, s: 1, v: 1 })\n /** 透明度 */\n const alpha = ref(1)\n /** 色调 RGB 值 */\n const hueRGB = computed(() => HUE2RGB(HSV.h))\n\n /**\n * 更新色相值\n * @param deg 色相值, 0-360\n */\n function updateHue(deg: number) {\n HSV.h = deg\n }\n\n /**\n * 更新饱和度和亮度\n * @param sv { s: 饱和度, v: 亮度 }\n */\n function updateSV({ s, v }: { s: number; v: number }) {\n HSV.s = s\n HSV.v = v\n }\n\n /**\n * 更新调色盘的透明度\n * @param a 透明度, 0-1\n */\n function updateAlpha(a: number) {\n alpha.value = +n(a).fixed({ maxPrecision: 2 })\n }\n\n return {\n HSV: readonly(HSV),\n alpha,\n hueRGB,\n\n updateHue,\n updateSV,\n updateAlpha\n }\n}\n"],"mappings":";;;;AAeA,SAAgB,SAAyB;CACvC,MAAM,MAAM,SAAS;EAAE,GAAG;EAAG,GAAG;EAAG,GAAG;EAAG,CAAC;;CAE1C,MAAM,QAAQ,IAAI,EAAE;;CAEpB,MAAM,SAAS,eAAe,QAAQ,IAAI,EAAE,CAAC;;;;;CAM7C,SAAS,UAAU,KAAa;
|
|
1
|
+
{"version":3,"file":"use-hsv.js","names":[],"sources":["../../../src/components/palette/use-hsv.ts"],"sourcesContent":["import { n } from '@cat-kit/core'\nimport { reactive, readonly, ref, computed, type Ref, type ComputedRef } from 'vue'\n\nimport type { PaletteRGB } from '../../types'\nimport { HUE2RGB } from './color-transform'\n\ninterface UseHSVReturned {\n HSV: { h: number; s: number; v: number }\n alpha: Ref<number>\n hueRGB: ComputedRef<PaletteRGB>\n updateHue: (deg: number) => void\n updateSV: ({ s, v }: { s: number; v: number }) => void\n updateAlpha: (a: number) => void\n}\n\nexport function useHSV(): UseHSVReturned {\n const HSV = reactive({ h: 0, s: 1, v: 1 })\n /** 透明度 */\n const alpha = ref(1)\n /** 色调 RGB 值 */\n const hueRGB = computed(() => HUE2RGB(HSV.h))\n\n /**\n * 更新色相值\n * @param deg 色相值, 0-360\n */\n function updateHue(deg: number) {\n HSV.h = deg\n }\n\n /**\n * 更新饱和度和亮度\n * @param sv { s: 饱和度, v: 亮度 }\n */\n function updateSV({ s, v }: { s: number; v: number }) {\n HSV.s = s\n HSV.v = v\n }\n\n /**\n * 更新调色盘的透明度\n * @param a 透明度, 0-1\n */\n function updateAlpha(a: number) {\n alpha.value = +n(a).fixed({ maxPrecision: 2 })\n }\n\n return {\n HSV: readonly(HSV),\n alpha,\n hueRGB,\n\n updateHue,\n updateSV,\n updateAlpha\n }\n}\n"],"mappings":";;;;AAeA,SAAgB,SAAyB;CACvC,MAAM,MAAM,SAAS;EAAE,GAAG;EAAG,GAAG;EAAG,GAAG;EAAG,CAAC;;CAE1C,MAAM,QAAQ,IAAI,EAAE;;CAEpB,MAAM,SAAS,eAAe,QAAQ,IAAI,EAAE,CAAC;;;;;CAM7C,SAAS,UAAU,KAAa;EAC9B,IAAI,IAAI;;;;;;CAOV,SAAS,SAAS,EAAE,GAAG,KAA+B;EACpD,IAAI,IAAI;EACR,IAAI,IAAI;;;;;;CAOV,SAAS,YAAY,GAAW;EAC9B,MAAM,QAAQ,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,cAAc,GAAG,CAAC;;CAGhD,OAAO;EACL,KAAK,SAAS,IAAI;EAClB;EACA;EAEA;EACA;EACA;EACD"}
|
|
@@ -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 @native:input=\"handleUpdatePwd\"\n @update:model-value=\"!$event && handleClear()\"\n @suffix:click=\"toggleVisible\"\n >\n <template #suffix>\n <Transition name=\"fade\">\n <UIcon :class=\"cls.e('visibility-toggle')\" :size=\"18\">\n <Hide v-if=\"pwdVisible\" />\n <View v-else />\n </UIcon>\n </Transition>\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 { Hide, View } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef } from 'vue'\n\nimport type { PasswordInputProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({\n name: 'PasswordInput'\n})\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n clearable: false,\n disabled: undefined,\n readonly: undefined\n})\n\nconst slots = defineSlots<{\n prefix?: () => any\n}>()\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(['clearable', 'disabled', 'placeholder', 'size'])\n})\n\nconst cls = bem('password-input')\n\nconst model = defineModel<string>()\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":";;;;;;;;AAqEA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA1BrB,MAAM,QAAQ;EAMd,MAAM,QAAQ,UAAA;EAId,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,
|
|
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 @native:input=\"handleUpdatePwd\"\n @update:model-value=\"!$event && handleClear()\"\n @suffix:click=\"toggleVisible\"\n >\n <template #suffix>\n <Transition name=\"fade\">\n <UIcon :class=\"cls.e('visibility-toggle')\" :size=\"18\">\n <Hide v-if=\"pwdVisible\" />\n <View v-else />\n </UIcon>\n </Transition>\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 { Hide, View } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef } from 'vue'\n\nimport type { PasswordInputProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({\n name: 'PasswordInput'\n})\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n clearable: false,\n disabled: undefined,\n readonly: undefined\n})\n\nconst slots = defineSlots<{\n prefix?: () => any\n}>()\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(['clearable', 'disabled', 'placeholder', 'size'])\n})\n\nconst cls = bem('password-input')\n\nconst model = defineModel<string>()\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":";;;;;;;;AAqEA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA1BrB,MAAM,QAAQ;EAMd,MAAM,QAAQ,UAAA;EAId,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAC,EAAG,MAAK,EAAG;GAClF,MAAM;GACN,UAAU;GACV,UAAU;GACX,CAAA;EAED,MAAM,aAAa,eAAe;GAChC,OAAO,EAAE,MAAK,CAAE,KAAK;IAAC;IAAa;IAAY;IAAe;IAAO,CAAA;IACtE;EAED,MAAM,MAAM,IAAI,iBAAgB;EAEhC,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAIlC,MAAM,mBAAmB,MAAmB;GAC1C,MAAM,SAAS,EAAE;GACjB,MAAM,MAAM,OAAO;GACnB,IAAI,CAAC,KAAK;IACR,MAAM,QAAQ;IACd;;GAIF,IAAI,CAAC,MAAM,OAAO;IAChB,MAAM,QAAQ;IACd;;GAGF,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,QAAO;GAC5C,MAAM,WAAW,aAAa,IAAI,KAAK,MAAM,MAAM,MAAM,CAAC,SAAQ;GAElE,MAAM,QAAQ,UAAU,YAAY;GAEpC,eAAe;IACb,OAAO,iBAAiB;IACxB,OAAO,eAAe;KACvB;;EAGH,MAAM,oBAA0B;GAC9B,MAAM,QAAQ;;EAGhB,MAAM,aAAa,WAAW,MAAK;EAEnC,MAAM,eAAe,eAAmC;GACtD,IAAI,WAAW,OAAO,OAAO,MAAM;GACnC,OAAO,MAAM,QAAQ,aAAa,OAAO,MAAM,MAAM,OAAM,GAAI;IAChE;EAED,MAAM,sBAAsB;GAC1B,WAAW,QAAQ,CAAC,WAAW;;;uBApH/B,YAuBU,MAAA,cAAA,EAvBV,WAuBU;IAtBP,OAAO,MAAA,IAAA,CAAI;IACX,eAAa,aAAA;MACN,WAAA,OAAU;IACjB,MAAM,MAAA,KAAA;IACN,UAAU,MAAA,SAAA;IACV,UAAU,MAAA,SAAA;IACV,kBAAc;IACd,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAA,CAAG,UAAU,aAAW;IAC1C,kBAAc;;IAEJ,QAAM,cAMF,CALb,YAKa,YAAA,EALD,MAAK,QAAM,EAAA;4BAIb,CAHR,YAGQ,MAAA,YAAA,EAAA;MAHA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,oBAAA,CAAA;MAAwB,MAAM;;6BACtB,CAAd,WAAA,SAAA,WAAA,EAAZ,YAA0B,MAAA,KAAA,EAAA,EAAA,KAAA,GAAA,CAAA,KAAA,WAAA,EAC1B,YAAe,MAAA,KAAA,EAAA,EAAA,KAAA,GAAA,CAAA,EAAA,CAAA;;;;;;OAKG,MAAM,SAAA;UAAnB;sBACa,CAAtB,WAAsB,KAAA,QAAA,SAAA,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({\n name: 'PopConfirm'\n})\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 ?? {}], {\n size: 'default'\n})\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":";;;;;;;;;;;;;;;;;;;;;;;;EAiDA,MAAM,OAAO;EAWb,MAAM,MAAM,IAAI,cAAa;EAE7B,MAAM,UAAU,IAAI,MAAK;EAEzB,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,SAAS,qBAAqB,CAAC,aAAa,EAAE,
|
|
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({\n name: 'PopConfirm'\n})\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 ?? {}], {\n size: 'default'\n})\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":";;;;;;;;;;;;;;;;;;;;;;;;EAiDA,MAAM,OAAO;EAWb,MAAM,MAAM,IAAI,cAAa;EAE7B,MAAM,UAAU,IAAI,MAAK;EAEzB,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,SAAS,qBAAqB,CAAC,aAAa,EAAE,CAAA,EAAG,EACvD,MAAM,WACP,CAAA;EAED,MAAM,gBAAgB;GACpB,KAAK,UAAS;GACd,QAAQ,QAAQ;;EAGlB,MAAM,eAAe;GACnB,KAAK,SAAQ;GACb,QAAQ,QAAQ;;;uBA5EhB,YA6BQ,MAAA,YAAA,EAAA;IA5BL,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC;IACZ,SAAS,QAAA;IACT,WAAW,QAAA;IACX,WAAW,QAAA;IACX,eAAa,QAAA;IACN,SAAS,QAAA;8DAAA,QAAO,QAAA;;IAIb,SAAO,cAQV,CAPN,mBAOM,OAAA,EAPA,OAAK,eAAA,CAAG,MAAA,IAAA,CAAI,EAAC,OAAA,EAAU,MAAA,IAAA,CAAI,EAAE,MAAA,KAAI,CAAA,CAAA,CAAA,EAAA,EAAA,CACrC,YAES,MAAA,YAAA,EAAA;KAFA,MAAM;KAAK,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,OAAA,CAAA;KAAW,OAAK,eAAA,EAAA,OAAW,QAAA,WAAS,CAAA;;4BAC1C,EAAA,WAAA,EAAxB,YAAwB,wBAAR,QAAA,KAAI,CAAA,EAAA,CAAA;;+BAEtB,mBAEO,QAAA,MAAA,gBADF,QAAA,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA,EAGZ,mBAQM,OAAA,EARA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,SAAA,CAAA,EAAA,EAAA;KAChB,YAEW,MAAA,YAAA,EAAA;MAFD,MAAK;MAAS,SAAO;MAAQ,MAAK;MAAU,MAAA;;6BACpC,CAAA,gBAAA,gBAAb,QAAA,WAAU,EAAA,EAAA,CAAA,CAAA;;;+CACJ,UAEX,GAAA;KAAA,YAEW,MAAA,YAAA,EAAA;MAFD,MAAK;MAAQ,MAAK;MAAW,SAAO;;6BAC3B,CAAA,gBAAA,gBAAd,QAAA,YAAW,EAAA,EAAA,CAAA,CAAA;;;;2BAjBK,CAAzB,WAAyB,KAAA,QAAA,YAAA,CAAA,CAAA"}
|
|
@@ -14,9 +14,9 @@ declare const __VLS_base: _$vue.DefineComponent<PopConfirmProps, {}, {}, {}, {},
|
|
|
14
14
|
onConfirm?: (() => any) | undefined;
|
|
15
15
|
onCancel?: (() => any) | undefined;
|
|
16
16
|
}>, {
|
|
17
|
+
trigger: "hover" | "click";
|
|
17
18
|
direction: TipDirection;
|
|
18
19
|
icon: _$vue.Component;
|
|
19
|
-
trigger: "hover" | "click";
|
|
20
20
|
iconColor: string;
|
|
21
21
|
confirmText: string;
|
|
22
22
|
cancelText: string;
|
|
@@ -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({\n name: 'Progress'\n})\n\nconst props = withDefaults(defineProps<ProgressProps>(), {\n type: 'primary',\n circle: false\n})\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":";;;;;;;;;;AAmFA,MAAM,IAAI;;;;;;;;;;;;;;;;;EAlCV,MAAM,QAAQ;EAcd,MAAM,MAAM,IAAI,WAAU;EAE1B,MAAM,aAAa,eAAe;
|
|
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({\n name: 'Progress'\n})\n\nconst props = withDefaults(defineProps<ProgressProps>(), {\n type: 'primary',\n circle: false\n})\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":";;;;;;;;;;AAmFA,MAAM,IAAI;;;;;;;;;;;;;;;;;EAlCV,MAAM,QAAQ;EAcd,MAAM,MAAM,IAAI,WAAU;EAE1B,MAAM,aAAa,eAAe;GAChC,OAAO,EAAE,MAAM,cAAc,EAAC,CAAE,MAAM,GAAG,IAAG;IAC7C;EAED,MAAM,OAAO,eAA0B;GACrC,MAAM,EAAE,SAAS;GACjB,OAAO,OAAO,SAAS,aAAa,KAAK,WAAW,MAAK,GAAI;IAC9D;EAED,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,GAAG,UAAU,MAAM,OAAM;IAAG,IAAI,EAAE,KAAK,MAAK;IAAC;IACjE;;EAGD,MAAM,SAAS,eAAe;GAC5B,OAAO,iBAAiB,KAAK,MAAM;IACpC;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;IAC3B;;uBA1FC,mBAkCM,OAAA,EAlCA,OAAK,eAAE,UAAA,MAAS,EAAA,EAAA,CACpB,mBAAA,UAAA,EAAA,CACuC,QAAA,UAAA,WAAA,EAAvC,mBAIM,OAAA;;IAJA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,WAAA,CAAA;OAChB,mBAEM,OAAA;IAFA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,MAAA,CAAA;IAAU,OAAK,eAAA,EAAA,OAAW,WAAA,QAAU,KAAA,CAAA;OACpD,WAA4D,KAAA,QAAA,WAAA,eAAA,mBAAA;IAAA,YAA5C,WAAA;IAAU,MAAE,KAAA;IAAI,CAAA,CAAA,QAA4B,CAAA,gBAAA,gBAArB,WAAA,MAAU,GAAG,KAAC,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,KAAA,WAAA,EAKzD,mBAwBM,UAAA,EAAA,KAAA,GAAA,EAAA,CAzBN,mBAAA,UAAA,EACA,mBAwBM,OAAA;IAtBH,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,SAAA,CAAA;IACZ,OAAK,eAAA;KAAA,QAAY,MAAA,SAAA,CAAS,QAAA,MAAI,KAAA;KAAA,OAAgB,MAAA,SAAA,CAAS,QAAA,MAAI,KAAA;KAAA,CAAA;qBAE5D,mBAcM,OAdN,YAcM,CAbJ,mBAA+E,UAAA;IAAvE,IAAG;IAAK,IAAG;IAAS;IAAG,MAAK;IAAO,QAAO;IAAU,gBAAa;OACzE,mBAWE,UAAA;IAVC,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,cAAA,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;gCAIjD,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,iBAAA,CAAA,EAAA,EAAA,CAChB,WAA8D,KAAA,QAAA,WAAA,eAAA,mBAAA;IAAA,YAA9C,WAAA;IAAU,MAAE,KAAA;IAAI,CAAA,CAAA,QAA8B,CAAA,gBAAA,gBAAtB,WAAA,MAAU,GAAG,MAAE,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,EAAA"}
|
|
@@ -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 } from '@veltra/utils'\nimport { computed, shallowRef, toRefs, useTemplateRef, watch, nextTick } from 'vue'\n\nimport type { ProgressNodesProps, ProgressNodesEmits } from '../../types'\n\ndefineOptions({\n name: 'ProgressNodes'\n})\n\nconst props = withDefaults(defineProps<ProgressNodesProps>(), {\n colorType: 'primary',\n labelKey: 'label',\n valueKey: 'value'\n})\n\nconst emit = defineEmits<ProgressNodesEmits>()\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({\n targets: containerRef,\n onResize: checkScroll\n})\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(props.valueKey)\n return props.modelValue === value\n}\n\nfunction getLabel(node: Record<string, any>) {\n return o(node).get(props.labelKey)\n}\n\nfunction handleClick(node: Record<string, any>, index: number) {\n const value = o(node).get(props.valueKey)\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":";;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAEb,MAAM,EAAE,UAAU,OAAO,MAAK;EAE9B,MAAM,MAAM,IAAI,iBAAgB;EAChC,MAAM,eAAe,eAAe,YAAW;EAC/C,MAAM,aAAa,WAAW,MAAK;EACnC,MAAM,eAAe,WAAW,MAAK;EACrC,MAAM,gBAAgB,WAAW,MAAK;EACtC,MAAM,cAAc,WAAW,MAAK;EAEpC,MAAM,YAAY,eAAe;GAC/B,IAAI;GACJ,IAAI,EAAE,MAAM,
|
|
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 } from '@veltra/utils'\nimport { computed, shallowRef, toRefs, useTemplateRef, watch, nextTick } from 'vue'\n\nimport type { ProgressNodesProps, ProgressNodesEmits } from '../../types'\n\ndefineOptions({\n name: 'ProgressNodes'\n})\n\nconst props = withDefaults(defineProps<ProgressNodesProps>(), {\n colorType: 'primary',\n labelKey: 'label',\n valueKey: 'value'\n})\n\nconst emit = defineEmits<ProgressNodesEmits>()\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({\n targets: containerRef,\n onResize: checkScroll\n})\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(props.valueKey)\n return props.modelValue === value\n}\n\nfunction getLabel(node: Record<string, any>) {\n return o(node).get(props.labelKey)\n}\n\nfunction handleClick(node: Record<string, any>, index: number) {\n const value = o(node).get(props.valueKey)\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 <!-- radio框 -->\n <section :class=\"cls.e('button')\">\n <input\n type=\"radio\"\n :class=\"cls.e('native')\"\n :value=\"value\"\n v-model=\"model\"\n :disabled=\"disabled\"\n hidden\n />\n\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({\n name: 'Radio'\n})\n\nconst model = defineModel<any>()\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n disabled: undefined\n})\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ,SAAgB,SAAA,aAAC;EAE/B,MAAM,QAAQ;EAMd,MAAM,MAAM,IAAI,QAAO;EAEvB,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,aAAa,qBAAqB,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.vue"],"sourcesContent":["<template>\n <label :class=\"classList\">\n <!-- radio框 -->\n <section :class=\"cls.e('button')\">\n <input\n type=\"radio\"\n :class=\"cls.e('native')\"\n :value=\"value\"\n v-model=\"model\"\n :disabled=\"disabled\"\n hidden\n />\n\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({\n name: 'Radio'\n})\n\nconst model = defineModel<any>()\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n disabled: undefined\n})\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ,SAAgB,SAAA,aAAC;EAE/B,MAAM,QAAQ;EAMd,MAAM,MAAM,IAAI,QAAO;EAEvB,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,aAAa,qBAAqB,CAAC,aAAa,EAAC,EAAG,MAAK,EAAG;GACxE,MAAM;GACN,UAAU;GACX,CAAA;EAED,MAAM,eAAe,eAAe,MAAM,UAAU,MAAM,MAAK;EAE/D,MAAM,YAAY,eAAe;GAC/B,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAK;IAChB,IAAI,GAAG,YAAY,SAAS,MAAK;IACjC,IAAI,GAAG,WAAW,aAAa,MAAK;IACtC;IACD;;uBA7DC,mBAoBQ,SAAA,EApBA,OAAK,eAAE,UAAA,MAAS,EAAA,EAAA;IACtB,mBAAA,WAAA;IACA,mBAaU,WAAA,EAbA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,SAAA,CAAA,EAAA,EAAA,CAAA,eACpB,mBAOE,SAAA;KANA,MAAK;KACJ,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,SAAA,CAAA;KACZ,OAAO,QAAA;kEACC,MAAK,QAAA;KACb,UAAU,MAAA,SAAA;KACX,QAAA;6CAFS,MAAA,MAAK,CAAA,CAAA,EAKhB,YAEa,YAAA,EAFD,MAAK,WAAS,EAAA;4BACiC,CAArB,aAAA,SAAA,WAAA,EAApC,mBAAyD,QAAA;;MAAlD,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,QAAA,CAAA;;;;IAIvB,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,QAAA,CAAA,EAAA,EAAA,CACjB,WAAwB,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,gBAAA,gBAAf,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import "./style2.css";
|
|
2
|
-
import "@veltra/styles/
|
|
2
|
+
import "@veltra/styles/transitions/zoom-in.scss";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.js","names":[],"sources":["../../../src/components/radio-group/radio-group.vue"],"sourcesContent":["<template>\n <div :class=\"[cls.b, bem.is('block', block), cls.m(size)]\" v-if=\"!readonly\">\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, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\n\nimport type { RadioGroupProps, RadioGroupEmits } from '../../types'\nimport URadio from '../radio/radio.vue'\n\ndefineOptions({\n name: 'RadioGroup'\n})\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 handleUpdate = (value: any, item: Record<string, any>) => {\n model.value = value\n emit('change', item)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,MAAM,QAAQ;EAOd,MAAM,QAAQ,SAAgB,SAAA,aAAC;EAE/B,MAAM,OAAO;EAEb,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"radio-group.js","names":[],"sources":["../../../src/components/radio-group/radio-group.vue"],"sourcesContent":["<template>\n <div :class=\"[cls.b, bem.is('block', block), cls.m(size)]\" v-if=\"!readonly\">\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, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\n\nimport type { RadioGroupProps, RadioGroupEmits } from '../../types'\nimport URadio from '../radio/radio.vue'\n\ndefineOptions({\n name: 'RadioGroup'\n})\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 handleUpdate = (value: any, item: Record<string, any>) => {\n model.value = value\n emit('change', item)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,MAAM,QAAQ;EAOd,MAAM,QAAQ,SAAgB,SAAA,aAAC;EAE/B,MAAM,OAAO;EAEb,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAC,EAAG,MAAK,EAAG;GAClF,MAAM;GACN,UAAU;GACV,UAAU;GACX,CAAA;EAED,MAAM,MAAM,IAAI,cAAa;EAE7B,MAAM,gBAAgB,OAAY,SAA8B;GAC9D,MAAM,QAAQ;GACd,KAAK,UAAU,KAAI;;;WAtD+C,MAAA,SAAA,IAAA,WAAA,EAAlE,mBAYM,OAAA;;IAZA,OAAK,eAAA;KAAG,MAAA,IAAA,CAAI;KAAG,MAAA,IAAA,CAAI,GAAE,SAAU,QAAA,MAAK;KAAG,MAAA,IAAA,CAAI,EAAE,MAAA,KAAI,CAAA;KAAA,CAAA;yBACrD,mBAUU,UAAA,MAAA,WATO,QAAA,QAAR,SAAI;wBADb,YAUU,aAAA;KARP,KAAK,KAAK,QAAA;KACV,OAAO,KAAK,QAAA;KACZ,eAAa,MAAA;KACb,wBAAkB,WAAE,aAAa,QAAQ,KAAI;KAC7C,UAAU,QAAA,eAAe,KAAI,IAAK,MAAA,SAAA;KAClC,MAAM,MAAA,KAAA;;4BAEa,CAAA,gBAAA,gBAAjB,KAAK,QAAA,UAAQ,EAAA,EAAA,CAAA,CAAA;;;;;;;;;mCAIpB,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,QAAA,MAAM,MAAM,SAAS,KAAK,QAAA,cAAc,MAAA,MAAK,GAAI,QAAA,aAAa,MAAA,mBAAkB,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA"}
|
|
@@ -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 const root = $getRoot()\n const textContent = root.getTextContent()\n showPlaceholder.value = textContent.trim().length === 0\n\n if (isComposing) return\n\n let value: string\n if (props.format === 'json') {\n value = JSON.stringify(editorState.toJSON())\n } else {\n value = $generateHtmlFromNodes(editorInstance)\n }\n\n // Avoid circular updates: only emit if content really changed\n if (value !== model.value) {\n isComposing = true\n model.value = value\n // Use microtask to reset after Vue processes the update\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n })\n )\n\n // Composing event listeners for IME\n const rootElement = editorInstance.getRootElement()\n if (rootElement) {\n const onCompositionStart = () => {\n isComposing = true\n }\n const onCompositionEnd = () => {\n isComposing = false\n }\n rootElement.addEventListener('compositionstart', onCompositionStart)\n rootElement.addEventListener('compositionend', onCompositionEnd)\n cleanupFns.push(() => {\n rootElement.removeEventListener('compositionstart', onCompositionStart)\n rootElement.removeEventListener('compositionend', onCompositionEnd)\n })\n }\n\n editor.value = editorInstance\n}\n\nfunction setEditorContent(editorInstance: LexicalEditor, value: string) {\n editorInstance.update(() => {\n const root = $getRoot()\n root.clear()\n\n if (props.format === 'json') {\n try {\n const parsedState = editorInstance.parseEditorState(value)\n editorInstance.setEditorState(parsedState)\n } catch {\n // If JSON parse fails, treat as empty\n root.append($createParagraphNode())\n }\n } else {\n // HTML format\n const parser = new DOMParser()\n const dom = parser.parseFromString(value, 'text/html')\n const nodes = $generateNodesFromDOM(editorInstance, dom)\n root.append(...nodes)\n }\n })\n}\n\n// Watch external model changes\nwatch(model, (newVal) => {\n if (!editor.value || isComposing) return\n\n const editorInstance = editor.value\n\n // Compare current content to avoid circular updates\n editorInstance.getEditorState().read(() => {\n let currentValue: string\n if (props.format === 'json') {\n currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())\n } else {\n currentValue = $generateHtmlFromNodes(editorInstance)\n }\n\n if (currentValue !== newVal) {\n isComposing = true\n setEditorContent(editorInstance, newVal ?? '')\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n})\n\n// Watch disabled/readonly changes\nwatch([isDisabled, isReadonly], () => {\n if (editor.value) {\n editor.value.setEditable(!isDisabled.value && !isReadonly.value)\n }\n})\n\nonMounted(() => {\n initEditor()\n})\n\nonBeforeUnmount(() => {\n cleanupFns.forEach((fn) => fn())\n cleanupFns = []\n editor.value = null\n})\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../src/components/rich-text-editor/rich-text-editor.vue"],"sourcesContent":["<template>\n <div :class=\"className\">\n <toolbar\n v-if=\"!isReadonly && toolbarItems.length > 0\"\n :editor=\"editor\"\n :toolbar=\"toolbarItems\"\n :disabled=\"isDisabled\"\n />\n <div :class=\"cls.e('content')\">\n <div\n ref=\"editorContainer\"\n :class=\"cls.e('editable')\"\n :contenteditable=\"!isDisabled && !isReadonly\"\n ></div>\n <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n {{ placeholder }}\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { ToolbarItem } from '../../types'\n\nconst LEXICAL_THEME = {\n paragraph: 'u-rte-paragraph',\n heading: {\n h1: 'u-rte-h1',\n h2: 'u-rte-h2',\n h3: 'u-rte-h3',\n h4: 'u-rte-h4',\n h5: 'u-rte-h5',\n h6: 'u-rte-h6'\n },\n text: {\n bold: 'u-rte-bold',\n italic: 'u-rte-italic',\n underline: 'u-rte-underline',\n strikethrough: 'u-rte-strikethrough'\n },\n list: {\n ul: 'u-rte-ul',\n ol: 'u-rte-ol',\n listitem: 'u-rte-li',\n nested: { listitem: 'u-rte-li--nested' }\n },\n quote: 'u-rte-blockquote',\n\n link: 'u-rte-link',\n image: 'u-rte-image'\n}\n\nconst DEFAULT_TOOLBAR: ToolbarItem[] = [\n 'undo',\n 'redo',\n '|',\n 'heading',\n '|',\n 'bold',\n 'italic',\n 'underline',\n 'strikethrough',\n '|',\n 'bullet-list',\n 'ordered-list',\n '|',\n 'blockquote',\n '|',\n 'link'\n]\n</script>\n\n<script lang=\"ts\" setup>\nimport { registerHistory, createEmptyHistoryState } from '@lexical/history'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport { LinkNode, AutoLinkNode } from '@lexical/link'\nimport { ListNode, ListItemNode, registerList } from '@lexical/list'\nimport { registerRichText } from '@lexical/rich-text'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { createEditor, $getRoot, $createParagraphNode, type LexicalEditor } from 'lexical'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { RichTextEditorProps } from '../../types'\nimport Toolbar from './toolbar.vue'\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n disabled: undefined,\n readonly: undefined,\n format: 'html',\n toolbar: () => DEFAULT_TOOLBAR,\n placeholder: ''\n})\n\nconst model = defineModel<string>()\n\nconst cls = bem('rich-text-editor')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst isDisabled = computed(() => !!disabled.value)\nconst isReadonly = computed(() => !!readonly.value)\n\nconst className = computed<string[]>(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', isDisabled.value),\n bem.is('readonly', isReadonly.value)\n ]\n})\n\nconst toolbarItems = computed<ToolbarItem[]>(() => {\n return props.toolbar ?? DEFAULT_TOOLBAR\n})\n\nconst editorContainer = useTemplateRef('editorContainer')\nconst editor = shallowRef<LexicalEditor | null>(null)\nconst showPlaceholder = ref(true)\nlet isComposing = false\nlet cleanupFns: (() => void)[] = []\n\nfunction initEditor() {\n if (!editorContainer.value) return\n\n const editorInstance = createEditor({\n namespace: 'URichTextEditor',\n theme: LEXICAL_THEME,\n nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode],\n editable: !isDisabled.value && !isReadonly.value,\n onError: (error: Error) => {\n console.error('Lexical error:', error)\n }\n })\n\n editorInstance.setRootElement(editorContainer.value)\n\n // Register plugins\n cleanupFns.push(registerRichText(editorInstance))\n cleanupFns.push(registerList(editorInstance))\n cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))\n\n // Set initial value\n if (model.value) {\n setEditorContent(editorInstance, model.value)\n }\n\n // Listen for content changes\n cleanupFns.push(\n editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const root = $getRoot()\n const textContent = root.getTextContent()\n showPlaceholder.value = textContent.trim().length === 0\n\n if (isComposing) return\n\n let value: string\n if (props.format === 'json') {\n value = JSON.stringify(editorState.toJSON())\n } else {\n value = $generateHtmlFromNodes(editorInstance)\n }\n\n // Avoid circular updates: only emit if content really changed\n if (value !== model.value) {\n isComposing = true\n model.value = value\n // Use microtask to reset after Vue processes the update\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n })\n )\n\n // Composing event listeners for IME\n const rootElement = editorInstance.getRootElement()\n if (rootElement) {\n const onCompositionStart = () => {\n isComposing = true\n }\n const onCompositionEnd = () => {\n isComposing = false\n }\n rootElement.addEventListener('compositionstart', onCompositionStart)\n rootElement.addEventListener('compositionend', onCompositionEnd)\n cleanupFns.push(() => {\n rootElement.removeEventListener('compositionstart', onCompositionStart)\n rootElement.removeEventListener('compositionend', onCompositionEnd)\n })\n }\n\n editor.value = editorInstance\n}\n\nfunction setEditorContent(editorInstance: LexicalEditor, value: string) {\n editorInstance.update(() => {\n const root = $getRoot()\n root.clear()\n\n if (props.format === 'json') {\n try {\n const parsedState = editorInstance.parseEditorState(value)\n editorInstance.setEditorState(parsedState)\n } catch {\n // If JSON parse fails, treat as empty\n root.append($createParagraphNode())\n }\n } else {\n // HTML format\n const parser = new DOMParser()\n const dom = parser.parseFromString(value, 'text/html')\n const nodes = $generateNodesFromDOM(editorInstance, dom)\n root.append(...nodes)\n }\n })\n}\n\n// Watch external model changes\nwatch(model, (newVal) => {\n if (!editor.value || isComposing) return\n\n const editorInstance = editor.value\n\n // Compare current content to avoid circular updates\n editorInstance.getEditorState().read(() => {\n let currentValue: string\n if (props.format === 'json') {\n currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())\n } else {\n currentValue = $generateHtmlFromNodes(editorInstance)\n }\n\n if (currentValue !== newVal) {\n isComposing = true\n setEditorContent(editorInstance, newVal ?? '')\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n})\n\n// Watch disabled/readonly changes\nwatch([isDisabled, isReadonly], () => {\n if (editor.value) {\n editor.value.setEditable(!isDisabled.value && !isReadonly.value)\n }\n})\n\nonMounted(() => {\n initEditor()\n})\n\nonBeforeUnmount(() => {\n cleanupFns.forEach((fn) => fn())\n cleanupFns = []\n editor.value = null\n})\n</script>\n"],"mappings":"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"}
|
|
@@ -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 const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n updateToolbarState(selection)\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 editorInstance.getEditorState().read(() => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n const anchorNode = selection.anchor.getNode()\n const parent = anchorNode.getParent()\n\n if ($isLinkNode(parent)) {\n // Remove link\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n } else {\n // Insert link with prompt\n const url = prompt('请输入链接地址:', 'https://')\n if (url && url !== 'https://') {\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)\n }\n }\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 const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n updateToolbarState(selection)\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 editorInstance.getEditorState().read(() => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n const anchorNode = selection.anchor.getNode()\n const parent = anchorNode.getParent()\n\n if ($isLinkNode(parent)) {\n // Remove link\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n } else {\n // Insert link with prompt\n const url = prompt('请输入链接地址:', 'https://')\n if (url && url !== 'https://') {\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)\n }\n }\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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"}
|
|
@@ -57,10 +57,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
57
57
|
}
|
|
58
58
|
});
|
|
59
59
|
__expose({
|
|
60
|
+
/** 更新滚动条状态 */
|
|
60
61
|
update(_size, _offset) {
|
|
61
62
|
size.value = _size;
|
|
62
63
|
offset.value = _offset;
|
|
63
64
|
},
|
|
65
|
+
/** 设置轨道尺寸 */
|
|
64
66
|
setTrackSize(size) {
|
|
65
67
|
trackSize = size;
|
|
66
68
|
}
|