savor-ui 0.2.0 → 0.3.0

package/dist/es/theme/components/dropdown.scss

@@ -1,24 +1,24 @@
-@use '../mixins/function.scss' as *;
-@use '../mixins/mixins.scss' as *;
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
 
 @include b(dropdown) {
   @include e(list) {
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    box-shadow: getCssVar('shadow', '1');
-    background-color: getCssVar('color', 'bg-3');
+    box-shadow: getCssVar("shadow", "1");
+    background-color: getCssVar("color", "bg-3");
     padding: 4px;
     transform-origin: left top;
-    transition: all 0.3s getCssVar('bezier', '1');
-    border-radius: getCssVar('radius', 'medium');
+    transition: all 0.3s getCssVar("bezier", "1");
+    border-radius: getCssVar("radius", "medium");
   }
 }
 
 @include b(droption) {
-  height: getCssVar('size', 'medium');
-  line-height: getCssVar('size', 'medium');
-  color: getCssVar('color', 'text-1');
+  height: getCssVar("size", "medium");
+  line-height: getCssVar("size", "medium");
+  color: getCssVar("color", "text-1");
   margin-bottom: 4px;
   display: flex;
   align-items: center;
@@ -26,11 +26,16 @@
   padding: 0 8px;
   cursor: pointer;
   min-width: 80px;
-  border-radius: calc(getCssVar('radius', 'medium') - 1px);
+  border-radius: calc(getCssVar("radius", "medium") - 1px);
 
   &:hover {
-    color: getCssVar('color', 'primary-6');
-    background-color: getCssVar('color', 'fill-2');
+    color: getCssVar("color", "primary-6");
+    background-color: getCssVar("color", "fill-2");
+  }
+
+  &:active {
+    color: getCssVar("color", "primary-6");
+    background-color: getCssVar("color", "fill-3");
   }
 
   &:last-child {
@@ -42,7 +47,7 @@
     justify-content: center;
   }
   @include e(title) {
-    font-size: getCssVar('font-size', 'medium');
+    font-size: getCssVar("font-size", "medium");
     text-wrap: nowrap;
     flex: 1;
   }
@@ -57,20 +62,25 @@
 @include b(dsubmenu) {
   margin-bottom: 4px;
   @include e(item) {
-    height: getCssVar('size', 'medium');
-    line-height: getCssVar('size', 'medium');
-    color: getCssVar('color', 'text-1');
+    height: getCssVar("size", "medium");
+    line-height: getCssVar("size", "medium");
+    color: getCssVar("color", "text-1");
     display: flex;
     align-items: center;
     padding: 0 8px;
     cursor: pointer;
     min-width: 80px;
-    border-radius: calc(getCssVar('radius', 'medium') - 1px);
+    border-radius: calc(getCssVar("radius", "medium") - 1px);
     gap: 8px;
 
     &:hover {
-      color: getCssVar('color', 'primary-6');
-      background-color: getCssVar('color', 'fill-2');
+      color: getCssVar("color", "primary-6");
+      background-color: getCssVar("color", "fill-2");
+    }
+
+    &:active {
+      color: getCssVar("color", "primary-6");
+      background-color: getCssVar("color", "fill-3");
     }
 
     &:last-child {
@@ -83,7 +93,7 @@
     justify-content: center;
   }
   @include e(title) {
-    font-size: getCssVar('font-size', 'medium');
+    font-size: getCssVar("font-size", "medium");
     text-wrap: nowrap;
     flex: 1;
   }
@@ -97,11 +107,11 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    box-shadow: getCssVar('shadow', '1');
-    background-color: getCssVar('color', 'bg-3');
+    box-shadow: getCssVar("shadow", "1");
+    background-color: getCssVar("color", "bg-3");
     padding: 4px;
     transform-origin: left top;
-    transition: all 0.3s getCssVar('bezier', '1');
-    border-radius: getCssVar('radius', 'medium');
+    transition: all 0.3s getCssVar("bezier", "1");
+    border-radius: getCssVar("radius", "medium");
   }
 }

package/dist/es/theme/components/layout.scss

@@ -8,7 +8,6 @@
   flex-direction: column;
   width: 100%;
   box-sizing: border-box;
-  background-color: getCssVar("color", "bg-1");
 
   @include when(horizontal) {
     flex-direction: row;

package/dist/es/theme/components/pagination.scss

@@ -25,6 +25,11 @@
     &:active {
       background-color: getCssVar("color", "fill-3") !important;
     }
+    @include when(disabled) {
+      cursor: not-allowed;
+      background-color: transparent !important;
+      color: getCssVar("color", "text-3") !important;
+    }
   }
   @include e(item) {
     display: flex;

package/dist/es/theme/components/segmented.scss

@@ -33,7 +33,7 @@
     }
     @include when(disabled) {
       cursor: not-allowed;
-      color: getCssVar("color", "text-4");
+      color: getCssVar("color", "text-3");
       user-select: none;
     }
     &.is-selected.is-disabled {

package/dist/es/theme/components/select.scss

@@ -5,6 +5,19 @@
 @include b(select) {
   display: inline-flex;
 
+  @include when(readonly) {
+    cursor: pointer;
+  }
+
+  @include when(multiple) {
+    @each $size in $size-list {
+      @include m(#{$size}) {
+        height: auto;
+        min-height: getCssVar("size", $size);
+      }
+    }
+  }
+
   @each $size in $size-list {
     @include m(#{$size}) {
       height: getCssVar("size", $size);
@@ -20,6 +33,77 @@
     }
   }
 
+  @include e(tags-wrapper) {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    padding: 2px 8px;
+    position: relative;
+    border: 1px solid getCssVar("color", "fill-3");
+    border-radius: getCssVar("radius", "medium");
+    background-color: getCssVar("color", "bg-1");
+    cursor: pointer;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+    min-height: getCssVar("size", "medium");
+
+    &:hover {
+      border-color: getCssVar("color", "primary-5");
+    }
+  }
+
+  @include e(close) {
+    height: 18px;
+    width: 18px;
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: getCssVar("font-size", "medium");
+    border-radius: getCssVar("radius", "circle");
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+      background-color: getCssVar("color", "fill-3");
+    }
+    &:active {
+      background-color: getCssVar("color", "fill-2");
+    }
+  }
+
+  @include e(tags) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  @include e(input) {
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: getCssVar("font-size", "medium");
+    color: getCssVar("color", "text-1");
+    flex: 1;
+    min-width: 40px;
+    padding: 0;
+    line-height: inherit;
+
+    &::placeholder {
+      color: getCssVar("color", "text-3");
+    }
+  }
+
+  @include e(placeholder) {
+    color: getCssVar("color", "text-3");
+    font-size: getCssVar("font-size", "medium");
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   @include e(wrapper) {
     padding: 4px 0;
     box-sizing: border-box;
@@ -64,15 +148,22 @@
     color: getCssVar("color", "text-1");
     cursor: pointer;
     padding: 0 16px;
-    --ripple-color: rgba(0, 0, 0, 0.05);
+    display: flex;
+    align-items: center;
 
     &:hover {
       background-color: getCssVar("color", "fill-2");
       color: getCssVar("color", "primary-6");
     }
 
+    &:active {
+      background-color: getCssVar("color", "fill-3");
+      color: getCssVar("color", "primary-6");
+    }
+
     @include when(active) {
       color: getCssVar("color", "primary-6");
+      font-weight: 500;
     }
 
     @include when(highlight) {

package/dist/es/theme/components/space.scss

@@ -2,6 +2,10 @@
 
 @include b(space) {
   display: inline-flex;
+  flex-wrap: nowrap;
+  @include when(wrap) {
+    flex-wrap: wrap;
+  }
   @include e(item) {
     display: flex;
   }

package/dist/es/theme/components/tabs.scss

@@ -73,7 +73,7 @@
       color: getCssVar("color", "primary-5");
     }
     &.is-disabled {
-      color: getCssVar("color", "text-4");
+      color: getCssVar("color", "text-3");
       cursor: not-allowed;
     }
   }
@@ -129,11 +129,11 @@
     }
 
     @include when(disabled) {
-      color: getCssVar("color", "text-4");
+      color: getCssVar("color", "text-3");
       cursor: not-allowed;
 
       &:hover {
-        color: getCssVar("color", "text-4");
+        color: getCssVar("color", "text-3");
       }
     }
   }

package/dist/es/theme/components/wheel.scss

@@ -10,14 +10,23 @@
   color: getCssVar("color", "text-1");
   box-sizing: border-box;
   font-size: 14px;
+  user-select: none;
 
   &:hover {
     @include be(wheel, mask-top) {
-      background: linear-gradient(to bottom, rgba(#3867d6, 0.05) 0%, rgba(#3867d6, 0.3) 100%);
+      background: linear-gradient(
+        to bottom,
+        getCssVarRgba(0.05, "color", "primary-1") 0%,
+        getCssVarRgba(0.3, "color", "primary-3") 100%
+      );
     }
 
     @include be(wheel, mask-bottom) {
-      background: linear-gradient(to top, rgba(#3867d6, 0.05) 0%, rgba(#3867d6, 0.3) 100%);
+      background: linear-gradient(
+        to top,
+        getCssVarRgba(0.05, "color", "primary-1") 0%,
+        getCssVarRgba(0.3, "color", "primary-3") 100%
+      );
     }
 
     @include be(wheel, mask-center) {
@@ -26,7 +35,6 @@
     }
   }
 
-  // 箭头样式
   @include e(arrow) {
     width: 100%;
     height: 24px;
@@ -42,20 +50,17 @@
     }
   }
 
-  // 滚动列表容器
   @include e(list) {
     position: relative;
     overflow: hidden;
     width: 100%;
   }
 
-  // 列表内层（滚动容器）
   @include e(list-inner) {
     transition: transform 0.2s getCssVar("bezier", "1");
     width: 100%;
   }
 
-  // 选项样式
   @include e(item) {
     padding: 0 12px;
     text-align: center;
@@ -78,7 +83,7 @@
     flex-direction: column;
     z-index: 1;
   }
-  // 顶部遮罩
+
   @include e(mask-top) {
     background: linear-gradient(
       to bottom,
@@ -88,13 +93,11 @@
     flex: 0 0 auto;
   }
 
-  // 底部遮罩
   @include e(mask-bottom) {
     background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
     flex: 0 0 auto;
   }
 
-  // 中间选中框
   @include e(mask-center) {
     border-top-style: solid;
     border-top-width: 1px;

package/dist/es/theme/mixins/function.scss

@@ -1,12 +1,12 @@
-@use '../mixins/config.scss' as *;
+@use "../mixins/config.scss" as *;
 
 // join var name
 // joinVarName(('color', 'fill-1')) => '--l-color-fill-1'
 @function joinVarName($list) {
-  $name: '--' + $namespace;
+  $name: "--" + $namespace;
   @each $item in $list {
-    @if $item != '' {
-      $name: $name + '-' + $item;
+    @if $item != "" {
+      $name: $name + "-" + $item;
     }
   }
   @return $name;
@@ -21,3 +21,8 @@
 @function getCssVar($args...) {
   @return var(#{joinVarName($args)});
 }
+
+@function getCssVarRgba($alpha, $args...) {
+  // 核心：强制原样输出，SCSS 绝对不会解析
+  @return #{"color-mix(in srgb, " var(#{joinVarName($args)}) " " ($alpha * 100%) + ", transparent)"};
+}

package/dist/es/utils/src/theme/themeMap.mjs

@@ -53,10 +53,10 @@ var t = "s", n = [
 	lineHeightLarge: "24px",
 	lineHeightLarger: "28px",
 	radiusMini: "2px",
-	radiusSmall: "4px",
-	radiusMedium: "6px",
-	radiusLarge: "8px",
-	radiusLarger: "12px",
+	radiusSmall: "2px",
+	radiusMedium: "4px",
+	radiusLarge: "4px",
+	radiusLarger: "6px",
 	radiusRound: "999px",
 	radiusCircle: "100%",
 	bezier1: "cubic-bezier(0.4, 0, 0.2, 1)",

package/dist/json/vetur-attributes.json

@@ -390,6 +390,13 @@
   "s-config-provider/theme": {
     "description": "—"
   },
+  "s-config-provider-vapor/inputFilled": {
+    "description": "—",
+    "type": "boolean"
+  },
+  "s-config-provider-vapor/theme": {
+    "description": "—"
+  },
   "s-date-picker/change": {
     "description": "值改变时触发"
   },
@@ -1146,6 +1153,10 @@
     "description": "布局高度",
     "type": "string | number"
   },
+  "s-layout/bgColor": {
+    "description": "背景颜色",
+    "type": "string"
+  },
   "s-layout-header/height": {
     "description": "布局头高度",
     "type": "string | number"
@@ -1658,6 +1669,13 @@
     "description": "滚动容器id",
     "type": "string"
   },
+  "s-scrollbar/backtop": {
+    "description": "是否显示返回顶部按钮",
+    "type": "boolean"
+  },
+  "s-scrollbar/backtopProps": {
+    "description": "返回顶部按钮属性"
+  },
   "s-segmented-field-names/label": {
     "description": "选项标签",
     "type": "string"
@@ -1689,8 +1707,8 @@
   "s-select/change": {
     "description": "选择器值改变时触发"
   },
-  "s-select/selectOption": {
-    "description": "选择器选项改变时触发"
+  "s-select/remove": {
+    "description": "多选模式下移除标签时触发"
   },
   "s-select/modelValue": {
     "description": "选择器值（v-model）"
@@ -1705,6 +1723,10 @@
   "s-select/options": {
     "description": "选择器选项"
   },
+  "s-select/multiple": {
+    "description": "选择器是否可多选",
+    "type": "boolean"
+  },
   "s-select/clearable": {
     "description": "是否支持清空选择",
     "type": "boolean"
@@ -1795,6 +1817,10 @@
   "s-space/justify": {
     "description": "水平对齐方式"
   },
+  "s-space/wrap": {
+    "description": "是否换行",
+    "type": "boolean"
+  },
   "s-statistic/title": {
     "description": "标题",
     "type": "string"

package/dist/json/vetur-tags.json

@@ -174,6 +174,12 @@
       "theme"
     ]
   },
+  "s-config-provider-vapor": {
+    "attributes": [
+      "inputFilled",
+      "theme"
+    ]
+  },
   "s-date-picker": {
     "attributes": [
       "change",
@@ -474,7 +480,8 @@
   },
   "s-layout": {
     "attributes": [
-      "height"
+      "height",
+      "bgColor"
     ]
   },
   "s-layout-header": {
@@ -692,7 +699,9 @@
       "maxHeight",
       "padding",
       "always",
-      "id"
+      "id",
+      "backtop",
+      "backtopProps"
     ]
   },
   "s-segmented-field-names": {
@@ -714,11 +723,12 @@
   "s-select": {
     "attributes": [
       "change",
-      "selectOption",
+      "remove",
       "modelValue",
       "size",
       "placeholder",
       "options",
+      "multiple",
       "clearable",
       "maxHeight",
       "disabled",
@@ -751,7 +761,8 @@
       "size",
       "fill",
       "align",
-      "justify"
+      "justify",
+      "wrap"
     ]
   },
   "s-statistic": {

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "savor-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -1046,6 +1046,34 @@
             }
           ]
         },
+        {
+          "name": "s-config-provider-vapor",
+          "attributes": [
+            {
+              "name": "inputFilled",
+              "description": "—",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "theme",
+              "description": "—",
+              "value": {
+                "type": "ConfigProviderVaporTheme",
+                "kind": "expression"
+              }
+            }
+          ],
+          "events": [],
+          "slots": [
+            {
+              "name": "default",
+              "description": "—"
+            }
+          ]
+        },
         {
           "name": "s-date-picker",
           "attributes": [
@@ -2948,6 +2976,14 @@
                 "type": "string | number",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "bgColor",
+              "description": "背景颜色",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
             }
           ],
           "events": [],
@@ -4299,6 +4335,22 @@
                 "type": "string",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "backtop",
+              "description": "是否显示返回顶部按钮",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "backtopProps",
+              "description": "返回顶部按钮属性",
+              "value": {
+                "type": "BackTopProps",
+                "kind": "expression"
+              }
             }
           ],
           "events": [],
@@ -4306,6 +4358,10 @@
             {
               "name": "default",
               "description": "默认"
+            },
+            {
+              "name": "backtop",
+              "description": "返回顶部按钮"
             }
           ]
         },
@@ -4424,6 +4480,14 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "multiple",
+              "description": "选择器是否可多选",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "clearable",
               "description": "是否支持清空选择",
@@ -4535,8 +4599,8 @@
               "description": "选择器值改变时触发"
             },
             {
-              "name": "selectOption",
-              "description": "选择器选项改变时触发"
+              "name": "remove",
+              "description": "多选模式下移除标签时触发"
             }
           ],
           "slots": [
@@ -4659,6 +4723,14 @@
                 "type": "center | start | end | between | around",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "wrap",
+              "description": "是否换行",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
             }
           ],
           "events": [],