@veltra/desktop 1.0.15 → 1.1.1

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.
Files changed (109) hide show
  1. package/dist/components/action/action-group.vue.d.ts +2 -2
  2. package/dist/components/action/action.vue.d.ts +1 -1
  3. package/dist/components/action/style2.css +2 -2
  4. package/dist/components/auto-complete/style2.css +5 -4
  5. package/dist/components/badge/badge.js +2 -1
  6. package/dist/components/badge/badge.js.map +1 -1
  7. package/dist/components/batch-edit/batch-edit.vue.d.ts +1 -1
  8. package/dist/components/batch-edit/style2.css +2 -2
  9. package/dist/components/breadcrumb/style2.css +1 -1
  10. package/dist/components/button/style2.css +8 -7
  11. package/dist/components/card/style2.css +2 -0
  12. package/dist/components/cascade/cascade.vue.d.ts +1 -1
  13. package/dist/components/cascade/style2.css +4 -3
  14. package/dist/components/check-tag/check-tag.js +1 -1
  15. package/dist/components/checkbox/checkbox-button.vue.d.ts +1 -1
  16. package/dist/components/checkbox/style2.css +1 -1
  17. package/dist/components/checkbox-group/checkbox-group.vue.d.ts +1 -1
  18. package/dist/components/code-editor/style2.css +7 -9
  19. package/dist/components/collapse/style2.css +3 -3
  20. package/dist/components/context-menu/style2.css +3 -1
  21. package/dist/components/date-panel/date-panel.vue.d.ts +1 -1
  22. package/dist/components/date-picker/date-picker.vue.d.ts +3 -3
  23. package/dist/components/date-range-picker/date-range-picker.vue.d.ts +1 -1
  24. package/dist/components/date-range-picker/style2.css +5 -4
  25. package/dist/components/dialog/style2.css +2 -0
  26. package/dist/components/drawer/drawer.vue.d.ts +2 -2
  27. package/dist/components/drawer/style2.css +2 -1
  28. package/dist/components/dropdown/style2.css +2 -0
  29. package/dist/components/expression-editor/style2.css +2 -2
  30. package/dist/components/file-viewer/file-viewer.vue.d.ts +1 -1
  31. package/dist/components/file-viewer/style2.css +6 -6
  32. package/dist/components/form-item/style2.css +5 -2
  33. package/dist/components/input/input.js.map +1 -1
  34. package/dist/components/input/input.vue.d.ts +2 -2
  35. package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js +30 -13
  36. package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js.map +1 -1
  37. package/dist/components/input/style2.css +11 -14
  38. package/dist/components/menu/style2.css +4 -2
  39. package/dist/components/multi-select/multi-select.vue.d.ts +2 -2
  40. package/dist/components/multi-select/style2.css +5 -4
  41. package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +2 -2
  42. package/dist/components/multi-tree-select/style2.css +5 -4
  43. package/dist/components/number-input/number-input.js +48 -10
  44. package/dist/components/number-input/number-input.js.map +1 -1
  45. package/dist/components/number-input/number-input.vue.d.ts +2 -0
  46. package/dist/components/number-input/style2.css +25 -0
  47. package/dist/components/palette/palette.js +10 -3
  48. package/dist/components/palette/palette.js.map +1 -1
  49. package/dist/components/progress-nodes/progress-nodes.vue.d.ts +2 -2
  50. package/dist/components/progress-nodes/style2.css +1 -1
  51. package/dist/components/radio-group/radio-group.vue.d.ts +1 -1
  52. package/dist/components/rich-text-editor/style2.css +2 -2
  53. package/dist/components/select/select.js +6 -2
  54. package/dist/components/select/select.js.map +1 -1
  55. package/dist/components/select/select.vue.d.ts +1 -1
  56. package/dist/components/steps/steps.vue.d.ts +1 -1
  57. package/dist/components/switch/style2.css +3 -0
  58. package/dist/components/table/table.vue.d.ts +2 -2
  59. package/dist/components/tabs/tabs-horizontal.vue.d.ts +5 -5
  60. package/dist/components/tabs/tabs-vertical.vue.d.ts +4 -4
  61. package/dist/components/tabs/tabs.vue.d.ts +5 -5
  62. package/dist/components/textarea/style2.css +7 -6
  63. package/dist/components/theme/style2.css +2 -1
  64. package/dist/components/tree-select/tree-select.vue.d.ts +2 -2
  65. package/dist/types/badge.d.ts +1 -1
  66. package/dist/types/check-tag.d.ts +1 -1
  67. package/dist/types/date-picker.d.ts +2 -2
  68. package/dist/types/number-input.d.ts +1 -0
  69. package/package.json +11 -11
  70. package/src/components/action/style.scss +2 -2
  71. package/src/components/auto-complete/style.scss +5 -4
  72. package/src/components/badge/badge.vue +4 -1
  73. package/src/components/batch-edit/style.scss +2 -2
  74. package/src/components/breadcrumb/style.scss +4 -2
  75. package/src/components/button/style.scss +2 -1
  76. package/src/components/card/style.scss +2 -0
  77. package/src/components/cascade/style.scss +4 -4
  78. package/src/components/checkbox/style.scss +2 -1
  79. package/src/components/code-editor/style.scss +7 -8
  80. package/src/components/collapse/style.scss +13 -7
  81. package/src/components/context-menu/style.scss +6 -2
  82. package/src/components/date-range-picker/style.scss +5 -5
  83. package/src/components/dialog/style.scss +2 -1
  84. package/src/components/drawer/style.scss +2 -1
  85. package/src/components/dropdown/style.scss +2 -0
  86. package/src/components/expression-editor/style.scss +8 -6
  87. package/src/components/file-viewer/style.scss +7 -7
  88. package/src/components/form-item/style.scss +3 -3
  89. package/src/components/input/input.vue +30 -11
  90. package/src/components/input/style.scss +16 -17
  91. package/src/components/menu/style.scss +4 -2
  92. package/src/components/multi-select/style.scss +5 -5
  93. package/src/components/multi-tree-select/style.scss +5 -4
  94. package/src/components/number-input/__test__/number-input.test.ts +60 -0
  95. package/src/components/number-input/number-input.vue +48 -5
  96. package/src/components/number-input/style.scss +30 -0
  97. package/src/components/palette/palette.vue +14 -4
  98. package/src/components/progress-nodes/style.scss +1 -1
  99. package/src/components/rich-text-editor/style.scss +8 -4
  100. package/src/components/select/select.vue +9 -2
  101. package/src/components/switch/style.scss +3 -0
  102. package/src/components/tabs/style.scss +4 -2
  103. package/src/components/textarea/style.scss +9 -8
  104. package/src/components/theme/style.scss +2 -1
  105. package/src/components/tree/style.scss +2 -2
  106. package/src/types/badge.ts +1 -1
  107. package/src/types/check-tag.ts +1 -1
  108. package/src/types/date-picker.ts +2 -2
  109. package/src/types/number-input.ts +1 -0
@@ -1,5 +1,5 @@
1
1
  import _sfc_main from "../icon/icon.js";
2
- import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeModels, nextTick, normalizeClass, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useModel, withCtx, withModifiers } from "vue";
2
+ import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeModels, nextTick, normalizeClass, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useModel, withCtx, withModifiers } from "vue";
3
3
  import { FORM_EMPTY_CONTENT, bem } from "@veltra/utils";
4
4
  import { useFocus, useFormComponent, useFormFallbackProps } from "@veltra/compositions";
5
5
  import { Close } from "@veltra/icons/normal";
@@ -106,6 +106,15 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
106
106
  const handleMouseLeave = () => {
107
107
  hovered.value = false;
108
108
  };
109
+ const showClear = computed(() => {
110
+ return props.clearable && !disabled.value && !!model.value && hovered.value;
111
+ });
112
+ const hasSuffixContent = computed(() => {
113
+ return !!inst?.slots.suffix || !!props.suffix;
114
+ });
115
+ const hasSuffix = computed(() => {
116
+ return hasSuffixContent.value || showClear.value;
117
+ });
109
118
  const handleChange = (e) => {
110
119
  const target = e.target;
111
120
  if (props.pattern?.test(target.value) ?? true) emit("change", target.value);
@@ -148,20 +157,28 @@ var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
148
157
  disabled: unref(disabled),
149
158
  readonly: __props.nativeReadonly
150
159
  }, null, 42, _hoisted_1),
151
- __props.clearable && !unref(disabled) && model.value ? (openBlock(), createBlock(unref(_sfc_main), {
160
+ hasSuffix.value ? (openBlock(), createElementBlock("span", {
152
161
  key: 1,
153
- class: normalizeClass([unref(cls).e("clear"), unref(bem).is("hidden", !hovered.value)]),
154
- title: "清除",
155
- onClick: withModifiers(clearModelValue, ["stop"])
162
+ class: normalizeClass(suffixClass)
163
+ }, [createVNode(Transition, {
164
+ name: "zoom-in",
165
+ mode: "out-in"
156
166
  }, {
157
- default: withCtx(() => [createVNode(unref(Close))]),
158
- _: 1
159
- }, 8, ["class"])) : createCommentVNode("v-if", true),
160
- _ctx.$slots.suffix || __props.suffix ? (openBlock(), createElementBlock("span", {
161
- key: 2,
162
- class: normalizeClass(suffixClass),
163
- onClick: handleSuffixClick
164
- }, [createTextVNode(toDisplayString(__props.suffix) + " ", 1), renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("v-if", true)
167
+ default: withCtx(() => [showClear.value ? (openBlock(), createBlock(unref(_sfc_main), {
168
+ class: normalizeClass(unref(cls).e("clear")),
169
+ title: "清除",
170
+ onClick: withModifiers(clearModelValue, ["stop"]),
171
+ key: "clear"
172
+ }, {
173
+ default: withCtx(() => [createVNode(unref(Close))]),
174
+ _: 1
175
+ }, 8, ["class"])) : (openBlock(), createElementBlock("span", {
176
+ class: normalizeClass(unref(cls).e("suffix-content")),
177
+ onClick: handleSuffixClick,
178
+ key: "suffix"
179
+ }, [createTextVNode(toDisplayString(__props.suffix) + " ", 1), renderSlot(_ctx.$slots, "suffix")], 2))]),
180
+ _: 3
181
+ })])) : createCommentVNode("v-if", true)
165
182
  ], 34)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(generateModel.value || unref(FORM_EMPTY_CONTENT)), 1)], 64));
166
183
  };
167
184
  }
@@ -1 +1 @@
1
- {"version":3,"file":"input.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/input/input.vue"],"sourcesContent":["<template>\n <div\n :class=\"inputClass\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n v-if=\"!readonly\"\n >\n <span v-if=\"$slots.prefix || prefix\" :class=\"prefixClass\" @click=\"handlePrefixClick\">\n {{ prefix }}\n <slot name=\"prefix\"></slot>\n </span>\n\n <input\n :class=\"cls.e('native')\"\n :placeholder=\"props.placeholder\"\n type=\"text\"\n :value=\"model\"\n @input=\"handleInput\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @compositionstart=\"handleCompositionStart\"\n @compositionend=\"handleCompositionEnd\"\n autocomplete=\"off\"\n ref=\"el\"\n :disabled=\"disabled\"\n :readonly=\"nativeReadonly\"\n />\n <UIcon\n v-if=\"clearable && !disabled && model\"\n :class=\"[cls.e('clear'), bem.is('hidden', !hovered)]\"\n title=\"清除\"\n @click.stop=\"clearModelValue\"\n >\n <Close />\n </UIcon>\n <span :class=\"suffixClass\" @click=\"handleSuffixClick\" v-if=\"$slots.suffix || suffix\">\n {{ suffix }}\n <slot name=\"suffix\"></slot>\n </span>\n </div>\n\n <template v-else>\n {{ generateModel || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { useFocus, useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { Close } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { computed, getCurrentInstance, ref, shallowRef, nextTick } from 'vue'\n\nimport type { InputEmits, InputProps, _InputExposed } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({\n name: 'Input'\n})\n\nconst props = withDefaults(defineProps<InputProps>(), {\n placeholder: '请输入',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<InputEmits>()\n\nconst model = defineModel<string>()\n\nconst inst = getCurrentInstance()\n\nconst cls = bem('input')\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst { focus, handleBlur, handleFocus } = useFocus((focused) => {\n if (focused) {\n emit('focus')\n } else {\n emit('blur')\n }\n})\n\nconst inputClass = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('readonly', readonly.value),\n bem.is('focus', focus.value)\n ]\n})\n\nconst prefixClass = [cls.e('prefix'), bem.is('clickable', !!inst?.vnode.props?.['onPrefix:click'])]\n\nconst suffixClass = [cls.e('suffix'), bem.is('clickable', !!inst?.vnode.props?.['onSuffix:click'])]\n\nlet isComposing = false\n\nfunction handleCompositionStart() {\n isComposing = true\n}\n\nfunction handleCompositionEnd(e: Event) {\n isComposing = false\n handleInput(e)\n}\n\nconst handleInput = (e: Event) => {\n if (isComposing) return\n\n const inputVal = (e.target as HTMLInputElement).value\n emit('native:input', e)\n\n const valid = props.pattern?.test(inputVal) ?? true\n\n if (!valid) return\n model.value = inputVal\n}\n\nconst handlePrefixClick = () => {\n emit('prefix:click', model.value)\n}\n\nconst handleSuffixClick = () => {\n emit('suffix:click', model.value)\n}\n\nconst clearModelValue = () => {\n model.value = ''\n emit('clear')\n}\n\nconst hovered = ref(false)\nconst handleMouseEnter = () => {\n hovered.value = true\n}\n\nconst handleMouseLeave = () => {\n hovered.value = false\n}\n\nconst handleChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n const valid = props.pattern?.test(target.value) ?? true\n\n if (valid) {\n emit('change', target.value)\n } else {\n nextTick(() => {\n target.value = model.value ?? ''\n })\n }\n}\n\nconst el = shallowRef<HTMLInputElement>()\n\nconst generateModel = computed(() => {\n if (!model.value) return ''\n\n return `${props.prefix ?? ''}${model.value}${props.suffix ?? ''}`\n})\n\ndefineExpose<_InputExposed>({\n el\n})\n</script>\n"],"mappings":"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"}
1
+ {"version":3,"file":"input.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/input/input.vue"],"sourcesContent":["<template>\n <div\n :class=\"inputClass\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n v-if=\"!readonly\"\n >\n <span v-if=\"$slots.prefix || prefix\" :class=\"prefixClass\" @click=\"handlePrefixClick\">\n {{ prefix }}\n <slot name=\"prefix\"></slot>\n </span>\n\n <input\n :class=\"cls.e('native')\"\n :placeholder=\"props.placeholder\"\n type=\"text\"\n :value=\"model\"\n @input=\"handleInput\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @compositionstart=\"handleCompositionStart\"\n @compositionend=\"handleCompositionEnd\"\n autocomplete=\"off\"\n ref=\"el\"\n :disabled=\"disabled\"\n :readonly=\"nativeReadonly\"\n />\n\n <span :class=\"suffixClass\" v-if=\"hasSuffix\">\n <Transition name=\"zoom-in\" mode=\"out-in\">\n <UIcon\n v-if=\"showClear\"\n :class=\"cls.e('clear')\"\n title=\"清除\"\n @click.stop=\"clearModelValue\"\n key=\"clear\"\n >\n <Close />\n </UIcon>\n\n <span v-else :class=\"cls.e('suffix-content')\" @click=\"handleSuffixClick\" key=\"suffix\">\n {{ suffix }}\n <slot name=\"suffix\"></slot>\n </span>\n </Transition>\n </span>\n </div>\n\n <template v-else>\n {{ generateModel || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { useFocus, useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { Close } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { computed, getCurrentInstance, ref, shallowRef, nextTick } from 'vue'\n\nimport type { InputEmits, InputProps, _InputExposed } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({\n name: 'Input'\n})\n\nconst props = withDefaults(defineProps<InputProps>(), {\n placeholder: '请输入',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<InputEmits>()\n\nconst model = defineModel<string>()\n\nconst inst = getCurrentInstance()\n\nconst cls = bem('input')\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst { focus, handleBlur, handleFocus } = useFocus((focused) => {\n if (focused) {\n emit('focus')\n } else {\n emit('blur')\n }\n})\n\nconst inputClass = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('readonly', readonly.value),\n bem.is('focus', focus.value)\n ]\n})\n\nconst prefixClass = [cls.e('prefix'), bem.is('clickable', !!inst?.vnode.props?.['onPrefix:click'])]\n\nconst suffixClass = [cls.e('suffix'), bem.is('clickable', !!inst?.vnode.props?.['onSuffix:click'])]\n\nlet isComposing = false\n\nfunction handleCompositionStart() {\n isComposing = true\n}\n\nfunction handleCompositionEnd(e: Event) {\n isComposing = false\n handleInput(e)\n}\n\nconst handleInput = (e: Event) => {\n if (isComposing) return\n\n const inputVal = (e.target as HTMLInputElement).value\n emit('native:input', e)\n\n const valid = props.pattern?.test(inputVal) ?? true\n\n if (!valid) return\n model.value = inputVal\n}\n\nconst handlePrefixClick = () => {\n emit('prefix:click', model.value)\n}\n\nconst handleSuffixClick = () => {\n emit('suffix:click', model.value)\n}\n\nconst clearModelValue = () => {\n model.value = ''\n emit('clear')\n}\n\nconst hovered = ref(false)\nconst handleMouseEnter = () => {\n hovered.value = true\n}\n\nconst handleMouseLeave = () => {\n hovered.value = false\n}\n\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && !!model.value && hovered.value\n})\n\nconst hasSuffixContent = computed(() => {\n return !!inst?.slots.suffix || !!props.suffix\n})\n\nconst hasSuffix = computed(() => {\n return hasSuffixContent.value || showClear.value\n})\n\nconst handleChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n const valid = props.pattern?.test(target.value) ?? true\n\n if (valid) {\n emit('change', target.value)\n } else {\n nextTick(() => {\n target.value = model.value ?? ''\n })\n }\n}\n\nconst el = shallowRef<HTMLInputElement>()\n\nconst generateModel = computed(() => {\n if (!model.value) return ''\n\n return `${props.prefix ?? ''}${model.value}${props.suffix ?? ''}`\n})\n\ndefineExpose<_InputExposed>({\n el\n})\n</script>\n"],"mappings":"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"}
@@ -18,8 +18,9 @@
18
18
  .u-input {
19
19
  vertical-align: middle;
20
20
  line-height: 1;
21
- box-shadow: inset 0 0 1px 1px var(--u-border-color);
22
- transition: box-shadow 0.25s ease;
21
+ border: var(--u-border);
22
+ box-shadow: var(--u-shadow-emboss);
23
+ transition: border-color 0.25s ease, box-shadow 0.25s ease;
23
24
  overflow: hidden;
24
25
  width: 100%;
25
26
  display: inline-flex;
@@ -27,8 +28,8 @@
27
28
  align-items: center;
28
29
  flex-wrap: nowrap;
29
30
  }
30
- .u-input:hover {
31
- box-shadow: inset 0 0 0px 1px var(--u-color-primary);
31
+ .u-input:not(.is-disabled):hover {
32
+ border-color: var(--u-color-primary);
32
33
  }
33
34
  .u-input--small {
34
35
  height: var(--u-form-component-height-small);
@@ -58,7 +59,7 @@
58
59
  line-height: var(--u-form-component-height-large);
59
60
  }
60
61
  .u-input.is-focus {
61
- box-shadow: inset 0 0 1px 1px var(--u-color-primary);
62
+ border-color: var(--u-color-primary);
62
63
  }
63
64
  .u-input__native {
64
65
  outline: none;
@@ -94,21 +95,17 @@
94
95
  cursor: pointer;
95
96
  }
96
97
  .u-input__clear {
97
- flex-shrink: 0;
98
- width: 20px;
99
- display: inline-flex;
100
- align-items: center;
101
- justify-content: center;
102
98
  cursor: pointer;
103
99
  color: var(--u-text-color-main);
104
100
  }
105
- .u-input__clear.is-hidden {
106
- opacity: 0;
107
- pointer-events: none;
101
+ .u-input__suffix-content {
102
+ display: inline-flex;
103
+ align-items: center;
104
+ justify-content: center;
108
105
  }
109
106
  .u-input.is-disabled {
110
107
  background-color: var(--u-color-disabled);
111
- box-shadow: inset 0 0 1px 1px var(--u-border-color);
108
+ box-shadow: none;
112
109
  }
113
110
  .u-input.is-disabled .u-input__native {
114
111
  cursor: not-allowed;
@@ -257,7 +257,8 @@
257
257
  margin: 0;
258
258
  padding: 0;
259
259
  background-color: var(--u-menu-bg-color);
260
- backdrop-filter: var(--u-menu-bg-blur) var(--u-menu-bg-saturate);
260
+ backdrop-filter: var(--u-bg-filter);
261
+ -webkit-backdrop-filter: var(--u-bg-filter);
261
262
  background-image: var(--u-menu-bg-image);
262
263
  background-size: cover;
263
264
  background-repeat: no-repeat;
@@ -341,7 +342,8 @@
341
342
  min-width: 240px;
342
343
  padding: 8px !important;
343
344
  background-color: var(--u-menu-bg-color);
344
- backdrop-filter: var(--u-menu-bg-blur) var(--u-menu-bg-saturate);
345
+ backdrop-filter: var(--u-bg-filter);
346
+ -webkit-backdrop-filter: var(--u-bg-filter);
345
347
  border: 1px solid var(--u-border-color);
346
348
  border-radius: calc(var(--u-radius-large) + 4px);
347
349
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
@@ -28,13 +28,13 @@ 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
+ minWidth: string;
31
32
  disabled: boolean;
32
- readonly: boolean;
33
33
  labelKey: string;
34
34
  valueKey: string;
35
+ readonly: boolean;
35
36
  placeholder: string;
36
37
  clearable: boolean;
37
- minWidth: string;
38
38
  visibilityLimit: number;
39
39
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
40
40
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -18,8 +18,9 @@
18
18
  .u-multi-select {
19
19
  width: 100%;
20
20
  line-height: 1;
21
- box-shadow: inset 0 0 1px 1px var(--u-border-color);
22
- transition: box-shadow 0.25s ease;
21
+ border: var(--u-border);
22
+ box-shadow: var(--u-shadow-emboss);
23
+ transition: border-color 0.25s ease, box-shadow 0.25s ease;
23
24
  overflow: hidden;
24
25
  cursor: pointer;
25
26
  display: inline-flex;
@@ -61,7 +62,7 @@
61
62
  gap: calc((var(--u-form-component-height-large) - var(--u-tag-large)) / 2);
62
63
  }
63
64
  .u-multi-select:hover {
64
- box-shadow: inset 0 0 1px 1px var(--u-color-primary);
65
+ border-color: var(--u-color-primary);
65
66
  }
66
67
  .u-multi-select__ripple {
67
68
  background-color: var(--u-color-primary-light-7);
@@ -182,7 +183,7 @@
182
183
  }
183
184
  .u-multi-select.is-disabled {
184
185
  background-color: var(--u-color-disabled);
185
- box-shadow: inset 0 0 1px 1px var(--u-border-color);
186
+ box-shadow: none;
186
187
  cursor: not-allowed;
187
188
  }
188
189
  .u-multi-select.is-disabled .u-multi-select__arrow {
@@ -22,15 +22,15 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
22
22
  onClear?: (() => any) | undefined;
23
23
  onChange?: ((checked: Record<string, any>[]) => any) | undefined;
24
24
  }>, {
25
+ minWidth: string;
25
26
  disabled: boolean;
26
- readonly: boolean;
27
27
  expandAll: boolean;
28
28
  labelKey: string;
29
29
  valueKey: string;
30
+ readonly: boolean;
30
31
  placeholder: string;
31
32
  clearable: boolean;
32
33
  filterable: boolean;
33
- minWidth: string;
34
34
  visibilityLimit: number;
35
35
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
36
36
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -17,8 +17,9 @@
17
17
  /** 暗色:data-theme 与系统偏好,与 UITheme.injectBuiltInThemes 选择器策略一致 */
18
18
  .u-multi-tree-select {
19
19
  width: 100%;
20
- box-shadow: inset 0 0 1px 1px var(--u-border-color);
21
- transition: box-shadow 0.25s ease;
20
+ border: var(--u-border);
21
+ box-shadow: var(--u-shadow-emboss);
22
+ transition: border-color 0.25s ease, box-shadow 0.25s ease;
22
23
  overflow: hidden;
23
24
  cursor: pointer;
24
25
  line-height: 1;
@@ -28,7 +29,7 @@
28
29
  flex-wrap: nowrap;
29
30
  }
30
31
  .u-multi-tree-select:hover {
31
- box-shadow: inset 0 0 1px 1px var(--u-color-primary);
32
+ border-color: var(--u-color-primary);
32
33
  }
33
34
  .u-multi-tree-select--small {
34
35
  min-height: var(--u-form-component-height-small);
@@ -66,7 +67,7 @@
66
67
  .u-multi-tree-select.is-disabled {
67
68
  cursor: not-allowed;
68
69
  background-color: var(--u-color-disabled);
69
- box-shadow: inset 0 0 1px 1px var(--u-border-color);
70
+ box-shadow: none;
70
71
  }
71
72
  .u-multi-tree-select.is-disabled .u-multi-tree-select__arrow {
72
73
  color: var(--u-text-color-disabled);
@@ -1,10 +1,10 @@
1
1
  import _sfc_main$1 from "../icon/icon.js";
2
2
  import input_default from "../input/input.js";
3
- import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, renderSlot, shallowRef, toDisplayString, unref, useModel, useSlots, watch, withCtx, withDirectives, withModifiers } from "vue";
3
+ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, renderSlot, shallowRef, toDisplayString, unref, useModel, useSlots, watch, withCtx, withDirectives, withModifiers } from "vue";
4
4
  import { FORM_EMPTY_CONTENT, Tween, bem } from "@veltra/utils";
5
5
  import { useFormComponent, useFormFallbackProps } from "@veltra/compositions";
6
6
  import { $n, isUndef, n, o } from "@cat-kit/core";
7
- import { ArrowDown, ArrowUp } from "@veltra/icons/normal";
7
+ import { ArrowDown, ArrowUp, Close } from "@veltra/icons/normal";
8
8
  import { vRipple } from "@veltra/directives";
9
9
  //#region src/components/number-input/number-input.vue
10
10
  const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -46,7 +46,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
46
46
  "modelValue": {},
47
47
  "modelModifiers": {}
48
48
  }),
49
- emits: /* @__PURE__ */ mergeModels(["update:modelValue", "change"], ["update:modelValue"]),
49
+ emits: /* @__PURE__ */ mergeModels([
50
+ "update:modelValue",
51
+ "change",
52
+ "clear"
53
+ ], ["update:modelValue"]),
50
54
  setup(__props, { emit: __emit }) {
51
55
  const props = __props;
52
56
  const emit = __emit;
@@ -59,12 +63,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
59
63
  });
60
64
  const inputProps = computed(() => {
61
65
  return o(props).pick([
62
- "clearable",
63
66
  "disabled",
64
67
  "placeholder",
65
68
  "size",
66
- "prefix",
67
- "suffix"
69
+ "prefix"
68
70
  ]);
69
71
  });
70
72
  const inputRef = shallowRef();
@@ -77,10 +79,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
77
79
  const model = useModel(__props, "modelValue");
78
80
  const displayed = shallowRef("");
79
81
  const focused = shallowRef(false);
82
+ const hovered = shallowRef(false);
80
83
  const generateDisplayed = computed(() => {
81
84
  if (!displayed.value) return "";
82
85
  return `${props.prefix ?? ""}${displayed.value}${props.suffix ?? ""}`;
83
86
  });
87
+ const showStep = computed(() => props.step !== void 0 && props.step !== false);
88
+ const hasCustomSuffix = computed(() => !!props.suffix || !!slots.suffix);
89
+ const hasSuffix = computed(() => props.clearable || hasCustomSuffix.value || showStep.value);
90
+ const showClear = computed(() => {
91
+ return props.clearable && !disabled.value && displayed.value !== "" && hovered.value;
92
+ });
84
93
  /** 步长 */
85
94
  const stepVal = computed(() => {
86
95
  const { step } = props;
@@ -172,6 +181,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
172
181
  model.value = getValidValue(parseDisplayed(input));
173
182
  displayed.value = input;
174
183
  }
184
+ function handleClear() {
185
+ if (!showClear.value) return;
186
+ model.value = void 0;
187
+ displayed.value = "";
188
+ emit("clear");
189
+ }
175
190
  /**
176
191
  * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,
177
192
  * 主要用于在输入非数字的情况下的修正处理
@@ -261,6 +276,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
261
276
  focused.value = false;
262
277
  model.value = props.modelValue;
263
278
  }
279
+ function handleMouseEnter() {
280
+ hovered.value = true;
281
+ }
282
+ function handleMouseLeave() {
283
+ hovered.value = false;
284
+ }
264
285
  return (_ctx, _cache) => {
265
286
  return !unref(readonly) ? (openBlock(), createBlock(unref(input_default), mergeProps({
266
287
  key: 0,
@@ -274,12 +295,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
274
295
  onKeydown: withModifiers(handleKeydown, ["stop"]),
275
296
  onFocus: handleFocus,
276
297
  onBlur: handleBlur,
298
+ onMouseenter: handleMouseEnter,
299
+ onMouseleave: handleMouseLeave,
277
300
  size: unref(size),
278
301
  readonly: unref(readonly),
279
- disabled: unref(disabled)
280
- }), createSlots({ _: 2 }, [__props.step !== void 0 && __props.step !== false ? {
302
+ disabled: unref(disabled),
303
+ clearable: false
304
+ }), createSlots({ _: 2 }, [hasSuffix.value ? {
281
305
  name: "suffix",
282
- fn: withCtx(() => [renderSlot(_ctx.$slots, "suffix"), createElementVNode("div", { class: normalizeClass(unref(cls).e("step")) }, [withDirectives((openBlock(), createBlock(unref(_sfc_main$1), {
306
+ fn: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(cls).e("suffix")) }, [props.clearable ? (openBlock(), createBlock(unref(_sfc_main$1), {
307
+ key: 0,
308
+ class: normalizeClass([unref(cls).e("clear"), unref(bem).is("hidden", !showClear.value)]),
309
+ title: showClear.value ? "清除" : void 0,
310
+ onClick: withModifiers(handleClear, ["stop"])
311
+ }, {
312
+ default: withCtx(() => [createVNode(unref(Close))]),
313
+ _: 1
314
+ }, 8, ["class", "title"])) : createCommentVNode("v-if", true), hasCustomSuffix.value ? (openBlock(), createElementBlock("span", {
315
+ key: 1,
316
+ class: normalizeClass(unref(cls).e("suffix-content"))
317
+ }, [createTextVNode(toDisplayString(__props.suffix) + " ", 1), renderSlot(_ctx.$slots, "suffix")], 2)) : createCommentVNode("v-if", true)], 2), showStep.value ? (openBlock(), createElementBlock("div", {
318
+ key: 0,
319
+ class: normalizeClass(unref(cls).e("step"))
320
+ }, [withDirectives((openBlock(), createBlock(unref(_sfc_main$1), {
283
321
  onClick: increase,
284
322
  class: normalizeClass(unref(bem).is("disabled", unref(disabled) || !increasable.value))
285
323
  }, {
@@ -291,7 +329,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
291
329
  }, {
292
330
  default: withCtx(() => [createVNode(unref(ArrowDown))]),
293
331
  _: 1
294
- }, 8, ["class"])), [[unref(vRipple), !unref(disabled) && reducible.value]])], 2)]),
332
+ }, 8, ["class"])), [[unref(vRipple), !unref(disabled) && reducible.value]])], 2)) : createCommentVNode("v-if", true)]),
295
333
  key: "0"
296
334
  } : void 0, slots.prefix ? {
297
335
  name: "prefix",
@@ -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 ([modelValue, inputFocused]) => {\n if (inputFocused) return\n displayed.value = getDisplayed(modelValue)\n },\n { immediate: true }\n)\n\n/**\n * 解析展示值\n * @param str 展示值\n */\nfunction parseDisplayed(str: string): number | undefined {\n if (!str) return undefined\n\n // 将货币格式去掉再转化为数字\n const number = +str.replace(/,/g, '')\n const { multiple } = props\n\n // 如果解析失败,使用当前值作为回退\n // 如果存在倍数,需要先将 model.value 除以倍数得到原始值\n let result: number | undefined\n if (isNaN(number)) {\n if (model.value === undefined) return undefined\n result = multiple ? $n.div(model.value, multiple) : model.value\n } else {\n result = number\n }\n\n if (result === undefined) return undefined\n\n const { precision, maxPrecision, minPrecision } = props\n\n const fixedResult = +n(result).fixed(\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)\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 @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n :size=\"size\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n :clearable=\"false\"\n >\n <template #suffix v-if=\"hasSuffix\">\n <span :class=\"cls.e('suffix')\">\n <u-icon\n v-if=\"props.clearable\"\n :class=\"[cls.e('clear'), bem.is('hidden', !showClear)]\"\n :title=\"showClear ? '清除' : undefined\"\n @click.stop=\"handleClear\"\n >\n <Close />\n </u-icon>\n <span v-if=\"hasCustomSuffix\" :class=\"cls.e('suffix-content')\">\n {{ suffix }}\n <slot name=\"suffix\" />\n </span>\n </span>\n\n <div v-if=\"showStep\" :class=\"cls.e('step')\">\n <u-icon\n @click=\"increase\"\n v-ripple=\"!disabled && increasable\"\n :class=\"bem.is('disabled', disabled || !increasable)\"\n >\n <ArrowUp />\n </u-icon>\n <u-icon\n @click=\"decrease\"\n v-ripple=\"!disabled && reducible\"\n :class=\"bem.is('disabled', disabled || !reducible)\"\n >\n <ArrowDown />\n </u-icon>\n </div>\n </template>\n\n <template #prefix v-if=\"slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n </u-input>\n\n <template v-else>\n {{ generateDisplayed || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n, n, o, isUndef } from '@cat-kit/core'\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowDown, ArrowUp, Close } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'\nimport { 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(['disabled', 'placeholder', 'size', 'prefix'])\n})\n\nconst inputRef = shallowRef<InputExposed>()\n\nconst inputDom = computed(() => inputRef.value?.el)\n\nconst cls = bem('number-input')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value)]\n})\n\n/** 实际值 */\nconst model = defineModel<NumberInputProps['modelValue']>()\n\n// 展示值\nconst displayed = shallowRef('')\n\nconst focused = shallowRef(false)\nconst hovered = shallowRef(false)\n\nconst generateDisplayed = computed(() => {\n if (!displayed.value) return ''\n\n return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`\n})\n\nconst showStep = computed(() => props.step !== undefined && props.step !== false)\n\nconst hasCustomSuffix = computed(() => !!props.suffix || !!slots.suffix)\n\nconst hasSuffix = computed(() => props.clearable || hasCustomSuffix.value || showStep.value)\n\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && displayed.value !== '' && hovered.value\n})\n\n/** 步长 */\nconst stepVal = computed<number>(() => {\n const { step } = props\n if (step === undefined) return 1\n return typeof step === 'boolean' ? 1 : step\n})\n\n/** 是否可增 */\nconst increasable = computed(() => {\n const { max, multiple } = props\n if (isUndef(max) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue < max\n})\n\n/** 是否可减 */\nconst reducible = computed(() => {\n const { min, multiple } = props\n if (isUndef(min) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue > min\n})\n\n// 通过值和步长值计算默认的最大精度\nconst defaultMaxPrecision = computed(() => {\n const { multiple } = props\n // 如果存在倍数,基于原始值计算精度\n const rawValue =\n multiple && model.value !== undefined ? $n.div(model.value, multiple) : model.value\n return Math.max(\n String(rawValue).split('.')[1]?.length ?? 0,\n String(stepVal.value).split('.')[1]?.length ?? 0\n )\n})\n\n/**\n * 获取展示值\n * @param num 实际值\n */\nfunction getDisplayed(num?: number): string {\n if (!num && num !== 0) return ''\n\n const {\n currency,\n precision,\n minPrecision,\n // 如果没有指定最大精度那么设置默认为值和步长值中的较大值\n maxPrecision = defaultMaxPrecision.value,\n multiple\n } = props\n\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const displayValue = multiple ? $n.div(num, multiple) : num\n\n return currency\n ? n(displayValue).currency('CNY', {\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 ([modelValue, inputFocused]) => {\n if (inputFocused) return\n displayed.value = getDisplayed(modelValue)\n },\n { immediate: true }\n)\n\n/**\n * 解析展示值\n * @param str 展示值\n */\nfunction parseDisplayed(str: string): number | undefined {\n if (!str) return undefined\n\n // 将货币格式去掉再转化为数字\n const number = +str.replace(/,/g, '')\n const { multiple } = props\n\n // 如果解析失败,使用当前值作为回退\n // 如果存在倍数,需要先将 model.value 除以倍数得到原始值\n let result: number | undefined\n if (isNaN(number)) {\n if (model.value === undefined) return undefined\n result = multiple ? $n.div(model.value, multiple) : model.value\n } else {\n result = number\n }\n\n if (result === undefined) return undefined\n\n const { precision, maxPrecision, minPrecision } = props\n\n const fixedResult = +n(result).fixed(\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)\n displayed.value = input\n}\n\nfunction handleClear(): void {\n if (!showClear.value) return\n model.value = undefined\n displayed.value = ''\n emit('clear')\n}\n\n/**\n * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,\n * 主要用于在输入非数字的情况下的修正处理\n * @param input 输入的值\n */\nfunction handleChange() {\n emit('change', model.value)\n}\n\nconst tween = new Tween(\n { n: model.value ?? 0 },\n {\n onUpdate(state) {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n const { multiple } = props\n // 如果存在倍数,tween.state.n 存储的是原始值,需要乘以倍数后传给 getDisplayed\n const actualValue = multiple ? $n.mul(state.n, multiple) : state.n\n _rawInput.value = getDisplayed(actualValue)\n },\n // 动画进行的过程值有可能被改变, 因此在onComplete中确保还原的是原本的值\n onComplete() {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n _rawInput.value = getDisplayed(model.value)\n }\n }\n)\n\n/** 增 */\nfunction increase(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上加步长\n const newRawVal = $n.plus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.plus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\n/** 减 */\nfunction decrease(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上减步长\n const newRawVal = $n.minus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.minus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\nfunction handleKeydown(e: KeyboardEvent): void {\n if (!props.step) return\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n return increase()\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n return decrease()\n }\n}\n\nfunction handleFocus(): void {\n focused.value = true\n\n // 如果初始值和当前设置的精度不匹配则进行精度修正\n if (model.value === undefined) return\n const { precision, maxPrecision, minPrecision, multiple } = props\n\n if (multiple) {\n // 如果存在倍数,先除以倍数得到原始值进行精度修正,再乘以倍数\n const rawVal = $n.div(model.value, multiple)\n const fixedRawVal = +n(rawVal).fixed(\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\nfunction handleMouseEnter(): void {\n hovered.value = true\n}\n\nfunction handleMouseLeave(): void {\n hovered.value = false\n}\n</script>\n"],"mappings":"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"}
@@ -15,9 +15,11 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
15
15
  "update:modelValue": (value: number | undefined) => any;
16
16
  } & {
17
17
  "update:modelValue": (value?: number | undefined) => any;
18
+ clear: () => any;
18
19
  change: (value?: number | undefined) => any;
19
20
  }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
20
21
  "onUpdate:modelValue"?: ((value?: number | undefined) => any) | undefined;
22
+ onClear?: (() => any) | undefined;
21
23
  onChange?: ((value?: number | undefined) => any) | undefined;
22
24
  }>, {
23
25
  disabled: boolean;
@@ -15,6 +15,31 @@
15
15
  * --u-height-small: 24px;
16
16
  */
17
17
  /** 暗色:data-theme 与系统偏好,与 UITheme.injectBuiltInThemes 选择器策略一致 */
18
+ .u-number-input__suffix {
19
+ display: inline-flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ height: 100%;
23
+ }
24
+ .u-number-input__suffix-content {
25
+ display: inline-flex;
26
+ align-items: center;
27
+ justify-content: center;
28
+ }
29
+ .u-number-input__clear {
30
+ cursor: pointer;
31
+ flex-shrink: 0;
32
+ width: 20px;
33
+ border-radius: var(--u-radius-default);
34
+ transition: color 0.25s;
35
+ }
36
+ .u-number-input__clear:hover {
37
+ color: var(--u-color-primary);
38
+ }
39
+ .u-number-input__clear.is-hidden {
40
+ visibility: hidden;
41
+ pointer-events: none;
42
+ }
18
43
  .u-number-input__step {
19
44
  display: flex;
20
45
  flex-direction: column;
@@ -49,15 +49,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
49
49
  const color = useModel(__props, "modelValue");
50
50
  const RGB = computed(() => HSV2RGB(HSV));
51
51
  const { userAction, isUserActive } = useUserAction();
52
- watch([alpha, RGB], ([alpha, RGB]) => {
53
- color.value = `#${RGB2HEX(RGB, alpha)}`;
54
- });
55
52
  const visible = shallowRef(false);
53
+ /** 清除时跳过一次内部状态到 color 的同步,防止 updateAlpha 把已清空的 color 覆盖回来 */
54
+ let skipColorUpdate = false;
56
55
  const handleClear = userAction(() => {
56
+ if (alpha.value !== 1) skipColorUpdate = true;
57
57
  color.value = "";
58
58
  rest.updateAlpha(1);
59
59
  visible.value = false;
60
60
  });
61
+ watch([alpha, RGB], ([alpha, RGB]) => {
62
+ if (skipColorUpdate) {
63
+ skipColorUpdate = false;
64
+ return;
65
+ }
66
+ color.value = `#${RGB2HEX(RGB, alpha)}`;
67
+ });
61
68
  const paletteSVRef = useTemplateRef("palette-sv");
62
69
  const paletteHueRef = useTemplateRef("palette-hue");
63
70
  const paletteAlphaRef = useTemplateRef("palette-alpha");
@@ -1 +1 @@
1
- {"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n <u-tip\n trigger=\"click\"\n :class=\"cls.e('panel')\"\n v-model:visible=\"visible\"\n :disabled=\"disabled || readonly\"\n >\n <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n <template #content>\n <!-- 饱和度和亮度 -->\n <PaletteSV ref=\"palette-sv\" />\n\n <!-- 色相 -->\n <PaletteHue ref=\"palette-hue\" />\n\n <!-- 透明度 -->\n <PaletteAlpha ref=\"palette-alpha\" />\n\n <!-- 颜色切换 -->\n <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n </template>\n </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({\n name: 'Palette'\n})\n\nconst props = withDefaults(defineProps<PaletteProps>(), {\n disabled: undefined,\n readonly: undefined\n})\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst cls = bem('palette')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]\n})\n\nconst { HSV, alpha, ...rest } = useHSV()\n\nconst color = defineModel<string>()\nconst RGB = computed(() => HSV2RGB(HSV))\nconst { userAction, isUserActive } = useUserAction()\n\nwatch([alpha, RGB], ([alpha, RGB]) => {\n color.value = `#${RGB2HEX(RGB, alpha)}`\n})\n\nconst visible = shallowRef(false)\n\nconst handleClear = userAction(() => {\n color.value = ''\n rest.updateAlpha(1)\n visible.value = false\n})\n\nconst paletteSVRef = useTemplateRef('palette-sv')\nconst paletteHueRef = useTemplateRef('palette-hue')\nconst paletteAlphaRef = useTemplateRef('palette-alpha')\n\nwatch(\n color,\n (color) => {\n if (!color) return\n if (isUserActive()) return\n\n const { RGB, alpha } = HEX2RGBA(color)\n const hsv = RGB2HSV(RGB)\n rest.updateHue(hsv.h)\n rest.updateSV({ s: hsv.s, v: hsv.v })\n rest.updateAlpha(alpha)\n\n paletteSVRef.value?.init()\n paletteHueRef.value?.init()\n paletteAlphaRef.value?.init()\n },\n { immediate: true }\n)\n\nprovide(PaletteDIKey, {\n cls,\n HSV,\n RGB,\n alpha,\n userAction,\n isUserActive,\n ...rest\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,CAAA;EAElF,MAAM,MAAM,IAAI,UAAS;EAEzB,MAAM,YAAY,eAAe;AAC/B,UAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,MAAM;IAAE,IAAI,GAAG,YAAY,CAAC,MAAM,MAAM;IAAA;IACnE;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,QAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,IAAI,CAAA;EACvC,MAAM,EAAE,YAAY,iBAAiB,eAAc;AAEnD,QAAM,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,SAAS;AACpC,SAAM,QAAQ,IAAI,QAAQ,KAAK,MAAM;IACtC;EAED,MAAM,UAAU,WAAW,MAAK;EAEhC,MAAM,cAAc,iBAAiB;AACnC,SAAM,QAAQ;AACd,QAAK,YAAY,EAAC;AAClB,WAAQ,QAAQ;IACjB;EAED,MAAM,eAAe,eAAe,aAAY;EAChD,MAAM,gBAAgB,eAAe,cAAa;EAClD,MAAM,kBAAkB,eAAe,gBAAe;AAEtD,QACE,QACC,UAAU;AACT,OAAI,CAAC,MAAO;AACZ,OAAI,cAAc,CAAE;GAEpB,MAAM,EAAE,KAAK,UAAU,SAAS,MAAK;GACrC,MAAM,MAAM,QAAQ,IAAG;AACvB,QAAK,UAAU,IAAI,EAAC;AACpB,QAAK,SAAS;IAAE,GAAG,IAAI;IAAG,GAAG,IAAI;IAAG,CAAA;AACpC,QAAK,YAAY,MAAK;AAEtB,gBAAa,OAAO,MAAK;AACzB,iBAAc,OAAO,MAAK;AAC1B,mBAAgB,OAAO,MAAK;KAE9B,EAAE,WAAW,MAAK,CACpB;AAEA,UAAQ,cAAc;GACpB;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GACJ,CAAA;;uBA3GC,YAqBQ,MAAA,YAAA,EAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;IACL,SAAS,QAAA;8DAAA,QAAO,QAAA;IACvB,UAAU,MAAA,SAAQ,IAAI,MAAA,SAAQ;;IAIpB,SAAO,cACD;KAAf,mBAAA,WAAe;KACf,YAA8B,aAAA,EAAnB,KAAI,cAAY,EAAA,MAAA,IAAA;KAE3B,mBAAA,OAAW;KACX,YAAgC,aAAA,EAApB,KAAI,eAAa,EAAA,MAAA,IAAA;KAE7B,mBAAA,QAAY;KACZ,YAAoC,aAAA,EAAtB,KAAI,iBAAe,EAAA,MAAA,IAAA;KAEjC,mBAAA,SAAa;KACb,YAAiE,aAAA;MAArC,OAAO,MAAA;8DAAA,MAAK,QAAA;MAAG,SAAO,MAAA,YAAW;;;2BAbM,CAArE,mBAAqE,QAAA;KAA9D,OAAK,eAAE,UAAA,MAAS;KAAG,OAAK,eAAA,EAAA,iBAAqB,MAAA,OAAK,CAAA"}
1
+ {"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n <u-tip\n trigger=\"click\"\n :class=\"cls.e('panel')\"\n v-model:visible=\"visible\"\n :disabled=\"disabled || readonly\"\n >\n <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n <template #content>\n <!-- 饱和度和亮度 -->\n <PaletteSV ref=\"palette-sv\" />\n\n <!-- 色相 -->\n <PaletteHue ref=\"palette-hue\" />\n\n <!-- 透明度 -->\n <PaletteAlpha ref=\"palette-alpha\" />\n\n <!-- 颜色切换 -->\n <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n </template>\n </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({\n name: 'Palette'\n})\n\nconst props = withDefaults(defineProps<PaletteProps>(), {\n disabled: undefined,\n readonly: undefined\n})\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst cls = bem('palette')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]\n})\n\nconst { HSV, alpha, ...rest } = useHSV()\n\nconst color = defineModel<string>()\nconst RGB = computed(() => HSV2RGB(HSV))\nconst { userAction, isUserActive } = useUserAction()\n\nconst visible = shallowRef(false)\n\n/** 清除时跳过一次内部状态到 color 的同步,防止 updateAlpha 把已清空的 color 覆盖回来 */\nlet skipColorUpdate = false\n\nconst handleClear = userAction(() => {\n if (alpha.value !== 1) {\n skipColorUpdate = true\n }\n color.value = ''\n rest.updateAlpha(1)\n visible.value = false\n})\n\nwatch([alpha, RGB], ([alpha, RGB]) => {\n if (skipColorUpdate) {\n skipColorUpdate = false\n return\n }\n color.value = `#${RGB2HEX(RGB, alpha)}`\n})\n\nconst paletteSVRef = useTemplateRef('palette-sv')\nconst paletteHueRef = useTemplateRef('palette-hue')\nconst paletteAlphaRef = useTemplateRef('palette-alpha')\n\nwatch(\n color,\n (color) => {\n if (!color) return\n if (isUserActive()) return\n\n const { RGB, alpha } = HEX2RGBA(color)\n const hsv = RGB2HSV(RGB)\n rest.updateHue(hsv.h)\n rest.updateSV({ s: hsv.s, v: hsv.v })\n rest.updateAlpha(alpha)\n\n paletteSVRef.value?.init()\n paletteHueRef.value?.init()\n paletteAlphaRef.value?.init()\n },\n { immediate: true }\n)\n\nprovide(PaletteDIKey, {\n cls,\n HSV,\n RGB,\n alpha,\n userAction,\n isUserActive,\n ...rest\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,CAAA;EAElF,MAAM,MAAM,IAAI,UAAS;EAEzB,MAAM,YAAY,eAAe;AAC/B,UAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,MAAM;IAAE,IAAI,GAAG,YAAY,CAAC,MAAM,MAAM;IAAA;IACnE;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,QAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,IAAI,CAAA;EACvC,MAAM,EAAE,YAAY,iBAAiB,eAAc;EAEnD,MAAM,UAAU,WAAW,MAAK;;EAGhC,IAAI,kBAAkB;EAEtB,MAAM,cAAc,iBAAiB;AACnC,OAAI,MAAM,UAAU,EAClB,mBAAkB;AAEpB,SAAM,QAAQ;AACd,QAAK,YAAY,EAAC;AAClB,WAAQ,QAAQ;IACjB;AAED,QAAM,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,SAAS;AACpC,OAAI,iBAAiB;AACnB,sBAAkB;AAClB;;AAEF,SAAM,QAAQ,IAAI,QAAQ,KAAK,MAAM;IACtC;EAED,MAAM,eAAe,eAAe,aAAY;EAChD,MAAM,gBAAgB,eAAe,cAAa;EAClD,MAAM,kBAAkB,eAAe,gBAAe;AAEtD,QACE,QACC,UAAU;AACT,OAAI,CAAC,MAAO;AACZ,OAAI,cAAc,CAAE;GAEpB,MAAM,EAAE,KAAK,UAAU,SAAS,MAAK;GACrC,MAAM,MAAM,QAAQ,IAAG;AACvB,QAAK,UAAU,IAAI,EAAC;AACpB,QAAK,SAAS;IAAE,GAAG,IAAI;IAAG,GAAG,IAAI;IAAG,CAAA;AACpC,QAAK,YAAY,MAAK;AAEtB,gBAAa,OAAO,MAAK;AACzB,iBAAc,OAAO,MAAK;AAC1B,mBAAgB,OAAO,MAAK;KAE9B,EAAE,WAAW,MAAK,CACpB;AAEA,UAAQ,cAAc;GACpB;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GACJ,CAAA;;uBArHC,YAqBQ,MAAA,YAAA,EAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;IACL,SAAS,QAAA;8DAAA,QAAO,QAAA;IACvB,UAAU,MAAA,SAAQ,IAAI,MAAA,SAAQ;;IAIpB,SAAO,cACD;KAAf,mBAAA,WAAe;KACf,YAA8B,aAAA,EAAnB,KAAI,cAAY,EAAA,MAAA,IAAA;KAE3B,mBAAA,OAAW;KACX,YAAgC,aAAA,EAApB,KAAI,eAAa,EAAA,MAAA,IAAA;KAE7B,mBAAA,QAAY;KACZ,YAAoC,aAAA,EAAtB,KAAI,iBAAe,EAAA,MAAA,IAAA;KAEjC,mBAAA,SAAa;KACb,YAAiE,aAAA;MAArC,OAAO,MAAA;8DAAA,MAAK,QAAA;MAAG,SAAO,MAAA,YAAW;;;2BAbM,CAArE,mBAAqE,QAAA;KAA9D,OAAK,eAAE,UAAA,MAAS;KAAG,OAAK,eAAA,EAAA,iBAAqB,MAAA,OAAK,CAAA"}
@@ -16,11 +16,11 @@ type __VLS_Slots = {} & {
16
16
  default?: (props: typeof __VLS_3) => any;
17
17
  };
18
18
  declare const __VLS_base: _$vue.DefineComponent<ProgressNodesProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
19
- "update:modelValue": (value: string | number) => any;
20
19
  click: (node: Record<string, any>, index: number) => any;
20
+ "update:modelValue": (value: string | number) => any;
21
21
  }, string, _$vue.PublicProps, Readonly<ProgressNodesProps> & Readonly<{
22
- "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
23
22
  onClick?: ((node: Record<string, any>, index: number) => any) | undefined;
23
+ "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
24
24
  }>, {
25
25
  labelKey: string;
26
26
  valueKey: string;
@@ -59,7 +59,7 @@
59
59
  .u-progress-nodes__link {
60
60
  position: absolute;
61
61
  border-style: dashed;
62
- border-color: var(--u-border-color);
62
+ border-color: var(--u-text-color-placeholder);
63
63
  }
64
64
  .u-progress-nodes__dot {
65
65
  position: relative;
@@ -17,9 +17,9 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
17
17
  onChange?: ((item: Record<string, any>) => any) | undefined;
18
18
  }>, {
19
19
  disabled: boolean;
20
- readonly: boolean;
21
20
  labelKey: string;
22
21
  valueKey: string;
22
+ readonly: boolean;
23
23
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
24
24
  declare const _default: typeof __VLS_export;
25
25
  //#endregion