gi-component 0.0.38 → 0.0.39

package/package.json

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

package/packages/components/descriptions/index.ts

@@ -0,0 +1,5 @@
+import Descriptions from './src/descriptions.vue'
+
+export type DescriptionsInstance = InstanceType<typeof Descriptions>
+export * from './src/type'
+export default Descriptions

package/packages/components/descriptions/src/descriptions.vue

@@ -0,0 +1,72 @@
+<template>
+  <ElDescriptions :border="border" :column="column" :direction="direction" :size="size" :title="title" :extra="extra">
+    <template v-if="$slots.title" #title>
+      <slot name="title" />
+    </template>
+    <template v-if="$slots.extra" #extra>
+      <slot name="extra" />
+    </template>
+    <template v-if="useColumns">
+      <ElDescriptionsItem v-for="(col, idx) in columns" :key="col.value ?? idx"
+        :label="typeof col.label === 'string' ? col.label : ''" :span="col.span ?? 1" :width="col.width"
+        :min-width="col.minWidth" :align="col.align ?? 'left'" :label-align="col.labelAlign" :class-name="col.className"
+        :label-class-name="col.labelClassName">
+        <template v-if="typeof col.label === 'function'" #label>
+          <NodeRenderer :get-node="() => (col.label as (c: DescriptionsColumnItem) => any)(col)" />
+        </template>
+        <slot v-if="hasColumnSlot(col.value)" :name="col.value" :value="getFieldValue(col)" :data="data" :column="col" />
+        <NodeRenderer v-else-if="col.render && data" :get-node="() => col.render!({ value: getFieldValue(col), data, column: col })" />
+        <span v-else>{{ getFieldValue(col) }}</span>
+      </ElDescriptionsItem>
+    </template>
+    <template v-else>
+      <slot />
+    </template>
+  </ElDescriptions>
+</template>
+
+<script setup lang="ts">
+import type { DescriptionsColumnItem, DescriptionsProps } from './type'
+import { ElDescriptions, ElDescriptionsItem } from 'element-plus'
+import { computed, defineComponent, useSlots } from 'vue'
+
+const props = withDefaults(defineProps<DescriptionsProps>(), {
+  columns: () => [],
+  data: () => ({}),
+  border: false,
+  column: 3,
+  direction: 'horizontal',
+  size: 'default',
+  title: '',
+  extra: ''
+})
+
+defineSlots<{
+  default?: () => any
+  title?: () => any
+  extra?: () => any
+}>()
+
+const NodeRenderer = defineComponent({
+  name: 'NodeRenderer',
+  props: {
+    getNode: { type: Function, required: true }
+  },
+  setup(props: { getNode: () => any }) {
+    return () => props.getNode()
+  }
+})
+
+const slots = useSlots()
+const useColumns = computed(() => (props.columns?.length ?? 0) > 0)
+
+function hasColumnSlot(name: string | undefined): boolean {
+  return !!name && !!(slots as Record<string, unknown>)[name]
+}
+
+function getFieldValue(col: DescriptionsColumnItem) {
+  if (!props.data || col.value === undefined || col.value === null)
+    return ''
+  return props.data[col.value]
+}
+</script>

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

@@ -0,0 +1,44 @@
+import type { VNode } from 'vue'
+
+/** 描述列表列配置（对应 data 的字段与展示） */
+export interface DescriptionsColumnItem {
+  /** 对应 data 的字段名 */
+  value?: string
+  /** 标签文本，或返回 VNode 的函数 */
+  label?: string | ((columnItem: DescriptionsColumnItem) => VNode)
+  /** 列的数量（占据几列） */
+  span?: number
+  /** 列宽度（如无 border，宽度包含标签与内容） */
+  width?: string | number
+  /** 列最小宽度，剩余宽度按比例分配给设置了 minWidth 的列 */
+  minWidth?: string | number
+  /** 列内容对齐方式 */
+  align?: 'left' | 'center' | 'right'
+  /** 列标签对齐方式（无 border 时用 align） */
+  labelAlign?: 'left' | 'center' | 'right'
+  /** 列内容自定义类名 */
+  className?: string
+  /** 列标签自定义类名 */
+  labelClassName?: string
+  /** 自定义渲染内容：({ value, data, column }) => VNode */
+  render?: (params: { value: any; data: Record<string, any>; column: DescriptionsColumnItem }) => VNode
+}
+
+export interface DescriptionsProps {
+  /** 描述列表配置项，与 data 配合使用 */
+  columns?: DescriptionsColumnItem[]
+  /** 详情数据（与 columns 配合，按 value 取字段） */
+  data?: Record<string, any>
+  /** 是否带边框 */
+  border?: boolean
+  /** 一行 Descriptions Item 的数量 */
+  column?: number
+  /** 排列方向 */
+  direction?: 'vertical' | 'horizontal'
+  /** 列表尺寸 */
+  size?: 'large' | 'default' | 'small'
+  /** 标题文本，显示在左上方，也可用 title 插槽 */
+  title?: string
+  /** 操作区，显示在右上方，也可用 extra 插槽 */
+  extra?: string
+}

package/packages/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     GiCard: typeof import('./components/card/src/card.vue')['default']
     GiDialog: typeof import('./components/dialog/src/dialog.vue')['default']
     GiDialogContent: typeof import('./components/dialog/src/dialog-content.vue')['default']
+    GiDescriptions: typeof import('./components/descriptions/src/descriptions.vue')['default']
     GiDot: typeof import('./components/dot/src/dot.vue')['default']
     GiDrawer: typeof import('./components/drawer/src/drawer.vue')['default']
     GiEditTable: typeof import('./components/edit-table/src/edit-table.vue')['default']

package/packages/index.ts

@@ -2,6 +2,7 @@ import type { App, Component } from 'vue'
 
 import Button from './components/button'
 import Card from './components/card'
+import Descriptions from './components/descriptions'
 import DialogComponent, { Dialog as DialogFunction } from './components/dialog'
 import Dot from './components/dot'
 import Drawer from './components/drawer'
@@ -21,6 +22,7 @@ import './styles/index.scss'
 // 防止打包时 tree-shake 掉 Dialog.info/success/warning/error（内部只用到 Dialog.open）
 void [DialogFunction.info, DialogFunction.success, DialogFunction.warning, DialogFunction.error]
 
+export * from './components/descriptions'
 export * from './components/dialog'
 export * from './components/drawer'
 export * from './components/edit-table'
@@ -33,6 +35,7 @@ export * from './utils'
 const components = {
   Button,
   Card,
+  Descriptions,
   Drawer,
   Dot,
   Tabs,
@@ -52,6 +55,7 @@ const components = {
 // 导出Gi前缀的组件并添加明确类型注解
 export const GiButton: typeof Button = Button
 export const GiCard: typeof Card = Card
+export const GiDescriptions: typeof Descriptions = Descriptions
 export const GiDrawer: typeof Drawer = Drawer
 export const GiDot: typeof Dot = Dot
 export const GiTabs: typeof Tabs = Tabs