@veltra/desktop 1.0.8 → 1.0.10
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.vue.d.ts +3 -3
- package/dist/components/auto-complete/auto-complete.vue.d.ts +1 -1
- package/dist/components/batch-edit/batch-edit.js.map +1 -1
- package/dist/components/batch-edit/batch-edit.vue.d.ts +2 -2
- package/dist/components/batch-edit/use-edit.js.map +1 -1
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button/button.vue.d.ts +1 -1
- package/dist/components/cascade/cascade.js +15 -13
- package/dist/components/cascade/cascade.js.map +1 -1
- package/dist/components/cascade/cascade.vue.d.ts +7 -7
- package/dist/components/cascade/node.js.map +1 -1
- package/dist/components/cascade/use-check.js +3 -2
- package/dist/components/cascade/use-check.js.map +1 -1
- package/dist/components/cascade/use-select.js +3 -3
- package/dist/components/cascade/use-select.js.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.js.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.vue.d.ts +2 -2
- 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-picker/date-picker.js +9 -9
- 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 +9 -9
- 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/drawer/drawer.js.map +1 -1
- package/dist/components/empty/empty.vue.d.ts +1 -1
- package/dist/components/expression-editor/expression-editor.js.map +1 -1
- package/dist/components/expression-editor/internal/editor-runtime/create-runtime.js.map +1 -1
- package/dist/components/expression-editor/internal/features/commands/register-command-packs.js.map +1 -1
- package/dist/components/expression-editor/internal/features/insertion/insertion-service.js.map +1 -1
- package/dist/components/expression-editor/use-decorators.js.map +1 -1
- package/dist/components/expression-editor/use-expression-drag-drop.js.map +1 -1
- package/dist/components/file-picker/file-picker.js.map +1 -1
- package/dist/components/file-picker/file-picker.vue.d.ts +1 -1
- package/dist/components/file-picker/helper.js +19 -7
- package/dist/components/file-picker/helper.js.map +1 -1
- package/dist/components/file-viewer/file-viewer.js +294 -0
- package/dist/components/file-viewer/file-viewer.js.map +1 -0
- package/dist/components/file-viewer/file-viewer.vue.d.ts +42 -0
- package/dist/components/file-viewer/helper.js +185 -0
- package/dist/components/file-viewer/helper.js.map +1 -0
- package/dist/components/file-viewer/index.d.ts +1 -0
- package/dist/components/file-viewer/previewers/docx-previewer.js +76 -0
- package/dist/components/file-viewer/previewers/docx-previewer.js.map +1 -0
- package/dist/components/file-viewer/previewers/image-previewer.js +64 -0
- package/dist/components/file-viewer/previewers/image-previewer.js.map +1 -0
- package/dist/components/file-viewer/previewers/pdf-previewer.js +90 -0
- package/dist/components/file-viewer/previewers/pdf-previewer.js.map +1 -0
- package/dist/components/file-viewer/previewers/sheet-previewer.js +175 -0
- package/dist/components/file-viewer/previewers/sheet-previewer.js.map +1 -0
- package/dist/components/file-viewer/previewers/text-previewer.js +74 -0
- package/dist/components/file-viewer/previewers/text-previewer.js.map +1 -0
- package/dist/components/file-viewer/previewers/video-previewer.js +62 -0
- package/dist/components/file-viewer/previewers/video-previewer.js.map +1 -0
- package/dist/components/file-viewer/style.d.ts +1 -0
- package/dist/components/file-viewer/style.js +4 -0
- package/dist/components/file-viewer/style2.css +445 -0
- package/dist/components/form/form-model.js +2 -1
- package/dist/components/form/form-model.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.vue.d.ts +1 -1
- package/dist/components/index.d.ts +12 -9
- package/dist/components/input/input.vue.d.ts +3 -3
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/loading/directive.js.map +1 -1
- package/dist/components/menu/menu-item.js.map +1 -1
- package/dist/components/message/message2.js.map +1 -1
- package/dist/components/multi-select/multi-select-option.js +14 -10
- package/dist/components/multi-select/multi-select-option.js.map +1 -1
- package/dist/components/multi-select/multi-select.js +16 -19
- package/dist/components/multi-select/multi-select.js.map +1 -1
- package/dist/components/multi-select/multi-select.vue.d.ts +4 -4
- package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +7 -7
- package/dist/components/notification/index.js.map +1 -1
- package/dist/components/notification/notification.vue.d.ts +1 -1
- package/dist/components/number-input/number-input.js.map +1 -1
- package/dist/components/number-input/number-input.vue.d.ts +1 -1
- package/dist/components/number-range-input/number-range-input.vue.d.ts +1 -1
- package/dist/components/palette/color-transform.js.map +1 -1
- package/dist/components/palette/di.js.map +1 -1
- package/dist/components/palette/palette-alpha.js +7 -10
- package/dist/components/palette/palette-alpha.js.map +1 -1
- package/dist/components/palette/palette-hue.js +5 -7
- package/dist/components/palette/palette-hue.js.map +1 -1
- package/dist/components/palette/palette-sv.js +8 -10
- package/dist/components/palette/palette-sv.js.map +1 -1
- package/dist/components/palette/palette.js +22 -24
- package/dist/components/palette/palette.js.map +1 -1
- package/dist/components/password-input/password-input.vue.d.ts +1 -1
- package/dist/components/pop-confirm/pop-confirm.vue.d.ts +2 -2
- package/dist/components/progress/progress.js +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-group/radio-group.vue.d.ts +2 -2
- package/dist/components/rich-text-editor/rich-text-editor.js.map +1 -1
- package/dist/components/rich-text-editor/rich-text-editor.vue.d.ts +1 -1
- package/dist/components/rich-text-editor/toolbar.js.map +1 -1
- package/dist/components/scroll/scroll.js.map +1 -1
- package/dist/components/select/select.js +14 -12
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/select/select.vue.d.ts +3 -3
- package/dist/components/slider/slider-thumb.js +10 -13
- package/dist/components/slider/slider-thumb.js.map +1 -1
- package/dist/components/slider/slider.js +12 -15
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/table/di.js.map +1 -1
- package/dist/components/table/node/row.d.ts +10 -1
- package/dist/components/table/node/row.js +9 -0
- package/dist/components/table/node/row.js.map +1 -1
- package/dist/components/table/table-body.js +25 -26
- package/dist/components/table/table-body.js.map +1 -1
- package/dist/components/table/table-cell.js +16 -9
- package/dist/components/table/table-cell.js.map +1 -1
- package/dist/components/table/table-row.js +77 -19
- package/dist/components/table/table-row.js.map +1 -1
- package/dist/components/table/table.js +75 -34
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/table/table.vue.d.ts +2 -2
- package/dist/components/table/use-columns.js +4 -0
- package/dist/components/table/use-columns.js.map +1 -1
- package/dist/components/table/use-fixed-columns.js +27 -8
- package/dist/components/table/use-fixed-columns.js.map +1 -1
- package/dist/components/table/use-rows.js +2 -2
- package/dist/components/table/use-rows.js.map +1 -1
- package/dist/components/table/use-table.js +50 -3
- package/dist/components/table/use-table.js.map +1 -1
- package/dist/components/tabs/index.d.ts +3 -1
- package/dist/components/tabs/style2.css +170 -107
- package/dist/components/tabs/tabs-horizontal.js +133 -0
- package/dist/components/tabs/tabs-horizontal.js.map +1 -0
- package/dist/components/tabs/tabs-horizontal.vue.d.ts +40 -0
- package/dist/components/tabs/tabs-vertical.js +89 -0
- package/dist/components/tabs/tabs-vertical.js.map +1 -0
- package/dist/components/tabs/tabs-vertical.vue.d.ts +38 -0
- package/dist/components/tabs/tabs.js +75 -105
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/tabs/tabs.vue.d.ts +9 -23
- package/dist/components/tabs/use-tabs-bar.js +105 -0
- package/dist/components/tabs/use-tabs-bar.js.map +1 -0
- package/dist/components/text/text.js.map +1 -1
- package/dist/components/textarea/textarea.js.map +1 -1
- package/dist/components/textarea/textarea.vue.d.ts +4 -4
- package/dist/components/theme/theme.js.map +1 -1
- package/dist/components/tip/tip.vue.d.ts +1 -1
- package/dist/components/tree/style2.css +45 -23
- package/dist/components/tree/tree-node.js +50 -35
- 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 +27 -20
- package/dist/components/tree/tree.js.map +1 -1
- package/dist/components/tree/tree.vue.d.ts +5 -5
- package/dist/components/tree/use-check.js +52 -14
- package/dist/components/tree/use-check.js.map +1 -1
- package/dist/components/tree/use-tree-nodes.js +51 -24
- package/dist/components/tree/use-tree-nodes.js.map +1 -1
- package/dist/components/tree-select/tree-select.vue.d.ts +7 -7
- package/dist/index.d.ts +57 -53
- package/dist/index.js +51 -48
- package/dist/types/file-viewer.d.ts +71 -0
- package/dist/types/index.d.ts +3 -2
- package/dist/types/tabs.d.ts +106 -14
- package/dist/types/tree.d.ts +6 -1
- package/package.json +32 -31
- package/src/components/cascade/cascade.vue +18 -18
- package/src/components/cascade/node.ts +4 -1
- package/src/components/cascade/use-check.ts +5 -4
- package/src/components/cascade/use-select.ts +4 -5
- package/src/components/date-picker/date-picker.vue +10 -9
- package/src/components/date-range-picker/date-range-picker.vue +12 -12
- package/src/components/file-picker/helper.ts +21 -10
- package/src/components/file-viewer/file-viewer.vue +311 -0
- package/src/components/file-viewer/helper.ts +193 -0
- package/src/components/file-viewer/index.ts +1 -0
- package/src/components/file-viewer/previewers/docx-previewer.vue +78 -0
- package/src/components/file-viewer/previewers/image-previewer.vue +64 -0
- package/src/components/file-viewer/previewers/pdf-previewer.vue +90 -0
- package/src/components/file-viewer/previewers/sheet-previewer.vue +210 -0
- package/src/components/file-viewer/previewers/text-previewer.vue +76 -0
- package/src/components/file-viewer/previewers/video-previewer.vue +72 -0
- package/src/components/file-viewer/style.scss +504 -0
- package/src/components/file-viewer/style.ts +4 -0
- package/src/components/index.ts +2 -0
- package/src/components/multi-select/multi-select-option.vue +16 -3
- package/src/components/multi-select/multi-select.vue +17 -9
- package/src/components/palette/di.ts +5 -3
- package/src/components/palette/palette-alpha.vue +7 -10
- package/src/components/palette/palette-hue.vue +5 -7
- package/src/components/palette/palette-sv.vue +12 -14
- package/src/components/palette/palette.vue +19 -21
- package/src/components/progress/progress.vue +1 -1
- package/src/components/select/select.vue +21 -19
- package/src/components/slider/slider-thumb.vue +11 -14
- package/src/components/slider/slider.vue +15 -15
- package/src/components/table/di.ts +58 -43
- package/src/components/table/node/row.ts +10 -1
- package/src/components/table/table-body.vue +28 -33
- package/src/components/table/table-cell.vue +17 -9
- package/src/components/table/table-row.tsx +83 -17
- package/src/components/table/table.vue +72 -45
- package/src/components/table/use-fixed-columns.ts +46 -12
- package/src/components/table/use-rows.ts +14 -3
- package/src/components/table/use-table.ts +27 -3
- package/src/components/tabs/index.ts +2 -0
- package/src/components/tabs/style.scss +219 -133
- package/src/components/tabs/tabs-horizontal.vue +128 -0
- package/src/components/tabs/tabs-vertical.vue +77 -0
- package/src/components/tabs/tabs.vue +56 -127
- package/src/components/tabs/use-tabs-bar.ts +119 -0
- package/src/components/tree/style.scss +74 -29
- package/src/components/tree/tree-node.vue +10 -4
- package/src/components/tree/tree.vue +39 -12
- package/src/components/tree/use-check.ts +79 -23
- package/src/components/tree/use-tree-nodes.ts +85 -34
- package/src/types/file-viewer.ts +69 -0
- package/src/types/index.ts +1 -0
- package/src/types/tabs.ts +113 -19
- package/src/types/tree.ts +6 -1
|
@@ -8,24 +8,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
8
8
|
__name: "multi-select-option",
|
|
9
9
|
props: {
|
|
10
10
|
option: {},
|
|
11
|
-
disabled: {
|
|
12
|
-
type: Boolean,
|
|
13
|
-
default: false
|
|
14
|
-
},
|
|
11
|
+
disabled: { type: Boolean },
|
|
15
12
|
checked: { type: Boolean },
|
|
13
|
+
index: {},
|
|
16
14
|
measureElement: { type: Function }
|
|
17
15
|
},
|
|
18
16
|
emits: ["check"],
|
|
19
17
|
setup(__props, { emit: __emit }) {
|
|
18
|
+
const props = __props;
|
|
19
|
+
const { disabled = false, checked } = props;
|
|
20
|
+
function measureRef(el) {
|
|
21
|
+
if (typeof props.index !== "number" || !props.measureElement) return;
|
|
22
|
+
props.measureElement(props.index, el);
|
|
23
|
+
}
|
|
20
24
|
const emit = __emit;
|
|
21
25
|
const { optionClass, rippleClass, checkboxClass } = inject(MultiSelectDIKey);
|
|
22
26
|
let ripple = null;
|
|
23
27
|
function handleClick(e) {
|
|
24
|
-
if (
|
|
25
|
-
emit("check", !
|
|
28
|
+
if (disabled) return;
|
|
29
|
+
emit("check", !checked);
|
|
26
30
|
}
|
|
27
31
|
function handleMousedown(e) {
|
|
28
|
-
if (
|
|
32
|
+
if (disabled) return;
|
|
29
33
|
ripple = new Ripple(e.currentTarget, { rippleClass });
|
|
30
34
|
ripple.showByEvent(e);
|
|
31
35
|
}
|
|
@@ -46,13 +50,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
46
50
|
onMousedown: handleMousedown,
|
|
47
51
|
onMouseup: handleMouseup,
|
|
48
52
|
onMouseleave: handleMouseleave,
|
|
49
|
-
ref:
|
|
53
|
+
ref: measureRef
|
|
50
54
|
}, [createVNode(unref(_sfc_main$1), {
|
|
51
55
|
class: normalizeClass(unref(checkboxClass)),
|
|
52
|
-
"model-value":
|
|
56
|
+
"model-value": unref(checked),
|
|
53
57
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("check", $event)),
|
|
54
58
|
onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
|
|
55
|
-
disabled:
|
|
59
|
+
disabled: unref(disabled)
|
|
56
60
|
}, null, 8, [
|
|
57
61
|
"class",
|
|
58
62
|
"model-value",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-select-option.js","names":[],"sources":["../../../src/components/multi-select/multi-select-option.vue"],"sourcesContent":["<template>\n <li\n :class=\"optionClass\"\n @click=\"handleClick\"\n @mousedown=\"handleMousedown\"\n @mouseup=\"handleMouseup\"\n @mouseleave=\"handleMouseleave\"\n :ref=\"
|
|
1
|
+
{"version":3,"file":"multi-select-option.js","names":[],"sources":["../../../src/components/multi-select/multi-select-option.vue"],"sourcesContent":["<template>\n <li\n :class=\"optionClass\"\n @click=\"handleClick\"\n @mousedown=\"handleMousedown\"\n @mouseup=\"handleMouseup\"\n @mouseleave=\"handleMouseleave\"\n :ref=\"measureRef\"\n >\n <u-checkbox\n :class=\"checkboxClass\"\n :model-value=\"checked\"\n @update:model-value=\"emit('check', $event)\"\n @click.stop\n :disabled=\"disabled\"\n />\n\n <slot />\n </li>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Ripple } from '@veltra/directives'\nimport { inject, onBeforeUnmount } from 'vue'\n\nimport { UCheckbox } from '../checkbox'\nimport { MultiSelectDIKey } from './di'\n\ndefineOptions({\n name: 'MultiSelectOption'\n})\n\nconst props = defineProps<{\n option: Record<string, any>\n disabled?: boolean\n checked: boolean\n /**\n * 虚拟项索引:对应 `options` 数组中的绝对位置。\n * 非虚拟模式下可省略;虚拟模式下必须传入,否则元素卸载时 Virtualizer 无法及时解绑,\n * 会因为 ResizeObserver 对脱离 DOM 的元素回调 size=0 而污染尺寸缓存。\n */\n index?: number\n measureElement?: (index: number, el: Element | null) => void\n}>()\n\nconst { disabled = false, checked } = props\n\nfunction measureRef(el: unknown) {\n if (typeof props.index !== 'number' || !props.measureElement) return\n props.measureElement(props.index, el as Element | null)\n}\n\nconst emit = defineEmits<{\n (e: 'check', checked: boolean): void\n}>()\n\nconst { optionClass, rippleClass, checkboxClass } = inject(MultiSelectDIKey)!\n\nlet ripple: Ripple | null = null\n\nfunction handleClick(e) {\n if (disabled) return\n emit('check', !checked)\n}\n\nfunction handleMousedown(e: MouseEvent) {\n if (disabled) return\n\n ripple = new Ripple(e.currentTarget as HTMLElement, {\n rippleClass\n })\n\n ripple.showByEvent(e)\n}\n\nfunction handleMouseleave() {\n ripple?.remove()\n}\n\nfunction handleMouseup() {\n ripple?.remove()\n}\n\nonBeforeUnmount(() => {\n ripple?.remove()\n ripple = null\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;EAgCA,MAAM,QAAQ;EAad,MAAM,EAAE,WAAW,OAAO,YAAY;EAEtC,SAAS,WAAW,IAAa;AAC/B,OAAI,OAAO,MAAM,UAAU,YAAY,CAAC,MAAM,eAAgB;AAC9D,SAAM,eAAe,MAAM,OAAO,GAAoB;;EAGxD,MAAM,OAAO;EAIb,MAAM,EAAE,aAAa,aAAa,kBAAkB,OAAO,iBAAiB;EAE5E,IAAI,SAAwB;EAE5B,SAAS,YAAY,GAAG;AACtB,OAAI,SAAU;AACd,QAAK,SAAS,CAAC,QAAO;;EAGxB,SAAS,gBAAgB,GAAe;AACtC,OAAI,SAAU;AAEd,YAAS,IAAI,OAAO,EAAE,eAA8B,EAClD,aACD,CAAA;AAED,UAAO,YAAY,EAAC;;EAGtB,SAAS,mBAAmB;AAC1B,WAAQ,QAAO;;EAGjB,SAAS,gBAAgB;AACvB,WAAQ,QAAO;;AAGjB,wBAAsB;AACpB,WAAQ,QAAO;AACf,YAAS;IACV;;uBArFC,mBAiBK,MAAA;IAhBF,OAAK,eAAE,MAAA,YAAW,CAAA;IAClB,SAAO;IACP,aAAW;IACX,WAAS;IACT,cAAY;IACZ,KAAK;OAEN,YAME,MAAA,YAAA,EAAA;IALC,OAAK,eAAE,MAAA,cAAa,CAAA;IACpB,eAAa,MAAA,QAAO;IACpB,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAU,OAAM;IACxC,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;IACV,UAAU,MAAA,SAAQ;;;;;OAGrB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
|
|
@@ -10,8 +10,8 @@ import { MultiSelectDIKey } from "./di.js";
|
|
|
10
10
|
import _sfc_main$7 from "./multi-select-option.js";
|
|
11
11
|
import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, shallowReactive, shallowRef, toDisplayString, unref, useModel, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
|
|
12
12
|
import { o } from "@cat-kit/core";
|
|
13
|
-
import { FORM_EMPTY_CONTENT, bem
|
|
14
|
-
import { useFormComponent, useFormFallbackProps,
|
|
13
|
+
import { FORM_EMPTY_CONTENT, bem } from "@veltra/utils";
|
|
14
|
+
import { useFormComponent, useFormFallbackProps, useVirtualizer } from "@veltra/compositions";
|
|
15
15
|
import { ArrowDown, Close, Search } from "@veltra/icons/normal";
|
|
16
16
|
//#region src/components/multi-select/multi-select.vue
|
|
17
17
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
@@ -80,28 +80,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
80
80
|
if (!props.creatable || !createdOptions.value.length) return rawAllOptions.value;
|
|
81
81
|
return [...createdOptions.value, ...rawAllOptions.value];
|
|
82
82
|
});
|
|
83
|
-
const
|
|
84
|
-
|
|
83
|
+
const virtualEnabled = computed(() => options.value.length > 80);
|
|
84
|
+
const { virtualizer, items } = useVirtualizer({
|
|
85
85
|
estimateSize: () => 40,
|
|
86
86
|
count: computed(() => options.value.length),
|
|
87
|
-
scrollEl:
|
|
87
|
+
scrollEl: () => scrollRef.value?.containerRef ?? null,
|
|
88
|
+
contentEl: () => virtualEnabled.value ? scrollRef.value?.contentRef ?? null : null
|
|
88
89
|
});
|
|
89
90
|
const virtualOptions = computed(() => {
|
|
90
91
|
const { valueKey, labelKey } = props;
|
|
91
92
|
const _options = options.value;
|
|
92
|
-
return
|
|
93
|
+
return items.value.map((v) => {
|
|
93
94
|
const option = _options[v.index];
|
|
94
95
|
const val = o(option).get(valueKey);
|
|
95
96
|
return {
|
|
96
97
|
option,
|
|
97
98
|
index: v.index,
|
|
98
99
|
val,
|
|
99
|
-
key: v.
|
|
100
|
+
key: v.index,
|
|
100
101
|
offset: v.start,
|
|
101
102
|
label: o(option).get(labelKey)
|
|
102
103
|
};
|
|
103
104
|
});
|
|
104
105
|
});
|
|
106
|
+
const measureElement = (index, el) => virtualizer.measureElement(index, el);
|
|
105
107
|
const filterable = computed(() => {
|
|
106
108
|
return props.filterable || props.creatable || typeof props.options === "function";
|
|
107
109
|
});
|
|
@@ -363,16 +365,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
363
365
|
_: 1
|
|
364
366
|
}, 8, ["modelValue", "onKeydown"])], 2)) : createCommentVNode("v-if", true),
|
|
365
367
|
createCommentVNode(" 多选列表 "),
|
|
368
|
+
createCommentVNode("\n 虚拟化启用时内容容器 height 由 useVirtualizer 命令式写入;\n 模板不再绑定 totalSize,避免尺寸变化引起重渲染。\n "),
|
|
366
369
|
options.value.length ? (openBlock(), createBlock(unref(_sfc_main$3), {
|
|
367
370
|
key: 1,
|
|
368
371
|
tag: "ul",
|
|
369
372
|
class: normalizeClass([unref(cls).e("options")]),
|
|
370
373
|
ref_key: "scrollRef",
|
|
371
374
|
ref: scrollRef,
|
|
372
|
-
"content-class": [unref(cls).e("options-wrap"), unref(bem).is("virtual",
|
|
373
|
-
"content-style": { height: unref(virtualEnabled) ? unref(withUnit)(unref(totalHeight), "px") : void 0 }
|
|
375
|
+
"content-class": [unref(cls).e("options-wrap"), unref(bem).is("virtual", virtualEnabled.value)]
|
|
374
376
|
}, {
|
|
375
|
-
default: withCtx(() => [
|
|
377
|
+
default: withCtx(() => [virtualEnabled.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(virtualOptions.value, ({ option, index, key, label, offset }) => {
|
|
376
378
|
return openBlock(), createBlock(_sfc_main$7, {
|
|
377
379
|
option,
|
|
378
380
|
disabled: isDisabled(option),
|
|
@@ -380,8 +382,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
380
382
|
style: normalizeStyle({ transform: `translateY(${offset}px)` }),
|
|
381
383
|
onCheck: ($event) => handleCheck(option, $event),
|
|
382
384
|
checked: unref(checkedSet).has(option),
|
|
383
|
-
|
|
384
|
-
"measure-element":
|
|
385
|
+
index,
|
|
386
|
+
"measure-element": measureElement
|
|
385
387
|
}, {
|
|
386
388
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, {
|
|
387
389
|
option,
|
|
@@ -394,8 +396,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
394
396
|
"style",
|
|
395
397
|
"onCheck",
|
|
396
398
|
"checked",
|
|
397
|
-
"
|
|
398
|
-
"measure-element"
|
|
399
|
+
"index"
|
|
399
400
|
]);
|
|
400
401
|
}), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(options.value, (option, index) => {
|
|
401
402
|
return openBlock(), createBlock(_sfc_main$7, {
|
|
@@ -418,11 +419,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
418
419
|
]);
|
|
419
420
|
}), 128))]),
|
|
420
421
|
_: 3
|
|
421
|
-
}, 8, [
|
|
422
|
-
"class",
|
|
423
|
-
"content-class",
|
|
424
|
-
"content-style"
|
|
425
|
-
])) : (openBlock(), createElementBlock("div", {
|
|
422
|
+
}, 8, ["class", "content-class"])) : (openBlock(), createElementBlock("div", {
|
|
426
423
|
key: 2,
|
|
427
424
|
class: normalizeClass(unref(cls).e("empty"))
|
|
428
425
|
}, [createVNode(unref(_sfc_main$4))], 2))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-select.js","names":[],"sources":["../../../src/components/multi-select/multi-select.vue"],"sourcesContent":["<template>\n <u-dropdown\n v-if=\"!readonly\"\n trigger=\"click\"\n ref=\"dropdownRef\"\n :class=\"[cls.b, cls.m(size), bem.is('disabled', disabled)]\"\n :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n :content-style=\"contentStyle\"\n :min-width=\"minWidth\"\n :width=\"width\"\n @mouseenter=\"hovered = true\"\n @mouseleave=\"hovered = false\"\n :disabled=\"disabled\"\n @update:visible=\"handleDropdownVisible\"\n >\n <!-- 触发 -->\n <template #trigger>\n <span :class=\"cls.e('placeholder')\" v-show=\"!model?.length\">\n {{ placeholder }}\n </span>\n\n <div v-if=\"model?.length\" :class=\"cls.e('tags')\">\n <u-tag\n v-for=\"option of tags\"\n :key=\"option[valueKey]\"\n :closable=\"!disabled\"\n @close=\"handleClose(option)\"\n >\n {{ option[labelKey] }}\n </u-tag>\n <u-tag v-if=\"restTag\"> {{ restTag }}+ </u-tag>\n </div>\n\n <transition name=\"zoom-in\" mode=\"out-in\">\n <u-icon\n v-if=\"clearable && model?.length && hovered && !disabled\"\n :class=\"cls.e('clear')\"\n @click.stop=\"handleClear\"\n >\n <Close />\n </u-icon>\n\n <u-icon :class=\"cls.e('arrow')\" v-else><ArrowDown /></u-icon>\n </transition>\n </template>\n\n <!-- 下拉内容 -->\n <template #content>\n <!-- 多选栏 -->\n <div :class=\"cls.e('content-header')\">\n <u-checkbox\n :model-value=\"allChecked\"\n :indeterminate=\"indeterminate\"\n @update:model-value=\"handleCheckAll\"\n :disabled=\"max !== undefined\"\n >\n 全选\n </u-checkbox>\n\n <span> 已选 {{ model?.length }}/{{ max ?? options?.length ?? 0 }} </span>\n </div>\n\n <!-- 过滤器 -->\n <div v-if=\"filterable\" :class=\"cls.e('content-filter')\">\n <u-input\n placeholder=\"输入关键字进行过滤\"\n v-model=\"queryString\"\n @keydown.enter.prevent=\"handleCreateByEnter\"\n >\n <template #suffix>\n <u-icon><Search /></u-icon>\n </template>\n </u-input>\n </div>\n\n <!-- 多选列表 -->\n <u-scroll\n tag=\"ul\"\n :class=\"[cls.e('options')]\"\n ref=\"scrollRef\"\n v-if=\"options.length\"\n :content-class=\"[cls.e('options-wrap'), bem.is('virtual', virtualEnabled)]\"\n :content-style=\"{ height: virtualEnabled ? withUnit(totalHeight, 'px') : undefined }\"\n >\n <template v-if=\"virtualEnabled\">\n <u-multi-select-option\n v-for=\"{ option, index, key, label, offset } of virtualOptions\"\n :option=\"option\"\n :disabled=\"isDisabled(option)\"\n :key=\"key\"\n :style=\"{ transform: `translateY(${offset}px)` }\"\n @check=\"handleCheck(option, $event)\"\n :checked=\"checkedSet.has(option)\"\n :data-index=\"index\"\n :measure-element=\"measureElement\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ label }}\n </slot>\n </u-multi-select-option>\n </template>\n\n <template v-else>\n <u-multi-select-option\n v-for=\"(option, index) of options\"\n :option=\"option\"\n :disabled=\"isDisabled(option)\"\n :key=\"chainObj(option).get(valueKey)\"\n @check=\"handleCheck(option, $event)\"\n :checked=\"checkedSet.has(option)\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ chainObj(option).get(labelKey) }}\n </slot>\n </u-multi-select-option>\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 <div v-else-if=\"model?.length\" :class=\"[cls.m(size), cls.e('readonly-tags')]\">\n <div :class=\"cls.e('tags')\">\n <u-tag v-for=\"option of tags\" :key=\"option[valueKey]\">\n {{ option[labelKey] }}\n </u-tag>\n </div>\n </div>\n\n <template v-else>\n {{ FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o as chainObj } from '@cat-kit/core'\nimport { useFormComponent, useFormFallbackProps, useVirtual } from '@veltra/compositions'\nimport { ArrowDown, Close, Search } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, withUnit } from '@veltra/utils'\nimport { computed, shallowRef, shallowReactive, watch, provide } from 'vue'\n\nimport type {\n MultiSelectEmits,\n MultiSelectProps,\n ScrollExposed,\n DropdownExposed\n} from '../../types'\nimport { UCheckbox } from '../checkbox'\nimport { UDropdown } from '../dropdown'\nimport { UEmpty } from '../empty'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UScroll } from '../scroll'\nimport { useOptions } from '../select/use-options'\nimport { UTag } from '../tag'\nimport { MultiSelectDIKey } from './di'\nimport UMultiSelectOption from './multi-select-option.vue'\n\ndefineOptions({ name: 'MultiSelect' })\n\nconst props = withDefaults(defineProps<MultiSelectProps>(), {\n labelKey: 'label',\n valueKey: 'value',\n placeholder: '请选择',\n clearable: true,\n visibilityLimit: 3,\n disabled: undefined,\n readonly: undefined,\n minWidth: '220px'\n})\n\nconst emit = defineEmits<MultiSelectEmits>()\n\nconst cls = bem('multi-select')\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst hovered = shallowRef(false)\n\nconst { options: rawOptions, queryString, allOptions: rawAllOptions } = useOptions({ props })\n\nconst createdOptions = shallowRef<Record<string, any>[]>([])\n\nconst options = computed(() => {\n const base = rawOptions.value\n if (!props.creatable || !createdOptions.value.length) return base\n\n const { valueKey } = props\n const createdValues = new Set(createdOptions.value.map((o) => chainObj(o).get(valueKey)))\n const deduped = base.filter((o) => !(o.__isTemp && createdValues.has(chainObj(o).get(valueKey))))\n const dedupedValues = new Set(deduped.map((o) => chainObj(o).get(valueKey)))\n const toAdd = createdOptions.value.filter((o) => !dedupedValues.has(chainObj(o).get(valueKey)))\n return [...toAdd, ...deduped]\n})\n\nconst allOptions = computed(() => {\n if (!props.creatable || !createdOptions.value.length) return rawAllOptions.value\n return [...createdOptions.value, ...rawAllOptions.value]\n})\n\nconst { totalHeight, virtualList, virtualEnabled, measureElement } = useVirtual({\n virtualThreshold: 80,\n estimateSize: () => 40,\n count: computed(() => options.value.length),\n scrollEl: computed(() => scrollRef.value?.containerRef ?? null)\n})\n\nconst virtualOptions = computed(() => {\n const { valueKey, labelKey } = props\n const _options = options.value\n return virtualList.value.map((v) => {\n const option = _options[v.index]!\n const val = chainObj(option).get(valueKey)\n return {\n option,\n index: v.index,\n val,\n key: v.key,\n offset: v.start,\n label: chainObj(option).get(labelKey)\n }\n })\n})\n\nconst filterable = computed(() => {\n return props.filterable || props.creatable || typeof props.options === 'function'\n})\n\nconst model = defineModel<Array<string | number>>()\n\nconst checkedSet = shallowReactive<Set<Record<string, any>>>(new Set())\nconst allChecked = computed(() => {\n return checkedSet.size === options.value.length\n})\nconst indeterminate = computed(() => {\n return checkedSet.size > 0 && !allChecked.value\n})\n\nconst optionsMap = computed(() => {\n const { valueKey } = props\n return new Map<string | number, Record<string, any>>(\n allOptions.value.map((option) => [option[valueKey], option])\n )\n})\n\nconst dropdownRef = shallowRef<DropdownExposed>()\n\nlet internalChange = false\n\nwatch(\n [model, optionsMap],\n ([model, optionsMap]) => {\n if (internalChange) {\n internalChange = false\n return\n }\n checkedSet.clear()\n if (optionsMap.size && model?.length) {\n model.forEach((v) => {\n const option = optionsMap.get(v)\n option && checkedSet.add(option)\n })\n }\n },\n { immediate: true }\n)\n\nconst emitChange = () => {\n emit('change', Array.from(checkedSet))\n}\n\nconst tags = computed(() => {\n let tags: Record<string, any>[] = []\n let { visibilityLimit } = props\n if (visibilityLimit < 0) {\n visibilityLimit = 0\n }\n\n // 禁用时,显示全部\n if (disabled.value || readonly.value) {\n visibilityLimit = model.value?.length ?? 0\n }\n\n model.value?.slice(0, visibilityLimit).forEach((k) => {\n const option = optionsMap.value.get(k)\n option && tags.push(option)\n })\n\n return tags\n})\n\nconst restTag = computed(() => {\n return (model.value?.length ?? 0) - tags.value.length\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n if (!visible) {\n queryString.value = ''\n }\n}\n\nconst handleCheck = (option: Record<string, any>, checked: boolean) => {\n const { valueKey, labelKey } = props\n if (checked) {\n if (option.__isTemp && props.creatable) {\n const created: Record<string, any> = {\n [labelKey]: chainObj(option).get(labelKey),\n [valueKey]: chainObj(option).get(valueKey)\n }\n createdOptions.value = [...createdOptions.value, created]\n checkedSet.add(created)\n internalChange = true\n model.value = [...(model.value ?? []), chainObj(created).get(valueKey)]\n queryString.value = ''\n } else if (!checkedSet.has(option)) {\n checkedSet.add(option)\n internalChange = true\n model.value = [...(model.value ?? []), chainObj(option).get(valueKey)]\n }\n } else {\n checkedSet.delete(option)\n const val = chainObj(option).get(valueKey)\n internalChange = true\n model.value = (model.value ?? []).filter((v) => v !== val)\n removeCreatedOption(option)\n }\n\n emitChange()\n dropdownRef.value?.updateDropdown()\n}\n\n/** 全选 */\nconst handleCheckAll = (checked: boolean) => {\n const { valueKey } = props\n if (checked) {\n options.value.forEach((option) => {\n if (!option.__isTemp) checkedSet.add(option)\n })\n internalChange = true\n model.value = Array.from(checkedSet).map((o) => chainObj(o).get(valueKey))\n } else {\n checkedSet.clear()\n internalChange = true\n model.value = []\n if (props.creatable) {\n createdOptions.value = []\n }\n }\n\n emitChange()\n dropdownRef.value?.updateDropdown()\n}\n\n/** 清除选项 */\nconst handleClear = () => {\n checkedSet.clear()\n internalChange = true\n model.value = []\n if (props.creatable) {\n createdOptions.value = []\n }\n emit('change', [])\n}\n\nconst handleClose = (option: Record<string, any>) => {\n checkedSet.delete(option)\n const val = chainObj(option).get(props.valueKey)\n internalChange = true\n model.value = (model.value ?? []).filter((v) => v !== val)\n removeCreatedOption(option)\n emitChange()\n}\n\nconst removeCreatedOption = (option: Record<string, any>) => {\n if (!props.creatable || !createdOptions.value.length) return\n const { valueKey } = props\n const val = chainObj(option).get(valueKey)\n createdOptions.value = createdOptions.value.filter((o) => chainObj(o).get(valueKey) !== val)\n}\n\nconst handleCreateByEnter = () => {\n if (!props.creatable) return\n const qs = queryString.value?.trim()\n if (!qs) return\n\n const { labelKey, valueKey } = props\n\n const existingCreated = createdOptions.value.find((o) => chainObj(o).get(valueKey) === qs)\n if (existingCreated) {\n if (!checkedSet.has(existingCreated)) {\n checkedSet.add(existingCreated)\n internalChange = true\n model.value = [...(model.value ?? []), chainObj(existingCreated).get(valueKey)]\n }\n queryString.value = ''\n emitChange()\n dropdownRef.value?.updateDropdown()\n return\n }\n\n const exactMatch = rawOptions.value.find((o) => !o.__isTemp && chainObj(o).get(labelKey) === qs)\n if (exactMatch) {\n if (!checkedSet.has(exactMatch)) {\n checkedSet.add(exactMatch)\n internalChange = true\n model.value = [...(model.value ?? []), chainObj(exactMatch).get(valueKey)]\n }\n queryString.value = ''\n emitChange()\n dropdownRef.value?.updateDropdown()\n return\n }\n\n const created: Record<string, any> = { [labelKey]: qs, [valueKey]: qs }\n createdOptions.value = [...createdOptions.value, created]\n checkedSet.add(created)\n internalChange = true\n model.value = [...(model.value ?? []), qs]\n queryString.value = ''\n emitChange()\n dropdownRef.value?.updateDropdown()\n}\n\nconst isDisabled = (option: Record<string, any>) => {\n const { max } = props\n return max !== undefined && checkedSet.size >= max && !checkedSet.has(option)\n}\n\nconst optionClass = cls.e('option')\nconst rippleClass = cls.e('ripple')\nconst checkboxClass = cls.e('checkbox')\n\nprovide(MultiSelectDIKey, { optionClass, rippleClass, checkboxClass })\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"multi-select.js","names":[],"sources":["../../../src/components/multi-select/multi-select.vue"],"sourcesContent":["<template>\n <u-dropdown\n v-if=\"!readonly\"\n trigger=\"click\"\n ref=\"dropdownRef\"\n :class=\"[cls.b, cls.m(size), bem.is('disabled', disabled)]\"\n :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n :content-style=\"contentStyle\"\n :min-width=\"minWidth\"\n :width=\"width\"\n @mouseenter=\"hovered = true\"\n @mouseleave=\"hovered = false\"\n :disabled=\"disabled\"\n @update:visible=\"handleDropdownVisible\"\n >\n <!-- 触发 -->\n <template #trigger>\n <span :class=\"cls.e('placeholder')\" v-show=\"!model?.length\">\n {{ placeholder }}\n </span>\n\n <div v-if=\"model?.length\" :class=\"cls.e('tags')\">\n <u-tag\n v-for=\"option of tags\"\n :key=\"option[valueKey]\"\n :closable=\"!disabled\"\n @close=\"handleClose(option)\"\n >\n {{ option[labelKey] }}\n </u-tag>\n <u-tag v-if=\"restTag\"> {{ restTag }}+ </u-tag>\n </div>\n\n <transition name=\"zoom-in\" mode=\"out-in\">\n <u-icon\n v-if=\"clearable && model?.length && hovered && !disabled\"\n :class=\"cls.e('clear')\"\n @click.stop=\"handleClear\"\n >\n <Close />\n </u-icon>\n\n <u-icon :class=\"cls.e('arrow')\" v-else><ArrowDown /></u-icon>\n </transition>\n </template>\n\n <!-- 下拉内容 -->\n <template #content>\n <!-- 多选栏 -->\n <div :class=\"cls.e('content-header')\">\n <u-checkbox\n :model-value=\"allChecked\"\n :indeterminate=\"indeterminate\"\n @update:model-value=\"handleCheckAll\"\n :disabled=\"max !== undefined\"\n >\n 全选\n </u-checkbox>\n\n <span> 已选 {{ model?.length }}/{{ max ?? options?.length ?? 0 }} </span>\n </div>\n\n <!-- 过滤器 -->\n <div v-if=\"filterable\" :class=\"cls.e('content-filter')\">\n <u-input\n placeholder=\"输入关键字进行过滤\"\n v-model=\"queryString\"\n @keydown.enter.prevent=\"handleCreateByEnter\"\n >\n <template #suffix>\n <u-icon><Search /></u-icon>\n </template>\n </u-input>\n </div>\n\n <!-- 多选列表 -->\n <!--\n 虚拟化启用时内容容器 height 由 useVirtualizer 命令式写入;\n 模板不再绑定 totalSize,避免尺寸变化引起重渲染。\n -->\n <u-scroll\n tag=\"ul\"\n :class=\"[cls.e('options')]\"\n ref=\"scrollRef\"\n v-if=\"options.length\"\n :content-class=\"[cls.e('options-wrap'), bem.is('virtual', virtualEnabled)]\"\n >\n <template v-if=\"virtualEnabled\">\n <u-multi-select-option\n v-for=\"{ option, index, key, label, offset } of virtualOptions\"\n :option=\"option\"\n :disabled=\"isDisabled(option)\"\n :key=\"key\"\n :style=\"{ transform: `translateY(${offset}px)` }\"\n @check=\"handleCheck(option, $event)\"\n :checked=\"checkedSet.has(option)\"\n :index=\"index\"\n :measure-element=\"measureElement\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ label }}\n </slot>\n </u-multi-select-option>\n </template>\n\n <template v-else>\n <u-multi-select-option\n v-for=\"(option, index) of options\"\n :option=\"option\"\n :disabled=\"isDisabled(option)\"\n :key=\"chainObj(option).get(valueKey)\"\n @check=\"handleCheck(option, $event)\"\n :checked=\"checkedSet.has(option)\"\n >\n <slot v-bind=\"{ option, index }\">\n {{ chainObj(option).get(labelKey) }}\n </slot>\n </u-multi-select-option>\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 <div v-else-if=\"model?.length\" :class=\"[cls.m(size), cls.e('readonly-tags')]\">\n <div :class=\"cls.e('tags')\">\n <u-tag v-for=\"option of tags\" :key=\"option[valueKey]\">\n {{ option[labelKey] }}\n </u-tag>\n </div>\n </div>\n\n <template v-else>\n {{ FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o as chainObj } from '@cat-kit/core'\nimport { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { ArrowDown, Close, Search } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { computed, shallowRef, shallowReactive, watch, provide } from 'vue'\n\nimport type {\n MultiSelectEmits,\n MultiSelectProps,\n ScrollExposed,\n DropdownExposed\n} from '../../types'\nimport { UCheckbox } from '../checkbox'\nimport { UDropdown } from '../dropdown'\nimport { UEmpty } from '../empty'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UScroll } from '../scroll'\nimport { useOptions } from '../select/use-options'\nimport { UTag } from '../tag'\nimport { MultiSelectDIKey } from './di'\nimport UMultiSelectOption from './multi-select-option.vue'\n\ndefineOptions({ name: 'MultiSelect' })\n\nconst props = withDefaults(defineProps<MultiSelectProps>(), {\n labelKey: 'label',\n valueKey: 'value',\n placeholder: '请选择',\n clearable: true,\n visibilityLimit: 3,\n disabled: undefined,\n readonly: undefined,\n minWidth: '220px'\n})\n\nconst emit = defineEmits<MultiSelectEmits>()\n\nconst cls = bem('multi-select')\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst hovered = shallowRef(false)\n\nconst { options: rawOptions, queryString, allOptions: rawAllOptions } = useOptions({ props })\n\nconst createdOptions = shallowRef<Record<string, any>[]>([])\n\nconst options = computed(() => {\n const base = rawOptions.value\n if (!props.creatable || !createdOptions.value.length) return base\n\n const { valueKey } = props\n const createdValues = new Set(createdOptions.value.map((o) => chainObj(o).get(valueKey)))\n const deduped = base.filter((o) => !(o.__isTemp && createdValues.has(chainObj(o).get(valueKey))))\n const dedupedValues = new Set(deduped.map((o) => chainObj(o).get(valueKey)))\n const toAdd = createdOptions.value.filter((o) => !dedupedValues.has(chainObj(o).get(valueKey)))\n return [...toAdd, ...deduped]\n})\n\nconst allOptions = computed(() => {\n if (!props.creatable || !createdOptions.value.length) return rawAllOptions.value\n return [...createdOptions.value, ...rawAllOptions.value]\n})\n\nconst virtualEnabled = computed(() => options.value.length > 80)\n\nconst { virtualizer, items } = useVirtualizer({\n estimateSize: () => 40,\n count: computed(() => options.value.length),\n scrollEl: () => scrollRef.value?.containerRef ?? null,\n contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null)\n})\n\nconst virtualOptions = computed(() => {\n const { valueKey, labelKey } = props\n const _options = options.value\n return items.value.map((v) => {\n const option = _options[v.index]!\n const val = chainObj(option).get(valueKey)\n return {\n option,\n index: v.index,\n val,\n key: v.index,\n offset: v.start,\n label: chainObj(option).get(labelKey)\n }\n })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n virtualizer.measureElement(index, el)\n\nconst filterable = computed(() => {\n return props.filterable || props.creatable || typeof props.options === 'function'\n})\n\nconst model = defineModel<Array<string | number>>()\n\nconst checkedSet = shallowReactive<Set<Record<string, any>>>(new Set())\nconst allChecked = computed(() => {\n return checkedSet.size === options.value.length\n})\nconst indeterminate = computed(() => {\n return checkedSet.size > 0 && !allChecked.value\n})\n\nconst optionsMap = computed(() => {\n const { valueKey } = props\n return new Map<string | number, Record<string, any>>(\n allOptions.value.map((option) => [option[valueKey], option])\n )\n})\n\nconst dropdownRef = shallowRef<DropdownExposed>()\n\nlet internalChange = false\n\nwatch(\n [model, optionsMap],\n ([model, optionsMap]) => {\n if (internalChange) {\n internalChange = false\n return\n }\n checkedSet.clear()\n if (optionsMap.size && model?.length) {\n model.forEach((v) => {\n const option = optionsMap.get(v)\n option && checkedSet.add(option)\n })\n }\n },\n { immediate: true }\n)\n\nconst emitChange = () => {\n emit('change', Array.from(checkedSet))\n}\n\nconst tags = computed(() => {\n let tags: Record<string, any>[] = []\n let { visibilityLimit } = props\n if (visibilityLimit < 0) {\n visibilityLimit = 0\n }\n\n // 禁用时,显示全部\n if (disabled.value || readonly.value) {\n visibilityLimit = model.value?.length ?? 0\n }\n\n model.value?.slice(0, visibilityLimit).forEach((k) => {\n const option = optionsMap.value.get(k)\n option && tags.push(option)\n })\n\n return tags\n})\n\nconst restTag = computed(() => {\n return (model.value?.length ?? 0) - tags.value.length\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n if (!visible) {\n queryString.value = ''\n }\n}\n\nconst handleCheck = (option: Record<string, any>, checked: boolean) => {\n const { valueKey, labelKey } = props\n if (checked) {\n if (option.__isTemp && props.creatable) {\n const created: Record<string, any> = {\n [labelKey]: chainObj(option).get(labelKey),\n [valueKey]: chainObj(option).get(valueKey)\n }\n createdOptions.value = [...createdOptions.value, created]\n checkedSet.add(created)\n internalChange = true\n model.value = [...(model.value ?? []), chainObj(created).get(valueKey)]\n queryString.value = ''\n } else if (!checkedSet.has(option)) {\n checkedSet.add(option)\n internalChange = true\n model.value = [...(model.value ?? []), chainObj(option).get(valueKey)]\n }\n } else {\n checkedSet.delete(option)\n const val = chainObj(option).get(valueKey)\n internalChange = true\n model.value = (model.value ?? []).filter((v) => v !== val)\n removeCreatedOption(option)\n }\n\n emitChange()\n dropdownRef.value?.updateDropdown()\n}\n\n/** 全选 */\nconst handleCheckAll = (checked: boolean) => {\n const { valueKey } = props\n if (checked) {\n options.value.forEach((option) => {\n if (!option.__isTemp) checkedSet.add(option)\n })\n internalChange = true\n model.value = Array.from(checkedSet).map((o) => chainObj(o).get(valueKey))\n } else {\n checkedSet.clear()\n internalChange = true\n model.value = []\n if (props.creatable) {\n createdOptions.value = []\n }\n }\n\n emitChange()\n dropdownRef.value?.updateDropdown()\n}\n\n/** 清除选项 */\nconst handleClear = () => {\n checkedSet.clear()\n internalChange = true\n model.value = []\n if (props.creatable) {\n createdOptions.value = []\n }\n emit('change', [])\n}\n\nconst handleClose = (option: Record<string, any>) => {\n checkedSet.delete(option)\n const val = chainObj(option).get(props.valueKey)\n internalChange = true\n model.value = (model.value ?? []).filter((v) => v !== val)\n removeCreatedOption(option)\n emitChange()\n}\n\nconst removeCreatedOption = (option: Record<string, any>) => {\n if (!props.creatable || !createdOptions.value.length) return\n const { valueKey } = props\n const val = chainObj(option).get(valueKey)\n createdOptions.value = createdOptions.value.filter((o) => chainObj(o).get(valueKey) !== val)\n}\n\nconst handleCreateByEnter = () => {\n if (!props.creatable) return\n const qs = queryString.value?.trim()\n if (!qs) return\n\n const { labelKey, valueKey } = props\n\n const existingCreated = createdOptions.value.find((o) => chainObj(o).get(valueKey) === qs)\n if (existingCreated) {\n if (!checkedSet.has(existingCreated)) {\n checkedSet.add(existingCreated)\n internalChange = true\n model.value = [...(model.value ?? []), chainObj(existingCreated).get(valueKey)]\n }\n queryString.value = ''\n emitChange()\n dropdownRef.value?.updateDropdown()\n return\n }\n\n const exactMatch = rawOptions.value.find((o) => !o.__isTemp && chainObj(o).get(labelKey) === qs)\n if (exactMatch) {\n if (!checkedSet.has(exactMatch)) {\n checkedSet.add(exactMatch)\n internalChange = true\n model.value = [...(model.value ?? []), chainObj(exactMatch).get(valueKey)]\n }\n queryString.value = ''\n emitChange()\n dropdownRef.value?.updateDropdown()\n return\n }\n\n const created: Record<string, any> = { [labelKey]: qs, [valueKey]: qs }\n createdOptions.value = [...createdOptions.value, created]\n checkedSet.add(created)\n internalChange = true\n model.value = [...(model.value ?? []), qs]\n queryString.value = ''\n emitChange()\n dropdownRef.value?.updateDropdown()\n}\n\nconst isDisabled = (option: Record<string, any>) => {\n const { max } = props\n return max !== undefined && checkedSet.size >= max && !checkedSet.has(option)\n}\n\nconst optionClass = cls.e('option')\nconst rippleClass = cls.e('ripple')\nconst checkboxClass = cls.e('checkbox')\n\nprovide(MultiSelectDIKey, { optionClass, rippleClass, checkboxClass })\n</script>\n"],"mappings":"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"}
|
|
@@ -28,14 +28,14 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
|
|
|
28
28
|
"onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
|
|
29
29
|
onChange?: ((options: Record<string, any>[]) => any) | undefined;
|
|
30
30
|
}>, {
|
|
31
|
+
labelKey: string;
|
|
32
|
+
valueKey: string;
|
|
31
33
|
disabled: boolean;
|
|
34
|
+
readonly: boolean;
|
|
35
|
+
minWidth: string;
|
|
32
36
|
placeholder: string;
|
|
33
37
|
clearable: boolean;
|
|
34
|
-
readonly: boolean;
|
|
35
|
-
labelKey: string;
|
|
36
|
-
valueKey: string;
|
|
37
38
|
visibilityLimit: number;
|
|
38
|
-
minWidth: string;
|
|
39
39
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
40
40
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
41
41
|
declare const _default: typeof __VLS_export;
|
|
@@ -15,23 +15,23 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
|
|
|
15
15
|
"update:modelValue": (value: (string | number)[]) => any;
|
|
16
16
|
} & {
|
|
17
17
|
"update:modelValue": (value: any[]) => any;
|
|
18
|
-
clear: () => any;
|
|
19
18
|
change: (checked: Record<string, any>[]) => any;
|
|
19
|
+
clear: () => any;
|
|
20
20
|
}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
21
21
|
"onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
|
|
22
|
-
onClear?: (() => any) | undefined;
|
|
23
22
|
onChange?: ((checked: Record<string, any>[]) => any) | undefined;
|
|
23
|
+
onClear?: (() => any) | undefined;
|
|
24
24
|
}>, {
|
|
25
|
+
labelKey: string;
|
|
26
|
+
valueKey: string;
|
|
25
27
|
disabled: boolean;
|
|
28
|
+
readonly: boolean;
|
|
29
|
+
minWidth: string;
|
|
26
30
|
placeholder: string;
|
|
27
31
|
clearable: boolean;
|
|
28
|
-
|
|
29
|
-
labelKey: string;
|
|
30
|
-
valueKey: string;
|
|
32
|
+
expandAll: boolean;
|
|
31
33
|
filterable: boolean;
|
|
32
34
|
visibilityLimit: number;
|
|
33
|
-
minWidth: string;
|
|
34
|
-
expandAll: 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":"index.js","names":["UNotification"],"sources":["../../../src/components/notification/index.ts"],"sourcesContent":["export { default as UNotification } from './notification.vue'\nimport { zIndex } from '@veltra/utils'\nimport { createVNode, render, type VNode, reactive } from 'vue'\n\nimport type { NotificationProps } from '../../types'\nimport UNotification from './notification.vue'\n\ntype NotificationItem = { vm: VNode }\n\nconst notificationQueue = reactive({\n 'bottom-right': [] as NotificationItem[],\n 'bottom-left': [] as NotificationItem[],\n 'top-right': [] as NotificationItem[],\n 'top-left': [] as NotificationItem[]\n})\n\nconst length = (key: string) => {\n return notificationQueue[key].length\n}\n\nlet count = 1\n\nconst close = (id: string, position: string, userClose?: (vm: VNode) => void) => {\n const index = notificationQueue[position].findIndex(({ vm }) => {\n return id === vm.component!.props.id\n })\n if (index > -1) {\n const { vm } = notificationQueue[position][index]!\n userClose?.(vm)\n let offset = Number(notificationQueue[position][index]!.vm.component!.props.offset)\n notificationQueue[position].splice(index, 1)\n let temp = 0\n for (let i = length(position); i > 0; i--) {\n if (i < index + 1) {\n temp = Number(notificationQueue[position][i - 1]!.vm.component!.props.offset)\n notificationQueue[position][i - 1]!.vm.component!.props.offset = offset\n offset = temp\n }\n }\n }\n if (!notificationQueue[position].length) {\n const wrapper = document.getElementById(`notification-${position}-id`)!\n wrapper.style.removeProperty('height')\n wrapper.style.removeProperty('overflow')\n }\n}\n\nconst createWrapper = (options: NotificationProps) => {\n const position = options.position || 'bottom-right'\n if (document.getElementById(`notification-${position}-id`)) {\n return document.getElementById(`notification-${position}-id`)\n } else {\n const offset = options.offset || 20\n const wrapper = document.createElement('div')\n wrapper.id = `notification-${position}-id`\n Object.assign(\n wrapper.style,\n { position: 'fixed', textAlign: 'center' },\n {\n 'top-right': { top: `${offset}px`, right: `${offset}px` },\n 'top-left': { top: `${offset}px`, left: `${offset}px` },\n 'bottom-left': { bottom: `${offset}px`, left: `${offset}px` },\n 'bottom-right': { bottom: `${offset}px`, right: `${offset}px` }\n }[position]\n )\n wrapper.addEventListener('mouseenter', (e: MouseEvent) => {\n if (length(position)) {\n let innerCount = 0\n let innerOffset = 0\n let width = 0\n let height = 0\n for (let i = length(position); i > 0; i--) {\n notificationQueue[position][i - 1]!.vm.component!.exposed!.clearTimer()\n if (i === length(position)) {\n width = notificationQueue[position][i - 1]!.vm.el?.offsetWidth + 8\n }\n notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset\n innerOffset += notificationQueue[position][i - 1]!.vm.el?.offsetHeight / 2 + 5\n if (innerCount < 3) height += notificationQueue[position][i - 1]!.vm.el?.offsetHeight + 10\n innerCount++\n }\n\n Object.assign((e.target as HTMLElement).style, {\n width: `${width}px`,\n height: `${height}px`,\n overflow: 'hidden',\n transition: 'height 0.4s'\n })\n }\n })\n wrapper.addEventListener('mouseleave', (e: MouseEvent) => {\n if (length(position)) {\n let innerOffset = 0\n let innerCount = 0\n let height = 0\n for (let i = length(position); i > 0; i--) {\n notificationQueue[position][i - 1]!.vm.component!.exposed!.startTimer()\n if (i === length(position))\n height = notificationQueue[position][i - 1]!.vm.el?.offsetHeight + 80\n notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset\n if (innerCount < 2) innerOffset += 10\n innerCount++\n }\n ;(e.target as HTMLElement).style.transition = 'height 0.45s'\n ;(e.target as HTMLElement).style.height = `${height}px`\n } else {\n ;(e.target as HTMLElement).style.removeProperty('height')\n ;(e.target as HTMLElement).style.removeProperty('overflow')\n }\n })\n document.body.appendChild(wrapper)\n return wrapper\n }\n}\n\nexport const Notification = (options: NotificationProps): void => {\n const position = options.position || 'bottom-right'\n const container = document.createElement('div')\n const id = `notification_${count++}`\n\n if (length(position)) {\n let innerOffset = 0\n let innerCount = 0\n for (let i = length(position); i > 0; i--) {\n if (innerCount < 2) innerOffset += 10\n notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset\n innerCount++\n }\n }\n\n const vm = createVNode(UNotification, {\n ...options,\n offset: 0,\n id,\n zIndex: zIndex(),\n onClose: () => {\n close(id, position, options.onClose)\n }\n })\n vm.props!.onDestroy = () => render(null, container)\n render(vm, container)\n notificationQueue[position].push({ vm })\n const wrapper = createWrapper(options)\n wrapper?.appendChild(container.firstElementChild!)\n}\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","names":["UNotification"],"sources":["../../../src/components/notification/index.ts"],"sourcesContent":["export { default as UNotification } from './notification.vue'\nimport { zIndex } from '@veltra/utils'\nimport { createVNode, render, type VNode, reactive } from 'vue'\n\nimport type { NotificationProps } from '../../types'\nimport UNotification from './notification.vue'\n\ntype NotificationItem = { vm: VNode }\n\nconst notificationQueue = reactive({\n 'bottom-right': [] as NotificationItem[],\n 'bottom-left': [] as NotificationItem[],\n 'top-right': [] as NotificationItem[],\n 'top-left': [] as NotificationItem[]\n})\n\nconst length = (key: string) => {\n return notificationQueue[key].length\n}\n\nlet count = 1\n\nconst close = (id: string, position: string, userClose?: (vm: VNode) => void) => {\n const index = notificationQueue[position].findIndex(({ vm }) => {\n return id === vm.component!.props.id\n })\n if (index > -1) {\n const { vm } = notificationQueue[position][index]!\n userClose?.(vm)\n let offset = Number(notificationQueue[position][index]!.vm.component!.props.offset)\n notificationQueue[position].splice(index, 1)\n let temp = 0\n for (let i = length(position); i > 0; i--) {\n if (i < index + 1) {\n temp = Number(notificationQueue[position][i - 1]!.vm.component!.props.offset)\n notificationQueue[position][i - 1]!.vm.component!.props.offset = offset\n offset = temp\n }\n }\n }\n if (!notificationQueue[position].length) {\n const wrapper = document.getElementById(`notification-${position}-id`)!\n wrapper.style.removeProperty('height')\n wrapper.style.removeProperty('overflow')\n }\n}\n\nconst createWrapper = (options: NotificationProps) => {\n const position = options.position || 'bottom-right'\n if (document.getElementById(`notification-${position}-id`)) {\n return document.getElementById(`notification-${position}-id`)\n } else {\n const offset = options.offset || 20\n const wrapper = document.createElement('div')\n wrapper.id = `notification-${position}-id`\n Object.assign(\n wrapper.style,\n { position: 'fixed', textAlign: 'center' },\n {\n 'top-right': { top: `${offset}px`, right: `${offset}px` },\n 'top-left': { top: `${offset}px`, left: `${offset}px` },\n 'bottom-left': { bottom: `${offset}px`, left: `${offset}px` },\n 'bottom-right': { bottom: `${offset}px`, right: `${offset}px` }\n }[position]\n )\n wrapper.addEventListener('mouseenter', (e: MouseEvent) => {\n if (length(position)) {\n let innerCount = 0\n let innerOffset = 0\n let width = 0\n let height = 0\n for (let i = length(position); i > 0; i--) {\n notificationQueue[position][i - 1]!.vm.component!.exposed!.clearTimer()\n if (i === length(position)) {\n width = notificationQueue[position][i - 1]!.vm.el?.offsetWidth + 8\n }\n notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset\n innerOffset += notificationQueue[position][i - 1]!.vm.el?.offsetHeight / 2 + 5\n if (innerCount < 3) height += notificationQueue[position][i - 1]!.vm.el?.offsetHeight + 10\n innerCount++\n }\n\n Object.assign((e.target as HTMLElement).style, {\n width: `${width}px`,\n height: `${height}px`,\n overflow: 'hidden',\n transition: 'height 0.4s'\n })\n }\n })\n wrapper.addEventListener('mouseleave', (e: MouseEvent) => {\n if (length(position)) {\n let innerOffset = 0\n let innerCount = 0\n let height = 0\n for (let i = length(position); i > 0; i--) {\n notificationQueue[position][i - 1]!.vm.component!.exposed!.startTimer()\n if (i === length(position))\n height = notificationQueue[position][i - 1]!.vm.el?.offsetHeight + 80\n notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset\n if (innerCount < 2) innerOffset += 10\n innerCount++\n }\n ;(e.target as HTMLElement).style.transition = 'height 0.45s'\n ;(e.target as HTMLElement).style.height = `${height}px`\n } else {\n ;(e.target as HTMLElement).style.removeProperty('height')\n ;(e.target as HTMLElement).style.removeProperty('overflow')\n }\n })\n document.body.appendChild(wrapper)\n return wrapper\n }\n}\n\nexport const Notification = (options: NotificationProps): void => {\n const position = options.position || 'bottom-right'\n const container = document.createElement('div')\n const id = `notification_${count++}`\n\n if (length(position)) {\n let innerOffset = 0\n let innerCount = 0\n for (let i = length(position); i > 0; i--) {\n if (innerCount < 2) innerOffset += 10\n notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset\n innerCount++\n }\n }\n\n const vm = createVNode(UNotification, {\n ...options,\n offset: 0,\n id,\n zIndex: zIndex(),\n onClose: () => {\n close(id, position, options.onClose)\n }\n })\n vm.props!.onDestroy = () => render(null, container)\n render(vm, container)\n notificationQueue[position].push({ vm })\n const wrapper = createWrapper(options)\n wrapper?.appendChild(container.firstElementChild!)\n}\n"],"mappings":"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"}
|
|
@@ -4,8 +4,8 @@ import * as _$_veltra_utils0 from "@veltra/utils";
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/notification/notification.vue.d.ts
|
|
6
6
|
declare const __VLS_export: _$vue.DefineComponent<NotificationProps, _$_veltra_utils0.DeconstructValue<_NotificationExposed>, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<NotificationProps> & Readonly<{}>, {
|
|
7
|
-
closable: boolean;
|
|
8
7
|
duration: number;
|
|
8
|
+
closable: boolean;
|
|
9
9
|
offset: number;
|
|
10
10
|
buttonText: string;
|
|
11
11
|
position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"number-input.js","names":[],"sources":["../../../src/components/number-input/number-input.vue"],"sourcesContent":["<template>\n <u-input\n v-if=\"!readonly\"\n ref=\"inputRef\"\n :class=\"className\"\n :model-value=\"displayed\"\n v-bind=\"inputProps\"\n @update:model-value=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @keydown.stop=\"handleKeydown\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n :size=\"size\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n >\n <template #suffix v-if=\"step !== undefined && step !== false\">\n <slot name=\"suffix\" />\n <div :class=\"cls.e('step')\">\n <u-icon\n @click=\"increase\"\n v-ripple=\"!disabled && increasable\"\n :class=\"bem.is('disabled', disabled || !increasable)\"\n >\n <ArrowUp />\n </u-icon>\n <u-icon\n @click=\"decrease\"\n v-ripple=\"!disabled && reducible\"\n :class=\"bem.is('disabled', disabled || !reducible)\"\n >\n <ArrowDown />\n </u-icon>\n </div>\n </template>\n\n <template #prefix v-if=\"slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n </u-input>\n\n <template v-else>\n {{ generateDisplayed || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n, n, o, isUndef } from '@cat-kit/core'\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowDown, ArrowUp } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'\nimport { computed, shallowRef, watch } from 'vue'\n\nimport type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({\n name: 'NumberInput'\n})\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n placeholder: '请输入',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\nconst emit = defineEmits<NumberInputEmits>()\n\nconst slots = defineSlots<{\n prefix?: () => any\n suffix?: () => any\n}>()\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst inputProps = computed(() => {\n return o(props).pick(['clearable', 'disabled', 'placeholder', 'size', 'prefix', 'suffix'])\n})\n\nconst inputRef = shallowRef<InputExposed>()\n\nconst inputDom = computed(() => inputRef.value?.el)\n\nconst cls = bem('number-input')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value)]\n})\n\n/** 实际值 */\nconst model = defineModel<NumberInputProps['modelValue']>()\n\n// 展示值\nconst displayed = shallowRef('')\n\nconst focused = shallowRef(false)\n\nconst generateDisplayed = computed(() => {\n if (!displayed.value) return ''\n\n return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`\n})\n\n/** 步长 */\nconst stepVal = computed<number>(() => {\n const { step } = props\n if (step === undefined) return 1\n return typeof step === 'boolean' ? 1 : step\n})\n\n/** 是否可增 */\nconst increasable = computed(() => {\n const { max, multiple } = props\n if (isUndef(max) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue < max\n})\n\n/** 是否可减 */\nconst reducible = computed(() => {\n const { min, multiple } = props\n if (isUndef(min) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue > min\n})\n\n// 通过值和步长值计算默认的最大精度\nconst defaultMaxPrecision = computed(() => {\n const { multiple } = props\n // 如果存在倍数,基于原始值计算精度\n const rawValue =\n multiple && model.value !== undefined ? $n.div(model.value, multiple) : model.value\n return Math.max(\n String(rawValue).split('.')[1]?.length ?? 0,\n String(stepVal.value).split('.')[1]?.length ?? 0\n )\n})\n\n/**\n * 获取展示值\n * @param num 实际值\n */\nfunction getDisplayed(num?: number): string {\n if (!num && num !== 0) return ''\n\n const {\n currency,\n precision,\n minPrecision,\n // 如果没有指定最大精度那么设置默认为值和步长值中的较大值\n maxPrecision = defaultMaxPrecision.value,\n multiple\n } = props\n\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const displayValue = multiple ? $n.div(num, multiple) : num\n\n return currency\n ? n(displayValue).currency('CNY', {\n precision,\n minPrecision,\n maxPrecision\n })\n : n(displayValue).fixed(\n precision ?? {\n minPrecision,\n maxPrecision\n }\n )\n}\n\nwatch(\n [model, focused, () => props.currency],\n ([model, focused]) => {\n if (focused) return\n displayed.value = getDisplayed(model)\n },\n { immediate: true }\n)\n\n/**\n * 解析展示值\n * @param str 展示值\n */\nfunction parseDisplayed(str: string): number | undefined {\n if (!str) return undefined\n\n // 将货币格式去掉再转化为数字\n const number = +str.replace(/,/g, '')\n const { multiple } = props\n\n // 如果解析失败,使用当前值作为回退\n // 如果存在倍数,需要先将 model.value 除以倍数得到原始值\n let result: number | undefined\n if (isNaN(number)) {\n if (model.value === undefined) return undefined\n result = multiple ? $n.div(model.value, multiple) : model.value\n } else {\n result = number\n }\n\n if (result === undefined) return undefined\n\n const { precision, maxPrecision, minPrecision } = props\n\n const fixedResult = +n(result).fixed(\n precision ?? {\n minPrecision,\n maxPrecision\n }\n )\n\n // 如果存在倍数,将原始值乘以倍数返回实际值\n return multiple ? $n.mul(fixedResult, multiple) : fixedResult\n}\n\n/**\n * 获取有效值\n * @param val 值\n */\nfunction getValidValue<T extends undefined | number>(val: T): T {\n if (val === undefined) return val\n const { min, max, multiple } = props\n\n // 如果存在倍数,先将值除以倍数得到原始值进行验证,验证后再乘以倍数\n if (multiple) {\n const rawVal = $n.div(val, multiple)\n let validRawVal = rawVal\n if (min !== undefined && rawVal < min) validRawVal = min\n if (max !== undefined && rawVal > max) validRawVal = max\n return $n.mul(validRawVal, multiple) as T\n }\n\n if (min !== undefined && val < min) return min as T\n if (max !== undefined && val > max) return max as T\n return val\n}\n\nfunction handleUpdateModelValue(input: string): void {\n const newVal = parseDisplayed(input)\n model.value = getValidValue(newVal) ?? 0\n displayed.value = input\n}\n\n/**\n * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,\n * 主要用于在输入非数字的情况下的修正处理\n * @param input 输入的值\n */\nfunction handleChange() {\n emit('change', model.value)\n}\n\nconst tween = new Tween(\n { n: model.value ?? 0 },\n {\n onUpdate(state) {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n const { multiple } = props\n // 如果存在倍数,tween.state.n 存储的是原始值,需要乘以倍数后传给 getDisplayed\n const actualValue = multiple ? $n.mul(state.n, multiple) : state.n\n _rawInput.value = getDisplayed(actualValue)\n },\n // 动画进行的过程值有可能被改变, 因此在onComplete中确保还原的是原本的值\n onComplete() {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n _rawInput.value = getDisplayed(model.value)\n }\n }\n)\n\n/** 增 */\nfunction increase(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上加步长\n const newRawVal = $n.plus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.plus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\n/** 减 */\nfunction decrease(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上减步长\n const newRawVal = $n.minus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.minus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\nfunction handleKeydown(e: KeyboardEvent): void {\n if (!props.step) return\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n return increase()\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n return decrease()\n }\n}\n\nfunction handleFocus(): void {\n focused.value = true\n\n // 如果初始值和当前设置的精度不匹配则进行精度修正\n if (model.value === undefined) return\n const { precision, maxPrecision, minPrecision, multiple } = props\n\n if (multiple) {\n // 如果存在倍数,先除以倍数得到原始值进行精度修正,再乘以倍数\n const rawVal = $n.div(model.value, multiple)\n const fixedRawVal = +n(rawVal).fixed(\n precision ?? {\n maxPrecision,\n minPrecision\n }\n )\n model.value = $n.mul(fixedRawVal, multiple)\n } else {\n model.value = +n(model.value).fixed(\n precision ?? {\n maxPrecision,\n minPrecision\n }\n )\n }\n}\n\nfunction handleBlur(): void {\n focused.value = false\n model.value = props.modelValue\n}\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"number-input.js","names":[],"sources":["../../../src/components/number-input/number-input.vue"],"sourcesContent":["<template>\n <u-input\n v-if=\"!readonly\"\n ref=\"inputRef\"\n :class=\"className\"\n :model-value=\"displayed\"\n v-bind=\"inputProps\"\n @update:model-value=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @keydown.stop=\"handleKeydown\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n :size=\"size\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n >\n <template #suffix v-if=\"step !== undefined && step !== false\">\n <slot name=\"suffix\" />\n <div :class=\"cls.e('step')\">\n <u-icon\n @click=\"increase\"\n v-ripple=\"!disabled && increasable\"\n :class=\"bem.is('disabled', disabled || !increasable)\"\n >\n <ArrowUp />\n </u-icon>\n <u-icon\n @click=\"decrease\"\n v-ripple=\"!disabled && reducible\"\n :class=\"bem.is('disabled', disabled || !reducible)\"\n >\n <ArrowDown />\n </u-icon>\n </div>\n </template>\n\n <template #prefix v-if=\"slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n </u-input>\n\n <template v-else>\n {{ generateDisplayed || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n, n, o, isUndef } from '@cat-kit/core'\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowDown, ArrowUp } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'\nimport { computed, shallowRef, watch } from 'vue'\n\nimport type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({\n name: 'NumberInput'\n})\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n placeholder: '请输入',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\nconst emit = defineEmits<NumberInputEmits>()\n\nconst slots = defineSlots<{\n prefix?: () => any\n suffix?: () => any\n}>()\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst inputProps = computed(() => {\n return o(props).pick(['clearable', 'disabled', 'placeholder', 'size', 'prefix', 'suffix'])\n})\n\nconst inputRef = shallowRef<InputExposed>()\n\nconst inputDom = computed(() => inputRef.value?.el)\n\nconst cls = bem('number-input')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value)]\n})\n\n/** 实际值 */\nconst model = defineModel<NumberInputProps['modelValue']>()\n\n// 展示值\nconst displayed = shallowRef('')\n\nconst focused = shallowRef(false)\n\nconst generateDisplayed = computed(() => {\n if (!displayed.value) return ''\n\n return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`\n})\n\n/** 步长 */\nconst stepVal = computed<number>(() => {\n const { step } = props\n if (step === undefined) return 1\n return typeof step === 'boolean' ? 1 : step\n})\n\n/** 是否可增 */\nconst increasable = computed(() => {\n const { max, multiple } = props\n if (isUndef(max) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue < max\n})\n\n/** 是否可减 */\nconst reducible = computed(() => {\n const { min, multiple } = props\n if (isUndef(min) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue > min\n})\n\n// 通过值和步长值计算默认的最大精度\nconst defaultMaxPrecision = computed(() => {\n const { multiple } = props\n // 如果存在倍数,基于原始值计算精度\n const rawValue =\n multiple && model.value !== undefined ? $n.div(model.value, multiple) : model.value\n return Math.max(\n String(rawValue).split('.')[1]?.length ?? 0,\n String(stepVal.value).split('.')[1]?.length ?? 0\n )\n})\n\n/**\n * 获取展示值\n * @param num 实际值\n */\nfunction getDisplayed(num?: number): string {\n if (!num && num !== 0) return ''\n\n const {\n currency,\n precision,\n minPrecision,\n // 如果没有指定最大精度那么设置默认为值和步长值中的较大值\n maxPrecision = defaultMaxPrecision.value,\n multiple\n } = props\n\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const displayValue = multiple ? $n.div(num, multiple) : num\n\n return currency\n ? n(displayValue).currency('CNY', {\n precision,\n minPrecision,\n maxPrecision\n })\n : n(displayValue).fixed(\n precision ?? {\n minPrecision,\n maxPrecision\n }\n )\n}\n\nwatch(\n [model, focused, () => props.currency],\n ([model, focused]) => {\n if (focused) return\n displayed.value = getDisplayed(model)\n },\n { immediate: true }\n)\n\n/**\n * 解析展示值\n * @param str 展示值\n */\nfunction parseDisplayed(str: string): number | undefined {\n if (!str) return undefined\n\n // 将货币格式去掉再转化为数字\n const number = +str.replace(/,/g, '')\n const { multiple } = props\n\n // 如果解析失败,使用当前值作为回退\n // 如果存在倍数,需要先将 model.value 除以倍数得到原始值\n let result: number | undefined\n if (isNaN(number)) {\n if (model.value === undefined) return undefined\n result = multiple ? $n.div(model.value, multiple) : model.value\n } else {\n result = number\n }\n\n if (result === undefined) return undefined\n\n const { precision, maxPrecision, minPrecision } = props\n\n const fixedResult = +n(result).fixed(\n precision ?? {\n minPrecision,\n maxPrecision\n }\n )\n\n // 如果存在倍数,将原始值乘以倍数返回实际值\n return multiple ? $n.mul(fixedResult, multiple) : fixedResult\n}\n\n/**\n * 获取有效值\n * @param val 值\n */\nfunction getValidValue<T extends undefined | number>(val: T): T {\n if (val === undefined) return val\n const { min, max, multiple } = props\n\n // 如果存在倍数,先将值除以倍数得到原始值进行验证,验证后再乘以倍数\n if (multiple) {\n const rawVal = $n.div(val, multiple)\n let validRawVal = rawVal\n if (min !== undefined && rawVal < min) validRawVal = min\n if (max !== undefined && rawVal > max) validRawVal = max\n return $n.mul(validRawVal, multiple) as T\n }\n\n if (min !== undefined && val < min) return min as T\n if (max !== undefined && val > max) return max as T\n return val\n}\n\nfunction handleUpdateModelValue(input: string): void {\n const newVal = parseDisplayed(input)\n model.value = getValidValue(newVal) ?? 0\n displayed.value = input\n}\n\n/**\n * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,\n * 主要用于在输入非数字的情况下的修正处理\n * @param input 输入的值\n */\nfunction handleChange() {\n emit('change', model.value)\n}\n\nconst tween = new Tween(\n { n: model.value ?? 0 },\n {\n onUpdate(state) {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n const { multiple } = props\n // 如果存在倍数,tween.state.n 存储的是原始值,需要乘以倍数后传给 getDisplayed\n const actualValue = multiple ? $n.mul(state.n, multiple) : state.n\n _rawInput.value = getDisplayed(actualValue)\n },\n // 动画进行的过程值有可能被改变, 因此在onComplete中确保还原的是原本的值\n onComplete() {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n _rawInput.value = getDisplayed(model.value)\n }\n }\n)\n\n/** 增 */\nfunction increase(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上加步长\n const newRawVal = $n.plus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.plus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\n/** 减 */\nfunction decrease(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上减步长\n const newRawVal = $n.minus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.minus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\nfunction handleKeydown(e: KeyboardEvent): void {\n if (!props.step) return\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n return increase()\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n return decrease()\n }\n}\n\nfunction handleFocus(): void {\n focused.value = true\n\n // 如果初始值和当前设置的精度不匹配则进行精度修正\n if (model.value === undefined) return\n const { precision, maxPrecision, minPrecision, multiple } = props\n\n if (multiple) {\n // 如果存在倍数,先除以倍数得到原始值进行精度修正,再乘以倍数\n const rawVal = $n.div(model.value, multiple)\n const fixedRawVal = +n(rawVal).fixed(\n precision ?? {\n maxPrecision,\n minPrecision\n }\n )\n model.value = $n.mul(fixedRawVal, multiple)\n } else {\n model.value = +n(model.value).fixed(\n precision ?? {\n maxPrecision,\n minPrecision\n }\n )\n }\n}\n\nfunction handleBlur(): void {\n focused.value = false\n model.value = props.modelValue\n}\n</script>\n"],"mappings":"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"}
|
|
@@ -21,9 +21,9 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
|
|
|
21
21
|
onChange?: ((value?: number | undefined) => any) | undefined;
|
|
22
22
|
}>, {
|
|
23
23
|
disabled: boolean;
|
|
24
|
+
readonly: boolean;
|
|
24
25
|
placeholder: string;
|
|
25
26
|
clearable: boolean;
|
|
26
|
-
readonly: boolean;
|
|
27
27
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
28
28
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
29
29
|
declare const _default: typeof __VLS_export;
|
|
@@ -25,9 +25,9 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
|
|
|
25
25
|
"onUpdate:end"?: ((value: number | undefined) => any) | undefined;
|
|
26
26
|
}>, {
|
|
27
27
|
disabled: boolean;
|
|
28
|
-
clearable: boolean;
|
|
29
28
|
readonly: boolean;
|
|
30
29
|
separator: string;
|
|
30
|
+
clearable: boolean;
|
|
31
31
|
startPlaceholder: string;
|
|
32
32
|
endPlaceholder: string;
|
|
33
33
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-transform.js","names":[],"sources":["../../../src/components/palette/color-transform.ts"],"sourcesContent":["import type { PaletteRGB, PaletteHSV } from '../../types'\n\n/**\n * 将色相值转换为 RGB 颜色\n * @param h 色相值\n * @returns RGB 颜色\n */\nexport function HUE2RGB(h: number): PaletteRGB {\n // 将色相值映射到0-5的范围\n const segment = h / 60\n const x = 1 - Math.abs((segment % 2) - 1) // 计算中间值\n let r = 0,\n g = 0,\n b = 0\n // 根据色相所在的区间计算RGB值\n if (segment >= 0 && segment < 1) {\n ;[r, g, b] = [1, x, 0]\n } else if (segment < 2) {\n ;[r, g, b] = [x, 1, 0]\n } else if (segment < 3) {\n ;[r, g, b] = [0, 1, x]\n } else if (segment < 4) {\n ;[r, g, b] = [0, x, 1]\n } else if (segment < 5) {\n ;[r, g, b] = [x, 0, 1]\n } else {\n ;[r, g, b] = [1, 0, x]\n }\n // 将RGB值从0-1范围映射到0-255范围\n return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }\n}\n\n/**\n * 将色调、饱和度和亮度转换为 RGB 颜色\n * @param hsv 色调、饱和度和亮度\n */\nexport function HSV2RGB(hsv: PaletteHSV): PaletteRGB {\n const { h, s, v } = hsv\n\n // 使用色相区间映射获取基础RGB值\n const { r, g, b } = HUE2RGB(h)\n\n // 应用饱和度和亮度\n const saturationFactor = 1 - s\n const valueFactor = v\n\n return {\n r: Math.round((r + (255 - r) * saturationFactor) * valueFactor),\n g: Math.round((g + (255 - g) * saturationFactor) * valueFactor),\n b: Math.round((b + (255 - b) * saturationFactor) * valueFactor)\n }\n}\n\n/**\n * 将 RGB 颜色转换为 HEX 颜色\n * @param RGB RGB 颜色\n * @param alpha 透明度\n * @returns HEX 颜色\n */\nexport function RGB2HEX(RGB: PaletteRGB, alpha = 1): string {\n let hexStr = ['r', 'g', 'b']\n .map((key) => RGB[key].toString(16).padStart(2, '0'))\n .join('')\n .toUpperCase()\n\n if (alpha < 1) {\n hexStr += Math.round(alpha * 255)\n .toString(16)\n .padStart(2, '0')\n .toUpperCase()\n }\n\n return hexStr\n}\n\n/**\n * 将 RGB 颜色转换为 HSV 颜色\n * @param RGB RGB 颜色\n * @returns HSV 颜色\n */\nexport function RGB2HSV(RGB: PaletteRGB): PaletteHSV {\n // 归一化到0-1范围\n const red = RGB.r / 255\n const green = RGB.g / 255\n const blue = RGB.b / 255\n const max = Math.max(red, green, blue)\n const min = Math.min(red, green, blue)\n const delta = max - min\n let h = 0\n if (delta !== 0) {\n if (max === red) {\n h = ((green - blue) / delta) % 6\n } else if (max === green) {\n h = (blue - red) / delta + 2\n } else {\n h = (red - green) / delta + 4\n }\n h = (h * 60 + 360) % 360 // 确保正值\n }\n const s = max === 0 ? 0 : delta / max\n const v = max\n return { h, s, v }\n}\n\n/**\n * 将 HEX 颜色转换为 RGB 颜色\n * @param hex HEX 颜色\n * @returns RGB 颜色\n */\nexport function HEX2RGBA(hex: string): { RGB: PaletteRGB; alpha: number } {\n const rgb = { r: 0, g: 0, b: 0 }\n let alpha = 1\n\n if (hex.startsWith('#')) {\n hex = hex.slice(1)\n }\n\n if (hex.length === 3 || hex.length === 4) {\n hex = hex\n .split('')\n .map((char) => char + char)\n .join('')\n }\n\n const alphaStr = hex.slice(6)\n if (alphaStr) {\n alpha = parseInt(alphaStr, 16) / 255\n }\n rgb.r = parseInt(hex.slice(0, 2), 16)\n rgb.g = parseInt(hex.slice(2, 4), 16)\n rgb.b = parseInt(hex.slice(4, 6), 16)\n\n return { RGB: rgb, alpha }\n}\n"],"mappings":";;;;;;AAOA,SAAgB,QAAQ,GAAuB;CAE7C,MAAM,UAAU,IAAI;CACpB,MAAM,IAAI,IAAI,KAAK,IAAK,UAAU,IAAK,EAAE;CACzC,IAAI,IAAI,GACN,IAAI,GACJ,IAAI;AAEN,KAAI,WAAW,KAAK,UAAU,EAC3B,EAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;EAAE;UACb,UAAU,EAClB,EAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;EAAE;UACb,UAAU,EAClB,EAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;EAAE;UACb,UAAU,EAClB,EAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;EAAE;UACb,UAAU,EAClB,EAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;EAAE;KAErB,EAAC,GAAG,GAAG,KAAK;EAAC;EAAG;EAAG;EAAE;AAGxB,QAAO;EAAE,GAAG,KAAK,MAAM,IAAI,IAAI;EAAE,GAAG,KAAK,MAAM,IAAI,IAAI;EAAE,GAAG,KAAK,MAAM,IAAI,IAAI;EAAE;;;;;;AAOnF,SAAgB,QAAQ,KAA6B;CACnD,MAAM,EAAE,GAAG,GAAG,MAAM;CAGpB,MAAM,EAAE,GAAG,GAAG,MAAM,QAAQ,EAAE;CAG9B,MAAM,mBAAmB,IAAI;CAC7B,MAAM,cAAc;AAEpB,QAAO;EACL,GAAG,KAAK,OAAO,KAAK,MAAM,KAAK,oBAAoB,YAAY;EAC/D,GAAG,KAAK,OAAO,KAAK,MAAM,KAAK,oBAAoB,YAAY;EAC/D,GAAG,KAAK,OAAO,KAAK,MAAM,KAAK,oBAAoB,YAAY;EAChE;;;;;;;;AASH,SAAgB,QAAQ,KAAiB,QAAQ,GAAW;CAC1D,IAAI,SAAS;EAAC;EAAK;EAAK;EAAI,CACzB,KAAK,QAAQ,IAAI,KAAK,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,CACpD,KAAK,GAAG,CACR,aAAa;AAEhB,KAAI,QAAQ,EACV,WAAU,KAAK,MAAM,QAAQ,IAAI,CAC9B,SAAS,GAAG,CACZ,SAAS,GAAG,IAAI,CAChB,aAAa;AAGlB,QAAO;;;;;;;AAQT,SAAgB,QAAQ,KAA6B;CAEnD,MAAM,MAAM,IAAI,IAAI;CACpB,MAAM,QAAQ,IAAI,IAAI;CACtB,MAAM,OAAO,IAAI,IAAI;CACrB,MAAM,MAAM,KAAK,IAAI,KAAK,OAAO,KAAK;CAEtC,MAAM,QAAQ,MADF,KAAK,IAAI,KAAK,OAAO,
|
|
1
|
+
{"version":3,"file":"color-transform.js","names":[],"sources":["../../../src/components/palette/color-transform.ts"],"sourcesContent":["import type { PaletteRGB, PaletteHSV } from '../../types'\n\n/**\n * 将色相值转换为 RGB 颜色\n * @param h 色相值\n * @returns RGB 颜色\n */\nexport function HUE2RGB(h: number): PaletteRGB {\n // 将色相值映射到0-5的范围\n const segment = h / 60\n const x = 1 - Math.abs((segment % 2) - 1) // 计算中间值\n let r = 0,\n g = 0,\n b = 0\n // 根据色相所在的区间计算RGB值\n if (segment >= 0 && segment < 1) {\n ;[r, g, b] = [1, x, 0]\n } else if (segment < 2) {\n ;[r, g, b] = [x, 1, 0]\n } else if (segment < 3) {\n ;[r, g, b] = [0, 1, x]\n } else if (segment < 4) {\n ;[r, g, b] = [0, x, 1]\n } else if (segment < 5) {\n ;[r, g, b] = [x, 0, 1]\n } else {\n ;[r, g, b] = [1, 0, x]\n }\n // 将RGB值从0-1范围映射到0-255范围\n return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }\n}\n\n/**\n * 将色调、饱和度和亮度转换为 RGB 颜色\n * @param hsv 色调、饱和度和亮度\n */\nexport function HSV2RGB(hsv: PaletteHSV): PaletteRGB {\n const { h, s, v } = hsv\n\n // 使用色相区间映射获取基础RGB值\n const { r, g, b } = HUE2RGB(h)\n\n // 应用饱和度和亮度\n const saturationFactor = 1 - s\n const valueFactor = v\n\n return {\n r: Math.round((r + (255 - r) * saturationFactor) * valueFactor),\n g: Math.round((g + (255 - g) * saturationFactor) * valueFactor),\n b: Math.round((b + (255 - b) * saturationFactor) * valueFactor)\n }\n}\n\n/**\n * 将 RGB 颜色转换为 HEX 颜色\n * @param RGB RGB 颜色\n * @param alpha 透明度\n * @returns HEX 颜色\n */\nexport function RGB2HEX(RGB: PaletteRGB, alpha = 1): string {\n let hexStr = ['r', 'g', 'b']\n .map((key) => RGB[key].toString(16).padStart(2, '0'))\n .join('')\n .toUpperCase()\n\n if (alpha < 1) {\n hexStr += Math.round(alpha * 255)\n .toString(16)\n .padStart(2, '0')\n .toUpperCase()\n }\n\n return hexStr\n}\n\n/**\n * 将 RGB 颜色转换为 HSV 颜色\n * @param RGB RGB 颜色\n * @returns HSV 颜色\n */\nexport function RGB2HSV(RGB: PaletteRGB): PaletteHSV {\n // 归一化到0-1范围\n const red = RGB.r / 255\n const green = RGB.g / 255\n const blue = RGB.b / 255\n const max = Math.max(red, green, blue)\n const min = Math.min(red, green, blue)\n const delta = max - min\n let h = 0\n if (delta !== 0) {\n if (max === red) {\n h = ((green - blue) / delta) % 6\n } else if (max === green) {\n h = (blue - red) / delta + 2\n } else {\n h = (red - green) / delta + 4\n }\n h = (h * 60 + 360) % 360 // 确保正值\n }\n const s = max === 0 ? 0 : delta / max\n const v = max\n return { h, s, v }\n}\n\n/**\n * 将 HEX 颜色转换为 RGB 颜色\n * @param hex HEX 颜色\n * @returns RGB 颜色\n */\nexport function HEX2RGBA(hex: string): { RGB: PaletteRGB; alpha: number } {\n const rgb = { r: 0, g: 0, b: 0 }\n let alpha = 1\n\n if (hex.startsWith('#')) {\n hex = hex.slice(1)\n }\n\n if (hex.length === 3 || hex.length === 4) {\n hex = hex\n .split('')\n .map((char) => char + char)\n .join('')\n }\n\n const alphaStr = hex.slice(6)\n if (alphaStr) {\n alpha = parseInt(alphaStr, 16) / 255\n }\n rgb.r = parseInt(hex.slice(0, 2), 16)\n rgb.g = parseInt(hex.slice(2, 4), 16)\n rgb.b = parseInt(hex.slice(4, 6), 16)\n\n return { RGB: rgb, alpha }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/palette/di.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/palette/di.ts"],"sourcesContent":["import type { UserAction } from '@veltra/compositions'\nimport type { BEM } from '@veltra/utils'\nimport type { InjectionKey, Ref, ComputedRef } from 'vue'\n\nimport type { PaletteHSV, PaletteRGB } from '../../types'\n\nexport const PaletteDIKey: InjectionKey<{\n cls: BEM<'palette', 'u-'>\n /** 色调 RGB 值 */\n hueRGB: ComputedRef<PaletteRGB>\n /** 色调 饱和度 亮度 */\n HSV: PaletteHSV\n /** RGB 值 */\n RGB: ComputedRef<PaletteRGB>\n /** 透明度 */\n alpha: Ref<number>\n /** 将函数包装为用户动作(阻断 modelValue 回流副作用) */\n userAction: UserAction\n /** 当前是否处于用户动作期间 */\n isUserActive: () => boolean\n /** 更新色调 */\n updateHue: (deg: number) => void\n /** 更新调色盘透明度 */\n updateAlpha: (alpha: number) => void\n /** 更新饱和度 亮度 */\n updateSV: (sv: { s: number; v: number }) => void\n}> = Symbol('PaletteDIKey')\n"],"mappings":";AAMA,MAAa,eAoBR,OAAO,eAAe"}
|
|
@@ -6,7 +6,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
6
6
|
name: "PaletteAlpha",
|
|
7
7
|
__name: "palette-alpha",
|
|
8
8
|
setup(__props, { expose: __expose }) {
|
|
9
|
-
const { cls, updateAlpha, hueRGB, alpha,
|
|
9
|
+
const { cls, updateAlpha, hueRGB, alpha, userAction, isUserActive } = inject(PaletteDIKey);
|
|
10
10
|
const alphaRef = shallowRef();
|
|
11
11
|
const alphaThumbTransformX = shallowRef(0);
|
|
12
12
|
const alphaThumbStyle = computed(() => {
|
|
@@ -18,12 +18,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
18
18
|
alphaWidth = alphaRef.value?.offsetWidth ?? 0;
|
|
19
19
|
rangeX[1] = alphaWidth;
|
|
20
20
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
});
|
|
26
|
-
}
|
|
21
|
+
const updateOffsetX = userAction((offsetX) => {
|
|
22
|
+
alphaThumbTransformX.value = offsetX;
|
|
23
|
+
updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0);
|
|
24
|
+
});
|
|
27
25
|
const alphaDragger = useDrag({
|
|
28
26
|
target: alphaRef,
|
|
29
27
|
rangeX,
|
|
@@ -48,9 +46,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
48
46
|
init();
|
|
49
47
|
});
|
|
50
48
|
watch(alpha, (newAlphaValue) => {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
});
|
|
49
|
+
if (isUserActive()) return;
|
|
50
|
+
alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0;
|
|
54
51
|
}, { flush: "post" });
|
|
55
52
|
__expose({ init });
|
|
56
53
|
return (_ctx, _cache) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette-alpha.js","names":[],"sources":["../../../src/components/palette/palette-alpha.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('alpha')\" ref=\"alphaRef\">\n <div :class=\"cls.e('alpha-bg')\" :style=\"{ background: alphaSliderBG }\"></div>\n\n <span :class=\"cls.e('alpha-thumb')\" @click.stop :style=\"alphaThumbStyle\"></span>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, shallowRef, onMounted, watch } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n name: 'PaletteAlpha'\n})\n\nconst { cls, updateAlpha, hueRGB, alpha,
|
|
1
|
+
{"version":3,"file":"palette-alpha.js","names":[],"sources":["../../../src/components/palette/palette-alpha.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('alpha')\" ref=\"alphaRef\">\n <div :class=\"cls.e('alpha-bg')\" :style=\"{ background: alphaSliderBG }\"></div>\n\n <span :class=\"cls.e('alpha-thumb')\" @click.stop :style=\"alphaThumbStyle\"></span>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, shallowRef, onMounted, watch } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n name: 'PaletteAlpha'\n})\n\nconst { cls, updateAlpha, hueRGB, alpha, userAction, isUserActive } = inject(PaletteDIKey)!\n\nconst alphaRef = shallowRef<HTMLElement>()\n\nconst alphaThumbTransformX = shallowRef(0)\n\nconst alphaThumbStyle = computed(() => {\n return { transform: `translateX(${alphaThumbTransformX.value}px)` }\n})\n\nlet alphaWidth = 0\nconst rangeX = [0, 0] as [number, number]\n\nfunction getAlphaWidth() {\n alphaWidth = alphaRef.value?.offsetWidth ?? 0\n rangeX[1] = alphaWidth\n}\n\nconst updateOffsetX = userAction((offsetX: number) => {\n alphaThumbTransformX.value = offsetX\n updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0)\n})\n\nconst alphaDragger = useDrag({\n target: alphaRef,\n rangeX,\n onDrag({ offsetX }) {\n updateOffsetX(offsetX)\n },\n onDragStart(e) {\n getAlphaWidth()\n\n alphaDragger.update({ offsetX: e.offsetX })\n\n updateOffsetX(e.offsetX)\n }\n})\n\nconst alphaSliderBG = computed(() => {\n const { r, g, b } = hueRGB.value\n return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1))`\n})\n\nfunction init(): void {\n getAlphaWidth()\n alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * alpha.value : 0\n}\n\nonMounted(() => {\n init()\n})\n\nwatch(\n alpha,\n (newAlphaValue) => {\n if (isUserActive()) return\n alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0\n },\n { flush: 'post' }\n)\n\ndefineExpose({\n init\n})\n</script>\n"],"mappings":";;;;;;;;EAkBA,MAAM,EAAE,KAAK,aAAa,QAAQ,OAAO,YAAY,iBAAiB,OAAO,aAAa;EAE1F,MAAM,WAAW,YAAwB;EAEzC,MAAM,uBAAuB,WAAW,EAAC;EAEzC,MAAM,kBAAkB,eAAe;AACrC,UAAO,EAAE,WAAW,cAAc,qBAAqB,MAAM,MAAK;IACnE;EAED,IAAI,aAAa;EACjB,MAAM,SAAS,CAAC,GAAG,EAAE;EAErB,SAAS,gBAAgB;AACvB,gBAAa,SAAS,OAAO,eAAe;AAC5C,UAAO,KAAK;;EAGd,MAAM,gBAAgB,YAAY,YAAoB;AACpD,wBAAqB,QAAQ;AAC7B,eAAY,aAAa,IAAI,UAAU,aAAa,EAAC;IACtD;EAED,MAAM,eAAe,QAAQ;GAC3B,QAAQ;GACR;GACA,OAAO,EAAE,WAAW;AAClB,kBAAc,QAAO;;GAEvB,YAAY,GAAG;AACb,mBAAc;AAEd,iBAAa,OAAO,EAAE,SAAS,EAAE,SAAS,CAAA;AAE1C,kBAAc,EAAE,QAAO;;GAE1B,CAAA;EAED,MAAM,gBAAgB,eAAe;GACnC,MAAM,EAAE,GAAG,GAAG,MAAM,OAAO;AAC3B,UAAO,kCAAkC,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE;IACnF;EAED,SAAS,OAAa;AACpB,kBAAc;AACd,wBAAqB,QAAQ,aAAa,IAAI,aAAa,MAAM,QAAQ;;AAG3E,kBAAgB;AACd,SAAK;IACN;AAED,QACE,QACC,kBAAkB;AACjB,OAAI,cAAc,CAAE;AACpB,wBAAqB,QAAQ,aAAa,IAAI,aAAa,gBAAgB;KAE7E,EAAE,OAAO,QAAO,CAClB;AAEA,WAAa,EACX,MACD,CAAA;;uBAhFC,mBAIM,OAAA;IAJA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;aAAe;IAAJ,KAAI;OAC/B,mBAA6E,OAAA;IAAvE,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;IAAe,OAAK,eAAA,EAAA,YAAgB,cAAA,OAAa,CAAA;gBAEnE,mBAAgF,QAAA;IAAzE,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;IAAkB,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;IAAE,OAAK,eAAE,gBAAA,MAAe"}
|