@veltra/desktop 1.1.28 → 1.1.30
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 +4 -6
- package/dist/components/action/action-group.vue_vue_type_script_setup_true_lang.js +1 -1
- 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 +4 -7
- package/dist/components/action/di.js.map +1 -1
- package/dist/components/auto-complete/auto-complete.js.map +1 -1
- package/dist/components/auto-complete/auto-complete.vue.d.ts +3 -5
- 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.map +1 -1
- package/dist/components/badge/badge.vue.d.ts +2 -4
- 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/batch-edit.vue.d.ts +4 -7
- package/dist/components/batch-edit/di.js.map +1 -1
- package/dist/components/batch-edit/helper.js.map +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/breadcrumb/breadcrumb.vue.d.ts +3 -5
- package/dist/components/button/button-group.js.map +1 -1
- package/dist/components/button/button-group.vue.d.ts +1 -3
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button/button.vue.d.ts +4 -6
- package/dist/components/calendar/calendar.js.map +1 -1
- package/dist/components/calendar/calendar.vue.d.ts +3 -5
- package/dist/components/calendar/utils.js.map +1 -1
- package/dist/components/card/card-action.js.map +1 -1
- package/dist/components/card/card-action.vue.d.ts +1 -3
- package/dist/components/card/card-content.js.map +1 -1
- package/dist/components/card/card-content.vue.d.ts +1 -3
- package/dist/components/card/card-cover.js.map +1 -1
- package/dist/components/card/card-cover.vue.d.ts +1 -3
- package/dist/components/card/card-header.js.map +1 -1
- package/dist/components/card/card-header.vue.d.ts +1 -3
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/card/card.vue.d.ts +1 -3
- package/dist/components/card/di.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 +6 -8
- package/dist/components/cascade/di.js.map +1 -1
- 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.map +1 -1
- package/dist/components/check-tag/check-tag.js.map +1 -1
- package/dist/components/check-tag/check-tag.vue.d.ts +3 -5
- package/dist/components/checkbox/checkbox-button.js.map +1 -1
- package/dist/components/checkbox/checkbox-button.vue.d.ts +4 -7
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/checkbox/checkbox.vue.d.ts +3 -5
- package/dist/components/checkbox-group/checkbox-group.js.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.vue.d.ts +3 -5
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/code-editor/code-editor.vue.d.ts +3 -5
- package/dist/components/collapse/collapse-item.js.map +1 -1
- package/dist/components/collapse/collapse-item.vue.d.ts +1 -3
- package/dist/components/collapse/collapse.js.map +1 -1
- package/dist/components/collapse/collapse.vue.d.ts +3 -5
- package/dist/components/collapse/di.js.map +1 -1
- package/dist/components/condition-editor/components/condition-group.js.map +1 -1
- package/dist/components/condition-editor/components/condition-row.js.map +1 -1
- package/dist/components/condition-editor/condition-editor.js.map +1 -1
- package/dist/components/condition-editor/condition-editor.vue.d.ts +3 -5
- 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/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/context-menu.vue.d.ts +3 -5
- package/dist/components/context-menu/di.js.map +1 -1
- package/dist/components/date-panel/date-panel.js.map +1 -1
- package/dist/components/date-panel/date-panel.vue.d.ts +8 -12
- package/dist/components/date-panel/di.js.map +1 -1
- package/dist/components/date-panel/headers/day.js.map +1 -1
- package/dist/components/date-panel/headers/month.js.map +1 -1
- package/dist/components/date-panel/headers/year.js.map +1 -1
- package/dist/components/date-panel/panels/day.js.map +1 -1
- package/dist/components/date-panel/panels/month.js.map +1 -1
- package/dist/components/date-panel/panels/year.js.map +1 -1
- package/dist/components/date-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 +3 -5
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.vue.d.ts +3 -5
- package/dist/components/dialog/di.js.map +1 -1
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/dialog/dialog.vue.d.ts +3 -6
- package/dist/components/dialog/use-maximum.js.map +1 -1
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/drawer/drawer.vue.d.ts +3 -5
- package/dist/components/dropdown/dropdown.js.map +1 -1
- package/dist/components/dropdown/dropdown.vue.d.ts +3 -6
- package/dist/components/empty/empty.js.map +1 -1
- package/dist/components/empty/empty.vue.d.ts +2 -4
- 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/expression-editor/expression-editor.vue.d.ts +3 -5
- package/dist/components/file-picker/file-picker.js.map +1 -1
- package/dist/components/file-picker/file-picker.vue.d.ts +3 -5
- package/dist/components/file-picker/helper.js.map +1 -1
- package/dist/components/file-viewer/file-viewer.js +1 -1
- package/dist/components/file-viewer/file-viewer.js.map +1 -1
- package/dist/components/file-viewer/file-viewer.vue.d.ts +5 -6
- 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/float-button/float-button.vue.d.ts +3 -5
- 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.d.ts +3 -4
- package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js +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.vue.d.ts +2 -4
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/form-item/helper.js.map +1 -1
- package/dist/components/gantt-chart/gantt-chart.js.map +1 -1
- package/dist/components/gantt-chart/gantt-chart.vue.d.ts +1 -3
- package/dist/components/grid/breakpoint.js.map +1 -1
- package/dist/components/grid/di.js.map +1 -1
- package/dist/components/grid/grid-item.js.map +1 -1
- package/dist/components/grid/grid-item.vue.d.ts +2 -4
- package/dist/components/grid/grid.js.map +1 -1
- package/dist/components/grid/grid.vue.d.ts +3 -5
- package/dist/components/grid/use-responsive.js.map +1 -1
- package/dist/components/grid-input/grid-input.js.map +1 -1
- package/dist/components/grid-input/grid-input.vue.d.ts +3 -6
- package/dist/components/group-input/group-input.js.map +1 -1
- package/dist/components/group-input/group-input.vue.d.ts +2 -4
- package/dist/components/group-input/use-group-items.js.map +1 -1
- package/dist/components/icon/icon.js.map +1 -1
- package/dist/components/icon/icon.vue.d.ts +1 -3
- package/dist/components/input/input.vue.d.ts +3 -5
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/kbd/kbd.js.map +1 -1
- package/dist/components/kbd/kbd.vue.d.ts +1 -3
- package/dist/components/layout/di.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/layout/layout.vue.d.ts +2 -4
- package/dist/components/list/list-item.js.map +1 -1
- package/dist/components/list/list-item.vue.d.ts +1 -3
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/list/list.vue.d.ts +1 -3
- package/dist/components/loading/directive.js.map +1 -1
- package/dist/components/loading/loading.js.map +1 -1
- package/dist/components/loading/loading.vue.d.ts +2 -4
- package/dist/components/menu/di.js.map +1 -1
- package/dist/components/menu/helper.js.map +1 -1
- package/dist/components/menu/menu-icon.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-item.vue.d.ts +1 -3
- 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-sub.vue.d.ts +1 -3
- package/dist/components/menu/menu.js.map +1 -1
- package/dist/components/menu/menu.vue.d.ts +3 -5
- 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/message.vue.d.ts +3 -5
- 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-confirm.vue.d.ts +2 -3
- package/dist/components/message-confirm/message-confirm2.js.map +1 -1
- package/dist/components/multi-select/di.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 +5 -7
- package/dist/components/multi-tree-select/multi-tree-select.js.map +1 -1
- package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +6 -7
- 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/notification/notification.vue.d.ts +3 -6
- package/dist/components/number/number.js.map +1 -1
- package/dist/components/number/number.vue.d.ts +2 -4
- package/dist/components/number-input/number-input.js.map +1 -1
- package/dist/components/number-input/number-input.vue.d.ts +3 -5
- package/dist/components/number-range-input/number-range-input.js.map +1 -1
- package/dist/components/number-range-input/number-range-input.vue.d.ts +4 -6
- package/dist/components/paginator/paginator.js.map +1 -1
- package/dist/components/paginator/paginator.vue.d.ts +3 -5
- package/dist/components/palette/color-transform.js.map +1 -1
- package/dist/components/palette/di.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/palette.vue.d.ts +3 -5
- package/dist/components/palette/use-hsv.js.map +1 -1
- package/dist/components/password-input/password-input.js.map +1 -1
- package/dist/components/password-input/password-input.vue.d.ts +3 -5
- package/dist/components/pop-confirm/pop-confirm.js.map +1 -1
- package/dist/components/pop-confirm/pop-confirm.vue.d.ts +4 -6
- package/dist/components/progress/progress.js.map +1 -1
- package/dist/components/progress/progress.vue.d.ts +2 -3
- package/dist/components/progress-nodes/progress-nodes.js.map +1 -1
- package/dist/components/progress-nodes/progress-nodes.vue.d.ts +4 -7
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/radio/radio.vue.d.ts +3 -5
- package/dist/components/radio-group/radio-group.js.map +1 -1
- package/dist/components/radio-group/radio-group.vue.d.ts +3 -5
- package/dist/components/rich-text-editor/rich-text-editor.js.map +1 -1
- package/dist/components/rich-text-editor/rich-text-editor.vue.d.ts +4 -6
- package/dist/components/rich-text-editor/toolbar.js.map +1 -1
- package/dist/components/scroll/di.js.map +1 -1
- package/dist/components/scroll/scroll-bar.js.map +1 -1
- package/dist/components/scroll/scroll.js.map +1 -1
- package/dist/components/scroll/scroll.vue.d.ts +3 -5
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/select/select.vue.d.ts +5 -7
- package/dist/components/select/use-keyboard.js.map +1 -1
- package/dist/components/select/use-options.js.map +1 -1
- package/dist/components/slider/di.js.map +1 -1
- package/dist/components/slider/slider-thumb.js.map +1 -1
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/slider/slider.vue.d.ts +2 -4
- 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 +4 -7
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/switch/switch.vue.d.ts +3 -5
- 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/table.vue.d.ts +7 -10
- 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/table-editor/table-editor.vue.d.ts +3 -5
- package/dist/components/tabs/tabs-horizontal.js +5 -2
- package/dist/components/tabs/tabs-horizontal.js.map +1 -1
- package/dist/components/tabs/tabs-horizontal.vue.d.ts +6 -7
- package/dist/components/tabs/tabs-vertical.js +5 -2
- package/dist/components/tabs/tabs-vertical.js.map +1 -1
- package/dist/components/tabs/tabs-vertical.vue.d.ts +10 -10
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/tabs/tabs.vue.d.ts +11 -6
- package/dist/components/tabs/use-tabs-bar.js.map +1 -1
- package/dist/components/tag/tag.js.map +1 -1
- package/dist/components/tag/tag.vue.d.ts +3 -5
- package/dist/components/text/text.js.map +1 -1
- package/dist/components/text/text.vue.d.ts +2 -4
- package/dist/components/textarea/textarea.js.map +1 -1
- package/dist/components/textarea/textarea.vue.d.ts +3 -5
- 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/theme/theme.vue.d.ts +1 -3
- package/dist/components/tip/tip.js.map +1 -1
- package/dist/components/tip/tip.vue.d.ts +3 -5
- package/dist/components/tip/use-nest.js.map +1 -1
- package/dist/components/tree/di.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 +3 -5
- 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 +6 -7
- package/dist/components/watermark/watermark.js.map +1 -1
- package/dist/components/watermark/watermark.vue.d.ts +2 -4
- package/dist/index.d.ts +1 -1
- package/dist/install.js.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +8 -8
- package/src/components/tabs/tabs-horizontal.vue +2 -2
- package/src/components/tabs/tabs-vertical.vue +3 -1
- package/src/components/tabs/tabs.vue +2 -2
- package/dist/components/kbd/index.d.ts +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification.js","names":["$emit"],"sources":["../../../src/components/notification/notification.vue"],"sourcesContent":["<template>\n <transition\n :name=\"`notification-fade-${position.split('-')[0]}`\"\n @before-leave=\"onClose\"\n @after-leave=\"$emit('destroy')\"\n >\n <div\n :class=\"[cls.b, cls.m(size), cls.e(type), cls.e(position)]\"\n v-show=\"visible\"\n :style=\"customStyle\"\n >\n <div :class=\"cls.e('icon')\">\n <UIcon>\n <component :is=\"typeIcon\" />\n </UIcon>\n </div>\n <div :class=\"cls.e('content')\">\n <div :class=\"cls.em('content', 'title')\">{{ title }}</div>\n <div :class=\"cls.em('content', 'message')\">{{ message }}</div>\n <div :class=\"cls.em('content', 'button')\" v-if=\"buttonText\">\n <UButton :type=\"type\" plain @click=\"handleClick\">{{ buttonText }}</UButton>\n </div>\n </div>\n <div :class=\"cls.e('close')\" v-if=\"closable\" @click.stop=\"close\">\n <UIcon><Close /></UIcon>\n </div>\n </div>\n </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport {\n CircleCheckFilled,\n CircleClose,\n Close,\n InfoFilled,\n QuestionFilled,\n WarningFilled\n} from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { ref, computed, onMounted, type CSSProperties } from 'vue'\n\nimport type { NotificationProps, NotificationExposed, ColorType } from '../../types'\nimport { UButton } from '../button'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'Notification' })\n\nconst props = withDefaults(defineProps<NotificationProps>(), {\n closable: false,\n duration: 4500,\n offset: 20,\n buttonText: '',\n position: 'bottom-right'\n})\n\nconst { type, size } = useFallbackProps([props], { type: 'primary' as ColorType, size: 'default' })\n\nconst typeIcon = computed(() => {\n return (\n props.icon ||\n {\n primary: InfoFilled,\n info: QuestionFilled,\n success: CircleCheckFilled,\n warning: WarningFilled,\n danger: CircleClose\n }[type.value]\n )\n})\n\nconst cls = bem('notification')\n\nconst visible = ref<boolean>(false)\n\nonMounted(() => {\n visible.value = true\n startTimer()\n})\n\nconst close = () => {\n visible.value = false\n}\n\nconst customStyle = computed<CSSProperties>(() => {\n return props.offset > 0\n ? {\n [`${props.position.split('-')[0]}`]: `${props.offset}px`,\n zIndex: props.zIndex,\n transform:\n props.position.split('-')[0] === 'bottom'\n ? `translateY(-${props.offset}px)`\n : `translateY(${props.offset}px)`,\n transition: `opacity 0.3s, transform 0.4s, top 0.4s`\n }\n : { [`${props.position.split('-')[0]}`]: `${props.offset}px`, zIndex: props.zIndex }\n})\n\nlet timer = 0\n\nconst startTimer = () => {\n if (props.duration) {\n timer = setTimeout(() => {\n close()\n }, props.duration)\n }\n}\n\nconst clearTimer = () => clearTimeout(timer)\n\nconst handleClick = (e: MouseEvent) => {\n if (props.onClick) props.onClick(e)\n close()\n}\n\ndefineExpose<NotificationExposed>({ startTimer, clearTimer })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDA,MAAM,QAAQ;EAQd,MAAM,EAAE,MAAM,SAAS,iBAAiB,CAAC,
|
|
1
|
+
{"version":3,"file":"notification.js","names":["$emit"],"sources":["../../../src/components/notification/notification.vue"],"sourcesContent":["<template>\n <transition\n :name=\"`notification-fade-${position.split('-')[0]}`\"\n @before-leave=\"onClose\"\n @after-leave=\"$emit('destroy')\"\n >\n <div\n :class=\"[cls.b, cls.m(size), cls.e(type), cls.e(position)]\"\n v-show=\"visible\"\n :style=\"customStyle\"\n >\n <div :class=\"cls.e('icon')\">\n <UIcon>\n <component :is=\"typeIcon\" />\n </UIcon>\n </div>\n <div :class=\"cls.e('content')\">\n <div :class=\"cls.em('content', 'title')\">{{ title }}</div>\n <div :class=\"cls.em('content', 'message')\">{{ message }}</div>\n <div :class=\"cls.em('content', 'button')\" v-if=\"buttonText\">\n <UButton :type=\"type\" plain @click=\"handleClick\">{{ buttonText }}</UButton>\n </div>\n </div>\n <div :class=\"cls.e('close')\" v-if=\"closable\" @click.stop=\"close\">\n <UIcon><Close /></UIcon>\n </div>\n </div>\n </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport {\n CircleCheckFilled,\n CircleClose,\n Close,\n InfoFilled,\n QuestionFilled,\n WarningFilled\n} from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { ref, computed, onMounted, type CSSProperties } from 'vue'\n\nimport type { NotificationProps, NotificationExposed, ColorType } from '../../types'\nimport { UButton } from '../button'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'Notification' })\n\nconst props = withDefaults(defineProps<NotificationProps>(), {\n closable: false,\n duration: 4500,\n offset: 20,\n buttonText: '',\n position: 'bottom-right'\n})\n\nconst { type, size } = useFallbackProps([props], { type: 'primary' as ColorType, size: 'default' })\n\nconst typeIcon = computed(() => {\n return (\n props.icon ||\n {\n primary: InfoFilled,\n info: QuestionFilled,\n success: CircleCheckFilled,\n warning: WarningFilled,\n danger: CircleClose\n }[type.value]\n )\n})\n\nconst cls = bem('notification')\n\nconst visible = ref<boolean>(false)\n\nonMounted(() => {\n visible.value = true\n startTimer()\n})\n\nconst close = () => {\n visible.value = false\n}\n\nconst customStyle = computed<CSSProperties>(() => {\n return props.offset > 0\n ? {\n [`${props.position.split('-')[0]}`]: `${props.offset}px`,\n zIndex: props.zIndex,\n transform:\n props.position.split('-')[0] === 'bottom'\n ? `translateY(-${props.offset}px)`\n : `translateY(${props.offset}px)`,\n transition: `opacity 0.3s, transform 0.4s, top 0.4s`\n }\n : { [`${props.position.split('-')[0]}`]: `${props.offset}px`, zIndex: props.zIndex }\n})\n\nlet timer = 0\n\nconst startTimer = () => {\n if (props.duration) {\n timer = setTimeout(() => {\n close()\n }, props.duration)\n }\n}\n\nconst clearTimer = () => clearTimeout(timer)\n\nconst handleClick = (e: MouseEvent) => {\n if (props.onClick) props.onClick(e)\n close()\n}\n\ndefineExpose<NotificationExposed>({ startTimer, clearTimer })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDA,MAAM,QAAQ;EAQd,MAAM,EAAE,MAAM,SAAS,iBAAiB,CAAC,KAAK,GAAG;GAAE,MAAM;GAAwB,MAAM;EAAU,CAAC;EAElG,MAAM,WAAW,eAAe;GAC9B,OACE,MAAM,QACN;IACE,SAAS;IACT,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;GACV,EAAE,KAAK;EAEX,CAAC;EAED,MAAM,MAAM,IAAI,cAAc;EAE9B,MAAM,UAAU,IAAa,KAAK;EAElC,gBAAgB;GACd,QAAQ,QAAQ;GAChB,WAAW;EACb,CAAC;EAED,MAAM,cAAc;GAClB,QAAQ,QAAQ;EAClB;EAEA,MAAM,cAAc,eAA8B;GAChD,OAAO,MAAM,SAAS,IAClB;KACG,GAAG,MAAM,SAAS,MAAM,GAAG,EAAE,OAAO,GAAG,MAAM,OAAO;IACrD,QAAQ,MAAM;IACd,WACE,MAAM,SAAS,MAAM,GAAG,EAAE,OAAO,WAC7B,eAAe,MAAM,OAAO,OAC5B,cAAc,MAAM,OAAO;IACjC,YAAY;GACd,IACA;KAAG,GAAG,MAAM,SAAS,MAAM,GAAG,EAAE,OAAO,GAAG,MAAM,OAAO;IAAK,QAAQ,MAAM;GAAO;EACvF,CAAC;EAED,IAAI,QAAQ;EAEZ,MAAM,mBAAmB;GACvB,IAAI,MAAM,UACR,QAAQ,iBAAiB;IACvB,MAAM;GACR,GAAG,MAAM,QAAQ;EAErB;EAEA,MAAM,mBAAmB,aAAa,KAAK;EAE3C,MAAM,eAAe,MAAkB;GACrC,IAAI,MAAM,SAAS,MAAM,QAAQ,CAAC;GAClC,MAAM;EACR;EAEA,SAAkC;GAAE;GAAY;EAAW,CAAC;;uBAnH1D,YA0Ba,YAAA;IAzBV,MAAI,qBAAuB,QAAA,SAAS,MAAK,GAAA,EAAA;IACzC,eAAc,QAAA;IACd,cAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,SAAA;IAHrB,WAAA;;2BAyBQ,CAAA,eApBN,mBAoBM,OAAA;KAnBH,OAAK,eAAA;MAAG,MAAA,GAAA,EAAI;MAAG,MAAA,GAAA,EAAI,EAAE,MAAA,IAAA,CAAI;MAAG,MAAA,GAAA,EAAI,EAAE,MAAA,IAAA,CAAI;MAAG,MAAA,GAAA,EAAI,EAAE,QAAA,QAAQ;KAAA,CAAA;KAEvD,OAAK,eAAE,YAAA,KAAW;;KAEnB,mBAIM,OAAA,EAJA,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,MAAA,CAAA,EAAA,GAAA,CAChB,YAEQ,MAAA,WAAA,GAAA,MAAA;6BADsB,EAAA,UAAA,GAA5B,YAA4B,wBAAZ,SAAA,KAAQ,CAAA,EAAA,CAAA;;;KAG5B,mBAMM,OAAA,EANA,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,SAAA,CAAA,EAAA,GAAA;MAChB,mBAA0D,OAAA,EAApD,OAAK,eAAE,MAAA,GAAA,EAAI,GAAE,WAAA,OAAA,CAAA,EAAA,GAAA,gBAAyB,QAAA,KAAK,GAAA,CAAA;MACjD,mBAA8D,OAAA,EAAxD,OAAK,eAAE,MAAA,GAAA,EAAI,GAAE,WAAA,SAAA,CAAA,EAAA,GAAA,gBAA2B,QAAA,OAAO,GAAA,CAAA;MACL,QAAA,cAAA,UAAA,GAAhD,mBAEM,OAAA;;OAFA,OAAK,eAAE,MAAA,GAAA,EAAI,GAAE,WAAA,QAAA,CAAA;UACjB,YAA2E,MAAA,WAAA,GAAA;OAAjE,MAAM,MAAA,IAAA;OAAM,OAAA;OAAO,SAAO;;8BAA6B,CAAA,gBAAA,gBAAb,QAAA,UAAU,GAAA,CAAA,CAAA,CAAA;;;;KAG/B,QAAA,YAAA,UAAA,GAAnC,mBAEM,OAAA;;MAFA,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,OAAA,CAAA;MAA4B,SAAK,cAAO,OAAK,CAAA,MAAA,CAAA;SAC7D,YAAwB,MAAA,WAAA,GAAA,MAAA;6BAAR,CAAT,YAAS,MAAA,KAAA,CAAA,CAAA,CAAA;;;oBAhBV,QAAA,KAAO,CAAA,CAAA,CAAA,CAAA"}
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
import { NotificationProps, _NotificationExposed } from "../../types/notification.js";
|
|
2
|
-
import * as _$vue from "vue";
|
|
3
|
-
import * as _$_veltra_utils0 from "@veltra/utils";
|
|
4
|
-
|
|
5
2
|
//#region src/components/notification/notification.vue.d.ts
|
|
6
|
-
declare const __VLS_export:
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<NotificationProps, import("@veltra/utils").DeconstructValue<_NotificationExposed>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NotificationProps> & Readonly<{}>, {
|
|
7
4
|
closable: boolean;
|
|
8
|
-
position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
9
5
|
duration: number;
|
|
10
6
|
offset: number;
|
|
11
7
|
buttonText: string;
|
|
12
|
-
|
|
8
|
+
position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
9
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
10
|
declare const _default: typeof __VLS_export;
|
|
14
11
|
//#endregion
|
|
15
12
|
export { _default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"number.js","names":[],"sources":["../../../src/components/number/number.vue"],"sourcesContent":["<template>\n {{ formatted }}\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n } from '@cat-kit/core'\nimport { Tween } from '@veltra/utils'\nimport { computed, reactive, watch } from 'vue'\n\nimport type { NumberProps } from '../../types'\n\ndefineOptions({ name: 'Number' })\n\nconst props = withDefaults(defineProps<NumberProps>(), { duration: 800, format: 'decimal' })\n\nconst number = reactive({ value: 0 })\n\nconst tween = computed(() =>\n props.tween\n ? new Tween(number, { duration: props.duration, easingFunction: Tween.easing.easeInOutQuad })\n : null\n)\n\nconst formatter = computed(() => {\n return $n.formatter({\n currency: props.format === 'currency' ? 'CNY' : undefined,\n style: props.format,\n precision: props.precision,\n maximumFractionDigits: props.maxPrecision,\n minimumFractionDigits: props.minPrecision\n })\n})\n\nconst formatted = computed(() => {\n return formatter.value.format(number.value)\n})\n\nwatch(\n () => props.value,\n () => {\n props.tween ? tween.value.to({ value: props.value }) : (number.value = props.value)\n },\n { immediate: true }\n)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;EAEd,MAAM,SAAS,SAAS,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"number.js","names":[],"sources":["../../../src/components/number/number.vue"],"sourcesContent":["<template>\n {{ formatted }}\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n } from '@cat-kit/core'\nimport { Tween } from '@veltra/utils'\nimport { computed, reactive, watch } from 'vue'\n\nimport type { NumberProps } from '../../types'\n\ndefineOptions({ name: 'Number' })\n\nconst props = withDefaults(defineProps<NumberProps>(), { duration: 800, format: 'decimal' })\n\nconst number = reactive({ value: 0 })\n\nconst tween = computed(() =>\n props.tween\n ? new Tween(number, { duration: props.duration, easingFunction: Tween.easing.easeInOutQuad })\n : null\n)\n\nconst formatter = computed(() => {\n return $n.formatter({\n currency: props.format === 'currency' ? 'CNY' : undefined,\n style: props.format,\n precision: props.precision,\n maximumFractionDigits: props.maxPrecision,\n minimumFractionDigits: props.minPrecision\n })\n})\n\nconst formatted = computed(() => {\n return formatter.value.format(number.value)\n})\n\nwatch(\n () => props.value,\n () => {\n props.tween ? tween.value.to({ value: props.value }) : (number.value = props.value)\n },\n { immediate: true }\n)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;EAEd,MAAM,SAAS,SAAS,EAAE,OAAO,EAAE,CAAC;EAEpC,MAAM,QAAQ,eACZ,MAAM,QACF,IAAI,MAAM,QAAQ;GAAE,UAAU,MAAM;GAAU,gBAAgB,MAAM,OAAO;EAAc,CAAC,IAC1F,IACN;EAEA,MAAM,YAAY,eAAe;GAC/B,OAAO,GAAG,UAAU;IAClB,UAAU,MAAM,WAAW,aAAa,QAAQ,KAAA;IAChD,OAAO,MAAM;IACb,WAAW,MAAM;IACjB,uBAAuB,MAAM;IAC7B,uBAAuB,MAAM;GAC/B,CAAC;EACH,CAAC;EAED,MAAM,YAAY,eAAe;GAC/B,OAAO,UAAU,MAAM,OAAO,OAAO,KAAK;EAC5C,CAAC;EAED,YACQ,MAAM,aACN;GACJ,MAAM,QAAQ,MAAM,MAAM,GAAG,EAAE,OAAO,MAAM,MAAM,CAAC,IAAK,OAAO,QAAQ,MAAM;EAC/E,GACA,EAAE,WAAW,KAAK,CACpB;;0BA1CK,UAAA,KAAS"}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { NumberProps } from "../../types/number.js";
|
|
2
|
-
import * as _$vue from "vue";
|
|
3
|
-
|
|
4
2
|
//#region src/components/number/number.vue.d.ts
|
|
5
|
-
declare const __VLS_export:
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<NumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NumberProps> & Readonly<{}>, {
|
|
6
4
|
format: "currency" | "percent" | "decimal";
|
|
7
5
|
duration: number;
|
|
8
|
-
}, {}, {}, {}, string,
|
|
6
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
9
7
|
declare const _default: typeof __VLS_export;
|
|
10
8
|
//#endregion
|
|
11
9
|
export { _default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"number-input.js","names":[],"sources":["../../../src/components/number-input/number-input.vue"],"sourcesContent":["<template>\n <u-input\n v-if=\"!readonly\"\n ref=\"inputRef\"\n :class=\"className\"\n :model-value=\"displayed\"\n v-bind=\"inputProps\"\n @update:model-value=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @keydown.stop=\"handleKeydown\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n :size=\"size\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n :clearable=\"false\"\n >\n <template #suffix v-if=\"hasSuffix\">\n <span :class=\"cls.e('suffix')\">\n <u-icon\n v-if=\"props.clearable\"\n :class=\"[cls.e('clear'), bem.is('hidden', !showClear)]\"\n :title=\"showClear ? '清除' : undefined\"\n @click.stop=\"handleClear\"\n >\n <Close />\n </u-icon>\n <span v-if=\"hasCustomSuffix\" :class=\"cls.e('suffix-content')\">\n {{ suffix }}\n <slot name=\"suffix\" />\n </span>\n </span>\n\n <div v-if=\"showStep\" :class=\"cls.e('step')\">\n <u-icon\n @click=\"increase\"\n v-ripple=\"!disabled && increasable\"\n :class=\"bem.is('disabled', disabled || !increasable)\"\n >\n <ArrowUp />\n </u-icon>\n <u-icon\n @click=\"decrease\"\n v-ripple=\"!disabled && reducible\"\n :class=\"bem.is('disabled', disabled || !reducible)\"\n >\n <ArrowDown />\n </u-icon>\n </div>\n </template>\n\n <template #prefix v-if=\"slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n </u-input>\n\n <template v-else>\n {{ generateDisplayed || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n, n, o, isUndef } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowDown, ArrowUp, Close } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, shallowRef, watch } from 'vue'\n\nimport type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'NumberInput' })\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n placeholder: '请输入',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\nconst emit = defineEmits<NumberInputEmits>()\n\nconst slots = defineSlots<{ prefix?: () => any; suffix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst inputProps = computed(() => {\n return o(props).pick(['disabled', 'placeholder', 'size', 'prefix'])\n})\n\nconst inputRef = shallowRef<InputExposed>()\n\nconst inputDom = computed(() => inputRef.value?.el)\n\nconst cls = bem('number-input')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value)]\n})\n\n/** 实际值 */\nconst model = defineModel<NumberInputProps['modelValue']>()\n\n// 展示值\nconst displayed = shallowRef('')\n\nconst focused = shallowRef(false)\nconst hovered = shallowRef(false)\n\nconst generateDisplayed = computed(() => {\n if (!displayed.value) return ''\n\n return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`\n})\n\nconst showStep = computed(() => props.step !== undefined && props.step !== false)\n\nconst hasCustomSuffix = computed(() => !!props.suffix || !!slots.suffix)\n\nconst hasSuffix = computed(() => props.clearable || hasCustomSuffix.value || showStep.value)\n\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && displayed.value !== '' && hovered.value\n})\n\n/** 步长 */\nconst stepVal = computed<number>(() => {\n const { step } = props\n if (step === undefined) return 1\n return typeof step === 'boolean' ? 1 : step\n})\n\n/** 是否可增 */\nconst increasable = computed(() => {\n const { max, multiple } = props\n if (isUndef(max) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue < max\n})\n\n/** 是否可减 */\nconst reducible = computed(() => {\n const { min, multiple } = props\n if (isUndef(min) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue > min\n})\n\n// 通过值和步长值计算默认的最大精度\nconst defaultMaxPrecision = computed(() => {\n const { multiple } = props\n // 如果存在倍数,基于原始值计算精度\n const rawValue =\n multiple && model.value !== undefined ? $n.div(model.value, multiple) : model.value\n return Math.max(\n String(rawValue).split('.')[1]?.length ?? 0,\n String(stepVal.value).split('.')[1]?.length ?? 0\n )\n})\n\n/**\n * 获取展示值\n * @param num 实际值\n */\nfunction getDisplayed(num?: number): string {\n if (!num && num !== 0) return ''\n\n const {\n currency,\n precision,\n minPrecision,\n // 如果没有指定最大精度那么设置默认为值和步长值中的较大值\n maxPrecision = defaultMaxPrecision.value,\n multiple\n } = props\n\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const displayValue = multiple ? $n.div(num, multiple) : num\n\n return currency\n ? n(displayValue).currency('CNY', { precision, minPrecision, maxPrecision })\n : n(displayValue).fixed(precision ?? { minPrecision, maxPrecision })\n}\n\nwatch(\n [model, focused, () => props.currency],\n ([modelValue, inputFocused]) => {\n if (inputFocused) return\n displayed.value = getDisplayed(modelValue)\n },\n { immediate: true }\n)\n\n/**\n * 解析展示值\n * @param str 展示值\n */\nfunction parseDisplayed(str: string): number | undefined {\n if (!str) return undefined\n\n // 将货币格式去掉再转化为数字\n const number = +str.replace(/,/g, '')\n const { multiple } = props\n\n // 如果解析失败,使用当前值作为回退\n // 如果存在倍数,需要先将 model.value 除以倍数得到原始值\n let result: number | undefined\n if (isNaN(number)) {\n if (model.value === undefined) return undefined\n result = multiple ? $n.div(model.value, multiple) : model.value\n } else {\n result = number\n }\n\n if (result === undefined) return undefined\n\n const { precision, maxPrecision, minPrecision } = props\n\n const fixedResult = +n(result).fixed(precision ?? { minPrecision, maxPrecision })\n\n // 如果存在倍数,将原始值乘以倍数返回实际值\n return multiple ? $n.mul(fixedResult, multiple) : fixedResult\n}\n\n/**\n * 获取有效值\n * @param val 值\n */\nfunction getValidValue<T extends undefined | number>(val: T): T {\n if (val === undefined) return val\n const { min, max, multiple } = props\n\n // 如果存在倍数,先将值除以倍数得到原始值进行验证,验证后再乘以倍数\n if (multiple) {\n const rawVal = $n.div(val, multiple)\n let validRawVal = rawVal\n if (min !== undefined && rawVal < min) validRawVal = min\n if (max !== undefined && rawVal > max) validRawVal = max\n return $n.mul(validRawVal, multiple) as T\n }\n\n if (min !== undefined && val < min) return min as T\n if (max !== undefined && val > max) return max as T\n return val\n}\n\nfunction handleUpdateModelValue(input: string): void {\n const newVal = parseDisplayed(input)\n model.value = getValidValue(newVal)\n displayed.value = input\n}\n\nfunction handleClear(): void {\n if (!showClear.value) return\n model.value = undefined\n displayed.value = ''\n emit('clear')\n}\n\n/**\n * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,\n * 主要用于在输入非数字的情况下的修正处理\n * @param input 输入的值\n */\nfunction handleChange() {\n emit('change', model.value)\n}\n\nconst tween = new Tween(\n { n: model.value ?? 0 },\n {\n onUpdate(state) {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n const { multiple } = props\n // 如果存在倍数,tween.state.n 存储的是原始值,需要乘以倍数后传给 getDisplayed\n const actualValue = multiple ? $n.mul(state.n, multiple) : state.n\n _rawInput.value = getDisplayed(actualValue)\n },\n // 动画进行的过程值有可能被改变, 因此在onComplete中确保还原的是原本的值\n onComplete() {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n _rawInput.value = getDisplayed(model.value)\n }\n }\n)\n\n/** 增 */\nfunction increase(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上加步长\n const newRawVal = $n.plus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.plus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\n/** 减 */\nfunction decrease(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上减步长\n const newRawVal = $n.minus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.minus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\nfunction handleKeydown(e: KeyboardEvent): void {\n if (!props.step) return\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n return increase()\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n return decrease()\n }\n}\n\nfunction handleFocus(): void {\n focused.value = true\n\n // 如果初始值和当前设置的精度不匹配则进行精度修正\n if (model.value === undefined) return\n const { precision, maxPrecision, minPrecision, multiple } = props\n\n if (multiple) {\n // 如果存在倍数,先除以倍数得到原始值进行精度修正,再乘以倍数\n const rawVal = $n.div(model.value, multiple)\n const fixedRawVal = +n(rawVal).fixed(precision ?? { maxPrecision, minPrecision })\n model.value = $n.mul(fixedRawVal, multiple)\n } else {\n model.value = +n(model.value).fixed(precision ?? { maxPrecision, minPrecision })\n }\n}\n\nfunction handleBlur(): void {\n focused.value = false\n model.value = props.modelValue\n}\n\nfunction handleMouseEnter(): void {\n hovered.value = true\n}\n\nfunction handleMouseLeave(): void {\n hovered.value = false\n}\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"number-input.js","names":[],"sources":["../../../src/components/number-input/number-input.vue"],"sourcesContent":["<template>\n <u-input\n v-if=\"!readonly\"\n ref=\"inputRef\"\n :class=\"className\"\n :model-value=\"displayed\"\n v-bind=\"inputProps\"\n @update:model-value=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @keydown.stop=\"handleKeydown\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n :size=\"size\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n :clearable=\"false\"\n >\n <template #suffix v-if=\"hasSuffix\">\n <span :class=\"cls.e('suffix')\">\n <u-icon\n v-if=\"props.clearable\"\n :class=\"[cls.e('clear'), bem.is('hidden', !showClear)]\"\n :title=\"showClear ? '清除' : undefined\"\n @click.stop=\"handleClear\"\n >\n <Close />\n </u-icon>\n <span v-if=\"hasCustomSuffix\" :class=\"cls.e('suffix-content')\">\n {{ suffix }}\n <slot name=\"suffix\" />\n </span>\n </span>\n\n <div v-if=\"showStep\" :class=\"cls.e('step')\">\n <u-icon\n @click=\"increase\"\n v-ripple=\"!disabled && increasable\"\n :class=\"bem.is('disabled', disabled || !increasable)\"\n >\n <ArrowUp />\n </u-icon>\n <u-icon\n @click=\"decrease\"\n v-ripple=\"!disabled && reducible\"\n :class=\"bem.is('disabled', disabled || !reducible)\"\n >\n <ArrowDown />\n </u-icon>\n </div>\n </template>\n\n <template #prefix v-if=\"slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n </u-input>\n\n <template v-else>\n {{ generateDisplayed || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n, n, o, isUndef } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowDown, ArrowUp, Close } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, shallowRef, watch } from 'vue'\n\nimport type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'NumberInput' })\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n placeholder: '请输入',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\nconst emit = defineEmits<NumberInputEmits>()\n\nconst slots = defineSlots<{ prefix?: () => any; suffix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst inputProps = computed(() => {\n return o(props).pick(['disabled', 'placeholder', 'size', 'prefix'])\n})\n\nconst inputRef = shallowRef<InputExposed>()\n\nconst inputDom = computed(() => inputRef.value?.el)\n\nconst cls = bem('number-input')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value)]\n})\n\n/** 实际值 */\nconst model = defineModel<NumberInputProps['modelValue']>()\n\n// 展示值\nconst displayed = shallowRef('')\n\nconst focused = shallowRef(false)\nconst hovered = shallowRef(false)\n\nconst generateDisplayed = computed(() => {\n if (!displayed.value) return ''\n\n return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`\n})\n\nconst showStep = computed(() => props.step !== undefined && props.step !== false)\n\nconst hasCustomSuffix = computed(() => !!props.suffix || !!slots.suffix)\n\nconst hasSuffix = computed(() => props.clearable || hasCustomSuffix.value || showStep.value)\n\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && displayed.value !== '' && hovered.value\n})\n\n/** 步长 */\nconst stepVal = computed<number>(() => {\n const { step } = props\n if (step === undefined) return 1\n return typeof step === 'boolean' ? 1 : step\n})\n\n/** 是否可增 */\nconst increasable = computed(() => {\n const { max, multiple } = props\n if (isUndef(max) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue < max\n})\n\n/** 是否可减 */\nconst reducible = computed(() => {\n const { min, multiple } = props\n if (isUndef(min) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue > min\n})\n\n// 通过值和步长值计算默认的最大精度\nconst defaultMaxPrecision = computed(() => {\n const { multiple } = props\n // 如果存在倍数,基于原始值计算精度\n const rawValue =\n multiple && model.value !== undefined ? $n.div(model.value, multiple) : model.value\n return Math.max(\n String(rawValue).split('.')[1]?.length ?? 0,\n String(stepVal.value).split('.')[1]?.length ?? 0\n )\n})\n\n/**\n * 获取展示值\n * @param num 实际值\n */\nfunction getDisplayed(num?: number): string {\n if (!num && num !== 0) return ''\n\n const {\n currency,\n precision,\n minPrecision,\n // 如果没有指定最大精度那么设置默认为值和步长值中的较大值\n maxPrecision = defaultMaxPrecision.value,\n multiple\n } = props\n\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const displayValue = multiple ? $n.div(num, multiple) : num\n\n return currency\n ? n(displayValue).currency('CNY', { precision, minPrecision, maxPrecision })\n : n(displayValue).fixed(precision ?? { minPrecision, maxPrecision })\n}\n\nwatch(\n [model, focused, () => props.currency],\n ([modelValue, inputFocused]) => {\n if (inputFocused) return\n displayed.value = getDisplayed(modelValue)\n },\n { immediate: true }\n)\n\n/**\n * 解析展示值\n * @param str 展示值\n */\nfunction parseDisplayed(str: string): number | undefined {\n if (!str) return undefined\n\n // 将货币格式去掉再转化为数字\n const number = +str.replace(/,/g, '')\n const { multiple } = props\n\n // 如果解析失败,使用当前值作为回退\n // 如果存在倍数,需要先将 model.value 除以倍数得到原始值\n let result: number | undefined\n if (isNaN(number)) {\n if (model.value === undefined) return undefined\n result = multiple ? $n.div(model.value, multiple) : model.value\n } else {\n result = number\n }\n\n if (result === undefined) return undefined\n\n const { precision, maxPrecision, minPrecision } = props\n\n const fixedResult = +n(result).fixed(precision ?? { minPrecision, maxPrecision })\n\n // 如果存在倍数,将原始值乘以倍数返回实际值\n return multiple ? $n.mul(fixedResult, multiple) : fixedResult\n}\n\n/**\n * 获取有效值\n * @param val 值\n */\nfunction getValidValue<T extends undefined | number>(val: T): T {\n if (val === undefined) return val\n const { min, max, multiple } = props\n\n // 如果存在倍数,先将值除以倍数得到原始值进行验证,验证后再乘以倍数\n if (multiple) {\n const rawVal = $n.div(val, multiple)\n let validRawVal = rawVal\n if (min !== undefined && rawVal < min) validRawVal = min\n if (max !== undefined && rawVal > max) validRawVal = max\n return $n.mul(validRawVal, multiple) as T\n }\n\n if (min !== undefined && val < min) return min as T\n if (max !== undefined && val > max) return max as T\n return val\n}\n\nfunction handleUpdateModelValue(input: string): void {\n const newVal = parseDisplayed(input)\n model.value = getValidValue(newVal)\n displayed.value = input\n}\n\nfunction handleClear(): void {\n if (!showClear.value) return\n model.value = undefined\n displayed.value = ''\n emit('clear')\n}\n\n/**\n * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,\n * 主要用于在输入非数字的情况下的修正处理\n * @param input 输入的值\n */\nfunction handleChange() {\n emit('change', model.value)\n}\n\nconst tween = new Tween(\n { n: model.value ?? 0 },\n {\n onUpdate(state) {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n const { multiple } = props\n // 如果存在倍数,tween.state.n 存储的是原始值,需要乘以倍数后传给 getDisplayed\n const actualValue = multiple ? $n.mul(state.n, multiple) : state.n\n _rawInput.value = getDisplayed(actualValue)\n },\n // 动画进行的过程值有可能被改变, 因此在onComplete中确保还原的是原本的值\n onComplete() {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n _rawInput.value = getDisplayed(model.value)\n }\n }\n)\n\n/** 增 */\nfunction increase(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上加步长\n const newRawVal = $n.plus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.plus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\n/** 减 */\nfunction decrease(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上减步长\n const newRawVal = $n.minus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.minus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\nfunction handleKeydown(e: KeyboardEvent): void {\n if (!props.step) return\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n return increase()\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n return decrease()\n }\n}\n\nfunction handleFocus(): void {\n focused.value = true\n\n // 如果初始值和当前设置的精度不匹配则进行精度修正\n if (model.value === undefined) return\n const { precision, maxPrecision, minPrecision, multiple } = props\n\n if (multiple) {\n // 如果存在倍数,先除以倍数得到原始值进行精度修正,再乘以倍数\n const rawVal = $n.div(model.value, multiple)\n const fixedRawVal = +n(rawVal).fixed(precision ?? { maxPrecision, minPrecision })\n model.value = $n.mul(fixedRawVal, multiple)\n } else {\n model.value = +n(model.value).fixed(precision ?? { maxPrecision, minPrecision })\n }\n}\n\nfunction handleBlur(): void {\n focused.value = false\n model.value = props.modelValue\n}\n\nfunction handleMouseEnter(): void {\n hovered.value = true\n}\n\nfunction handleMouseLeave(): void {\n hovered.value = false\n}\n</script>\n"],"mappings":"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"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { NumberInputProps } from "../../types/number-input.js";
|
|
2
|
-
import * as _$vue from "vue";
|
|
3
|
-
|
|
4
2
|
//#region src/components/number-input/number-input.vue.d.ts
|
|
5
3
|
type __VLS_Props = NumberInputProps;
|
|
6
4
|
type __VLS_Slots = {
|
|
@@ -11,13 +9,13 @@ type __VLS_ModelProps = {
|
|
|
11
9
|
/** 实际值 */modelValue?: NumberInputProps['modelValue'];
|
|
12
10
|
};
|
|
13
11
|
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
14
|
-
declare const __VLS_base:
|
|
12
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
15
13
|
"update:modelValue": (value: number | undefined) => any;
|
|
16
14
|
} & {
|
|
17
15
|
"update:modelValue": (value?: number | undefined) => any;
|
|
18
16
|
clear: () => any;
|
|
19
17
|
change: (value?: number | undefined) => any;
|
|
20
|
-
}, string,
|
|
18
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
21
19
|
"onUpdate:modelValue"?: ((value?: number | undefined) => any) | undefined;
|
|
22
20
|
onClear?: (() => any) | undefined;
|
|
23
21
|
onChange?: ((value?: number | undefined) => any) | undefined;
|
|
@@ -26,7 +24,7 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
|
|
|
26
24
|
readonly: boolean;
|
|
27
25
|
placeholder: string;
|
|
28
26
|
clearable: boolean;
|
|
29
|
-
}, {}, {}, {}, string,
|
|
27
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
30
28
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
31
29
|
declare const _default: typeof __VLS_export;
|
|
32
30
|
type __VLS_WithSlots<T, S> = T & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"number-range-input.js","names":[],"sources":["../../../src/components/number-range-input/number-range-input.vue"],"sourcesContent":["<template>\n <div v-if=\"!readonly\" :class=\"className\">\n <u-number-input\n v-model=\"startModel\"\n :placeholder=\"startPlaceholder\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :size=\"size\"\n v-bind=\"numberInputBind\"\n @change=\"emitChange\"\n />\n <span :class=\"cls.e('separator')\">{{ separator }}</span>\n <u-number-input\n v-model=\"endModel\"\n :placeholder=\"endPlaceholder\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :size=\"size\"\n v-bind=\"numberInputBind\"\n @change=\"emitChange\"\n />\n </div>\n\n <template v-else>\n {{ readonlyText || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n, $n, o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, getCurrentInstance, nextTick, onMounted, watch } from 'vue'\n\nimport type { NumberRangeInputEmits, NumberRangeInputProps, NumberRangeTuple } from '../../types'\nimport { UNumberInput } from '../number-input'\n\ndefineOptions({ name: 'NumberRangeInput' })\n\nconst props = withDefaults(defineProps<NumberRangeInputProps>(), {\n startPlaceholder: '请输入',\n endPlaceholder: '请输入',\n separator: '~',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<NumberRangeInputEmits>()\n\nconst inst = getCurrentInstance()\n\nfunction splitBound(): boolean {\n const p = inst?.vnode.props\n if (!p) return false\n return 'start' in p || 'onUpdate:start' in p || 'end' in p || 'onUpdate:end' in p\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 cls = bem('number-range-input')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value)]\n})\n\nconst model = defineModel<NumberRangeTuple>({ default: () => [undefined, undefined] })\n\nconst startRef = defineModel<number | undefined>('start')\nconst endRef = defineModel<number | undefined>('end')\n\nlet syncGuard = false\n\nfunction normalizeFromSplit(s: number | undefined, e: number | undefined): NumberRangeTuple {\n let nextS = s\n let nextE = e\n if (nextS !== undefined && nextE !== undefined && nextS > nextE) nextE = nextS\n return [nextS, nextE]\n}\n\nwatch(\n model,\n (t) => {\n if (syncGuard) return\n syncGuard = true\n const tuple = t ?? [undefined, undefined]\n if (startRef.value !== tuple[0]) startRef.value = tuple[0]\n if (endRef.value !== tuple[1]) endRef.value = tuple[1]\n nextTick(() => {\n syncGuard = false\n })\n },\n { deep: true }\n)\n\nwatch(\n [startRef, endRef],\n () => {\n if (!splitBound() || syncGuard) return\n syncGuard = true\n const normalized = normalizeFromSplit(startRef.value, endRef.value)\n const cur = model.value ?? [undefined, undefined]\n if (cur[0] !== normalized[0] || cur[1] !== normalized[1]) {\n model.value = normalized\n }\n nextTick(() => {\n syncGuard = false\n })\n },\n { deep: true }\n)\n\nonMounted(() => {\n if (!splitBound()) return\n const cur = model.value ?? [undefined, undefined]\n const hasModel = cur[0] !== undefined || cur[1] !== undefined\n if (hasModel) return\n const normalized = normalizeFromSplit(startRef.value, endRef.value)\n if (cur[0] !== normalized[0] || cur[1] !== normalized[1]) {\n syncGuard = true\n model.value = normalized\n nextTick(() => {\n syncGuard = false\n })\n }\n})\n\nconst numberInputBind = computed(() => {\n return o(props).pick([\n 'clearable',\n 'prefix',\n 'suffix',\n 'step',\n 'min',\n 'max',\n 'currency',\n 'precision',\n 'minPrecision',\n 'maxPrecision',\n 'multiple'\n ])\n})\n\nconst startModel = computed({\n get(): number | undefined {\n return model.value?.[0]\n },\n set(v: number | undefined) {\n const cur = model.value ?? [undefined, undefined]\n const end = cur[1]\n let nextEnd = end\n if (v !== undefined && end !== undefined && v > end) nextEnd = v\n model.value = [v, nextEnd]\n }\n})\n\nconst endModel = computed({\n get(): number | undefined {\n return model.value?.[1]\n },\n set(v: number | undefined) {\n const cur = model.value ?? [undefined, undefined]\n const start = cur[0]\n let nextStart = start\n if (v !== undefined && start !== undefined && v < start) nextStart = v\n model.value = [nextStart, v]\n }\n})\n\nfunction formatNumberPart(num: number): string {\n const { currency, precision, minPrecision, maxPrecision, multiple } = props\n\n const displayValue = multiple ? $n.div(num, multiple) : num\n\n return currency\n ? n(displayValue).currency('CNY', { precision, minPrecision, maxPrecision })\n : n(displayValue).fixed(precision ?? { minPrecision, maxPrecision })\n}\n\nconst readonlyText = computed(() => {\n const [s, e] = model.value ?? [undefined, undefined]\n if (s === undefined && e === undefined) return ''\n const p = props.prefix ?? ''\n const sfx = props.suffix ?? ''\n const sep = props.separator ?? '~'\n const a = s === undefined ? '—' : formatNumberPart(s)\n const b = e === undefined ? '—' : formatNumberPart(e)\n return `${p}${a} ${sep} ${b}${sfx}`\n})\n\nfunction emitChange(): void {\n emit('change', model.value ?? [undefined, undefined])\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,MAAM,QAAQ;EASd,MAAM,OAAO;EAEb,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"number-range-input.js","names":[],"sources":["../../../src/components/number-range-input/number-range-input.vue"],"sourcesContent":["<template>\n <div v-if=\"!readonly\" :class=\"className\">\n <u-number-input\n v-model=\"startModel\"\n :placeholder=\"startPlaceholder\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :size=\"size\"\n v-bind=\"numberInputBind\"\n @change=\"emitChange\"\n />\n <span :class=\"cls.e('separator')\">{{ separator }}</span>\n <u-number-input\n v-model=\"endModel\"\n :placeholder=\"endPlaceholder\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :size=\"size\"\n v-bind=\"numberInputBind\"\n @change=\"emitChange\"\n />\n </div>\n\n <template v-else>\n {{ readonlyText || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n, $n, o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, getCurrentInstance, nextTick, onMounted, watch } from 'vue'\n\nimport type { NumberRangeInputEmits, NumberRangeInputProps, NumberRangeTuple } from '../../types'\nimport { UNumberInput } from '../number-input'\n\ndefineOptions({ name: 'NumberRangeInput' })\n\nconst props = withDefaults(defineProps<NumberRangeInputProps>(), {\n startPlaceholder: '请输入',\n endPlaceholder: '请输入',\n separator: '~',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<NumberRangeInputEmits>()\n\nconst inst = getCurrentInstance()\n\nfunction splitBound(): boolean {\n const p = inst?.vnode.props\n if (!p) return false\n return 'start' in p || 'onUpdate:start' in p || 'end' in p || 'onUpdate:end' in p\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 cls = bem('number-range-input')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value)]\n})\n\nconst model = defineModel<NumberRangeTuple>({ default: () => [undefined, undefined] })\n\nconst startRef = defineModel<number | undefined>('start')\nconst endRef = defineModel<number | undefined>('end')\n\nlet syncGuard = false\n\nfunction normalizeFromSplit(s: number | undefined, e: number | undefined): NumberRangeTuple {\n let nextS = s\n let nextE = e\n if (nextS !== undefined && nextE !== undefined && nextS > nextE) nextE = nextS\n return [nextS, nextE]\n}\n\nwatch(\n model,\n (t) => {\n if (syncGuard) return\n syncGuard = true\n const tuple = t ?? [undefined, undefined]\n if (startRef.value !== tuple[0]) startRef.value = tuple[0]\n if (endRef.value !== tuple[1]) endRef.value = tuple[1]\n nextTick(() => {\n syncGuard = false\n })\n },\n { deep: true }\n)\n\nwatch(\n [startRef, endRef],\n () => {\n if (!splitBound() || syncGuard) return\n syncGuard = true\n const normalized = normalizeFromSplit(startRef.value, endRef.value)\n const cur = model.value ?? [undefined, undefined]\n if (cur[0] !== normalized[0] || cur[1] !== normalized[1]) {\n model.value = normalized\n }\n nextTick(() => {\n syncGuard = false\n })\n },\n { deep: true }\n)\n\nonMounted(() => {\n if (!splitBound()) return\n const cur = model.value ?? [undefined, undefined]\n const hasModel = cur[0] !== undefined || cur[1] !== undefined\n if (hasModel) return\n const normalized = normalizeFromSplit(startRef.value, endRef.value)\n if (cur[0] !== normalized[0] || cur[1] !== normalized[1]) {\n syncGuard = true\n model.value = normalized\n nextTick(() => {\n syncGuard = false\n })\n }\n})\n\nconst numberInputBind = computed(() => {\n return o(props).pick([\n 'clearable',\n 'prefix',\n 'suffix',\n 'step',\n 'min',\n 'max',\n 'currency',\n 'precision',\n 'minPrecision',\n 'maxPrecision',\n 'multiple'\n ])\n})\n\nconst startModel = computed({\n get(): number | undefined {\n return model.value?.[0]\n },\n set(v: number | undefined) {\n const cur = model.value ?? [undefined, undefined]\n const end = cur[1]\n let nextEnd = end\n if (v !== undefined && end !== undefined && v > end) nextEnd = v\n model.value = [v, nextEnd]\n }\n})\n\nconst endModel = computed({\n get(): number | undefined {\n return model.value?.[1]\n },\n set(v: number | undefined) {\n const cur = model.value ?? [undefined, undefined]\n const start = cur[0]\n let nextStart = start\n if (v !== undefined && start !== undefined && v < start) nextStart = v\n model.value = [nextStart, v]\n }\n})\n\nfunction formatNumberPart(num: number): string {\n const { currency, precision, minPrecision, maxPrecision, multiple } = props\n\n const displayValue = multiple ? $n.div(num, multiple) : num\n\n return currency\n ? n(displayValue).currency('CNY', { precision, minPrecision, maxPrecision })\n : n(displayValue).fixed(precision ?? { minPrecision, maxPrecision })\n}\n\nconst readonlyText = computed(() => {\n const [s, e] = model.value ?? [undefined, undefined]\n if (s === undefined && e === undefined) return ''\n const p = props.prefix ?? ''\n const sfx = props.suffix ?? ''\n const sep = props.separator ?? '~'\n const a = s === undefined ? '—' : formatNumberPart(s)\n const b = e === undefined ? '—' : formatNumberPart(e)\n return `${p}${a} ${sep} ${b}${sfx}`\n})\n\nfunction emitChange(): void {\n emit('change', model.value ?? [undefined, undefined])\n}\n</script>\n"],"mappings":"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"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { NumberRangeInputProps, NumberRangeTuple } from "../../types/number-range-input.js";
|
|
2
|
-
import * as _$vue from "vue";
|
|
3
|
-
|
|
4
2
|
//#region src/components/number-range-input/number-range-input.vue.d.ts
|
|
5
3
|
type __VLS_Props = NumberRangeInputProps;
|
|
6
4
|
type __VLS_ModelProps = {
|
|
@@ -9,7 +7,7 @@ type __VLS_ModelProps = {
|
|
|
9
7
|
'end'?: number | undefined;
|
|
10
8
|
};
|
|
11
9
|
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
12
|
-
declare const __VLS_export:
|
|
10
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
13
11
|
"update:modelValue": (value: NumberRangeTuple) => any;
|
|
14
12
|
"update:start": (value: number | undefined) => any;
|
|
15
13
|
"update:end": (value: number | undefined) => any;
|
|
@@ -18,7 +16,7 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
|
|
|
18
16
|
change: (value: NumberRangeTuple) => any;
|
|
19
17
|
"update:start": (value: number | undefined) => any;
|
|
20
18
|
"update:end": (value: number | undefined) => any;
|
|
21
|
-
}, string,
|
|
19
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
20
|
"onUpdate:modelValue"?: ((value: NumberRangeTuple) => any) | undefined;
|
|
23
21
|
onChange?: ((value: NumberRangeTuple) => any) | undefined;
|
|
24
22
|
"onUpdate:start"?: ((value: number | undefined) => any) | undefined;
|
|
@@ -27,10 +25,10 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
|
|
|
27
25
|
disabled: boolean;
|
|
28
26
|
readonly: boolean;
|
|
29
27
|
clearable: boolean;
|
|
28
|
+
separator: string;
|
|
30
29
|
startPlaceholder: string;
|
|
31
30
|
endPlaceholder: string;
|
|
32
|
-
|
|
33
|
-
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
31
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
34
32
|
declare const _default: typeof __VLS_export;
|
|
35
33
|
//#endregion
|
|
36
34
|
export { _default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paginator.js","names":[],"sources":["../../../src/components/paginator/paginator.vue"],"sourcesContent":["<template>\n <div :class=\"[cls.b, cls.m(size)]\" ref=\"paginatorRef\">\n <div>共 {{ total }} 条</div>\n\n <u-select\n :class=\"cls.e('size-select')\"\n v-model=\"pageSize\"\n size=\"small\"\n :options=\"sizeOptions\"\n :clearable=\"false\"\n @change=\"handleChangePageSize\"\n />\n\n <ul :class=\"[cls.e('pages')]\" v-if=\"!simple\">\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', preDisabled)]\"\n @click=\"handleJumpToFirst\"\n @mouseenter=\"hovered.first = true\"\n @mouseleave=\"hovered.first = false\"\n v-ripple=\"!preDisabled\"\n >\n <span v-if=\"hovered.first\">1</span>\n <UIcon v-else><DArrowLeft /></UIcon>\n </li>\n\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', pageNumber === 1)]\"\n @click=\"handleJumpToPrev\"\n v-ripple=\"!preDisabled\"\n >\n <UIcon><ArrowLeft /></UIcon>\n </li>\n\n <li\n v-for=\"num in pageNumbers\"\n :key=\"num\"\n :class=\"[cls.e('btn'), bem.is('active', pageNumber === num)]\"\n @click=\"handleChangePageNumber(num)\"\n v-ripple\n >\n {{ num }}\n </li>\n\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', nextDisabled)]\"\n @click=\"handleJumpToNext\"\n v-ripple=\"!nextDisabled\"\n >\n <UIcon><ArrowRight /></UIcon>\n </li>\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', nextDisabled)]\"\n @click=\"handleJumpToLast\"\n @mouseenter=\"hovered.last = true\"\n @mouseleave=\"hovered.last = false\"\n v-ripple=\"!nextDisabled\"\n >\n <span v-if=\"hovered.last\">{{ totalPages }}</span>\n <UIcon v-else><DArrowRight /></UIcon>\n </li>\n </ul>\n\n <div :class=\"cls.e('jumper')\">\n <span>前往</span>\n <u-number-input\n :class=\"cls.e('page-input')\"\n size=\"small\"\n :min=\"1\"\n :max=\"totalPages\"\n :precision=\"0\"\n :model-value=\"pageNumber\"\n :clearable=\"false\"\n @keyup.enter=\"handleKeyEnter\"\n @change=\"pageNumber = $event!\"\n />\n <span>/ {{ totalPages }}</span>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n } from '@cat-kit/core'\nimport { useConfig, useFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, reactive, shallowRef } from 'vue'\n\nimport type { PaginatorProps, PaginatorEmits, _PaginatorExposed, ComponentSize } from '../../types'\nimport { UIcon } from '../icon'\nimport { UNumberInput } from '../number-input'\nimport { USelect } from '../select'\n\ndefineOptions({ name: 'Paginator' })\n\nconst { config } = useConfig()\n\nconst props = withDefaults(defineProps<PaginatorProps>(), { total: 0 })\n\nconst emit = defineEmits<PaginatorEmits>()\n\nconst cls = bem('paginator')\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst pageNumber = defineModel<number>('pageNumber', { default: 1 })\n\nconst pageSize = defineModel<number>('pageSize', { default: 10 })\n\nfunction emitPageSize(value: number) {\n emit('change:pageSize', value)\n}\n\nfunction emitPageNumber(value: number) {\n emit('change:pageNumber', value)\n}\n\nconst handleChangePageSize = (size?: Record<string, any>) => {\n emitPageSize(size?.value)\n pageNumber.value = 1\n}\n\nfunction handleChangePageNumber(num: number) {\n if (props.pageNumber === num) return\n pageNumber.value = num\n emitPageNumber(pageNumber.value)\n}\n\nconst currentSize = computed(() => {\n return props.pageSize ?? config.paginator.pageSize\n})\n\n/** 完整页码 */\nconst totalPages = computed(() => {\n return Math.ceil(props.total / currentSize.value)\n})\n\nconst sizeOptions = computed(() => {\n return (props.pageSizeOptions ?? config.paginator.pageSizeOptions).map((value) => {\n return { label: `${value}条`, value }\n })\n})\n\n/** 做多显示5个页码 */\nconst pageNumbers = computed(() => {\n const startPageNum = n(pageNumber.value - 2).range(1, Math.max(totalPages.value - 4, 1))\n\n return Array.from({ length: Math.min(totalPages.value, 5) }).map(\n (_, index) => startPageNum + index\n )\n})\n\nconst preDisabled = computed(() => {\n return pageNumber.value <= 1\n})\nconst nextDisabled = computed(() => {\n return pageNumber.value >= totalPages.value\n})\n\nfunction handleJumpToFirst() {\n if (preDisabled.value) return\n pageNumber.value = 1\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToLast() {\n if (nextDisabled.value) return\n pageNumber.value = totalPages.value\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToPrev() {\n if (preDisabled.value) return\n pageNumber.value = pageNumber.value - 1\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToNext() {\n if (nextDisabled.value) return\n\n pageNumber.value = pageNumber.value + 1\n emitPageNumber(pageNumber.value)\n}\n\nfunction handleKeyEnter(e: KeyboardEvent) {\n const target = e.target as HTMLInputElement\n const val = +target.value\n if (!isNaN(val) && val > 0 && val <= totalPages.value) {\n pageNumber.value = val\n emitPageNumber(pageNumber.value)\n }\n}\n\n/** 鼠标停留位置 */\nconst hovered = reactive({ first: false, last: false })\n\nconst paginatorRef = shallowRef<HTMLElement>()\n\ndefineExpose<_PaginatorExposed>({ el: paginatorRef })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+FA,MAAM,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"paginator.js","names":[],"sources":["../../../src/components/paginator/paginator.vue"],"sourcesContent":["<template>\n <div :class=\"[cls.b, cls.m(size)]\" ref=\"paginatorRef\">\n <div>共 {{ total }} 条</div>\n\n <u-select\n :class=\"cls.e('size-select')\"\n v-model=\"pageSize\"\n size=\"small\"\n :options=\"sizeOptions\"\n :clearable=\"false\"\n @change=\"handleChangePageSize\"\n />\n\n <ul :class=\"[cls.e('pages')]\" v-if=\"!simple\">\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', preDisabled)]\"\n @click=\"handleJumpToFirst\"\n @mouseenter=\"hovered.first = true\"\n @mouseleave=\"hovered.first = false\"\n v-ripple=\"!preDisabled\"\n >\n <span v-if=\"hovered.first\">1</span>\n <UIcon v-else><DArrowLeft /></UIcon>\n </li>\n\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', pageNumber === 1)]\"\n @click=\"handleJumpToPrev\"\n v-ripple=\"!preDisabled\"\n >\n <UIcon><ArrowLeft /></UIcon>\n </li>\n\n <li\n v-for=\"num in pageNumbers\"\n :key=\"num\"\n :class=\"[cls.e('btn'), bem.is('active', pageNumber === num)]\"\n @click=\"handleChangePageNumber(num)\"\n v-ripple\n >\n {{ num }}\n </li>\n\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', nextDisabled)]\"\n @click=\"handleJumpToNext\"\n v-ripple=\"!nextDisabled\"\n >\n <UIcon><ArrowRight /></UIcon>\n </li>\n <li\n :class=\"[cls.e('btn'), bem.is('disabled', nextDisabled)]\"\n @click=\"handleJumpToLast\"\n @mouseenter=\"hovered.last = true\"\n @mouseleave=\"hovered.last = false\"\n v-ripple=\"!nextDisabled\"\n >\n <span v-if=\"hovered.last\">{{ totalPages }}</span>\n <UIcon v-else><DArrowRight /></UIcon>\n </li>\n </ul>\n\n <div :class=\"cls.e('jumper')\">\n <span>前往</span>\n <u-number-input\n :class=\"cls.e('page-input')\"\n size=\"small\"\n :min=\"1\"\n :max=\"totalPages\"\n :precision=\"0\"\n :model-value=\"pageNumber\"\n :clearable=\"false\"\n @keyup.enter=\"handleKeyEnter\"\n @change=\"pageNumber = $event!\"\n />\n <span>/ {{ totalPages }}</span>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n } from '@cat-kit/core'\nimport { useConfig, useFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, reactive, shallowRef } from 'vue'\n\nimport type { PaginatorProps, PaginatorEmits, _PaginatorExposed, ComponentSize } from '../../types'\nimport { UIcon } from '../icon'\nimport { UNumberInput } from '../number-input'\nimport { USelect } from '../select'\n\ndefineOptions({ name: 'Paginator' })\n\nconst { config } = useConfig()\n\nconst props = withDefaults(defineProps<PaginatorProps>(), { total: 0 })\n\nconst emit = defineEmits<PaginatorEmits>()\n\nconst cls = bem('paginator')\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst pageNumber = defineModel<number>('pageNumber', { default: 1 })\n\nconst pageSize = defineModel<number>('pageSize', { default: 10 })\n\nfunction emitPageSize(value: number) {\n emit('change:pageSize', value)\n}\n\nfunction emitPageNumber(value: number) {\n emit('change:pageNumber', value)\n}\n\nconst handleChangePageSize = (size?: Record<string, any>) => {\n emitPageSize(size?.value)\n pageNumber.value = 1\n}\n\nfunction handleChangePageNumber(num: number) {\n if (props.pageNumber === num) return\n pageNumber.value = num\n emitPageNumber(pageNumber.value)\n}\n\nconst currentSize = computed(() => {\n return props.pageSize ?? config.paginator.pageSize\n})\n\n/** 完整页码 */\nconst totalPages = computed(() => {\n return Math.ceil(props.total / currentSize.value)\n})\n\nconst sizeOptions = computed(() => {\n return (props.pageSizeOptions ?? config.paginator.pageSizeOptions).map((value) => {\n return { label: `${value}条`, value }\n })\n})\n\n/** 做多显示5个页码 */\nconst pageNumbers = computed(() => {\n const startPageNum = n(pageNumber.value - 2).range(1, Math.max(totalPages.value - 4, 1))\n\n return Array.from({ length: Math.min(totalPages.value, 5) }).map(\n (_, index) => startPageNum + index\n )\n})\n\nconst preDisabled = computed(() => {\n return pageNumber.value <= 1\n})\nconst nextDisabled = computed(() => {\n return pageNumber.value >= totalPages.value\n})\n\nfunction handleJumpToFirst() {\n if (preDisabled.value) return\n pageNumber.value = 1\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToLast() {\n if (nextDisabled.value) return\n pageNumber.value = totalPages.value\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToPrev() {\n if (preDisabled.value) return\n pageNumber.value = pageNumber.value - 1\n emitPageNumber(pageNumber.value)\n}\nfunction handleJumpToNext() {\n if (nextDisabled.value) return\n\n pageNumber.value = pageNumber.value + 1\n emitPageNumber(pageNumber.value)\n}\n\nfunction handleKeyEnter(e: KeyboardEvent) {\n const target = e.target as HTMLInputElement\n const val = +target.value\n if (!isNaN(val) && val > 0 && val <= totalPages.value) {\n pageNumber.value = val\n emitPageNumber(pageNumber.value)\n }\n}\n\n/** 鼠标停留位置 */\nconst hovered = reactive({ first: false, last: false })\n\nconst paginatorRef = shallowRef<HTMLElement>()\n\ndefineExpose<_PaginatorExposed>({ el: paginatorRef })\n</script>\n"],"mappings":"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"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { PaginatorProps, _PaginatorExposed } from "../../types/paginator.js";
|
|
2
|
-
import * as _$vue from "vue";
|
|
3
|
-
|
|
4
2
|
//#region src/components/paginator/paginator.vue.d.ts
|
|
5
3
|
type __VLS_Props = PaginatorProps;
|
|
6
4
|
type __VLS_ModelProps = {
|
|
@@ -8,7 +6,7 @@ type __VLS_ModelProps = {
|
|
|
8
6
|
'pageSize'?: number;
|
|
9
7
|
};
|
|
10
8
|
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
11
|
-
declare const __VLS_export:
|
|
9
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, _PaginatorExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
12
10
|
"update:pageNumber": (value: number) => any;
|
|
13
11
|
"update:pageSize": (value: number) => any;
|
|
14
12
|
} & {
|
|
@@ -16,14 +14,14 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, _PaginatorE
|
|
|
16
14
|
"update:pageSize": (value: number) => any;
|
|
17
15
|
"change:pageNumber": (value: number) => any;
|
|
18
16
|
"change:pageSize": (value: number) => any;
|
|
19
|
-
}, string,
|
|
17
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
20
18
|
"onUpdate:pageNumber"?: ((value: number) => any) | undefined;
|
|
21
19
|
"onUpdate:pageSize"?: ((value: number) => any) | undefined;
|
|
22
20
|
"onChange:pageNumber"?: ((value: number) => any) | undefined;
|
|
23
21
|
"onChange:pageSize"?: ((value: number) => any) | undefined;
|
|
24
22
|
}>, {
|
|
25
23
|
total: number;
|
|
26
|
-
}, {}, {}, {}, string,
|
|
24
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
27
25
|
declare const _default: typeof __VLS_export;
|
|
28
26
|
//#endregion
|
|
29
27
|
export { _default };
|
|
@@ -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,
|
|
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":"di.js","names":[],"sources":["../../../src/components/palette/di.ts"],"sourcesContent":["import type { UserAction } from '@veltra/compositions'\nimport type { BEM } from '@veltra/utils'\nimport type { InjectionKey, Ref, ComputedRef } from 'vue'\n\nimport type { PaletteHSV, PaletteRGB } from '../../types'\n\nexport const PaletteDIKey: InjectionKey<{\n cls: BEM<'palette', 'u-'>\n /** 色调 RGB 值 */\n hueRGB: ComputedRef<PaletteRGB>\n /** 色调 饱和度 亮度 */\n HSV: PaletteHSV\n /** RGB 值 */\n RGB: ComputedRef<PaletteRGB>\n /** 透明度 */\n alpha: Ref<number>\n /** 将函数包装为用户动作(阻断 modelValue 回流副作用) */\n userAction: UserAction\n /** 当前是否处于用户动作期间 */\n isUserActive: () => boolean\n /** 更新色调 */\n updateHue: (deg: number) => void\n /** 更新调色盘透明度 */\n updateAlpha: (alpha: number) => void\n /** 更新饱和度 亮度 */\n updateSV: (sv: { s: number; v: number }) => void\n}> = Symbol('PaletteDIKey')\n"],"mappings":";AAMA,MAAa,eAoBR,OAAO,
|
|
1
|
+
{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/palette/di.ts"],"sourcesContent":["import type { UserAction } from '@veltra/compositions'\nimport type { BEM } from '@veltra/utils'\nimport type { InjectionKey, Ref, ComputedRef } from 'vue'\n\nimport type { PaletteHSV, PaletteRGB } from '../../types'\n\nexport const PaletteDIKey: InjectionKey<{\n cls: BEM<'palette', 'u-'>\n /** 色调 RGB 值 */\n hueRGB: ComputedRef<PaletteRGB>\n /** 色调 饱和度 亮度 */\n HSV: PaletteHSV\n /** RGB 值 */\n RGB: ComputedRef<PaletteRGB>\n /** 透明度 */\n alpha: Ref<number>\n /** 将函数包装为用户动作(阻断 modelValue 回流副作用) */\n userAction: UserAction\n /** 当前是否处于用户动作期间 */\n isUserActive: () => boolean\n /** 更新色调 */\n updateHue: (deg: number) => void\n /** 更新调色盘透明度 */\n updateAlpha: (alpha: number) => void\n /** 更新饱和度 亮度 */\n updateSV: (sv: { s: number; v: number }) => void\n}> = Symbol('PaletteDIKey')\n"],"mappings":";AAMA,MAAa,eAoBR,OAAO,cAAc"}
|
|
@@ -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({ name: 'PaletteAlpha' })\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({ init })\n</script>\n"],"mappings":";;;;;;;;EAgBA,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({ name: 'PaletteAlpha' })\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({ init })\n</script>\n"],"mappings":";;;;;;;;EAgBA,MAAM,EAAE,KAAK,aAAa,QAAQ,OAAO,YAAY,iBAAiB,OAAO,YAAY;EAEzF,MAAM,WAAW,WAAwB;EAEzC,MAAM,uBAAuB,WAAW,CAAC;EAEzC,MAAM,kBAAkB,eAAe;GACrC,OAAO,EAAE,WAAW,cAAc,qBAAqB,MAAM,KAAK;EACpE,CAAC;EAED,IAAI,aAAa;EACjB,MAAM,SAAS,CAAC,GAAG,CAAC;EAEpB,SAAS,gBAAgB;GACvB,aAAa,SAAS,OAAO,eAAe;GAC5C,OAAO,KAAK;EACd;EAEA,MAAM,gBAAgB,YAAY,YAAoB;GACpD,qBAAqB,QAAQ;GAC7B,YAAY,aAAa,IAAI,UAAU,aAAa,CAAC;EACvD,CAAC;EAED,MAAM,eAAe,QAAQ;GAC3B,QAAQ;GACR;GACA,OAAO,EAAE,WAAW;IAClB,cAAc,OAAO;GACvB;GACA,YAAY,GAAG;IACb,cAAc;IAEd,aAAa,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAC;IAE1C,cAAc,EAAE,OAAO;GACzB;EACF,CAAC;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;EACpF,CAAC;EAED,SAAS,OAAa;GACpB,cAAc;GACd,qBAAqB,QAAQ,aAAa,IAAI,aAAa,MAAM,QAAQ;EAC3E;EAEA,gBAAgB;GACd,KAAK;EACP,CAAC;EAED,MACE,QACC,kBAAkB;GACjB,IAAI,aAAa,GAAG;GACpB,qBAAqB,QAAQ,aAAa,IAAI,aAAa,gBAAgB;EAC7E,GACA,EAAE,OAAO,OAAO,CAClB;EAEA,SAAa,EAAE,KAAK,CAAC;;uBA5EnB,mBAIM,OAAA;IAJA,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,OAAA,CAAA;aAAe;IAAJ,KAAI;OAC/B,mBAA6E,OAAA;IAAvE,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,UAAA,CAAA;IAAe,OAAK,eAAA,EAAA,YAAgB,cAAA,MAAa,CAAA;gBAEnE,mBAAgF,QAAA;IAAzE,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,aAAA,CAAA;IAAkB,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;IAAE,OAAK,eAAE,gBAAA,KAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette-color-switch.js","names":[],"sources":["../../../src/components/palette/palette-color-switch.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('color-switch')\">\n <div :class=\"cls.e('color-type')\">HEX(A)</div>\n\n <u-input\n :class=\"cls.e('color-hexa')\"\n :clearable=\"false\"\n :model-value=\"color\"\n @change=\"handleUpdateColor\"\n :pattern=\"pattern\"\n />\n\n <u-button text type=\"primary\" :class=\"cls.e('clear-btn')\" @click=\"emit('clear')\">\n 清除\n </u-button>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject } from 'vue'\n\nimport { UButton } from '../button'\nimport { UInput } from '../input'\nimport { PaletteDIKey } from './di'\n\ndefineProps<{ color?: string }>()\n\nconst emit = defineEmits(['clear', 'update:color'])\n\nconst { cls } = inject(PaletteDIKey)!\n\nconst pattern = /^#([0-9a-fA-F]{3,4}){1,2}$/\n\nconst handleUpdateColor = (value: string) => {\n emit('update:color', value)\n}\n</script>\n"],"mappings":";;;;;;;;;;EA2BA,MAAM,OAAO;EAEb,MAAM,EAAE,QAAQ,OAAO,
|
|
1
|
+
{"version":3,"file":"palette-color-switch.js","names":[],"sources":["../../../src/components/palette/palette-color-switch.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('color-switch')\">\n <div :class=\"cls.e('color-type')\">HEX(A)</div>\n\n <u-input\n :class=\"cls.e('color-hexa')\"\n :clearable=\"false\"\n :model-value=\"color\"\n @change=\"handleUpdateColor\"\n :pattern=\"pattern\"\n />\n\n <u-button text type=\"primary\" :class=\"cls.e('clear-btn')\" @click=\"emit('clear')\">\n 清除\n </u-button>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject } from 'vue'\n\nimport { UButton } from '../button'\nimport { UInput } from '../input'\nimport { PaletteDIKey } from './di'\n\ndefineProps<{ color?: string }>()\n\nconst emit = defineEmits(['clear', 'update:color'])\n\nconst { cls } = inject(PaletteDIKey)!\n\nconst pattern = /^#([0-9a-fA-F]{3,4}){1,2}$/\n\nconst handleUpdateColor = (value: string) => {\n emit('update:color', value)\n}\n</script>\n"],"mappings":";;;;;;;;;;EA2BA,MAAM,OAAO;EAEb,MAAM,EAAE,QAAQ,OAAO,YAAY;EAEnC,MAAM,UAAU;EAEhB,MAAM,qBAAqB,UAAkB;GAC3C,KAAK,gBAAgB,KAAK;EAC5B;;uBAlCE,mBAcM,OAAA,EAdA,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,cAAA,CAAA,EAAA,GAAA;IAChB,mBAA8C,OAAA,EAAxC,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,YAAA,CAAA,EAAA,GAAgB,UAAM,CAAA;IAExC,YAME,MAAA,aAAA,GAAA;KALC,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,YAAA,CAAA;KACZ,WAAW;KACX,eAAa,QAAA;KACb,UAAQ;KACC;;IAGZ,YAEW,MAAA,WAAA,GAAA;KAFD,MAAA;KAAK,MAAK;KAAW,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,WAAA,CAAA;KAAgB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;;4BAEtE,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFiF,QAEjF,EAAA,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({ name: 'PaletteHue' })\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({ init })\n</script>\n"],"mappings":";;;;;;;;EAeA,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({ name: 'PaletteHue' })\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({ init })\n</script>\n"],"mappings":";;;;;;;;EAeA,MAAM,EAAE,KAAK,WAAW,KAAK,eAAe,OAAO,YAAY;EAE/D,MAAM,SAAS,WAAwB;EAEvC,MAAM,aAAa,WAAW,CAAC;EAC/B,IAAI,cAAc;EAElB,MAAM,gBAAgB,eAAe;GACnC,OAAO,EAAE,WAAW,cAAc,WAAW,MAAM,KAAK;EAC1D,CAAC;EAED,MAAM,SAAS,CAAC,GAAG,CAAC;EAEpB,SAAS,iBAAiB;GACxB,cAAc,OAAO,OAAO,eAAe;GAC3C,OAAO,KAAK;EACd;EAEA,MAAM,gBAAgB,YAAY,YAAoB;GACpD,WAAW,QAAQ;GACnB,UAAU,KAAK,MAAO,UAAU,cAAe,GAAG,CAAC;EACrD,CAAC;EAED,MAAM,gBAAgB,QAAQ;GAC5B,QAAQ;GACR;GACA,OAAO,EAAE,WAAW;IAClB,cAAc,OAAO;GACvB;GACA,YAAY,GAAG;IACb,eAAe;IAEf,cAAc,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAC;IAE3C,cAAc,EAAE,OAAO;GACzB;EACF,CAAC;EAED,SAAS,OAAa;GACpB,eAAe;GACf,WAAW,QAAS,cAAc,IAAI,IAAK;EAC7C;EAEA,gBAAgB;GACd,KAAK;EACP,CAAC;EAED,SAAa,EAAE,KAAK,CAAC;;uBA7DnB,mBAEM,OAAA;IAFA,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,KAAA,CAAA;aAAa;IAAJ,KAAI;OAC7B,mBAA4E,QAAA;IAArE,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,WAAA,CAAA;IAAgB,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;IAAE,OAAK,eAAE,cAAA,KAAa"}
|
|
@@ -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({ name: 'PaletteSV' })\n\nconst { cls, hueRGB, HSV, updateSV, userAction } = inject(PaletteDIKey)!\n\nconst svRef = shallowRef<HTMLDivElement>()\n\nconst canvasSize = { width: 0, height: 0 }\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({ x: 0, y: 0 })\n\nconst svThumbStyle = computed(() => {\n return { transform: `translate(${transform.x}px, ${transform.y}px)` }\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({ init })\n</script>\n"],"mappings":";;;;;;;;EAwBA,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({ name: 'PaletteSV' })\n\nconst { cls, hueRGB, HSV, updateSV, userAction } = inject(PaletteDIKey)!\n\nconst svRef = shallowRef<HTMLDivElement>()\n\nconst canvasSize = { width: 0, height: 0 }\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({ x: 0, y: 0 })\n\nconst svThumbStyle = computed(() => {\n return { transform: `translate(${transform.x}px, ${transform.y}px)` }\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({ init })\n</script>\n"],"mappings":";;;;;;;;EAwBA,MAAM,EAAE,KAAK,QAAQ,KAAK,UAAU,eAAe,OAAO,YAAY;EAEtE,MAAM,QAAQ,WAA2B;EAEzC,MAAM,aAAa;GAAE,OAAO;GAAG,QAAQ;EAAE;EAEzC,MAAM,SAAS,CAAC,GAAG,CAAC;EACpB,MAAM,SAAS,CAAC,GAAG,CAAC;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;EACd;EAEA,MAAM,YAAY,SAAS;GAAE,GAAG;GAAG,GAAG;EAAE,CAAC;EAEzC,MAAM,eAAe,eAAe;GAClC,OAAO,EAAE,WAAW,aAAa,UAAU,EAAE,MAAM,UAAU,EAAE,KAAK;EACtE,CAAC;EAED,MAAM,cAAc,YAAY,SAAiB,YAAoB;GACnE,UAAU,IAAI;GACd,UAAU,IAAI;GASd,SAAS;IAAE,GAJD,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,WAAW,KAAK,CAIjD;IAAG,GAHJ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,UAAU,WAAW,MAAM,CAGnD;GAAE,CAAC;EACnB,CAAC;EAED,MAAM,YAAY,QAAQ;GACxB,QAAQ;GACR;GACA;GAEA,OAAO,EAAE,SAAS,WAAW;IAC3B,YAAY,SAAS,OAAO;GAC9B;GACA,YAAY,GAAG;IACb,cAAc;IAEd,MAAM,EAAE,SAAS,YAAY;IAE7B,YAAY,SAAS,OAAO;IAE5B,UAAU,OAAO;KAAE;KAAS;IAAQ,CAAC;GACvC;EACF,CAAC;EAED,MAAM,mBAAmB,eAAe;GACtC,MAAM,EAAE,GAAG,GAAG,MAAM,OAAO;GAC3B,OAAO,qDAAqD,EAAE,IAAI,EAAE,IAAI,EAAE;EAC5E,CAAC;EAED,SAAS,OAAa;GACpB,cAAc;GACd,UAAU,IAAI,WAAW,QAAQ,IAAI;GACrC,UAAU,IAAI,WAAW,UAAU,IAAI,IAAI;EAC7C;EAEA,gBAAgB;GACd,KAAK;EACP,CAAC;EAED,SAAa,EAAE,KAAK,CAAC;;2DAjGnB,mBAAA,QAAA,GACA,mBAWM,OAAA;IAXA,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,IAAA,CAAA;aAAY;IAAJ,KAAI;;IAC5B,mBAAiF,OAAA;KAA3E,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,MAAA,CAAA;KAAW,OAAK,eAAA,EAAA,iBAAqB,iBAAA,MAAgB,CAAA;;IACvE,mBAAsC,OAAA,EAAhC,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,MAAA,CAAA,EAAA,GAAA,gBAAA,GAAA,CAAA;IAElB,mBAMO,OAAA;KALJ,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,UAAA,CAAA;KACb,KAAI;KACH,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;KACV,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,CAAA,GAAe,CAAA,MAAA,CAAA;KACd,OAAK,eAAE,aAAA,KAAY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n <u-tip\n trigger=\"click\"\n :class=\"cls.e('panel')\"\n v-model:visible=\"visible\"\n :disabled=\"disabled || readonly\"\n >\n <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n <template #content>\n <!-- 饱和度和亮度 -->\n <PaletteSV ref=\"palette-sv\" />\n\n <!-- 色相 -->\n <PaletteHue ref=\"palette-hue\" />\n\n <!-- 透明度 -->\n <PaletteAlpha ref=\"palette-alpha\" />\n\n <!-- 颜色切换 -->\n <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n </template>\n </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({ name: 'Palette' })\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, { cls, HSV, RGB, alpha, userAction, isUserActive, ...rest })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n <u-tip\n trigger=\"click\"\n :class=\"cls.e('panel')\"\n v-model:visible=\"visible\"\n :disabled=\"disabled || readonly\"\n >\n <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n <template #content>\n <!-- 饱和度和亮度 -->\n <PaletteSV ref=\"palette-sv\" />\n\n <!-- 色相 -->\n <PaletteHue ref=\"palette-hue\" />\n\n <!-- 透明度 -->\n <PaletteAlpha ref=\"palette-alpha\" />\n\n <!-- 颜色切换 -->\n <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n </template>\n </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({ name: 'Palette' })\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, { cls, HSV, RGB, alpha, userAction, isUserActive, ...rest })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC;EAElF,MAAM,MAAM,IAAI,SAAS;EAEzB,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,KAAK;IAAG,IAAI,GAAG,YAAY,CAAC,MAAM,KAAK;GAAC;EACpE,CAAC;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,OAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,YAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,GAAG,CAAC;EACvC,MAAM,EAAE,YAAY,iBAAiB,cAAc;EAEnD,MAAM,UAAU,WAAW,KAAK;;EAGhC,IAAI,kBAAkB;EAEtB,MAAM,cAAc,iBAAiB;GACnC,IAAI,MAAM,UAAU,GAClB,kBAAkB;GAEpB,MAAM,QAAQ;GACd,KAAK,YAAY,CAAC;GAClB,QAAQ,QAAQ;EAClB,CAAC;EAED,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,SAAS;GACpC,IAAI,iBAAiB;IACnB,kBAAkB;IAClB;GACF;GACA,MAAM,QAAQ,IAAI,QAAQ,KAAK,KAAK;EACtC,CAAC;EAED,MAAM,eAAe,eAAe,YAAY;EAChD,MAAM,gBAAgB,eAAe,aAAa;EAClD,MAAM,kBAAkB,eAAe,eAAe;EAEtD,MACE,QACC,UAAU;GACT,IAAI,CAAC,OAAO;GACZ,IAAI,aAAa,GAAG;GAEpB,MAAM,EAAE,KAAK,UAAU,SAAS,KAAK;GACrC,MAAM,MAAM,QAAQ,GAAG;GACvB,KAAK,UAAU,IAAI,CAAC;GACpB,KAAK,SAAS;IAAE,GAAG,IAAI;IAAG,GAAG,IAAI;GAAE,CAAC;GACpC,KAAK,YAAY,KAAK;GAEtB,aAAa,OAAO,KAAK;GACzB,cAAc,OAAO,KAAK;GAC1B,gBAAgB,OAAO,KAAK;EAC9B,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,QAAQ,cAAc;GAAE;GAAK;GAAK;GAAK;GAAO;GAAY;GAAc,GAAG;EAAK,CAAC;;uBA5G/E,YAqBQ,MAAA,WAAA,GAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,OAAA,CAAA;IACL,SAAS,QAAA;8DAAA,QAAO,QAAA;IACvB,UAAU,MAAA,QAAA,KAAY,MAAA,QAAA;;IAIZ,SAAO,cACD;KAAf,mBAAA,UAAA;KACA,YAA8B,aAAA,EAAnB,KAAI,aAAY,GAAA,MAAA,GAAA;KAE3B,mBAAA,MAAA;KACA,YAAgC,aAAA,EAApB,KAAI,cAAa,GAAA,MAAA,GAAA;KAE7B,mBAAA,OAAA;KACA,YAAoC,aAAA,EAAtB,KAAI,gBAAe,GAAA,MAAA,GAAA;KAEjC,mBAAA,QAAA;KACA,YAAiE,aAAA;MAArC,OAAO,MAAA;8DAAA,MAAK,QAAA;MAAG,SAAO,MAAA,WAAA;;;2BAbiB,CAArE,mBAAqE,QAAA;KAA9D,OAAK,eAAE,UAAA,KAAS;KAAG,OAAK,eAAA,EAAA,iBAAqB,MAAA,MAAK,CAAA"}
|
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
import { PaletteProps } from "../../types/palette.js";
|
|
2
|
-
import * as _$vue from "vue";
|
|
3
|
-
|
|
4
2
|
//#region src/components/palette/palette.vue.d.ts
|
|
5
3
|
type __VLS_Props = PaletteProps;
|
|
6
4
|
type __VLS_ModelProps = {
|
|
7
5
|
modelValue?: string;
|
|
8
6
|
};
|
|
9
7
|
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
10
|
-
declare const __VLS_export:
|
|
8
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
11
9
|
"update:modelValue": (value: string | undefined) => any;
|
|
12
|
-
}, string,
|
|
10
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
13
11
|
"onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
|
|
14
12
|
}>, {
|
|
15
13
|
disabled: boolean;
|
|
16
14
|
readonly: boolean;
|
|
17
|
-
}, {}, {}, {}, string,
|
|
15
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
18
16
|
declare const _default: typeof __VLS_export;
|
|
19
17
|
//#endregion
|
|
20
18
|
export { _default };
|