@veltra/desktop 1.0.15 → 2.0.0
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 +1 -1
- package/dist/components/action/style2.css +2 -2
- package/dist/components/auto-complete/style2.css +5 -4
- package/dist/components/badge/badge.js +2 -1
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/batch-edit/style2.css +2 -2
- package/dist/components/breadcrumb/style2.css +1 -1
- package/dist/components/button/style2.css +8 -7
- package/dist/components/card/style2.css +2 -0
- package/dist/components/cascade/cascade.vue.d.ts +2 -2
- package/dist/components/cascade/style2.css +4 -3
- package/dist/components/check-tag/check-tag.js +1 -1
- package/dist/components/checkbox/checkbox-button.vue.d.ts +1 -1
- package/dist/components/checkbox/style2.css +1 -1
- package/dist/components/checkbox-group/checkbox-group.vue.d.ts +2 -2
- package/dist/components/code-editor/style2.css +7 -9
- package/dist/components/collapse/style2.css +3 -3
- package/dist/components/context-menu/style2.css +3 -1
- package/dist/components/date-panel/date-panel.vue.d.ts +1 -1
- package/dist/components/date-picker/date-picker.vue.d.ts +3 -3
- package/dist/components/date-range-picker/date-range-picker.vue.d.ts +1 -1
- package/dist/components/date-range-picker/style2.css +5 -4
- package/dist/components/dialog/style2.css +2 -0
- package/dist/components/drawer/style2.css +2 -1
- package/dist/components/dropdown/style2.css +2 -0
- package/dist/components/expression-editor/style2.css +2 -2
- package/dist/components/file-viewer/style2.css +6 -6
- package/dist/components/form-item/style2.css +5 -2
- package/dist/components/input/input.js.map +1 -1
- package/dist/components/input/input.vue.d.ts +2 -2
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js +30 -13
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/input/style2.css +11 -14
- package/dist/components/menu/style2.css +4 -2
- package/dist/components/multi-select/multi-select.vue.d.ts +2 -2
- package/dist/components/multi-select/style2.css +5 -4
- package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +2 -2
- package/dist/components/multi-tree-select/style2.css +5 -4
- package/dist/components/number-input/number-input.js +48 -10
- package/dist/components/number-input/number-input.js.map +1 -1
- package/dist/components/number-input/number-input.vue.d.ts +2 -0
- package/dist/components/number-input/style2.css +25 -0
- package/dist/components/palette/palette.js +10 -3
- package/dist/components/palette/palette.js.map +1 -1
- package/dist/components/progress-nodes/style2.css +1 -1
- package/dist/components/radio-group/radio-group.vue.d.ts +2 -2
- package/dist/components/rich-text-editor/style2.css +2 -2
- package/dist/components/select/select.js +6 -2
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/select/select.vue.d.ts +2 -2
- package/dist/components/switch/style2.css +3 -0
- package/dist/components/tabs/tabs-horizontal.vue.d.ts +1 -1
- package/dist/components/tabs/tabs.vue.d.ts +1 -1
- package/dist/components/textarea/style2.css +7 -6
- package/dist/components/theme/style2.css +2 -1
- package/dist/components/tree-select/tree-select.vue.d.ts +2 -2
- package/dist/types/badge.d.ts +1 -1
- package/dist/types/check-tag.d.ts +1 -1
- package/dist/types/date-picker.d.ts +2 -2
- package/dist/types/number-input.d.ts +1 -0
- package/package.json +11 -11
- package/src/components/action/style.scss +2 -2
- package/src/components/auto-complete/style.scss +5 -4
- package/src/components/badge/badge.vue +4 -1
- package/src/components/batch-edit/style.scss +2 -2
- package/src/components/breadcrumb/style.scss +4 -2
- package/src/components/button/style.scss +2 -1
- package/src/components/card/style.scss +2 -0
- package/src/components/cascade/style.scss +4 -4
- package/src/components/checkbox/style.scss +2 -1
- package/src/components/code-editor/style.scss +7 -8
- package/src/components/collapse/style.scss +13 -7
- package/src/components/context-menu/style.scss +6 -2
- package/src/components/date-range-picker/style.scss +5 -5
- package/src/components/dialog/style.scss +2 -1
- package/src/components/drawer/style.scss +2 -1
- package/src/components/dropdown/style.scss +2 -0
- package/src/components/expression-editor/style.scss +8 -6
- package/src/components/file-viewer/style.scss +7 -7
- package/src/components/form-item/style.scss +3 -3
- package/src/components/input/input.vue +30 -11
- package/src/components/input/style.scss +16 -17
- package/src/components/menu/style.scss +4 -2
- package/src/components/multi-select/style.scss +5 -5
- package/src/components/multi-tree-select/style.scss +5 -4
- package/src/components/number-input/__test__/number-input.test.ts +60 -0
- package/src/components/number-input/number-input.vue +48 -5
- package/src/components/number-input/style.scss +30 -0
- package/src/components/palette/palette.vue +14 -4
- package/src/components/progress-nodes/style.scss +1 -1
- package/src/components/rich-text-editor/style.scss +8 -4
- package/src/components/select/select.vue +9 -2
- package/src/components/switch/style.scss +3 -0
- package/src/components/tabs/style.scss +4 -2
- package/src/components/textarea/style.scss +9 -8
- package/src/components/theme/style.scss +2 -1
- package/src/components/tree/style.scss +2 -2
- package/src/types/badge.ts +1 -1
- package/src/types/check-tag.ts +1 -1
- package/src/types/date-picker.ts +2 -2
- package/src/types/number-input.ts +1 -0
|
@@ -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 <
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,OAAO,oBAAmB;EAEhC,MAAM,MAAM,IAAI,QAAO;EAEvB,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,CAAA;EAElF,MAAM,EAAE,OAAO,YAAY,gBAAgB,UAAU,YAAY;AAC/D,OAAI,QACF,MAAK,QAAO;OAEZ,MAAK,OAAM;IAEd;EAED,MAAM,aAAa,eAAe;AAChC,UAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAM;IACjB,IAAI,GAAG,YAAY,SAAS,MAAM;IAClC,IAAI,GAAG,YAAY,SAAS,MAAM;IAClC,IAAI,GAAG,SAAS,MAAM,MAAK;IAC7B;IACD;EAED,MAAM,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,GAAG,aAAa,CAAC,CAAC,MAAM,MAAM,QAAQ,kBAAkB,CAAA;EAElG,MAAM,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,GAAG,aAAa,CAAC,CAAC,MAAM,MAAM,QAAQ,kBAAkB,CAAA;EAElG,IAAI,cAAc;EAElB,SAAS,yBAAyB;AAChC,iBAAc;;EAGhB,SAAS,qBAAqB,GAAU;AACtC,iBAAc;AACd,eAAY,EAAC;;EAGf,MAAM,eAAe,MAAa;AAChC,OAAI,YAAa;GAEjB,MAAM,WAAY,EAAE,OAA4B;AAChD,QAAK,gBAAgB,EAAC;AAItB,OAAI,EAFU,MAAM,SAAS,KAAK,SAAS,IAAI,MAEnC;AACZ,SAAM,QAAQ;;EAGhB,MAAM,0BAA0B;AAC9B,QAAK,gBAAgB,MAAM,MAAK;;EAGlC,MAAM,0BAA0B;AAC9B,QAAK,gBAAgB,MAAM,MAAK;;EAGlC,MAAM,wBAAwB;AAC5B,SAAM,QAAQ;AACd,QAAK,QAAO;;EAGd,MAAM,UAAU,IAAI,MAAK;EACzB,MAAM,yBAAyB;AAC7B,WAAQ,QAAQ;;EAGlB,MAAM,yBAAyB;AAC7B,WAAQ,QAAQ;;EAGlB,MAAM,YAAY,eAAe;AAC/B,UAAO,MAAM,aAAa,CAAC,SAAS,SAAS,CAAC,CAAC,MAAM,SAAS,QAAQ;IACvE;EAED,MAAM,mBAAmB,eAAe;AACtC,UAAO,CAAC,CAAC,MAAM,MAAM,UAAU,CAAC,CAAC,MAAM;IACxC;EAED,MAAM,YAAY,eAAe;AAC/B,UAAO,iBAAiB,SAAS,UAAU;IAC5C;EAED,MAAM,gBAAgB,MAAa;GACjC,MAAM,SAAS,EAAE;AAIjB,OAFc,MAAM,SAAS,KAAK,OAAO,MAAM,IAAI,KAGjD,MAAK,UAAU,OAAO,MAAK;OAE3B,gBAAe;AACb,WAAO,QAAQ,MAAM,SAAS;KAC/B;;EAIL,MAAM,KAAK,YAA6B;EAExC,MAAM,gBAAgB,eAAe;AACnC,OAAI,CAAC,MAAM,MAAO,QAAO;AAEzB,UAAO,GAAG,MAAM,UAAU,KAAK,MAAM,QAAQ,MAAM,UAAU;IAC9D;AAED,WAA4B,EAC1B,IACD,CAAA;;WAxLU,MAAA,SAAQ,IAAA,WAAA,EAJjB,mBA8CM,OAAA;;IA7CH,OAAK,eAAE,WAAA,MAAU;IACjB,cAAY;IACZ,cAAY;;IAGDA,KAAAA,OAAO,UAAU,QAAA,UAAA,WAAA,EAA7B,mBAGO,QAAA;;KAH+B,OAAK,eAAE,YAAW;KAAG,SAAO;wCAC7D,QAAA,OAAM,GAAG,KACZ,EAAA,EAAA,WAA2B,KAAA,QAAA,SAAA,CAAA,CAAA,IAAA,mBAAA,QAAA,KAAA;IAG7B,mBAeE,SAAA;KAdC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA;KACZ,aAAa,MAAM;KACpB,MAAK;KACJ,OAAO,MAAA;KACP,SAAO;KACP,UAAQ;KACR,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,YAAA,IAAA,MAAA,YAAA,CAAA,GAAA,KAAW;KAClB,QAAI,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,WAAA,IAAA,MAAA,WAAA,CAAA,GAAA,KAAU;KAChB,oBAAkB;KAClB,kBAAgB;KACjB,cAAa;cACT;KAAJ,KAAI;KACH,UAAU,MAAA,SAAQ;KAClB,UAAU,QAAA;;IAGoB,UAAA,SAAA,WAAA,EAAjC,mBAiBO,QAAA;;KAjBA,OAAK,eAAE,YAAW;QACvB,YAea,YAAA;KAfD,MAAK;KAAU,MAAK;;4BAStB,CAPA,UAAA,SAAA,WAAA,EADR,YAQQ,MAAA,UAAA,EAAA;MANL,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;MACb,OAAM;MACL,SAAK,cAAO,iBAAe,CAAA,OAAA,CAAA;MAC5B,KAAI;;6BAEK,CAAT,YAAS,MAAA,MAAA,CAAA,CAAA,CAAA;;uCAGX,mBAGO,QAAA;MAHO,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,iBAAA,CAAA;MAAqB,SAAO;MAAmB,KAAI;yCACxE,QAAA,OAAM,GAAG,KACZ,EAAA,EAAA,WAA2B,KAAA,QAAA,SAAA,CAAA,EAAA,EAAA,EAAA,CAAA;;;2BAMnC,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,cAAA,SAAiB,MAAA,mBAAkB,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA"}
|
|
@@ -18,8 +18,9 @@
|
|
|
18
18
|
.u-input {
|
|
19
19
|
vertical-align: middle;
|
|
20
20
|
line-height: 1;
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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-
|
|
106
|
-
|
|
107
|
-
|
|
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:
|
|
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-
|
|
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-
|
|
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,10 +28,10 @@ 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
|
-
disabled: boolean;
|
|
32
|
-
readonly: boolean;
|
|
33
31
|
labelKey: string;
|
|
34
32
|
valueKey: string;
|
|
33
|
+
disabled: boolean;
|
|
34
|
+
readonly: boolean;
|
|
35
35
|
placeholder: string;
|
|
36
36
|
clearable: boolean;
|
|
37
37
|
minWidth: string;
|
|
@@ -18,8 +18,9 @@
|
|
|
18
18
|
.u-multi-select {
|
|
19
19
|
width: 100%;
|
|
20
20
|
line-height: 1;
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
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:
|
|
186
|
+
box-shadow: none;
|
|
186
187
|
cursor: not-allowed;
|
|
187
188
|
}
|
|
188
189
|
.u-multi-select.is-disabled .u-multi-select__arrow {
|
|
@@ -22,11 +22,11 @@ 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
|
-
disabled: boolean;
|
|
26
|
-
readonly: boolean;
|
|
27
25
|
expandAll: boolean;
|
|
28
26
|
labelKey: string;
|
|
29
27
|
valueKey: string;
|
|
28
|
+
disabled: boolean;
|
|
29
|
+
readonly: boolean;
|
|
30
30
|
placeholder: string;
|
|
31
31
|
clearable: boolean;
|
|
32
32
|
filterable: boolean;
|
|
@@ -17,8 +17,9 @@
|
|
|
17
17
|
/** 暗色:data-theme 与系统偏好,与 UITheme.injectBuiltInThemes 选择器策略一致 */
|
|
18
18
|
.u-multi-tree-select {
|
|
19
19
|
width: 100%;
|
|
20
|
-
|
|
21
|
-
|
|
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
|
-
|
|
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:
|
|
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([
|
|
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
|
-
|
|
302
|
+
disabled: unref(disabled),
|
|
303
|
+
clearable: false
|
|
304
|
+
}), createSlots({ _: 2 }, [hasSuffix.value ? {
|
|
281
305
|
name: "suffix",
|
|
282
|
-
fn: withCtx(() => [
|
|
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\
|
|
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,10 +16,10 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
|
|
|
16
16
|
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
|
|
17
17
|
onChange?: ((item: Record<string, any>) => any) | undefined;
|
|
18
18
|
}>, {
|
|
19
|
-
disabled: boolean;
|
|
20
|
-
readonly: boolean;
|
|
21
19
|
labelKey: string;
|
|
22
20
|
valueKey: string;
|
|
21
|
+
disabled: boolean;
|
|
22
|
+
readonly: boolean;
|
|
23
23
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
24
24
|
declare const _default: typeof __VLS_export;
|
|
25
25
|
//#endregion
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
transition: all 0.15s ease;
|
|
65
65
|
padding: 0;
|
|
66
66
|
}
|
|
67
|
-
.u-rich-text-editor__toolbar-btn:
|
|
67
|
+
.u-rich-text-editor__toolbar-btn:not(.is-disabled):hover {
|
|
68
68
|
background-color: var(--u-color-hover);
|
|
69
69
|
}
|
|
70
70
|
.u-rich-text-editor__toolbar-btn.is-active {
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
background-repeat: no-repeat;
|
|
113
113
|
background-position: right 6px center;
|
|
114
114
|
}
|
|
115
|
-
.u-rich-text-editor__heading-select:
|
|
115
|
+
.u-rich-text-editor__heading-select:not(.is-disabled):hover {
|
|
116
116
|
border-color: var(--u-color-primary);
|
|
117
117
|
}
|
|
118
118
|
.u-rich-text-editor__heading-select:focus {
|
|
@@ -75,6 +75,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
75
75
|
const currentIndex = shallowRef(-1);
|
|
76
76
|
const label = useModel(__props, "text");
|
|
77
77
|
const selected = shallowRef();
|
|
78
|
+
const displayedValue = computed(() => {
|
|
79
|
+
if (label.value) return label.value;
|
|
80
|
+
return selected.value ? o(selected.value).get(props.labelKey) : String(props.modelValue);
|
|
81
|
+
});
|
|
78
82
|
const dropdownRef = shallowRef();
|
|
79
83
|
const scrollRef = shallowRef();
|
|
80
84
|
const filterable = computed(() => {
|
|
@@ -202,7 +206,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
202
206
|
disabled: unref(disabled),
|
|
203
207
|
placeholder: __props.placeholder,
|
|
204
208
|
clearable: __props.clearable,
|
|
205
|
-
"model-value":
|
|
209
|
+
"model-value": displayedValue.value,
|
|
206
210
|
onClear: handleClear,
|
|
207
211
|
onKeydown: unref(handleKeydown),
|
|
208
212
|
"native-readonly": ""
|
|
@@ -303,7 +307,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
303
307
|
"min-width",
|
|
304
308
|
"width",
|
|
305
309
|
"onKeydown"
|
|
306
|
-
])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(
|
|
310
|
+
])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(displayedValue.value || unref(FORM_EMPTY_CONTENT)), 1)], 64));
|
|
307
311
|
};
|
|
308
312
|
}
|
|
309
313
|
});
|