gi-component 0.0.13 → 0.0.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",

package/packages/components/dialog/src/dialog-content.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="el-message-box__container">
+    <el-icon class="el-message-box__status" :class="`el-message-box-icon--${props.type}`">
+      <InfoFilled v-if="props.type === 'info'" />
+      <SuccessFilled v-else-if="props.type === 'success'" />
+      <WarningFilled v-else-if="props.type === 'warning'" />
+      <CircleCloseFilled v-else-if="props.type === 'error'" />
+    </el-icon>
+    <div class="el-message-box__message">
+      <p>{{ props.content }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CircleCloseFilled, InfoFilled, SuccessFilled, WarningFilled } from '@element-plus/icons-vue'
+
+interface Props {
+  type?: 'info' | 'success' | 'warning' | 'error'
+  content?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  content: ''
+})
+</script>

package/packages/components/dialog/src/dialog.ts

@@ -1,8 +1,10 @@
 import type { DialogInstance } from '../index'
 import ElementPlus from 'element-plus'
-import { createApp, h, ref } from 'vue'
+import { createApp, defineAsyncComponent, h, ref } from 'vue'
 import GiDialog from './dialog.vue'
 
+const DialogContent = defineAsyncComponent(() => import('./dialog-content.vue'))
+
 export type DialogOptions = Partial<DialogInstance['$props']>
 
 export interface DialogReturnObject {
@@ -77,6 +79,46 @@ export function createDialog() {
     /** 对话框-打开 */
     open(options: DialogOptions) {
       return this.create(options)
+    },
+
+    info(options: DialogOptions) {
+      return this.create({
+        ...options,
+        content: () => h(DialogContent, { type: 'info', content: options.content as string }),
+        simple: true,
+        style: { maxWidth: '420px', ...options.style },
+        lockScroll: false
+      })
+    },
+
+    success(options: DialogOptions) {
+      return this.create({
+        ...options,
+        content: () => h(DialogContent, { type: 'success', content: options.content as string }),
+        simple: true,
+        style: { maxWidth: '420px', ...options.style },
+        lockScroll: false
+      })
+    },
+
+    warning(options: DialogOptions) {
+      return this.create({
+        ...options,
+        content: () => h(DialogContent, { type: 'warning', content: options.content as string }),
+        simple: true,
+        style: { maxWidth: '420px', ...options.style },
+        lockScroll: false
+      })
+    },
+
+    error(options: DialogOptions) {
+      return this.create({
+        ...options,
+        content: () => h(DialogContent, { type: 'error', content: options.content as string }),
+        simple: true,
+        style: { maxWidth: '420px', ...options.style },
+        lockScroll: false
+      })
     }
   }
 

package/packages/components/form/src/form.vue

@@ -194,6 +194,36 @@ onMounted(() => {
   loadDictData()
 })
 
+/** 获取占位文本 */
+const getPlaceholder = (item: FormColumnItem) => {
+  if (!item.type) return undefined
+  if (['input', 'input-number', 'input-tag'].includes(item.type)) {
+    return `请输入${item.label}`
+  }
+  if (['textarea'].includes(item.type)) {
+    return `请填写${item.label}`
+  }
+  if (
+    [
+      'select',
+      'select-v2',
+      'tree-select',
+      'cascader',
+      'time-select',
+      'input-search'
+    ].includes(item.type)
+  ) {
+    return `请选择${item.label}`
+  }
+  if (['date-picker'].includes(item.type)) {
+    return `请选择日期`
+  }
+  if (['time-picker'].includes(item.type)) {
+    return `请选择时间`
+  }
+  return undefined
+}
+
 // 组件的默认props配置
 function getComponentBindProps(item: FormColumnItem) {
   // 获取默认配置
@@ -263,36 +293,6 @@ const CompMap: Record<Exclude<FormColumnType, 'slot'>, any> = {
 
 const formRef = ref<FormInstance>()
 
-/** 获取占位文本 */
-const getPlaceholder = (item: FormColumnItem) => {
-  if (!item.type) return undefined
-  if (['input', 'input-number', 'input-tag'].includes(item.type)) {
-    return `请输入${item.label}`
-  }
-  if (['textarea'].includes(item.type)) {
-    return `请填写${item.label}`
-  }
-  if (
-    [
-      'select',
-      'select-v2',
-      'tree-select',
-      'cascader',
-      'time-select',
-      'input-search'
-    ].includes(item.type)
-  ) {
-    return `请选择${item.label}`
-  }
-  if (['date-picker'].includes(item.type)) {
-    return `请选择日期`
-  }
-  if (['time-picker'].includes(item.type)) {
-    return `请选择时间`
-  }
-  return undefined
-}
-
 /** 表单项校验规则 */
 function getFormItemRules(item: FormColumnItem) {
   if (item.required) {
@@ -332,9 +332,10 @@ function isDisabled(item: FormColumnItem) {
 
 /** 表单数据更新  */
 function updateModelValue(value: any, item: FormColumnItem) {
+  const val = item?.format ? item.format(value) : value
   emit(
     'update:modelValue',
-    Object.assign(props.modelValue, { [item.field]: value })
+    Object.assign(props.modelValue, { [item.field]: val })
   )
 }
 

package/packages/components/form/src/type.ts

@@ -7,30 +7,30 @@ import type { InputSearchInstance } from '../../input-search'
 
 export type FormColumnType
   = | 'input'
-    | 'textarea'
-    | 'input-number'
-    | 'input-tag'
-    | 'input-search'
-    | 'select'
-    | 'select-v2'
-    | 'tree-select'
-    | 'cascader'
-    | 'slider'
-    | 'switch'
-    | 'rate'
-    | 'checkbox-group'
-    | 'checkbox'
-    | 'radio-group'
-    | 'radio'
-    | 'date-picker'
-    | 'time-picker'
-    | 'time-select'
-    | 'color-picker'
-    | 'transfer'
-    | 'autocomplete'
-    | 'upload'
-    | 'title'
-    | 'slot'
+  | 'textarea'
+  | 'input-number'
+  | 'input-tag'
+  | 'input-search'
+  | 'select'
+  | 'select-v2'
+  | 'tree-select'
+  | 'cascader'
+  | 'slider'
+  | 'switch'
+  | 'rate'
+  | 'checkbox-group'
+  | 'checkbox'
+  | 'radio-group'
+  | 'radio'
+  | 'date-picker'
+  | 'time-picker'
+  | 'time-select'
+  | 'color-picker'
+  | 'transfer'
+  | 'autocomplete'
+  | 'upload'
+  | 'title'
+  | 'slot'
 
 /**
  * 表单列属性类型，根据组件类型使用对应的属性类型
@@ -69,6 +69,7 @@ export interface FormColumnItem<F = any> {
   slotName?: string
   slots?: FormColumnSlots
   extra?: string | (() => VNode) // 右侧额外内容
+  format?: (value: string) => string | number
 }
 
 export interface FormProps extends Partial<ElFormProps> {

package/packages/styles/index.scss

@@ -194,6 +194,11 @@ body {
     border-bottom: none;
   }
 
+  .el-dialog__body {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
   .el-dialog__footer {
     border-top: none;
   }