gi-component 0.0.38 → 0.0.40

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "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/tag/index.ts

@@ -0,0 +1,5 @@
+import Tag from './src/tag.vue'
+
+export type TagInstance = InstanceType<typeof Tag>
+export * from './src/type'
+export default Tag

package/packages/components/tag/src/tag.vue

@@ -0,0 +1,342 @@
+<template>
+  <span :class="className" :style="tagStyle" @click="handleClick">
+    <span v-if="hasIcon" :class="b('tag__icon')">
+      <slot name="icon">
+        <ElIcon v-if="icon">
+          <component :is="icon" />
+        </ElIcon>
+      </slot>
+    </span>
+    <slot />
+    <span v-if="closable" class="gi-tag-close-btn" @click="handleClose">
+      <ElIcon class="close-icon">
+        <Close />
+      </ElIcon>
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { TagProps, TagThemeColor } from './type'
+import { Close } from '@element-plus/icons-vue'
+import { ElIcon } from 'element-plus'
+import { computed, useSlots } from 'vue'
+import { useBemClass } from '../../../hooks'
+
+const props = withDefaults(defineProps<TagProps>(), {
+  type: 'light',
+  color: 'primary',
+  size: 'default',
+  closable: false
+})
+
+const emit = defineEmits<{
+  click: []
+  close: []
+}>()
+
+defineSlots<{
+  default?: () => unknown
+  icon?: () => unknown
+}>()
+
+const slots = useSlots()
+const hasIcon = computed(() => Boolean(slots.icon) || Boolean(props.icon))
+
+const SEMANTIC_THEME_COLORS: readonly TagThemeColor[] = [
+  'primary',
+  'success',
+  'warning',
+  'danger',
+  'info'
+]
+
+function isSemanticThemeColor(value: string): value is TagThemeColor {
+  return (SEMANTIC_THEME_COLORS as readonly string[]).includes(value)
+}
+
+const { b } = useBemClass()
+
+const BASE_COLORS = {
+  red: '#FF0000',
+  orangered: '#f77234',
+  orange: '#ff7d00',
+  gold: '#f7ba1e',
+  lime: '#9fdb1d',
+  green: '#00b42a',
+  cyan: '#14c9c9',
+  blue: '#3491fa',
+  purple: '#722ed1',
+  pink: '#f5319d',
+  gray: '#86909c'
+} as const
+
+type PresetColorKey = keyof typeof BASE_COLORS
+
+function resolveColorToken(input: string): string {
+  return BASE_COLORS[input as PresetColorKey] || input
+}
+
+function hexToRgb(hex: string): { r: number, g: number, b: number } {
+  const body = hex.startsWith('#') ? hex.slice(1) : hex
+  const full = body.length === 3
+    ? body.split('').map((c) => c + c).join('')
+    : body
+  return {
+    r: Number.parseInt(full.slice(0, 2), 16),
+    g: Number.parseInt(full.slice(2, 4), 16),
+    b: Number.parseInt(full.slice(4, 6), 16)
+  }
+}
+
+function stylesForType(
+  type: NonNullable<TagProps['type']>,
+  color: string,
+  rgb: { r: number, g: number, b: number }
+): CSSProperties {
+  const { r, g, b } = rgb
+  const bgTint = `rgba(${r}, ${g}, ${b}, 0.1)`
+  const borderTint = `rgba(${r}, ${g}, ${b}, 0.2)`
+  /** 与主题色标签一致：悬停时白字 + 实心色底 */
+  const closeHoverVars = {
+    '--tag-close-hover-color': '#fff',
+    '--tag-close-hover-bg-color': color
+  } as CSSProperties
+
+  switch (type) {
+    case 'dark':
+      return {
+        'color': '#fff',
+        'backgroundColor': color,
+        '--tag-close-hover-color': color,
+        '--tag-close-hover-bg-color': 'rgba(255, 255, 255, 0.9)'
+      } as CSSProperties
+    case 'outline':
+      return {
+        color,
+        backgroundColor: 'transparent',
+        borderColor: color,
+        ...closeHoverVars
+      }
+    case 'light-outline':
+      return {
+        color,
+        backgroundColor: bgTint,
+        borderColor: borderTint,
+        ...closeHoverVars
+      }
+    case 'light':
+    default:
+      return {
+        color,
+        backgroundColor: bgTint,
+        ...closeHoverVars
+      }
+  }
+}
+
+const className = computed(() => {
+  const c = props.color
+  return [
+    b('tag'),
+    props.type && b(`tag__type--${props.type}`),
+    props.size && b(`tag__size--${props.size}`),
+    c && isSemanticThemeColor(c) && b(`tag__color--${c}`)
+  ].filter(Boolean).join(' ')
+})
+
+const tagStyle = computed((): CSSProperties => {
+  const raw = props.color
+  if (!raw || isSemanticThemeColor(raw))
+    return {}
+  const color = resolveColorToken(raw)
+  return stylesForType(props.type ?? 'light', color, hexToRgb(color))
+})
+
+function handleClick() {
+  emit('click')
+}
+
+function handleClose(event: MouseEvent) {
+  event.stopPropagation()
+  emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+@use '../../../styles/var.scss' as a;
+
+$theme-colors: primary, success, warning, danger, info;
+
+$tag-size-small-height: 20px;
+$tag-size-default-height: 22px;
+$tag-size-large-height: 24px;
+
+$tag-size-small-padding: 0 6px;
+$tag-size-default-padding: 0 8px;
+$tag-size-large-padding: 0 10px;
+
+.#{a.$prefix}-tag {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.#{a.$prefix}-tag__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  margin-right: 4px;
+  line-height: 0;
+  color: inherit;
+
+  :deep(.el-icon),
+  :deep(svg) {
+    width: 11px;
+    height: 11px;
+  }
+}
+
+.#{a.$prefix}-tag-close-btn {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  margin-left: 4px;
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: 50%;
+  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
+
+  .close-icon {
+    z-index: 9;
+    width: 11px;
+    height: 11px;
+    color: inherit;
+  }
+
+  /* 主题色写在 .gi-tag__color--* 上，自定义色写在内联 style；统一用变量驱动悬停 */
+  &:hover {
+    color: var(--tag-close-hover-color);
+    background-color: var(--tag-close-hover-bg-color);
+  }
+}
+
+.#{a.$prefix}-tag__size--small {
+  height: $tag-size-small-height;
+  padding: $tag-size-small-padding;
+
+  .#{a.$prefix}-tag__icon {
+    :deep(.el-icon),
+    :deep(svg) {
+      width: 10px;
+      height: 10px;
+    }
+  }
+
+  .#{a.$prefix}-tag-close-btn {
+    width: 14px;
+    height: 14px;
+
+    .close-icon {
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+
+.#{a.$prefix}-tag__size--default {
+  height: $tag-size-default-height;
+  padding: $tag-size-default-padding;
+}
+
+.#{a.$prefix}-tag__size--large {
+  height: $tag-size-large-height;
+  padding: $tag-size-large-padding;
+
+  .#{a.$prefix}-tag__icon {
+    :deep(.el-icon),
+    :deep(svg) {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  .#{a.$prefix}-tag-close-btn {
+    width: 16px;
+    height: 16px;
+
+    .close-icon {
+      width: 12px;
+      height: 12px;
+    }
+  }
+}
+
+.#{a.$prefix}-tag__type--light {
+  @each $s in $theme-colors {
+    &.#{a.$prefix}-tag__color--#{$s} {
+      color: var(--el-color-#{$s});
+      background-color: var(--el-color-#{$s}-light-9);
+
+      --tag-close-hover-color: #fff;
+      --tag-close-hover-bg-color: var(--el-color-#{$s});
+    }
+  }
+}
+
+.#{a.$prefix}-tag__type--dark {
+  color: #fff;
+
+  @each $s in $theme-colors {
+    &.#{a.$prefix}-tag__color--#{$s} {
+      background-color: var(--el-color-#{$s});
+
+      --tag-close-hover-color: var(--el-color-#{$s});
+      --tag-close-hover-bg-color: rgb(255 255 255 / 90%);
+    }
+  }
+}
+
+.#{a.$prefix}-tag__type--outline {
+  background: transparent;
+  border-style: solid;
+  border-width: 1px;
+
+  @each $s in $theme-colors {
+    &.#{a.$prefix}-tag__color--#{$s} {
+      color: var(--el-color-#{$s});
+      border-color: var(--el-color-#{$s});
+
+      --tag-close-hover-color: #fff;
+      --tag-close-hover-bg-color: var(--el-color-#{$s});
+    }
+  }
+}
+
+.#{a.$prefix}-tag__type--light-outline {
+  border-style: solid;
+  border-width: 1px;
+
+  @each $s in $theme-colors {
+    &.#{a.$prefix}-tag__color--#{$s} {
+      color: var(--el-color-#{$s});
+      background-color: var(--el-color-#{$s}-light-9);
+      border-color: var(--el-color-#{$s}-light-5);
+
+      --tag-close-hover-color: #fff;
+      --tag-close-hover-bg-color: var(--el-color-#{$s});
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,36 @@
+import type { Component } from 'vue'
+
+/** 与 Element Plus 语义色一致的主题色（走 CSS 变量，非内联色值） */
+export type TagThemeColor = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+/** 内置调色板色名（映射为固定十六进制） */
+export type TagPaletteColor =
+  | 'red'
+  | 'orangered'
+  | 'orange'
+  | 'gold'
+  | 'lime'
+  | 'green'
+  | 'cyan'
+  | 'blue'
+  | 'purple'
+  | 'pink'
+  | 'gray'
+
+/** 组件属性定义 */
+export interface TagProps {
+  /** 标签类型 */
+  type?: 'dark' | 'light' | 'outline' | 'light-outline'
+  /**
+   * 颜色：主题色名（primary / success 等，使用 Element 色板）、调色板预设名（red / blue 等）或任意 CSS 颜色字符串（如十六进制）
+   */
+  color?: TagThemeColor | TagPaletteColor | string
+  /** 标签尺寸 */
+  size?: 'small' | 'default' | 'large'
+  /**
+   * 左侧图标组件（如 `@element-plus/icons-vue` 图标）；与 `#icon` 插槽同时存在时以插槽为准
+   */
+  icon?: Component
+  /** 是否可关闭 */
+  closable?: boolean
+}

package/packages/components.d.ts

@@ -1,31 +1,33 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    GiButton: typeof import('./components/button/src/button.vue')['default']
-    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']
-    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']
-    GiInputGroup: typeof import('./components/input-group/src/input-group.vue')['default']
-    GiInputSearch: typeof import('./components/input-search/src/input-search.vue')['default']
-    GiPageLayout: typeof import('./components/page-layout/src/page-layout.vue')['default']
-    GiSplitButton: typeof import('./components/page-layout/src/split-button.vue')['default']
-    GiTable: typeof import('./components/table/src/table.vue')['default']
-    GiTableColumn: typeof import('./components/table/src/TableColumn.vue')['default']
-    GiTabs: typeof import('./components/tabs/src/tabs.vue')['default']
-    GiTreeTransfer: typeof import('./components/tree-transfer/src/tree-transfer.vue')['default']
-  }
-}
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    GiButton: typeof import('./components/button/src/button.vue')['default']
+    GiCard: typeof import('./components/card/src/card.vue')['default']
+    GiDescriptions: typeof import('./components/descriptions/src/descriptions.vue')['default']
+    GiDialog: typeof import('./components/dialog/src/dialog.vue')['default']
+    GiDialogContent: typeof import('./components/dialog/src/dialog-content.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']
+    GiInputGroup: typeof import('./components/input-group/src/input-group.vue')['default']
+    GiInputSearch: typeof import('./components/input-search/src/input-search.vue')['default']
+    GiPageLayout: typeof import('./components/page-layout/src/page-layout.vue')['default']
+    GiSplitButton: typeof import('./components/page-layout/src/split-button.vue')['default']
+    GiTable: typeof import('./components/table/src/table.vue')['default']
+    GiTableColumn: typeof import('./components/table/src/TableColumn.vue')['default']
+    GiTabs: typeof import('./components/tabs/src/tabs.vue')['default']
+    GiTag: typeof import('./components/tag/src/tag.vue')['default']
+    GiTreeTransfer: typeof import('./components/tree-transfer/src/tree-transfer.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'
@@ -15,24 +16,28 @@ import InputSearch from './components/input-search'
 import PageLayout from './components/page-layout'
 import Table from './components/table'
 import Tabs from './components/tabs'
+import Tag from './components/tag'
 import TreeTransfer from './components/tree-transfer'
 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'
 export * from './components/form'
 export * from './components/table'
 export * from './components/tabs'
+export * from './components/tag'
 export * from './hooks'
 export * from './utils'
 
 const components = {
   Button,
   Card,
+  Descriptions,
   Drawer,
   Dot,
   Tabs,
@@ -46,12 +51,14 @@ const components = {
   Dialog: DialogComponent,
   EditTable,
   Table,
+  Tag,
   TreeTransfer
 } as unknown as Record<string, Component>
 
 // 导出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
@@ -65,6 +72,7 @@ export const GiPageLayout: typeof PageLayout = PageLayout
 export const GiDialog: typeof DialogComponent = DialogComponent
 export const GiEditTable: typeof EditTable = EditTable
 export const GiTable: typeof Table = Table
+export const GiTag: typeof Tag = Tag
 export const GiTreeTransfer: typeof TreeTransfer = TreeTransfer
 
 function capitalizeWord(word: string) {