@veltra/desktop 1.1.15 → 1.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/action/action-group.vue.d.ts +2 -2
- package/dist/components/action/action-group.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/action/action.js.map +1 -1
- package/dist/components/action/action.vue.d.ts +1 -1
- package/dist/components/action/style2.css +0 -4
- package/dist/components/auto-complete/auto-complete.js.map +1 -1
- package/dist/components/auto-complete/style.js +1 -1
- package/dist/components/auto-complete/use-keyboard.js.map +1 -1
- package/dist/components/auto-complete/use-suggestions.js.map +1 -1
- package/dist/components/badge/badge.js +1 -1
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/batch-edit/batch-edit-form.js.map +1 -1
- package/dist/components/batch-edit/batch-edit-list.js.map +1 -1
- package/dist/components/batch-edit/batch-edit.js.map +1 -1
- package/dist/components/batch-edit/helper.js.map +1 -1
- package/dist/components/batch-edit/style.js +1 -1
- package/dist/components/batch-edit/use-edit.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/button/button-group.js.map +1 -1
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/calendar/calendar.js.map +1 -1
- package/dist/components/calendar/utils.js.map +1 -1
- package/dist/components/card/card-action.js.map +1 -1
- package/dist/components/card/card-content.js.map +1 -1
- package/dist/components/card/card-cover.js.map +1 -1
- package/dist/components/card/card-header.js.map +1 -1
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/cascade/cascade-panel-item.js.map +1 -1
- package/dist/components/cascade/cascade.js.map +1 -1
- package/dist/components/cascade/cascade.vue.d.ts +3 -3
- package/dist/components/cascade/node.js.map +1 -1
- package/dist/components/cascade/use-check.js.map +1 -1
- package/dist/components/cascade/use-data-map.js.map +1 -1
- package/dist/components/cascade/use-select.js +1 -1
- package/dist/components/cascade/use-select.js.map +1 -1
- package/dist/components/check-tag/check-tag.js.map +1 -1
- package/dist/components/checkbox/checkbox-button.js.map +1 -1
- package/dist/components/checkbox/checkbox-button.vue.d.ts +1 -1
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/checkbox/style.js +1 -1
- package/dist/components/checkbox-group/checkbox-group.js.map +1 -1
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/collapse/collapse-item.js.map +1 -1
- package/dist/components/collapse/collapse.js.map +1 -1
- package/dist/components/condition-editor/components/condition-group.js +138 -103
- package/dist/components/condition-editor/components/condition-group.js.map +1 -1
- package/dist/components/condition-editor/components/condition-row.js +146 -95
- package/dist/components/condition-editor/components/condition-row.js.map +1 -1
- package/dist/components/condition-editor/condition-editor.js +18 -40
- package/dist/components/condition-editor/condition-editor.js.map +1 -1
- package/dist/components/condition-editor/condition-editor.vue.d.ts +0 -2
- package/dist/components/condition-editor/core/evaluator.d.ts +22 -0
- package/dist/components/condition-editor/core/evaluator.js +111 -50
- package/dist/components/condition-editor/core/evaluator.js.map +1 -1
- package/dist/components/condition-editor/core/operators.js.map +1 -1
- package/dist/components/condition-editor/index.d.ts +2 -1
- package/dist/components/condition-editor/style2.css +159 -82
- package/dist/components/context-menu/api.js.map +1 -1
- package/dist/components/context-menu/context-menu-item.js.map +1 -1
- package/dist/components/context-menu/context-menu.js.map +1 -1
- package/dist/components/context-menu/style.js +1 -1
- package/dist/components/date-panel/date-panel.js.map +1 -1
- package/dist/components/date-panel/date-panel.vue.d.ts +1 -1
- package/dist/components/date-panel/headers/day.js.map +1 -1
- package/dist/components/date-panel/headers/month.js.map +1 -1
- package/dist/components/date-panel/headers/year.js.map +1 -1
- package/dist/components/date-panel/panels/day.js.map +1 -1
- package/dist/components/date-panel/panels/month.js.map +1 -1
- package/dist/components/date-panel/panels/year.js.map +1 -1
- package/dist/components/date-panel/use-date-select.js.map +1 -1
- package/dist/components/date-panel/use-panel-date.js.map +1 -1
- package/dist/components/date-panel/use-panel.js.map +1 -1
- package/dist/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/date-picker/date-picker.vue.d.ts +1 -1
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.vue.d.ts +1 -1
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/dialog/style.js +2 -2
- package/dist/components/dialog/use-maximum.js.map +1 -1
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/drawer/style.js +1 -1
- package/dist/components/dropdown/dropdown.js +1 -0
- package/dist/components/dropdown/dropdown.js.map +1 -1
- package/dist/components/dropdown/style.js +1 -1
- package/dist/components/empty/empty.js.map +1 -1
- package/dist/components/expression-editor/components/path-preview.js.map +1 -1
- package/dist/components/expression-editor/components/variable-picker.js.map +1 -1
- package/dist/components/expression-editor/core/chip.js.map +1 -1
- package/dist/components/expression-editor/core/editor.js.map +1 -1
- package/dist/components/expression-editor/core/mention.js.map +1 -1
- package/dist/components/expression-editor/core/model.js.map +1 -1
- package/dist/components/expression-editor/di.js.map +1 -1
- package/dist/components/expression-editor/expression-editor.js.map +1 -1
- package/dist/components/file-picker/file-picker.js.map +1 -1
- package/dist/components/file-picker/helper.js.map +1 -1
- package/dist/components/file-viewer/file-viewer.js.map +1 -1
- package/dist/components/file-viewer/helper.js.map +1 -1
- package/dist/components/file-viewer/previewers/docx-previewer.js.map +1 -1
- package/dist/components/file-viewer/previewers/image-previewer.js.map +1 -1
- package/dist/components/file-viewer/previewers/pdf-previewer.js.map +1 -1
- package/dist/components/file-viewer/previewers/pdf-viewport-scroll.js.map +1 -1
- package/dist/components/file-viewer/previewers/pdf-zoom-bridge.js.map +1 -1
- package/dist/components/file-viewer/previewers/sheet-previewer.js.map +1 -1
- package/dist/components/file-viewer/previewers/text-previewer.js.map +1 -1
- package/dist/components/file-viewer/previewers/video-previewer.js.map +1 -1
- package/dist/components/float-button/float-button.js.map +1 -1
- package/dist/components/form/dynamic-form-model.js.map +1 -1
- package/dist/components/form/form-model.js.map +1 -1
- package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/form/helper.js.map +1 -1
- package/dist/components/form/use-node-interceptor.js.map +1 -1
- package/dist/components/form-item/form-item.js.map +1 -1
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/gantt-chart/gantt-chart.js.map +1 -1
- package/dist/components/grid/breakpoint.js.map +1 -1
- package/dist/components/grid/grid-item.js.map +1 -1
- package/dist/components/grid/grid.js.map +1 -1
- package/dist/components/grid/use-responsive.js.map +1 -1
- package/dist/components/grid-input/grid-input.js.map +1 -1
- package/dist/components/group-input/group-input.js.map +1 -1
- package/dist/components/group-input/use-group-items.js.map +1 -1
- package/dist/components/icon/icon.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +4 -0
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/input/style.js +1 -1
- package/dist/components/kbd/kbd.js.map +1 -1
- package/dist/components/layout/layout-resizer.js.map +1 -1
- package/dist/components/layout/layout.js.map +1 -1
- package/dist/components/list/list-item.js.map +1 -1
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/loading/directive.js.map +1 -1
- package/dist/components/loading/loading.js.map +1 -1
- package/dist/components/loading/style.js +1 -1
- package/dist/components/menu/helper.js.map +1 -1
- package/dist/components/menu/menu-item-collapsed.js.map +1 -1
- package/dist/components/menu/menu-item.js.map +1 -1
- package/dist/components/menu/menu-sub-collapsed.js.map +1 -1
- package/dist/components/menu/menu-sub.js.map +1 -1
- package/dist/components/menu/menu.js.map +1 -1
- package/dist/components/menu/use-menu-item.js.map +1 -1
- package/dist/components/menu/walk-menu-path.js.map +1 -1
- package/dist/components/message/helper.js.map +1 -1
- package/dist/components/message/message-box.js.map +1 -1
- package/dist/components/message/message.js.map +1 -1
- package/dist/components/message/message2.js.map +1 -1
- package/dist/components/message-confirm/message-confirm.js.map +1 -1
- package/dist/components/message-confirm/message-confirm2.js.map +1 -1
- package/dist/components/multi-select/multi-select-option.js.map +1 -1
- package/dist/components/multi-select/multi-select.js.map +1 -1
- package/dist/components/multi-select/multi-select.vue.d.ts +2 -2
- package/dist/components/multi-select/style.js +1 -1
- package/dist/components/multi-tree-select/multi-tree-select.js.map +1 -1
- package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +2 -2
- package/dist/components/multi-tree-select/style.js +1 -1
- package/dist/components/node-render/node-render.js.map +1 -1
- package/dist/components/notification/index.js.map +1 -1
- package/dist/components/notification/notification.js.map +1 -1
- package/dist/components/number/number.js.map +1 -1
- package/dist/components/number-input/number-input.js.map +1 -1
- package/dist/components/number-range-input/number-range-input.js.map +1 -1
- package/dist/components/paginator/paginator.js.map +1 -1
- package/dist/components/palette/color-transform.js.map +1 -1
- package/dist/components/palette/palette-alpha.js.map +1 -1
- package/dist/components/palette/palette-color-switch.js.map +1 -1
- package/dist/components/palette/palette-hue.js.map +1 -1
- package/dist/components/palette/palette-sv.js.map +1 -1
- package/dist/components/palette/palette.js.map +1 -1
- package/dist/components/palette/use-hsv.js.map +1 -1
- package/dist/components/password-input/password-input.js.map +1 -1
- package/dist/components/pop-confirm/pop-confirm.js.map +1 -1
- package/dist/components/pop-confirm/pop-confirm.vue.d.ts +1 -1
- package/dist/components/progress/progress.js.map +1 -1
- package/dist/components/progress-nodes/progress-nodes.js.map +1 -1
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/radio/style.js +1 -1
- package/dist/components/radio-group/radio-group.js.map +1 -1
- package/dist/components/rich-text-editor/rich-text-editor.js.map +1 -1
- package/dist/components/rich-text-editor/toolbar.js.map +1 -1
- package/dist/components/scroll/scroll-bar.js +2 -0
- package/dist/components/scroll/scroll-bar.js.map +1 -1
- package/dist/components/scroll/scroll.js.map +1 -1
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/select/select.vue.d.ts +2 -2
- package/dist/components/select/use-keyboard.js.map +1 -1
- package/dist/components/select/use-options.js.map +1 -1
- package/dist/components/slider/slider-thumb.js.map +1 -1
- package/dist/components/slider/slider.js +1 -1
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/slider/use-slider.js.map +1 -1
- package/dist/components/steps/steps.js.map +1 -1
- package/dist/components/steps/steps.vue.d.ts +3 -3
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/di.js.map +1 -1
- package/dist/components/table/node/col.js.map +1 -1
- package/dist/components/table/node/row.js.map +1 -1
- package/dist/components/table/table-body.js.map +1 -1
- package/dist/components/table/table-cell.js.map +1 -1
- package/dist/components/table/table-foot.js.map +1 -1
- package/dist/components/table/table-head.js.map +1 -1
- package/dist/components/table/table-row.js.map +1 -1
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/table/use-check.js.map +1 -1
- package/dist/components/table/use-col-resize.js.map +1 -1
- package/dist/components/table/use-columns.js.map +1 -1
- package/dist/components/table/use-fixed-columns.js.map +1 -1
- package/dist/components/table/use-rows.js.map +1 -1
- package/dist/components/table/use-table.js.map +1 -1
- package/dist/components/table-editor/table-editor.js.map +1 -1
- package/dist/components/tabs/style.js +1 -1
- package/dist/components/tabs/tabs-horizontal.js.map +1 -1
- package/dist/components/tabs/tabs-horizontal.vue.d.ts +2 -2
- package/dist/components/tabs/tabs-vertical.js.map +1 -1
- package/dist/components/tabs/tabs-vertical.vue.d.ts +2 -2
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/tabs/tabs.vue.d.ts +2 -2
- package/dist/components/tabs/use-tabs-bar.js.map +1 -1
- package/dist/components/tag/tag.js.map +1 -1
- package/dist/components/text/text.js.map +1 -1
- package/dist/components/textarea/style.js +1 -1
- package/dist/components/textarea/textarea.js.map +1 -1
- package/dist/components/textarea/textarea.vue.d.ts +1 -1
- package/dist/components/textarea/utils.js.map +1 -1
- package/dist/components/theme/schema.js.map +1 -1
- package/dist/components/theme/theme.js.map +1 -1
- package/dist/components/tip/tip.js.map +1 -1
- package/dist/components/tip/tip.vue.d.ts +1 -1
- package/dist/components/tip/use-nest.js.map +1 -1
- package/dist/components/tree/tree-node.js.map +1 -1
- package/dist/components/tree/tree-node2.js.map +1 -1
- package/dist/components/tree/tree.js.map +1 -1
- package/dist/components/tree/tree.vue.d.ts +1 -1
- package/dist/components/tree/use-check.js.map +1 -1
- package/dist/components/tree/use-filter.js.map +1 -1
- package/dist/components/tree/use-select.js.map +1 -1
- package/dist/components/tree/use-tree-nodes.js.map +1 -1
- package/dist/components/tree-select/tree-select.js.map +1 -1
- package/dist/components/tree-select/tree-select.vue.d.ts +2 -2
- package/dist/components/watermark/watermark.js.map +1 -1
- package/dist/index.d.ts +4 -3
- package/dist/index.js +2 -1
- package/dist/install.js.map +1 -1
- package/dist/types/batch-edit.d.ts +2 -2
- package/dist/types/condition-editor.d.ts +21 -9
- package/dist/types/index.d.ts +2 -2
- package/package.json +13 -16
- package/src/components/action/style.scss +0 -6
- package/src/components/auto-complete/style.scss +0 -1
- package/src/components/auto-complete/style.ts +1 -1
- package/src/components/badge/badge.vue +1 -1
- package/src/components/batch-edit/style.ts +1 -1
- package/src/components/button/style.scss +1 -1
- package/src/components/cascade/use-select.ts +8 -6
- package/src/components/checkbox/style.ts +1 -1
- package/src/components/collapse/__test__/collapse.test.ts +3 -3
- package/src/components/condition-editor/components/condition-group.vue +118 -87
- package/src/components/condition-editor/components/condition-row.vue +137 -89
- package/src/components/condition-editor/condition-editor.vue +19 -48
- package/src/components/condition-editor/core/evaluator.ts +143 -57
- package/src/components/condition-editor/index.ts +6 -0
- package/src/components/condition-editor/style.scss +189 -102
- package/src/components/context-menu/style.ts +1 -1
- package/src/components/dialog/style.ts +2 -2
- package/src/components/drawer/style.ts +1 -1
- package/src/components/dropdown/style.ts +1 -1
- package/src/components/expression-editor/style.scss +1 -1
- package/src/components/form-item/form-item.vue +4 -9
- package/src/components/input/style.ts +1 -1
- package/src/components/loading/style.ts +1 -1
- package/src/components/menu/style.scss +1 -1
- package/src/components/message/style.scss +1 -1
- package/src/components/multi-select/style.ts +1 -1
- package/src/components/multi-tree-select/style.ts +1 -1
- package/src/components/number-input/__test__/number-input.test.ts +1 -1
- package/src/components/radio/style.ts +1 -1
- package/src/components/slider/slider.vue +1 -1
- package/src/components/table/di.ts +1 -1
- package/src/components/tabs/style.ts +1 -1
- package/src/components/textarea/style.ts +1 -1
- package/src/types/batch-edit.ts +2 -2
- package/src/types/condition-editor.ts +22 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-bar.js","names":[],"sources":["../../../src/components/scroll/scroll-bar.vue"],"sourcesContent":["<template>\n <div v-show=\"!!size\" ref=\"domRef\" :style=\"style\" :class=\"className\"></div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, shallowRef } from 'vue'\n\nimport { ScrollDIKey } from './di'\n\ndefineOptions({\n name: 'ScrollBar'\n})\n\nconst props = defineProps<{\n type: 'x' | 'y'\n}>()\n\nconst emit = defineEmits<{\n drag: [offset: number, size: number]\n}>()\n\n/** 滚动条高度(type为x时为宽度) */\nconst size = shallowRef(0)\n/** 滚动条偏移量 */\nconst offset = shallowRef(0)\n/** 滚动条拖拽前偏移量 */\nlet currentOffset = 0\n/** 滚动条轨道尺寸 */\nlet trackSize = 0\n\nconst { cls } = inject(ScrollDIKey)!\n\nconst dragging = shallowRef(false)\n\nconst className = computed(() => {\n return [cls.e(`bar-${props.type}`), bem.is('active', dragging.value)]\n})\n\nconst style =\n props.type === 'x'\n ? computed(() => {\n return {\n width: size.value + 'px',\n transform: `translateX(${offset.value}px)`\n }\n })\n : computed(() => {\n return {\n height: size.value + 'px',\n transform: `translateY(${offset.value}px)`\n }\n })\n\nconst domRef = shallowRef<HTMLElement>()\n\n/** 获取拖拽偏移量 */\nconst getDragOffset =\n props.type === 'x'\n ? (x: number, y: number) => currentOffset + x\n : (x: number, y: number) => currentOffset + y\n\n// 应用拖拽\nuseDrag({\n target: domRef,\n onDragStart() {\n dragging.value = true\n currentOffset = offset.value\n },\n onDragEnd() {\n dragging.value = false\n },\n onDrag({ x, y }) {\n const newOffset = getDragOffset(x, y)\n const maxOffset = trackSize - size.value\n\n if (newOffset < 0) {\n offset.value = 0\n } else if (newOffset > maxOffset) {\n offset.value = maxOffset\n } else {\n offset.value = newOffset\n }\n\n emit('drag', offset.value, size.value)\n }\n})\n\ndefineExpose({\n /** 更新滚动条状态 */\n update(_size: number, _offset: number): void {\n size.value = _size\n offset.value = _offset\n },\n\n /** 设置轨道尺寸 */\n setTrackSize(size: number): void {\n trackSize = size\n }\n})\n</script>\n"],"mappings":";;;;;;;;;;;EAeA,MAAM,QAAQ;EAId,MAAM,OAAO;;EAKb,MAAM,OAAO,WAAW,EAAC;;EAEzB,MAAM,SAAS,WAAW,EAAC;;EAE3B,IAAI,gBAAgB;;EAEpB,IAAI,YAAY;EAEhB,MAAM,EAAE,QAAQ,OAAO,
|
|
1
|
+
{"version":3,"file":"scroll-bar.js","names":[],"sources":["../../../src/components/scroll/scroll-bar.vue"],"sourcesContent":["<template>\n <div v-show=\"!!size\" ref=\"domRef\" :style=\"style\" :class=\"className\"></div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, shallowRef } from 'vue'\n\nimport { ScrollDIKey } from './di'\n\ndefineOptions({\n name: 'ScrollBar'\n})\n\nconst props = defineProps<{\n type: 'x' | 'y'\n}>()\n\nconst emit = defineEmits<{\n drag: [offset: number, size: number]\n}>()\n\n/** 滚动条高度(type为x时为宽度) */\nconst size = shallowRef(0)\n/** 滚动条偏移量 */\nconst offset = shallowRef(0)\n/** 滚动条拖拽前偏移量 */\nlet currentOffset = 0\n/** 滚动条轨道尺寸 */\nlet trackSize = 0\n\nconst { cls } = inject(ScrollDIKey)!\n\nconst dragging = shallowRef(false)\n\nconst className = computed(() => {\n return [cls.e(`bar-${props.type}`), bem.is('active', dragging.value)]\n})\n\nconst style =\n props.type === 'x'\n ? computed(() => {\n return {\n width: size.value + 'px',\n transform: `translateX(${offset.value}px)`\n }\n })\n : computed(() => {\n return {\n height: size.value + 'px',\n transform: `translateY(${offset.value}px)`\n }\n })\n\nconst domRef = shallowRef<HTMLElement>()\n\n/** 获取拖拽偏移量 */\nconst getDragOffset =\n props.type === 'x'\n ? (x: number, y: number) => currentOffset + x\n : (x: number, y: number) => currentOffset + y\n\n// 应用拖拽\nuseDrag({\n target: domRef,\n onDragStart() {\n dragging.value = true\n currentOffset = offset.value\n },\n onDragEnd() {\n dragging.value = false\n },\n onDrag({ x, y }) {\n const newOffset = getDragOffset(x, y)\n const maxOffset = trackSize - size.value\n\n if (newOffset < 0) {\n offset.value = 0\n } else if (newOffset > maxOffset) {\n offset.value = maxOffset\n } else {\n offset.value = newOffset\n }\n\n emit('drag', offset.value, size.value)\n }\n})\n\ndefineExpose({\n /** 更新滚动条状态 */\n update(_size: number, _offset: number): void {\n size.value = _size\n offset.value = _offset\n },\n\n /** 设置轨道尺寸 */\n setTrackSize(size: number): void {\n trackSize = size\n }\n})\n</script>\n"],"mappings":";;;;;;;;;;;EAeA,MAAM,QAAQ;EAId,MAAM,OAAO;;EAKb,MAAM,OAAO,WAAW,EAAC;;EAEzB,MAAM,SAAS,WAAW,EAAC;;EAE3B,IAAI,gBAAgB;;EAEpB,IAAI,YAAY;EAEhB,MAAM,EAAE,QAAQ,OAAO,YAAW;EAElC,MAAM,WAAW,WAAW,MAAK;EAEjC,MAAM,YAAY,eAAe;GAC/B,OAAO,CAAC,IAAI,EAAE,OAAO,MAAM,OAAM,EAAG,IAAI,GAAG,UAAU,SAAS,MAAM,CAAA;IACrE;EAED,MAAM,QACJ,MAAM,SAAS,MACX,eAAe;GACb,OAAO;IACL,OAAO,KAAK,QAAQ;IACpB,WAAW,cAAc,OAAO,MAAM;IACxC;IACD,GACD,eAAe;GACb,OAAO;IACL,QAAQ,KAAK,QAAQ;IACrB,WAAW,cAAc,OAAO,MAAM;IACxC;IACD;EAEP,MAAM,SAAS,YAAwB;;EAGvC,MAAM,gBACJ,MAAM,SAAS,OACV,GAAW,MAAc,gBAAgB,KACzC,GAAW,MAAc,gBAAgB;EAGhD,QAAQ;GACN,QAAQ;GACR,cAAc;IACZ,SAAS,QAAQ;IACjB,gBAAgB,OAAO;;GAEzB,YAAY;IACV,SAAS,QAAQ;;GAEnB,OAAO,EAAE,GAAG,KAAK;IACf,MAAM,YAAY,cAAc,GAAG,EAAC;IACpC,MAAM,YAAY,YAAY,KAAK;IAEnC,IAAI,YAAY,GACd,OAAO,QAAQ;SACV,IAAI,YAAY,WACrB,OAAO,QAAQ;SAEf,OAAO,QAAQ;IAGjB,KAAK,QAAQ,OAAO,OAAO,KAAK,MAAK;;GAExC,CAAA;EAED,SAAa;;GAEX,OAAO,OAAe,SAAuB;IAC3C,KAAK,QAAQ;IACb,OAAO,QAAQ;;;GAIjB,aAAa,MAAoB;IAC/B,YAAY;;GAEf,CAAA;;uCAnGC,mBAA0E,OAAA;aAAjD;IAAJ,KAAI;IAAU,OAAK,eAAE,MAAA,MAAK,CAAA;IAAG,OAAK,eAAE,UAAA,MAAS;4BAAnD,KAAA,MAAI,CAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll.js","names":[],"sources":["../../../src/components/scroll/scroll.vue"],"sourcesContent":["<template>\n <div :class=\"className\" :style=\"style\" ref=\"scrollRef\">\n <template v-if=\"!isExternal\">\n <div\n ref=\"containerRef\"\n :class=\"[cls.e('container'), containerClass]\"\n @scroll.passive=\"handleScroll\"\n :style=\"containerStyle\"\n >\n <component\n ref=\"contentRef\"\n :style=\"contentStyle\"\n :class=\"[cls.e('content'), contentClass]\"\n :is=\"tag\"\n >\n <slot />\n </component>\n </div>\n\n <u-scroll-bar type=\"y\" :class=\"cls.e('bar-y')\" @drag=\"handleDragY\" ref=\"barY\" />\n <u-scroll-bar type=\"x\" :class=\"cls.e('bar-x')\" @drag=\"handleDragX\" ref=\"barX\" />\n </template>\n\n <template v-else>\n <slot />\n <Teleport v-if=\"externalTarget\" :to=\"externalTarget\">\n <div ref=\"overlayRef\" :class=\"cls.e('overlay')\">\n <u-scroll-bar type=\"y\" :class=\"cls.e('bar-y')\" @drag=\"handleDragY\" ref=\"barY\" />\n <u-scroll-bar type=\"x\" :class=\"cls.e('bar-x')\" @drag=\"handleDragX\" ref=\"barX\" />\n </div>\n </Teleport>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { debounce } from '@cat-kit/core'\nimport { useResizeObserver } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport {\n type CSSProperties,\n computed,\n onBeforeUnmount,\n provide,\n shallowRef,\n toValue,\n watch\n} from 'vue'\n\nimport type { ScrollPosition, _ScrollExposed, ScrollProps, ScrollEmits } from '../../types'\nimport { ScrollDIKey } from './di'\nimport UScrollBar from './scroll-bar.vue'\n\ndefineOptions({\n name: 'Scroll'\n})\n\nconst props = withDefaults(defineProps<ScrollProps>(), {\n tag: 'div'\n})\n\nconst emit = defineEmits<ScrollEmits>()\n\ndefineSlots<{\n /** 默认插槽 */\n default(): any\n /** 内容插槽 */\n content(): any\n}>()\n\nconst cls = bem('scroll')\n\nconst isExternal = computed(() => props.target !== undefined)\n\nconst externalTarget = computed(() => (isExternal.value ? toValue(props.target) : null))\n\nconst className = computed(() => {\n return [cls.b, bem.is('always', props.always), bem.is('external', isExternal.value)]\n})\n\nconst style = computed<CSSProperties>(() => {\n if (isExternal.value) return {}\n return {\n height: withUnit(props.height, 'px')\n }\n})\n\nconst contentRef = shallowRef<HTMLElement>()\nconst scrollRef = shallowRef<HTMLElement>()\nconst containerRef = shallowRef<HTMLElement>()\nconst overlayRef = shallowRef<HTMLElement>()\nconst barX = shallowRef<InstanceType<typeof UScrollBar>>()\nconst barY = shallowRef<InstanceType<typeof UScrollBar>>()\nconst minSize = 20\n\nconst trackSize = {\n width: 0,\n height: 0\n}\n\nfunction getScrollContainer(): HTMLElement | undefined {\n if (isExternal.value) {\n return externalTarget.value ?? undefined\n }\n return containerRef.value\n}\n\nfunction syncTrackSize() {\n const container = getScrollContainer()\n if (!container) return\n\n trackSize.width = container.clientWidth\n trackSize.height = container.clientHeight\n barX.value?.setTrackSize(trackSize.width)\n barY.value?.setTrackSize(trackSize.height)\n}\n\nconst updateBar = () => {\n const container = getScrollContainer()\n if (!container) return\n\n const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = container\n\n emit('scroll', {\n x: scrollLeft,\n y: scrollTop,\n sw: scrollWidth,\n sh: scrollHeight,\n cw: clientWidth,\n ch: clientHeight\n })\n\n if (scrollHeight !== clientHeight) {\n const barYHeight = Math.max((clientHeight / scrollHeight) * trackSize.height, minSize)\n const barYTop = (scrollTop / (scrollHeight - clientHeight)) * (trackSize.height - barYHeight)\n barY.value?.update(barYHeight, barYTop)\n } else {\n barY.value?.update(0, 0)\n }\n\n if (scrollWidth !== clientWidth) {\n const barXWidth = Math.max((clientWidth / scrollWidth) * trackSize.width, minSize)\n const barXLeft = (scrollLeft / (scrollWidth - clientWidth)) * (trackSize.width - barXWidth)\n barX.value?.update(barXWidth, barXLeft)\n } else {\n barX.value?.update(0, 0)\n }\n}\n\nconst handleDragX = debounce(\n (offset: number, size: number) => {\n const container = getScrollContainer()\n if (!container) return\n const { clientWidth, scrollWidth } = container\n container.scrollLeft = (offset / (trackSize.width - size)) * (scrollWidth - clientWidth)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleDragY = debounce(\n (offset: number, size: number) => {\n const container = getScrollContainer()\n if (!container) return\n const { clientHeight, scrollHeight } = container\n container.scrollTop = (offset / (trackSize.height - size)) * (scrollHeight - clientHeight)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleScroll = () => {\n updateBar()\n}\n\nuseResizeObserver({\n targets: [contentRef, scrollRef, () => externalTarget.value ?? null],\n onResize: (entries) => {\n syncTrackSize()\n updateBar()\n if (entries.length) {\n emit(\n 'resize',\n entries.map((entry) => entry.target as HTMLElement)\n )\n }\n }\n})\n\nlet detachExternalScroll: (() => void) | undefined\n\nwatch(\n externalTarget,\n (el, _, onCleanup) => {\n detachExternalScroll?.()\n detachExternalScroll = undefined\n if (!el || !isExternal.value) return\n\n const onScroll = () => updateBar()\n el.addEventListener('scroll', onScroll, { passive: true })\n detachExternalScroll = () => el.removeEventListener('scroll', onScroll)\n syncTrackSize()\n updateBar()\n\n onCleanup(() => {\n detachExternalScroll?.()\n detachExternalScroll = undefined\n })\n },\n { immediate: true }\n)\n\nonBeforeUnmount(() => {\n detachExternalScroll?.()\n})\n\nconst scrollToLeft = (left: number) => {\n const container = getScrollContainer()\n if (!container) return\n container.scrollTo({ left })\n}\n\nconst scrollToTop = (top: number) => {\n const container = getScrollContainer()\n if (!container) return\n container.scrollTo({ top })\n}\n\nconst scrollTo = (position: ScrollPosition) => {\n if (position.x !== undefined) scrollToLeft(position.x)\n if (position.y !== undefined) scrollToTop(position.y)\n}\n\nprovide(ScrollDIKey, {\n cls\n})\n\nconst activeContainerRef = shallowRef<HTMLElement>()\n\nwatch(\n [isExternal, externalTarget, containerRef],\n () => {\n activeContainerRef.value = getScrollContainer()\n },\n { immediate: true }\n)\n\nconst exposed: _ScrollExposed = {\n el: scrollRef,\n contentRef,\n containerRef: activeContainerRef,\n scrollTo,\n update: updateBar\n}\n\ndefineExpose(exposed)\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"scroll.js","names":[],"sources":["../../../src/components/scroll/scroll.vue"],"sourcesContent":["<template>\n <div :class=\"className\" :style=\"style\" ref=\"scrollRef\">\n <template v-if=\"!isExternal\">\n <div\n ref=\"containerRef\"\n :class=\"[cls.e('container'), containerClass]\"\n @scroll.passive=\"handleScroll\"\n :style=\"containerStyle\"\n >\n <component\n ref=\"contentRef\"\n :style=\"contentStyle\"\n :class=\"[cls.e('content'), contentClass]\"\n :is=\"tag\"\n >\n <slot />\n </component>\n </div>\n\n <u-scroll-bar type=\"y\" :class=\"cls.e('bar-y')\" @drag=\"handleDragY\" ref=\"barY\" />\n <u-scroll-bar type=\"x\" :class=\"cls.e('bar-x')\" @drag=\"handleDragX\" ref=\"barX\" />\n </template>\n\n <template v-else>\n <slot />\n <Teleport v-if=\"externalTarget\" :to=\"externalTarget\">\n <div ref=\"overlayRef\" :class=\"cls.e('overlay')\">\n <u-scroll-bar type=\"y\" :class=\"cls.e('bar-y')\" @drag=\"handleDragY\" ref=\"barY\" />\n <u-scroll-bar type=\"x\" :class=\"cls.e('bar-x')\" @drag=\"handleDragX\" ref=\"barX\" />\n </div>\n </Teleport>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { debounce } from '@cat-kit/core'\nimport { useResizeObserver } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport {\n type CSSProperties,\n computed,\n onBeforeUnmount,\n provide,\n shallowRef,\n toValue,\n watch\n} from 'vue'\n\nimport type { ScrollPosition, _ScrollExposed, ScrollProps, ScrollEmits } from '../../types'\nimport { ScrollDIKey } from './di'\nimport UScrollBar from './scroll-bar.vue'\n\ndefineOptions({\n name: 'Scroll'\n})\n\nconst props = withDefaults(defineProps<ScrollProps>(), {\n tag: 'div'\n})\n\nconst emit = defineEmits<ScrollEmits>()\n\ndefineSlots<{\n /** 默认插槽 */\n default(): any\n /** 内容插槽 */\n content(): any\n}>()\n\nconst cls = bem('scroll')\n\nconst isExternal = computed(() => props.target !== undefined)\n\nconst externalTarget = computed(() => (isExternal.value ? toValue(props.target) : null))\n\nconst className = computed(() => {\n return [cls.b, bem.is('always', props.always), bem.is('external', isExternal.value)]\n})\n\nconst style = computed<CSSProperties>(() => {\n if (isExternal.value) return {}\n return {\n height: withUnit(props.height, 'px')\n }\n})\n\nconst contentRef = shallowRef<HTMLElement>()\nconst scrollRef = shallowRef<HTMLElement>()\nconst containerRef = shallowRef<HTMLElement>()\nconst overlayRef = shallowRef<HTMLElement>()\nconst barX = shallowRef<InstanceType<typeof UScrollBar>>()\nconst barY = shallowRef<InstanceType<typeof UScrollBar>>()\nconst minSize = 20\n\nconst trackSize = {\n width: 0,\n height: 0\n}\n\nfunction getScrollContainer(): HTMLElement | undefined {\n if (isExternal.value) {\n return externalTarget.value ?? undefined\n }\n return containerRef.value\n}\n\nfunction syncTrackSize() {\n const container = getScrollContainer()\n if (!container) return\n\n trackSize.width = container.clientWidth\n trackSize.height = container.clientHeight\n barX.value?.setTrackSize(trackSize.width)\n barY.value?.setTrackSize(trackSize.height)\n}\n\nconst updateBar = () => {\n const container = getScrollContainer()\n if (!container) return\n\n const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = container\n\n emit('scroll', {\n x: scrollLeft,\n y: scrollTop,\n sw: scrollWidth,\n sh: scrollHeight,\n cw: clientWidth,\n ch: clientHeight\n })\n\n if (scrollHeight !== clientHeight) {\n const barYHeight = Math.max((clientHeight / scrollHeight) * trackSize.height, minSize)\n const barYTop = (scrollTop / (scrollHeight - clientHeight)) * (trackSize.height - barYHeight)\n barY.value?.update(barYHeight, barYTop)\n } else {\n barY.value?.update(0, 0)\n }\n\n if (scrollWidth !== clientWidth) {\n const barXWidth = Math.max((clientWidth / scrollWidth) * trackSize.width, minSize)\n const barXLeft = (scrollLeft / (scrollWidth - clientWidth)) * (trackSize.width - barXWidth)\n barX.value?.update(barXWidth, barXLeft)\n } else {\n barX.value?.update(0, 0)\n }\n}\n\nconst handleDragX = debounce(\n (offset: number, size: number) => {\n const container = getScrollContainer()\n if (!container) return\n const { clientWidth, scrollWidth } = container\n container.scrollLeft = (offset / (trackSize.width - size)) * (scrollWidth - clientWidth)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleDragY = debounce(\n (offset: number, size: number) => {\n const container = getScrollContainer()\n if (!container) return\n const { clientHeight, scrollHeight } = container\n container.scrollTop = (offset / (trackSize.height - size)) * (scrollHeight - clientHeight)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleScroll = () => {\n updateBar()\n}\n\nuseResizeObserver({\n targets: [contentRef, scrollRef, () => externalTarget.value ?? null],\n onResize: (entries) => {\n syncTrackSize()\n updateBar()\n if (entries.length) {\n emit(\n 'resize',\n entries.map((entry) => entry.target as HTMLElement)\n )\n }\n }\n})\n\nlet detachExternalScroll: (() => void) | undefined\n\nwatch(\n externalTarget,\n (el, _, onCleanup) => {\n detachExternalScroll?.()\n detachExternalScroll = undefined\n if (!el || !isExternal.value) return\n\n const onScroll = () => updateBar()\n el.addEventListener('scroll', onScroll, { passive: true })\n detachExternalScroll = () => el.removeEventListener('scroll', onScroll)\n syncTrackSize()\n updateBar()\n\n onCleanup(() => {\n detachExternalScroll?.()\n detachExternalScroll = undefined\n })\n },\n { immediate: true }\n)\n\nonBeforeUnmount(() => {\n detachExternalScroll?.()\n})\n\nconst scrollToLeft = (left: number) => {\n const container = getScrollContainer()\n if (!container) return\n container.scrollTo({ left })\n}\n\nconst scrollToTop = (top: number) => {\n const container = getScrollContainer()\n if (!container) return\n container.scrollTo({ top })\n}\n\nconst scrollTo = (position: ScrollPosition) => {\n if (position.x !== undefined) scrollToLeft(position.x)\n if (position.y !== undefined) scrollToTop(position.y)\n}\n\nprovide(ScrollDIKey, {\n cls\n})\n\nconst activeContainerRef = shallowRef<HTMLElement>()\n\nwatch(\n [isExternal, externalTarget, containerRef],\n () => {\n activeContainerRef.value = getScrollContainer()\n },\n { immediate: true }\n)\n\nconst exposed: _ScrollExposed = {\n el: scrollRef,\n contentRef,\n containerRef: activeContainerRef,\n scrollTo,\n update: updateBar\n}\n\ndefineExpose(exposed)\n</script>\n"],"mappings":";;;;;;;AA6FA,MAAM,UAAU;;;;;;;;;;;;;;;;;EApChB,MAAM,QAAQ;EAId,MAAM,OAAO;EASb,MAAM,MAAM,IAAI,SAAQ;EAExB,MAAM,aAAa,eAAe,MAAM,WAAW,KAAA,EAAS;EAE5D,MAAM,iBAAiB,eAAgB,WAAW,QAAQ,QAAQ,MAAM,OAAM,GAAI,KAAK;EAEvF,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,GAAG,UAAU,MAAM,OAAM;IAAG,IAAI,GAAG,YAAY,WAAW,MAAK;IAAC;IACpF;EAED,MAAM,QAAQ,eAA8B;GAC1C,IAAI,WAAW,OAAO,OAAO,EAAC;GAC9B,OAAO,EACL,QAAQ,SAAS,MAAM,QAAQ,KAAI,EACrC;IACD;EAED,MAAM,aAAa,YAAwB;EAC3C,MAAM,YAAY,YAAwB;EAC1C,MAAM,eAAe,YAAwB;EAC7C,MAAM,aAAa,YAAwB;EAC3C,MAAM,OAAO,YAA4C;EACzD,MAAM,OAAO,YAA4C;EAGzD,MAAM,YAAY;GAChB,OAAO;GACP,QAAQ;GACV;EAEA,SAAS,qBAA8C;GACrD,IAAI,WAAW,OACb,OAAO,eAAe,SAAS,KAAA;GAEjC,OAAO,aAAa;;EAGtB,SAAS,gBAAgB;GACvB,MAAM,YAAY,oBAAmB;GACrC,IAAI,CAAC,WAAW;GAEhB,UAAU,QAAQ,UAAU;GAC5B,UAAU,SAAS,UAAU;GAC7B,KAAK,OAAO,aAAa,UAAU,MAAK;GACxC,KAAK,OAAO,aAAa,UAAU,OAAM;;EAG3C,MAAM,kBAAkB;GACtB,MAAM,YAAY,oBAAmB;GACrC,IAAI,CAAC,WAAW;GAEhB,MAAM,EAAE,cAAc,cAAc,WAAW,aAAa,aAAa,eAAe;GAExF,KAAK,UAAU;IACb,GAAG;IACH,GAAG;IACH,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAA;GAED,IAAI,iBAAiB,cAAc;IACjC,MAAM,aAAa,KAAK,IAAK,eAAe,eAAgB,UAAU,QAAQ,QAAO;IACrF,MAAM,UAAW,aAAa,eAAe,iBAAkB,UAAU,SAAS;IAClF,KAAK,OAAO,OAAO,YAAY,QAAO;UAEtC,KAAK,OAAO,OAAO,GAAG,EAAC;GAGzB,IAAI,gBAAgB,aAAa;IAC/B,MAAM,YAAY,KAAK,IAAK,cAAc,cAAe,UAAU,OAAO,QAAO;IACjF,MAAM,WAAY,cAAc,cAAc,gBAAiB,UAAU,QAAQ;IACjF,KAAK,OAAO,OAAO,WAAW,SAAQ;UAEtC,KAAK,OAAO,OAAO,GAAG,EAAC;;EAI3B,MAAM,cAAc,UACjB,QAAgB,SAAiB;GAChC,MAAM,YAAY,oBAAmB;GACrC,IAAI,CAAC,WAAW;GAChB,MAAM,EAAE,aAAa,gBAAgB;GACrC,UAAU,aAAc,UAAU,UAAU,QAAQ,SAAU,cAAc;KAE9E,MAAM,gBAAgB,GACtB,MACF;EAEA,MAAM,cAAc,UACjB,QAAgB,SAAiB;GAChC,MAAM,YAAY,oBAAmB;GACrC,IAAI,CAAC,WAAW;GAChB,MAAM,EAAE,cAAc,iBAAiB;GACvC,UAAU,YAAa,UAAU,UAAU,SAAS,SAAU,eAAe;KAE/E,MAAM,gBAAgB,GACtB,MACF;EAEA,MAAM,qBAAqB;GACzB,WAAU;;EAGZ,kBAAkB;GAChB,SAAS;IAAC;IAAY;UAAiB,eAAe,SAAS;IAAI;GACnE,WAAW,YAAY;IACrB,eAAc;IACd,WAAU;IACV,IAAI,QAAQ,QACV,KACE,UACA,QAAQ,KAAK,UAAU,MAAM,OAC/B,CAAA;;GAGL,CAAA;EAED,IAAI;EAEJ,MACE,iBACC,IAAI,GAAG,cAAc;GACpB,wBAAuB;GACvB,uBAAuB,KAAA;GACvB,IAAI,CAAC,MAAM,CAAC,WAAW,OAAO;GAE9B,MAAM,iBAAiB,WAAU;GACjC,GAAG,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAA;GACzD,6BAA6B,GAAG,oBAAoB,UAAU,SAAQ;GACtE,eAAc;GACd,WAAU;GAEV,gBAAgB;IACd,wBAAuB;IACvB,uBAAuB,KAAA;KACxB;KAEH,EAAE,WAAW,MACf,CAAA;EAEA,sBAAsB;GACpB,wBAAuB;IACxB;EAED,MAAM,gBAAgB,SAAiB;GACrC,MAAM,YAAY,oBAAmB;GACrC,IAAI,CAAC,WAAW;GAChB,UAAU,SAAS,EAAE,MAAM,CAAA;;EAG7B,MAAM,eAAe,QAAgB;GACnC,MAAM,YAAY,oBAAmB;GACrC,IAAI,CAAC,WAAW;GAChB,UAAU,SAAS,EAAE,KAAK,CAAA;;EAG5B,MAAM,YAAY,aAA6B;GAC7C,IAAI,SAAS,MAAM,KAAA,GAAW,aAAa,SAAS,EAAC;GACrD,IAAI,SAAS,MAAM,KAAA,GAAW,YAAY,SAAS,EAAC;;EAGtD,QAAQ,aAAa,EACnB,KACD,CAAA;EAED,MAAM,qBAAqB,YAAwB;EAEnD,MACE;GAAC;GAAY;GAAgB;GAAY,QACnC;GACJ,mBAAmB,QAAQ,oBAAmB;KAEhD,EAAE,WAAW,MACf,CAAA;EAUA,SAAa;GAPX,IAAI;GACJ;GACA,cAAc;GACd;GACA,QAAQ;GAGU,CAAA;;uBA9PlB,mBA+BM,OAAA;IA/BA,OAAK,eAAE,UAAA,MAAS;IAAG,OAAK,eAAE,MAAA,MAAK;aAAM;IAAJ,KAAI;QACxB,WAAA,SAAA,WAAA,EAAjB,mBAmBW,UAAA,EAAA,KAAA,GAAA,EAAA;IAlBT,mBAcM,OAAA;cAbA;KAAJ,KAAI;KACH,OAAK,eAAA,CAAG,MAAA,IAAA,CAAI,EAAC,YAAA,EAAe,QAAA,eAAc,CAAA;sBAC1B;KAChB,OAAK,eAAE,QAAA,eAAc;sBAEtB,YAOY,wBAHL,QAAA,IAAG,EAAA;cAHJ;KAAJ,KAAI;KACH,OAAK,eAAE,QAAA,aAAY;KACnB,OAAK,eAAA,CAAG,MAAA,IAAA,CAAI,EAAC,UAAA,EAAa,QAAA,aAAY,CAAA;;4BAG/B,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;IAIZ,YAAgF,aAAA;KAAlE,MAAK;KAAK,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,QAAA,CAAA;KAAY,QAAM,MAAA,YAAA;cAAiB;KAAJ,KAAI;;IACvE,YAAgF,aAAA;KAAlE,MAAK;KAAK,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,QAAA,CAAA;KAAY,QAAM,MAAA,YAAA;cAAiB;KAAJ,KAAI;;2BAGzE,mBAQW,UAAA,EAAA,KAAA,GAAA,EAAA,CAPT,WAAQ,KAAA,QAAA,UAAA,EACQ,eAAA,SAAA,WAAA,EAAhB,YAKW,UAAA;;IALsB,IAAI,eAAA;OACnC,mBAGM,OAAA;aAHG;IAAJ,KAAI;IAAc,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,UAAA,CAAA;OACjC,YAAgF,aAAA;IAAlE,MAAK;IAAK,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,QAAA,CAAA;IAAY,QAAM,MAAA,YAAA;aAAiB;IAAJ,KAAI;qCACvE,YAAgF,aAAA;IAAlE,MAAK;IAAK,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,QAAA,CAAA;IAAY,QAAM,MAAA,YAAA;aAAiB;IAAJ,KAAI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","names":["$slots"],"sources":["../../../src/components/select/select.vue"],"sourcesContent":["<template>\n <u-dropdown\n v-if=\"!readonly\"\n trigger=\"click\"\n :class=\"[cls.b, bem.is('disabled', disabled)]\"\n ref=\"dropdownRef\"\n v-model:visible=\"dropdownVisible\"\n :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n :content-style=\"contentStyle\"\n :disabled=\"disabled\"\n :min-width=\"minWidth\"\n :width=\"width\"\n @keydown=\"handleKeydown\"\n @update:visible=\"handleDropdownVisible\"\n >\n <!-- 触发 -->\n <template #trigger>\n <u-input\n :size=\"size\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder\"\n :clearable=\"clearable\"\n :model-value=\"displayedValue\"\n @clear=\"handleClear\"\n @keydown=\"handleKeydown\"\n native-readonly\n >\n <template #prefix v-if=\"$slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n\n <template #suffix>\n <u-icon :class=\"cls.e('arrow')\">\n <ArrowDown />\n </u-icon>\n </template>\n </u-input>\n </template>\n\n <!-- 下拉内容 -->\n <template #content>\n <!-- 过滤器 -->\n <div v-if=\"filterable\" :class=\"cls.e('content-filter')\">\n <u-input placeholder=\"输入关键字进行搜索\" tabindex=\"0\" v-focus v-model=\"queryString\">\n <template #suffix>\n <u-icon>\n <Search />\n </u-icon>\n </template>\n </u-input>\n </div>\n\n <!--\n 单选列表。虚拟化启用时,内容容器 height 由 useVirtualizer 命令式写入;\n 此处 content-style 仅承担 grid 相关样式,避免 height 变化触发模板重渲染。\n -->\n <u-scroll\n v-if=\"options.length\"\n tag=\"ul\"\n :class=\"cls.e('options')\"\n ref=\"scrollRef\"\n :content-class=\"[\n cls.e('options-wrap'),\n bem.is('virtual', virtualEnabled),\n bem.is('grid', !!grid)\n ]\"\n :content-style=\"{\n gridTemplateColumns: grid ? `repeat(${grid.cols}, minmax(0px, 1fr))` : undefined,\n gridGap: grid ? withUnit(grid.gap, 'px') : undefined\n }\"\n >\n <template v-if=\"virtualEnabled\">\n <!-- @vue-ignore -->\n <li\n v-for=\"{ option, index, val, label, key, offset } of virtualOptions\"\n :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n @click=\"handleSelect(option, index)\"\n :key=\"key\"\n :style=\"{ transform: `translateY(${offset}px)` }\"\n :data-index=\"index\"\n :ref=\"(el) => measureElement(index, el as Element | null)\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ label }}\n </slot>\n </li>\n </template>\n\n <template v-else>\n <li\n v-for=\"(option, index) of options\"\n :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n @click=\"handleSelect(option, index)\"\n :data-index=\"index\"\n :title=\"o(option).get(labelKey)\"\n :key=\"o(option).get(valueKey)\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ o(option).get(labelKey) }}\n </slot>\n </li>\n </template>\n </u-scroll>\n\n <div v-else :class=\"cls.e('empty')\">\n <UEmpty />\n </div>\n </template>\n </u-dropdown>\n\n <template v-else>\n {{ displayedValue || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { vFocus } from '@veltra/directives'\nimport { ArrowDown, Search } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, watch } from 'vue'\n\nimport type {\n SelectEmits,\n SelectProps,\n _SelectExposed,\n DropdownExposed,\n ScrollExposed\n} from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UEmpty } from '../empty'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UScroll } from '../scroll'\nimport { useKeyboard } from './use-keyboard'\nimport { useOptions } from './use-options'\n\ndefineOptions({ name: 'Select' })\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n labelKey: 'label',\n valueKey: 'value',\n placeholder: '请选择',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<SelectEmits>()\n\ndefineSlots<{\n /** 前缀插槽 */\n prefix?: () => any\n /** 默认插槽 */\n default?: (scope: { option: Record<string, any>; index: number }) => any\n}>()\n\nconst cls = bem('select')\n\nconst optionClass = cls.e('option')\n\nconst { formProps } = injectFormContext()\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst currentIndex = shallowRef(-1)\nconst label = defineModel('text')\nconst selected = shallowRef<Record<string, any>>()\n\nconst displayedValue = computed(() => {\n if (label.value) return label.value\n\n return selected.value ? o(selected.value).get(props.labelKey) : String(props.modelValue ?? '')\n})\n\nconst dropdownRef = shallowRef<DropdownExposed>()\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst filterable = computed(() => {\n return props.filterable || typeof props.options === 'function'\n})\n\nconst { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions } = useOptions({\n props\n})\n\n// TODO: 优化\nlet userSelecting = false\nfunction lock() {\n userSelecting = true\n}\n\nfunction unlock() {\n nextTick(() => {\n userSelecting = false\n })\n}\n\n// 回显\nwatch(\n [() => props.modelValue, options],\n ([modelValue, options]) => {\n if (userSelecting) return\n\n if (!options?.length) return\n\n if (modelValue !== undefined) {\n const { valueKey } = props\n currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)\n\n selected.value = options[currentIndex.value]\n } else {\n currentIndex.value = -1\n selected.value = undefined\n }\n },\n { immediate: true }\n)\n\nconst baseVirtualEnabled = computed(() => options.value.length > 80)\nconst virtualEnabled = computed(() => baseVirtualEnabled.value && !props.grid)\n\nconst { virtualizer, items } = useVirtualizer({\n count: computed(() => options.value.length),\n scrollEl: () => scrollRef.value?.containerRef ?? null,\n contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),\n gap: 4,\n estimateSize: () => 40\n})\n\nconst virtualOptions = computed(() => {\n const _options = options.value\n const { labelKey, valueKey } = props\n return items.value.map((item) => {\n const option = _options[item.index]!\n return {\n option,\n index: item.index,\n label: o(option).get(labelKey),\n val: o(option).get(valueKey),\n key: item.index,\n offset: item.start\n }\n })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n virtualizer.measureElement(index, el)\n\nfunction scrollTo(index: number): void {\n virtualizer.scrollToIndex(index, { align: 'center' })\n}\n\nwatch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {\n if (!scroll || !props.modelValue) return\n\n if (virtualEnabled) {\n const index = options.value.findIndex((option) => option === selected.value)\n index !== -1 && dropdownVisible.value && nextTick(() => scrollTo(index))\n } else {\n const selectedEl = scroll?.contentRef?.getElementsByClassName('is-selected')[0]\n if (selectedEl) {\n scrollIntoContainerView(selectedEl as HTMLElement, scroll.containerRef ?? null)\n }\n }\n})\n\nconst dropdownVisible = shallowRef(false)\n\nwatch(dropdownVisible, (v) => {\n if (!v) {\n queryString.value = ''\n }\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n if (!visible) {\n queryString.value = ''\n }\n}\n\n/** 单选 */\nconst handleSelect = (option: Record<string, any>, index: number) => {\n lock()\n selected.value = option\n\n emit('update:modelValue', option?.[props.valueKey])\n label.value = option?.[props.labelKey]\n emit('change', option)\n if (option.__isTemp) {\n temOptionsToCreatedOptions()\n }\n currentIndex.value = index\n dropdownRef.value?.close()\n\n unlock()\n}\n\n/** 清除选项 */\nconst handleClear = () => {\n lock()\n selected.value = undefined\n clearCreatedOptions()\n emit('update:modelValue', undefined)\n emit('change', undefined)\n unlock()\n}\n\nfunction getCurrentEl() {\n return scrollRef.value?.contentRef?.querySelector('li.is-selected') as HTMLElement | undefined\n}\n\nconst { handleKeydown } = useKeyboard({\n options,\n currentIndex,\n selectOption: handleSelect,\n getCurrentEl\n})\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select.js","names":["$slots"],"sources":["../../../src/components/select/select.vue"],"sourcesContent":["<template>\n <u-dropdown\n v-if=\"!readonly\"\n trigger=\"click\"\n :class=\"[cls.b, bem.is('disabled', disabled)]\"\n ref=\"dropdownRef\"\n v-model:visible=\"dropdownVisible\"\n :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n :content-style=\"contentStyle\"\n :disabled=\"disabled\"\n :min-width=\"minWidth\"\n :width=\"width\"\n @keydown=\"handleKeydown\"\n @update:visible=\"handleDropdownVisible\"\n >\n <!-- 触发 -->\n <template #trigger>\n <u-input\n :size=\"size\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder\"\n :clearable=\"clearable\"\n :model-value=\"displayedValue\"\n @clear=\"handleClear\"\n @keydown=\"handleKeydown\"\n native-readonly\n >\n <template #prefix v-if=\"$slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n\n <template #suffix>\n <u-icon :class=\"cls.e('arrow')\">\n <ArrowDown />\n </u-icon>\n </template>\n </u-input>\n </template>\n\n <!-- 下拉内容 -->\n <template #content>\n <!-- 过滤器 -->\n <div v-if=\"filterable\" :class=\"cls.e('content-filter')\">\n <u-input placeholder=\"输入关键字进行搜索\" tabindex=\"0\" v-focus v-model=\"queryString\">\n <template #suffix>\n <u-icon>\n <Search />\n </u-icon>\n </template>\n </u-input>\n </div>\n\n <!--\n 单选列表。虚拟化启用时,内容容器 height 由 useVirtualizer 命令式写入;\n 此处 content-style 仅承担 grid 相关样式,避免 height 变化触发模板重渲染。\n -->\n <u-scroll\n v-if=\"options.length\"\n tag=\"ul\"\n :class=\"cls.e('options')\"\n ref=\"scrollRef\"\n :content-class=\"[\n cls.e('options-wrap'),\n bem.is('virtual', virtualEnabled),\n bem.is('grid', !!grid)\n ]\"\n :content-style=\"{\n gridTemplateColumns: grid ? `repeat(${grid.cols}, minmax(0px, 1fr))` : undefined,\n gridGap: grid ? withUnit(grid.gap, 'px') : undefined\n }\"\n >\n <template v-if=\"virtualEnabled\">\n <!-- @vue-ignore -->\n <li\n v-for=\"{ option, index, val, label, key, offset } of virtualOptions\"\n :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n @click=\"handleSelect(option, index)\"\n :key=\"key\"\n :style=\"{ transform: `translateY(${offset}px)` }\"\n :data-index=\"index\"\n :ref=\"(el) => measureElement(index, el as Element | null)\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ label }}\n </slot>\n </li>\n </template>\n\n <template v-else>\n <li\n v-for=\"(option, index) of options\"\n :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n @click=\"handleSelect(option, index)\"\n :data-index=\"index\"\n :title=\"o(option).get(labelKey)\"\n :key=\"o(option).get(valueKey)\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ o(option).get(labelKey) }}\n </slot>\n </li>\n </template>\n </u-scroll>\n\n <div v-else :class=\"cls.e('empty')\">\n <UEmpty />\n </div>\n </template>\n </u-dropdown>\n\n <template v-else>\n {{ displayedValue || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { vFocus } from '@veltra/directives'\nimport { ArrowDown, Search } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, watch } from 'vue'\n\nimport type {\n SelectEmits,\n SelectProps,\n _SelectExposed,\n DropdownExposed,\n ScrollExposed\n} from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UEmpty } from '../empty'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UScroll } from '../scroll'\nimport { useKeyboard } from './use-keyboard'\nimport { useOptions } from './use-options'\n\ndefineOptions({ name: 'Select' })\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n labelKey: 'label',\n valueKey: 'value',\n placeholder: '请选择',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<SelectEmits>()\n\ndefineSlots<{\n /** 前缀插槽 */\n prefix?: () => any\n /** 默认插槽 */\n default?: (scope: { option: Record<string, any>; index: number }) => any\n}>()\n\nconst cls = bem('select')\n\nconst optionClass = cls.e('option')\n\nconst { formProps } = injectFormContext()\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst currentIndex = shallowRef(-1)\nconst label = defineModel('text')\nconst selected = shallowRef<Record<string, any>>()\n\nconst displayedValue = computed(() => {\n if (label.value) return label.value\n\n return selected.value ? o(selected.value).get(props.labelKey) : String(props.modelValue ?? '')\n})\n\nconst dropdownRef = shallowRef<DropdownExposed>()\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst filterable = computed(() => {\n return props.filterable || typeof props.options === 'function'\n})\n\nconst { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions } = useOptions({\n props\n})\n\n// TODO: 优化\nlet userSelecting = false\nfunction lock() {\n userSelecting = true\n}\n\nfunction unlock() {\n nextTick(() => {\n userSelecting = false\n })\n}\n\n// 回显\nwatch(\n [() => props.modelValue, options],\n ([modelValue, options]) => {\n if (userSelecting) return\n\n if (!options?.length) return\n\n if (modelValue !== undefined) {\n const { valueKey } = props\n currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)\n\n selected.value = options[currentIndex.value]\n } else {\n currentIndex.value = -1\n selected.value = undefined\n }\n },\n { immediate: true }\n)\n\nconst baseVirtualEnabled = computed(() => options.value.length > 80)\nconst virtualEnabled = computed(() => baseVirtualEnabled.value && !props.grid)\n\nconst { virtualizer, items } = useVirtualizer({\n count: computed(() => options.value.length),\n scrollEl: () => scrollRef.value?.containerRef ?? null,\n contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),\n gap: 4,\n estimateSize: () => 40\n})\n\nconst virtualOptions = computed(() => {\n const _options = options.value\n const { labelKey, valueKey } = props\n return items.value.map((item) => {\n const option = _options[item.index]!\n return {\n option,\n index: item.index,\n label: o(option).get(labelKey),\n val: o(option).get(valueKey),\n key: item.index,\n offset: item.start\n }\n })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n virtualizer.measureElement(index, el)\n\nfunction scrollTo(index: number): void {\n virtualizer.scrollToIndex(index, { align: 'center' })\n}\n\nwatch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {\n if (!scroll || !props.modelValue) return\n\n if (virtualEnabled) {\n const index = options.value.findIndex((option) => option === selected.value)\n index !== -1 && dropdownVisible.value && nextTick(() => scrollTo(index))\n } else {\n const selectedEl = scroll?.contentRef?.getElementsByClassName('is-selected')[0]\n if (selectedEl) {\n scrollIntoContainerView(selectedEl as HTMLElement, scroll.containerRef ?? null)\n }\n }\n})\n\nconst dropdownVisible = shallowRef(false)\n\nwatch(dropdownVisible, (v) => {\n if (!v) {\n queryString.value = ''\n }\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n if (!visible) {\n queryString.value = ''\n }\n}\n\n/** 单选 */\nconst handleSelect = (option: Record<string, any>, index: number) => {\n lock()\n selected.value = option\n\n emit('update:modelValue', option?.[props.valueKey])\n label.value = option?.[props.labelKey]\n emit('change', option)\n if (option.__isTemp) {\n temOptionsToCreatedOptions()\n }\n currentIndex.value = index\n dropdownRef.value?.close()\n\n unlock()\n}\n\n/** 清除选项 */\nconst handleClear = () => {\n lock()\n selected.value = undefined\n clearCreatedOptions()\n emit('update:modelValue', undefined)\n emit('change', undefined)\n unlock()\n}\n\nfunction getCurrentEl() {\n return scrollRef.value?.contentRef?.querySelector('li.is-selected') as HTMLElement | undefined\n}\n\nconst { handleKeydown } = useKeyboard({\n options,\n currentIndex,\n selectOption: handleSelect,\n getCurrentEl\n})\n</script>\n"],"mappings":"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"}
|
|
@@ -28,10 +28,10 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
|
|
|
28
28
|
}>, {
|
|
29
29
|
disabled: boolean;
|
|
30
30
|
readonly: boolean;
|
|
31
|
-
placeholder: string;
|
|
32
|
-
clearable: boolean;
|
|
33
31
|
labelKey: string;
|
|
34
32
|
valueKey: string;
|
|
33
|
+
placeholder: string;
|
|
34
|
+
clearable: boolean;
|
|
35
35
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
36
36
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
37
37
|
declare const _default: typeof __VLS_export;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-keyboard.js","names":[],"sources":["../../../src/components/select/use-keyboard.ts"],"sourcesContent":["import { nextTick, type ShallowRef } from 'vue'\n\ninterface UseKeyboardConfig {\n options: ShallowRef<Record<string, any>[]>\n currentIndex: ShallowRef<number>\n selectOption: (option: Record<string, any>, index: number) => void\n getCurrentEl: () => HTMLElement | undefined\n}\n\ninterface UseKeyboardReturned {\n /** 键盘事件处理 */\n handleKeydown: (e: KeyboardEvent) => void\n}\n\nexport function useKeyboard(config: UseKeyboardConfig): UseKeyboardReturned {\n const { currentIndex, options, selectOption, getCurrentEl } = config\n\n async function navToCurrent() {\n await nextTick()\n getCurrentEl()?.scrollIntoView({ block: 'nearest' })\n }\n\n const keyHandler = {\n ArrowDown: (e: KeyboardEvent) => {\n if (!options.value) return\n e.preventDefault()\n currentIndex.value = Math.min(currentIndex.value + 1, options.value.length - 1)\n navToCurrent()\n },\n\n ArrowUp: (e: KeyboardEvent) => {\n if (!options.value) return\n e.preventDefault()\n currentIndex.value = Math.max(currentIndex.value - 1, 0)\n navToCurrent()\n },\n\n Enter: (e: KeyboardEvent) => {\n if (!options.value) return\n e.preventDefault()\n if (currentIndex.value >= 0 && currentIndex.value < options.value.length) {\n const selectedOption = options.value[currentIndex.value]!\n selectOption(selectedOption, currentIndex.value)\n }\n }\n }\n\n /** 键盘事件处理 */\n const handleKeydown = (e: KeyboardEvent) => {\n keyHandler[e.key]?.(e)\n }\n\n return { handleKeydown }\n}\n"],"mappings":";;AAcA,SAAgB,YAAY,QAAgD;CAC1E,MAAM,EAAE,cAAc,SAAS,cAAc,iBAAiB;CAE9D,eAAe,eAAe;
|
|
1
|
+
{"version":3,"file":"use-keyboard.js","names":[],"sources":["../../../src/components/select/use-keyboard.ts"],"sourcesContent":["import { nextTick, type ShallowRef } from 'vue'\n\ninterface UseKeyboardConfig {\n options: ShallowRef<Record<string, any>[]>\n currentIndex: ShallowRef<number>\n selectOption: (option: Record<string, any>, index: number) => void\n getCurrentEl: () => HTMLElement | undefined\n}\n\ninterface UseKeyboardReturned {\n /** 键盘事件处理 */\n handleKeydown: (e: KeyboardEvent) => void\n}\n\nexport function useKeyboard(config: UseKeyboardConfig): UseKeyboardReturned {\n const { currentIndex, options, selectOption, getCurrentEl } = config\n\n async function navToCurrent() {\n await nextTick()\n getCurrentEl()?.scrollIntoView({ block: 'nearest' })\n }\n\n const keyHandler = {\n ArrowDown: (e: KeyboardEvent) => {\n if (!options.value) return\n e.preventDefault()\n currentIndex.value = Math.min(currentIndex.value + 1, options.value.length - 1)\n navToCurrent()\n },\n\n ArrowUp: (e: KeyboardEvent) => {\n if (!options.value) return\n e.preventDefault()\n currentIndex.value = Math.max(currentIndex.value - 1, 0)\n navToCurrent()\n },\n\n Enter: (e: KeyboardEvent) => {\n if (!options.value) return\n e.preventDefault()\n if (currentIndex.value >= 0 && currentIndex.value < options.value.length) {\n const selectedOption = options.value[currentIndex.value]!\n selectOption(selectedOption, currentIndex.value)\n }\n }\n }\n\n /** 键盘事件处理 */\n const handleKeydown = (e: KeyboardEvent) => {\n keyHandler[e.key]?.(e)\n }\n\n return { handleKeydown }\n}\n"],"mappings":";;AAcA,SAAgB,YAAY,QAAgD;CAC1E,MAAM,EAAE,cAAc,SAAS,cAAc,iBAAiB;CAE9D,eAAe,eAAe;EAC5B,MAAM,UAAU;EAChB,cAAc,EAAE,eAAe,EAAE,OAAO,WAAW,CAAC;;CAGtD,MAAM,aAAa;EACjB,YAAY,MAAqB;GAC/B,IAAI,CAAC,QAAQ,OAAO;GACpB,EAAE,gBAAgB;GAClB,aAAa,QAAQ,KAAK,IAAI,aAAa,QAAQ,GAAG,QAAQ,MAAM,SAAS,EAAE;GAC/E,cAAc;;EAGhB,UAAU,MAAqB;GAC7B,IAAI,CAAC,QAAQ,OAAO;GACpB,EAAE,gBAAgB;GAClB,aAAa,QAAQ,KAAK,IAAI,aAAa,QAAQ,GAAG,EAAE;GACxD,cAAc;;EAGhB,QAAQ,MAAqB;GAC3B,IAAI,CAAC,QAAQ,OAAO;GACpB,EAAE,gBAAgB;GAClB,IAAI,aAAa,SAAS,KAAK,aAAa,QAAQ,QAAQ,MAAM,QAAQ;IACxE,MAAM,iBAAiB,QAAQ,MAAM,aAAa;IAClD,aAAa,gBAAgB,aAAa,MAAM;;;EAGrD;;CAGD,MAAM,iBAAiB,MAAqB;EAC1C,WAAW,EAAE,OAAO,EAAE;;CAGxB,OAAO,EAAE,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-options.js","names":["o","chainObj"],"sources":["../../../src/components/select/use-options.ts"],"sourcesContent":["import { debounce, o as chainObj } from '@cat-kit/core'\nimport { computed, shallowRef, watch, type ShallowRef, type ComputedRef } from 'vue'\n\nimport type { SelectProps } from '../../types'\n\ninterface Options {\n props: SelectProps\n}\n\ninterface UseOptionsReturned {\n /** 查询字符串 */\n queryString: ShallowRef<string>\n /** 选项 */\n options: ComputedRef<Record<string, any>[]>\n /** 所有选项 */\n allOptions: ComputedRef<Record<string, any>[]>\n /** 将临时选项转换为创建的选项 */\n temOptionsToCreatedOptions: () => void\n /** 清空用户创建的选项 */\n clearCreatedOptions: () => void\n}\n\n// 允许创建的实现\n// 1. 在过滤时将选项加入待选列表中\n// 2. 如果选择了改临时选项,则取消该选项的临时标记\n// 3. 如果第二次重新选择\n\nexport function useOptions(o: Options): UseOptionsReturned {\n const { props } = o\n\n /** 筛选 */\n const queryString = shallowRef('')\n\n const remoteOptions = shallowRef<Record<string, any>[]>([])\n const filteredOptions = shallowRef<Record<string, any>[]>([])\n // 临时选项\n const tempOptions = shallowRef<({ __isTemp: true } & Record<string, any>)[]>([])\n // 创建的选项\n const createdOptions = shallowRef<({ __isTemp: false } & Record<string, any>)[]>([])\n\n function temOptionsToCreatedOptions() {\n createdOptions.value = tempOptions.value.map((item) => {\n return { ...item, __isTemp: false }\n })\n }\n\n function clearCreatedOptions() {\n createdOptions.value = []\n }\n\n const setTempOption = (qs: string, options?: Record<string, any>[]) => {\n if (!qs?.trim() || !props.creatable) {\n tempOptions.value = []\n return\n }\n const exactMatch = options\n ? options.some((option) => {\n return chainObj(option).get(props.labelKey!) === qs\n })\n : false\n\n if (!exactMatch) {\n tempOptions.value = [{ [props.labelKey!]: qs, [props.valueKey!]: qs, __isTemp: true }]\n }\n }\n\n const allOptions = computed(() => {\n const { options } = props\n if (typeof options === 'function') return remoteOptions.value\n return options ?? []\n })\n\n /** 展示的选项 */\n const options = computed(() => {\n const { options } = props\n\n if (typeof options === 'function') return remoteOptions.value\n\n const prependOptions = tempOptions.value?.length ? tempOptions.value : createdOptions.value\n\n if (!options) {\n return prependOptions\n }\n\n return [...prependOptions, ...filteredOptions.value]\n })\n\n // TODO: 如有性能问题可以考虑优化\n watch(\n [queryString, () => props.options],\n debounce(async ([qs, propsOptions]) => {\n if (typeof propsOptions === 'function') {\n const options = await propsOptions(qs)\n remoteOptions.value = options\n setTempOption(qs, options)\n } else {\n // 当选项不是函数时,可以创建选项\n const { labelKey } = props\n\n if (!qs) {\n filteredOptions.value = propsOptions ?? []\n setTempOption(qs, filteredOptions.value)\n return\n }\n\n const _filteredOptions =\n propsOptions?.filter((item) => {\n return chainObj(item).get(labelKey!)?.includes(qs) ?? false\n }) ?? []\n\n setTempOption(qs, _filteredOptions)\n filteredOptions.value = _filteredOptions\n }\n }, 200),\n { immediate: true }\n )\n\n return { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreatedOptions }\n}\n"],"mappings":";;;AA2BA,SAAgB,WAAW,KAAgC;CACzD,MAAM,EAAE,UAAUA;;CAGlB,MAAM,cAAc,WAAW,GAAG;CAElC,MAAM,gBAAgB,WAAkC,EAAE,CAAC;CAC3D,MAAM,kBAAkB,WAAkC,EAAE,CAAC;CAE7D,MAAM,cAAc,WAAyD,EAAE,CAAC;CAEhF,MAAM,iBAAiB,WAA0D,EAAE,CAAC;CAEpF,SAAS,6BAA6B;
|
|
1
|
+
{"version":3,"file":"use-options.js","names":["o","chainObj"],"sources":["../../../src/components/select/use-options.ts"],"sourcesContent":["import { debounce, o as chainObj } from '@cat-kit/core'\nimport { computed, shallowRef, watch, type ShallowRef, type ComputedRef } from 'vue'\n\nimport type { SelectProps } from '../../types'\n\ninterface Options {\n props: SelectProps\n}\n\ninterface UseOptionsReturned {\n /** 查询字符串 */\n queryString: ShallowRef<string>\n /** 选项 */\n options: ComputedRef<Record<string, any>[]>\n /** 所有选项 */\n allOptions: ComputedRef<Record<string, any>[]>\n /** 将临时选项转换为创建的选项 */\n temOptionsToCreatedOptions: () => void\n /** 清空用户创建的选项 */\n clearCreatedOptions: () => void\n}\n\n// 允许创建的实现\n// 1. 在过滤时将选项加入待选列表中\n// 2. 如果选择了改临时选项,则取消该选项的临时标记\n// 3. 如果第二次重新选择\n\nexport function useOptions(o: Options): UseOptionsReturned {\n const { props } = o\n\n /** 筛选 */\n const queryString = shallowRef('')\n\n const remoteOptions = shallowRef<Record<string, any>[]>([])\n const filteredOptions = shallowRef<Record<string, any>[]>([])\n // 临时选项\n const tempOptions = shallowRef<({ __isTemp: true } & Record<string, any>)[]>([])\n // 创建的选项\n const createdOptions = shallowRef<({ __isTemp: false } & Record<string, any>)[]>([])\n\n function temOptionsToCreatedOptions() {\n createdOptions.value = tempOptions.value.map((item) => {\n return { ...item, __isTemp: false }\n })\n }\n\n function clearCreatedOptions() {\n createdOptions.value = []\n }\n\n const setTempOption = (qs: string, options?: Record<string, any>[]) => {\n if (!qs?.trim() || !props.creatable) {\n tempOptions.value = []\n return\n }\n const exactMatch = options\n ? options.some((option) => {\n return chainObj(option).get(props.labelKey!) === qs\n })\n : false\n\n if (!exactMatch) {\n tempOptions.value = [{ [props.labelKey!]: qs, [props.valueKey!]: qs, __isTemp: true }]\n }\n }\n\n const allOptions = computed(() => {\n const { options } = props\n if (typeof options === 'function') return remoteOptions.value\n return options ?? []\n })\n\n /** 展示的选项 */\n const options = computed(() => {\n const { options } = props\n\n if (typeof options === 'function') return remoteOptions.value\n\n const prependOptions = tempOptions.value?.length ? tempOptions.value : createdOptions.value\n\n if (!options) {\n return prependOptions\n }\n\n return [...prependOptions, ...filteredOptions.value]\n })\n\n // TODO: 如有性能问题可以考虑优化\n watch(\n [queryString, () => props.options],\n debounce(async ([qs, propsOptions]) => {\n if (typeof propsOptions === 'function') {\n const options = await propsOptions(qs)\n remoteOptions.value = options\n setTempOption(qs, options)\n } else {\n // 当选项不是函数时,可以创建选项\n const { labelKey } = props\n\n if (!qs) {\n filteredOptions.value = propsOptions ?? []\n setTempOption(qs, filteredOptions.value)\n return\n }\n\n const _filteredOptions =\n propsOptions?.filter((item) => {\n return chainObj(item).get(labelKey!)?.includes(qs) ?? false\n }) ?? []\n\n setTempOption(qs, _filteredOptions)\n filteredOptions.value = _filteredOptions\n }\n }, 200),\n { immediate: true }\n )\n\n return { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreatedOptions }\n}\n"],"mappings":";;;AA2BA,SAAgB,WAAW,KAAgC;CACzD,MAAM,EAAE,UAAUA;;CAGlB,MAAM,cAAc,WAAW,GAAG;CAElC,MAAM,gBAAgB,WAAkC,EAAE,CAAC;CAC3D,MAAM,kBAAkB,WAAkC,EAAE,CAAC;CAE7D,MAAM,cAAc,WAAyD,EAAE,CAAC;CAEhF,MAAM,iBAAiB,WAA0D,EAAE,CAAC;CAEpF,SAAS,6BAA6B;EACpC,eAAe,QAAQ,YAAY,MAAM,KAAK,SAAS;GACrD,OAAO;IAAE,GAAG;IAAM,UAAU;IAAO;IACnC;;CAGJ,SAAS,sBAAsB;EAC7B,eAAe,QAAQ,EAAE;;CAG3B,MAAM,iBAAiB,IAAY,YAAoC;EACrE,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,MAAM,WAAW;GACnC,YAAY,QAAQ,EAAE;GACtB;;EAQF,IAAI,EANe,UACf,QAAQ,MAAM,WAAW;GACvB,OAAOC,EAAS,OAAO,CAAC,IAAI,MAAM,SAAU,KAAK;IACjD,GACF,QAGF,YAAY,QAAQ,CAAC;IAAG,MAAM,WAAY;IAAK,MAAM,WAAY;GAAI,UAAU;GAAM,CAAC;;CAI1F,MAAM,aAAa,eAAe;EAChC,MAAM,EAAE,YAAY;EACpB,IAAI,OAAO,YAAY,YAAY,OAAO,cAAc;EACxD,OAAO,WAAW,EAAE;GACpB;;CAGF,MAAM,UAAU,eAAe;EAC7B,MAAM,EAAE,YAAY;EAEpB,IAAI,OAAO,YAAY,YAAY,OAAO,cAAc;EAExD,MAAM,iBAAiB,YAAY,OAAO,SAAS,YAAY,QAAQ,eAAe;EAEtF,IAAI,CAAC,SACH,OAAO;EAGT,OAAO,CAAC,GAAG,gBAAgB,GAAG,gBAAgB,MAAM;GACpD;CAGF,MACE,CAAC,mBAAmB,MAAM,QAAQ,EAClC,SAAS,OAAO,CAAC,IAAI,kBAAkB;EACrC,IAAI,OAAO,iBAAiB,YAAY;GACtC,MAAM,UAAU,MAAM,aAAa,GAAG;GACtC,cAAc,QAAQ;GACtB,cAAc,IAAI,QAAQ;SACrB;GAEL,MAAM,EAAE,aAAa;GAErB,IAAI,CAAC,IAAI;IACP,gBAAgB,QAAQ,gBAAgB,EAAE;IAC1C,cAAc,IAAI,gBAAgB,MAAM;IACxC;;GAGF,MAAM,mBACJ,cAAc,QAAQ,SAAS;IAC7B,OAAOA,EAAS,KAAK,CAAC,IAAI,SAAU,EAAE,SAAS,GAAG,IAAI;KACtD,IAAI,EAAE;GAEV,cAAc,IAAI,iBAAiB;GACnC,gBAAgB,QAAQ;;IAEzB,IAAI,EACP,EAAE,WAAW,MAAM,CACpB;CAED,OAAO;EAAE;EAAa;EAAS;EAAY;EAA4B;EAAqB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider-thumb.js","names":[],"sources":["../../../src/components/slider/slider-thumb.vue"],"sourcesContent":["<template>\n <div ref=\"thumb\" :class=\"cls.e('thumb')\" :style></div>\n</template>\n<script lang=\"ts\" setup>\nimport { useDrag, useUserAction } from '@veltra/compositions'\nimport { computed, inject, useTemplateRef, watch } from 'vue'\n\nimport { sliderContextKey } from './di'\n\nconst props = defineProps<{\n modelValue: number\n}>()\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: number): void\n}>()\n\nconst { cls, range, disabled, sliderProps, getOffsetByStep } = inject(sliderContextKey)!\n\nconst thumbRef = useTemplateRef('thumb')\n\nconst style = computed(() => {\n if (sliderProps.vertical) {\n return {\n transform: `translate(0, ${props.modelValue}px)`\n }\n }\n return {\n transform: `translate(${props.modelValue}px, 0)`\n }\n})\n\nconst { userAction, isUserActive } = useUserAction()\n\nfunction updateModel(offset: number) {\n offset = getOffsetByStep(offset)\n emit('update:modelValue', offset)\n return offset\n}\n\nconst dragger = useDrag({\n target: computed(() => (disabled.value ? null : thumbRef.value)),\n\n onDrag: userAction(({ offsetX, offsetY }) => {\n updateModel(sliderProps.vertical ? offsetY : offsetX)\n }),\n rangeX: range,\n rangeY: range,\n onDragEnd: userAction(({ offsetX, offsetY }) => {\n const offset = updateModel(sliderProps.vertical ? offsetY : offsetX)\n updateDragger(offset)\n })\n})\n\nfunction updateDragger(offset: number) {\n if (sliderProps.vertical) {\n dragger.update({ offsetY: offset })\n } else {\n dragger.update({ offsetX: offset })\n }\n}\n\nwatch(\n () => props.modelValue,\n (offset) => {\n if (isUserActive()) return\n updateDragger(offset)\n }\n)\n</script>\n"],"mappings":";;;;;;;;;EASA,MAAM,QAAQ;EAId,MAAM,OAAO;EAIb,MAAM,EAAE,KAAK,OAAO,UAAU,aAAa,oBAAoB,OAAO,
|
|
1
|
+
{"version":3,"file":"slider-thumb.js","names":[],"sources":["../../../src/components/slider/slider-thumb.vue"],"sourcesContent":["<template>\n <div ref=\"thumb\" :class=\"cls.e('thumb')\" :style></div>\n</template>\n<script lang=\"ts\" setup>\nimport { useDrag, useUserAction } from '@veltra/compositions'\nimport { computed, inject, useTemplateRef, watch } from 'vue'\n\nimport { sliderContextKey } from './di'\n\nconst props = defineProps<{\n modelValue: number\n}>()\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: number): void\n}>()\n\nconst { cls, range, disabled, sliderProps, getOffsetByStep } = inject(sliderContextKey)!\n\nconst thumbRef = useTemplateRef('thumb')\n\nconst style = computed(() => {\n if (sliderProps.vertical) {\n return {\n transform: `translate(0, ${props.modelValue}px)`\n }\n }\n return {\n transform: `translate(${props.modelValue}px, 0)`\n }\n})\n\nconst { userAction, isUserActive } = useUserAction()\n\nfunction updateModel(offset: number) {\n offset = getOffsetByStep(offset)\n emit('update:modelValue', offset)\n return offset\n}\n\nconst dragger = useDrag({\n target: computed(() => (disabled.value ? null : thumbRef.value)),\n\n onDrag: userAction(({ offsetX, offsetY }) => {\n updateModel(sliderProps.vertical ? offsetY : offsetX)\n }),\n rangeX: range,\n rangeY: range,\n onDragEnd: userAction(({ offsetX, offsetY }) => {\n const offset = updateModel(sliderProps.vertical ? offsetY : offsetX)\n updateDragger(offset)\n })\n})\n\nfunction updateDragger(offset: number) {\n if (sliderProps.vertical) {\n dragger.update({ offsetY: offset })\n } else {\n dragger.update({ offsetX: offset })\n }\n}\n\nwatch(\n () => props.modelValue,\n (offset) => {\n if (isUserActive()) return\n updateDragger(offset)\n }\n)\n</script>\n"],"mappings":";;;;;;;;;EASA,MAAM,QAAQ;EAId,MAAM,OAAO;EAIb,MAAM,EAAE,KAAK,OAAO,UAAU,aAAa,oBAAoB,OAAO,iBAAgB;EAEtF,MAAM,WAAW,eAAe,QAAO;EAEvC,MAAM,QAAQ,eAAe;GAC3B,IAAI,YAAY,UACd,OAAO,EACL,WAAW,gBAAgB,MAAM,WAAW,MAC9C;GAEF,OAAO,EACL,WAAW,aAAa,MAAM,WAAW,SAC3C;IACD;EAED,MAAM,EAAE,YAAY,iBAAiB,eAAc;EAEnD,SAAS,YAAY,QAAgB;GACnC,SAAS,gBAAgB,OAAM;GAC/B,KAAK,qBAAqB,OAAM;GAChC,OAAO;;EAGT,MAAM,UAAU,QAAQ;GACtB,QAAQ,eAAgB,SAAS,QAAQ,OAAO,SAAS,MAAM;GAE/D,QAAQ,YAAY,EAAE,SAAS,cAAc;IAC3C,YAAY,YAAY,WAAW,UAAU,QAAO;KACrD;GACD,QAAQ;GACR,QAAQ;GACR,WAAW,YAAY,EAAE,SAAS,cAAc;IAE9C,cADe,YAAY,YAAY,WAAW,UAAU,QACxC,CAAA;KACrB;GACF,CAAA;EAED,SAAS,cAAc,QAAgB;GACrC,IAAI,YAAY,UACd,QAAQ,OAAO,EAAE,SAAS,QAAQ,CAAA;QAElC,QAAQ,OAAO,EAAE,SAAS,QAAQ,CAAA;;EAItC,YACQ,MAAM,aACX,WAAW;GACV,IAAI,cAAa,EAAG;GACpB,cAAc,OAAM;IAExB;;uBAnEE,mBAAsD,OAAA;IAAjD,KAAI;IAAS,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,QAAA,CAAA;IAAY,OAAK,eAAL,MAAA,MAAK"}
|
|
@@ -84,7 +84,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
84
84
|
return [...Array.from({ length: tickLength }, (_, i) => i * offsetPercent), 100];
|
|
85
85
|
});
|
|
86
86
|
watch([offset1, offset2], userAction((v) => {
|
|
87
|
-
if (props.range) emit("update:modelValue", v.map(sliderOffset2Value).
|
|
87
|
+
if (props.range) emit("update:modelValue", v.map(sliderOffset2Value).toSorted());
|
|
88
88
|
else emit("update:modelValue", sliderOffset2Value(v[0]));
|
|
89
89
|
}));
|
|
90
90
|
function handleClickSlider(e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","names":[],"sources":["../../../src/components/slider/slider.vue"],"sourcesContent":["<template>\n <div v-if=\"!readonly\" :class=\"className\">\n <div :class=\"cls.e('track')\" ref=\"sliderRef\" @click=\"handleClickSlider\">\n <div :class=\"cls.e('bar')\" :style=\"barStyles\" />\n\n <slider-thumb v-model=\"offset1\" @click.stop />\n <slider-thumb v-if=\"range\" v-model=\"offset2\" @click.stop />\n\n <div\n v-for=\"tick in ticks\"\n :style=\"{ [vertical ? 'bottom' : 'left']: `${tick}%` }\"\n :class=\"cls.e('tick')\"\n />\n </div>\n </div>\n\n <div v-else>\n {{ props.modelValue }}\n </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends number | [number, number]\">\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, watch } from 'vue'\n\nimport type { SliderProps, SliderEmits } from '../../types'\nimport { sliderContextKey } from './di'\nimport SliderThumb from './slider-thumb.vue'\nimport { useSlider } from './use-slider'\n\ndefineOptions({\n name: 'Slider'\n})\n\nconst props = withDefaults(defineProps<SliderProps<T>>(), {\n min: 0,\n max: 100,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<SliderEmits<T>>()\n\nconst cls = bem('slider')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst className = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('range', props.range),\n bem.is('horizontal', !props.vertical),\n bem.is('vertical', props.vertical)\n ]\n})\n\nconst {\n offset1,\n offset2,\n sliderRef,\n slideRange,\n sliderSize,\n sliderOffset2Value,\n value2SliderOffset,\n getOffsetByStep\n} = useSlider(props)\n\nconst barStyles = computed(() => {\n const { vertical } = props\n const offsetProp = vertical ? 'bottom' : 'left'\n const sizeProp = vertical ? 'height' : 'width'\n\n if (!props.range) {\n return {\n [offsetProp]: 0,\n [sizeProp]: `${Math.abs(offset1.value)}px`\n }\n }\n return {\n [offsetProp]: `${Math.min(Math.abs(offset1.value), Math.abs(offset2.value))}px`,\n [sizeProp]: `${Math.abs(offset1.value - offset2.value)}px`\n }\n})\n\nconst { userAction, isUserActive } = useUserAction()\n\nwatch(\n [sliderSize, ...['modelValue', 'range', 'max', 'min', 'vertical'].map((k) => () => props[k])],\n ([size, value, range]) => {\n if (isUserActive()) return\n if (value === undefined || size === 0) return\n\n if (range) {\n offset1.value = value2SliderOffset((value as [number, number])[0])\n offset2.value = value2SliderOffset((value as [number, number])[1])\n } else {\n offset1.value = value2SliderOffset(value as number)\n }\n },\n { immediate: true }\n)\n\nconst ticks = computed(() => {\n const { step, min, max } = props\n if (!step) return []\n const tickLength = Math.ceil((max! - min!) / step)\n const offsetPercent = (step / (max! - min!)) * 100\n\n return [...Array.from({ length: tickLength }, (_, i) => i * offsetPercent), 100]\n})\n\nwatch(\n [offset1, offset2],\n userAction((v) => {\n if (props.range) {\n emit('update:modelValue', v.map(sliderOffset2Value).
|
|
1
|
+
{"version":3,"file":"slider.js","names":[],"sources":["../../../src/components/slider/slider.vue"],"sourcesContent":["<template>\n <div v-if=\"!readonly\" :class=\"className\">\n <div :class=\"cls.e('track')\" ref=\"sliderRef\" @click=\"handleClickSlider\">\n <div :class=\"cls.e('bar')\" :style=\"barStyles\" />\n\n <slider-thumb v-model=\"offset1\" @click.stop />\n <slider-thumb v-if=\"range\" v-model=\"offset2\" @click.stop />\n\n <div\n v-for=\"tick in ticks\"\n :style=\"{ [vertical ? 'bottom' : 'left']: `${tick}%` }\"\n :class=\"cls.e('tick')\"\n />\n </div>\n </div>\n\n <div v-else>\n {{ props.modelValue }}\n </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends number | [number, number]\">\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, watch } from 'vue'\n\nimport type { SliderProps, SliderEmits } from '../../types'\nimport { sliderContextKey } from './di'\nimport SliderThumb from './slider-thumb.vue'\nimport { useSlider } from './use-slider'\n\ndefineOptions({\n name: 'Slider'\n})\n\nconst props = withDefaults(defineProps<SliderProps<T>>(), {\n min: 0,\n max: 100,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<SliderEmits<T>>()\n\nconst cls = bem('slider')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst className = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('range', props.range),\n bem.is('horizontal', !props.vertical),\n bem.is('vertical', props.vertical)\n ]\n})\n\nconst {\n offset1,\n offset2,\n sliderRef,\n slideRange,\n sliderSize,\n sliderOffset2Value,\n value2SliderOffset,\n getOffsetByStep\n} = useSlider(props)\n\nconst barStyles = computed(() => {\n const { vertical } = props\n const offsetProp = vertical ? 'bottom' : 'left'\n const sizeProp = vertical ? 'height' : 'width'\n\n if (!props.range) {\n return {\n [offsetProp]: 0,\n [sizeProp]: `${Math.abs(offset1.value)}px`\n }\n }\n return {\n [offsetProp]: `${Math.min(Math.abs(offset1.value), Math.abs(offset2.value))}px`,\n [sizeProp]: `${Math.abs(offset1.value - offset2.value)}px`\n }\n})\n\nconst { userAction, isUserActive } = useUserAction()\n\nwatch(\n [sliderSize, ...['modelValue', 'range', 'max', 'min', 'vertical'].map((k) => () => props[k])],\n ([size, value, range]) => {\n if (isUserActive()) return\n if (value === undefined || size === 0) return\n\n if (range) {\n offset1.value = value2SliderOffset((value as [number, number])[0])\n offset2.value = value2SliderOffset((value as [number, number])[1])\n } else {\n offset1.value = value2SliderOffset(value as number)\n }\n },\n { immediate: true }\n)\n\nconst ticks = computed(() => {\n const { step, min, max } = props\n if (!step) return []\n const tickLength = Math.ceil((max! - min!) / step)\n const offsetPercent = (step / (max! - min!)) * 100\n\n return [...Array.from({ length: tickLength }, (_, i) => i * offsetPercent), 100]\n})\n\nwatch(\n [offset1, offset2],\n userAction((v) => {\n if (props.range) {\n emit('update:modelValue', v.map(sliderOffset2Value).toSorted() as T)\n } else {\n emit('update:modelValue', sliderOffset2Value(v[0]) as T)\n }\n })\n)\n\nfunction handleClickSlider(e: MouseEvent) {\n if (disabled.value || props.range) return\n\n // 获取点击位置相对于滑块的偏移量\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()\n\n offset1.value = getOffsetByStep(e.clientX - rect.left)\n}\n\nprovide(sliderContextKey, {\n sliderProps: props,\n disabled,\n range: slideRange,\n cls,\n getOffsetByStep\n})\n</script>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-slider.js","names":[],"sources":["../../../src/components/slider/use-slider.ts"],"sourcesContent":["import { useResizeObserver } from '@veltra/compositions'\nimport { ref, type Ref, type ShallowRef, shallowRef } from 'vue'\n\nimport type { SliderProps } from '../../types'\n\ninterface UseSliderReturn {\n offset1: Ref<number>\n offset2: Ref<number>\n sliderSize: Ref<number>\n sliderRef: ShallowRef<HTMLElement | undefined>\n slideRange: [number, number]\n value2SliderOffset: (value: number) => number\n sliderOffset2Value: (offset: number) => number\n getOffsetByStep: (offset: number) => number\n}\n\nexport function useSlider(props: SliderProps<number | [number, number]>): UseSliderReturn {\n const sliderRef = shallowRef<HTMLElement>()\n const sliderSize = ref(0)\n const slideRange: [number, number] = [0, 0]\n const offset1 = ref(0)\n const offset2 = ref(0)\n\n useResizeObserver({\n targets: sliderRef,\n onResize([entry]) {\n if (!entry) return\n const { blockSize, inlineSize } = entry.borderBoxSize[0] ?? {}\n sliderSize.value = (props.vertical ? blockSize : inlineSize) ?? 0\n if (props.vertical) {\n slideRange[0] = -sliderSize.value\n slideRange[1] = 0\n } else {\n slideRange[0] = 0\n slideRange[1] = sliderSize.value\n }\n }\n })\n\n /**\n * 将value转换为slider的offset\n * @param value\n * @returns\n */\n function value2SliderOffset(value: number): number {\n const { min, max, vertical } = props\n const progress = (value - min!) / (max! - min!)\n const offset = sliderSize.value * progress\n return vertical ? -offset : offset\n }\n\n /**\n * 将slider的offset转换为value\n * @param offset\n * @returns\n */\n function sliderOffset2Value(offset: number): number {\n const { min, max } = props\n const progress = Math.abs(offset) / sliderSize.value\n\n return Math.round(progress * (max! - min!) + min!)\n }\n\n function getOffsetByStep(offset: number) {\n const { min, max, step } = props\n\n if (step) {\n const slideStep = (sliderSize.value / (max! - min!)) * step\n offset = Math.round(offset / slideStep) * slideStep\n\n if (offset > slideRange[1]) {\n offset = slideRange[1]\n } else if (offset < slideRange[0]) {\n offset = slideRange[0]\n }\n }\n\n return offset\n }\n\n return {\n offset1,\n offset2,\n sliderSize,\n sliderRef,\n slideRange,\n value2SliderOffset,\n sliderOffset2Value,\n getOffsetByStep\n }\n}\n"],"mappings":";;;AAgBA,SAAgB,UAAU,OAAgE;CACxF,MAAM,YAAY,YAAyB;CAC3C,MAAM,aAAa,IAAI,EAAE;CACzB,MAAM,aAA+B,CAAC,GAAG,EAAE;CAC3C,MAAM,UAAU,IAAI,EAAE;CACtB,MAAM,UAAU,IAAI,EAAE;
|
|
1
|
+
{"version":3,"file":"use-slider.js","names":[],"sources":["../../../src/components/slider/use-slider.ts"],"sourcesContent":["import { useResizeObserver } from '@veltra/compositions'\nimport { ref, type Ref, type ShallowRef, shallowRef } from 'vue'\n\nimport type { SliderProps } from '../../types'\n\ninterface UseSliderReturn {\n offset1: Ref<number>\n offset2: Ref<number>\n sliderSize: Ref<number>\n sliderRef: ShallowRef<HTMLElement | undefined>\n slideRange: [number, number]\n value2SliderOffset: (value: number) => number\n sliderOffset2Value: (offset: number) => number\n getOffsetByStep: (offset: number) => number\n}\n\nexport function useSlider(props: SliderProps<number | [number, number]>): UseSliderReturn {\n const sliderRef = shallowRef<HTMLElement>()\n const sliderSize = ref(0)\n const slideRange: [number, number] = [0, 0]\n const offset1 = ref(0)\n const offset2 = ref(0)\n\n useResizeObserver({\n targets: sliderRef,\n onResize([entry]) {\n if (!entry) return\n const { blockSize, inlineSize } = entry.borderBoxSize[0] ?? {}\n sliderSize.value = (props.vertical ? blockSize : inlineSize) ?? 0\n if (props.vertical) {\n slideRange[0] = -sliderSize.value\n slideRange[1] = 0\n } else {\n slideRange[0] = 0\n slideRange[1] = sliderSize.value\n }\n }\n })\n\n /**\n * 将value转换为slider的offset\n * @param value\n * @returns\n */\n function value2SliderOffset(value: number): number {\n const { min, max, vertical } = props\n const progress = (value - min!) / (max! - min!)\n const offset = sliderSize.value * progress\n return vertical ? -offset : offset\n }\n\n /**\n * 将slider的offset转换为value\n * @param offset\n * @returns\n */\n function sliderOffset2Value(offset: number): number {\n const { min, max } = props\n const progress = Math.abs(offset) / sliderSize.value\n\n return Math.round(progress * (max! - min!) + min!)\n }\n\n function getOffsetByStep(offset: number) {\n const { min, max, step } = props\n\n if (step) {\n const slideStep = (sliderSize.value / (max! - min!)) * step\n offset = Math.round(offset / slideStep) * slideStep\n\n if (offset > slideRange[1]) {\n offset = slideRange[1]\n } else if (offset < slideRange[0]) {\n offset = slideRange[0]\n }\n }\n\n return offset\n }\n\n return {\n offset1,\n offset2,\n sliderSize,\n sliderRef,\n slideRange,\n value2SliderOffset,\n sliderOffset2Value,\n getOffsetByStep\n }\n}\n"],"mappings":";;;AAgBA,SAAgB,UAAU,OAAgE;CACxF,MAAM,YAAY,YAAyB;CAC3C,MAAM,aAAa,IAAI,EAAE;CACzB,MAAM,aAA+B,CAAC,GAAG,EAAE;CAC3C,MAAM,UAAU,IAAI,EAAE;CACtB,MAAM,UAAU,IAAI,EAAE;CAEtB,kBAAkB;EAChB,SAAS;EACT,SAAS,CAAC,QAAQ;GAChB,IAAI,CAAC,OAAO;GACZ,MAAM,EAAE,WAAW,eAAe,MAAM,cAAc,MAAM,EAAE;GAC9D,WAAW,SAAS,MAAM,WAAW,YAAY,eAAe;GAChE,IAAI,MAAM,UAAU;IAClB,WAAW,KAAK,CAAC,WAAW;IAC5B,WAAW,KAAK;UACX;IACL,WAAW,KAAK;IAChB,WAAW,KAAK,WAAW;;;EAGhC,CAAC;;;;;;CAOF,SAAS,mBAAmB,OAAuB;EACjD,MAAM,EAAE,KAAK,KAAK,aAAa;EAC/B,MAAM,YAAY,QAAQ,QAAS,MAAO;EAC1C,MAAM,SAAS,WAAW,QAAQ;EAClC,OAAO,WAAW,CAAC,SAAS;;;;;;;CAQ9B,SAAS,mBAAmB,QAAwB;EAClD,MAAM,EAAE,KAAK,QAAQ;EACrB,MAAM,WAAW,KAAK,IAAI,OAAO,GAAG,WAAW;EAE/C,OAAO,KAAK,MAAM,YAAY,MAAO,OAAQ,IAAK;;CAGpD,SAAS,gBAAgB,QAAgB;EACvC,MAAM,EAAE,KAAK,KAAK,SAAS;EAE3B,IAAI,MAAM;GACR,MAAM,YAAa,WAAW,SAAS,MAAO,OAAS;GACvD,SAAS,KAAK,MAAM,SAAS,UAAU,GAAG;GAE1C,IAAI,SAAS,WAAW,IACtB,SAAS,WAAW;QACf,IAAI,SAAS,WAAW,IAC7B,SAAS,WAAW;;EAIxB,OAAO;;CAGT,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"steps.js","names":[],"sources":["../../../src/components/steps/steps.vue"],"sourcesContent":["<template>\n <ol :class=\"className\" ref=\"steps\">\n <li\n v-for=\"(item, index) in items\"\n :class=\"[\n cls.e('item'),\n bem.is('current', index === currentIndex),\n bem.is('finished', currentIndex === undefined || index < currentIndex)\n ]\"\n @click=\"handleStepClick(item, index)\"\n >\n <div :class=\"cls.e('node')\">\n <i :class=\"cls.e('link')\" v-if=\"index !== items.length - 1\"></i>\n\n <span\n :class=\"cls.e('icon')\"\n @mouseenter=\"handleStepMouseenter($event, item, index)\"\n @mouseleave=\"handleStepMouseleave\"\n >\n <slot name=\"icon\" :item=\"item\" :index=\"index\">\n <UIcon v-if=\"currentIndex === undefined || index < currentIndex\">\n <Check />\n </UIcon>\n\n <template v-else>\n {{ index + 1 }}\n </template>\n </slot>\n </span>\n </div>\n\n <div :class=\"cls.e('content')\">\n <slot name=\"content\" :item=\"item\" :index=\"index\">\n {{ o(item).get(labelKey) }}\n </slot>\n </div>\n </li>\n\n <u-tip\n v-if=\"slots.tip\"\n ref=\"tip\"\n :trigger-dom=\"tipTriggerDom\"\n v-model:visible=\"tipVisible\"\n @update:visible=\"handleTipUpdateVisible\"\n >\n <template #content>\n <UNodeRender :content=\"tipContent\" />\n </template>\n </u-tip>\n </ol>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n, o } from '@cat-kit/core'\nimport { useFallbackProps } from '@veltra/compositions'\nimport { Check } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { StepsProps, StepsEmits, ComponentSize, StepsSlotScope } from '../../types'\nimport { UIcon } from '../icon'\nimport { UNodeRender } from '../node-render'\nimport { UTip } from '../tip'\n\ndefineOptions({\n name: 'Steps'\n})\n\nconst props = withDefaults(defineProps<StepsProps>(), {\n direction: 'horizontal',\n finishedStepType: 'success',\n labelKey: 'label'\n})\n\nconst emit = defineEmits<StepsEmits>()\n\nconst slots = defineSlots<{\n icon?: (scope: StepsSlotScope) => any\n content?: (scope: StepsSlotScope) => any\n tip?: (scope: StepsSlotScope) => any\n}>()\n\nconst cls = bem('steps')\n\nconst { size } = useFallbackProps([props], {\n size: 'default' as ComponentSize\n})\n\nconst className = computed(() => {\n const { direction, currentStepType, finishedStepType } = props\n const ret: string[] = [\n cls.b,\n bem.is(direction),\n cls.m(size.value),\n bem.is('align-center', props.alignCenter),\n cls.em('finished', finishedStepType)\n ]\n currentStepType && ret.push(cls.em('current', currentStepType))\n return ret\n})\n\nconst stepsRef = useTemplateRef('steps')\n\nconst currentToIndexMap = computed<Record<string, number> | undefined>(() => {\n const { currentKey, items } = props\n if (!currentKey) return undefined\n return items.reduce(\n (acc, item, index) => {\n acc[o(item).get(currentKey)] = index\n return acc\n },\n {} as Record<string, number>\n )\n})\n\n/** 当前索引 */\nconst currentIndex = computed<number | undefined>(() => {\n const { currentKey, current } = props\n if (current === undefined) return undefined\n\n if (currentKey) {\n return currentToIndexMap.value?.[current]\n }\n\n if (typeof current !== 'number') return undefined\n return n(current).range(0, props.items.length - 1)\n})\n\nwatch(currentIndex, (index) => {\n if (index === undefined || props.direction === 'vertical') return\n const step = stepsRef.value?.children[index]\n if (step) {\n step.scrollIntoView({\n behavior: 'smooth',\n block: 'center'\n })\n }\n})\n\n// 点击步骤项\nfunction handleStepClick(item: Record<string, any>, index: number) {\n emit('item-click', item, index)\n emit('update:current', props.currentKey ? o(item).get(props.currentKey) : index)\n}\n\n// 提示\nconst tipVisible = shallowRef(false)\nconst tipTriggerDom = shallowRef<HTMLElement>()\nconst tipContent = shallowRef()\n\nfunction handleStepMouseenter(event: MouseEvent, item: Record<string, any>, index: number) {\n if (!slots.tip) return\n tipTriggerDom.value = event.target as HTMLElement\n tipVisible.value = true\n tipContent.value = slots.tip?.({ item, index })\n}\n\nlet timer: number | undefined = undefined\nfunction closeTip() {\n timer = setTimeout(() => {\n tipVisible.value = false\n tipContent.value = undefined\n tipTriggerDom.value = undefined\n }, 250)\n}\n\nfunction handleTipUpdateVisible(visible: boolean) {\n visible && clearTimeout(timer)\n}\n\nfunction handleStepMouseleave() {\n if (!slots.tip) return\n closeTip()\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAEb,MAAM,QAAQ,UAAA;EAMd,MAAM,MAAM,IAAI,QAAO;EAEvB,MAAM,EAAE,SAAS,iBAAiB,CAAC,
|
|
1
|
+
{"version":3,"file":"steps.js","names":[],"sources":["../../../src/components/steps/steps.vue"],"sourcesContent":["<template>\n <ol :class=\"className\" ref=\"steps\">\n <li\n v-for=\"(item, index) in items\"\n :class=\"[\n cls.e('item'),\n bem.is('current', index === currentIndex),\n bem.is('finished', currentIndex === undefined || index < currentIndex)\n ]\"\n @click=\"handleStepClick(item, index)\"\n >\n <div :class=\"cls.e('node')\">\n <i :class=\"cls.e('link')\" v-if=\"index !== items.length - 1\"></i>\n\n <span\n :class=\"cls.e('icon')\"\n @mouseenter=\"handleStepMouseenter($event, item, index)\"\n @mouseleave=\"handleStepMouseleave\"\n >\n <slot name=\"icon\" :item=\"item\" :index=\"index\">\n <UIcon v-if=\"currentIndex === undefined || index < currentIndex\">\n <Check />\n </UIcon>\n\n <template v-else>\n {{ index + 1 }}\n </template>\n </slot>\n </span>\n </div>\n\n <div :class=\"cls.e('content')\">\n <slot name=\"content\" :item=\"item\" :index=\"index\">\n {{ o(item).get(labelKey) }}\n </slot>\n </div>\n </li>\n\n <u-tip\n v-if=\"slots.tip\"\n ref=\"tip\"\n :trigger-dom=\"tipTriggerDom\"\n v-model:visible=\"tipVisible\"\n @update:visible=\"handleTipUpdateVisible\"\n >\n <template #content>\n <UNodeRender :content=\"tipContent\" />\n </template>\n </u-tip>\n </ol>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n, o } from '@cat-kit/core'\nimport { useFallbackProps } from '@veltra/compositions'\nimport { Check } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { StepsProps, StepsEmits, ComponentSize, StepsSlotScope } from '../../types'\nimport { UIcon } from '../icon'\nimport { UNodeRender } from '../node-render'\nimport { UTip } from '../tip'\n\ndefineOptions({\n name: 'Steps'\n})\n\nconst props = withDefaults(defineProps<StepsProps>(), {\n direction: 'horizontal',\n finishedStepType: 'success',\n labelKey: 'label'\n})\n\nconst emit = defineEmits<StepsEmits>()\n\nconst slots = defineSlots<{\n icon?: (scope: StepsSlotScope) => any\n content?: (scope: StepsSlotScope) => any\n tip?: (scope: StepsSlotScope) => any\n}>()\n\nconst cls = bem('steps')\n\nconst { size } = useFallbackProps([props], {\n size: 'default' as ComponentSize\n})\n\nconst className = computed(() => {\n const { direction, currentStepType, finishedStepType } = props\n const ret: string[] = [\n cls.b,\n bem.is(direction),\n cls.m(size.value),\n bem.is('align-center', props.alignCenter),\n cls.em('finished', finishedStepType)\n ]\n currentStepType && ret.push(cls.em('current', currentStepType))\n return ret\n})\n\nconst stepsRef = useTemplateRef('steps')\n\nconst currentToIndexMap = computed<Record<string, number> | undefined>(() => {\n const { currentKey, items } = props\n if (!currentKey) return undefined\n return items.reduce(\n (acc, item, index) => {\n acc[o(item).get(currentKey)] = index\n return acc\n },\n {} as Record<string, number>\n )\n})\n\n/** 当前索引 */\nconst currentIndex = computed<number | undefined>(() => {\n const { currentKey, current } = props\n if (current === undefined) return undefined\n\n if (currentKey) {\n return currentToIndexMap.value?.[current]\n }\n\n if (typeof current !== 'number') return undefined\n return n(current).range(0, props.items.length - 1)\n})\n\nwatch(currentIndex, (index) => {\n if (index === undefined || props.direction === 'vertical') return\n const step = stepsRef.value?.children[index]\n if (step) {\n step.scrollIntoView({\n behavior: 'smooth',\n block: 'center'\n })\n }\n})\n\n// 点击步骤项\nfunction handleStepClick(item: Record<string, any>, index: number) {\n emit('item-click', item, index)\n emit('update:current', props.currentKey ? o(item).get(props.currentKey) : index)\n}\n\n// 提示\nconst tipVisible = shallowRef(false)\nconst tipTriggerDom = shallowRef<HTMLElement>()\nconst tipContent = shallowRef()\n\nfunction handleStepMouseenter(event: MouseEvent, item: Record<string, any>, index: number) {\n if (!slots.tip) return\n tipTriggerDom.value = event.target as HTMLElement\n tipVisible.value = true\n tipContent.value = slots.tip?.({ item, index })\n}\n\nlet timer: number | undefined = undefined\nfunction closeTip() {\n timer = setTimeout(() => {\n tipVisible.value = false\n tipContent.value = undefined\n tipTriggerDom.value = undefined\n }, 250)\n}\n\nfunction handleTipUpdateVisible(visible: boolean) {\n visible && clearTimeout(timer)\n}\n\nfunction handleStepMouseleave() {\n if (!slots.tip) return\n closeTip()\n}\n</script>\n"],"mappings":"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"}
|
|
@@ -9,14 +9,14 @@ type __VLS_Slots = {
|
|
|
9
9
|
tip?: (scope: StepsSlotScope) => any;
|
|
10
10
|
};
|
|
11
11
|
declare const __VLS_base: _$vue.DefineComponent<StepsProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
|
|
12
|
-
"item-click": (item: Record<string, any>, index: number) => any;
|
|
13
12
|
"update:current": (value?: string | number | undefined) => any;
|
|
13
|
+
"item-click": (item: Record<string, any>, index: number) => any;
|
|
14
14
|
}, string, _$vue.PublicProps, Readonly<StepsProps> & Readonly<{
|
|
15
|
-
"onItem-click"?: ((item: Record<string, any>, index: number) => any) | undefined;
|
|
16
15
|
"onUpdate:current"?: ((value?: string | number | undefined) => any) | undefined;
|
|
16
|
+
"onItem-click"?: ((item: Record<string, any>, index: number) => any) | undefined;
|
|
17
17
|
}>, {
|
|
18
|
-
direction: "horizontal" | "vertical";
|
|
19
18
|
labelKey: string;
|
|
19
|
+
direction: "horizontal" | "vertical";
|
|
20
20
|
finishedStepType: _$_veltra_utils0.ColorType;
|
|
21
21
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
22
22
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/switch/switch.vue"],"sourcesContent":["<template>\n <label :class=\"switchClass\" @click.stop>\n <input\n type=\"checkbox\"\n :class=\"cls.e('native')\"\n hidden\n :checked=\"model\"\n :disabled=\"disabled\"\n @input=\"handleInput\"\n />\n <span :class=\"[cls.e('text'), bem.is('selected', !model)]\" v-if=\"inactiveText\">\n {{ inactiveText }}\n </span>\n\n <div :class=\"cls.e('button')\">\n <span :class=\"cls.e('thumb')\"></span>\n </div>\n\n <span v-if=\"activeText\" :class=\"[cls.e('text'), bem.is('selected', model)]\">\n {{ activeText }}\n </span>\n </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { SwitchEmits, SwitchProps, _SwitchExposed } from '../../types'\n\ndefineOptions({\n name: 'Switch'\n})\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<SwitchEmits>()\n\nconst model = defineModel<boolean>()\n\nconst cls = bem('switch')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst switchClass = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('readonly', readonly.value),\n bem.is('checked', model.value)\n ]\n})\n\nconst handleInput = (e: Event) => {\n if (disabled.value || readonly.value) return\n\n const newValue = (e.target as HTMLInputElement).checked\n model.value = newValue\n emit('change', newValue)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAoB,SAAA,aAAC;EAEnC,MAAM,MAAM,IAAI,SAAQ;EAExB,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/switch/switch.vue"],"sourcesContent":["<template>\n <label :class=\"switchClass\" @click.stop>\n <input\n type=\"checkbox\"\n :class=\"cls.e('native')\"\n hidden\n :checked=\"model\"\n :disabled=\"disabled\"\n @input=\"handleInput\"\n />\n <span :class=\"[cls.e('text'), bem.is('selected', !model)]\" v-if=\"inactiveText\">\n {{ inactiveText }}\n </span>\n\n <div :class=\"cls.e('button')\">\n <span :class=\"cls.e('thumb')\"></span>\n </div>\n\n <span v-if=\"activeText\" :class=\"[cls.e('text'), bem.is('selected', model)]\">\n {{ activeText }}\n </span>\n </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { SwitchEmits, SwitchProps, _SwitchExposed } from '../../types'\n\ndefineOptions({\n name: 'Switch'\n})\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<SwitchEmits>()\n\nconst model = defineModel<boolean>()\n\nconst cls = bem('switch')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst switchClass = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('readonly', readonly.value),\n bem.is('checked', model.value)\n ]\n})\n\nconst handleInput = (e: Event) => {\n if (disabled.value || readonly.value) return\n\n const newValue = (e.target as HTMLInputElement).checked\n model.value = newValue\n emit('change', newValue)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAoB,SAAA,aAAC;EAEnC,MAAM,MAAM,IAAI,SAAQ;EAExB,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAC,EAAG,MAAM,CAAA;EAElF,MAAM,cAAc,eAAe;GACjC,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAK;IAChB,IAAI,GAAG,YAAY,SAAS,MAAK;IACjC,IAAI,GAAG,YAAY,SAAS,MAAK;IACjC,IAAI,GAAG,WAAW,MAAM,MAAK;IAC/B;IACD;EAED,MAAM,eAAe,MAAa;GAChC,IAAI,SAAS,SAAS,SAAS,OAAO;GAEtC,MAAM,WAAY,EAAE,OAA4B;GAChD,MAAM,QAAQ;GACd,KAAK,UAAU,SAAQ;;;uBAjEvB,mBAoBQ,SAAA;IApBA,OAAK,eAAE,YAAA,MAAW;IAAG,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;;IACrC,mBAOE,SAAA;KANA,MAAK;KACJ,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,SAAA,CAAA;KACb,QAAA;KACC,SAAS,MAAA;KACT,UAAU,MAAA,SAAA;KACV,SAAO;;IAEuD,QAAA,gBAAA,WAAA,EAAjE,mBAEO,QAAA;;KAFA,OAAK,eAAA,CAAG,MAAA,IAAA,CAAI,EAAC,OAAA,EAAU,MAAA,IAAA,CAAI,GAAE,YAAA,CAAc,MAAA,MAAK,CAAA,CAAA;uBAClD,QAAA,aAAY,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA;IAGjB,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,SAAA,CAAA,EAAA,EAAA,CAChB,mBAAqC,QAAA,EAA9B,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,QAAA,CAAA,EAAA,EAAA,MAAA,EAAA,CAAA,EAAA,EAAA;IAGT,QAAA,cAAA,WAAA,EAAZ,mBAEO,QAAA;;KAFkB,OAAK,eAAA,CAAG,MAAA,IAAA,CAAI,EAAC,OAAA,EAAU,MAAA,IAAA,CAAI,GAAE,YAAa,MAAA,MAAK,CAAA,CAAA;uBACnE,QAAA,WAAU,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/table/di.ts"],"sourcesContent":["import type { VirtualItem } from '@
|
|
1
|
+
{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/table/di.ts"],"sourcesContent":["import type { VirtualItem } from '@cat-kit/fe'\nimport type { BEM } from '@veltra/utils'\nimport type { ComputedRef, InjectionKey, ShallowRef, Slots } from 'vue'\n\nimport type {\n TableProps,\n TableColumnSlotsScope,\n TableColumnRenderContext,\n TableRow,\n RenderReturn,\n TableColumn,\n TableRowSlotsScope\n} from '../../types'\nimport type { ColumnNode } from './node/col'\nimport type { ColumnConfig } from './use-columns'\n\nexport const TableDIKey: InjectionKey<{\n /** 表格属性 */\n tableProps: TableProps\n /** 表格插槽 */\n tableSlots: Slots\n /** 类 */\n cls: BEM<'table'>\n /** 行 */\n rows: ShallowRef<TableRow[]>\n /** 选中行 */\n checkedRows: ShallowRef<Set<TableRow>>\n /** 结构化列 */\n columnConfig: ColumnConfig\n /** 事件处理方法 */\n handleRowClick: (row: TableRow, ev: MouseEvent) => void\n /** 单元格点击 */\n handleCellClick: (row: TableRow, column: TableColumn, ev: MouseEvent) => void\n /** 表格列插槽node */\n getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn\n /** 展开行插槽node */\n getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn\n /** 表头插槽node */\n getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn\n\n /** 展开/隐藏子节点 */\n toggleTreeRowExpand: (row: TableRow) => void\n\n /** 获取单元格的类 */\n getCellClass: (column: ColumnNode) => string\n\n /** 获取表头单元格的类 */\n getHeaderCellClass: (column: ColumnNode) => string\n\n /** 获取单元格上下文 */\n getCellCtx: (\n row: TableRow,\n column: ColumnNode\n ) => TableColumnSlotsScope | TableColumnRenderContext\n\n /**\n * 当前渲染窗口的虚拟项列表。\n *\n * 由 `useVirtualizer` 拆分出的 `items` shallowRef:仅在底层 `items`\n * 引用变化时才更新,`isScrolling` / 纯尺寸变化不会导致此 ref 更新。\n */\n virtualList: ShallowRef<VirtualItem[]>\n /** 是否启用虚拟列表 */\n virtualEnabled: ComputedRef<boolean>\n /**\n * 测量行元素尺寸(参数顺序与底层 `Virtualizer.measureElement` 一致)。\n *\n * 元素卸载(`el === null`)时会从底层解绑,避免被移除的 `<tr>` 继续触发\n * size=0 测量回调。\n */\n measureElement: (index: number, el: Element | null) => void\n}> = Symbol('TableDIKey')\n\nexport const TableResizeKey: InjectionKey<{\n handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void\n headerRef: ShallowRef<HTMLElement | undefined>\n}> = Symbol('TableResizeKey')\n"],"mappings":";AAgBA,MAAa,aAuDR,OAAO,aAAa;AAEzB,MAAa,iBAGR,OAAO,iBAAiB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"col.js","names":[],"sources":["../../../../src/components/table/node/col.ts"],"sourcesContent":["import { TreeNode } from '@cat-kit/core'\nimport { reactive, shallowReactive } from 'vue'\n\nimport type { TableColumn, TableColumnAlign } from '../../../types'\n\nexport class ColumnNode extends TreeNode<TableColumn, ColumnNode> {\n declare children?: ColumnNode[] | undefined\n declare parent?: ColumnNode\n /** 叶子节点数量 */\n leafs?: number\n\n nextNode: ColumnNode | null = null\n\n /** 列key */\n get key(): string {\n return this.data.key\n }\n set key(val) {\n this.data.key = val\n }\n /** 列名 */\n get name(): string {\n return this.data.name\n }\n set name(val) {\n this.data.name = val\n }\n\n /**\n * 列对齐方式\n * @default 'left'\n */\n get align(): TableColumnAlign {\n return this.data.align ?? 'left'\n }\n set align(val) {\n this.data.align = val\n }\n\n get headerAlign(): TableColumnAlign {\n return this.data.headerAlign ?? this.align\n }\n set headerAlign(val) {\n this.data.headerAlign = val\n }\n\n /** 宽度 */\n get width(): number | undefined {\n const { width } = this.data\n if (!width || (this.minWidth && width && width < this.minWidth)) {\n return this.minWidth\n }\n return width\n }\n set width(val) {\n if (this.minWidth && val && val < this.minWidth) {\n val = this.minWidth\n }\n this.data.width = val\n }\n /** 最小宽度 */\n get minWidth(): number | undefined {\n const minWidth = this.data.minWidth\n if (!minWidth && this.isLeaf) {\n return 100\n }\n return minWidth\n }\n set minWidth(val) {\n this.data.minWidth = val\n }\n\n /** 列固定方向 */\n get fixed(): 'left' | 'right' | undefined {\n if (this.depth > 0) return\n return this.data.fixed\n }\n set fixed(val) {\n this.data.fixed = val\n }\n\n /** 是否是左侧的最后一个固定列 */\n get isLastFixed(): boolean {\n return this.data.isLastFixed ?? false\n }\n\n /** 是否是右侧的第一个固定列 */\n get isFirstFixed(): boolean {\n return this.data.isFirstFixed ?? false\n }\n\n /** 是否是可调整宽度的列 */\n get resizable(): boolean {\n return this.data.resizable ?? true\n }\n\n style: Record<string, number> = reactive({})\n\n constructor(val: TableColumn, index: number, depth: number, parent?: ColumnNode) {\n super(val ? shallowReactive(val) : val, index, depth, parent)\n }\n}\n"],"mappings":";;;AAKA,IAAa,aAAb,cAAgC,SAAkC;;CAIhE;CAEA,WAA8B;;CAG9B,IAAI,MAAc;
|
|
1
|
+
{"version":3,"file":"col.js","names":[],"sources":["../../../../src/components/table/node/col.ts"],"sourcesContent":["import { TreeNode } from '@cat-kit/core'\nimport { reactive, shallowReactive } from 'vue'\n\nimport type { TableColumn, TableColumnAlign } from '../../../types'\n\nexport class ColumnNode extends TreeNode<TableColumn, ColumnNode> {\n declare children?: ColumnNode[] | undefined\n declare parent?: ColumnNode\n /** 叶子节点数量 */\n leafs?: number\n\n nextNode: ColumnNode | null = null\n\n /** 列key */\n get key(): string {\n return this.data.key\n }\n set key(val) {\n this.data.key = val\n }\n /** 列名 */\n get name(): string {\n return this.data.name\n }\n set name(val) {\n this.data.name = val\n }\n\n /**\n * 列对齐方式\n * @default 'left'\n */\n get align(): TableColumnAlign {\n return this.data.align ?? 'left'\n }\n set align(val) {\n this.data.align = val\n }\n\n get headerAlign(): TableColumnAlign {\n return this.data.headerAlign ?? this.align\n }\n set headerAlign(val) {\n this.data.headerAlign = val\n }\n\n /** 宽度 */\n get width(): number | undefined {\n const { width } = this.data\n if (!width || (this.minWidth && width && width < this.minWidth)) {\n return this.minWidth\n }\n return width\n }\n set width(val) {\n if (this.minWidth && val && val < this.minWidth) {\n val = this.minWidth\n }\n this.data.width = val\n }\n /** 最小宽度 */\n get minWidth(): number | undefined {\n const minWidth = this.data.minWidth\n if (!minWidth && this.isLeaf) {\n return 100\n }\n return minWidth\n }\n set minWidth(val) {\n this.data.minWidth = val\n }\n\n /** 列固定方向 */\n get fixed(): 'left' | 'right' | undefined {\n if (this.depth > 0) return\n return this.data.fixed\n }\n set fixed(val) {\n this.data.fixed = val\n }\n\n /** 是否是左侧的最后一个固定列 */\n get isLastFixed(): boolean {\n return this.data.isLastFixed ?? false\n }\n\n /** 是否是右侧的第一个固定列 */\n get isFirstFixed(): boolean {\n return this.data.isFirstFixed ?? false\n }\n\n /** 是否是可调整宽度的列 */\n get resizable(): boolean {\n return this.data.resizable ?? true\n }\n\n style: Record<string, number> = reactive({})\n\n constructor(val: TableColumn, index: number, depth: number, parent?: ColumnNode) {\n super(val ? shallowReactive(val) : val, index, depth, parent)\n }\n}\n"],"mappings":";;;AAKA,IAAa,aAAb,cAAgC,SAAkC;;CAIhE;CAEA,WAA8B;;CAG9B,IAAI,MAAc;EAChB,OAAO,KAAK,KAAK;;CAEnB,IAAI,IAAI,KAAK;EACX,KAAK,KAAK,MAAM;;;CAGlB,IAAI,OAAe;EACjB,OAAO,KAAK,KAAK;;CAEnB,IAAI,KAAK,KAAK;EACZ,KAAK,KAAK,OAAO;;;;;;CAOnB,IAAI,QAA0B;EAC5B,OAAO,KAAK,KAAK,SAAS;;CAE5B,IAAI,MAAM,KAAK;EACb,KAAK,KAAK,QAAQ;;CAGpB,IAAI,cAAgC;EAClC,OAAO,KAAK,KAAK,eAAe,KAAK;;CAEvC,IAAI,YAAY,KAAK;EACnB,KAAK,KAAK,cAAc;;;CAI1B,IAAI,QAA4B;EAC9B,MAAM,EAAE,UAAU,KAAK;EACvB,IAAI,CAAC,SAAU,KAAK,YAAY,SAAS,QAAQ,KAAK,UACpD,OAAO,KAAK;EAEd,OAAO;;CAET,IAAI,MAAM,KAAK;EACb,IAAI,KAAK,YAAY,OAAO,MAAM,KAAK,UACrC,MAAM,KAAK;EAEb,KAAK,KAAK,QAAQ;;;CAGpB,IAAI,WAA+B;EACjC,MAAM,WAAW,KAAK,KAAK;EAC3B,IAAI,CAAC,YAAY,KAAK,QACpB,OAAO;EAET,OAAO;;CAET,IAAI,SAAS,KAAK;EAChB,KAAK,KAAK,WAAW;;;CAIvB,IAAI,QAAsC;EACxC,IAAI,KAAK,QAAQ,GAAG;EACpB,OAAO,KAAK,KAAK;;CAEnB,IAAI,MAAM,KAAK;EACb,KAAK,KAAK,QAAQ;;;CAIpB,IAAI,cAAuB;EACzB,OAAO,KAAK,KAAK,eAAe;;;CAIlC,IAAI,eAAwB;EAC1B,OAAO,KAAK,KAAK,gBAAgB;;;CAInC,IAAI,YAAqB;EACvB,OAAO,KAAK,KAAK,aAAa;;CAGhC,QAAgC,SAAS,EAAE,CAAC;CAE5C,YAAY,KAAkB,OAAe,OAAe,QAAqB;EAC/E,MAAM,MAAM,gBAAgB,IAAI,GAAG,KAAK,OAAO,OAAO,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"row.js","names":[],"sources":["../../../../src/components/table/node/row.ts"],"sourcesContent":["import { TreeNode } from '@cat-kit/core'\nimport { isReactive, shallowReactive } from 'vue'\n\n/**\n * TODO: 优化参数,对大数据量来说,对象字面量参数会使内存占用过高\n */\nexport class TableRowNode<Data extends Record<string, any> = Record<string, any>> extends TreeNode<\n Data,\n TableRowNode<Data>\n> {\n /** 索引路径 */\n get indexes(): number[] {\n if (!this.parent) return [this.index]\n return this.parent.indexes.concat(this.index)\n }\n\n isExpandRow = false\n\n /** 是否操作中 */\n operating = false\n\n /** 是否展开 */\n expanded = false\n\n /** 是否为当前的点击行 */\n isCurrent = false\n\n /** 是否选中 */\n checked = false\n\n /**\n * 行的稳定唯一标识。\n *\n * E2 不变式:`uid` 在单个 `TableRowNode` 实例的生命周期内不可变更。\n * `useVirtualizer` 的 `getItemKey: i => rows[i].uid` 依赖该不变式来复用测量缓存;\n * 若 uid 在运行时变更,虚拟列表的尺寸表会错配导致滚动抖动。\n * 当前代码路径(`createRow` / `copy`)始终为每个新节点分配一次 uid,\n * 所以该不变式天然成立;此处使用 `readonly` 做编译期锁定。\n */\n readonly uid: number | string\n\n override children?: TableRowNode<Data>[] = undefined\n\n /**\n *\n * @param data 一个普通对象或者一个响应式对象\n * @param index 索引值\n * @param depth 深度(根为 0)\n * @param parent 父行节点\n * @param uid 行唯一标识\n * @returns\n */\n constructor(options: {\n data: Data\n index: number\n depth: number\n parent?: TableRowNode<Data>\n uid: number | string\n }) {\n const { data, index, depth, parent, uid } = options\n\n if (!data) {\n super(data as Data, index, depth, parent)\n } else {\n super(isReactive(data) ? data : shallowReactive(data), index, depth, parent)\n }\n this.uid = uid\n return shallowReactive(this)\n }\n\n copy() {\n const row = new TableRowNode({\n data: this.data,\n index: this.index,\n depth: this.depth,\n parent: this.parent ?? undefined,\n uid: `expand_${this.uid}`\n })\n\n row.isExpandRow = true\n\n return row\n }\n}\n"],"mappings":";;;;;;AAMA,IAAa,eAAb,MAAa,qBAA6E,SAGxF;;CAEA,IAAI,UAAoB;
|
|
1
|
+
{"version":3,"file":"row.js","names":[],"sources":["../../../../src/components/table/node/row.ts"],"sourcesContent":["import { TreeNode } from '@cat-kit/core'\nimport { isReactive, shallowReactive } from 'vue'\n\n/**\n * TODO: 优化参数,对大数据量来说,对象字面量参数会使内存占用过高\n */\nexport class TableRowNode<Data extends Record<string, any> = Record<string, any>> extends TreeNode<\n Data,\n TableRowNode<Data>\n> {\n /** 索引路径 */\n get indexes(): number[] {\n if (!this.parent) return [this.index]\n return this.parent.indexes.concat(this.index)\n }\n\n isExpandRow = false\n\n /** 是否操作中 */\n operating = false\n\n /** 是否展开 */\n expanded = false\n\n /** 是否为当前的点击行 */\n isCurrent = false\n\n /** 是否选中 */\n checked = false\n\n /**\n * 行的稳定唯一标识。\n *\n * E2 不变式:`uid` 在单个 `TableRowNode` 实例的生命周期内不可变更。\n * `useVirtualizer` 的 `getItemKey: i => rows[i].uid` 依赖该不变式来复用测量缓存;\n * 若 uid 在运行时变更,虚拟列表的尺寸表会错配导致滚动抖动。\n * 当前代码路径(`createRow` / `copy`)始终为每个新节点分配一次 uid,\n * 所以该不变式天然成立;此处使用 `readonly` 做编译期锁定。\n */\n readonly uid: number | string\n\n override children?: TableRowNode<Data>[] = undefined\n\n /**\n *\n * @param data 一个普通对象或者一个响应式对象\n * @param index 索引值\n * @param depth 深度(根为 0)\n * @param parent 父行节点\n * @param uid 行唯一标识\n * @returns\n */\n constructor(options: {\n data: Data\n index: number\n depth: number\n parent?: TableRowNode<Data>\n uid: number | string\n }) {\n const { data, index, depth, parent, uid } = options\n\n if (!data) {\n super(data as Data, index, depth, parent)\n } else {\n super(isReactive(data) ? data : shallowReactive(data), index, depth, parent)\n }\n this.uid = uid\n return shallowReactive(this)\n }\n\n copy() {\n const row = new TableRowNode({\n data: this.data,\n index: this.index,\n depth: this.depth,\n parent: this.parent ?? undefined,\n uid: `expand_${this.uid}`\n })\n\n row.isExpandRow = true\n\n return row\n }\n}\n"],"mappings":";;;;;;AAMA,IAAa,eAAb,MAAa,qBAA6E,SAGxF;;CAEA,IAAI,UAAoB;EACtB,IAAI,CAAC,KAAK,QAAQ,OAAO,CAAC,KAAK,MAAM;EACrC,OAAO,KAAK,OAAO,QAAQ,OAAO,KAAK,MAAM;;CAG/C,cAAc;;CAGd,YAAY;;CAGZ,WAAW;;CAGX,YAAY;;CAGZ,UAAU;;;;;;;;;;CAWV;CAEA,WAA2C,KAAA;;;;;;;;;;CAW3C,YAAY,SAMT;EACD,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,QAAQ;EAE5C,IAAI,CAAC,MACH,MAAM,MAAc,OAAO,OAAO,OAAO;OAEzC,MAAM,WAAW,KAAK,GAAG,OAAO,gBAAgB,KAAK,EAAE,OAAO,OAAO,OAAO;EAE9E,KAAK,MAAM;EACX,OAAO,gBAAgB,KAAK;;CAG9B,OAAO;EACL,MAAM,MAAM,IAAI,aAAa;GAC3B,MAAM,KAAK;GACX,OAAO,KAAK;GACZ,OAAO,KAAK;GACZ,QAAQ,KAAK,UAAU,KAAA;GACvB,KAAK,UAAU,KAAK;GACrB,CAAC;EAEF,IAAI,cAAc;EAElB,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body.js","names":[],"sources":["../../../src/components/table/table-body.vue"],"sourcesContent":["<template>\n <tbody :class=\"bodyCls\">\n <template v-for=\"{ row, index, stripeIndex } of tableRows\" :key=\"row.uid\">\n <UExpandTableRow v-if=\"row.isExpandRow\" :row=\"row\" :index=\"index\" />\n <UTableRow v-else :row=\"row\" :index=\"index\" :class=\"getStripeCls(stripeIndex)\" />\n </template>\n\n <!-- 空 -->\n <tr v-if=\"!rows.length\" :class=\"emptyRowCls\">\n <td :colspan=\"leafColumns.length\">\n <slot name=\"empty\">\n <UEmpty :class=\"emptyCls\" />\n </slot>\n </td>\n </tr>\n\n <slot></slot>\n </tbody>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem } from '@veltra/utils'\nimport { computed, inject } from 'vue'\n\nimport { UEmpty } from '../empty'\nimport { TableDIKey } from './di'\nimport { UTableRow, UExpandTableRow } from './table-row'\n\ndefineOptions({\n name: 'TableBody'\n})\n\nconst { cls, rows, virtualList, columnConfig, tableProps, virtualEnabled } = inject(TableDIKey)!\nconst { leafColumns } = columnConfig\n\n// A1 的同族优化:把 body / empty / empty-row 等静态 class 一次性取出,\n// 避免每次 render 触发 `cls.e` 的字符串拼接。\nconst bodyCls = cls.e('body')\nconst emptyRowCls = cls.e('row')\nconst emptyCls = cls.e('empty')\n\n/**\n * C1:stripe class 查找表。\n *\n * `bem.is('stripe', true) === 'is-stripe'`,`bem.is('stripe', false) === ''`。\n * 两种输出是全局常量,无需每次调用 `bem.is`;按奇偶直接查表即可。\n * 非 stripe 模式下两个位置均返回空串。\n */\nconst STRIPE_CLS_ON: readonly [string, string] = [bem.is('stripe', false), bem.is('stripe', true)]\nconst STRIPE_CLS_OFF: readonly [string, string] = ['', '']\n\nconst stripeTable = computed<readonly [string, string]>(() =>\n tableProps.stripe ? STRIPE_CLS_ON : STRIPE_CLS_OFF\n)\nconst getStripeCls = (index: number): string => stripeTable.value[index & 1]!\n\nconst tableRows = computed(() => {\n if (!virtualEnabled.value) {\n return rows.value.map((row, index) => {\n return {\n row,\n stripeIndex: row.index,\n index\n }\n })\n }\n\n // 虚拟列表:仅渲染可视窗口内的行,位置由 table.vue 中的 before/after 占位 tbody 撑开\n return virtualList.value.map((item) => {\n return {\n row: rows.value[item.index]!,\n stripeIndex: rows.value[item.index]!.index,\n index: item.index\n }\n })\n})\n</script>\n"],"mappings":";;;;;;;;;;;EAgCA,MAAM,EAAE,KAAK,MAAM,aAAa,cAAc,YAAY,mBAAmB,OAAO,
|
|
1
|
+
{"version":3,"file":"table-body.js","names":[],"sources":["../../../src/components/table/table-body.vue"],"sourcesContent":["<template>\n <tbody :class=\"bodyCls\">\n <template v-for=\"{ row, index, stripeIndex } of tableRows\" :key=\"row.uid\">\n <UExpandTableRow v-if=\"row.isExpandRow\" :row=\"row\" :index=\"index\" />\n <UTableRow v-else :row=\"row\" :index=\"index\" :class=\"getStripeCls(stripeIndex)\" />\n </template>\n\n <!-- 空 -->\n <tr v-if=\"!rows.length\" :class=\"emptyRowCls\">\n <td :colspan=\"leafColumns.length\">\n <slot name=\"empty\">\n <UEmpty :class=\"emptyCls\" />\n </slot>\n </td>\n </tr>\n\n <slot></slot>\n </tbody>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem } from '@veltra/utils'\nimport { computed, inject } from 'vue'\n\nimport { UEmpty } from '../empty'\nimport { TableDIKey } from './di'\nimport { UTableRow, UExpandTableRow } from './table-row'\n\ndefineOptions({\n name: 'TableBody'\n})\n\nconst { cls, rows, virtualList, columnConfig, tableProps, virtualEnabled } = inject(TableDIKey)!\nconst { leafColumns } = columnConfig\n\n// A1 的同族优化:把 body / empty / empty-row 等静态 class 一次性取出,\n// 避免每次 render 触发 `cls.e` 的字符串拼接。\nconst bodyCls = cls.e('body')\nconst emptyRowCls = cls.e('row')\nconst emptyCls = cls.e('empty')\n\n/**\n * C1:stripe class 查找表。\n *\n * `bem.is('stripe', true) === 'is-stripe'`,`bem.is('stripe', false) === ''`。\n * 两种输出是全局常量,无需每次调用 `bem.is`;按奇偶直接查表即可。\n * 非 stripe 模式下两个位置均返回空串。\n */\nconst STRIPE_CLS_ON: readonly [string, string] = [bem.is('stripe', false), bem.is('stripe', true)]\nconst STRIPE_CLS_OFF: readonly [string, string] = ['', '']\n\nconst stripeTable = computed<readonly [string, string]>(() =>\n tableProps.stripe ? STRIPE_CLS_ON : STRIPE_CLS_OFF\n)\nconst getStripeCls = (index: number): string => stripeTable.value[index & 1]!\n\nconst tableRows = computed(() => {\n if (!virtualEnabled.value) {\n return rows.value.map((row, index) => {\n return {\n row,\n stripeIndex: row.index,\n index\n }\n })\n }\n\n // 虚拟列表:仅渲染可视窗口内的行,位置由 table.vue 中的 before/after 占位 tbody 撑开\n return virtualList.value.map((item) => {\n return {\n row: rows.value[item.index]!,\n stripeIndex: rows.value[item.index]!.index,\n index: item.index\n }\n })\n})\n</script>\n"],"mappings":";;;;;;;;;;;EAgCA,MAAM,EAAE,KAAK,MAAM,aAAa,cAAc,YAAY,mBAAmB,OAAO,WAAU;EAC9F,MAAM,EAAE,gBAAgB;EAIxB,MAAM,UAAU,IAAI,EAAE,OAAM;EAC5B,MAAM,cAAc,IAAI,EAAE,MAAK;EAC/B,MAAM,WAAW,IAAI,EAAE,QAAO;;;;;;;;EAS9B,MAAM,gBAA2C,CAAC,IAAI,GAAG,UAAU,MAAK,EAAG,IAAI,GAAG,UAAU,KAAK,CAAA;EACjG,MAAM,iBAA4C,CAAC,IAAI,GAAE;EAEzD,MAAM,cAAc,eAClB,WAAW,SAAS,gBAAgB,eACtC;EACA,MAAM,gBAAgB,UAA0B,YAAY,MAAM,QAAQ;EAE1E,MAAM,YAAY,eAAe;GAC/B,IAAI,CAAC,eAAe,OAClB,OAAO,KAAK,MAAM,KAAK,KAAK,UAAU;IACpC,OAAO;KACL;KACA,aAAa,IAAI;KACjB;KACF;KACD;GAIH,OAAO,YAAY,MAAM,KAAK,SAAS;IACrC,OAAO;KACL,KAAK,KAAK,MAAM,KAAK;KACrB,aAAa,KAAK,MAAM,KAAK,OAAQ;KACrC,OAAO,KAAK;KACd;KACD;IACF;;uBA1EC,mBAgBQ,SAAA,EAhBA,OAAK,eAAE,MAAA,QAAO,CAAA,EAAA,EAAA;sBACpB,mBAGW,UAAA,MAAA,WAHqC,UAAA,QAAS,EAAtC,KAAK,OAAO,kBAAW;6DAAuB,IAAI,KAAA,EAAA,CAC5C,IAAI,eAAA,WAAA,EAA3B,YAAoE,MAAA,gBAAA,EAAA;;MAAtB;MAAa;oDAC3D,YAAiF,MAAA,UAAA,EAAA;;MAAzD;MAAa;MAAQ,OAAK,eAAE,aAAa,YAAW,CAAA;;;;;;;IAG9E,mBAAA,MAAA;KACW,MAAA,KAAA,CAAK,UAAA,WAAA,EAAhB,mBAMK,MAAA;;KANoB,OAAK,eAAE,MAAA,YAAW,CAAA;QACzC,mBAIK,MAAA,EAJA,SAAS,MAAA,YAAA,CAAY,QAAA,EAAA,CACxB,WAEO,KAAA,QAAA,SAAA,EAAA,QAAA,CADL,YAA4B,MAAA,YAAA,EAAA,EAAnB,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA,WAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA;IAK9B,WAAa,KAAA,QAAA,UAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-cell.js","names":[],"sources":["../../../src/components/table/table-cell.vue"],"sourcesContent":["<template>\n <td\n :class=\"cellClass\"\n :style=\"style\"\n :rowspan=\"rowspan\"\n :colspan=\"colspan\"\n v-if=\"rowspan !== 0 && colspan !== 0\"\n >\n <slot />\n </td>\n</template>\n\n<script lang=\"ts\" setup>\nimport { withUnit } from '@veltra/utils'\nimport { computed } from 'vue'\n\ndefineOptions({\n name: 'TableCell'\n})\n\n/**\n * B2: TableCell 去 inject 化。\n *\n * 原先每个可见单元格都会执行 `inject(TableDIKey)` 并在模板中调用 `getCellClass(column)`,\n * 在 30 列场景下每次滚动每行产生 30 次 inject / 30 次类名拼接。\n * 父组件 `TableRow` 已经持有注入上下文,直接把 `cellClass` 传下来即可;\n * 这里变成「完全受控」的纯渲染单元。\n */\nconst { left, right } = defineProps<{\n cellClass: string\n left?: number\n right?: number\n rowspan?: number\n colspan?: number\n}>()\n\nconst style = computed(() => ({\n left: withUnit(left, 'px'),\n right: withUnit(right, 'px')\n}))\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ,gBAAgB;GAC5B,MAAM,SAAS,QAAA,MAAM,
|
|
1
|
+
{"version":3,"file":"table-cell.js","names":[],"sources":["../../../src/components/table/table-cell.vue"],"sourcesContent":["<template>\n <td\n :class=\"cellClass\"\n :style=\"style\"\n :rowspan=\"rowspan\"\n :colspan=\"colspan\"\n v-if=\"rowspan !== 0 && colspan !== 0\"\n >\n <slot />\n </td>\n</template>\n\n<script lang=\"ts\" setup>\nimport { withUnit } from '@veltra/utils'\nimport { computed } from 'vue'\n\ndefineOptions({\n name: 'TableCell'\n})\n\n/**\n * B2: TableCell 去 inject 化。\n *\n * 原先每个可见单元格都会执行 `inject(TableDIKey)` 并在模板中调用 `getCellClass(column)`,\n * 在 30 列场景下每次滚动每行产生 30 次 inject / 30 次类名拼接。\n * 父组件 `TableRow` 已经持有注入上下文,直接把 `cellClass` 传下来即可;\n * 这里变成「完全受控」的纯渲染单元。\n */\nconst { left, right } = defineProps<{\n cellClass: string\n left?: number\n right?: number\n rowspan?: number\n colspan?: number\n}>()\n\nconst style = computed(() => ({\n left: withUnit(left, 'px'),\n right: withUnit(right, 'px')\n}))\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ,gBAAgB;GAC5B,MAAM,SAAS,QAAA,MAAM,KAAI;GACzB,OAAO,SAAS,QAAA,OAAO,KAAI;GAC7B,EAAE;;UAjCQ,QAAA,YAAO,KAAU,QAAA,YAAO,KAAA,WAAA,EALhC,mBAQK,MAAA;;IAPF,OAAK,eAAE,QAAA,UAAS;IAChB,OAAK,eAAE,MAAA,MAAK;IACZ,SAAS,QAAA;IACT,SAAS,QAAA;OAGV,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,QAAA,KAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-foot.js","names":[],"sources":["../../../src/components/table/table-foot.vue"],"sourcesContent":["<template>\n <tfoot v-if=\"tableSlots.foot || showSummary\" :class=\"cls.e('foot')\">\n <tr v-if=\"showSummary\">\n <td\n v-if=\"leafColumns[0]\"\n :class=\"getCellClass(leafColumns[0])\"\n :style=\"{\n right: withUnit(leafColumns[0].style.right, 'px'),\n left: withUnit(leafColumns[0].style.left, 'px')\n }\"\n >\n 合计:\n </td>\n <td\n v-for=\"column of leafColumns.slice(1)\"\n :class=\"getCellClass(column)\"\n :key=\"column.key\"\n :style=\"{\n right: withUnit(column.style.right, 'px'),\n left: withUnit(column.style.left, 'px')\n }\"\n >\n <u-node-render :content=\"getColumnSummaryNode(column)\" />\n </td>\n </tr>\n <slot />\n </tfoot>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n } from '@cat-kit/core'\nimport { withUnit, type RenderReturn } from '@veltra/utils'\nimport { computed, inject } from 'vue'\n\nimport { UNodeRender } from '../node-render'\nimport { TableDIKey } from './di'\nimport type { ColumnNode } from './node/col'\n\ndefineOptions({\n name: 'TableFoot'\n})\n\nconst { cls, columnConfig, rows, checkedRows, tableSlots, getCellClass } = inject(TableDIKey)!\n\nconst { leafColumns } = columnConfig\n\nconst showSummary = computed(() => {\n return leafColumns.value.some((col) => !!col.data.summary)\n})\n\nfunction computeSummary(key: string) {\n let sum = 0\n let i = 0\n\n while (i < rows.value.length) {\n sum = $n.plus(sum, rows.value[i]!.data[key] ?? 0)\n if (isNaN(sum)) return sum\n i++\n }\n\n return sum\n}\n\nconst summaryRow = computed<Record<string, any>>(() => {\n return leafColumns.value.reduce((acc, column) => {\n if (column.data.summary) {\n acc[column.key] = computeSummary(column.key)\n }\n return acc\n }, {})\n})\n\nfunction getColumnSummaryNode(column: ColumnNode): RenderReturn {\n const { summary } = column.data\n\n if (!summary) return null\n\n let total = summaryRow.value[column.key]\n\n if (typeof summary === 'function') {\n return summary({\n total,\n rows: rows.value,\n checkedRows: checkedRows.value,\n column\n })\n }\n return total\n}\n\ndefineExpose({\n getSummaryRow(): Record<string, any> {\n return summaryRow.value\n }\n})\n</script>\n"],"mappings":";;;;;;;;;;;EA0CA,MAAM,EAAE,KAAK,cAAc,MAAM,aAAa,YAAY,iBAAiB,OAAO,
|
|
1
|
+
{"version":3,"file":"table-foot.js","names":[],"sources":["../../../src/components/table/table-foot.vue"],"sourcesContent":["<template>\n <tfoot v-if=\"tableSlots.foot || showSummary\" :class=\"cls.e('foot')\">\n <tr v-if=\"showSummary\">\n <td\n v-if=\"leafColumns[0]\"\n :class=\"getCellClass(leafColumns[0])\"\n :style=\"{\n right: withUnit(leafColumns[0].style.right, 'px'),\n left: withUnit(leafColumns[0].style.left, 'px')\n }\"\n >\n 合计:\n </td>\n <td\n v-for=\"column of leafColumns.slice(1)\"\n :class=\"getCellClass(column)\"\n :key=\"column.key\"\n :style=\"{\n right: withUnit(column.style.right, 'px'),\n left: withUnit(column.style.left, 'px')\n }\"\n >\n <u-node-render :content=\"getColumnSummaryNode(column)\" />\n </td>\n </tr>\n <slot />\n </tfoot>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n } from '@cat-kit/core'\nimport { withUnit, type RenderReturn } from '@veltra/utils'\nimport { computed, inject } from 'vue'\n\nimport { UNodeRender } from '../node-render'\nimport { TableDIKey } from './di'\nimport type { ColumnNode } from './node/col'\n\ndefineOptions({\n name: 'TableFoot'\n})\n\nconst { cls, columnConfig, rows, checkedRows, tableSlots, getCellClass } = inject(TableDIKey)!\n\nconst { leafColumns } = columnConfig\n\nconst showSummary = computed(() => {\n return leafColumns.value.some((col) => !!col.data.summary)\n})\n\nfunction computeSummary(key: string) {\n let sum = 0\n let i = 0\n\n while (i < rows.value.length) {\n sum = $n.plus(sum, rows.value[i]!.data[key] ?? 0)\n if (isNaN(sum)) return sum\n i++\n }\n\n return sum\n}\n\nconst summaryRow = computed<Record<string, any>>(() => {\n return leafColumns.value.reduce((acc, column) => {\n if (column.data.summary) {\n acc[column.key] = computeSummary(column.key)\n }\n return acc\n }, {})\n})\n\nfunction getColumnSummaryNode(column: ColumnNode): RenderReturn {\n const { summary } = column.data\n\n if (!summary) return null\n\n let total = summaryRow.value[column.key]\n\n if (typeof summary === 'function') {\n return summary({\n total,\n rows: rows.value,\n checkedRows: checkedRows.value,\n column\n })\n }\n return total\n}\n\ndefineExpose({\n getSummaryRow(): Record<string, any> {\n return summaryRow.value\n }\n})\n</script>\n"],"mappings":";;;;;;;;;;;EA0CA,MAAM,EAAE,KAAK,cAAc,MAAM,aAAa,YAAY,iBAAiB,OAAO,WAAU;EAE5F,MAAM,EAAE,gBAAgB;EAExB,MAAM,cAAc,eAAe;GACjC,OAAO,YAAY,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,KAAK,QAAO;IAC1D;EAED,SAAS,eAAe,KAAa;GACnC,IAAI,MAAM;GACV,IAAI,IAAI;GAER,OAAO,IAAI,KAAK,MAAM,QAAQ;IAC5B,MAAM,GAAG,KAAK,KAAK,KAAK,MAAM,GAAI,KAAK,QAAQ,EAAC;IAChD,IAAI,MAAM,IAAG,EAAG,OAAO;IACvB;;GAGF,OAAO;;EAGT,MAAM,aAAa,eAAoC;GACrD,OAAO,YAAY,MAAM,QAAQ,KAAK,WAAW;IAC/C,IAAI,OAAO,KAAK,SACd,IAAI,OAAO,OAAO,eAAe,OAAO,IAAG;IAE7C,OAAO;MACN,EAAE,CAAA;IACN;EAED,SAAS,qBAAqB,QAAkC;GAC9D,MAAM,EAAE,YAAY,OAAO;GAE3B,IAAI,CAAC,SAAS,OAAO;GAErB,IAAI,QAAQ,WAAW,MAAM,OAAO;GAEpC,IAAI,OAAO,YAAY,YACrB,OAAO,QAAQ;IACb;IACA,MAAM,KAAK;IACX,aAAa,YAAY;IACzB;IACD,CAAA;GAEH,OAAO;;EAGT,SAAa,EACX,gBAAqC;GACnC,OAAO,WAAW;KAErB,CAAA;;UA7Fc,MAAA,WAAA,CAAW,QAAQ,YAAA,SAAA,WAAA,EAAhC,mBAyBQ,SAAA;;IAzBsC,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,OAAA,CAAA;OAC9C,YAAA,SAAA,WAAA,EAAV,mBAsBK,MAAA,YAAA,CApBK,MAAA,YAAA,CAAW,MAAA,WAAA,EADnB,mBASK,MAAA;;IAPF,OAAK,eAAE,MAAA,aAAA,CAAa,MAAA,YAAA,CAAW,GAAA,CAAA;IAC/B,OAAK,eAAA;YAAqB,MAAA,SAAA,CAAS,MAAA,YAAA,CAAW,GAAI,MAAM,OAAK,KAAA;WAAyB,MAAA,SAAA,CAAS,MAAA,YAAA,CAAW,GAAI,MAAM,MAAI,KAAA;;MAI1H,SAED,EAAA,IAAA,mBAAA,QAAA,KAAA,GAAA,UAAA,KAAA,EACA,mBAUK,UAAA,MAAA,WATc,MAAA,YAAA,CAAY,MAAK,EAAA,GAA3B,WAAM;wBADf,mBAUK,MAAA;KARF,OAAK,eAAE,MAAA,aAAA,CAAa,OAAM,CAAA;KAC1B,KAAK,OAAO;KACZ,OAAK,eAAA;aAAqB,MAAA,SAAA,CAAS,OAAO,MAAM,OAAK,KAAA;YAAyB,MAAA,SAAA,CAAS,OAAO,MAAM,MAAI,KAAA;;QAKzG,YAAyD,MAAA,WAAA,EAAA,EAAzC,SAAS,qBAAqB,OAAM,EAAA,EAAA,MAAA,GAAA,CAAA,UAAA,CAAA,CAAA,EAAA,EAAA;oDAGxD,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-head.js","names":["bem","withUnit","defineComponent","inject","DefineComponent","TableDIKey","TableResizeKey","TableHead","name","setup","cls","columnConfig","getHeaderSlotsNode","getHeaderCellClass","headers","handleCls","e","handleResizeMousedown","headerRef","_createVNode","is","value","length","map","header","headerIndex","column","key","leafs","children","undefined","left","style","right","isLeaf","resizable"],"sources":["../../../src/components/table/table-head.tsx"],"sourcesContent":["import { bem, withUnit } from '@veltra/utils'\nimport { defineComponent, inject, type DefineComponent } from 'vue'\n\nimport { TableDIKey, TableResizeKey } from './di'\n\nconst TableHead: DefineComponent = defineComponent({\n name: 'TableHead',\n setup() {\n const { cls, columnConfig, getHeaderSlotsNode, getHeaderCellClass } = inject(TableDIKey)!\n const { headers } = columnConfig\n const handleCls = cls.e('resize-handle')\n\n const { handleResizeMousedown, headerRef } = inject(TableResizeKey)!\n\n return () => (\n <thead\n class={[cls.e('head'), bem.is('multistage', headers.value.length > 1)]}\n ref={headerRef}\n >\n {headers.value.map((header, headerIndex) => (\n <tr>\n {header.map((column) => (\n <th\n class={getHeaderCellClass(column)}\n key={column.key}\n colspan={column.leafs}\n rowspan={column.children?.length ? undefined : headers.value.length - headerIndex}\n style={{\n left: withUnit(column.style.left, 'px'),\n right: withUnit(column.style.right, 'px')\n }}\n >\n {getHeaderSlotsNode({ column })}\n\n {column.isLeaf && column.resizable ? (\n <span\n class={handleCls}\n onMousedown={(e) => handleResizeMousedown(e, column)}\n ></span>\n ) : null}\n </th>\n ))}\n </tr>\n ))}\n </thead>\n )\n }\n})\n\nexport default TableHead\n"],"mappings":";;;;AAKA,MAAMO,YAA6BL,gBAAgB;CACjDM,MAAM;CACNC,QAAQ;EACN,MAAM,EAAEC,KAAKC,cAAcC,oBAAoBC,uBAAuBV,OAAOE,WAAW;EACxF,MAAM,EAAES,YAAYH;EACpB,MAAMI,YAAYL,IAAIM,EAAE,gBAAgB;EAExC,MAAM,EAAEC,uBAAuBC,cAAcf,OAAOG,eAAe;
|
|
1
|
+
{"version":3,"file":"table-head.js","names":["bem","withUnit","defineComponent","inject","DefineComponent","TableDIKey","TableResizeKey","TableHead","name","setup","cls","columnConfig","getHeaderSlotsNode","getHeaderCellClass","headers","handleCls","e","handleResizeMousedown","headerRef","_createVNode","is","value","length","map","header","headerIndex","column","key","leafs","children","undefined","left","style","right","isLeaf","resizable"],"sources":["../../../src/components/table/table-head.tsx"],"sourcesContent":["import { bem, withUnit } from '@veltra/utils'\nimport { defineComponent, inject, type DefineComponent } from 'vue'\n\nimport { TableDIKey, TableResizeKey } from './di'\n\nconst TableHead: DefineComponent = defineComponent({\n name: 'TableHead',\n setup() {\n const { cls, columnConfig, getHeaderSlotsNode, getHeaderCellClass } = inject(TableDIKey)!\n const { headers } = columnConfig\n const handleCls = cls.e('resize-handle')\n\n const { handleResizeMousedown, headerRef } = inject(TableResizeKey)!\n\n return () => (\n <thead\n class={[cls.e('head'), bem.is('multistage', headers.value.length > 1)]}\n ref={headerRef}\n >\n {headers.value.map((header, headerIndex) => (\n <tr>\n {header.map((column) => (\n <th\n class={getHeaderCellClass(column)}\n key={column.key}\n colspan={column.leafs}\n rowspan={column.children?.length ? undefined : headers.value.length - headerIndex}\n style={{\n left: withUnit(column.style.left, 'px'),\n right: withUnit(column.style.right, 'px')\n }}\n >\n {getHeaderSlotsNode({ column })}\n\n {column.isLeaf && column.resizable ? (\n <span\n class={handleCls}\n onMousedown={(e) => handleResizeMousedown(e, column)}\n ></span>\n ) : null}\n </th>\n ))}\n </tr>\n ))}\n </thead>\n )\n }\n})\n\nexport default TableHead\n"],"mappings":";;;;AAKA,MAAMO,YAA6BL,gBAAgB;CACjDM,MAAM;CACNC,QAAQ;EACN,MAAM,EAAEC,KAAKC,cAAcC,oBAAoBC,uBAAuBV,OAAOE,WAAW;EACxF,MAAM,EAAES,YAAYH;EACpB,MAAMI,YAAYL,IAAIM,EAAE,gBAAgB;EAExC,MAAM,EAAEC,uBAAuBC,cAAcf,OAAOG,eAAe;EAEnE,aAAOa,YAAA,SAAA;GAAA,SAEI,CAACT,IAAIM,EAAE,OAAO,EAAEhB,IAAIoB,GAAG,cAAcN,QAAQO,MAAMC,SAAS,EAAE,CAAC;GAAA,OACjEJ;GAAS,EAAA,CAEbJ,QAAQO,MAAME,KAAKC,QAAQC,gBAAWN,YAAA,MAAA,MAAA,CAElCK,OAAOD,KAAKG,WAAMP,YAAA,MAAA;GAAA,SAERN,mBAAmBa,OAAO;GAAA,OAC5BA,OAAOC;GAAG,WACND,OAAOE;GAAK,WACZF,OAAOG,UAAUP,SAASQ,KAAAA,IAAYhB,QAAQO,MAAMC,SAASG;GAAW,SAC1E;IACLM,MAAM9B,SAASyB,OAAOM,MAAMD,MAAM,KAAK;IACvCE,OAAOhC,SAASyB,OAAOM,MAAMC,OAAO,KAAI;IAC1C;GAAC,EAAA,CAEArB,mBAAmB,EAAEc,QAAQ,CAAC,EAE9BA,OAAOQ,UAAUR,OAAOS,YAAShB,YAAA,QAAA;GAAA,SAEvBJ;GAAS,gBACFC,MAAMC,sBAAsBD,GAAGU,OAAM;GAAC,EAAA,KAAA,GAEpD,KAAI,CAEX,CAAC,CAAA,CAEL,CAAC,CAAA,CAEL;;CAEJ,CAAC"}
|