@veltra/desktop 1.1.36 → 1.2.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 +1 -1
- package/dist/components/action/action.vue.d.ts +1 -1
- package/dist/components/auto-complete/auto-complete.js +1 -0
- package/dist/components/auto-complete/auto-complete.js.map +1 -1
- package/dist/components/batch-edit/batch-edit-form.js +12 -5
- package/dist/components/batch-edit/batch-edit-form.js.map +1 -1
- package/dist/components/batch-edit/batch-edit.js +8 -3
- package/dist/components/batch-edit/batch-edit.js.map +1 -1
- package/dist/components/batch-edit/batch-edit.vue.d.ts +40 -35
- package/dist/components/batch-edit/di.js.map +1 -1
- package/dist/components/batch-edit/use-edit.js +41 -23
- package/dist/components/batch-edit/use-edit.js.map +1 -1
- package/dist/components/cascade/cascade.js +1 -0
- package/dist/components/cascade/cascade.js.map +1 -1
- package/dist/components/cascade/cascade.vue.d.ts +4 -4
- package/dist/components/checkbox/checkbox-button.js +1 -0
- package/dist/components/checkbox/checkbox-button.js.map +1 -1
- package/dist/components/checkbox/checkbox-button.vue.d.ts +1 -1
- package/dist/components/checkbox/checkbox.js +1 -0
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.js +1 -0
- package/dist/components/checkbox-group/checkbox-group.js.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.vue.d.ts +2 -2
- package/dist/components/code-editor/code-editor.js +1 -0
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/condition-editor/core/evaluator.js +3 -3
- package/dist/components/condition-editor/core/evaluator.js.map +1 -1
- package/dist/components/date-panel/date-panel.vue.d.ts +1 -1
- package/dist/components/date-picker/date-picker.js +1 -0
- package/dist/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/date-picker/date-picker.vue.d.ts +1 -1
- package/dist/components/date-range-picker/date-range-picker.js +2 -0
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.vue.d.ts +1 -1
- package/dist/components/empty/empty.vue.d.ts +1 -1
- package/dist/components/expression-editor/expression-editor.js +1 -0
- package/dist/components/expression-editor/expression-editor.js.map +1 -1
- package/dist/components/file-picker/file-picker.js +1 -0
- package/dist/components/file-picker/file-picker.js.map +1 -1
- package/dist/components/form/form.js.map +1 -1
- package/dist/components/form/form.vue.d.ts +11 -19
- package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js +24 -26
- package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/form/index.d.ts +0 -3
- package/dist/components/form/use-form-fields.js +88 -0
- package/dist/components/form/use-form-fields.js.map +1 -0
- package/dist/components/form/use-node-interceptor.js +19 -30
- package/dist/components/form/use-node-interceptor.js.map +1 -1
- package/dist/components/form-item/form-item.js.map +1 -1
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js +44 -18
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/form-item/helper.js +4 -1
- package/dist/components/form-item/helper.js.map +1 -1
- package/dist/components/form-item/validate.d.ts +26 -0
- package/dist/components/form-item/validate.js +97 -0
- package/dist/components/form-item/validate.js.map +1 -0
- package/dist/components/group-input/group-input.js +1 -0
- package/dist/components/group-input/group-input.js.map +1 -1
- package/dist/components/index.d.ts +0 -3
- package/dist/components/index.js +0 -7
- package/dist/components/input/input.vue.d.ts +4 -4
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/multi-select/multi-select.js +1 -0
- package/dist/components/multi-select/multi-select.js.map +1 -1
- package/dist/components/multi-select/multi-select.vue.d.ts +3 -3
- package/dist/components/multi-tree-select/multi-tree-select.js +1 -0
- package/dist/components/multi-tree-select/multi-tree-select.js.map +1 -1
- package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +4 -4
- package/dist/components/number-input/number-input.js +1 -0
- package/dist/components/number-input/number-input.js.map +1 -1
- package/dist/components/number-range-input/number-range-input.js +1 -0
- package/dist/components/number-range-input/number-range-input.js.map +1 -1
- package/dist/components/number-range-input/number-range-input.vue.d.ts +1 -1
- package/dist/components/palette/palette.js +1 -0
- package/dist/components/palette/palette.js.map +1 -1
- package/dist/components/password-input/password-input.js +1 -0
- package/dist/components/password-input/password-input.js.map +1 -1
- package/dist/components/radio/radio.js +1 -0
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/radio-group/radio-group.js +1 -0
- package/dist/components/radio-group/radio-group.js.map +1 -1
- package/dist/components/radio-group/radio-group.vue.d.ts +2 -2
- package/dist/components/rich-text-editor/rich-text-editor.js +3 -2
- package/dist/components/rich-text-editor/rich-text-editor.js.map +1 -1
- package/dist/components/rich-text-editor/toolbar.js +10 -7
- package/dist/components/rich-text-editor/toolbar.js.map +1 -1
- package/dist/components/select/select.js +6 -3
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/select/select.vue.d.ts +2 -2
- package/dist/components/slider/slider.js +15 -2
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/switch/switch.js +1 -0
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/tabs/tabs-horizontal.vue.d.ts +2 -2
- package/dist/components/tabs/tabs-vertical.vue.d.ts +2 -2
- package/dist/components/tabs/tabs.vue.d.ts +2 -2
- package/dist/components/textarea/textarea.js +1 -0
- package/dist/components/textarea/textarea.js.map +1 -1
- package/dist/components/tip/tip.vue.d.ts +3 -3
- package/dist/components/tree-select/tree-select.js +1 -0
- package/dist/components/tree-select/tree-select.js.map +1 -1
- package/dist/components/tree-select/tree-select.vue.d.ts +4 -4
- package/dist/index.d.ts +5 -6
- package/dist/index.js +1 -4
- package/dist/types/auto-complete.d.ts +3 -2
- package/dist/types/batch-edit.d.ts +4 -5
- package/dist/types/cascade.d.ts +3 -2
- package/dist/types/checkbox-group.d.ts +2 -2
- package/dist/types/checkbox.d.ts +4 -3
- package/dist/types/code-editor.d.ts +3 -2
- package/dist/types/date-picker.d.ts +3 -2
- package/dist/types/date-range-picker.d.ts +3 -2
- package/dist/types/expression-editor.d.ts +3 -2
- package/dist/types/file-picker.d.ts +3 -2
- package/dist/types/form-field.d.ts +12 -0
- package/dist/types/form-item.d.ts +2 -2
- package/dist/types/form.d.ts +9 -48
- package/dist/types/group-input.d.ts +3 -2
- package/dist/types/index.d.ts +4 -2
- package/dist/types/input.d.ts +3 -2
- package/dist/types/multi-select.d.ts +3 -2
- package/dist/types/multi-tree-select.d.ts +3 -2
- package/dist/types/palette.d.ts +3 -2
- package/dist/types/radio-group.d.ts +3 -2
- package/dist/types/radio.d.ts +3 -2
- package/dist/types/rich-text-editor.d.ts +3 -2
- package/dist/types/select.d.ts +3 -2
- package/dist/types/slider.d.ts +3 -2
- package/dist/types/switch.d.ts +3 -2
- package/dist/types/text-editor.d.ts +3 -2
- package/dist/types/textarea.d.ts +3 -2
- package/dist/types/tree-select.d.ts +3 -2
- package/package.json +6 -6
- package/src/components/batch-edit/batch-edit-form.vue +20 -13
- package/src/components/batch-edit/batch-edit.vue +7 -8
- package/src/components/batch-edit/di.ts +1 -2
- package/src/components/batch-edit/use-edit.ts +58 -36
- package/src/components/date-range-picker/date-range-picker.vue +2 -0
- package/src/components/form/form.vue +22 -38
- package/src/components/form/index.ts +0 -6
- package/src/components/form/use-form-fields.ts +126 -0
- package/src/components/form/use-node-interceptor.ts +27 -56
- package/src/components/form-item/form-item.vue +69 -18
- package/src/components/form-item/helper.ts +10 -4
- package/src/components/form-item/validate.ts +155 -0
- package/src/components/rich-text-editor/rich-text-editor.vue +28 -25
- package/src/components/rich-text-editor/toolbar.vue +23 -19
- package/src/components/select/select.vue +6 -4
- package/src/components/slider/slider.vue +12 -2
- package/src/types/auto-complete.ts +4 -2
- package/src/types/batch-edit.ts +4 -5
- package/src/types/cascade.ts +4 -2
- package/src/types/checkbox-group.ts +2 -2
- package/src/types/checkbox.ts +5 -3
- package/src/types/code-editor.ts +4 -2
- package/src/types/date-picker.ts +4 -2
- package/src/types/date-range-picker.ts +4 -2
- package/src/types/expression-editor.ts +4 -2
- package/src/types/file-picker.ts +4 -2
- package/src/types/form-field.ts +11 -0
- package/src/types/form-item.ts +2 -2
- package/src/types/form.ts +9 -82
- package/src/types/group-input.ts +4 -2
- package/src/types/index.ts +1 -0
- package/src/types/input.ts +4 -2
- package/src/types/multi-select.ts +4 -2
- package/src/types/multi-tree-select.ts +5 -2
- package/src/types/palette.ts +4 -2
- package/src/types/radio-group.ts +4 -2
- package/src/types/radio.ts +4 -2
- package/src/types/rich-text-editor.ts +4 -2
- package/src/types/select.ts +4 -2
- package/src/types/slider.ts +4 -2
- package/src/types/switch.ts +4 -2
- package/src/types/text-editor.ts +4 -2
- package/src/types/textarea.ts +4 -2
- package/src/types/tree-select.ts +5 -2
- package/dist/components/form/dynamic-form-model.d.ts +0 -73
- package/dist/components/form/dynamic-form-model.js +0 -184
- package/dist/components/form/dynamic-form-model.js.map +0 -1
- package/dist/components/form/form-model.d.ts +0 -73
- package/dist/components/form/form-model.js +0 -179
- package/dist/components/form/form-model.js.map +0 -1
- package/dist/components/form/helper.d.ts +0 -16
- package/dist/components/form/helper.js +0 -20
- package/dist/components/form/helper.js.map +0 -1
- package/src/components/form/__test__/form-model.test.ts +0 -190
- package/src/components/form/dynamic-form-model.ts +0 -258
- package/src/components/form/form-model.ts +0 -255
- package/src/components/form/helper.ts +0 -23
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"number-input.js","names":[],"sources":["../../../src/components/number-input/number-input.vue"],"sourcesContent":["<template>\n <u-input\n v-if=\"!readonly\"\n ref=\"inputRef\"\n :class=\"className\"\n :model-value=\"displayed\"\n v-bind=\"inputProps\"\n @update:model-value=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @keydown.stop=\"handleKeydown\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n :size=\"size\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n :clearable=\"false\"\n >\n <template #suffix v-if=\"hasSuffix\">\n <span :class=\"cls.e('suffix')\">\n <u-icon\n v-if=\"props.clearable\"\n :class=\"[cls.e('clear'), bem.is('hidden', !showClear)]\"\n :title=\"showClear ? '清除' : undefined\"\n @click.stop=\"handleClear\"\n >\n <Close />\n </u-icon>\n <span v-if=\"hasCustomSuffix\" :class=\"cls.e('suffix-content')\">\n {{ suffix }}\n <slot name=\"suffix\" />\n </span>\n </span>\n\n <div v-if=\"showStep\" :class=\"cls.e('step')\">\n <u-icon\n @click=\"increase\"\n v-ripple=\"!disabled && increasable\"\n :class=\"bem.is('disabled', disabled || !increasable)\"\n >\n <ArrowUp />\n </u-icon>\n <u-icon\n @click=\"decrease\"\n v-ripple=\"!disabled && reducible\"\n :class=\"bem.is('disabled', disabled || !reducible)\"\n >\n <ArrowDown />\n </u-icon>\n </div>\n </template>\n\n <template #prefix v-if=\"slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n </u-input>\n\n <template v-else>\n {{ generateDisplayed || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n, n, o, isUndef } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowDown, ArrowUp, Close } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, shallowRef, watch } from 'vue'\n\nimport type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'NumberInput' })\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n placeholder: '请输入',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\nconst emit = defineEmits<NumberInputEmits>()\n\nconst slots = defineSlots<{ prefix?: () => any; suffix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst inputProps = computed(() => {\n return o(props).pick(['disabled', 'placeholder', 'size', 'prefix'])\n})\n\nconst inputRef = shallowRef<InputExposed>()\n\nconst inputDom = computed(() => inputRef.value?.el)\n\nconst cls = bem('number-input')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value)]\n})\n\n/** 实际值 */\nconst model = defineModel<NumberInputProps['modelValue']>()\n\n// 展示值\nconst displayed = shallowRef('')\n\nconst focused = shallowRef(false)\nconst hovered = shallowRef(false)\n\nconst generateDisplayed = computed(() => {\n if (!displayed.value) return ''\n\n return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`\n})\n\nconst showStep = computed(() => props.step !== undefined && props.step !== false)\n\nconst hasCustomSuffix = computed(() => !!props.suffix || !!slots.suffix)\n\nconst hasSuffix = computed(() => props.clearable || hasCustomSuffix.value || showStep.value)\n\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && displayed.value !== '' && hovered.value\n})\n\n/** 步长 */\nconst stepVal = computed<number>(() => {\n const { step } = props\n if (step === undefined) return 1\n return typeof step === 'boolean' ? 1 : step\n})\n\n/** 是否可增 */\nconst increasable = computed(() => {\n const { max, multiple } = props\n if (isUndef(max) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue < max\n})\n\n/** 是否可减 */\nconst reducible = computed(() => {\n const { min, multiple } = props\n if (isUndef(min) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue > min\n})\n\n// 通过值和步长值计算默认的最大精度\nconst defaultMaxPrecision = computed(() => {\n const { multiple } = props\n // 如果存在倍数,基于原始值计算精度\n const rawValue =\n multiple && model.value !== undefined ? $n.div(model.value, multiple) : model.value\n return Math.max(\n String(rawValue).split('.')[1]?.length ?? 0,\n String(stepVal.value).split('.')[1]?.length ?? 0\n )\n})\n\n/**\n * 获取展示值\n * @param num 实际值\n */\nfunction getDisplayed(num?: number): string {\n if (!num && num !== 0) return ''\n\n const {\n currency,\n precision,\n minPrecision,\n // 如果没有指定最大精度那么设置默认为值和步长值中的较大值\n maxPrecision = defaultMaxPrecision.value,\n multiple\n } = props\n\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const displayValue = multiple ? $n.div(num, multiple) : num\n\n return currency\n ? n(displayValue).currency('CNY', { precision, minPrecision, maxPrecision })\n : n(displayValue).fixed(precision ?? { minPrecision, maxPrecision })\n}\n\nwatch(\n [model, focused, () => props.currency],\n ([modelValue, inputFocused]) => {\n if (inputFocused) return\n displayed.value = getDisplayed(modelValue)\n },\n { immediate: true }\n)\n\n/**\n * 解析展示值\n * @param str 展示值\n */\nfunction parseDisplayed(str: string): number | undefined {\n if (!str) return undefined\n\n // 将货币格式去掉再转化为数字\n const number = +str.replace(/,/g, '')\n const { multiple } = props\n\n // 如果解析失败,使用当前值作为回退\n // 如果存在倍数,需要先将 model.value 除以倍数得到原始值\n let result: number | undefined\n if (isNaN(number)) {\n if (model.value === undefined) return undefined\n result = multiple ? $n.div(model.value, multiple) : model.value\n } else {\n result = number\n }\n\n if (result === undefined) return undefined\n\n const { precision, maxPrecision, minPrecision } = props\n\n const fixedResult = +n(result).fixed(precision ?? { minPrecision, maxPrecision })\n\n // 如果存在倍数,将原始值乘以倍数返回实际值\n return multiple ? $n.mul(fixedResult, multiple) : fixedResult\n}\n\n/**\n * 获取有效值\n * @param val 值\n */\nfunction getValidValue<T extends undefined | number>(val: T): T {\n if (val === undefined) return val\n const { min, max, multiple } = props\n\n // 如果存在倍数,先将值除以倍数得到原始值进行验证,验证后再乘以倍数\n if (multiple) {\n const rawVal = $n.div(val, multiple)\n let validRawVal = rawVal\n if (min !== undefined && rawVal < min) validRawVal = min\n if (max !== undefined && rawVal > max) validRawVal = max\n return $n.mul(validRawVal, multiple) as T\n }\n\n if (min !== undefined && val < min) return min as T\n if (max !== undefined && val > max) return max as T\n return val\n}\n\nfunction handleUpdateModelValue(input: string): void {\n const newVal = parseDisplayed(input)\n model.value = getValidValue(newVal)\n displayed.value = input\n}\n\nfunction handleClear(): void {\n if (!showClear.value) return\n model.value = undefined\n displayed.value = ''\n emit('clear')\n}\n\n/**\n * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,\n * 主要用于在输入非数字的情况下的修正处理\n * @param input 输入的值\n */\nfunction handleChange() {\n emit('change', model.value)\n}\n\nconst tween = new Tween(\n { n: model.value ?? 0 },\n {\n onUpdate(state) {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n const { multiple } = props\n // 如果存在倍数,tween.state.n 存储的是原始值,需要乘以倍数后传给 getDisplayed\n const actualValue = multiple ? $n.mul(state.n, multiple) : state.n\n _rawInput.value = getDisplayed(actualValue)\n },\n // 动画进行的过程值有可能被改变, 因此在onComplete中确保还原的是原本的值\n onComplete() {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n _rawInput.value = getDisplayed(model.value)\n }\n }\n)\n\n/** 增 */\nfunction increase(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上加步长\n const newRawVal = $n.plus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.plus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\n/** 减 */\nfunction decrease(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上减步长\n const newRawVal = $n.minus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.minus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\nfunction handleKeydown(e: KeyboardEvent): void {\n if (!props.step) return\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n return increase()\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n return decrease()\n }\n}\n\nfunction handleFocus(): void {\n focused.value = true\n\n // 如果初始值和当前设置的精度不匹配则进行精度修正\n if (model.value === undefined) return\n const { precision, maxPrecision, minPrecision, multiple } = props\n\n if (multiple) {\n // 如果存在倍数,先除以倍数得到原始值进行精度修正,再乘以倍数\n const rawVal = $n.div(model.value, multiple)\n const fixedRawVal = +n(rawVal).fixed(precision ?? { maxPrecision, minPrecision })\n model.value = $n.mul(fixedRawVal, multiple)\n } else {\n model.value = +n(model.value).fixed(precision ?? { maxPrecision, minPrecision })\n }\n}\n\nfunction handleBlur(): void {\n focused.value = false\n model.value = props.modelValue\n}\n\nfunction handleMouseEnter(): void {\n hovered.value = true\n}\n\nfunction handleMouseLeave(): void {\n hovered.value = false\n}\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"number-input.js","names":[],"sources":["../../../src/components/number-input/number-input.vue"],"sourcesContent":["<template>\n <u-input\n v-if=\"!readonly\"\n ref=\"inputRef\"\n :class=\"className\"\n :model-value=\"displayed\"\n v-bind=\"inputProps\"\n @update:model-value=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @keydown.stop=\"handleKeydown\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n :size=\"size\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n :clearable=\"false\"\n >\n <template #suffix v-if=\"hasSuffix\">\n <span :class=\"cls.e('suffix')\">\n <u-icon\n v-if=\"props.clearable\"\n :class=\"[cls.e('clear'), bem.is('hidden', !showClear)]\"\n :title=\"showClear ? '清除' : undefined\"\n @click.stop=\"handleClear\"\n >\n <Close />\n </u-icon>\n <span v-if=\"hasCustomSuffix\" :class=\"cls.e('suffix-content')\">\n {{ suffix }}\n <slot name=\"suffix\" />\n </span>\n </span>\n\n <div v-if=\"showStep\" :class=\"cls.e('step')\">\n <u-icon\n @click=\"increase\"\n v-ripple=\"!disabled && increasable\"\n :class=\"bem.is('disabled', disabled || !increasable)\"\n >\n <ArrowUp />\n </u-icon>\n <u-icon\n @click=\"decrease\"\n v-ripple=\"!disabled && reducible\"\n :class=\"bem.is('disabled', disabled || !reducible)\"\n >\n <ArrowDown />\n </u-icon>\n </div>\n </template>\n\n <template #prefix v-if=\"slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n </u-input>\n\n <template v-else>\n {{ generateDisplayed || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n, n, o, isUndef } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowDown, ArrowUp, Close } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, shallowRef, watch } from 'vue'\n\nimport type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'NumberInput' })\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n placeholder: '请输入',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\nconst emit = defineEmits<NumberInputEmits>()\n\nconst slots = defineSlots<{ prefix?: () => any; suffix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst inputProps = computed(() => {\n return o(props).pick(['disabled', 'placeholder', 'size', 'prefix'])\n})\n\nconst inputRef = shallowRef<InputExposed>()\n\nconst inputDom = computed(() => inputRef.value?.el)\n\nconst cls = bem('number-input')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value)]\n})\n\n/** 实际值 */\nconst model = defineModel<NumberInputProps['modelValue']>()\n\n// 展示值\nconst displayed = shallowRef('')\n\nconst focused = shallowRef(false)\nconst hovered = shallowRef(false)\n\nconst generateDisplayed = computed(() => {\n if (!displayed.value) return ''\n\n return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`\n})\n\nconst showStep = computed(() => props.step !== undefined && props.step !== false)\n\nconst hasCustomSuffix = computed(() => !!props.suffix || !!slots.suffix)\n\nconst hasSuffix = computed(() => props.clearable || hasCustomSuffix.value || showStep.value)\n\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && displayed.value !== '' && hovered.value\n})\n\n/** 步长 */\nconst stepVal = computed<number>(() => {\n const { step } = props\n if (step === undefined) return 1\n return typeof step === 'boolean' ? 1 : step\n})\n\n/** 是否可增 */\nconst increasable = computed(() => {\n const { max, multiple } = props\n if (isUndef(max) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue < max\n})\n\n/** 是否可减 */\nconst reducible = computed(() => {\n const { min, multiple } = props\n if (isUndef(min) || isUndef(model.value)) return true\n // 如果存在倍数,先将 model.value 除以倍数得到原始值再比较\n const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n return rawValue > min\n})\n\n// 通过值和步长值计算默认的最大精度\nconst defaultMaxPrecision = computed(() => {\n const { multiple } = props\n // 如果存在倍数,基于原始值计算精度\n const rawValue =\n multiple && model.value !== undefined ? $n.div(model.value, multiple) : model.value\n return Math.max(\n String(rawValue).split('.')[1]?.length ?? 0,\n String(stepVal.value).split('.')[1]?.length ?? 0\n )\n})\n\n/**\n * 获取展示值\n * @param num 实际值\n */\nfunction getDisplayed(num?: number): string {\n if (!num && num !== 0) return ''\n\n const {\n currency,\n precision,\n minPrecision,\n // 如果没有指定最大精度那么设置默认为值和步长值中的较大值\n maxPrecision = defaultMaxPrecision.value,\n multiple\n } = props\n\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const displayValue = multiple ? $n.div(num, multiple) : num\n\n return currency\n ? n(displayValue).currency('CNY', { precision, minPrecision, maxPrecision })\n : n(displayValue).fixed(precision ?? { minPrecision, maxPrecision })\n}\n\nwatch(\n [model, focused, () => props.currency],\n ([modelValue, inputFocused]) => {\n if (inputFocused) return\n displayed.value = getDisplayed(modelValue)\n },\n { immediate: true }\n)\n\n/**\n * 解析展示值\n * @param str 展示值\n */\nfunction parseDisplayed(str: string): number | undefined {\n if (!str) return undefined\n\n // 将货币格式去掉再转化为数字\n const number = +str.replace(/,/g, '')\n const { multiple } = props\n\n // 如果解析失败,使用当前值作为回退\n // 如果存在倍数,需要先将 model.value 除以倍数得到原始值\n let result: number | undefined\n if (isNaN(number)) {\n if (model.value === undefined) return undefined\n result = multiple ? $n.div(model.value, multiple) : model.value\n } else {\n result = number\n }\n\n if (result === undefined) return undefined\n\n const { precision, maxPrecision, minPrecision } = props\n\n const fixedResult = +n(result).fixed(precision ?? { minPrecision, maxPrecision })\n\n // 如果存在倍数,将原始值乘以倍数返回实际值\n return multiple ? $n.mul(fixedResult, multiple) : fixedResult\n}\n\n/**\n * 获取有效值\n * @param val 值\n */\nfunction getValidValue<T extends undefined | number>(val: T): T {\n if (val === undefined) return val\n const { min, max, multiple } = props\n\n // 如果存在倍数,先将值除以倍数得到原始值进行验证,验证后再乘以倍数\n if (multiple) {\n const rawVal = $n.div(val, multiple)\n let validRawVal = rawVal\n if (min !== undefined && rawVal < min) validRawVal = min\n if (max !== undefined && rawVal > max) validRawVal = max\n return $n.mul(validRawVal, multiple) as T\n }\n\n if (min !== undefined && val < min) return min as T\n if (max !== undefined && val > max) return max as T\n return val\n}\n\nfunction handleUpdateModelValue(input: string): void {\n const newVal = parseDisplayed(input)\n model.value = getValidValue(newVal)\n displayed.value = input\n}\n\nfunction handleClear(): void {\n if (!showClear.value) return\n model.value = undefined\n displayed.value = ''\n emit('clear')\n}\n\n/**\n * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,\n * 主要用于在输入非数字的情况下的修正处理\n * @param input 输入的值\n */\nfunction handleChange() {\n emit('change', model.value)\n}\n\nconst tween = new Tween(\n { n: model.value ?? 0 },\n {\n onUpdate(state) {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n const { multiple } = props\n // 如果存在倍数,tween.state.n 存储的是原始值,需要乘以倍数后传给 getDisplayed\n const actualValue = multiple ? $n.mul(state.n, multiple) : state.n\n _rawInput.value = getDisplayed(actualValue)\n },\n // 动画进行的过程值有可能被改变, 因此在onComplete中确保还原的是原本的值\n onComplete() {\n const _rawInput = inputDom.value\n if (!_rawInput) return\n _rawInput.value = getDisplayed(model.value)\n }\n }\n)\n\n/** 增 */\nfunction increase(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上加步长\n const newRawVal = $n.plus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.plus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\n/** 减 */\nfunction decrease(): void {\n if (disabled.value) return\n const { multiple } = props\n const val = model.value ?? 0\n\n if (multiple) {\n // 如果存在倍数,先将实际值除以倍数得到原始值\n const rawVal = $n.div(val, multiple)\n // 在原始值基础上减步长\n const newRawVal = $n.minus(rawVal, stepVal.value)\n // 乘以倍数得到新的实际值\n const newVal = $n.mul(newRawVal, multiple)\n const target = getValidValue(newVal)\n model.value = target\n // tween 动画在原始值上进行\n tween.state.n = $n.div(target, multiple)\n tween.to({ n: $n.div(target, multiple) })\n } else {\n tween.state.n = val\n const target = getValidValue($n.minus(val, stepVal.value))\n model.value = target\n tween.to({ n: target })\n }\n}\n\nfunction handleKeydown(e: KeyboardEvent): void {\n if (!props.step) return\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n return increase()\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n return decrease()\n }\n}\n\nfunction handleFocus(): void {\n focused.value = true\n\n // 如果初始值和当前设置的精度不匹配则进行精度修正\n if (model.value === undefined) return\n const { precision, maxPrecision, minPrecision, multiple } = props\n\n if (multiple) {\n // 如果存在倍数,先除以倍数得到原始值进行精度修正,再乘以倍数\n const rawVal = $n.div(model.value, multiple)\n const fixedRawVal = +n(rawVal).fixed(precision ?? { maxPrecision, minPrecision })\n model.value = $n.mul(fixedRawVal, multiple)\n } else {\n model.value = +n(model.value).fixed(precision ?? { maxPrecision, minPrecision })\n }\n}\n\nfunction handleBlur(): void {\n focused.value = false\n model.value = props.modelValue\n}\n\nfunction handleMouseEnter(): void {\n hovered.value = true\n}\n\nfunction handleMouseLeave(): void {\n hovered.value = false\n}\n</script>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"number-range-input.js","names":[],"sources":["../../../src/components/number-range-input/number-range-input.vue"],"sourcesContent":["<template>\n <div v-if=\"!readonly\" :class=\"className\">\n <u-number-input\n v-model=\"startModel\"\n :placeholder=\"startPlaceholder\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :size=\"size\"\n v-bind=\"numberInputBind\"\n @change=\"emitChange\"\n />\n <span :class=\"cls.e('separator')\">{{ separator }}</span>\n <u-number-input\n v-model=\"endModel\"\n :placeholder=\"endPlaceholder\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :size=\"size\"\n v-bind=\"numberInputBind\"\n @change=\"emitChange\"\n />\n </div>\n\n <template v-else>\n {{ readonlyText || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n, $n, o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, getCurrentInstance, nextTick, onMounted, watch } from 'vue'\n\nimport type { NumberRangeInputEmits, NumberRangeInputProps, NumberRangeTuple } from '../../types'\nimport { UNumberInput } from '../number-input'\n\ndefineOptions({ name: 'NumberRangeInput' })\n\nconst props = withDefaults(defineProps<NumberRangeInputProps>(), {\n startPlaceholder: '请输入',\n endPlaceholder: '请输入',\n separator: '~',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<NumberRangeInputEmits>()\n\nconst inst = getCurrentInstance()\n\nfunction splitBound(): boolean {\n const p = inst?.vnode.props\n if (!p) return false\n return 'start' in p || 'onUpdate:start' in p || 'end' in p || 'onUpdate:end' in p\n}\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst cls = bem('number-range-input')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value)]\n})\n\nconst model = defineModel<NumberRangeTuple>({ default: () => [undefined, undefined] })\n\nconst startRef = defineModel<number | undefined>('start')\nconst endRef = defineModel<number | undefined>('end')\n\nlet syncGuard = false\n\nfunction normalizeFromSplit(s: number | undefined, e: number | undefined): NumberRangeTuple {\n let nextS = s\n let nextE = e\n if (nextS !== undefined && nextE !== undefined && nextS > nextE) nextE = nextS\n return [nextS, nextE]\n}\n\nwatch(\n model,\n (t) => {\n if (syncGuard) return\n syncGuard = true\n const tuple = t ?? [undefined, undefined]\n if (startRef.value !== tuple[0]) startRef.value = tuple[0]\n if (endRef.value !== tuple[1]) endRef.value = tuple[1]\n nextTick(() => {\n syncGuard = false\n })\n },\n { deep: true }\n)\n\nwatch(\n [startRef, endRef],\n () => {\n if (!splitBound() || syncGuard) return\n syncGuard = true\n const normalized = normalizeFromSplit(startRef.value, endRef.value)\n const cur = model.value ?? [undefined, undefined]\n if (cur[0] !== normalized[0] || cur[1] !== normalized[1]) {\n model.value = normalized\n }\n nextTick(() => {\n syncGuard = false\n })\n },\n { deep: true }\n)\n\nonMounted(() => {\n if (!splitBound()) return\n const cur = model.value ?? [undefined, undefined]\n const hasModel = cur[0] !== undefined || cur[1] !== undefined\n if (hasModel) return\n const normalized = normalizeFromSplit(startRef.value, endRef.value)\n if (cur[0] !== normalized[0] || cur[1] !== normalized[1]) {\n syncGuard = true\n model.value = normalized\n nextTick(() => {\n syncGuard = false\n })\n }\n})\n\nconst numberInputBind = computed(() => {\n return o(props).pick([\n 'clearable',\n 'prefix',\n 'suffix',\n 'step',\n 'min',\n 'max',\n 'currency',\n 'precision',\n 'minPrecision',\n 'maxPrecision',\n 'multiple'\n ])\n})\n\nconst startModel = computed({\n get(): number | undefined {\n return model.value?.[0]\n },\n set(v: number | undefined) {\n const cur = model.value ?? [undefined, undefined]\n const end = cur[1]\n let nextEnd = end\n if (v !== undefined && end !== undefined && v > end) nextEnd = v\n model.value = [v, nextEnd]\n }\n})\n\nconst endModel = computed({\n get(): number | undefined {\n return model.value?.[1]\n },\n set(v: number | undefined) {\n const cur = model.value ?? [undefined, undefined]\n const start = cur[0]\n let nextStart = start\n if (v !== undefined && start !== undefined && v < start) nextStart = v\n model.value = [nextStart, v]\n }\n})\n\nfunction formatNumberPart(num: number): string {\n const { currency, precision, minPrecision, maxPrecision, multiple } = props\n\n const displayValue = multiple ? $n.div(num, multiple) : num\n\n return currency\n ? n(displayValue).currency('CNY', { precision, minPrecision, maxPrecision })\n : n(displayValue).fixed(precision ?? { minPrecision, maxPrecision })\n}\n\nconst readonlyText = computed(() => {\n const [s, e] = model.value ?? [undefined, undefined]\n if (s === undefined && e === undefined) return ''\n const p = props.prefix ?? ''\n const sfx = props.suffix ?? ''\n const sep = props.separator ?? '~'\n const a = s === undefined ? '—' : formatNumberPart(s)\n const b = e === undefined ? '—' : formatNumberPart(e)\n return `${p}${a} ${sep} ${b}${sfx}`\n})\n\nfunction emitChange(): void {\n emit('change', model.value ?? [undefined, undefined])\n}\n</script>\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"number-range-input.js","names":[],"sources":["../../../src/components/number-range-input/number-range-input.vue"],"sourcesContent":["<template>\n <div v-if=\"!readonly\" :class=\"className\">\n <u-number-input\n v-model=\"startModel\"\n :placeholder=\"startPlaceholder\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :size=\"size\"\n v-bind=\"numberInputBind\"\n @change=\"emitChange\"\n />\n <span :class=\"cls.e('separator')\">{{ separator }}</span>\n <u-number-input\n v-model=\"endModel\"\n :placeholder=\"endPlaceholder\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :size=\"size\"\n v-bind=\"numberInputBind\"\n @change=\"emitChange\"\n />\n </div>\n\n <template v-else>\n {{ readonlyText || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n, $n, o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, getCurrentInstance, nextTick, onMounted, watch } from 'vue'\n\nimport type { NumberRangeInputEmits, NumberRangeInputProps, NumberRangeTuple } from '../../types'\nimport { UNumberInput } from '../number-input'\n\ndefineOptions({ name: 'NumberRangeInput' })\n\nconst props = withDefaults(defineProps<NumberRangeInputProps>(), {\n startPlaceholder: '请输入',\n endPlaceholder: '请输入',\n separator: '~',\n clearable: true,\n disabled: undefined,\n readonly: undefined\n})\n\nconst emit = defineEmits<NumberRangeInputEmits>()\n\nconst inst = getCurrentInstance()\n\nfunction splitBound(): boolean {\n const p = inst?.vnode.props\n if (!p) return false\n return 'start' in p || 'onUpdate:start' in p || 'end' in p || 'onUpdate:end' in p\n}\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst cls = bem('number-range-input')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value)]\n})\n\nconst model = defineModel<NumberRangeTuple>({ default: () => [undefined, undefined] })\n\nconst startRef = defineModel<number | undefined>('start')\nconst endRef = defineModel<number | undefined>('end')\n\nlet syncGuard = false\n\nfunction normalizeFromSplit(s: number | undefined, e: number | undefined): NumberRangeTuple {\n let nextS = s\n let nextE = e\n if (nextS !== undefined && nextE !== undefined && nextS > nextE) nextE = nextS\n return [nextS, nextE]\n}\n\nwatch(\n model,\n (t) => {\n if (syncGuard) return\n syncGuard = true\n const tuple = t ?? [undefined, undefined]\n if (startRef.value !== tuple[0]) startRef.value = tuple[0]\n if (endRef.value !== tuple[1]) endRef.value = tuple[1]\n nextTick(() => {\n syncGuard = false\n })\n },\n { deep: true }\n)\n\nwatch(\n [startRef, endRef],\n () => {\n if (!splitBound() || syncGuard) return\n syncGuard = true\n const normalized = normalizeFromSplit(startRef.value, endRef.value)\n const cur = model.value ?? [undefined, undefined]\n if (cur[0] !== normalized[0] || cur[1] !== normalized[1]) {\n model.value = normalized\n }\n nextTick(() => {\n syncGuard = false\n })\n },\n { deep: true }\n)\n\nonMounted(() => {\n if (!splitBound()) return\n const cur = model.value ?? [undefined, undefined]\n const hasModel = cur[0] !== undefined || cur[1] !== undefined\n if (hasModel) return\n const normalized = normalizeFromSplit(startRef.value, endRef.value)\n if (cur[0] !== normalized[0] || cur[1] !== normalized[1]) {\n syncGuard = true\n model.value = normalized\n nextTick(() => {\n syncGuard = false\n })\n }\n})\n\nconst numberInputBind = computed(() => {\n return o(props).pick([\n 'clearable',\n 'prefix',\n 'suffix',\n 'step',\n 'min',\n 'max',\n 'currency',\n 'precision',\n 'minPrecision',\n 'maxPrecision',\n 'multiple'\n ])\n})\n\nconst startModel = computed({\n get(): number | undefined {\n return model.value?.[0]\n },\n set(v: number | undefined) {\n const cur = model.value ?? [undefined, undefined]\n const end = cur[1]\n let nextEnd = end\n if (v !== undefined && end !== undefined && v > end) nextEnd = v\n model.value = [v, nextEnd]\n }\n})\n\nconst endModel = computed({\n get(): number | undefined {\n return model.value?.[1]\n },\n set(v: number | undefined) {\n const cur = model.value ?? [undefined, undefined]\n const start = cur[0]\n let nextStart = start\n if (v !== undefined && start !== undefined && v < start) nextStart = v\n model.value = [nextStart, v]\n }\n})\n\nfunction formatNumberPart(num: number): string {\n const { currency, precision, minPrecision, maxPrecision, multiple } = props\n\n const displayValue = multiple ? $n.div(num, multiple) : num\n\n return currency\n ? n(displayValue).currency('CNY', { precision, minPrecision, maxPrecision })\n : n(displayValue).fixed(precision ?? { minPrecision, maxPrecision })\n}\n\nconst readonlyText = computed(() => {\n const [s, e] = model.value ?? [undefined, undefined]\n if (s === undefined && e === undefined) return ''\n const p = props.prefix ?? ''\n const sfx = props.suffix ?? ''\n const sep = props.separator ?? '~'\n const a = s === undefined ? '—' : formatNumberPart(s)\n const b = e === undefined ? '—' : formatNumberPart(e)\n return `${p}${a} ${sep} ${b}${sfx}`\n})\n\nfunction emitChange(): void {\n emit('change', model.value ?? [undefined, undefined])\n}\n</script>\n"],"mappings":"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"}
|
|
@@ -25,9 +25,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
25
25
|
clearable: boolean;
|
|
26
26
|
disabled: boolean;
|
|
27
27
|
readonly: boolean;
|
|
28
|
-
separator: string;
|
|
29
28
|
startPlaceholder: string;
|
|
30
29
|
endPlaceholder: string;
|
|
30
|
+
separator: string;
|
|
31
31
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
32
32
|
declare const _default: typeof __VLS_export;
|
|
33
33
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n <u-tip\n trigger=\"click\"\n :class=\"cls.e('panel')\"\n v-model:visible=\"visible\"\n :disabled=\"disabled || readonly\"\n >\n <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n <template #content>\n <!-- 饱和度和亮度 -->\n <PaletteSV ref=\"palette-sv\" />\n\n <!-- 色相 -->\n <PaletteHue ref=\"palette-hue\" />\n\n <!-- 透明度 -->\n <PaletteAlpha ref=\"palette-alpha\" />\n\n <!-- 颜色切换 -->\n <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n </template>\n </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({ name: 'Palette' })\n\nconst props = withDefaults(defineProps<PaletteProps>(), {\n disabled: undefined,\n readonly: undefined\n})\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst cls = bem('palette')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]\n})\n\nconst { HSV, alpha, ...rest } = useHSV()\n\nconst color = defineModel<string>()\nconst RGB = computed(() => HSV2RGB(HSV))\nconst { userAction, isUserActive } = useUserAction()\n\nconst visible = shallowRef(false)\n\n/** 清除时跳过一次内部状态到 color 的同步,防止 updateAlpha 把已清空的 color 覆盖回来 */\nlet skipColorUpdate = false\n\nconst handleClear = userAction(() => {\n if (alpha.value !== 1) {\n skipColorUpdate = true\n }\n color.value = ''\n rest.updateAlpha(1)\n visible.value = false\n})\n\nwatch([alpha, RGB], ([alpha, RGB]) => {\n if (skipColorUpdate) {\n skipColorUpdate = false\n return\n }\n color.value = `#${RGB2HEX(RGB, alpha)}`\n})\n\nconst paletteSVRef = useTemplateRef('palette-sv')\nconst paletteHueRef = useTemplateRef('palette-hue')\nconst paletteAlphaRef = useTemplateRef('palette-alpha')\n\nwatch(\n color,\n (color) => {\n if (!color) return\n if (isUserActive()) return\n\n const { RGB, alpha } = HEX2RGBA(color)\n const hsv = RGB2HSV(RGB)\n rest.updateHue(hsv.h)\n rest.updateSV({ s: hsv.s, v: hsv.v })\n rest.updateAlpha(alpha)\n\n paletteSVRef.value?.init()\n paletteHueRef.value?.init()\n paletteAlphaRef.value?.init()\n },\n { immediate: true }\n)\n\nprovide(PaletteDIKey, { cls, HSV, RGB, alpha, userAction, isUserActive, ...rest })\n</script>\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n <u-tip\n trigger=\"click\"\n :class=\"cls.e('panel')\"\n v-model:visible=\"visible\"\n :disabled=\"disabled || readonly\"\n >\n <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n <template #content>\n <!-- 饱和度和亮度 -->\n <PaletteSV ref=\"palette-sv\" />\n\n <!-- 色相 -->\n <PaletteHue ref=\"palette-hue\" />\n\n <!-- 透明度 -->\n <PaletteAlpha ref=\"palette-alpha\" />\n\n <!-- 颜色切换 -->\n <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n </template>\n </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({ name: 'Palette' })\n\nconst props = withDefaults(defineProps<PaletteProps>(), {\n disabled: undefined,\n readonly: undefined\n})\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst cls = bem('palette')\n\nconst className = computed(() => {\n return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]\n})\n\nconst { HSV, alpha, ...rest } = useHSV()\n\nconst color = defineModel<string>()\nconst RGB = computed(() => HSV2RGB(HSV))\nconst { userAction, isUserActive } = useUserAction()\n\nconst visible = shallowRef(false)\n\n/** 清除时跳过一次内部状态到 color 的同步,防止 updateAlpha 把已清空的 color 覆盖回来 */\nlet skipColorUpdate = false\n\nconst handleClear = userAction(() => {\n if (alpha.value !== 1) {\n skipColorUpdate = true\n }\n color.value = ''\n rest.updateAlpha(1)\n visible.value = false\n})\n\nwatch([alpha, RGB], ([alpha, RGB]) => {\n if (skipColorUpdate) {\n skipColorUpdate = false\n return\n }\n color.value = `#${RGB2HEX(RGB, alpha)}`\n})\n\nconst paletteSVRef = useTemplateRef('palette-sv')\nconst paletteHueRef = useTemplateRef('palette-hue')\nconst paletteAlphaRef = useTemplateRef('palette-alpha')\n\nwatch(\n color,\n (color) => {\n if (!color) return\n if (isUserActive()) return\n\n const { RGB, alpha } = HEX2RGBA(color)\n const hsv = RGB2HSV(RGB)\n rest.updateHue(hsv.h)\n rest.updateSV({ s: hsv.s, v: hsv.v })\n rest.updateAlpha(alpha)\n\n paletteSVRef.value?.init()\n paletteHueRef.value?.init()\n paletteAlphaRef.value?.init()\n },\n { immediate: true }\n)\n\nprovide(PaletteDIKey, { cls, HSV, RGB, alpha, userAction, isUserActive, ...rest })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC;EAElF,MAAM,MAAM,IAAI,SAAS;EAEzB,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,KAAK;IAAG,IAAI,GAAG,YAAY,CAAC,MAAM,KAAK;GAAC;EACpE,CAAC;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,OAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,YAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,GAAG,CAAC;EACvC,MAAM,EAAE,YAAY,iBAAiB,cAAc;EAEnD,MAAM,UAAU,WAAW,KAAK;;EAGhC,IAAI,kBAAkB;EAEtB,MAAM,cAAc,iBAAiB;GACnC,IAAI,MAAM,UAAU,GAClB,kBAAkB;GAEpB,MAAM,QAAQ;GACd,KAAK,YAAY,CAAC;GAClB,QAAQ,QAAQ;EAClB,CAAC;EAED,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,SAAS;GACpC,IAAI,iBAAiB;IACnB,kBAAkB;IAClB;GACF;GACA,MAAM,QAAQ,IAAI,QAAQ,KAAK,KAAK;EACtC,CAAC;EAED,MAAM,eAAe,eAAe,YAAY;EAChD,MAAM,gBAAgB,eAAe,aAAa;EAClD,MAAM,kBAAkB,eAAe,eAAe;EAEtD,MACE,QACC,UAAU;GACT,IAAI,CAAC,OAAO;GACZ,IAAI,aAAa,GAAG;GAEpB,MAAM,EAAE,KAAK,UAAU,SAAS,KAAK;GACrC,MAAM,MAAM,QAAQ,GAAG;GACvB,KAAK,UAAU,IAAI,CAAC;GACpB,KAAK,SAAS;IAAE,GAAG,IAAI;IAAG,GAAG,IAAI;GAAE,CAAC;GACpC,KAAK,YAAY,KAAK;GAEtB,aAAa,OAAO,KAAK;GACzB,cAAc,OAAO,KAAK;GAC1B,gBAAgB,OAAO,KAAK;EAC9B,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,QAAQ,cAAc;GAAE;GAAK;GAAK;GAAK;GAAO;GAAY;GAAc,GAAG;EAAK,CAAC;;uBA5G/E,YAqBQ,MAAA,WAAA,GAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,OAAA,CAAA;IACL,SAAS,QAAA;8DAAA,QAAO,QAAA;IACvB,UAAU,MAAA,QAAA,KAAY,MAAA,QAAA;;IAIZ,SAAO,cACD;KAAf,mBAAA,UAAA;KACA,YAA8B,aAAA,EAAnB,KAAI,aAAY,GAAA,MAAA,GAAA;KAE3B,mBAAA,MAAA;KACA,YAAgC,aAAA,EAApB,KAAI,cAAa,GAAA,MAAA,GAAA;KAE7B,mBAAA,OAAA;KACA,YAAoC,aAAA,EAAtB,KAAI,gBAAe,GAAA,MAAA,GAAA;KAEjC,mBAAA,QAAA;KACA,YAAiE,aAAA;MAArC,OAAO,MAAA;8DAAA,MAAK,QAAA;MAAG,SAAO,MAAA,WAAA;;;2BAbiB,CAArE,mBAAqE,QAAA;KAA9D,OAAK,eAAE,UAAA,KAAS;KAAG,OAAK,eAAA,EAAA,iBAAqB,MAAA,MAAK,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.vue"],"sourcesContent":["<template>\n <u-input\n :class=\"cls.b\"\n :model-value=\"passwordText\"\n v-bind=\"inputProps\"\n :size=\"size\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n :clearable=\"false\"\n @native:input=\"handleUpdatePwd\"\n @update:model-value=\"!$event && handleClear()\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n >\n <template #suffix>\n <span :class=\"cls.e('suffix')\">\n <UIcon v-if=\"showClear\" :class=\"cls.e('clear')\" title=\"清除\" @click.stop=\"handleClear\">\n <Close />\n </UIcon>\n <UIcon :class=\"cls.e('visibility-toggle')\" :size=\"18\" @click.stop=\"toggleVisible\">\n <Hide v-if=\"pwdVisible\" />\n <View v-else />\n </UIcon>\n </span>\n </template>\n\n <template #prefix v-if=\"slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n </u-input>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { Close, Hide, View } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, ref, shallowRef } from 'vue'\n\nimport type { PasswordInputProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'PasswordInput' })\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n clearable: false,\n disabled: undefined,\n readonly: undefined\n})\n\nconst slots = defineSlots<{ prefix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst inputProps = computed(() => {\n return o(props).pick(['disabled', 'placeholder', 'size'])\n})\n\nconst cls = bem('password-input')\n\nconst model = defineModel<string>()\n\nconst hovered = ref(false)\n\nconst handleMouseEnter = (): void => {\n hovered.value = true\n}\n\nconst handleMouseLeave = (): void => {\n hovered.value = false\n}\n\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && !!model.value && hovered.value\n})\n\nconst passwordChar = '●'\n\nconst handleUpdatePwd = (e: Event): void => {\n const target = e.target as HTMLInputElement\n const val = target.value\n if (!val) {\n model.value = val\n return\n }\n\n // 字符从无到有\n if (!model.value) {\n model.value = val\n return\n }\n\n const pointIndex = target.selectionStart!\n let inputChar = pointIndex === 0 ? '' : val[pointIndex - 1]!\n if (inputChar === passwordChar) inputChar = ''\n\n // 光标右侧字符数量(当前字符长度减去光标位置)\n const rightLen = val.length - pointIndex\n // 光标左侧字符数量 (当光标前的字符是刚刚输入的,则为这个字符前的所有的字符,否则为光标前的所有赐福)\n const leftLen = inputChar === '' ? pointIndex : pointIndex - 1\n\n const leftVal = model.value.slice(0, leftLen)\n const rightVal = rightLen === 0 ? '' : model.value.slice(-rightLen)\n\n model.value = leftVal + inputChar + rightVal\n\n nextTick(() => {\n target.selectionStart = pointIndex\n target.selectionEnd = pointIndex\n })\n}\n\nconst handleClear = (): void => {\n model.value = ''\n}\n\nconst pwdVisible = shallowRef(false)\n\nconst passwordText = computed<string | undefined>(() => {\n if (pwdVisible.value) return model.value\n return model.value ? passwordChar.repeat(model.value.length) : ''\n})\n\nconst toggleVisible = () => {\n pwdVisible.value = !pwdVisible.value\n}\n</script>\n"],"mappings":";;;;;;;;AAoFA,MAAM,eAAe
|
|
1
|
+
{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.vue"],"sourcesContent":["<template>\n <u-input\n :class=\"cls.b\"\n :model-value=\"passwordText\"\n v-bind=\"inputProps\"\n :size=\"size\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n :clearable=\"false\"\n @native:input=\"handleUpdatePwd\"\n @update:model-value=\"!$event && handleClear()\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n >\n <template #suffix>\n <span :class=\"cls.e('suffix')\">\n <UIcon v-if=\"showClear\" :class=\"cls.e('clear')\" title=\"清除\" @click.stop=\"handleClear\">\n <Close />\n </UIcon>\n <UIcon :class=\"cls.e('visibility-toggle')\" :size=\"18\" @click.stop=\"toggleVisible\">\n <Hide v-if=\"pwdVisible\" />\n <View v-else />\n </UIcon>\n </span>\n </template>\n\n <template #prefix v-if=\"slots.prefix\">\n <slot name=\"prefix\" />\n </template>\n </u-input>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { Close, Hide, View } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, ref, shallowRef } from 'vue'\n\nimport type { PasswordInputProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'PasswordInput' })\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n clearable: false,\n disabled: undefined,\n readonly: undefined\n})\n\nconst slots = defineSlots<{ prefix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst inputProps = computed(() => {\n return o(props).pick(['disabled', 'placeholder', 'size'])\n})\n\nconst cls = bem('password-input')\n\nconst model = defineModel<string>()\n\nconst hovered = ref(false)\n\nconst handleMouseEnter = (): void => {\n hovered.value = true\n}\n\nconst handleMouseLeave = (): void => {\n hovered.value = false\n}\n\nconst showClear = computed(() => {\n return props.clearable && !disabled.value && !!model.value && hovered.value\n})\n\nconst passwordChar = '●'\n\nconst handleUpdatePwd = (e: Event): void => {\n const target = e.target as HTMLInputElement\n const val = target.value\n if (!val) {\n model.value = val\n return\n }\n\n // 字符从无到有\n if (!model.value) {\n model.value = val\n return\n }\n\n const pointIndex = target.selectionStart!\n let inputChar = pointIndex === 0 ? '' : val[pointIndex - 1]!\n if (inputChar === passwordChar) inputChar = ''\n\n // 光标右侧字符数量(当前字符长度减去光标位置)\n const rightLen = val.length - pointIndex\n // 光标左侧字符数量 (当光标前的字符是刚刚输入的,则为这个字符前的所有的字符,否则为光标前的所有赐福)\n const leftLen = inputChar === '' ? pointIndex : pointIndex - 1\n\n const leftVal = model.value.slice(0, leftLen)\n const rightVal = rightLen === 0 ? '' : model.value.slice(-rightLen)\n\n model.value = leftVal + inputChar + rightVal\n\n nextTick(() => {\n target.selectionStart = pointIndex\n target.selectionEnd = pointIndex\n })\n}\n\nconst handleClear = (): void => {\n model.value = ''\n}\n\nconst pwdVisible = shallowRef(false)\n\nconst passwordText = computed<string | undefined>(() => {\n if (pwdVisible.value) return model.value\n return model.value ? passwordChar.repeat(model.value.length) : ''\n})\n\nconst toggleVisible = () => {\n pwdVisible.value = !pwdVisible.value\n}\n</script>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.vue"],"sourcesContent":["<template>\n <label :class=\"classList\">\n <!-- radio框 -->\n <section :class=\"cls.e('button')\">\n <input\n type=\"radio\"\n :class=\"cls.e('native')\"\n :value=\"value\"\n v-model=\"model\"\n :disabled=\"disabled\"\n hidden\n />\n\n <transition name=\"zoom-in\">\n <span :class=\"cls.e('inner')\" v-if=\"radioChecked\"></span>\n </transition>\n </section>\n\n <span :class=\"cls.e('label')\">\n <slot>{{ label }}</slot>\n </span>\n </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { RadioProps, RadioEmits } from '../../types'\n\ndefineOptions({ name: 'Radio' })\n\nconst model = defineModel<any>()\n\nconst props = withDefaults(defineProps<RadioProps>(), { disabled: undefined })\n\ndefineEmits<RadioEmits>()\n\nconst cls = bem('radio')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false\n})\n\nconst radioChecked = computed(() => model.value === props.value)\n\nconst classList = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('checked', radioChecked.value)\n ]\n})\n</script>\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.vue"],"sourcesContent":["<template>\n <label :class=\"classList\">\n <!-- radio框 -->\n <section :class=\"cls.e('button')\">\n <input\n type=\"radio\"\n :class=\"cls.e('native')\"\n :value=\"value\"\n v-model=\"model\"\n :disabled=\"disabled\"\n hidden\n />\n\n <transition name=\"zoom-in\">\n <span :class=\"cls.e('inner')\" v-if=\"radioChecked\"></span>\n </transition>\n </section>\n\n <span :class=\"cls.e('label')\">\n <slot>{{ label }}</slot>\n </span>\n </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { RadioProps, RadioEmits } from '../../types'\n\ndefineOptions({ name: 'Radio' })\n\nconst model = defineModel<any>()\n\nconst props = withDefaults(defineProps<RadioProps>(), { disabled: undefined })\n\ndefineEmits<RadioEmits>()\n\nconst cls = bem('radio')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false\n})\n\nconst radioChecked = computed(() => model.value === props.value)\n\nconst classList = computed(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', disabled.value),\n bem.is('checked', radioChecked.value)\n ]\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,MAAM,QAAQ,SAAgB,SAAA,YAAC;EAE/B,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,OAAO;EAEvB,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,GAAG;GACxE,MAAM;GACN,UAAU;EACZ,CAAC;EAED,MAAM,eAAe,eAAe,MAAM,UAAU,MAAM,KAAK;EAE/D,MAAM,YAAY,eAAe;GAC/B,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,KAAK;IAChB,IAAI,GAAG,YAAY,SAAS,KAAK;IACjC,IAAI,GAAG,WAAW,aAAa,KAAK;GACtC;EACF,CAAC;;uBAzDC,mBAoBQ,SAAA,EApBA,OAAK,eAAE,UAAA,KAAS,EAAA,GAAA;IACtB,mBAAA,UAAA;IACA,mBAaU,WAAA,EAbA,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,QAAA,CAAA,EAAA,GAAA,CAAA,eACpB,mBAOE,SAAA;KANA,MAAK;KACJ,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,QAAA,CAAA;KACZ,OAAO,QAAA;kEACC,MAAK,QAAA;KACb,UAAU,MAAA,QAAA;KACX,QAAA;6CAFS,MAAA,KAAK,CAAA,CAAA,GAKhB,YAEa,YAAA,EAFD,MAAK,UAAS,GAAA;4BACiC,CAArB,aAAA,SAAA,UAAA,GAApC,mBAAyD,QAAA;;MAAlD,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,OAAA,CAAA;;;;IAIvB,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,OAAA,CAAA,EAAA,GAAA,CACjB,WAAwB,KAAA,QAAA,WAAA,CAAA,SAAA,CAAA,gBAAA,gBAAf,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.js","names":[],"sources":["../../../src/components/radio-group/radio-group.vue"],"sourcesContent":["<template>\n <div :class=\"[cls.b, bem.is('block', block), cls.m(size)]\" v-if=\"!readonly\">\n <u-radio\n v-for=\"item of items\"\n :key=\"item[valueKey]\"\n :value=\"item[valueKey]\"\n :model-value=\"model\"\n @update:model-value=\"handleUpdate($event, item)\"\n :disabled=\"disabledItem?.(item) || disabled\"\n :size=\"size\"\n >\n {{ item[labelKey] }}\n </u-radio>\n </div>\n\n <template v-else>\n {{ items.find((item) => item[valueKey] === model)?.[labelKey] || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\n\nimport type { RadioGroupProps, RadioGroupEmits } from '../../types'\nimport URadio from '../radio/radio.vue'\n\ndefineOptions({ name: 'RadioGroup' })\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n labelKey: 'label',\n valueKey: 'value',\n disabled: undefined,\n readonly: undefined\n})\n\nconst model = defineModel<any>()\n\nconst emit = defineEmits<RadioGroupEmits>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst cls = bem('radio-group')\n\nconst handleUpdate = (value: any, item: Record<string, any>) => {\n model.value = value\n emit('change', item)\n}\n</script>\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio-group.js","names":[],"sources":["../../../src/components/radio-group/radio-group.vue"],"sourcesContent":["<template>\n <div :class=\"[cls.b, bem.is('block', block), cls.m(size)]\" v-if=\"!readonly\">\n <u-radio\n v-for=\"item of items\"\n :key=\"item[valueKey]\"\n :value=\"item[valueKey]\"\n :model-value=\"model\"\n @update:model-value=\"handleUpdate($event, item)\"\n :disabled=\"disabledItem?.(item) || disabled\"\n :size=\"size\"\n >\n {{ item[labelKey] }}\n </u-radio>\n </div>\n\n <template v-else>\n {{ items.find((item) => item[valueKey] === model)?.[labelKey] || FORM_EMPTY_CONTENT }}\n </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\n\nimport type { RadioGroupProps, RadioGroupEmits } from '../../types'\nimport URadio from '../radio/radio.vue'\n\ndefineOptions({ name: 'RadioGroup' })\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n labelKey: 'label',\n valueKey: 'value',\n disabled: undefined,\n readonly: undefined\n})\n\nconst model = defineModel<any>()\n\nconst emit = defineEmits<RadioGroupEmits>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n size: 'default',\n disabled: false,\n readonly: false\n})\n\nconst cls = bem('radio-group')\n\nconst handleUpdate = (value: any, item: Record<string, any>) => {\n model.value = value\n emit('change', item)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ;EAOd,MAAM,QAAQ,SAAgB,SAAA,YAAC;EAE/B,MAAM,OAAO;EAEb,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,GAAG;GAClF,MAAM;GACN,UAAU;GACV,UAAU;EACZ,CAAC;EAED,MAAM,MAAM,IAAI,aAAa;EAE7B,MAAM,gBAAgB,OAAY,SAA8B;GAC9D,MAAM,QAAQ;GACd,KAAK,UAAU,IAAI;EACrB;;WArDoE,MAAA,QAAA,KAAA,UAAA,GAAlE,mBAYM,OAAA;;IAZA,OAAK,eAAA;KAAG,MAAA,GAAA,EAAI;KAAG,MAAA,GAAA,EAAI,GAAE,SAAU,QAAA,KAAK;KAAG,MAAA,GAAA,EAAI,EAAE,MAAA,IAAA,CAAI;IAAA,CAAA;yBACrD,mBAUU,UAAA,MAAA,WATO,QAAA,QAAR,SAAI;wBADb,YAUU,aAAA;KARP,KAAK,KAAK,QAAA;KACV,OAAO,KAAK,QAAA;KACZ,eAAa,MAAA;KACb,wBAAkB,WAAE,aAAa,QAAQ,IAAI;KAC7C,UAAU,QAAA,eAAe,IAAI,KAAK,MAAA,QAAA;KAClC,MAAM,MAAA,IAAA;;4BAEa,CAAA,gBAAA,gBAAjB,KAAK,QAAA,SAAQ,GAAA,CAAA,CAAA,CAAA;;;;;;;;;mCAIpB,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBADN,QAAA,MAAM,MAAM,SAAS,KAAK,QAAA,cAAc,MAAA,KAAK,IAAI,QAAA,aAAa,MAAA,kBAAA,CAAkB,GAAA,CAAA,CAAA,GAAA,EAAA"}
|
|
@@ -14,10 +14,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
14
14
|
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
|
|
15
15
|
onChange?: ((item: Record<string, any>) => any) | undefined;
|
|
16
16
|
}>, {
|
|
17
|
-
labelKey: string;
|
|
18
|
-
valueKey: string;
|
|
19
17
|
disabled: boolean;
|
|
20
18
|
readonly: boolean;
|
|
19
|
+
labelKey: string;
|
|
20
|
+
valueKey: string;
|
|
21
21
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
22
22
|
declare const _default: typeof __VLS_export;
|
|
23
23
|
//#endregion
|
|
@@ -61,6 +61,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
61
61
|
format: { default: "html" },
|
|
62
62
|
toolbar: { default: () => DEFAULT_TOOLBAR },
|
|
63
63
|
placeholder: { default: "" },
|
|
64
|
+
rules: {},
|
|
64
65
|
tips: {},
|
|
65
66
|
span: {},
|
|
66
67
|
label: {},
|
|
@@ -140,7 +141,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
140
141
|
isComposing = false;
|
|
141
142
|
});
|
|
142
143
|
}
|
|
143
|
-
});
|
|
144
|
+
}, { editor: editorInstance });
|
|
144
145
|
}));
|
|
145
146
|
const rootElement = editorInstance.getRootElement();
|
|
146
147
|
if (rootElement) {
|
|
@@ -178,7 +179,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
178
179
|
watch(model, (newVal) => {
|
|
179
180
|
if (!editor.value || isComposing) return;
|
|
180
181
|
const editorInstance = editor.value;
|
|
181
|
-
editorInstance.
|
|
182
|
+
editorInstance.read(() => {
|
|
182
183
|
let currentValue;
|
|
183
184
|
if (props.format === "json") currentValue = JSON.stringify(editorInstance.getEditorState().toJSON());
|
|
184
185
|
else currentValue = $generateHtmlFromNodes(editorInstance);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../src/components/rich-text-editor/rich-text-editor.vue"],"sourcesContent":["<template>\n <div :class=\"className\">\n <toolbar\n v-if=\"!isReadonly && toolbarItems.length > 0\"\n :editor=\"editor\"\n :toolbar=\"toolbarItems\"\n :disabled=\"isDisabled\"\n />\n <div :class=\"cls.e('content')\">\n <div\n ref=\"editorContainer\"\n :class=\"cls.e('editable')\"\n :contenteditable=\"!isDisabled && !isReadonly\"\n ></div>\n <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n {{ placeholder }}\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { ToolbarItem } from '../../types'\n\nconst LEXICAL_THEME = {\n paragraph: 'u-rte-paragraph',\n heading: {\n h1: 'u-rte-h1',\n h2: 'u-rte-h2',\n h3: 'u-rte-h3',\n h4: 'u-rte-h4',\n h5: 'u-rte-h5',\n h6: 'u-rte-h6'\n },\n text: {\n bold: 'u-rte-bold',\n italic: 'u-rte-italic',\n underline: 'u-rte-underline',\n strikethrough: 'u-rte-strikethrough'\n },\n list: {\n ul: 'u-rte-ul',\n ol: 'u-rte-ol',\n listitem: 'u-rte-li',\n nested: { listitem: 'u-rte-li--nested' }\n },\n quote: 'u-rte-blockquote',\n\n link: 'u-rte-link',\n image: 'u-rte-image'\n}\n\nconst DEFAULT_TOOLBAR: ToolbarItem[] = [\n 'undo',\n 'redo',\n '|',\n 'heading',\n '|',\n 'bold',\n 'italic',\n 'underline',\n 'strikethrough',\n '|',\n 'bullet-list',\n 'ordered-list',\n '|',\n 'blockquote',\n '|',\n 'link'\n]\n</script>\n\n<script lang=\"ts\" setup>\nimport { registerHistory, createEmptyHistoryState } from '@lexical/history'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport { LinkNode, AutoLinkNode } from '@lexical/link'\nimport { ListNode, ListItemNode, registerList } from '@lexical/list'\nimport { registerRichText } from '@lexical/rich-text'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { createEditor, $getRoot, $createParagraphNode, type LexicalEditor } from 'lexical'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { RichTextEditorProps } from '../../types'\nimport Toolbar from './toolbar.vue'\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n disabled: undefined,\n readonly: undefined,\n format: 'html',\n toolbar: () => DEFAULT_TOOLBAR,\n placeholder: ''\n})\n\nconst model = defineModel<string>()\n\nconst cls = bem('rich-text-editor')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst isDisabled = computed(() => !!disabled.value)\nconst isReadonly = computed(() => !!readonly.value)\n\nconst className = computed<string[]>(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', isDisabled.value),\n bem.is('readonly', isReadonly.value)\n ]\n})\n\nconst toolbarItems = computed<ToolbarItem[]>(() => {\n return props.toolbar ?? DEFAULT_TOOLBAR\n})\n\nconst editorContainer = useTemplateRef('editorContainer')\nconst editor = shallowRef<LexicalEditor | null>(null)\nconst showPlaceholder = ref(true)\nlet isComposing = false\nlet cleanupFns: (() => void)[] = []\n\nfunction initEditor() {\n if (!editorContainer.value) return\n\n const editorInstance = createEditor({\n namespace: 'URichTextEditor',\n theme: LEXICAL_THEME,\n nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode],\n editable: !isDisabled.value && !isReadonly.value,\n onError: (error: Error) => {\n console.error('Lexical error:', error)\n }\n })\n\n editorInstance.setRootElement(editorContainer.value)\n\n // Register plugins\n cleanupFns.push(registerRichText(editorInstance))\n cleanupFns.push(registerList(editorInstance))\n cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))\n\n // Set initial value\n if (model.value) {\n setEditorContent(editorInstance, model.value)\n }\n\n // Listen for content changes\n cleanupFns.push(\n editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const root = $getRoot()\n const textContent = root.getTextContent()\n showPlaceholder.value = textContent.trim().length === 0\n\n if (isComposing) return\n\n let value: string\n if (props.format === 'json') {\n value = JSON.stringify(editorState.toJSON())\n } else {\n value = $generateHtmlFromNodes(editorInstance)\n }\n\n // Avoid circular updates: only emit if content really changed\n if (value !== model.value) {\n isComposing = true\n model.value = value\n // Use microtask to reset after Vue processes the update\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n })\n )\n\n // Composing event listeners for IME\n const rootElement = editorInstance.getRootElement()\n if (rootElement) {\n const onCompositionStart = () => {\n isComposing = true\n }\n const onCompositionEnd = () => {\n isComposing = false\n }\n rootElement.addEventListener('compositionstart', onCompositionStart)\n rootElement.addEventListener('compositionend', onCompositionEnd)\n cleanupFns.push(() => {\n rootElement.removeEventListener('compositionstart', onCompositionStart)\n rootElement.removeEventListener('compositionend', onCompositionEnd)\n })\n }\n\n editor.value = editorInstance\n}\n\nfunction setEditorContent(editorInstance: LexicalEditor, value: string) {\n editorInstance.update(() => {\n const root = $getRoot()\n root.clear()\n\n if (props.format === 'json') {\n try {\n const parsedState = editorInstance.parseEditorState(value)\n editorInstance.setEditorState(parsedState)\n } catch {\n // If JSON parse fails, treat as empty\n root.append($createParagraphNode())\n }\n } else {\n // HTML format\n const parser = new DOMParser()\n const dom = parser.parseFromString(value, 'text/html')\n const nodes = $generateNodesFromDOM(editorInstance, dom)\n root.append(...nodes)\n }\n })\n}\n\n// Watch external model changes\nwatch(model, (newVal) => {\n if (!editor.value || isComposing) return\n\n const editorInstance = editor.value\n\n // Compare current content to avoid circular updates\n editorInstance.getEditorState().read(() => {\n let currentValue: string\n if (props.format === 'json') {\n currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())\n } else {\n currentValue = $generateHtmlFromNodes(editorInstance)\n }\n\n if (currentValue !== newVal) {\n isComposing = true\n setEditorContent(editorInstance, newVal ?? '')\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n})\n\n// Watch disabled/readonly changes\nwatch([isDisabled, isReadonly], () => {\n if (editor.value) {\n editor.value.setEditable(!isDisabled.value && !isReadonly.value)\n }\n})\n\nonMounted(() => {\n initEditor()\n})\n\nonBeforeUnmount(() => {\n cleanupFns.forEach((fn) => fn())\n cleanupFns = []\n editor.value = null\n})\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../src/components/rich-text-editor/rich-text-editor.vue"],"sourcesContent":["<template>\n <div :class=\"className\">\n <toolbar\n v-if=\"!isReadonly && toolbarItems.length > 0\"\n :editor=\"editor\"\n :toolbar=\"toolbarItems\"\n :disabled=\"isDisabled\"\n />\n <div :class=\"cls.e('content')\">\n <div\n ref=\"editorContainer\"\n :class=\"cls.e('editable')\"\n :contenteditable=\"!isDisabled && !isReadonly\"\n ></div>\n <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n {{ placeholder }}\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { ToolbarItem } from '../../types'\n\nconst LEXICAL_THEME = {\n paragraph: 'u-rte-paragraph',\n heading: {\n h1: 'u-rte-h1',\n h2: 'u-rte-h2',\n h3: 'u-rte-h3',\n h4: 'u-rte-h4',\n h5: 'u-rte-h5',\n h6: 'u-rte-h6'\n },\n text: {\n bold: 'u-rte-bold',\n italic: 'u-rte-italic',\n underline: 'u-rte-underline',\n strikethrough: 'u-rte-strikethrough'\n },\n list: {\n ul: 'u-rte-ul',\n ol: 'u-rte-ol',\n listitem: 'u-rte-li',\n nested: { listitem: 'u-rte-li--nested' }\n },\n quote: 'u-rte-blockquote',\n\n link: 'u-rte-link',\n image: 'u-rte-image'\n}\n\nconst DEFAULT_TOOLBAR: ToolbarItem[] = [\n 'undo',\n 'redo',\n '|',\n 'heading',\n '|',\n 'bold',\n 'italic',\n 'underline',\n 'strikethrough',\n '|',\n 'bullet-list',\n 'ordered-list',\n '|',\n 'blockquote',\n '|',\n 'link'\n]\n</script>\n\n<script lang=\"ts\" setup>\nimport { registerHistory, createEmptyHistoryState } from '@lexical/history'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport { LinkNode, AutoLinkNode } from '@lexical/link'\nimport { ListNode, ListItemNode, registerList } from '@lexical/list'\nimport { registerRichText } from '@lexical/rich-text'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { createEditor, $getRoot, $createParagraphNode, type LexicalEditor } from 'lexical'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { RichTextEditorProps } from '../../types'\nimport Toolbar from './toolbar.vue'\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n disabled: undefined,\n readonly: undefined,\n format: 'html',\n toolbar: () => DEFAULT_TOOLBAR,\n placeholder: ''\n})\n\nconst model = defineModel<string>()\n\nconst cls = bem('rich-text-editor')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst isDisabled = computed(() => !!disabled.value)\nconst isReadonly = computed(() => !!readonly.value)\n\nconst className = computed<string[]>(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', isDisabled.value),\n bem.is('readonly', isReadonly.value)\n ]\n})\n\nconst toolbarItems = computed<ToolbarItem[]>(() => {\n return props.toolbar ?? DEFAULT_TOOLBAR\n})\n\nconst editorContainer = useTemplateRef('editorContainer')\nconst editor = shallowRef<LexicalEditor | null>(null)\nconst showPlaceholder = ref(true)\nlet isComposing = false\nlet cleanupFns: (() => void)[] = []\n\nfunction initEditor() {\n if (!editorContainer.value) return\n\n const editorInstance = createEditor({\n namespace: 'URichTextEditor',\n theme: LEXICAL_THEME,\n nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode],\n editable: !isDisabled.value && !isReadonly.value,\n onError: (error: Error) => {\n console.error('Lexical error:', error)\n }\n })\n\n editorInstance.setRootElement(editorContainer.value)\n\n // Register plugins\n cleanupFns.push(registerRichText(editorInstance))\n cleanupFns.push(registerList(editorInstance))\n cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))\n\n // Set initial value\n if (model.value) {\n setEditorContent(editorInstance, model.value)\n }\n\n // Listen for content changes\n cleanupFns.push(\n editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(\n () => {\n const root = $getRoot()\n const textContent = root.getTextContent()\n showPlaceholder.value = textContent.trim().length === 0\n\n if (isComposing) return\n\n let value: string\n if (props.format === 'json') {\n value = JSON.stringify(editorState.toJSON())\n } else {\n value = $generateHtmlFromNodes(editorInstance)\n }\n\n // Avoid circular updates: only emit if content really changed\n if (value !== model.value) {\n isComposing = true\n model.value = value\n // Use microtask to reset after Vue processes the update\n queueMicrotask(() => {\n isComposing = false\n })\n }\n },\n { editor: editorInstance }\n )\n })\n )\n\n // Composing event listeners for IME\n const rootElement = editorInstance.getRootElement()\n if (rootElement) {\n const onCompositionStart = () => {\n isComposing = true\n }\n const onCompositionEnd = () => {\n isComposing = false\n }\n rootElement.addEventListener('compositionstart', onCompositionStart)\n rootElement.addEventListener('compositionend', onCompositionEnd)\n cleanupFns.push(() => {\n rootElement.removeEventListener('compositionstart', onCompositionStart)\n rootElement.removeEventListener('compositionend', onCompositionEnd)\n })\n }\n\n editor.value = editorInstance\n}\n\nfunction setEditorContent(editorInstance: LexicalEditor, value: string) {\n editorInstance.update(() => {\n const root = $getRoot()\n root.clear()\n\n if (props.format === 'json') {\n try {\n const parsedState = editorInstance.parseEditorState(value)\n editorInstance.setEditorState(parsedState)\n } catch {\n // If JSON parse fails, treat as empty\n root.append($createParagraphNode())\n }\n } else {\n // HTML format\n const parser = new DOMParser()\n const dom = parser.parseFromString(value, 'text/html')\n const nodes = $generateNodesFromDOM(editorInstance, dom)\n root.append(...nodes)\n }\n })\n}\n\n// Watch external model changes\nwatch(model, (newVal) => {\n if (!editor.value || isComposing) return\n\n const editorInstance = editor.value\n\n // Compare current content to avoid circular updates\n editorInstance.read(() => {\n let currentValue: string\n if (props.format === 'json') {\n currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())\n } else {\n currentValue = $generateHtmlFromNodes(editorInstance)\n }\n\n if (currentValue !== newVal) {\n isComposing = true\n setEditorContent(editorInstance, newVal ?? '')\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n})\n\n// Watch disabled/readonly changes\nwatch([isDisabled, isReadonly], () => {\n if (editor.value) {\n editor.value.setEditable(!isDisabled.value && !isReadonly.value)\n }\n})\n\nonMounted(() => {\n initEditor()\n})\n\nonBeforeUnmount(() => {\n cleanupFns.forEach((fn) => fn())\n cleanupFns = []\n editor.value = null\n})\n</script>\n"],"mappings":"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"}
|
|
@@ -41,7 +41,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
41
41
|
const selection = $getSelection();
|
|
42
42
|
if (!$isRangeSelection(selection)) return;
|
|
43
43
|
updateToolbarState(selection);
|
|
44
|
-
});
|
|
44
|
+
}, { editor: editorInstance });
|
|
45
45
|
});
|
|
46
46
|
}
|
|
47
47
|
function updateToolbarState(selection) {
|
|
@@ -137,15 +137,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
137
137
|
editorInstance.focus();
|
|
138
138
|
}
|
|
139
139
|
function toggleLink(editorInstance) {
|
|
140
|
-
|
|
140
|
+
let shouldRemoveLink = false;
|
|
141
|
+
editorInstance.read(() => {
|
|
141
142
|
const selection = $getSelection();
|
|
142
143
|
if (!$isRangeSelection(selection)) return;
|
|
143
|
-
|
|
144
|
-
else {
|
|
145
|
-
const url = prompt("请输入链接地址:", "https://");
|
|
146
|
-
if (url && url !== "https://") editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url);
|
|
147
|
-
}
|
|
144
|
+
shouldRemoveLink = $isLinkNode(selection.anchor.getNode().getParent());
|
|
148
145
|
});
|
|
146
|
+
if (shouldRemoveLink) {
|
|
147
|
+
editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null);
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
const url = prompt("请输入链接地址:", "https://");
|
|
151
|
+
if (url && url !== "https://") editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url);
|
|
149
152
|
}
|
|
150
153
|
function getTitle(item) {
|
|
151
154
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.js","names":[],"sources":["../../../src/components/rich-text-editor/toolbar.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('toolbar')\">\n <template v-for=\"(item, index) in toolbar\" :key=\"index\">\n <div v-if=\"item === '|'\" :class=\"cls.e('separator')\"></div>\n\n <div v-else-if=\"item === 'heading'\" :class=\"[cls.e('toolbar-dropdown')]\">\n <select\n :class=\"[cls.e('heading-select'), { 'is-disabled': disabled }]\"\n :value=\"activeHeading\"\n :disabled=\"disabled\"\n @change=\"onHeadingChange\"\n >\n <option value=\"paragraph\">正文</option>\n <option value=\"h1\">Heading 1</option>\n <option value=\"h2\">Heading 2</option>\n <option value=\"h3\">Heading 3</option>\n <option value=\"h4\">Heading 4</option>\n <option value=\"h5\">Heading 5</option>\n <option value=\"h6\">Heading 6</option>\n </select>\n </div>\n\n <button\n v-else\n type=\"button\"\n :class=\"[\n cls.e('toolbar-btn'),\n { 'is-active': isActive(item) },\n { 'is-disabled': disabled }\n ]\"\n :disabled=\"disabled\"\n :title=\"getTitle(item)\"\n @click=\"onToolbarAction(item)\"\n >\n <span :class=\"cls.e('toolbar-icon')\" v-html=\"getIcon(item)\"></span>\n </button>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode } from '@lexical/list'\nimport { $createHeadingNode, $isHeadingNode, type HeadingTagType } from '@lexical/rich-text'\nimport { $isQuoteNode, $createQuoteNode } from '@lexical/rich-text'\nimport { $setBlocksType } from '@lexical/selection'\nimport { $getNearestNodeOfType } from '@lexical/utils'\nimport { bem } from '@veltra/utils'\nimport {\n $getSelection,\n $isRangeSelection,\n FORMAT_TEXT_COMMAND,\n UNDO_COMMAND,\n REDO_COMMAND,\n type LexicalEditor,\n $createParagraphNode,\n type RangeSelection\n} from 'lexical'\nimport { ref, onBeforeUnmount, watch } from 'vue'\n\nimport type { ToolbarItem } from '../../types'\n\nconst props = defineProps<{\n editor: LexicalEditor | null\n toolbar: ToolbarItem[]\n disabled: boolean\n}>()\n\nconst cls = bem('rich-text-editor')\n\n// Active states\nconst isBold = ref(false)\nconst isItalic = ref(false)\nconst isUnderline = ref(false)\nconst isStrikethrough = ref(false)\nconst isLink = ref(false)\nconst isBulletList = ref(false)\nconst isOrderedList = ref(false)\nconst isBlockquote = ref(false)\nconst activeHeading = ref('paragraph')\n\nlet cleanupListener: (() => void) | null = null\n\nfunction setupListener(editorInstance: LexicalEditor) {\n cleanupListener?.()\n cleanupListener = editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n updateToolbarState(selection)\n })\n })\n}\n\nfunction updateToolbarState(selection: RangeSelection) {\n isBold.value = selection.hasFormat('bold')\n isItalic.value = selection.hasFormat('italic')\n isUnderline.value = selection.hasFormat('underline')\n isStrikethrough.value = selection.hasFormat('strikethrough')\n\n // Check block type\n const anchorNode = selection.anchor.getNode()\n let element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow()\n\n if ($isHeadingNode(element)) {\n activeHeading.value = (element as any).getTag()\n } else {\n activeHeading.value = 'paragraph'\n }\n\n // Check list\n const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n if (parentList) {\n const listType = (parentList as any).getListType()\n isBulletList.value = listType === 'bullet'\n isOrderedList.value = listType === 'number'\n } else {\n isBulletList.value = false\n isOrderedList.value = false\n }\n\n // Check blockquote\n isBlockquote.value = $isQuoteNode(element)\n\n // Check link\n const parent = anchorNode.getParent()\n isLink.value = $isLinkNode(parent)\n}\n\nwatch(\n () => props.editor,\n (editorInstance) => {\n if (editorInstance) {\n setupListener(editorInstance)\n }\n },\n { immediate: true }\n)\n\nfunction isActive(item: ToolbarItem): boolean {\n switch (item) {\n case 'bold':\n return isBold.value\n case 'italic':\n return isItalic.value\n case 'underline':\n return isUnderline.value\n case 'strikethrough':\n return isStrikethrough.value\n case 'bullet-list':\n return isBulletList.value\n case 'ordered-list':\n return isOrderedList.value\n case 'blockquote':\n return isBlockquote.value\n case 'link':\n return isLink.value\n default:\n return false\n }\n}\n\nfunction onToolbarAction(item: ToolbarItem) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n switch (item) {\n case 'bold':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n break\n case 'italic':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n break\n case 'underline':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')\n break\n case 'strikethrough':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')\n break\n case 'code':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')\n break\n case 'bullet-list':\n editorInstance.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n break\n case 'ordered-list':\n editorInstance.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)\n break\n case 'blockquote':\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (isBlockquote.value) {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createQuoteNode())\n }\n }\n })\n break\n case 'link':\n toggleLink(editorInstance)\n break\n case 'undo':\n editorInstance.dispatchCommand(UNDO_COMMAND, undefined)\n break\n case 'redo':\n editorInstance.dispatchCommand(REDO_COMMAND, undefined)\n break\n }\n\n // Keep focus on editor\n editorInstance.focus()\n}\n\nfunction onHeadingChange(event: Event) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n const value = (event.target as HTMLSelectElement).value\n\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (value === 'paragraph') {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createHeadingNode(value as HeadingTagType))\n }\n }\n })\n\n editorInstance.focus()\n}\n\nfunction toggleLink(editorInstance: LexicalEditor) {\n editorInstance.getEditorState().read(() => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n const anchorNode = selection.anchor.getNode()\n const parent = anchorNode.getParent()\n\n if ($isLinkNode(parent)) {\n // Remove link\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n } else {\n // Insert link with prompt\n const url = prompt('请输入链接地址:', 'https://')\n if (url && url !== 'https://') {\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)\n }\n }\n })\n}\n\nfunction getTitle(item: ToolbarItem): string {\n const titles: Record<string, string> = {\n bold: '加粗',\n italic: '斜体',\n underline: '下划线',\n strikethrough: '删除线',\n code: '行内代码',\n 'bullet-list': '无序列表',\n 'ordered-list': '有序列表',\n blockquote: '引用',\n 'code-block': '代码块',\n link: '链接',\n undo: '撤销',\n redo: '重做'\n }\n return titles[item] ?? item\n}\n\nfunction getIcon(item: ToolbarItem): string {\n const icons: Record<string, string> = {\n bold: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/><path d=\"M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/></svg>',\n italic:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"/><line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"/><line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"/></svg>',\n underline:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3\"/><line x1=\"4\" y1=\"21\" x2=\"20\" y2=\"21\"/></svg>',\n strikethrough:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 4H9a3 3 0 0 0-2.83 4\"/><path d=\"M14 12a4 4 0 0 1 0 8H6\"/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/></svg>',\n code: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/></svg>',\n 'bullet-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"/><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"/><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"/><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"/></svg>',\n 'ordered-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"10\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"10\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"10\" y1=\"18\" x2=\"21\" y2=\"18\"/><path d=\"M4 6h1v4\"/><path d=\"M4 10h2\"/><path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\"/></svg>',\n blockquote:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z\"/><path d=\"M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3z\"/></svg>',\n 'code-block':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"2\"/><path d=\"m8 10-3 2 3 2\"/><path d=\"m16 10 3 2-3 2\"/><path d=\"m13 7-2 10\"/></svg>',\n link: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/></svg>',\n undo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/></svg>',\n redo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\"/></svg>'\n }\n return icons[item] ?? ''\n}\n\nonBeforeUnmount(() => {\n cleanupListener?.()\n cleanupListener = null\n})\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"toolbar.js","names":[],"sources":["../../../src/components/rich-text-editor/toolbar.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('toolbar')\">\n <template v-for=\"(item, index) in toolbar\" :key=\"index\">\n <div v-if=\"item === '|'\" :class=\"cls.e('separator')\"></div>\n\n <div v-else-if=\"item === 'heading'\" :class=\"[cls.e('toolbar-dropdown')]\">\n <select\n :class=\"[cls.e('heading-select'), { 'is-disabled': disabled }]\"\n :value=\"activeHeading\"\n :disabled=\"disabled\"\n @change=\"onHeadingChange\"\n >\n <option value=\"paragraph\">正文</option>\n <option value=\"h1\">Heading 1</option>\n <option value=\"h2\">Heading 2</option>\n <option value=\"h3\">Heading 3</option>\n <option value=\"h4\">Heading 4</option>\n <option value=\"h5\">Heading 5</option>\n <option value=\"h6\">Heading 6</option>\n </select>\n </div>\n\n <button\n v-else\n type=\"button\"\n :class=\"[\n cls.e('toolbar-btn'),\n { 'is-active': isActive(item) },\n { 'is-disabled': disabled }\n ]\"\n :disabled=\"disabled\"\n :title=\"getTitle(item)\"\n @click=\"onToolbarAction(item)\"\n >\n <span :class=\"cls.e('toolbar-icon')\" v-html=\"getIcon(item)\"></span>\n </button>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode } from '@lexical/list'\nimport { $createHeadingNode, $isHeadingNode, type HeadingTagType } from '@lexical/rich-text'\nimport { $isQuoteNode, $createQuoteNode } from '@lexical/rich-text'\nimport { $setBlocksType } from '@lexical/selection'\nimport { $getNearestNodeOfType } from '@lexical/utils'\nimport { bem } from '@veltra/utils'\nimport {\n $getSelection,\n $isRangeSelection,\n FORMAT_TEXT_COMMAND,\n UNDO_COMMAND,\n REDO_COMMAND,\n type LexicalEditor,\n $createParagraphNode,\n type RangeSelection\n} from 'lexical'\nimport { ref, onBeforeUnmount, watch } from 'vue'\n\nimport type { ToolbarItem } from '../../types'\n\nconst props = defineProps<{\n editor: LexicalEditor | null\n toolbar: ToolbarItem[]\n disabled: boolean\n}>()\n\nconst cls = bem('rich-text-editor')\n\n// Active states\nconst isBold = ref(false)\nconst isItalic = ref(false)\nconst isUnderline = ref(false)\nconst isStrikethrough = ref(false)\nconst isLink = ref(false)\nconst isBulletList = ref(false)\nconst isOrderedList = ref(false)\nconst isBlockquote = ref(false)\nconst activeHeading = ref('paragraph')\n\nlet cleanupListener: (() => void) | null = null\n\nfunction setupListener(editorInstance: LexicalEditor) {\n cleanupListener?.()\n cleanupListener = editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(\n () => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n updateToolbarState(selection)\n },\n { editor: editorInstance }\n )\n })\n}\n\nfunction updateToolbarState(selection: RangeSelection) {\n isBold.value = selection.hasFormat('bold')\n isItalic.value = selection.hasFormat('italic')\n isUnderline.value = selection.hasFormat('underline')\n isStrikethrough.value = selection.hasFormat('strikethrough')\n\n // Check block type\n const anchorNode = selection.anchor.getNode()\n let element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow()\n\n if ($isHeadingNode(element)) {\n activeHeading.value = (element as any).getTag()\n } else {\n activeHeading.value = 'paragraph'\n }\n\n // Check list\n const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n if (parentList) {\n const listType = (parentList as any).getListType()\n isBulletList.value = listType === 'bullet'\n isOrderedList.value = listType === 'number'\n } else {\n isBulletList.value = false\n isOrderedList.value = false\n }\n\n // Check blockquote\n isBlockquote.value = $isQuoteNode(element)\n\n // Check link\n const parent = anchorNode.getParent()\n isLink.value = $isLinkNode(parent)\n}\n\nwatch(\n () => props.editor,\n (editorInstance) => {\n if (editorInstance) {\n setupListener(editorInstance)\n }\n },\n { immediate: true }\n)\n\nfunction isActive(item: ToolbarItem): boolean {\n switch (item) {\n case 'bold':\n return isBold.value\n case 'italic':\n return isItalic.value\n case 'underline':\n return isUnderline.value\n case 'strikethrough':\n return isStrikethrough.value\n case 'bullet-list':\n return isBulletList.value\n case 'ordered-list':\n return isOrderedList.value\n case 'blockquote':\n return isBlockquote.value\n case 'link':\n return isLink.value\n default:\n return false\n }\n}\n\nfunction onToolbarAction(item: ToolbarItem) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n switch (item) {\n case 'bold':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n break\n case 'italic':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n break\n case 'underline':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')\n break\n case 'strikethrough':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')\n break\n case 'code':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')\n break\n case 'bullet-list':\n editorInstance.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n break\n case 'ordered-list':\n editorInstance.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)\n break\n case 'blockquote':\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (isBlockquote.value) {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createQuoteNode())\n }\n }\n })\n break\n case 'link':\n toggleLink(editorInstance)\n break\n case 'undo':\n editorInstance.dispatchCommand(UNDO_COMMAND, undefined)\n break\n case 'redo':\n editorInstance.dispatchCommand(REDO_COMMAND, undefined)\n break\n }\n\n // Keep focus on editor\n editorInstance.focus()\n}\n\nfunction onHeadingChange(event: Event) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n const value = (event.target as HTMLSelectElement).value\n\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (value === 'paragraph') {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createHeadingNode(value as HeadingTagType))\n }\n }\n })\n\n editorInstance.focus()\n}\n\nfunction toggleLink(editorInstance: LexicalEditor) {\n let shouldRemoveLink = false\n\n editorInstance.read(() => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n const parent = selection.anchor.getNode().getParent()\n shouldRemoveLink = $isLinkNode(parent)\n })\n\n if (shouldRemoveLink) {\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n return\n }\n\n const url = prompt('请输入链接地址:', 'https://')\n if (url && url !== 'https://') {\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)\n }\n}\n\nfunction getTitle(item: ToolbarItem): string {\n const titles: Record<string, string> = {\n bold: '加粗',\n italic: '斜体',\n underline: '下划线',\n strikethrough: '删除线',\n code: '行内代码',\n 'bullet-list': '无序列表',\n 'ordered-list': '有序列表',\n blockquote: '引用',\n 'code-block': '代码块',\n link: '链接',\n undo: '撤销',\n redo: '重做'\n }\n return titles[item] ?? item\n}\n\nfunction getIcon(item: ToolbarItem): string {\n const icons: Record<string, string> = {\n bold: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/><path d=\"M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/></svg>',\n italic:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"/><line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"/><line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"/></svg>',\n underline:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3\"/><line x1=\"4\" y1=\"21\" x2=\"20\" y2=\"21\"/></svg>',\n strikethrough:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 4H9a3 3 0 0 0-2.83 4\"/><path d=\"M14 12a4 4 0 0 1 0 8H6\"/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/></svg>',\n code: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/></svg>',\n 'bullet-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"/><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"/><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"/><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"/></svg>',\n 'ordered-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"10\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"10\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"10\" y1=\"18\" x2=\"21\" y2=\"18\"/><path d=\"M4 6h1v4\"/><path d=\"M4 10h2\"/><path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\"/></svg>',\n blockquote:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z\"/><path d=\"M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3z\"/></svg>',\n 'code-block':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"2\"/><path d=\"m8 10-3 2 3 2\"/><path d=\"m16 10 3 2-3 2\"/><path d=\"m13 7-2 10\"/></svg>',\n link: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/></svg>',\n undo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/></svg>',\n redo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\"/></svg>'\n }\n return icons[item] ?? ''\n}\n\nonBeforeUnmount(() => {\n cleanupListener?.()\n cleanupListener = null\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EA8DA,MAAM,QAAQ;EAMd,MAAM,MAAM,IAAI,kBAAkB;EAGlC,MAAM,SAAS,IAAI,KAAK;EACxB,MAAM,WAAW,IAAI,KAAK;EAC1B,MAAM,cAAc,IAAI,KAAK;EAC7B,MAAM,kBAAkB,IAAI,KAAK;EACjC,MAAM,SAAS,IAAI,KAAK;EACxB,MAAM,eAAe,IAAI,KAAK;EAC9B,MAAM,gBAAgB,IAAI,KAAK;EAC/B,MAAM,eAAe,IAAI,KAAK;EAC9B,MAAM,gBAAgB,IAAI,WAAW;EAErC,IAAI,kBAAuC;EAE3C,SAAS,cAAc,gBAA+B;GACpD,kBAAkB;GAClB,kBAAkB,eAAe,wBAAwB,EAAE,kBAAkB;IAC3E,YAAY,WACJ;KACJ,MAAM,YAAY,cAAc;KAChC,IAAI,CAAC,kBAAkB,SAAS,GAAG;KAEnC,mBAAmB,SAAS;IAC9B,GACA,EAAE,QAAQ,eAAe,CAC3B;GACF,CAAC;EACH;EAEA,SAAS,mBAAmB,WAA2B;GACrD,OAAO,QAAQ,UAAU,UAAU,MAAM;GACzC,SAAS,QAAQ,UAAU,UAAU,QAAQ;GAC7C,YAAY,QAAQ,UAAU,UAAU,WAAW;GACnD,gBAAgB,QAAQ,UAAU,UAAU,eAAe;GAG3D,MAAM,aAAa,UAAU,OAAO,QAAQ;GAC5C,IAAI,UAAU,WAAW,OAAO,MAAM,SAAS,aAAa,WAAW,0BAA0B;GAEjG,IAAI,eAAe,OAAO,GACxB,cAAc,QAAS,QAAgB,OAAO;QAE9C,cAAc,QAAQ;GAIxB,MAAM,aAAa,sBAAsB,YAAY,QAAQ;GAC7D,IAAI,YAAY;IACd,MAAM,WAAY,WAAmB,YAAY;IACjD,aAAa,QAAQ,aAAa;IAClC,cAAc,QAAQ,aAAa;GACrC,OAAO;IACL,aAAa,QAAQ;IACrB,cAAc,QAAQ;GACxB;GAGA,aAAa,QAAQ,aAAa,OAAO;GAIzC,OAAO,QAAQ,YADA,WAAW,UACC,CAAM;EACnC;EAEA,YACQ,MAAM,SACX,mBAAmB;GAClB,IAAI,gBACF,cAAc,cAAc;EAEhC,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,SAAS,SAAS,MAA4B;GAC5C,QAAQ,MAAR;IACE,KAAK,QACH,OAAO,OAAO;IAChB,KAAK,UACH,OAAO,SAAS;IAClB,KAAK,aACH,OAAO,YAAY;IACrB,KAAK,iBACH,OAAO,gBAAgB;IACzB,KAAK,eACH,OAAO,aAAa;IACtB,KAAK,gBACH,OAAO,cAAc;IACvB,KAAK,cACH,OAAO,aAAa;IACtB,KAAK,QACH,OAAO,OAAO;IAChB,SACE,OAAO;GACX;EACF;EAEA,SAAS,gBAAgB,MAAmB;GAC1C,MAAM,iBAAiB,MAAM;GAC7B,IAAI,CAAC,kBAAkB,MAAM,UAAU;GAEvC,QAAQ,MAAR;IACE,KAAK;KACH,eAAe,gBAAgB,qBAAqB,MAAM;KAC1D;IACF,KAAK;KACH,eAAe,gBAAgB,qBAAqB,QAAQ;KAC5D;IACF,KAAK;KACH,eAAe,gBAAgB,qBAAqB,WAAW;KAC/D;IACF,KAAK;KACH,eAAe,gBAAgB,qBAAqB,eAAe;KACnE;IACF,KAAK;KACH,eAAe,gBAAgB,qBAAqB,MAAM;KAC1D;IACF,KAAK;KACH,eAAe,gBAAgB,+BAA+B,KAAA,CAAS;KACvE;IACF,KAAK;KACH,eAAe,gBAAgB,6BAA6B,KAAA,CAAS;KACrE;IACF,KAAK;KACH,eAAe,aAAa;MAC1B,MAAM,YAAY,cAAc;MAChC,IAAI,kBAAkB,SAAS,GAC7B,IAAI,aAAa,OACf,eAAe,iBAAiB,qBAAqB,CAAC;WAEtD,eAAe,iBAAiB,iBAAiB,CAAC;KAGxD,CAAC;KACD;IACF,KAAK;KACH,WAAW,cAAc;KACzB;IACF,KAAK;KACH,eAAe,gBAAgB,cAAc,KAAA,CAAS;KACtD;IACF,KAAK;KACH,eAAe,gBAAgB,cAAc,KAAA,CAAS;KACtD;GACJ;GAGA,eAAe,MAAM;EACvB;EAEA,SAAS,gBAAgB,OAAc;GACrC,MAAM,iBAAiB,MAAM;GAC7B,IAAI,CAAC,kBAAkB,MAAM,UAAU;GAEvC,MAAM,QAAS,MAAM,OAA6B;GAElD,eAAe,aAAa;IAC1B,MAAM,YAAY,cAAc;IAChC,IAAI,kBAAkB,SAAS,GAC7B,IAAI,UAAU,aACZ,eAAe,iBAAiB,qBAAqB,CAAC;SAEtD,eAAe,iBAAiB,mBAAmB,KAAuB,CAAC;GAGjF,CAAC;GAED,eAAe,MAAM;EACvB;EAEA,SAAS,WAAW,gBAA+B;GACjD,IAAI,mBAAmB;GAEvB,eAAe,WAAW;IACxB,MAAM,YAAY,cAAc;IAChC,IAAI,CAAC,kBAAkB,SAAS,GAAG;IAGnC,mBAAmB,YADJ,UAAU,OAAO,QAAQ,EAAE,UACX,CAAM;GACvC,CAAC;GAED,IAAI,kBAAkB;IACpB,eAAe,gBAAgB,qBAAqB,IAAI;IACxD;GACF;GAEA,MAAM,MAAM,OAAO,YAAY,UAAU;GACzC,IAAI,OAAO,QAAQ,YACjB,eAAe,gBAAgB,qBAAqB,GAAG;EAE3D;EAEA,SAAS,SAAS,MAA2B;GAe3C,OAAO;IAbL,MAAM;IACN,QAAQ;IACR,WAAW;IACX,eAAe;IACf,MAAM;IACN,eAAe;IACf,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,MAAM;IACN,MAAM;IACN,MAAM;GAED,EAAO,SAAS;EACzB;EAEA,SAAS,QAAQ,MAA2B;GAsB1C,OAAO;IApBL,MAAM;IACN,QACE;IACF,WACE;IACF,eACE;IACF,MAAM;IACN,eACE;IACF,gBACE;IACF,YACE;IACF,cACE;IACF,MAAM;IACN,MAAM;IACN,MAAM;GAED,EAAM,SAAS;EACxB;EAEA,sBAAsB;GACpB,kBAAkB;GAClB,kBAAkB;EACpB,CAAC;;uBAlTC,mBAoCM,OAAA,EApCA,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,SAAA,CAAA,EAAA,GAAA,EAAA,UAAA,IAAA,GAChB,mBAkCW,UAAA,MAAA,WAlCuB,QAAA,UAAhB,MAAM,UAAK;4DAAoB,MAAK,GAAA,CACzC,SAAI,OAAA,UAAA,GAAf,mBAA2D,OAAA;;KAAjC,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,WAAA,CAAA;mBAEtB,SAAI,aAAA,UAAA,GAApB,mBAeM,OAAA;;KAf+B,OAAK,eAAA,CAAG,MAAA,GAAA,EAAI,EAAC,kBAAA,CAAA,CAAA;QAChD,mBAaS,UAAA;KAZN,OAAK,eAAA,CAAG,MAAA,GAAA,EAAI,EAAC,gBAAA,GAAA,EAAA,eAAqC,QAAA,SAAQ,CAAA,CAAA;KAC1D,OAAO,cAAA;KACP,UAAU,QAAA;KACV,UAAQ;0XAYb,mBAaS,UAAA;;KAXP,MAAK;KACJ,OAAK,eAAA;MAAc,MAAA,GAAA,EAAI,EAAC,aAAA;qBAA0C,SAAS,IAAI,EAAA;uBAAgC,QAAA,SAAQ;;KAKvH,UAAU,QAAA;KACV,OAAO,SAAS,IAAI;KACpB,UAAK,WAAE,gBAAgB,IAAI;QAE5B,mBAAmE,QAAA;KAA5D,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,cAAA,CAAA;KAAkB,WAAQ,QAAQ,IAAI"}
|
|
@@ -39,6 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
39
39
|
width: {},
|
|
40
40
|
creatable: { type: Boolean },
|
|
41
41
|
grid: {},
|
|
42
|
+
rules: {},
|
|
42
43
|
tips: {},
|
|
43
44
|
span: {},
|
|
44
45
|
label: {},
|
|
@@ -97,13 +98,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
97
98
|
watch([() => props.modelValue, options], ([modelValue, options]) => {
|
|
98
99
|
if (userSelecting) return;
|
|
99
100
|
if (!options?.length) return;
|
|
100
|
-
|
|
101
|
-
|
|
101
|
+
const { valueKey, labelKey } = props;
|
|
102
|
+
if (modelValue !== void 0 && modelValue !== null && modelValue !== "") {
|
|
102
103
|
currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue);
|
|
103
|
-
selected.value = options[currentIndex.value];
|
|
104
|
+
selected.value = currentIndex.value >= 0 ? options[currentIndex.value] : void 0;
|
|
105
|
+
label.value = selected.value ? o(selected.value).get(labelKey) : void 0;
|
|
104
106
|
} else {
|
|
105
107
|
currentIndex.value = -1;
|
|
106
108
|
selected.value = void 0;
|
|
109
|
+
label.value = void 0;
|
|
107
110
|
}
|
|
108
111
|
}, { immediate: true });
|
|
109
112
|
const baseVirtualEnabled = computed(() => options.value.length > 80);
|