gi-component 0.0.40 → 0.0.42

package/package.json

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

package/packages/components/card/src/card.vue

@@ -51,10 +51,10 @@ const getCardClass = computed(() => {
   if (props.bordered) {
     arr.push(b('card--bordered'))
   }
+  arr.push(b(`card--${props.size}`))
   if (props.inner) {
     arr.push(b('card--inner'))
   }
-  arr.push(b(`card--${props.size}`))
   return arr.join(' ')
 })
 
@@ -132,24 +132,6 @@ const getHeaderClass = computed(() => {
   box-sizing: border-box;
 }
 
-.#{a.$prefix}-card--full {
-  .#{a.$prefix}-card-body {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.#{a.$prefix}-card--inner {
-
-  .#{a.$prefix}-card-header,
-  .#{a.$prefix}-card-body,
-  .#{a.$prefix}-card-footer {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
 .#{a.$prefix}-card--small {
   .#{a.$prefix}-card-header {
     height: 36px;
@@ -168,4 +150,22 @@ const getHeaderClass = computed(() => {
     padding: var(--card-padding-y-small) var(--card-padding-x-small);
   }
 }
+
+.#{a.$prefix}-card--full {
+  .#{a.$prefix}-card-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.#{a.$prefix}-card--inner {
+
+  .#{a.$prefix}-card-header,
+  .#{a.$prefix}-card-body,
+  .#{a.$prefix}-card-footer {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
 </style>

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

@@ -24,8 +24,8 @@ const classNames = computed(() => [b('flex')])
 
 const gapMap: Record<string, string> = {
   small: '8px',
-  middle: '16px',
-  large: '24px'
+  middle: '12px',
+  large: '16px'
 }
 
 const resolvedGap = computed(() => {
@@ -50,7 +50,7 @@ const resolvedWrap = computed(() => {
 const style = computed<CSSProperties>(() => {
   const obj: CSSProperties = {
     display: 'flex',
-    flexDirection: props.vertical ? 'column' : 'row',
+    flexDirection: props.column || props.vertical ? 'column' : 'row',
     flexWrap: resolvedWrap.value,
     justifyContent: props.justify,
     alignItems: props.align

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

@@ -1,5 +1,7 @@
 export interface FlexProps {
   /** Flex 主轴的方向是否垂直，使用 flex-direction: column */
+  column?: boolean
+  /** 与 column 同义，保留用于兼容旧版 API */
   vertical?: boolean
   /** 设置元素单行显示还是多行显示，参考 flex-wrap；支持布尔值，true 为 wrap，false 为 nowrap */
   wrap?: 'nowrap' | 'wrap' | 'wrap-reverse' | boolean | ''

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

@@ -26,8 +26,9 @@ import { useBemClass } from '../../../hooks'
 
 const props = withDefaults(defineProps<TagProps>(), {
   type: 'light',
-  color: 'primary',
+  color: 'info',
   size: 'default',
+  round: false,
   closable: false
 })
 
@@ -96,8 +97,6 @@ function stylesForType(
   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',
@@ -116,21 +115,21 @@ function stylesForType(
       return {
         color,
         backgroundColor: 'transparent',
-        borderColor: color,
+        borderColor: `rgba(${r}, ${g}, ${b}, 0.6)`,
         ...closeHoverVars
       }
     case 'light-outline':
       return {
         color,
-        backgroundColor: bgTint,
-        borderColor: borderTint,
+        backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,
+        borderColor: `rgba(${r}, ${g}, ${b}, 0.2)`,
         ...closeHoverVars
       }
     case 'light':
     default:
       return {
         color,
-        backgroundColor: bgTint,
+        backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,
         ...closeHoverVars
       }
   }
@@ -142,6 +141,7 @@ const className = computed(() => {
     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(' ')
 })
@@ -185,10 +185,13 @@ $tag-size-large-padding: 0 10px;
   font-size: 12px;
   line-height: 1;
   white-space: nowrap;
-  cursor: pointer;
   border-radius: 3px;
 }
 
+.#{a.$prefix}-tag--round {
+  border-radius: 9999px;
+}
+
 .#{a.$prefix}-tag__icon {
   display: inline-flex;
   flex-shrink: 0;
@@ -237,6 +240,7 @@ $tag-size-large-padding: 0 10px;
   padding: $tag-size-small-padding;
 
   .#{a.$prefix}-tag__icon {
+
     :deep(.el-icon),
     :deep(svg) {
       width: 10px;
@@ -265,6 +269,7 @@ $tag-size-large-padding: 0 10px;
   padding: $tag-size-large-padding;
 
   .#{a.$prefix}-tag__icon {
+
     :deep(.el-icon),
     :deep(svg) {
       width: 12px;
@@ -316,7 +321,7 @@ $tag-size-large-padding: 0 10px;
   @each $s in $theme-colors {
     &.#{a.$prefix}-tag__color--#{$s} {
       color: var(--el-color-#{$s});
-      border-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});
@@ -332,11 +337,19 @@ $tag-size-large-padding: 0 10px;
     &.#{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);
+      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

@@ -31,6 +31,8 @@ export interface TagProps {
    * 左侧图标组件（如 `@element-plus/icons-vue` 图标）；与 `#icon` 插槽同时存在时以插槽为准
    */
   icon?: Component
+  /** 是否为胶囊圆角（大圆角） */
+  round?: boolean
   /** 是否可关闭 */
   closable?: boolean
 }