sard-uniapp 1.10.1 → 1.10.3

package/components/radio-group/radio-group.vue

@@ -117,5 +117,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/radio-input/radio-input.vue

@@ -197,5 +197,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/rate/rate.vue

@@ -235,5 +235,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/result/result.vue

@@ -74,5 +74,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/row/row.vue

@@ -69,5 +69,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/search/search.vue

@@ -167,5 +167,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/share-sheet/share-sheet.vue

@@ -182,5 +182,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/skeleton/skeleton.vue

@@ -71,5 +71,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/skeleton-avatar/skeleton-avatar.vue

@@ -57,5 +57,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/skeleton-block/skeleton-block.vue

@@ -50,5 +50,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/skeleton-paragraph/skeleton-paragraph.vue

@@ -54,5 +54,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/skeleton-title/skeleton-title.vue

@@ -50,5 +50,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/slider/slider.vue

@@ -401,5 +401,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/space/space.vue

@@ -61,5 +61,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/stepper/stepper.vue

@@ -242,5 +242,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/steps/steps.vue

@@ -102,5 +102,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/style/functions.scss

@@ -1,15 +1,18 @@
 @use 'sass:color';
 @use 'sass:math';
+@use 'sass:string';
+@use 'sass:list';
+@use 'sass:map';
 @use './configuration' as *;
 
 // scss原生并没有提供字符串的替换函数，需自己编写函数来实现这个功能
 @function str-replace($string, $search, $replace) {
-  $index: str-index($string, $search);
+  $index: string.index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
+    @return string.slice($string, 1, $index - 1) + $replace +
       str-replace(
-        str-slice($string, $index + str-length($search)),
+        string.slice($string, $index + string.length($search)),
         $search,
         $replace
       );
@@ -25,13 +28,10 @@
 
 // 把一个数四舍五入到指定位数小数
 @function tofixed($n, $digits: 0) {
-  @return math.div(round($n * math.pow(10, $digits)), math.pow(10, $digits));
-}
-
-// 从一个颜色提取出rgb组成一个字符串，通过赋值给一个css变量，
-// 以便将此变量和一个透明度组成一个rgba从而实现自定义一个颜色的透明度。
-@function extractRGB($color) {
-  @return '#{color.red($color)},#{color.green($color)},#{color.blue($color)}';
+  @return math.div(
+    math.round($n * math.pow(10, $digits)),
+    math.pow(10, $digits)
+  );
 }
 
 @function bem-ns($str) {
@@ -49,24 +49,69 @@
   @return $result;
 }
 
+// 兼容旧版本
 @function str-split($string, $separator) {
   // empty array/list
   $split-arr: ();
   // first index of separator in string
-  $index: str-index($string, $separator);
+  $index: string.index($string, $separator);
   // loop through string
   @while $index != null {
     // get the substring from the first character to the separator
-    $item: str-slice($string, 1, $index - 1);
+    $item: string.slice($string, 1, $index - 1);
     // push item to array
-    $split-arr: append($split-arr, $item);
+    $split-arr: list.append($split-arr, $item);
     // remove item and separator from string
-    $string: str-slice($string, $index + 1);
+    $string: string.slice($string, $index + 1);
     // find new index of separator
-    $index: str-index($string, $separator);
+    $index: string.index($string, $separator);
   }
   // add the remaining string to list (the last item)
-  $split-arr: append($split-arr, $string);
+  $split-arr: list.append($split-arr, $string);
 
   @return $split-arr;
 }
+
+@function three-to-six($str) {
+  $first: string.slice($str, 1, 1);
+  $second: string.slice($str, 2, 2);
+  $three: string.slice($str, 3, 3);
+
+  @return $first + $first + $second + $second + $three + $three;
+}
+
+$map-hex-decimal: (
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+  '7': 7,
+  '8': 8,
+  '9': 9,
+  'a': 10,
+  'b': 11,
+  'c': 12,
+  'd': 13,
+  'e': 14,
+  'f': 15,
+);
+
+@function hex-to-decimal($hex) {
+  $hex: string.to-lower-case($hex);
+  @return map.get($map-hex-decimal, string.slice($hex, 1, 1)) * 16 +
+    map.get($map-hex-decimal, string.slice($hex, 2, 2));
+}
+
+@function hex-to-rgb($hex) {
+  $hex: str-replace(#{$hex}, '#', '');
+  $hex: if(string.length($hex) == 3, three-to-six($hex), $hex);
+
+  $first: string.slice($hex, 1, 2);
+  $second: string.slice($hex, 3, 4);
+  $three: string.slice($hex, 5, 6);
+
+  @return '#{hex-to-decimal($first)},#{hex-to-decimal($second)},#{hex-to-decimal($three)}';
+}

package/components/style/variables.scss

@@ -18,17 +18,17 @@ page {
   --sar-black: #{$sar-black};
 
   // # 灰度值 rgb
-  --sar-white-rgb: #{extractRGB($sar-white)};
-  --sar-gray-100-rgb: #{extractRGB($sar-gray-100)};
-  --sar-gray-200-rgb: #{extractRGB($sar-gray-200)};
-  --sar-gray-300-rgb: #{extractRGB($sar-gray-300)};
-  --sar-gray-400-rgb: #{extractRGB($sar-gray-400)};
-  --sar-gray-500-rgb: #{extractRGB($sar-gray-500)};
-  --sar-gray-600-rgb: #{extractRGB($sar-gray-600)};
-  --sar-gray-700-rgb: #{extractRGB($sar-gray-700)};
-  --sar-gray-800-rgb: #{extractRGB($sar-gray-800)};
-  --sar-gray-900-rgb: #{extractRGB($sar-gray-900)};
-  --sar-black-rgb: #{extractRGB($sar-black)};
+  --sar-white-rgb: #{hex-to-rgb($sar-white)};
+  --sar-gray-100-rgb: #{hex-to-rgb($sar-gray-100)};
+  --sar-gray-200-rgb: #{hex-to-rgb($sar-gray-200)};
+  --sar-gray-300-rgb: #{hex-to-rgb($sar-gray-300)};
+  --sar-gray-400-rgb: #{hex-to-rgb($sar-gray-400)};
+  --sar-gray-500-rgb: #{hex-to-rgb($sar-gray-500)};
+  --sar-gray-600-rgb: #{hex-to-rgb($sar-gray-600)};
+  --sar-gray-700-rgb: #{hex-to-rgb($sar-gray-700)};
+  --sar-gray-800-rgb: #{hex-to-rgb($sar-gray-800)};
+  --sar-gray-900-rgb: #{hex-to-rgb($sar-gray-900)};
+  --sar-black-rgb: #{hex-to-rgb($sar-black)};
 
   // # 基础颜色
   --sar-blue: #{$sar-blue};
@@ -43,16 +43,16 @@ page {
   --sar-cyan: #{$sar-cyan};
 
   // # 基础颜色 rgb
-  --sar-blue-rgb: #{extractRGB($sar-blue)};
-  --sar-indigo-rgb: #{extractRGB($sar-indigo)};
-  --sar-purple-rgb: #{extractRGB($sar-purple)};
-  --sar-pink-rgb: #{extractRGB($sar-pink)};
-  --sar-red-rgb: #{extractRGB($sar-red)};
-  --sar-orange-rgb: #{extractRGB($sar-orange)};
-  --sar-yellow-rgb: #{extractRGB($sar-yellow)};
-  --sar-green-rgb: #{extractRGB($sar-green)};
-  --sar-teal-rgb: #{extractRGB($sar-teal)};
-  --sar-cyan-rgb: #{extractRGB($sar-cyan)};
+  --sar-blue-rgb: #{hex-to-rgb($sar-blue)};
+  --sar-indigo-rgb: #{hex-to-rgb($sar-indigo)};
+  --sar-purple-rgb: #{hex-to-rgb($sar-purple)};
+  --sar-pink-rgb: #{hex-to-rgb($sar-pink)};
+  --sar-red-rgb: #{hex-to-rgb($sar-red)};
+  --sar-orange-rgb: #{hex-to-rgb($sar-orange)};
+  --sar-yellow-rgb: #{hex-to-rgb($sar-yellow)};
+  --sar-green-rgb: #{hex-to-rgb($sar-green)};
+  --sar-teal-rgb: #{hex-to-rgb($sar-teal)};
+  --sar-cyan-rgb: #{hex-to-rgb($sar-cyan)};
 
   // # 主题色
   --sar-primary: var(--sar-blue);

package/components/swiper-dot/swiper-dot.vue

@@ -67,5 +67,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/switch/switch.vue

@@ -121,5 +121,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/tab/tab.vue

@@ -94,5 +94,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/tabbar/tabbar.vue

@@ -69,5 +69,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/tabbar-item/tabbar-item.vue

@@ -87,5 +87,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/table/table.vue

@@ -97,5 +97,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/table-cell/table-cell.vue

@@ -53,5 +53,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/table-fixation/table-fixation.vue

@@ -108,5 +108,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/table-row/table-row.vue

@@ -42,5 +42,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/tabs/tabs.vue

@@ -178,5 +178,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/tag/index.scss

@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:map';
 @use '../style/base' as *;
 
 $sar-tag-sizes: (
@@ -53,9 +54,9 @@ $sar-tag-sizes: (
   // 尺寸
   @each $size, $value in $sar-tag-sizes {
     @include m($size) {
-      padding: map-get($value, padding);
-      font-size: map-get($value, font-size);
-      border-radius: map-get($value, border-radius);
+      padding: map.get($value, padding);
+      font-size: map.get($value, font-size);
+      border-radius: map.get($value, border-radius);
     }
   }
 

package/components/tag/tag.vue

@@ -75,5 +75,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/timeline/timeline.vue

@@ -37,5 +37,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/timeline-item/timeline-item.vue

@@ -70,5 +70,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/toast/toast.vue

@@ -131,5 +131,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/tree/tree.vue

@@ -559,5 +559,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/tree-node/tree-node.vue

@@ -360,5 +360,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/upload/upload.vue

@@ -265,5 +265,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/components/upload-preview/upload-preview.vue

@@ -169,5 +169,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss';
 </style>

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {
@@ -115,8 +115,8 @@
     "lodash-es": "^4.17.21",
     "prettier": "^2.8.8",
     "region-data": "^1.2.3",
-    "sard-cli": "^1.0.7",
-    "sass": "^1.49.11",
+    "sard-cli": "^1.0.9",
+    "sass": "^1.85.0",
     "tel-area-code": "^1.0.1",
     "ts-custom-error": "^3.3.1",
     "tsx": "^4.19.2",
@@ -216,5 +216,8 @@
   },
   "engines": {
     "HBuilderX": "^3.6.0"
+  },
+  "pnpm": {
+    "overrides": {}
   }
 }