@sdata/web-vue 1.6.0 → 1.7.0

package/es/verification-code/style/index.d.ts

@@ -1,2 +1,2 @@
-import '../../style/index.less';
-import './index.less';
+import '../../style/index.scss';
+import './index.scss';

package/es/verification-code/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/verification-code/style/index.scss

@@ -0,0 +1,34 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/verification-code/style/token.scss' as *;
+@use '@components/input/style/token.scss' as *;
+
+$verification-code-prefix-cls: string.unquote('#{theme.$prefix}-verification-code');
+$input-prefix-cls: string.unquote('#{theme.$prefix}-input');
+
+.#{$verification-code-prefix-cls} {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  column-gap: 4px;
+
+  .#{$input-prefix-cls} {
+    width: $input-size-default-height;
+    padding-right: 0;
+    padding-left: 0;
+    text-align: center;
+  }
+
+  .#{$input-prefix-cls}-size-small {
+    width: $input-size-small-height;
+  }
+
+  .#{$input-prefix-cls}-size-mini {
+    width: $input-size-mini-height;
+  }
+
+  .#{$input-prefix-cls}-size-large {
+    width: $input-size-large-height;
+  }
+}

package/es/verification-code/style/token.scss

@@ -0,0 +1 @@
+@use '@style/theme/index.scss' as *;

package/es/watermark/style/index.d.ts

@@ -1 +1 @@
-import '../../style/index.less';
+import '../../style/index.scss';

package/es/watermark/style/index.js

@@ -1 +1 @@
-import "../../style/index.less";
+import "../../style/index.scss";

package/es/web-vue.css

@@ -0,0 +1,5 @@
+
+.sd-theme-provider[data-v-a0a91a8a] {
+    min-width: 0;
+}
+/*$vite$:1*/

package/json/vetur-attributes.json

@@ -792,6 +792,12 @@
     "description": "View starts from the right and ends on the left",
     "type": "boolean"
   },
+  "sd-config-provider/theme": {
+    "description": "Runtime theme configuration object"
+  },
+  "sd-config-provider/theme-mode": {
+    "description": "Theme mode applied to the current ConfigProvider subtree"
+  },
   "sd-range-picker/change": {
     "description": "The component value changes"
   },

package/json/vetur-tags.json

@@ -332,7 +332,9 @@
       "global",
       "scroll-to-close",
       "exchange-time",
-      "rtl"
+      "rtl",
+      "theme",
+      "theme-mode"
     ]
   },
   "sd-range-picker": {
@@ -1398,6 +1400,9 @@
       "textarea-attrs"
     ]
   },
+  "sdtheme-provider": {
+    "attributes": []
+  },
   "sd-time-picker": {
     "attributes": [
       "change",

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -2067,6 +2067,22 @@
                 "type": "boolean",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "theme",
+              "description": "Runtime theme configuration object",
+              "value": {
+                "type": "SDThemeConfig",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "theme-mode",
+              "description": "Theme mode applied to the current ConfigProvider subtree",
+              "value": {
+                "type": "SDThemeMode",
+                "kind": "expression"
+              }
             }
           ],
           "events": [],
@@ -8780,6 +8796,12 @@
           ],
           "slots": []
         },
+        {
+          "name": "sdtheme-provider",
+          "attributes": [],
+          "events": [],
+          "slots": []
+        },
         {
           "name": "sd-time-picker",
           "attributes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",
@@ -21,7 +21,7 @@
   "sideEffects": [
     "dist/*",
     "es/**/style/*",
-    "*.less"
+    "*.scss"
   ],
   "module": "es/index.js",
   "types": "es/index.d.ts",
@@ -77,7 +77,7 @@
     "glob": "^13.0.6",
     "jest-serializer-vue": "^3.1.0",
     "jsdom": "^29.0.2",
-    "less": "^4.6.4",
+    "sass": "^1.94.0",
     "semantic-release": "^25.0.3",
     "svgo": "^4.0.1",
     "typescript": "^6.0.2",
@@ -96,19 +96,18 @@
   },
   "web-types": "json/web-types.json",
   "scripts": {
-    "predev": "pnpm run icongen && pnpm run lessgen",
+    "predev": "pnpm run icongen",
     "dev": "vp run task:dev-component",
     "start": "pnpm run dev",
     "icongen": "vp run gen:icons",
-    "lessgen": "vp run gen:less",
     "jsongen": "vp run gen:web-types",
     "build": "pnpm run build:component && pnpm run build:style && pnpm run build:dts && pnpm run jsongen",
-    "prebuild:component": "pnpm run icongen && pnpm run lessgen",
+    "prebuild:component": "pnpm run icongen",
     "build:component": "vp run task:build-component",
-    "prebuild:module": "pnpm run icongen && pnpm run lessgen",
+    "prebuild:module": "pnpm run icongen",
     "build:module": "vp run task:build-module",
-    "prebuild:style": "pnpm run lessgen",
     "build:style": "vp run task:build-style",
+    "fix:scss-legacy-props": "node ./scripts/fix-scss-legacy-property-refs.mjs",
     "prebuild:dts": "pnpm run icongen",
     "build:dts": "node ./scripts/build-dts.mjs",
     "dtsgen": "pnpm run build:dts",

package/dist/sd.less

@@ -1,2 +0,0 @@
-@import '../es/index.less';
-

package/es/_components/auto-tooltip/style/index.less

@@ -1,10 +0,0 @@
-@import url('../../../style/theme/index.less');
-
-@auto-tooltip-prefix-cls: ~'@{prefix}-auto-tooltip';
-
-.@{auto-tooltip-prefix-cls} {
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}

package/es/_components/input-label/style/index.less

@@ -1,7 +0,0 @@
-@import url('./input-label.less');
-
-@input-label-prefix-cls: ~'@{prefix}-input-label';
-
-.@{input-label-prefix-cls} {
-  .input-label-style(@input-label-prefix-cls);
-}

package/es/_components/input-label/style/input-label.less

@@ -1,70 +0,0 @@
-@import url('../../../input/style/token.less');
-@import url('../../../input/style/input.less');
-
-.input-label-style(@cls) {
-  &.@{cls}-search {
-    cursor: text;
-
-    & .@{cls}-value {
-      pointer-events: none;
-    }
-  }
-
-  .input-wrapper-style(@cls);
-
-  cursor: pointer;
-
-  .hide-input-element() {
-    // A div with width: 0 can also cause line breaks to cause the input box to be stretched, and to separate it from the standard document flow
-    position: absolute;
-    // Need to hide the input while ensuring that it can be focused by the Tab key
-    // So don't use display: none / visibility: hidden
-    width: 0 !important;
-  }
-
-  .@{cls}-input {
-    .input-style();
-
-    &-hidden {
-      .hide-input-element();
-    }
-  }
-
-  .@{cls}-value {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    .text-ellipsis();
-
-    // Fix the style problem that the height of the outer div of the select layer exceeds 4px when the value is an empty string.
-    &::after {
-      font-size: 0;
-      line-height: 0;
-      visibility: hidden;
-      content: '.';
-    }
-
-    &-hidden {
-      display: none;
-    }
-  }
-
-  .size(@size) {
-    @height: ~'input-size-@{size}-height';
-
-    &.@{cls}-size-@{size} .@{cls}-input,
-    &.@{cls}-size-@{size} .@{cls}-value {
-      .input-size(@size);
-    }
-
-    &.@{cls}-size-@{size} .@{cls}-value {
-      min-height: round(@@height - @input-border-width * 2);
-    }
-  }
-
-  .size(mini);
-  .size(medium);
-  .size(small);
-  .size(large);
-}

package/es/_components/picker/style/index.css

@@ -1,186 +0,0 @@
-/******** 基础配置项 end *******/
-/******** 基础配置项 end *******/
-/******** 高级配置项 *******/
-/******** 高级配置项 end *******/
-/******** borderSize *******/
-/******** borderStyle *******/
-/******** radius *******/
-/******** shadow distance *******/
-/******** size *******/
-/******** spacing *******/
-/******** shadow *******/
-/******** opacity *******/
-/******** fontSize *******/
-/******** fontWeight ********/
-/******** Primary *******/
-/******** success *******/
-/******** warning *******/
-/******** danger *******/
-/******** link *******/
-/******** radius *******/
-/********* icon hover *********/
-.sd-picker {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 4px 11px 4px 4px;
-  line-height: 1.5715;
-  background-color: var(--color-fill-2);
-  border: 1px solid transparent;
-  border-radius: var(--border-radius-small);
-  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
-}
-.sd-picker-input {
-  display: inline-flex;
-  flex: 1;
-}
-.sd-picker input {
-  width: 100%;
-  padding: 0;
-  padding-left: 8px;
-  color: var(--color-text-2);
-  line-height: 1.5715;
-  text-align: left;
-  background-color: transparent;
-  border: none;
-  outline: none;
-  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
-}
-.sd-picker input::placeholder {
-  color: var(--color-text-3);
-}
-.sd-picker input[disabled] {
-  -webkit-text-fill-color: var(--color-text-4);
-}
-.sd-picker-has-prefix {
-  padding-left: 12px;
-}
-.sd-picker-prefix {
-  padding-right: 4px;
-  color: var(--color-text-2);
-  font-size: 14px;
-}
-.sd-picker-suffix {
-  display: inline-flex;
-  align-items: center;
-  margin-left: 4px;
-}
-.sd-picker-suffix .sd-feedback-icon {
-  display: inline-flex;
-}
-.sd-picker-suffix .sd-feedback-icon-status-validating {
-  color: rgb(var(--primary-6));
-}
-.sd-picker-suffix .sd-feedback-icon-status-success {
-  color: rgb(var(--success-6));
-}
-.sd-picker-suffix .sd-feedback-icon-status-warning {
-  color: rgb(var(--warning-6));
-}
-.sd-picker-suffix .sd-feedback-icon-status-error {
-  color: rgb(var(--danger-6));
-}
-.sd-picker-suffix .sd-feedback-icon {
-  margin-left: 4px;
-}
-.sd-picker-suffix-icon {
-  color: var(--color-text-2);
-}
-.sd-picker .sd-picker-clear-icon {
-  display: none;
-  color: var(--color-text-2);
-  font-size: 12px;
-}
-.sd-picker:hover {
-  background-color: var(--color-fill-3);
-  border-color: transparent;
-}
-.sd-picker:not(.sd-picker-disabled):hover .sd-picker-clear-icon {
-  display: inline-block;
-}
-.sd-picker:not(.sd-picker-disabled):hover .sd-picker-suffix .sd-picker-clear-icon + span {
-  display: none;
-}
-.sd-picker input[disabled] {
-  color: var(--color-text-4);
-  cursor: not-allowed;
-}
-.sd-picker input[disabled]::placeholder {
-  color: var(--color-text-4);
-}
-.sd-picker-error {
-  background-color: var(--color-danger-light-1);
-  border-color: transparent;
-}
-.sd-picker-error:hover {
-  background-color: var(--color-danger-light-2);
-  border-color: transparent;
-}
-.sd-picker-focused {
-  box-shadow: 0 0 0 0 var(--color-primary-light-2);
-}
-.sd-picker-focused,
-.sd-picker-focused:hover {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--primary-6));
-}
-.sd-picker-focused.sd-picker-error {
-  border-color: rgb(var(--danger-6));
-  box-shadow: 0 0 0 0 var(--color-danger-light-2);
-}
-.sd-picker-focused .sd-picker-input-active input,
-.sd-picker-focused:hover .sd-picker-input-active input {
-  background: var(--color-fill-2);
-}
-.sd-picker-disabled,
-.sd-picker-disabled:hover {
-  color: var(--color-text-4);
-  background-color: var(--color-fill-2);
-  border-color: transparent;
-  cursor: not-allowed;
-}
-.sd-picker-disabled input[disabled],
-.sd-picker-disabled:hover input[disabled] {
-  color: var(--color-text-4);
-  cursor: not-allowed;
-}
-.sd-picker-disabled input[disabled]::placeholder,
-.sd-picker-disabled:hover input[disabled]::placeholder {
-  color: var(--color-text-4);
-}
-.sd-picker-separator {
-  min-width: 10px;
-  padding: 0 8px;
-  color: var(--color-text-3);
-}
-.sd-picker-disabled .sd-picker-separator {
-  color: var(--color-text-4);
-}
-.sd-picker-disabled .sd-picker-suffix-icon {
-  color: var(--color-text-4);
-}
-.sd-picker-size-mini {
-  height: 24px;
-}
-.sd-picker-size-mini input {
-  font-size: 12px;
-}
-.sd-picker-size-small {
-  height: 28px;
-}
-.sd-picker-size-small input {
-  font-size: 14px;
-}
-.sd-picker-size-medium {
-  height: 32px;
-}
-.sd-picker-size-medium input {
-  font-size: 14px;
-}
-.sd-picker-size-large {
-  height: 36px;
-}
-.sd-picker-size-large input {
-  font-size: 14px;
-}

package/es/_components/picker/style/index.less

@@ -1,190 +0,0 @@
-@import url('../../../input/style/input.less');
-@import url('./token.less');
-
-.@{prefix}-picker {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: @picker-padding-horizontal 11px 4px 4px;
-  line-height: @line-height-base;
-  background-color: @picker-color-bg;
-  border: 1px solid @picker-color-border;
-  border-radius: @picker-input-border-radius;
-  transition: all @transition-duration-1 @transition-timing-function-linear;
-
-  &-input {
-    display: inline-flex;
-    flex: 1;
-  }
-
-  input {
-    width: 100%;
-    padding: 0;
-    padding-left: 8px;
-    color: @picker-color-text;
-    line-height: @line-height-base;
-    text-align: left;
-    background-color: @color-transparent;
-    border: none;
-    outline: none;
-    transition: all @transition-duration-1 @transition-timing-function-linear;
-
-    &::placeholder {
-      color: @picker-color-placeholder;
-    }
-
-    // fix color error under disabled status in safari
-    &[disabled] {
-      -webkit-text-fill-color: @input-color-text_disabled;
-    }
-  }
-
-  &-has-prefix {
-    padding-left: @input-padding-horizontal;
-  }
-
-  &-prefix {
-    padding-right: @picker-padding-horizontal;
-    color: @input-color-prefix-text;
-    font-size: @input-size-default-icon-suffix-size;
-  }
-
-  &-suffix {
-    display: inline-flex;
-    align-items: center;
-    margin-left: 4px;
-
-    .input-suffix-feedback-icon-color();
-
-    .@{prefix}-feedback-icon {
-      margin-left: 4px;
-    }
-  }
-
-  &-suffix-icon {
-    color: @picker-color-icon;
-  }
-
-  & &-clear-icon {
-    display: none;
-    color: var(~'@{sd-cssvars-prefix}-color-text-2');
-    font-size: 12px;
-  }
-
-  &:hover {
-    background-color: @picker-color-bg_hover;
-    border-color: @picker-color-border_hover;
-  }
-
-  &:not(&-disabled):hover &-clear-icon {
-    display: inline-block;
-  }
-
-  &:not(&-disabled):hover &-suffix &-clear-icon + span {
-    display: none;
-  }
-
-  input[disabled] {
-    color: @picker-color-text_disabled;
-    cursor: not-allowed;
-
-    &::placeholder {
-      color: @picker-color-placeholder_disabled;
-    }
-  }
-
-  &-error {
-    background-color: @picker-color-bg_error;
-    border-color: @picker-color-border_error;
-
-    &:hover {
-      background-color: @picker-color-bg_error_hover;
-      border-color: @picker-color-border_error_hover;
-    }
-  }
-
-  &-focused {
-    box-shadow: 0 0 0 @picker-size-shadow_focus @picker-color-shadow_focus;
-  }
-
-  &-focused,
-  &-focused:hover {
-    background-color: @picker-color-bg_focus;
-    border-color: @picker-color-border_focus;
-  }
-
-  &-focused&-error {
-    border-color: @picker-color-border_error_focus;
-    box-shadow: 0 0 0 @picker-size-shadow_error_focus @picker-color-shadow_error_focus;
-  }
-
-  &-focused &-input-active input,
-  &-focused:hover &-input-active input {
-    background: @picker-range-color-bg-input_focus;
-  }
-
-  &-disabled,
-  &-disabled:hover {
-    color: @picker-color-text_disabled;
-    background-color: @picker-color-bg_disabled;
-    border-color: @picker-color-border_disabled;
-    cursor: not-allowed;
-
-    input[disabled] {
-      color: @picker-color-text_disabled;
-      cursor: not-allowed;
-
-      &::placeholder {
-        color: @picker-color-placeholder_disabled;
-      }
-    }
-  }
-
-  &-separator {
-    min-width: 10px;
-    padding: 0 8px;
-    color: @picker-color-separator;
-  }
-
-  &-disabled &-separator {
-    color: @picker-color-separator_disabled;
-  }
-
-  &-disabled &-suffix-icon {
-    color: @picker-color-icon_disabled;
-  }
-
-  // Size
-  &-size-mini {
-    height: @picker-size-mini;
-
-    input {
-      font-size: @picker-size-mini-font-size-text;
-    }
-  }
-
-  &-size-small {
-    height: @picker-size-small;
-
-    input {
-      font-size: @picker-size-small-font-size-text;
-    }
-  }
-
-  &-size-medium {
-    height: @picker-size-default;
-
-    input {
-      font-size: @picker-size-default-font-size-text;
-    }
-  }
-
-  &-size-large {
-    height: @picker-size-large;
-
-    input {
-      font-size: @picker-size-large-font-size-text;
-    }
-  }
-}