@veltra/desktop 1.0.6 → 1.0.8

package/src/components/progress-nodes/style.scss

@@ -5,13 +5,8 @@
 $root-name: progress-nodes;
 
 @include m.b($root-name) {
-  // CSS 变量定义
-  --checked-color: #{fn.use-var(color, primary)};
-  --node-color: #{fn.use-var(text-color, placeholder)};
-  --dot-size: 14px;
-
   position: relative;
-  color: var(--node-color);
+  color: #{fn.use-var(text-color, placeholder)};
   overflow: auto;
   cursor: default;
 
@@ -28,13 +23,6 @@ $root-name: progress-nodes;
     cursor: grabbing;
   }
 
-  // 颜色类型变体
-  @each $type in vars.$color-types {
-    @include m.m($type) {
-      --checked-color: #{fn.use-var(color, $type)};
-    }
-  }
-
   // 列表容器
   @include m.e(list) {
     position: relative;
@@ -82,8 +70,8 @@ $root-name: progress-nodes;
   // 节点圆点
   @include m.e(dot) {
     position: relative;
-    width: var(--dot-size);
-    height: var(--dot-size);
+    width: 14px;
+    height: 14px;
     border: 2px solid currentColor;
     border-radius: 50%;
     background-color: fn.use-var(bg-color, top);
@@ -107,18 +95,36 @@ $root-name: progress-nodes;
     @include m.ellipsis;
   }
 
-  // checked 状态 - 圆点填充 colorType 颜色
   @include m.bem($root-name, item) {
     @include m.is(checked) {
-      color: var(--checked-color);
+      color: #{fn.use-var(color, primary)};
 
       @include m.bem($root-name, dot) {
-        background-color: var(--checked-color);
-        border-color: var(--checked-color);
+        background-color: #{fn.use-var(color, primary)};
+        border-color: #{fn.use-var(color, primary)};
       }
 
       @include m.bem($root-name, label) {
-        color: var(--checked-color);
+        color: #{fn.use-var(color, primary)};
+      }
+    }
+  }
+
+  @each $type in vars.$color-types {
+    @include m.m($type) {
+      @include m.bem($root-name, item) {
+        @include m.is(checked) {
+          color: #{fn.use-var(color, $type)};
+
+          @include m.bem($root-name, dot) {
+            background-color: #{fn.use-var(color, $type)};
+            border-color: #{fn.use-var(color, $type)};
+          }
+
+          @include m.bem($root-name, label) {
+            color: #{fn.use-var(color, $type)};
+          }
+        }
       }
     }
   }
@@ -164,10 +170,10 @@ $root-name: progress-nodes;
 
   @include m.e(link) {
     // 宽度需要跨越当前 item 的右 padding + 下一个 item 的左 padding
-    width: calc(100% - var(--dot-size) + 24px);
+    width: calc(100% - 14px + 24px);
     height: 0;
     border-width: 1px 0 0 0;
-    left: calc(50% + var(--dot-size) / 2);
+    left: calc(50% + 14px / 2);
     top: 50%;
     transform: translateY(-50%);
   }

package/src/components/radio/style.scss

@@ -4,10 +4,6 @@
 
 $root-name: radio;
 @include m.b($root-name) {
-  @include m.dark() {
-    --u-radio-border: #595959;
-  }
-
   cursor: pointer;
   vertical-align: middle;
   user-select: none;

package/src/components/select/style.scss

@@ -3,18 +3,6 @@
 
 $root-name: select;
 @include m.b($root-name) {
-  --u-menu-hover-bg: rgba(148, 163, 184, 0.12);
-  --u-menu-hover-color: #{fn.use-var(text-color, title)};
-  --u-menu-active-bg: rgba(59, 130, 246, 0.12);
-  --u-menu-active-color: var(--u-color-primary-dark-1);
-
-  @include m.dark() {
-    --u-menu-hover-bg: rgba(148, 163, 184, 0.14);
-    --u-menu-hover-color: #{fn.use-var(text-color, title)};
-    --u-menu-active-bg: rgba(96, 165, 250, 0.2);
-    --u-menu-active-color: #{fn.use-var(text-color, white)};
-  }
-
   width: 100%;
 
   @include m.e(content-filter) {

package/src/components/steps/style.scss

@@ -10,13 +10,20 @@ $root-name: steps;
   padding: 0;
   margin: 0;
 
-  /** 颜色变量 */
   @each $type in vars.$color-types {
     @include m.em(finished, $type) {
-      --finished-color: #{fn.use-var(color, $type)};
+      @include m.e(item) {
+        @include m.is(finished) {
+          color: fn.use-var(color, $type);
+        }
+      }
     }
     @include m.em(current, $type) {
-      --current-color: #{fn.use-var(color, $type)};
+      @include m.e(item) {
+        @include m.is(current) {
+          color: fn.use-var(color, $type);
+        }
+      }
     }
   }
 
@@ -24,13 +31,6 @@ $root-name: steps;
   @include m.e(item) {
     font-weight: 600;
     color: fn.use-var(text-color, placeholder);
-
-    @include m.is(finished) {
-      color: var(--finished-color);
-    }
-    @include m.is(current) {
-      color: var(--current-color);
-    }
   }
 
   @include m.e(node) {

package/src/components/switch/style.scss

@@ -4,10 +4,6 @@
 
 $root-name: switch;
 @include m.b($root-name) {
-  --u-switch-height-small: 18px;
-  --u-switch-height-default: 20px;
-  --u-switch-height-large: 24px;
-
   display: inline-flex;
   align-items: center;
   cursor: pointer;

package/src/components/table/style.scss

@@ -14,32 +14,6 @@ $root-name: table;
 }
 
 @include m.b($root-name) {
-  --u-table-border-color: #e9e9e9;
-  --u-table-header-bg: #f4f5f7;
-  --u-table-header-color: #{fn.use-var(text-color, title)};
-  --u-table-stripe-bg: #f8fafc;
-  --u-table-stripe-color: inherit;
-  --u-table-hover-bg: #{fn.use-var(bg-color, hover)};
-  --u-table-hover-color: inherit;
-  --u-table-current-bg: #{fn.use-var(bg-color, hover)};
-  --u-table-current-color: inherit;
-  --u-table-checked-bg: var(--u-color-primary-light-9);
-  --u-table-checked-color: inherit;
-
-  @include m.dark() {
-    --u-table-border-color: #404040;
-    --u-table-header-bg: #2a2a2a;
-    --u-table-header-color: #{fn.use-var(text-color, main)};
-    --u-table-stripe-bg: #2a2a2a;
-    --u-table-stripe-color: #{fn.use-var(text-color, main)};
-    --u-table-hover-bg: #333333;
-    --u-table-hover-color: #{fn.use-var(text-color, title)};
-    --u-table-current-bg: #{fn.use-var(bg-color, hover)};
-    --u-table-current-color: inherit;
-    --u-table-checked-bg: var(--u-color-primary-dark-1);
-    --u-table-checked-color: inherit;
-  }
-
   width: 100%;
   position: relative;
   border: 1px solid var(--u-table-border-color);

package/src/components/tag/style.scss

@@ -5,12 +5,6 @@
 
 $root-name: tag;
 
-:root {
-  --u-tag-small: 20px;
-  --u-tag-default: 24px;
-  --u-tag-large: 28px;
-}
-
 @include m.b($root-name) {
   cursor: default;
   color: fn.use-var(text-color, main);

package/src/types/breadcrumb.ts

@@ -0,0 +1,44 @@
+import type { ComponentSize, DeconstructValue } from '@veltra/utils'
+
+/** 面包屑单项 */
+export interface BreadcrumbItem {
+  /** 展示文案 */
+  title: string
+  /** 存在时渲染为 `<a>`，由浏览器处理导航 */
+  href?: string
+  /** 为 true 时不跳转、不触发 click */
+  disabled?: boolean
+}
+
+/** 面包屑组件属性 */
+export interface BreadcrumbProps {
+  /** 路径项，顺序为从一级到末级 */
+  items: BreadcrumbItem[]
+  /** 尺寸 */
+  size?: ComponentSize
+  /**
+   * 末级是否作为链接渲染
+   * @default false — 末级为当前页，使用 `aria-current="page"`
+   */
+  lastLinked?: boolean
+}
+
+/** `item` 插槽作用域 */
+export interface BreadcrumbSlotScope {
+  item: BreadcrumbItem
+  index: number
+  isLast: boolean
+}
+
+/** 面包屑组件事件 */
+export interface BreadcrumbEmits {
+  /**
+   * 可交互项（无 `href` 的链式项）被点击时触发；有 `href` 时不触发（走原生导航）
+   */
+  (e: 'click', item: BreadcrumbItem, index: number, ev: Event): void
+}
+
+/** @internal */
+export interface _BreadcrumbExposed {}
+
+export type BreadcrumbExposed = DeconstructValue<_BreadcrumbExposed>

package/src/types/index.ts

@@ -23,6 +23,7 @@ export * from './button'
 export * from './date-panel'
 export * from './dialog'
 export * from './batch-edit'
+export * from './breadcrumb'
 export * from './list'
 export * from './action'
 export * from './empty'