@jari-ace/element-plus-component 0.2.0 → 0.2.2

package/packages/components/inputNumber/JaInputNumber.vue

@@ -1,98 +1,98 @@
-<script setup lang="ts">
-import {inject, ref, watch, computed} from 'vue'
-import {ElInputNumber} from 'element-plus'
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import {getValue, setValue} from "../../utils/objectUtils";
-
-const props = withDefaults(defineProps<{
-    min?: number
-    max?: number
-    step?: number
-    stepStrictly?: boolean
-    precision?: number
-    size?: 'large' | 'default' | 'small'
-    readonly?: boolean
-    disabled?: boolean
-    controls?: boolean
-    controlsPosition?: '' | 'right'
-    name?: string
-    label?: string
-    ariaLabel?: string
-    placeholder?: string
-    id?: string
-    valueOnClear?: number | null | 'min' | 'max'
-    validateEvent?: boolean
-}>(), {
-    min: -Infinity,
-    max: Infinity,
-    step: 1,
-    stepStrictly: false,
-    size: 'small',
-    readonly: false,
-    controls: true,
-    validateEvent: true
-})
-
-const model = inject('aceFormModel') as Record<string, any>
-const prop = inject('aceFormItemProp') as string
-const validator = inject('aceFormValidator') as ValidationInstance
-const size = computed<'large' | 'default' | 'small' | undefined>(() => {
-    return props.size ? props.size : inject("aceFormSize");
-});
-const input = ref<typeof ElInputNumber>()
-const emit = defineEmits<{
-    blur: [evt: Event]
-    focus: [evt: Event]
-    change: [value?: number]
-}>()
-type ModelType = number;
-
-function onChange(value?: number) {
-    validator.removeFieldError(prop)
-    setValue(model.formData, prop, mv.value)
-    emit('change', value)
-}
-
-const mv = ref(getValue(model.formData, prop) as ModelType);
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as ModelType
-}, {
-    deep: true
-})
-defineExpose({
-    focus() {
-        input?.value?.focus()
-    },
-    blur() {
-        input?.value?.blur()
-    },
-    elInputNumber: input
-})
-</script>
-
-<template>
-    <el-input-number :min="min"
-                     :max="max"
-                     :label="label"
-                     :disabled="disabled"
-                     :id="id"
-                     :aria-label="ariaLabel"
-                     :controls="controls"
-                     :controls-position="controlsPosition"
-                     v-model="mv"
-                     :name="name"
-                     :placeholder="placeholder"
-                     :precision="precision"
-                     :readonly="readonly"
-                     :size="size"
-                     :step="step"
-                     :step-strictly="stepStrictly"
-                     :value-on-clear="valueOnClear"
-                     :validate-event="validateEvent"
-                     @change="onChange"
-                     @blur="evt => $emit('blur', evt)"
-                     @focus="evt => $emit('focus', evt)">
-        <slot name="decrease-icon"></slot>
-        <slot name="increase-icon"></slot>
-    </el-input-number>
-</template>
+<script setup lang="ts">
+import {inject, ref, watch, computed} from 'vue'
+import {ElInputNumber} from 'element-plus'
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const props = withDefaults(defineProps<{
+    min?: number
+    max?: number
+    step?: number
+    stepStrictly?: boolean
+    precision?: number
+    size?: 'large' | 'default' | 'small'
+    readonly?: boolean
+    disabled?: boolean
+    controls?: boolean
+    controlsPosition?: '' | 'right'
+    name?: string
+    label?: string
+    ariaLabel?: string
+    placeholder?: string
+    id?: string
+    valueOnClear?: number | null | 'min' | 'max'
+    validateEvent?: boolean
+}>(), {
+    min: -Infinity,
+    max: Infinity,
+    step: 1,
+    stepStrictly: false,
+    size: 'small',
+    readonly: false,
+    controls: true,
+    validateEvent: true
+})
+
+const model = inject('aceFormModel') as Record<string, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const size = computed<'large' | 'default' | 'small' | undefined>(() => {
+    return props.size ? props.size : inject("aceFormSize");
+});
+const input = ref<typeof ElInputNumber>()
+const emit = defineEmits<{
+    blur: [evt: Event]
+    focus: [evt: Event]
+    change: [value?: number]
+}>()
+type ModelType = number;
+
+function onChange(value?: number) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value)
+    emit('change', value)
+}
+
+const mv = ref(getValue(model.formData, prop) as ModelType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as ModelType
+}, {
+    deep: true
+})
+defineExpose({
+    focus() {
+        input?.value?.focus()
+    },
+    blur() {
+        input?.value?.blur()
+    },
+    elInputNumber: input
+})
+</script>
+
+<template>
+    <el-input-number :min="min"
+                     :max="max"
+                     :label="label"
+                     :disabled="disabled"
+                     :id="id"
+                     :aria-label="ariaLabel"
+                     :controls="controls"
+                     :controls-position="controlsPosition"
+                     v-model="mv"
+                     :name="name"
+                     :placeholder="placeholder"
+                     :precision="precision"
+                     :readonly="readonly"
+                     :size="size"
+                     :step="step"
+                     :step-strictly="stepStrictly"
+                     :value-on-clear="valueOnClear"
+                     :validate-event="validateEvent"
+                     @change="onChange"
+                     @blur="evt => $emit('blur', evt)"
+                     @focus="evt => $emit('focus', evt)">
+        <slot name="decrease-icon"></slot>
+        <slot name="increase-icon"></slot>
+    </el-input-number>
+</template>

package/packages/components/inputNumber/index.ts

@@ -1,4 +1,4 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import InputNumber from "./JaInputNumber.vue";
-export const JaInputNumber:SFCWithInstall<typeof InputNumber> = withInstall(InputNumber);
-export default InputNumber;
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import InputNumber from "./JaInputNumber.vue";
+export const JaInputNumber:SFCWithInstall<typeof InputNumber> = withInstall(InputNumber);
+export default InputNumber;

package/packages/components/mapItemList/JaMapItemList.vue

@@ -1,35 +1,35 @@
-<script setup lang="ts">
-import {inject, watch, ref} from "vue";
-import {getValue, setValue} from "../../utils/objectUtils";
-import type {ValidationInstance} from "../../hooks/useBackendValidations";
-import MapItemListInput from "./MapItemListInput.vue";
-
-type ValueType = string | number | boolean | undefined;
-const model = inject('aceFormModel') as Record<string, never>
-const prop = inject('aceFormItemProp') as string
-const validator = inject('aceFormValidator') as ValidationInstance
-const emit = defineEmits<{
-    change: [value: Record<string, ValueType>]
-}>()
-
-function onChange(value: Record<string, string>) {
-    validator.removeFieldError(prop)
-    setValue(model.formData, prop, mv.value);
-    emit('change', value)
-}
-
-const mv = ref(getValue(model.formData, prop) as Record<string, ValueType> ?? {"": ""});
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as Record<string, ValueType> ?? {"": ""};
-})
-</script>
-
-<template>
-    <map-item-list-input v-model="mv"
-                         @change="onChange"
-                         v-bind="$attrs"/>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+import {inject, watch, ref} from "vue";
+import {getValue, setValue} from "../../utils/objectUtils";
+import type {ValidationInstance} from "../../hooks/useBackendValidations";
+import MapItemListInput from "./MapItemListInput.vue";
+
+type ValueType = string | number | boolean | undefined;
+const model = inject('aceFormModel') as Record<string, never>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const emit = defineEmits<{
+    change: [value: Record<string, ValueType>]
+}>()
+
+function onChange(value: Record<string, string>) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', value)
+}
+
+const mv = ref(getValue(model.formData, prop) as Record<string, ValueType> ?? {"": ""});
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as Record<string, ValueType> ?? {"": ""};
+})
+</script>
+
+<template>
+    <map-item-list-input v-model="mv"
+                         @change="onChange"
+                         v-bind="$attrs"/>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/mapItemList/MapItemListInput.vue

@@ -1,191 +1,191 @@
-<script setup lang="ts">
-import {Minus, Plus} from "@element-plus/icons-vue";
-import {watch, ref, onBeforeMount, type Component} from "vue";
-import {ElButton, ElDatePicker, ElInput, ElInputNumber, ElSelect, ElSwitch} from "element-plus";
-
-type ValueType = string | number | boolean | undefined;
-
-const props = withDefaults(defineProps<{
-    modelValue: Record<string, ValueType>,
-    enumValues?: Record<string, string>,
-    valueType?: 'String' | 'Integer' | 'Long' | 'Decimal' | 'Enum' | 'Boolean' | 'DATE' | 'TIMESTAMP',
-    size?: 'small' | 'large' | 'default'
-}>(), {
-    valueType: 'String'
-})
-const emits = defineEmits(["update:modelValue", "change"])
-
-function removeValue(index: number) {
-    values.value?.splice(index, 1);
-}
-
-function addValue() {
-    values.value?.push({k: ""})
-}
-
-const values = ref<{
-    k: string,
-    v?: ValueType
-}[]>([])
-
-let initializing = false;
-let internalChangedValue = false;
-
-let valueCompType = ref<Component>();
-let valueCompProps = ref<object>({});
-
-function setupValueComponentType() {
-    console.log('map item value comp type:', props.valueType);
-    switch (props.valueType) {
-        case "String":
-            valueCompType.value = ElInput;
-            valueCompProps.value = {}
-            break;
-        case "Integer":
-        case "Long":
-            valueCompType.value = ElInputNumber;
-            break;
-        case "Decimal":
-            valueCompType.value = ElInputNumber;
-            valueCompProps.value = {
-                precision: 2,
-                step: 0.1
-            }
-            break;
-        case "Enum":
-            valueCompType.value = ElSelect;
-            break;
-        case "Boolean":
-            valueCompType.value = ElSwitch;
-            break;
-        case "DATE":
-            valueCompType.value = ElDatePicker;
-            valueCompProps.value = {
-                type: "date"
-            }
-            break;
-        case "TIMESTAMP":
-            valueCompType.value = ElDatePicker;
-            valueCompProps.value = {
-                type: "datetime"
-            }
-            break;
-    }
-}
-
-onBeforeMount(() => {
-    initializeModelValue(props.modelValue)
-    setupValueComponentType();
-})
-
-function initializeModelValue(n: Record<string, ValueType>) {
-    if (internalChangedValue) {
-        internalChangedValue = false;
-        return;
-    }
-    if (n) {
-        initializing = true;
-        const keys = Object.keys(n);
-        values.value = keys.map(k => {
-            return {k: k, v: n[k]}
-        });
-        if (values.value.length == 0) {
-            values.value.push({k: ""});
-        }
-    } else {
-        values.value = [{k: ""}]
-    }
-}
-
-watch(() => props.modelValue, (n: Record<string, ValueType>) => {
-    initializeModelValue(n);
-}, {
-    deep: true
-})
-
-watch(() => values.value, () => {
-    if (initializing) {
-        initializing = false;
-        return;
-    }
-    internalChangedValue = true;
-    const newValue = values.value?.filter(v => v.k && v.v)
-        .reduce((r, c) => {
-            r[c.k] = c.v;
-            return r;
-        }, {} as Record<string, ValueType>)
-    emits("update:modelValue", newValue)
-    emits("change", newValue)
-}, {deep: true})
-
-watch(() => props.valueType, () => {
-    setupValueComponentType();
-})
-</script>
-
-<template>
-    <div style="width: 100%;" class="ja-enum-list">
-        <div class="ja-input-box" v-for="(v, index) in values" :key="index">
-            <el-input v-model="v.k" :size="size" placeholder="键"></el-input>
-            <div class="splitter">
-                <el-text>:</el-text>
-            </div>
-            <component v-model="v.v" :size="size" placeholder="值" :is="valueCompType"
-                       v-bind="valueCompProps">
-                <template v-if="props.valueType == 'Enum'">
-                    <el-option v-for="k in Object.keys(props.enumValues?? {})" :key="k"
-                               :label="k" :value="props.enumValues ? props.enumValues[k]: ''"
-                    ></el-option>
-                </template>
-            </component>
-            <el-tooltip content="删除" placement="right">
-                <div class="el-input-group__append" v-show="index < (values?.length ?? 0) - 1">
-                    <el-button link :icon="Minus" @click="removeValue(index)" :size="size">
-                    </el-button>
-                </div>
-            </el-tooltip>
-            <el-tooltip content="添加" placement="right">
-                <div class="el-input-group__append" v-show="index === (values?.length ?? 0) - 1">
-                    <el-button @click="addValue()" :size="size"
-                               link :icon="Plus">
-                    </el-button>
-                </div>
-            </el-tooltip>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.ja-enum-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .ja-input-box {
-        display: flex;
-        gap: 4px;
-
-        .el-input-group__append {
-            flex: none;
-            margin-left: 0 !important;
-        }
-
-        .el-select {
-            flex: auto;
-        }
-
-        .el-input-number {
-            flex: auto;
-            width: 100% !important;
-        }
-
-        .el-input {
-            flex: auto;
-        }
-
-        .splitter {
-            flex: none;
-        }
-    }
-}
-</style>
+<script setup lang="ts">
+import {Minus, Plus} from "@element-plus/icons-vue";
+import {watch, ref, onBeforeMount, type Component} from "vue";
+import {ElButton, ElDatePicker, ElInput, ElInputNumber, ElSelect, ElSwitch} from "element-plus";
+
+type ValueType = string | number | boolean | undefined;
+
+const props = withDefaults(defineProps<{
+    modelValue: Record<string, ValueType>,
+    enumValues?: Record<string, string>,
+    valueType?: 'String' | 'Integer' | 'Long' | 'Decimal' | 'Enum' | 'Boolean' | 'DATE' | 'TIMESTAMP',
+    size?: 'small' | 'large' | 'default'
+}>(), {
+    valueType: 'String'
+})
+const emits = defineEmits(["update:modelValue", "change"])
+
+function removeValue(index: number) {
+    values.value?.splice(index, 1);
+}
+
+function addValue() {
+    values.value?.push({k: ""})
+}
+
+const values = ref<{
+    k: string,
+    v?: ValueType
+}[]>([])
+
+let initializing = false;
+let internalChangedValue = false;
+
+let valueCompType = ref<Component>();
+let valueCompProps = ref<object>({});
+
+function setupValueComponentType() {
+    console.log('map item value comp type:', props.valueType);
+    switch (props.valueType) {
+        case "String":
+            valueCompType.value = ElInput;
+            valueCompProps.value = {}
+            break;
+        case "Integer":
+        case "Long":
+            valueCompType.value = ElInputNumber;
+            break;
+        case "Decimal":
+            valueCompType.value = ElInputNumber;
+            valueCompProps.value = {
+                precision: 2,
+                step: 0.1
+            }
+            break;
+        case "Enum":
+            valueCompType.value = ElSelect;
+            break;
+        case "Boolean":
+            valueCompType.value = ElSwitch;
+            break;
+        case "DATE":
+            valueCompType.value = ElDatePicker;
+            valueCompProps.value = {
+                type: "date"
+            }
+            break;
+        case "TIMESTAMP":
+            valueCompType.value = ElDatePicker;
+            valueCompProps.value = {
+                type: "datetime"
+            }
+            break;
+    }
+}
+
+onBeforeMount(() => {
+    initializeModelValue(props.modelValue)
+    setupValueComponentType();
+})
+
+function initializeModelValue(n: Record<string, ValueType>) {
+    if (internalChangedValue) {
+        internalChangedValue = false;
+        return;
+    }
+    if (n) {
+        initializing = true;
+        const keys = Object.keys(n);
+        values.value = keys.map(k => {
+            return {k: k, v: n[k]}
+        });
+        if (values.value.length == 0) {
+            values.value.push({k: ""});
+        }
+    } else {
+        values.value = [{k: ""}]
+    }
+}
+
+watch(() => props.modelValue, (n: Record<string, ValueType>) => {
+    initializeModelValue(n);
+}, {
+    deep: true
+})
+
+watch(() => values.value, () => {
+    if (initializing) {
+        initializing = false;
+        return;
+    }
+    internalChangedValue = true;
+    const newValue = values.value?.filter(v => v.k && v.v)
+        .reduce((r, c) => {
+            r[c.k] = c.v;
+            return r;
+        }, {} as Record<string, ValueType>)
+    emits("update:modelValue", newValue)
+    emits("change", newValue)
+}, {deep: true})
+
+watch(() => props.valueType, () => {
+    setupValueComponentType();
+})
+</script>
+
+<template>
+    <div style="width: 100%;" class="ja-enum-list">
+        <div class="ja-input-box" v-for="(v, index) in values" :key="index">
+            <el-input v-model="v.k" :size="size" placeholder="键"></el-input>
+            <div class="splitter">
+                <el-text>:</el-text>
+            </div>
+            <component v-model="v.v" :size="size" placeholder="值" :is="valueCompType"
+                       v-bind="valueCompProps">
+                <template v-if="props.valueType == 'Enum'">
+                    <el-option v-for="k in Object.keys(props.enumValues?? {})" :key="k"
+                               :label="k" :value="props.enumValues ? props.enumValues[k]: ''"
+                    ></el-option>
+                </template>
+            </component>
+            <el-tooltip content="删除" placement="right">
+                <div class="el-input-group__append" v-show="index < (values?.length ?? 0) - 1">
+                    <el-button link :icon="Minus" @click="removeValue(index)" :size="size">
+                    </el-button>
+                </div>
+            </el-tooltip>
+            <el-tooltip content="添加" placement="right">
+                <div class="el-input-group__append" v-show="index === (values?.length ?? 0) - 1">
+                    <el-button @click="addValue()" :size="size"
+                               link :icon="Plus">
+                    </el-button>
+                </div>
+            </el-tooltip>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.ja-enum-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .ja-input-box {
+        display: flex;
+        gap: 4px;
+
+        .el-input-group__append {
+            flex: none;
+            margin-left: 0 !important;
+        }
+
+        .el-select {
+            flex: auto;
+        }
+
+        .el-input-number {
+            flex: auto;
+            width: 100% !important;
+        }
+
+        .el-input {
+            flex: auto;
+        }
+
+        .splitter {
+            flex: none;
+        }
+    }
+}
+</style>