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

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/form/JaForm.vue

@@ -1,126 +1,126 @@
-<script setup lang="ts">
-import {type PropType, provide, ref, computed, watch} from "vue";
-import {ElForm, type FormInstance, type FormRules} from "element-plus";
-import {type ValidationInstance} from "../../hooks/useBackendValidations";
-import type {JaFormModel} from "./types";
-
-const formRef = ref<FormInstance | undefined>(undefined);
-
-const props = defineProps({
-    model: {
-        type: Object as PropType<JaFormModel>,
-        required: true,
-    },
-    inline: {
-        type: Boolean,
-        default: false,
-    },
-    labelPosition: {
-        type: String as PropType<"left" | "top" | "right">,
-        default: "top",
-    },
-    labelWidth: {
-        type: [String, Number],
-    },
-    labelSuffix: {
-        type: String,
-    },
-    hideRequiredAsterisk: {
-        type: Boolean,
-        default: false,
-    },
-    showMessage: {
-        type: Boolean,
-        default: true,
-    },
-    inlineMessage: {
-        type: Boolean,
-        default: true,
-    },
-    statusIcon: {
-        type: Boolean,
-        default: false,
-    },
-    validateOnRuleChange: {
-        type: Boolean,
-        default: true,
-    },
-    rules: {
-        type: Object as PropType<FormRules>,
-        default: {},
-    },
-    size: {
-        type: String as PropType<"small" | "default" | "large">,
-        default: "small",
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    scrollToError: {
-        type: Boolean,
-        default: true,
-    },
-    validator: {
-        type: Object as PropType<ValidationInstance>,
-        required: true,
-    },
-});
-
-defineEmits(["validate", "click"]);
-provide("aceFormValidator", props.validator);
-provide("aceFormModel", props.model);
-provide("aceFormSize", props.size);
-
-const rules = computed<FormRules>(() => {
-    return {
-        ...props.rules,
-        ...props.validator.rules,
-    };
-});
-
-defineExpose({
-    elForm: formRef,
-    validate: (submit: () => Promise<any>, onFail?: () => void) => {
-        formRef.value!.clearValidate();
-        return submit()
-            .then(() => {
-                props.validator?.clearFiledErrors();
-            })
-            .catch(() => {
-                formRef.value!.validate();
-                if (onFail) onFail();
-            });
-    },
-});
-
-watch(() => props.model.formData, () => {
-    props.validator?.clearFiledErrors();
-})
-</script>
-
-<template>
-    <el-form
-        ref="formRef"
-        :model="model"
-        :rules="rules"
-        :inline="inline"
-        :label-position="labelPosition"
-        :label-width="labelWidth"
-        :label-suffix="labelSuffix"
-        :hide-required-asterisk="hideRequiredAsterisk"
-        :show-message="showMessage"
-        :inline-message="inlineMessage"
-        :status-icon="statusIcon"
-        :validate-on-rule-change="validateOnRuleChange"
-        :size="size"
-        :disabled="disabled"
-        :scroll-to-error="scrollToError"
-        @validate="(prop, isValid, message) => $emit('validate', prop, isValid)"
-        @click="() => $emit('click')"
-    >
-        <slot></slot>
-    </el-form>
-</template>
-
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+import {type PropType, provide, ref, computed, watch} from "vue";
+import {ElForm, type FormInstance, type FormRules} from "element-plus";
+import {type ValidationInstance} from "../../hooks/useBackendValidations";
+import type {JaFormModel} from "./types";
+
+const formRef = ref<FormInstance | undefined>(undefined);
+
+const props = defineProps({
+    model: {
+        type: Object as PropType<JaFormModel>,
+        required: true,
+    },
+    inline: {
+        type: Boolean,
+        default: false,
+    },
+    labelPosition: {
+        type: String as PropType<"left" | "top" | "right">,
+        default: "top",
+    },
+    labelWidth: {
+        type: [String, Number],
+    },
+    labelSuffix: {
+        type: String,
+    },
+    hideRequiredAsterisk: {
+        type: Boolean,
+        default: false,
+    },
+    showMessage: {
+        type: Boolean,
+        default: true,
+    },
+    inlineMessage: {
+        type: Boolean,
+        default: true,
+    },
+    statusIcon: {
+        type: Boolean,
+        default: false,
+    },
+    validateOnRuleChange: {
+        type: Boolean,
+        default: true,
+    },
+    rules: {
+        type: Object as PropType<FormRules>,
+        default: {},
+    },
+    size: {
+        type: String as PropType<"small" | "default" | "large">,
+        default: "small",
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    scrollToError: {
+        type: Boolean,
+        default: true,
+    },
+    validator: {
+        type: Object as PropType<ValidationInstance>,
+        required: true,
+    },
+});
+
+defineEmits(["validate", "click"]);
+provide("aceFormValidator", props.validator);
+provide("aceFormModel", props.model);
+provide("aceFormSize", props.size);
+
+const rules = computed<FormRules>(() => {
+    return {
+        ...props.rules,
+        ...props.validator.rules,
+    };
+});
+
+defineExpose({
+    elForm: formRef,
+    validate: (submit: () => Promise<any>, onFail?: () => void) => {
+        formRef.value!.clearValidate();
+        return submit()
+            .then(() => {
+                props.validator?.clearFiledErrors();
+            })
+            .catch(() => {
+                formRef.value!.validate();
+                if (onFail) onFail();
+            });
+    },
+});
+
+watch(() => props.model.formData, () => {
+    props.validator?.clearFiledErrors();
+})
+</script>
+
+<template>
+    <el-form
+        ref="formRef"
+        :model="model"
+        :rules="rules"
+        :inline="inline"
+        :label-position="labelPosition"
+        :label-width="labelWidth"
+        :label-suffix="labelSuffix"
+        :hide-required-asterisk="hideRequiredAsterisk"
+        :show-message="showMessage"
+        :inline-message="inlineMessage"
+        :status-icon="statusIcon"
+        :validate-on-rule-change="validateOnRuleChange"
+        :size="size"
+        :disabled="disabled"
+        :scroll-to-error="scrollToError"
+        @validate="(prop, isValid, message) => $emit('validate', prop, isValid)"
+        @click="() => $emit('click')"
+    >
+        <slot></slot>
+    </el-form>
+</template>
+
+<style scoped lang="scss"></style>

package/packages/components/form/index.ts

@@ -1,5 +1,5 @@
-import {withInstall, type SFCWithInstall} from "../../utils/install";
-import Form from "./JaForm.vue";
-export const JaForm: SFCWithInstall<typeof Form> = withInstall(Form);
-export * from "./types"
-export default Form;
+import {withInstall, type SFCWithInstall} from "../../utils/install";
+import Form from "./JaForm.vue";
+export const JaForm: SFCWithInstall<typeof Form> = withInstall(Form);
+export * from "./types"
+export default Form;

package/packages/components/form/types.ts

@@ -1,4 +1,4 @@
-export interface JaFormModel  {
-    formData: Record<string, any>,
-    [key: string | number | symbol]: any
-}
+export interface JaFormModel  {
+    formData: Record<string, any>,
+    [key: string | number | symbol]: any
+}

package/packages/components/formItem/JaFormItem.vue

@@ -1,68 +1,68 @@
-<script setup lang="ts">
-import {provide, ref, withDefaults, defineProps, defineExpose} from 'vue'
-import {ElFormItem, ElIcon, ElText, type FormItemRule, ElTooltip} from 'element-plus'
-import {QuestionFilled} from "@element-plus/icons-vue";
-
-const props = withDefaults(defineProps<{
-    prop?: string | string[]
-    rules?: FormItemRule | FormItemRule[]
-    label?: string
-    labelWidth?: string | number
-    labelRemark?: string
-    required?: boolean
-    error?: string
-    showMessage?: boolean
-    inlineMessage?: boolean
-    size?: 'small' | 'default' | 'large'
-}>(), {
-    required: false,
-    showMessage: true,
-    inlineMessage: true,
-    size: 'small'
-})
-
-provide('aceFormItemProp', props.prop)
-
-const formItem = ref<typeof ElFormItem | null>(null)
-defineExpose({
-    resetField: () => {
-        formItem.value!.resetField()
-    },
-    clearValidate: () => {
-        formItem.value!.clearValidate()
-    },
-    elFormItem: formItem
-})
-
-</script>
-
-<template>
-    <el-form-item ref="formItem"
-                  :prop="prop"
-                  :rules="rules"
-                  :label-width="labelWidth"
-                  :error="error"
-                  :show-message="showMessage"
-                  :inline-message="inlineMessage"
-                  :size="size">
-        <template #label>
-            <el-text class="el-form-item__label">
-                {{ props.label }}
-                <span style="color:red" v-if="props.required">*</span>
-                <el-tooltip
-                    v-if="labelRemark"
-                    placement="top">
-                    <el-icon>
-                        <question-filled/>
-                    </el-icon>
-                    <template #content>
-                        <div v-html="labelRemark"/>
-                    </template>
-                </el-tooltip>
-            </el-text>
-        </template>
-        <slot></slot>
-        <slot name="error"></slot>
-    </el-form-item>
-</template>
-
+<script setup lang="ts">
+import {provide, ref, withDefaults, defineProps, defineExpose} from 'vue'
+import {ElFormItem, ElIcon, ElText, type FormItemRule, ElTooltip} from 'element-plus'
+import {QuestionFilled} from "@element-plus/icons-vue";
+
+const props = withDefaults(defineProps<{
+    prop?: string | string[]
+    rules?: FormItemRule | FormItemRule[]
+    label?: string
+    labelWidth?: string | number
+    labelRemark?: string
+    required?: boolean
+    error?: string
+    showMessage?: boolean
+    inlineMessage?: boolean
+    size?: 'small' | 'default' | 'large'
+}>(), {
+    required: false,
+    showMessage: true,
+    inlineMessage: true,
+    size: 'small'
+})
+
+provide('aceFormItemProp', props.prop)
+
+const formItem = ref<typeof ElFormItem | null>(null)
+defineExpose({
+    resetField: () => {
+        formItem.value!.resetField()
+    },
+    clearValidate: () => {
+        formItem.value!.clearValidate()
+    },
+    elFormItem: formItem
+})
+
+</script>
+
+<template>
+    <el-form-item ref="formItem"
+                  :prop="prop"
+                  :rules="rules"
+                  :label-width="labelWidth"
+                  :error="error"
+                  :show-message="showMessage"
+                  :inline-message="inlineMessage"
+                  :size="size">
+        <template #label>
+            <el-text class="el-form-item__label">
+                {{ props.label }}
+                <span style="color:red" v-if="props.required">*</span>
+                <el-tooltip
+                    v-if="labelRemark"
+                    placement="top">
+                    <el-icon>
+                        <question-filled/>
+                    </el-icon>
+                    <template #content>
+                        <div v-html="labelRemark"/>
+                    </template>
+                </el-tooltip>
+            </el-text>
+        </template>
+        <slot></slot>
+        <slot name="error"></slot>
+    </el-form-item>
+</template>
+

package/packages/components/formItem/index.ts

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

package/packages/components/index.ts

@@ -1,33 +1,33 @@
-export * from "./upload";
-export * from "./tip";
-export * from "./form"
-export * from "./formItem"
-export * from "./input"
-export * from "./checkbox"
-export * from "./inputNumber"
-export * from "./select"
-export * from "./datePicker"
-export * from "./button"
-export * from "./dropdownButton"
-export * from "./switch"
-export * from "./stringList"
-export * from "./numberList"
-export * from "./enumList"
-export * from "./mapItemList"
-export * from "./departmentPicker"
-export * from "./avatar"
-export * from "./userTag"
-export * from "./userPicker"
-export * from "./departmentTree"
-export * from "./userSelectDialog"
-export * from "./timePicker"
-export * from "./scrollbar"
-export * from "./userGroupTree"
-export * from "./userGroupPicker"
-export * from "./autoComplete"
-export * from "./radioGroup"
-export * from "./rolePicker"
-export * from "./channelPicker"
-export * from "./properyPicker"
-export * from "./inputI18n"
-export * from "./checkboxGroup"
+export * from "./upload";
+export * from "./tip";
+export * from "./form"
+export * from "./formItem"
+export * from "./input"
+export * from "./checkbox"
+export * from "./inputNumber"
+export * from "./select"
+export * from "./datePicker"
+export * from "./button"
+export * from "./dropdownButton"
+export * from "./switch"
+export * from "./stringList"
+export * from "./numberList"
+export * from "./enumList"
+export * from "./mapItemList"
+export * from "./departmentPicker"
+export * from "./avatar"
+export * from "./userTag"
+export * from "./userPicker"
+export * from "./departmentTree"
+export * from "./userSelectDialog"
+export * from "./timePicker"
+export * from "./scrollbar"
+export * from "./userGroupTree"
+export * from "./userGroupPicker"
+export * from "./autoComplete"
+export * from "./radioGroup"
+export * from "./rolePicker"
+export * from "./channelPicker"
+export * from "./properyPicker"
+export * from "./inputI18n"
+export * from "./checkboxGroup"