@jari-ace/element-plus-component 0.0.2 → 0.1.1

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>

package/packages/components/mapItemList/index.ts

@@ -1,7 +1,7 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import MapItemList from "./JaMapItemList.vue";
-import MapItemListInput from "./MapItemListInput.vue";
-
-export const JaMapItemList: SFCWithInstall<typeof MapItemList> = withInstall(MapItemList);
-
-export const JaMapItemListRaw: SFCWithInstall<typeof MapItemListInput> = withInstall(MapItemListInput);
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import MapItemList from "./JaMapItemList.vue";
+import MapItemListInput from "./MapItemListInput.vue";
+
+export const JaMapItemList: SFCWithInstall<typeof MapItemList> = withInstall(MapItemList);
+
+export const JaMapItemListRaw: SFCWithInstall<typeof MapItemListInput> = withInstall(MapItemListInput);

package/packages/components/numberList/JaNumberList.vue

@@ -1,36 +1,36 @@
-<script setup lang="ts">
-import {inject, watch, ref} from "vue";
-import {getValue, setValue} from "../../utils/objectUtils";
-import type {ValidationInstance} from "../../hooks/useBackendValidations";
-import NumberListInput from "./NumberListInput.vue";
-
-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: 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 number[] ?? [0]);
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as number[] ?? [0]
-}, {
-    deep: true
-})
-</script>
-
-<template>
-    <number-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 NumberListInput from "./NumberListInput.vue";
+
+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: 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 number[] ?? [0]);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as number[] ?? [0]
+}, {
+    deep: true
+})
+</script>
+
+<template>
+    <number-list-input v-model="mv"
+                       @change="onChange"
+                       v-bind="$attrs"/>
+</template>
+
+<style scoped lang="scss">
+
+</style>