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

package/packages/components/enumList/JaEnumList.vue

@@ -1,39 +1,39 @@
-<script setup lang="ts">
-import {inject, watch, ref} from "vue";
-import {getValue, setValue} from "../../utils/objectUtils";
-import type {ValidationInstance} from "../../hooks/useBackendValidations";
-import EnumListInput from "./EnumListInput.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: string[]]
-}>()
-
-const props = defineProps<{ enumValues: Record<string, string> }>()
-
-function onChange(value: string[]) {
-    validator.removeFieldError(prop)
-    setValue(model.formData, prop, mv.value);
-    emit('change', value)
-}
-
-const mv = ref(getValue(model.formData, prop) as string[] ?? [""]);
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as string[] ?? [""]
-}, {
-    deep: true
-})
-</script>
-
-<template>
-    <enum-list-input v-model="mv"
-                     :enum-values="enumValues"
-                     @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 EnumListInput from "./EnumListInput.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: string[]]
+}>()
+
+const props = defineProps<{ enumValues: Record<string, string> }>()
+
+function onChange(value: string[]) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', value)
+}
+
+const mv = ref(getValue(model.formData, prop) as string[] ?? [""]);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as string[] ?? [""]
+}, {
+    deep: true
+})
+</script>
+
+<template>
+    <enum-list-input v-model="mv"
+                     :enum-values="enumValues"
+                     @change="onChange"
+                     v-bind="$attrs"/>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/enumList/index.ts

@@ -1,7 +1,7 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import EnumList from "./JaEnumList.vue";
-import EnumListInput from "./EnumListInput.vue";
-
-export const JaEnumList: SFCWithInstall<typeof EnumList> = withInstall(EnumList);
-
-export const JaEnumListRaw: SFCWithInstall<typeof EnumListInput> = withInstall(EnumListInput);
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import EnumList from "./JaEnumList.vue";
+import EnumListInput from "./EnumListInput.vue";
+
+export const JaEnumList: SFCWithInstall<typeof EnumList> = withInstall(EnumList);
+
+export const JaEnumListRaw: SFCWithInstall<typeof EnumListInput> = withInstall(EnumListInput);

package/packages/components/enumPicker/index.ts

@@ -1,5 +1,5 @@
-
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import EnumPicker from "./src/EnumPicker.vue";
-
-export const JaEnumPicker: SFCWithInstall<typeof EnumPicker> = withInstall(EnumPicker);
+
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import EnumPicker from "./src/EnumPicker.vue";
+
+export const JaEnumPicker: SFCWithInstall<typeof EnumPicker> = withInstall(EnumPicker);

package/packages/components/enumPicker/src/EnumPicker.vue

@@ -1,103 +1,103 @@
-<script setup lang="ts">
-import type { EnumValueDefinition } from '@jari-ace/app-bolts';
-
-import { computed, ref, watch } from 'vue';
-
-import { createAxiosWithoutCache } from '@jari-ace/app-bolts';
-import { useEnumApi } from '@jari-ace/app-bolts';
-import { ElOption, ElSelect } from 'element-plus';
-// 遍历出EnumValueDefinition类型的KEY 并排除掉
-type KeyFields = 'id' | 'text' | 'value';
-
-interface ModelValue {
-    value?: string;
-    text?: string;
-    id?: string;
-}
-const props = withDefaults(
-    defineProps<{
-        clearable?: boolean; // 是否可清空
-        filterable?: boolean; // 是否可筛选
-        keyField?: KeyFields;
-        multiple?: boolean; // 是否多选
-        name: string; // 枚举名称，用于获取枚举数据
-        serviceName: string;
-    }>(),
-    {
-        multiple: false,
-        clearable: true,
-        filterable: true,
-        keyField: 'value',
-    },
-);
-
-const enums = ref<EnumValueDefinition[]>([]);
-const loading = ref<boolean>(false);
-const model = defineModel<ModelValue[]>({
-    default: () => [],
-});
-
-const axios = createAxiosWithoutCache();
-const api = useEnumApi(axios);
-async function loadData() {
-    if (!props.name || !props.serviceName) return;
-    loading.value = true;
-    api
-        .queryByName(props.serviceName, props.name)
-        .then((res) => {
-            enums.value = res.values;
-        })
-        .finally(() => {
-            loading.value = false;
-        });
-}
-
-const modelValue = computed((): string | string[] | undefined => {
-    if (props.multiple) {
-        return model.value.map((m) => m[props.keyField] as string) || [];
-    } else {
-        if (model.value[0] !== undefined) {
-            return model.value[0][props.keyField];
-        }
-    }
-    return '';
-});
-
-const handleChange = (value: string | string[]) => {
-    if (typeof value === 'string') {
-        const obj = enums.value.find((e) => e[props.keyField] === value);
-        model.value = obj ? [obj] : [];
-    } else {
-        model.value = enums.value.filter((e) => value.includes(e[props.keyField]));
-    }
-};
-
-// function filter(queryName: string) {
-//   bindingChannels.value = channels.value?.filter(c => c.name.indexOf(queryName) > -1) ?? [];
-// }
-
-loadData();
-
-watch(() => props.name, loadData);
-watch(() => props.serviceName, loadData);
-</script>
-
-<template>
-    <ElSelect
-        v-loading="loading"
-        :model-value="modelValue"
-        :filterable="props.filterable"
-        :multiple="props.multiple"
-        :clearable="props.clearable"
-        @change="handleChange"
-    >
-        <ElOption
-            v-for="item in enums"
-            :key="item.id"
-            :value="item[props.keyField]"
-            :label="item.text"
-        />
-    </ElSelect>
-</template>
-
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+import type { EnumValueDefinition } from '@jari-ace/app-bolts';
+
+import { computed, ref, watch } from 'vue';
+
+import { createAxiosWithoutCache } from '@jari-ace/app-bolts';
+import { useEnumApi } from '@jari-ace/app-bolts';
+import { ElOption, ElSelect } from 'element-plus';
+// 遍历出EnumValueDefinition类型的KEY 并排除掉
+type KeyFields = 'id' | 'text' | 'value';
+
+interface ModelValue {
+    value?: string;
+    text?: string;
+    id?: string;
+}
+const props = withDefaults(
+    defineProps<{
+        clearable?: boolean; // 是否可清空
+        filterable?: boolean; // 是否可筛选
+        keyField?: KeyFields;
+        multiple?: boolean; // 是否多选
+        name: string; // 枚举名称，用于获取枚举数据
+        serviceName: string;
+    }>(),
+    {
+        multiple: false,
+        clearable: true,
+        filterable: true,
+        keyField: 'value',
+    },
+);
+
+const enums = ref<EnumValueDefinition[]>([]);
+const loading = ref<boolean>(false);
+const model = defineModel<ModelValue[]>({
+    default: () => [],
+});
+
+const axios = createAxiosWithoutCache();
+const api = useEnumApi(axios);
+async function loadData() {
+    if (!props.name || !props.serviceName) return;
+    loading.value = true;
+    api
+        .queryByName(props.serviceName, props.name)
+        .then((res) => {
+            enums.value = res.values;
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+}
+
+const modelValue = computed((): string | string[] | undefined => {
+    if (props.multiple) {
+        return model.value.map((m) => m[props.keyField] as string) || [];
+    } else {
+        if (model.value[0] !== undefined) {
+            return model.value[0][props.keyField];
+        }
+    }
+    return '';
+});
+
+const handleChange = (value: string | string[]) => {
+    if (typeof value === 'string') {
+        const obj = enums.value.find((e) => e[props.keyField] === value);
+        model.value = obj ? [obj] : [];
+    } else {
+        model.value = enums.value.filter((e) => value.includes(e[props.keyField]));
+    }
+};
+
+// function filter(queryName: string) {
+//   bindingChannels.value = channels.value?.filter(c => c.name.indexOf(queryName) > -1) ?? [];
+// }
+
+loadData();
+
+watch(() => props.name, loadData);
+watch(() => props.serviceName, loadData);
+</script>
+
+<template>
+    <ElSelect
+        v-loading="loading"
+        :model-value="modelValue"
+        :filterable="props.filterable"
+        :multiple="props.multiple"
+        :clearable="props.clearable"
+        @change="handleChange"
+    >
+        <ElOption
+            v-for="item in enums"
+            :key="item.id"
+            :value="item[props.keyField]"
+            :label="item.text"
+        />
+    </ElSelect>
+</template>
+
+<style scoped lang="scss"></style>