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

package/packages/components/form/JaForm.vue

@@ -1,186 +1,186 @@
-<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";
-
-interface Props {
-    model: JaFormModel,
-    inline?:boolean,
-    labelPosition?: "left" | "top" | "right",
-    labelWidth?: string | number,
-    labelSuffix?: string,
-    hideRequiredAsterisk?: boolean,
-    showMessage?: boolean,
-    inlineMessage?: boolean,
-    statusIcon?: boolean,
-    validateOnRuleChange?: boolean,
-    rules?: FormRules,
-    size?: "small" | "default" | "large",
-    disabled?: boolean,
-    scrollToError?: boolean,
-    validator: ValidationInstance,
-}
-
-const formRef = ref<FormInstance | undefined>(undefined);
-
-
-const props = withDefaults(defineProps<Props>(),{
-    inline:false,
-    labelPosition:'top',
-    hideRequiredAsterisk:true,
-    showMessage:true,
-    inlineMessage:true,
-    statusIcon:false,
-    validateOnRuleChange:true,
-    size:'small',
-    scrollToError:true,
-
-})
-
-// 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,
-    getElForm:():FormInstance|undefined=>formRef.value,
-    validate:async (submit: () => Promise<any>, onFail?: () => void) => {
-        if(!formRef)return;
-        //先清空之前的校验
-        formRef.value.clearValidate();
-        //判断是否有传入rules如果有则先执行 formRef.value!.validate()
-        if(props.rules){
-            await formRef.value.validate((valid,fields)=>{
-                //判断校验是否成功
-                if(valid){
-                    //前端校验已成功，执行异步submit
-                    submit()
-                        .then(() => {
-                            //校验通过清楚所有的错误校验信息
-                            props.validator?.clearFiledErrors();
-                        })
-                        .catch(() => {
-                            //失败
-                            formRef.value.validate();
-                            if (onFail) onFail();
-                        });
-                }else{
-                    console.log('error submit!',fields)
-                }
-            })
-        }else{
-            submit()
-                .then(() => {
-                    props.validator?.clearFiledErrors();
-                })
-                .catch(async () => {
-                    await formRef.value.validate();
-                    if (onFail) onFail();
-                });
-        }
-
-
-
-    },
-});
-
-watch(() => props.model.formData, () => {
-    props.validator?.clearFiledErrors();
-})
-</script>
-
-<template>
-    <el-form
-        ref="formRef"
-        :model="model.formData"
-        :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,message)"
-        @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";
+
+interface Props {
+    model: JaFormModel,
+    inline?:boolean,
+    labelPosition?: "left" | "top" | "right",
+    labelWidth?: string | number,
+    labelSuffix?: string,
+    hideRequiredAsterisk?: boolean,
+    showMessage?: boolean,
+    inlineMessage?: boolean,
+    statusIcon?: boolean,
+    validateOnRuleChange?: boolean,
+    rules?: FormRules,
+    size?: "small" | "default" | "large",
+    disabled?: boolean,
+    scrollToError?: boolean,
+    validator: ValidationInstance,
+}
+
+const formRef = ref<FormInstance | undefined>(undefined);
+
+
+const props = withDefaults(defineProps<Props>(),{
+    inline:false,
+    labelPosition:'top',
+    hideRequiredAsterisk:true,
+    showMessage:true,
+    inlineMessage:true,
+    statusIcon:false,
+    validateOnRuleChange:true,
+    size:'small',
+    scrollToError:true,
+
+})
+
+// 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,
+    getElForm:():FormInstance|undefined=>formRef.value,
+    validate:async (submit: () => Promise<any>, onFail?: () => void) => {
+        if(!formRef)return;
+        //先清空之前的校验
+        formRef.value.clearValidate();
+        //判断是否有传入rules如果有则先执行 formRef.value!.validate()
+        if(props.rules){
+            await formRef.value.validate((valid,fields)=>{
+                //判断校验是否成功
+                if(valid){
+                    //前端校验已成功，执行异步submit
+                    submit()
+                        .then(() => {
+                            //校验通过清楚所有的错误校验信息
+                            props.validator?.clearFiledErrors();
+                        })
+                        .catch(() => {
+                            //失败
+                            formRef.value.validate();
+                            if (onFail) onFail();
+                        });
+                }else{
+                    console.log('error submit!',fields)
+                }
+            })
+        }else{
+            submit()
+                .then(() => {
+                    props.validator?.clearFiledErrors();
+                })
+                .catch(async () => {
+                    await formRef.value.validate();
+                    if (onFail) onFail();
+                });
+        }
+
+
+
+    },
+});
+
+watch(() => props.model.formData, () => {
+    props.validator?.clearFiledErrors();
+})
+</script>
+
+<template>
+    <el-form
+        ref="formRef"
+        :model="model.formData"
+        :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,message)"
+        @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,34 +1,34 @@
-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 "./enumPicker"
+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 "./enumPicker"