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

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,87 @@
-<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, inject, computed } from "vue";
+import {ElFormItem, ElIcon, ElText, type FormItemRule, ElTooltip} from 'element-plus'
+import {QuestionFilled} from "@element-plus/icons-vue";
+
+type RequiredPosition = 'left' | 'right'
+
+
+
+const aceFormRequiredPosition = inject('aceFormRequiredPosition')
+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'
+    requiredPosition?: RequiredPosition
+    labelGap?:string
+}>(), {
+    required: false,
+    showMessage: true,
+    inlineMessage: true,
+    size: 'small',
+    labelGap:'4px'
+})
+
+provide('aceFormItemProp', props.prop)
+
+const requiredPosition = computed(()=>{
+    return props.requiredPosition || aceFormRequiredPosition
+})
+
+
+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>
+            <div style="display: flex;" :style="{
+                gap: labelGap
+            }">
+                <span style="color:red" v-if="props.required && requiredPosition==='left'">*</span>
+                <el-text class="el-form-item__label">
+                    {{ props.label }}
+                    <el-tooltip
+                        v-if="labelRemark"
+                        placement="top">
+                        <el-icon>
+                            <question-filled/>
+                        </el-icon>
+                        <template #content>
+                            <div v-html="labelRemark"/>
+                        </template>
+                    </el-tooltip>
+                </el-text>
+                <span style="color:red" v-if="props.required && requiredPosition==='right'">*</span>
+            </div>
+
+        </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"

package/packages/components/input/JaInput.vue

@@ -1,143 +1,143 @@
-<script setup lang="ts">
-import {type Component, inject, type StyleValue, ref, watch} from 'vue'
-import {ElInput} from 'element-plus'
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import type {EpPropMergeType} from "element-plus/es/utils";
-import {getValue, setValue} from "../../utils/objectUtils";
-
-const props = withDefaults(defineProps<{
-    type?: string
-    maxLength?: number
-    minLength?: number
-    showWordLimit?: boolean
-    placeholder?: string
-    clearable?: boolean
-    formatter?: (value: string | number) => string
-    parser?: (value: string) => string
-    showPassword?: boolean
-    disabled?: boolean
-    size?: 'large' | 'default' | 'small'
-    prefixIcon?: string | Component
-    suffixIcon?: string | Component
-    rows?: number
-    autosize?: boolean | object
-    autocomplete?: string
-    name?: string
-    readonly?: boolean,
-    max?: any
-    min?: any
-    step?: any
-    resize?: 'none' | 'both' | 'horizontal' | 'vertical'
-    autofocus?: boolean
-    form?: string
-    label?: string
-    tabindex?: string | number
-    validateEvent?: boolean
-    inputStyle?: StyleValue
-}>(), {
-    type: 'text',
-    showWordLimit: false,
-    clearable: false,
-    showPassword: false,
-    disabled: false,
-    rows: 2,
-    autosize: false,
-    autocomplete: 'off',
-    readonly: false,
-    autofocus: false,
-    validateEvent: true
-})
-
-const model = inject('aceFormModel') as Record<string, any>
-const prop = inject('aceFormItemProp') as string
-const validator = inject('aceFormValidator') as ValidationInstance
-const input = ref<typeof ElInput>({} as typeof ElInput)
-const emit = defineEmits<{
-    blur: [evt: Event]
-    focus: [evt: Event]
-    change: [value: string]
-    input: [value: string]
-    clear: [void]
-}>()
-
-function onChange(value: string) {
-    validator.removeFieldError(prop);
-    setValue(model.formData, prop, mv.value);
-    emit('change', value);
-}
-
-type ModelType = EpPropMergeType<(new (...args: any[]) => string | number)
-    | (() => string | number | null | undefined)
-    | ((new (...args: any[]) => string | number) | (() => string | number | null | undefined))[],
-    unknown, unknown>;
-
-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()
-    },
-    select() {
-        input.value.select()
-    },
-    clear() {
-        input.value.clear()
-    },
-    elInput: input
-})
-</script>
-
-<template>
-    <el-input
-        ref="input"
-        :type="type"
-        v-model="mv"
-        :maxlength="maxLength"
-        :minLength="minLength"
-        :show-word-limit="showWordLimit"
-        :placeholder="placeholder"
-        :clearable="clearable"
-        :formatter="formatter"
-        :parser="parser"
-        :show-password="showPassword"
-        :disabled="disabled"
-        :size="size"
-        :prefix-icon="prefixIcon"
-        :suffix-icon="suffixIcon"
-        :rows="rows"
-        :autosize="autosize"
-        :autocomplete="autocomplete"
-        :name="name"
-        :readonly="readonly"
-        :max="max"
-        :min="min"
-        :step="step"
-        :resize="resize"
-        :autofocus="autofocus"
-        :form="form"
-        :label="label"
-        :tabindex="tabindex"
-        :validate-event="validateEvent"
-        @blur="evt => $emit('blur', evt)"
-        @focus="evt => $emit('focus', evt)"
-        @change="onChange"
-        @input="value => $emit('input', value)"
-        @clear="() => $emit('clear')"
-    >
-        <template v-for="(_, name) in $slots" v-slot:[name]>
-            <slot :name="name"></slot>
-        </template>
-    </el-input>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+import {type Component, inject, type StyleValue, ref, watch} from 'vue'
+import {ElInput} from 'element-plus'
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import type {EpPropMergeType} from "element-plus/es/utils";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const props = withDefaults(defineProps<{
+    type?: string
+    maxLength?: number
+    minLength?: number
+    showWordLimit?: boolean
+    placeholder?: string
+    clearable?: boolean
+    formatter?: (value: string | number) => string
+    parser?: (value: string) => string
+    showPassword?: boolean
+    disabled?: boolean
+    size?: 'large' | 'default' | 'small'
+    prefixIcon?: string | Component
+    suffixIcon?: string | Component
+    rows?: number
+    autosize?: boolean | object
+    autocomplete?: string
+    name?: string
+    readonly?: boolean,
+    max?: any
+    min?: any
+    step?: any
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical'
+    autofocus?: boolean
+    form?: string
+    label?: string
+    tabindex?: string | number
+    validateEvent?: boolean
+    inputStyle?: StyleValue
+}>(), {
+    type: 'text',
+    showWordLimit: false,
+    clearable: false,
+    showPassword: false,
+    disabled: false,
+    rows: 2,
+    autosize: false,
+    autocomplete: 'off',
+    readonly: false,
+    autofocus: false,
+    validateEvent: true
+})
+
+const model = inject('aceFormModel') as Record<string, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const input = ref<typeof ElInput>({} as typeof ElInput)
+const emit = defineEmits<{
+    blur: [evt: Event]
+    focus: [evt: Event]
+    change: [value: string]
+    input: [value: string]
+    clear: [void]
+}>()
+
+function onChange(value: string) {
+    validator.removeFieldError(prop);
+    setValue(model.formData, prop, mv.value);
+    emit('change', value);
+}
+
+type ModelType = EpPropMergeType<(new (...args: any[]) => string | number)
+    | (() => string | number | null | undefined)
+    | ((new (...args: any[]) => string | number) | (() => string | number | null | undefined))[],
+    unknown, unknown>;
+
+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()
+    },
+    select() {
+        input.value.select()
+    },
+    clear() {
+        input.value.clear()
+    },
+    elInput: input
+})
+</script>
+
+<template>
+    <el-input
+        ref="input"
+        :type="type"
+        v-model="mv"
+        :maxlength="maxLength"
+        :minLength="minLength"
+        :show-word-limit="showWordLimit"
+        :placeholder="placeholder"
+        :clearable="clearable"
+        :formatter="formatter"
+        :parser="parser"
+        :show-password="showPassword"
+        :disabled="disabled"
+        :size="size"
+        :prefix-icon="prefixIcon"
+        :suffix-icon="suffixIcon"
+        :rows="rows"
+        :autosize="autosize"
+        :autocomplete="autocomplete"
+        :name="name"
+        :readonly="readonly"
+        :max="max"
+        :min="min"
+        :step="step"
+        :resize="resize"
+        :autofocus="autofocus"
+        :form="form"
+        :label="label"
+        :tabindex="tabindex"
+        :validate-event="validateEvent"
+        @blur="evt => $emit('blur', evt)"
+        @focus="evt => $emit('focus', evt)"
+        @change="onChange"
+        @input="value => $emit('input', value)"
+        @clear="() => $emit('clear')"
+    >
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </el-input>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/input/index.ts

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