easybill-ui 1.2.9 → 1.2.11

package/components/CurdForm/src/FormItem.vue

@@ -3,9 +3,19 @@
     <div v-if="props.formItem.prefix && isString(props.formItem.prefix)" class="form-item-prefix" v-html="props.formItem.prefix"></div>
     <component :is="item" v-for="(item, i) in prefixList" :key="i" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
     <slot name="prefix"></slot>
-    <!--    <component :is="comp" v-if="comp" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />-->
-    <!--    <component :is="props.formItem.type" v-else v-model="modelRef[props.formItem.prop || '']" v-bind="formItemProps" v-on="eventObject" />-->
-    <FormCompose v-model="modelRef[props.formItem.prop || '']" :props="formItemProps" :form-item="props.formItem" :form-model="modelRef" :event-object="eventObject" />
+    <component :is="comp" v-if="comp" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject">
+      <template v-for="(item, key) in formItemProps.slots" :key="key" #[key]="slotScope">
+        <component :is="item" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
+      </template>
+    </component>
+    <component :is="props.formItem.type" v-else v-model="modelRef[props.formItem.prop || '']" v-bind="formItemProps" v-on="eventObject">
+      <template v-for="(item, key) in formItemProps.slots" :key="key" #[key]="slotScope">
+        <component :is="item" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
+      </template>
+    </component>
+
+    <!-- <FormCompose v-model="modelRef[props.formItem.prop || '']" :props="formItemProps" :form-item="props.formItem" :form-model="modelRef" :event-object="eventObject" /> -->
+
     <FormTooltip v-if="props.formItem.tooltip" :tooltip="props.formItem.tooltip" :form-item="props.formItem" :form-model="props.formModel" />
     <slot name="suffix"></slot>
     <div v-if="props.formItem.suffix && isString(props.formItem.suffix)" class="form-item-suffix" v-html="props.formItem.suffix"></div>
@@ -14,6 +24,7 @@
 </template>
 <script lang="ts" setup>
 import { computed, type PropType, ref, type Ref } from "vue"
+import { getComponent } from "./components"
 import FormCompose from "./FormCompose.vue"
 import FormTooltip from "./FormTooltip.vue"
 import { useForm } from "./hooks"
@@ -42,6 +53,7 @@ const formItemProps = computed(() => {
   }
   return props.formItem.props
 })
+const comp = computed(() => (formContext.components && formContext.components[props.formItem.type || "input"]) || getComponent(props.formItem.type))
 // 重新组装eventObject
 const eventObject = ref(
   (() => {

package/components/CurdForm/src/components/index.ts

@@ -43,6 +43,6 @@ export const getComponent = (type: string | VNode = "input") => {
     return type
   } else {
     // 'el-原生组件'
-    return type
+    return null
   }
 }

package/components/CurdForm/src/components/schema-form-cascader.vue

@@ -2,7 +2,7 @@
   <el-cascader v-model="model" :options="options" v-bind="props" v-on="eventObject"></el-cascader>
 </template>
 <script lang="ts" setup>
-import { type CascaderOption, type CascaderValue, ElCascader } from "element-plus"
+import { type CascaderOption, type CascaderValue } from "element-plus"
 import { computed, type PropType } from "vue"
 import { FormItemProps } from "../types"
 const props = defineProps({

package/components/CurdForm/src/components/schema-form-checkbox.vue

@@ -5,8 +5,8 @@
     </div>
     <el-checkbox-group v-if="!formItem.loading && formItem.options && formItem.options.length" v-model="model" :class="[props?.showType]" style="width: 100%" v-bind="props" v-on="eventObject">
       <template v-for="option in formItem.options" :key="option.value">
-        <el-checkbox-button v-if="props?.componentName == 'button'" :value="option.value" :disabled="option.disabled"> {{ option.label }} </el-checkbox-button>
-        <el-checkbox v-else :value="option.value" :disabled="option.disabled"> {{ option.label }} </el-checkbox>
+        <el-checkbox-button v-if="props?.componentName == 'button'" :value="option.value" :disabled="option.disabled" v-bind="option"> {{ option.label }} </el-checkbox-button>
+        <el-checkbox v-else :value="option.value" :disabled="option.disabled" v-bind="option"> {{ option.label }} </el-checkbox>
       </template>
     </el-checkbox-group>
     <div v-if="!formItem.loading && !formItem.options?.length" class="empty">
@@ -19,13 +19,12 @@
 </template>
 <script lang="ts">
 import { Loading, Warning } from "@element-plus/icons-vue"
-import { ElCheckbox, ElCheckboxButton, ElCheckboxGroup, ElIcon } from "element-plus"
-import { computed, defineComponent, type PropType, toRaw } from "vue"
 import { useLocale } from "easybill-ui"
+import { computed, defineComponent, type PropType, toRaw } from "vue"
 import { FormItemProps } from "../types"
 export default defineComponent({
   name: "SchemaFormCheckbox",
-  components: { Loading, ElCheckbox, ElCheckboxButton, ElCheckboxGroup, ElIcon, Warning },
+  components: { Loading, Warning },
   props: {
     ...FormItemProps,
     modelValue: {

package/components/CurdForm/src/components/schema-form-color-picker.vue

@@ -2,12 +2,11 @@
   <el-color-picker v-model="model" show-alpha v-bind="props" v-on="eventObject"> </el-color-picker>
 </template>
 <script lang="ts">
-import { ElColorPicker } from "element-plus"
 import { computed, defineComponent } from "vue"
 import { FormItemProps } from "../types"
 export default defineComponent({
   name: "SchemaFormColorPicker",
-  components: { ElColorPicker },
+  components: {},
   props: FormItemProps,
   emits: ["update:modelValue"],
   setup(props, { emit }) {

package/components/CurdForm/src/components/schema-form-date-picker.vue

@@ -1,14 +1,13 @@
 <template>
-  <el-date-picker v-model="model" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :placeholder="t('el.form.pleaseSelect', [formItem.label || ''])" v-bind="props" v-on="eventObject"> </el-date-picker>
+  <el-date-picker v-model="model" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-bind="props" v-on="eventObject"> </el-date-picker>
 </template>
 <script lang="ts">
-import { ElDatePicker, type ModelValueType } from "element-plus"
+import { type ModelValueType } from "element-plus"
 import { computed, defineComponent, type PropType } from "vue"
-import { useLocale } from "easybill-ui"
 import { FormItemProps } from "../types"
 export default defineComponent({
   name: "SchemaFormDatePicker",
-  components: { ElDatePicker },
+  components: {},
   props: {
     ...FormItemProps,
     modelValue: {
@@ -22,11 +21,9 @@ export default defineComponent({
       get: () => props.modelValue,
       set: (val) => emit("update:modelValue", val),
     })
-    const { t } = useLocale()
 
     return {
       model,
-      t,
     }
   },
 })

package/components/CurdForm/src/components/schema-form-input-number.vue

@@ -1,18 +1,12 @@
 <template>
-  <component style="width: 100%" v-model="model" :is="h(ElInputNumber, { ...props.props, ref: changeRef }, props.formItem?.slots)" :placeholder="t('el.form.pleaseInput', [formItem.label || ''])" v-on="eventObject"></component>
+  <el-input-number v-model="model" v-bind="props.props" v-on="eventObject">
+    <template v-for="(item, key) in props.formItem?.slots" :key="key" #[key]="slotScope">
+      <component :is="item" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
+    </template>
+  </el-input-number>
 </template>
 <script lang="ts" setup>
-import { useLocale } from "easybill-ui/utils/hooks/useLocal.ts"
-import { ElInputNumber } from "element-plus"
-import { getCurrentInstance, h } from "vue"
 import { FormItemProps } from "../types"
 const props = defineProps(FormItemProps)
 const model = defineModel()
-const { t } = useLocale()
-
-const vm = getCurrentInstance()
-function changeRef(el: ElInputNumber) {
-  vm.exposed = el || {}
-  vm.exposedProxy = el || {}
-}
 </script>

package/components/CurdForm/src/components/schema-form-input.vue

@@ -1,19 +1,21 @@
 <template>
-  <component v-model="model" :is="withDirectives(h(ElInput, { ...props.props, ref: changeRef }, props.formItem?.slots), [[trim, true]])" v-on="eventObject"></component>
+  <el-input v-model="model" v-trim v-bind="props.props" v-on="eventObject">
+    <template v-for="(item, key) in props.formItem?.slots" :key="key" #[key]>
+      <component :is="item" :form-item="props.formItem" :form-model="props.formModel" :props="props.props" :event-object="props.eventObject" />
+    </template>
+  </el-input>
 </template>
-<script lang="ts" setup>
-import { useLocale } from "easybill-ui"
-import { ElInput } from "element-plus"
-import { getCurrentInstance, h, withDirectives } from "vue"
+<script lang="ts">
 import { directives } from "../directive"
 import { FormItemProps } from "../types"
+
+export default {
+  directives: {
+    trim: directives.trim,
+  },
+}
+</script>
+<script lang="ts" setup>
 const props = defineProps(FormItemProps)
-const { trim } = directives
 const model = defineModel()
-const { t } = useLocale()
-const vm = getCurrentInstance()
-function changeRef(el: ElInput) {
-  vm.exposed = el || {}
-  vm.exposedProxy = el || {}
-}
 </script>

package/components/CurdForm/src/components/schema-form-radio.vue

@@ -27,14 +27,13 @@
 </template>
 <script lang="ts">
 import { Loading, Warning } from "@element-plus/icons-vue"
-import { ElIcon, ElRadio, ElRadioButton, ElRadioGroup } from "element-plus"
-import { computed, defineComponent, toRaw } from "vue"
 import { useLocale } from "easybill-ui"
+import { computed, defineComponent, toRaw } from "vue"
 import FormTooltip from "../FormTooltip.vue"
 import { FormItemProps } from "../types"
 export default defineComponent({
   name: "SchemaFormRadio",
-  components: { Loading, ElIcon, ElRadioGroup, ElRadio, ElRadioButton, Warning, FormTooltip },
+  components: { Loading, Warning, FormTooltip },
   props: {
     ...FormItemProps,
     modelValue: {

package/components/CurdForm/src/components/schema-form-select.vue

@@ -12,13 +12,12 @@
 </template>
 <script lang="ts">
 import { useLocale } from "easybill-ui"
-import { ElCheckbox, ElOption, ElSelect } from "element-plus"
 import { computed, defineComponent, onMounted, ref, watch } from "vue"
 import type { CurdFormOptionItem } from "../types"
 import { FormItemProps } from "../types"
 export default defineComponent({
   name: "SchemaFormSelect",
-  components: { ElSelect, ElOption, ElCheckbox },
+  components: {},
   props: {
     ...FormItemProps,
     modelValue: {

package/components/CurdForm/src/components/schema-form-switch.vue

@@ -2,12 +2,11 @@
   <el-switch v-model="model" v-bind="props" v-on="eventObject" />
 </template>
 <script lang="ts">
-import { ElSwitch } from "element-plus"
 import { computed, defineComponent } from "vue"
 import { FormItemProps } from "../types"
 export default defineComponent({
-  name: "SchemaFormTextarea",
-  components: { ElSwitch },
+  name: "SchemaFormSwitch",
+  components: {},
   props: {
     ...FormItemProps,
     modelValue: {

package/components/CurdForm/src/components/schema-form-time-picker.vue

@@ -1,14 +1,14 @@
 <template>
-  <el-time-picker v-model="model" :placeholder="t('el.form.pleaseSelect', [formItem.label || ''])" v-bind="props" v-on="eventObject"> </el-time-picker>
+  <el-time-picker v-model="model" v-bind="props" v-on="eventObject"> </el-time-picker>
 </template>
 <script lang="ts">
-import { ElTimePicker, type ModelValueType } from "element-plus"
-import { computed, defineComponent, type PropType } from "vue"
 import { useLocale } from "easybill-ui"
+import { type ModelValueType } from "element-plus"
+import { computed, defineComponent, type PropType } from "vue"
 import { FormItemProps } from "../types"
 export default defineComponent({
   name: "SchemaFormTimePicker",
-  components: { ElTimePicker },
+  components: {},
   props: {
     ...FormItemProps,
     modelValue: {

package/components/CurdForm/src/components/schema-form-tree-select.vue

@@ -14,13 +14,12 @@
 </template>
 <script lang="ts">
 import { Loading, Warning } from "@element-plus/icons-vue"
-import { ElIcon, ElTreeSelect } from "element-plus"
-import { computed, defineComponent, toRaw } from "vue"
 import { useLocale } from "easybill-ui"
+import { computed, defineComponent, toRaw } from "vue"
 import { FormItemProps } from "../types"
 export default defineComponent({
   name: "SchemaFormTreeSelect",
-  components: { Loading, ElTreeSelect, ElIcon, Warning },
+  components: { Loading, Warning },
   props: {
     ...FormItemProps,
     modelValue: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easybill-ui",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "description": "A component library for easybill",
   "author": "tuchongyang <779311998@qq.com>",
   "private": false,
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4b64ea1c8da7f78a0fdf4d49e73607cc4895f2c5"
+  "gitHead": "eec41d3b46dce7506465095e9b35f61e4b44b0cc"
 }