@yqg/simple 1.0.13 → 1.0.14-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yqg/simple",
-  "version": "1.0.13",
+  "version": "1.0.14-beta.2",
   "description": "YQG Simple Component Library - Vue 2 + Ant Design Vue 组件库",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/component/def-value.vue

@@ -183,7 +183,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "./yqg-simple-form/component/field-rich/rich.scss";
+@use "./yqg-simple-form/component/field-rich/rich.scss" as *;
 
 .def-value {
     margin: 0;

package/src/component/yqg-simple-form/component/field-rich/index.vue

@@ -538,7 +538,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./rich.scss";
+@use "./rich.scss" as *;
 
 $color-black: #000;
 $color-white: #fff;

package/src/component/yqg-simple-form/index.scss

@@ -8,7 +8,8 @@
 
 $btn-margin: 10px;
 
-.yqg-simple-form {
+/* 使用 :where() 降低选择器权重，便于用户自定义样式覆盖 */
+:where(.yqg-simple-form) {
     .ant-form-horizontal {
         .ant-input,
         .ant-input-number,
@@ -17,7 +18,7 @@ $btn-margin: 10px;
         }
 
         .ant-calendar-picker {
-            width: 100% !important;
+            width: 100%;
         }
 
         .ant-form-item-label {
@@ -94,7 +95,7 @@ $btn-margin: 10px;
         }
 
         .ant-calendar-picker {
-            width: 100% !important;
+            width: 100%;
         }
 
         .ant-form-item {
@@ -155,7 +156,7 @@ $btn-margin: 10px;
                 }
 
                 &-hidden {
-                    display: none !important;
+                    display: none;
                 }
             }
         }
@@ -181,6 +182,6 @@ $btn-margin: 10px;
     }
 }
 
-.yqg-rich-audio {
+:where(.yqg-rich-audio) {
     height: 30px;
 }

package/src/style/bootstrap-utilities.scss

@@ -7,6 +7,8 @@
 
 @use "sass:list";
 @use "sass:map";
+@use "sass:math";
+@use "sass:meta";
 @use "sass:string";
 // stylelint-disable indentation, at-rule-empty-line-before
 // ref: https://getbootstrap.com/docs/5.0/utilities/api/  bootstrap/scss/bootstrap-utilities
@@ -62,8 +64,8 @@ $position-values: (
 $spacer: 1rem !default;
 $spacers: (
   0: 0,
-  1: $spacer / 4,
-  2: $spacer / 2,
+  1: math.div($spacer, 4),
+  2: math.div($spacer, 2),
   3: $spacer,
   4: $spacer * 1.5,
   5: $spacer * 3,
@@ -97,7 +99,7 @@ $line-height-lg: 2 !default;
   $values: map.get($utility, values);
 
   // If the values are a list or string, convert it into a map
-  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+  @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
     $values: list.zip($values, $values);
   }
 
@@ -105,7 +107,7 @@ $line-height-lg: 2 !default;
     $properties: map.get($utility, property);
 
     // Multiple properties are possible, for example with vertical or horizontal margins or paddings
-    @if type-of($properties) == "string" {
+    @if meta.type-of($properties) == "string" {
       $properties: list.append((), $properties);
     }
 
@@ -120,7 +122,7 @@ $line-height-lg: 2 !default;
     // Don't prefix if value key is null (eg. with shadow class)
     $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
-    @if map-get($utility, rfs) {
+    @if map.get($utility, rfs) {
       // Inside the media query
       @if $is-rfs-media-query {
         $val: rfs-value($value);
@@ -282,7 +284,7 @@ $utilities: map.merge(
     "border-color": (
       property: border-color,
       class: border,
-      values: map-merge($theme-colors, ("white": $white))
+      values: map.merge($theme-colors, ("white": $white))
     ),
     "border-width": (
       property: border-width,
@@ -662,7 +664,7 @@ $utilities: map.merge(
     "color": (
       property: color,
       class: text,
-      values: map-merge(
+      values: map.merge(
         $theme-colors,
         (
           "white": $white,
@@ -679,7 +681,7 @@ $utilities: map.merge(
     "background-color": (
       property: background-color,
       class: bg,
-      values: map-merge(
+      values: map.merge(
         $theme-colors,
         (
           "body": $body-bg,
@@ -766,7 +768,7 @@ $utilities: map.merge(
 @each $key, $utility in $utilities {
   // The utility can be disabled with `false`, thus check if the utility is a map first
   // Only proceed if responsive media queries are enabled or if it's the base media query
-  @if type-of($utility) == "map" {
+  @if meta.type-of($utility) == "map" {
     @include generate-utility($utility);
   }
 }

package/src/style/common.scss

@@ -5,6 +5,9 @@
  * @Last Modified time: 2023-04-20 15:11:44
  */
 
+@use "variable" as *;
+@use "mixin" as *;
+
 .yqg {
     &-btn {
         &-info {

package/src/style/index.scss

@@ -4,13 +4,16 @@
  * @Last Modified by: xiaodongyu
  * @Last Modified time: 2021-04-02 23:45:24
  */
-// 引入 Ant Design Vue 样式
-@import "~ant-design-vue/dist/antd.css";
+// 引入 Ant Design Vue 样式（@use 替代已弃用的 @import）
+@use "~ant-design-vue/dist/antd.css";
 
-@import "variable";
-@import "mixin";
-@import "common";
-@import "bootstrap-utilities";
+@use "variable" as *;
+@use "mixin" as *;
+@use "common";
+@use "bootstrap-utilities";
+@use "../component/yqg-simple-form/index.scss" as yqg-simple-form;
+@use "../component/yqg-code-textarea/index.scss" as yqg-code-textarea;
+@use "../component/yqg-simple-form/component/field-rich/rich.scss" as field-rich;
 
 body {
     color: $font-color;