@wyfex/ivue 0.3.0 → 0.5.0

package/src/components/UseElConfigProvider/types.ts

@@ -8,32 +8,6 @@ import type { LogType } from '@/hooks/useLog'
  */
 export type Props = ExtractPropTypes<typeof componentProps>
 
-/**
- * injectProps接口
- */
-export interface InjectProps {
-  /**
-   * 语言
-   */
-  language?: string
-  /**
-   * 主题模式
-   */
-  themeMode?: string
-  /**
-   * 字典属性
-   */
-  dictProps?: DictProps
-  /**
-   * 上传配置
-   */
-  uploadConfig?: Record<string, any>
-  /**
-   * 扩展配置
-   */
-  extConfig?: { adaptive?: { extraHeight?: number } }
-}
-
 /**
  * 调试接口
  */

package/src/components/UseElDatePicker/props.ts

@@ -0,0 +1,86 @@
+import type { PropType } from 'vue'
+import type { RenderConfig } from '@/types'
+
+/**
+ * 组件props
+ */
+export default {
+  /**
+   * 双向绑定数据源
+   */
+  modelValue: {
+    type: [String, Number, Array],
+    default: ''
+  },
+  /**
+   * 是否使用渲染器 默认否
+   */
+  useRender: {
+    type: [Boolean, Object] as PropType<boolean | RenderConfig>,
+    default: false
+  },
+  /**
+   * 显示类型
+   */
+  type: {
+    type: String,
+    default: 'date',
+    validator: (val: string) =>
+      [
+        'year',
+        'years',
+        'month',
+        'months',
+        'date',
+        'dates',
+        'datetime',
+        'week',
+        'datetimerange',
+        'daterange',
+        'monthrange',
+        'yearrange'
+      ].includes(val)
+  },
+  /**
+   * 范围选择时开始日期的占位内容
+   */
+  startPlaceholder: {
+    type: String,
+    default: '开始日期'
+  },
+  /**
+   * 范围选择时结束日期的占位内容
+   */
+  endPlaceholder: {
+    type: String,
+    default: '结束日期'
+  },
+  /**
+   * 选择范围时的分隔符
+   */
+  rangeSeparator: {
+    type: String,
+    default: '至'
+  },
+  /**
+   *  显示在输入框中的格式
+   */
+  format: {
+    type: String,
+    default: undefined // 默认undefined 通过dateFormatComputed进行默认赋值
+  },
+  /**
+   * value-format
+   */
+  valueFormat: {
+    type: String,
+    default: undefined // 默认undefined 通过dateFormatComputed进行默认赋值
+  },
+  /**
+   * placeholder 默认请选择
+   */
+  placeholder: {
+    type: String,
+    default: '请选择'
+  }
+}

package/src/components/UseElDatePicker/types.ts

@@ -0,0 +1,15 @@
+import type { ExtractPropTypes } from 'vue'
+import componentProps from './props'
+
+/**
+ * props类型
+ */
+export type Props = ExtractPropTypes<typeof componentProps>
+
+/**
+ * emits接口
+ */
+export interface Emits {
+  // 更新value值
+  (e: 'update:modelValue', value: string | number | any[]): void
+}

package/src/components/UseElDescriptions/props.ts

@@ -0,0 +1,87 @@
+import type { PropType } from 'vue'
+import type { ConfigColumn } from './types'
+import type { DictMap, DictProps } from '@/types'
+import type { RenderConfig } from '@/types'
+
+/**
+ * 组件props
+ */
+export default {
+  /**
+   * 配置项 必传
+   */
+  configs: {
+    type: Array as PropType<ConfigColumn[]>,
+    required: true
+  },
+  /**
+   * 表单模型 必传
+   */
+  formModel: {
+    type: Object as PropType<Record<string, any>>,
+    required: true
+  },
+  /**
+   * 是否使用渲染器 默认否
+   */
+  useRender: {
+    type: [Boolean, Object] as PropType<boolean | RenderConfig>,
+    default: false
+  },
+  /**
+   * 字典映射 数据结构为{ configs[][label | useDict | useDict.data]: Array<{ label: string, value: any }> }
+   */
+  dictMap: {
+    type: Object as PropType<DictMap>,
+    default: () => ({})
+  },
+  /**
+   * 字典属性 默认为{ value: 'value', label: 'label', children: 'children' }，可通过全局配置进行设置，为适配全局配置此处不再设置默认值
+   */
+  dictProps: {
+    type: Object as PropType<DictProps>,
+    default: () => ({})
+  },
+  /**
+   * 一行 Descriptions Item 的数量 默认2
+   */
+  column: {
+    type: Number,
+    default: 2
+  },
+  /**
+   * 是否带有边框 默认是
+   */
+  border: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 每一列的标签宽度
+   */
+  labelWidth: {
+    type: [String, Number],
+    default: '25%'
+  },
+  /**
+   * 是否让标题居中并且header具有背景色 默认否
+   */
+  useTitleCenterWithBg: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 标签包裹类名
+   */
+  labelClass: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 默认内容包裹类名
+   */
+  defaultClass: {
+    type: String,
+    default: ''
+  }
+}

package/src/components/UseElDescriptions/types.ts

@@ -0,0 +1,38 @@
+import type { Component, ExtractPropTypes } from 'vue'
+import type { EditAttrs, RenderConfig, UseDict } from '@/types'
+import componentProps from './props'
+
+/**
+ * props类型
+ */
+export type Props = ExtractPropTypes<typeof componentProps>
+
+/**
+ * emits接口
+ */
+export interface Emits {
+  // dictKeys事件
+  (e: 'onDictKeys', value?: string[]): void
+}
+
+/**
+ * 组件配置接口
+ */
+export interface ComponentConfig {
+  is: Component
+  attrs?: EditAttrs
+}
+
+/**
+ * 配置列接口
+ */
+export interface ConfigColumn {
+  label: string
+  prop: string
+  span?: number
+  useDict?: boolean | string | UseDict
+  defaultClass?: string
+  slot?: boolean | string
+  componentConfig?: ComponentConfig
+  renderConfig?: RenderConfig
+}

package/src/types/index.ts

@@ -1,10 +1,73 @@
 import type { Component, VNode } from 'vue'
 
+// ==================================== 渲染器相关接口 start ====================================
 /**
  * 渲染器内容类型
  */
 export type RenderContent = string | number | boolean | VNode | Component
 
+/**
+ * 渲染器配置接口
+ */
+export interface RenderConfig {
+  // 内容
+  content?: RenderContent
+  // 样式类名
+  class?: string
+  // 内联样式
+  style?: string
+  // 内联样式字段
+  styleField?: string
+  // 单位
+  unit?: string
+}
+// ==================================== 渲染器相关接口 end ====================================
+
+// ==================================== 字典相关接口 start ====================================
+/**
+ * 字典属性接口 共用于其它props配置属性
+ */
+export interface DictProps {
+  // 指定选项label为选项对象的某个属性值
+  label: string
+  // 指定选项value为选项对象的某个属性值
+  value: string
+  // 指定选项children为选项对象的某个属性值
+  children: string
+}
+
+/**
+ * 字典映射接口
+ */
+export interface DictMap {
+  // 形如：{ 性别: [{ label: '男', value: 1 },{ label: '女', value: 2 }] }
+  [key: string]: Array<{ label: string; value: string | number | boolean }>
+}
+
+/**
+ * 使用字典接口
+ */
+export interface UseDict {
+  // 字典数据 可为字符串、对象、字符串数组、数字数组、对象数组，如为string则为dictMap的key
+  data?:
+    | string
+    | Record<string, any>
+    | string[]
+    | number[]
+    | Record<string, any>[]
+  // 字典属性
+  props?: DictProps
+  // 字典类名
+  class?: string
+  // 内联样式
+  inlineStyle?: string
+  // 字典样式字段
+  styleField?: string
+  // 字典分割符 默认为逗号(,)
+  separator?: string
+}
+// ==================================== 字典相关接口 start ====================================
+
 /**
  * 上传配置接口
  */
@@ -37,16 +100,34 @@ export interface GlobalConfig {
   finalUploadConfig: UploadConfig
 }
 
-// ==================================== 字典相关接口 ====================================
+/**
+ * input事件名称类型
+ */
+export type InputEventName = 'nonNegativeDecimal'
 
 /**
- * 字典属性接口 共用于其它props配置属性
+ * input事件接口
  */
-export interface DictProps {
-  // 指定选项label为选项对象的某个属性值
-  label: string
-  // 指定选项value为选项对象的某个属性值
-  value: string
-  // 指定选项children为选项对象的某个属性值
-  children: string
+export interface InputEvent {
+  name: InputEventName
+  digits?: number
+  cb?: Function
+}
+
+/**
+ * 编辑配置属性接口
+ */
+export interface EditAttrs {
+  // 是否追加label到placeholder后面 默认是，不需要可显式设置appendLabelToPlaceholder为false
+  appendLabelToPlaceholder?: boolean
+  // UseElSelect等组件的options
+  options?: Record<string, any>[]
+  // UseElSelect等组件的props
+  props?: DictProps
+  // change事件
+  changeEvent?: Function
+  // focus事件
+  focusEvent?: Function
+  // input事件
+  inputEvent?: Function | InputEventName | InputEvent
 }

package/dist/types/UseElConfigProvider/hook.d.ts

@@ -1,9 +0,0 @@
-import { InjectProps, Props } from './types';
-export declare const useProvideGlobalConfig: (props: Props) => void;
-export declare const useInjectGlobalConfig: (injectProps: InjectProps) => {
-    finalLanguage: string;
-    finalThemeMode: string;
-    finalDictProps: import('../../../types').DictProps;
-    finalTableExtraHeight: number;
-    finalUploadConfig: Record<string, any>;
-};