gi-component 0.0.49 → 0.0.51

package/packages/components/tabs/src/tabs.vue

@@ -1,139 +0,0 @@
-<template>
-  <div :class="getClass">
-    <div :class="b('tabs__default')">
-      <slot>
-        <ElTabs :key="props.type" v-model="model" :type="props.type" :stretch="props.stretch"
-          @tab-click="(p, e) => emits('tab-click', p, e)" @tab-change="emits('tab-change', $event as any)">
-          <ElTabPane v-for="item in props.options" :key="item.name" :name="item.name" :disabled="item?.disabled">
-            <template #label>
-              <slot name="label" :data="item">{{ item.label }}</slot>
-            </template>
-          </ElTabPane>
-        </ElTabs>
-      </slot>
-    </div>
-    <div v-if="slots.extra" :class="b('tabs__extra')">
-      <slot name="extra"></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { TabsProps as ElTabsProps, TabsPaneContext } from 'element-plus'
-import type { TabsOptionItem, TabsProps } from './type.ts'
-import { ElTabPane, ElTabs } from 'element-plus'
-import { computed, useSlots } from 'vue'
-import { useBemClass } from '../../../hooks'
-
-const model = defineModel<ElTabsProps['modelValue']>()
-
-const props = withDefaults(defineProps<TabsProps>(), {
-  type: '',
-  options: () => [],
-  size: 'medium',
-  inner: false
-})
-
-const emits = defineEmits<{
-  (e: 'tab-click', pane: TabsPaneContext, ev: Event): void
-  (e: 'tab-change', value: string): void
-}>()
-
-defineSlots<{
-  default: () => void
-  extra: () => void
-  label: (e: { data: TabsOptionItem }) => void
-}>()
-
-const slots = useSlots()
-const { b } = useBemClass()
-
-const getClass = computed(() => {
-  const arr: string[] = [b('tabs')]
-  arr.push(b(`tabs--${props.size}`))
-  if (props.inner) {
-    arr.push(b('tabs--inner'))
-  }
-  return arr.join(' ')
-})
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/var.scss' as a;
-
-:deep(.el-tabs__nav-prev),
-:deep(.el-tabs__nav-next) {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.#{a.$prefix}-tabs {
-  width: 100%;
-  padding: 0 var(--padding);
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--el-border-color);
-  box-sizing: border-box;
-  background-color: var(--el-bg-color);
-
-  &__default {
-    flex: 1;
-    overflow: hidden;
-
-    :deep(.el-tabs__header) {
-      margin-bottom: 0;
-
-      .el-tabs__nav-wrap {
-        &::after {
-          display: none;
-        }
-      }
-    }
-
-    :deep(.el-tabs__active-bar) {
-      bottom: 1px;
-    }
-  }
-
-  &__extra {
-    margin-left: 10px;
-    align-self: flex-start;
-  }
-}
-
-:deep(.el-tabs--card) {
-  >.el-tabs__header {
-    border-bottom: none;
-  }
-}
-
-:deep(.el-tabs--border-card) {
-  border-bottom: none;
-
-  >.el-tabs__content {
-    display: none;
-  }
-
-  >.el-tabs__header {
-    border-bottom: none;
-  }
-}
-
-.#{a.$prefix}-tabs--small {
-  padding: 0 10px;
-
-  :deep(.el-tabs) {
-    --el-tabs-header-height: 32px;
-
-    .el-tabs__item {
-      font-size: 12px;
-    }
-  }
-}
-
-.#{a.$prefix}-tabs--inner {
-  padding: 0;
-}
-</style>

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

@@ -1,15 +0,0 @@
-import type { TabsProps as ElTabsProps } from 'element-plus'
-
-export type TabsOptionItem = {
-  label: string
-  name: string
-  disabled?: boolean
-}
-
-export interface TabsProps
-  extends Partial<Pick<ElTabsProps, 'type' | 'stretch'>> {
-  type?: ElTabsProps['type']
-  options?: TabsOptionItem[]
-  size?: 'small' | 'medium'
-  inner?: boolean // 内嵌模式
-}

package/packages/components/tag/index.ts

@@ -1,5 +0,0 @@
-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

@@ -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-text-color-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