gi-component 0.0.37 → 0.0.39

package/dist/types/tool.d.ts

@@ -1,6 +1,6 @@
 type AllKeys<T> = T extends any ? keyof T : never;
 type UnionType<T, K extends PropertyKey> = T extends any ? K extends keyof T ? T[K] : never : never;
 export type MergeMultiple<T extends any[]> = {
-    [K in AllKeys<T[number]>]: UnionType<T[number], K>;
+    [K in AllKeys<T[number]>]?: UnionType<T[number], K>;
 };
 export {};

package/package.json

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

package/packages/components/button/src/button.vue

@@ -1,60 +1,60 @@
-<template>
-  <ElButton :class="b('button')" v-bind="bindProps" @click="(e: MouseEvent) => emit('click', e)">
-    <slot>{{ btnText }}</slot>
-  </ElButton>
-</template>
-
-<script setup lang="ts">
-import type { ButtonProps as ElButtonProps } from 'element-plus'
-import type { ButtonProps } from './type.ts'
-import {
-  Delete,
-  Download,
-  Edit,
-  Plus,
-  Printer,
-  Search,
-  Upload
-} from '@element-plus/icons-vue'
-import { ElButton } from 'element-plus'
-import { computed, useAttrs } from 'vue'
-import { useBemClass } from '../../../hooks'
-
-const props = withDefaults(defineProps<ButtonProps>(), {
-  type: ''
-})
-
-const emit = defineEmits<{
-  (e: 'click', event: MouseEvent): void
-}>()
-
-const attrs = useAttrs()
-
-const { b } = useBemClass()
-
-const obj: Record<string, { btnProps: Partial<ButtonProps>, btnText: string }>
-  = {
-  add: { btnProps: { icon: Plus, type: 'primary' }, btnText: '新增' },
-  edit: { btnProps: { icon: Edit, type: 'primary' }, btnText: '编辑' },
-  delete: { btnProps: { icon: Delete, type: 'danger' }, btnText: '删除' },
-  search: { btnProps: { icon: Search, type: 'primary' }, btnText: '搜索' },
-  reset: { btnProps: { type: undefined }, btnText: '重置' },
-  upload: { btnProps: { icon: Upload }, btnText: '上传' },
-  download: {
-    btnProps: { icon: Download },
-    btnText: '下载'
-  },
-  print: { btnProps: { icon: Printer }, btnText: '打印' }
-}
-
-const bindProps = computed(() => {
-  const btnProps = obj?.[props.type]?.btnProps || { type: props.type }
-  return { ...attrs, ...props, ...btnProps } as Omit<ElButtonProps, 'type'>
-})
-
-const btnText = computed(() => {
-  return obj[props.type].btnText
-})
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <ElButton :class="b('button')" v-bind="bindProps" @click="(e: MouseEvent) => emit('click', e)">
+    <slot>{{ btnText }}</slot>
+  </ElButton>
+</template>
+
+<script setup lang="ts">
+import type { ButtonProps as ElButtonProps } from 'element-plus'
+import type { ButtonProps } from './type.ts'
+import {
+  Delete,
+  Download,
+  Edit,
+  Plus,
+  Printer,
+  Search,
+  Upload
+} from '@element-plus/icons-vue'
+import { ElButton } from 'element-plus'
+import { computed, useAttrs } from 'vue'
+import { useBemClass } from '../../../hooks'
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  type: ''
+})
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+
+const attrs = useAttrs()
+
+const { b } = useBemClass()
+
+const obj: Record<string, { btnProps: Partial<ButtonProps>, btnText: string }>
+  = {
+  add: { btnProps: { icon: Plus, type: 'primary' }, btnText: '新增' },
+  edit: { btnProps: { icon: Edit, type: 'primary' }, btnText: '编辑' },
+  delete: { btnProps: { icon: Delete, type: 'danger' }, btnText: '删除' },
+  search: { btnProps: { icon: Search, type: 'primary' }, btnText: '搜索' },
+  reset: { btnProps: { type: undefined }, btnText: '重置' },
+  upload: { btnProps: { icon: Upload }, btnText: '上传' },
+  download: {
+    btnProps: { icon: Download },
+    btnText: '下载'
+  },
+  print: { btnProps: { icon: Printer }, btnText: '打印' }
+}
+
+const bindProps = computed(() => {
+  const btnProps = obj?.[props.type]?.btnProps || { type: props.type }
+  return { ...attrs, ...props, ...btnProps } as Omit<ElButtonProps, 'type'>
+})
+
+const btnText = computed(() => {
+  return obj[props.type].btnText
+})
+</script>
+
+<style lang="scss" scoped></style>

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/flex/index.ts

@@ -0,0 +1,5 @@
+import Flex from './src/flex.vue'
+
+export type FlexInstance = InstanceType<typeof Flex>
+export * from './src/type'
+export default Flex

package/packages/components/flex/src/flex.vue

@@ -0,0 +1,72 @@
+<template>
+  <div :class="classNames" :style="style">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { FlexProps } from './type'
+import { computed } from 'vue'
+import { useBemClass } from '../../../hooks'
+
+const props = withDefaults(defineProps<FlexProps>(), {
+  vertical: false,
+  wrap: false,
+  justify: 'normal',
+  align: 'normal',
+  flex: 'normal'
+})
+
+const { b } = useBemClass()
+
+const classNames = computed(() => [b('flex')])
+
+const gapMap: Record<string, string> = {
+  small: '8px',
+  middle: '16px',
+  large: '24px'
+}
+
+const resolvedGap = computed(() => {
+  if (props.gap === undefined || props.gap === null || props.gap === '')
+    return undefined
+  if (typeof props.gap === 'number')
+    return `${props.gap}px`
+  if (gapMap[props.gap])
+    return gapMap[props.gap]
+  return String(props.gap)
+})
+
+const resolvedWrap = computed(() => {
+  if (typeof props.wrap === 'boolean')
+    return props.wrap ? 'wrap' : 'nowrap'
+  // 模板中写 wrap 无值时 Vue 传空字符串，视为开启换行
+  if (props.wrap === '')
+    return 'wrap'
+  return props.wrap
+})
+
+const style = computed<CSSProperties>(() => {
+  const obj: CSSProperties = {
+    display: 'flex',
+    flexDirection: props.vertical ? 'column' : 'row',
+    flexWrap: resolvedWrap.value,
+    justifyContent: props.justify,
+    alignItems: props.align
+  }
+  if (props.flex !== 'normal') {
+    obj.flex = props.flex
+  }
+  if (resolvedGap.value) {
+    obj.gap = resolvedGap.value
+  }
+  return obj
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-button+.el-button) {
+  margin-left: 0;
+}
+</style>

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

@@ -0,0 +1,14 @@
+export interface FlexProps {
+  /** Flex 主轴的方向是否垂直，使用 flex-direction: column */
+  vertical?: boolean
+  /** 设置元素单行显示还是多行显示，参考 flex-wrap；支持布尔值，true 为 wrap，false 为 nowrap */
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse' | boolean | ''
+  /** 设置元素在主轴方向上的对齐方式，参考 justify-content */
+  justify?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
+  /** 设置元素在交叉轴方向上的对齐方式，参考 align-items */
+  align?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
+  /** flex CSS 简写属性 */
+  flex?: string
+  /** 设置网格之间的间隙，可选预设 small / middle / large 或 string / number */
+  gap?: 'small' | 'middle' | 'large' | string | number
+}

package/packages/components.d.ts

@@ -12,9 +12,11 @@ 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']
+    GiFlex: typeof import('./components/flex/src/flex.vue')['default']
     GiForm: typeof import('./components/form/src/form.vue')['default']
     GiGrid: typeof import('./components/grid/src/grid.vue')['default']
     GiGridItem: typeof import('./components/grid/src/grid-item.vue')['default']

package/packages/index.ts

@@ -2,10 +2,12 @@ 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'
 import EditTable from './components/edit-table'
+import Flex from './components/flex'
 import Form from './components/form'
 import GridItem from './components/grid/src/grid-item.vue'
 import Grid from './components/grid/src/grid.vue'
@@ -20,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'
@@ -32,11 +35,13 @@ export * from './utils'
 const components = {
   Button,
   Card,
+  Descriptions,
   Drawer,
   Dot,
   Tabs,
   InputGroup,
   InputSearch,
+  Flex,
   Grid,
   GridItem,
   Form,
@@ -50,11 +55,13 @@ 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
 export const GiInputGroup: typeof InputGroup = InputGroup
 export const GiInputSearch: typeof InputSearch = InputSearch
+export const GiFlex: typeof Flex = Flex
 export const GiGrid: typeof Grid = Grid
 export const GiGridItem: typeof GridItem = GridItem
 export const GiForm: typeof Form = Form