gi-component 0.0.48 → 0.0.50

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

@@ -1,355 +0,0 @@
-<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: 'info',
-  size: 'default',
-  round: false,
-  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 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: `rgba(${r}, ${g}, ${b}, 0.6)`,
-        ...closeHoverVars
-      }
-    case 'light-outline':
-      return {
-        color,
-        backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,
-        borderColor: `rgba(${r}, ${g}, ${b}, 0.2)`,
-        ...closeHoverVars
-      }
-    case 'light':
-    default:
-      return {
-        color,
-        backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,
-        ...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}`),
-    props.round && b('tag--round'),
-    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: 24px;
-$tag-size-large-height: 26px;
-
-$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;
-  border-radius: 3px;
-}
-
-.#{a.$prefix}-tag--round {
-  border-radius: 9999px;
-}
-
-.#{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}-light-5);
-
-      --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-7);
-
-      --tag-close-hover-color: #fff;
-      --tag-close-hover-bg-color: var(--el-color-#{$s});
-    }
-  }
-}
-
-.#{a.$prefix}-tag__type--light,
-.#{a.$prefix}-tag__type--outline,
-.#{a.$prefix}-tag__type--light-outline {
-  &.#{a.$prefix}-tag__color--info {
-    color: var(--el-color-text-primary);
-  }
-}
-</style>

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

@@ -1,38 +0,0 @@
-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
-  /** 是否为胶囊圆角（大圆角） */
-  round?: boolean
-  /** 是否可关闭 */
-  closable?: boolean
-}

package/packages/components/tree-transfer/index.ts

@@ -1,5 +0,0 @@
-import TreeTransfer from './src/tree-transfer.vue'
-
-export type TreeTransferInstance = InstanceType<typeof TreeTransfer>
-export * from './src/type'
-export default TreeTransfer

package/packages/components/tree-transfer/src/tree-transfer.vue

@@ -1,225 +0,0 @@
-<template>
-  <div class="el-transfer">
-    <div class="el-transfer-panel">
-      <div class="el-transfer-panel__header" @click="handleLeftAllChecked">
-        <ElCheckbox class="hide-checkbox" :model-value="leftAllChecked">
-          {{ props.titles[0] }}<span>{{ `${leftObj.checkedKeys.length}/${leftObj.total}`
-          }}</span>
-        </ElCheckbox>
-      </div>
-      <div class="el-transfer-panel__body">
-        <ElScrollbar>
-          <ElTree ref="treeRef" :data="leftTreeData" default-expand-all show-checkbox v-bind="props.treeProps"
-            @check="handleCheck" />
-        </ElScrollbar>
-      </div>
-    </div>
-
-    <div class="el-transfer__buttons">
-      <ElSpace>
-        <ElButton type="primary" :disabled="!rightObj.checkedKeys.length" @click="handleMoveLeft">
-          <ElIcon>
-            <ArrowLeft />
-          </ElIcon>
-        </ElButton>
-        <ElButton type="primary" :disabled="!leftObj.checkedKeys.length" @click="handleMoveRight">
-          <ElIcon>
-            <ArrowRight />
-          </ElIcon>
-        </ElButton>
-      </ElSpace>
-    </div>
-
-    <div class="el-transfer-panel">
-      <div class="el-transfer-panel__header" @click="handleRightAllChecked">
-        <ElCheckbox :model-value="rightAllChecked">
-          {{ props.titles[1] }}<span>{{ `${rightObj.checkedKeys.length}/${rightObj.options.length}`
-          }}</span>
-        </ElCheckbox>
-      </div>
-      <div class="el-transfer-panel__body">
-        <ElScrollbar>
-          <ElCheckboxGroup v-if="rightObj.options.length" v-model="rightObj.checkedKeys"
-            class="el-transfer-panel__list">
-            <ElCheckbox v-for="(item, index) in rightObj.options" :key="index" :label="item.label" :value="item.value"
-              class="el-transfer-panel__item" />
-          </ElCheckboxGroup>
-          <ElEmpty v-else :image-size="60"></ElEmpty>
-        </ElScrollbar>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { CheckboxOption, TreeInstance } from 'element-plus'
-import type { PropType } from 'vue'
-import type { TreeTransferProps } from './type'
-import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
-import { ElButton, ElCheckbox, ElCheckboxGroup, ElEmpty, ElIcon, ElScrollbar, ElSpace, ElTree } from 'element-plus'
-import { computed, onMounted, reactive, ref } from 'vue'
-import pkg from 'xe-utils'
-
-// 右边的列表keys
-const selectedKeys = defineModel('selectedKeys', { type: Array as PropType<string[]>, default: () => [] })
-
-const props = withDefaults(defineProps<TreeTransferProps>(), {
-  titles: () => ['列表', '列表'],
-  data: () => [],
-  treeProps: () => ({})
-})
-
-const { eachTree } = pkg
-
-const treeRef = ref<TreeInstance | null>(null)
-const nodeKey = computed(() => props.treeProps?.nodeKey || 'id')
-
-const leftObj = reactive({
-  checkedKeys: [] as string[],
-  total: 0,
-  options: [] as CheckboxOption[]
-})
-const rightObj = reactive({
-  checkedKeys: [] as string[],
-  options: [] as CheckboxOption[]
-})
-
-const leftAllChecked = computed(() => {
-  const rightListKeys = rightObj.options.map((i) => i.value)
-  const arr: string[] = []
-  eachTree(props.data, (i) => {
-    // 只考虑叶子节点且不在右侧列表中的节点
-    if (i.children === undefined && !rightListKeys.includes(i[nodeKey.value])) {
-      arr.push(i[nodeKey.value])
-    }
-  })
-  // 如果左侧没有可选节点，则返回false
-  if (arr.length === 0) return false
-  // 检查所有左侧叶子节点是否都被选中
-  return arr.every((i) => leftObj.checkedKeys.includes(i))
-})
-
-const getLeftTreeNodes = () => {
-  const rightListKeys = rightObj.options.map((i) => i.value)
-  const arr: any[] = []
-  eachTree(props.data, (i) => {
-    // 只返回叶子节点且不在右侧列表中的节点
-    if (i.children === undefined && !rightListKeys.includes(i[nodeKey.value])) {
-      arr.push(i)
-    }
-  })
-  return arr
-}
-
-function handleLeftAllChecked() {
-  if (leftAllChecked.value) {
-    leftObj.checkedKeys = []
-    leftObj.options = []
-    treeRef.value?.setCheckedKeys([])
-  } else {
-    const arr = getLeftTreeNodes()
-    leftObj.checkedKeys = arr.map((i) => i[nodeKey.value])
-    leftObj.options = arr.map((i) => ({ label: i.label, value: i[nodeKey.value] }))
-    treeRef.value?.setCheckedKeys(leftObj.checkedKeys)
-  }
-}
-
-const rightAllChecked = computed(() => rightObj.checkedKeys.length === rightObj.options.length && rightObj.options.length !== 0)
-function handleRightAllChecked() {
-  if (rightAllChecked.value) {
-    rightObj.checkedKeys = []
-  } else {
-    rightObj.checkedKeys = rightObj.options.map((i) => i.value as string)
-  }
-}
-
-const leftTreeData = computed(() => {
-  const treeData = JSON.parse(JSON.stringify(props.data))
-  const rightListKeys = rightObj.options.map((i) => i.value)
-
-  // 递归过滤树节点，只有当节点不在右侧列表中且有子节点存在于左侧时才保留
-  const filterNodes = (nodes: any[]): any[] => {
-    const filtered: any[] = []
-
-    for (const node of nodes) {
-      // 深拷贝当前节点
-      const newNode = { ...node }
-
-      // 如果有子节点，递归处理
-      if (node.children && node.children.length > 0) {
-        newNode.children = filterNodes(node.children)
-        // 如果子节点过滤后仍有内容，或者节点本身不在右侧列表中且是叶子节点，则保留该节点
-        if (newNode.children.length > 0 || (!rightListKeys.includes(node[nodeKey.value]) && (!node.children || node.children.length === 0))) {
-          filtered.push(newNode)
-        }
-      } else {
-        // 叶子节点，只有当它不在右侧列表中时才保留
-        if (!rightListKeys.includes(node[nodeKey.value])) {
-          filtered.push(newNode)
-        }
-      }
-    }
-
-    return filtered
-  }
-
-  return filterNodes(treeData)
-})
-
-const handleCheck = (data: any, obj: any) => {
-  leftObj.checkedKeys = obj.checkedNodes.filter((i: any) => i?.children === undefined).map((j: any) => j[nodeKey.value])
-  leftObj.options = obj.checkedNodes.filter((i: any) => i?.children === undefined).map((j: any) => ({ label: j.label, value: j[nodeKey.value] }))
-  // leftObj.checkedKeys = obj.checkedNodes.map((i: any) => i[nodeKey.value])
-  // leftObj.options = obj.checkedNodes.map((j: any) => ({ label: j.label, value: j[nodeKey.value] }))
-}
-
-function getLeftTotal() {
-  const data: any[] = []
-  eachTree(props.data, (i) => {
-    if (i.children === undefined) {
-      data.push(i[props?.treeProps?.nodeKey || 'id'])
-    }
-  })
-  return data.length
-}
-
-const handleMoveLeft = () => {
-  if (rightObj.checkedKeys.length) {
-    leftObj.checkedKeys = []
-    leftObj.options = []
-    rightObj.options = rightObj.options.filter((i) => !rightObj.checkedKeys.includes(i.value as string))
-    rightObj.checkedKeys = []
-    selectedKeys.value = rightObj.options.map((i) => i.value as string)
-    treeRef.value?.setCheckedKeys([])
-  }
-}
-
-const handleMoveRight = () => {
-  rightObj.options = [...rightObj.options, ...leftObj.options]
-  leftObj.checkedKeys = []
-  leftObj.options = []
-  selectedKeys.value = rightObj.options.map((i) => i.value as string)
-}
-
-// 获取初始选中
-const setInitChecked = () => {
-  const arr: CheckboxOption[] = []
-  eachTree(props.data, (i) => {
-    if (selectedKeys.value.includes(i[nodeKey.value] as string)) {
-      arr.push({ label: i.label, value: i[nodeKey.value] as string })
-    }
-  })
-  rightObj.options = arr
-}
-
-onMounted(() => {
-  leftObj.total = getLeftTotal()
-  setInitChecked()
-})
-</script>
-
-<style lang="scss" scoped>
-.el-transfer-panel__list {
-  height: auto;
-}
-</style>

package/packages/components/tree-transfer/src/type.ts

@@ -1,7 +0,0 @@
-import type { TreeComponentProps } from 'element-plus'
-
-export interface TreeTransferProps {
-  titles?: [string, string]
-  data: any[]
-  treeProps?: Partial<TreeComponentProps>
-}

package/packages/components/tree-transfer/src/utils.ts

@@ -1,23 +0,0 @@
-import pkg from 'xe-utils'
-
-const { mapTree } = pkg
-
-/**
- * @desc 过滤树
- * @param { values } 数组
- */
-type FilterTree = <T extends { children?: T[] }>(
-  array: T[],
-  iterate: (item: T, index?: number, items?: T[]) => boolean
-) => T[]
-
-export const filterTree: FilterTree = (values, fn) => {
-  const arr = values.filter(fn)
-  const data = mapTree(arr, (item) => {
-    if (item.children && item.children.length) {
-      item.children = item.children.filter(fn)
-    }
-    return item
-  })
-  return data
-}

package/packages/components.d.ts

@@ -1,34 +0,0 @@
-/* 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']
-    GiNavTabs: typeof import('./components/nav-tabs/src/nav-tabs.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/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from './useBemClass'
-export * from './useNavTabs'