@polyv/vue-components 1.5.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polyv/vue-components",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "main": "./vue/index.es.js",
   "types": "./vue/src/index.d.ts",
   "dependencies": {
@@ -14,6 +14,7 @@
     "@popperjs/core": "2.11.4",
     "async-validator": "4.2.5",
     "clipboard": "2.0.10",
+    "cropperjs": "^2.1.0",
     "dayjs": "^1.11.19",
     "esno": "4.8.0",
     "fs-extra": "11.3.0",

package/styles/function.scss

@@ -1,10 +1,12 @@
 @use 'sass:math';
 @use 'sass:color';
 
+// 通过后缀生产 css 变量
 @function get-css-var($name) {
   @return var(--pwc-#{$name});
 }
 
+// 获取 hex 的 rgb
 @function get-rgb($color) {
   @return (
     round(color.channel($color, 'red')),
@@ -13,7 +15,7 @@
   );
 }
 
-// 计算浅色颜色
+// 计算白色叠底透明后的颜色
 @function light-color($color, $alpha) {
   @return rgb(
     round(color.channel($color, 'red')   * $alpha + 255 * (1 - $alpha)),
@@ -22,7 +24,7 @@
   );
 }
 
-// 计算深色颜色
+// 计算黑色叠底透明后的颜色
 @function dark-color($color, $alpha) {
   @return rgb(
     round(color.channel($color, 'red')   * $alpha),

package/styles/root/basic.scss

@@ -18,8 +18,9 @@
   --pwc-primary-color-hover: var(--pwc-primary-light-8);
   --pwc-primary-color-active: var(--pwc-primary-dark-8);
   --pwc-primary-color-disabled: var(--pwc-primary-light-6);
-  --pwc-primary-color-bg: rgba(var(--pwc-primary-basic-rgb), 0.1);
-  --pwc-primary-color-gradient: #8abfef;
+  --pwc-primary-color-bg: var(--pwc-primary-light-1);
+  --pwc-primary-color-transparent: rgba(var(--pwc-primary-basic-rgb), 0.1);
+  --pwc-primary-color-gradient: var(--pwc-primary-light-5);
 
   // 成功色
   --pwc-success-basic: #{$success-basic};
@@ -37,7 +38,8 @@
   --pwc-success-color-hover: var(--pwc-success-light-8);
   --pwc-success-color-active: var(--pwc-success-dark-8);
   --pwc-success-color-disabled: var(--pwc-success-light-6);
-  --pwc-success-color-bg: rgba(var(--pwc-success-basic-rgb), 0.1);
+  --pwc-success-color-bg: var(--pwc-success-light-1);
+  --pwc-success-color-transparent: rgba(var(--pwc-success-basic-rgb), 0.1);
   --pwc-success-color-gradient: #7fe082;
 
   // 危险色
@@ -56,7 +58,8 @@
   --pwc-danger-color-hover: var(--pwc-danger-light-8);
   --pwc-danger-color-active: var(--pwc-danger-dark-8);
   --pwc-danger-color-disabled: var(--pwc-danger-light-6);
-  --pwc-danger-color-bg: rgba(var(--pwc-danger-basic-rgb), 0.1);
+  --pwc-danger-color-bg: var(--pwc-danger-light-1);
+  --pwc-danger-color-transparent: rgba(var(--pwc-danger-basic-rgb), 0.1);
   --pwc-danger-color-brightness: #{brightness($danger-basic, 2)};
   --pwc-danger-color-gradient: #FF9E63;
 
@@ -76,10 +79,43 @@
   --pwc-warning-color-hover: var(--pwc-warning-light-8);
   --pwc-warning-color-active: var(--pwc-warning-dark-8);
   --pwc-warning-color-disabled: var(--pwc-warning-light-6);
-  --pwc-warning-color-bg: rgba(var(--pwc-warning-basic-rgb), 0.1);
+  --pwc-warning-color-bg: var(--pwc-warning-light-1);
+  --pwc-warning-color-transparent: rgba(var(--pwc-warning-basic-rgb), 0.1);
   --pwc-warning-color-gradient: #fae735;
 
+  // 提示色
+  --pwc-tips-basic: #{$tips-basic};
+  --pwc-tips-basic-rgb: #{get-rgb($tips-basic)};
+  --pwc-tips-light-1: #{light-color($tips-basic, 0.1)};
+  --pwc-tips-light-2: #{light-color($tips-basic, 0.2)};
+  --pwc-tips-light-3: #{light-color($tips-basic, 0.3)};
+  --pwc-tips-light-4: #{light-color($tips-basic, 0.4)};
+  --pwc-tips-light-5: #{light-color($tips-basic, 0.5)};
+  --pwc-tips-light-6: #{light-color($tips-basic, 0.6)};
+  --pwc-tips-light-7: #{light-color($tips-basic, 0.7)};
+  --pwc-tips-light-8: #{light-color($tips-basic, 0.8)};
+  --pwc-tips-dark-8: #{dark-color($tips-basic, 0.8)};
+  --pwc-tips-color: var(--pwc-tips-basic);
+  --pwc-tips-color-hover: var(--pwc-tips-light-8);
+  --pwc-tips-color-active: var(--pwc-tips-dark-8);
+  --pwc-tips-color-disabled: var(--pwc-tips-light-6);
+  --pwc-tips-color-bg: var(--pwc-tips-light-1);
+  --pwc-tips-color-transparent: rgba(var(--pwc-tips-basic-rgb), 0.1);
+
   // 链接色
-  --pwc-link-color: rgb(63, 118, 252);
-  --pwc-link-color-disabled: rgba(63, 118, 252, 0.6);
+  --pwc-link-basic: #{$link-basic};
+  --pwc-link-basic-rgb: #{get-rgb($link-basic)};
+  --pwc-link-light-1: #{light-color($link-basic, 0.1)};
+  --pwc-link-light-2: #{light-color($link-basic, 0.2)};
+  --pwc-link-light-3: #{light-color($link-basic, 0.3)};
+  --pwc-link-light-4: #{light-color($link-basic, 0.4)};
+  --pwc-link-light-5: #{light-color($link-basic, 0.5)};
+  --pwc-link-light-6: #{light-color($link-basic, 0.6)};
+  --pwc-link-light-7: #{light-color($link-basic, 0.7)};
+  --pwc-link-light-8: #{light-color($link-basic, 0.8)};
+  --pwc-link-dark-8: #{dark-color($link-basic, 0.8)};
+  --pwc-link-color: var(--pwc-link-basic);
+  --pwc-link-color-hover: var(--pwc-link-light-8);
+  --pwc-link-color-active: var(--pwc-link-dark-8);
+  --pwc-link-color-disabled: var(--pwc-link-light-6);
 }

package/styles/variables.scss

@@ -12,8 +12,10 @@ $primary-color-hover: get-css-var('primary-color-hover') !default;
 $primary-color-active: get-css-var('primary-color-active') !default;
 // 主要色禁用
 $primary-color-disabled: get-css-var('primary-color-disabled') !default;
-// 主要色浅色透明背景
+// 主要色浅色背景
 $primary-color-bg: get-css-var('primary-color-bg') !default;
+// 主要色浅色透明背景
+$primary-color-transparent: get-css-var('primary-color-transparent') !default;
 // 主要色渐变
 $primary-color-gradient: get-css-var('primary-color-gradient') !default;
 
@@ -29,8 +31,10 @@ $success-color-hover: get-css-var('success-color-hover') !default;
 $success-color-active: get-css-var('success-color-active') !default;
 // 成功色禁用
 $success-color-disabled: get-css-var('success-color-disabled') !default;
-// 成功色浅色透明背景
+// 成功色浅色背景
 $success-color-bg: get-css-var('success-color-bg') !default;
+// 成功色浅色透明背景
+$success-color-transparent: get-css-var('success-color-transparent') !default;
 // 成功色渐变
 $success-color-gradient: get-css-var('success-color-gradient') !default;
 
@@ -46,8 +50,10 @@ $danger-color-hover: get-css-var('danger-color-hover') !default;
 $danger-color-active: get-css-var('danger-color-active') !default;
 // 危险色禁用
 $danger-color-disabled: get-css-var('danger-color-disabled') !default;
-// 危险色浅色透明背景
+// 危险色浅色背景
 $danger-color-bg: get-css-var('danger-color-bg') !default;
+// 危险色浅色透明背景
+$danger-color-transparent: get-css-var('danger-color-transparent') !default;
 // 危险色渐变
 $danger-color-gradient: get-css-var('danger-color-gradient') !default;
 
@@ -63,15 +69,40 @@ $warning-color-hover: get-css-var('warning-color-hover') !default;
 $warning-color-active: get-css-var('warning-color-active') !default;
 // 警告色禁用
 $warning-color-disabled: get-css-var('warning-color-disabled') !default;
-// 警告色浅色透明背景
+// 警告色浅色背景
 $warning-color-bg: get-css-var('warning-color-bg') !default;
+// 警告色浅色透明背景
+$warning-color-transparent: get-css-var('warning-color-transparent') !default;
 // 警告色渐变
 $warning-color-gradient: get-css-var('warning-color-gradient') !default;
 
+// 提示色基础色
+$tips-basic: #3F76FC !default;
+// 提示色基础色（rgb）
+$tips-basic-rgb: get-css-var('tips-basic-rgb') !default;
+// 提示色
+$tips-color: get-css-var('tips-color') !default;
+// 提示色悬停
+$tips-color-hover: get-css-var('tips-color-hover') !default;
+// 提示色激活
+$tips-color-active: get-css-var('tips-color-active') !default;
+// 提示色禁用
+$tips-color-disabled: get-css-var('tips-color-disabled') !default;
+// 提示色浅色背景
+$tips-color-bg: get-css-var('tips-color-bg') !default;
+// 提示色浅色透明背景
+$tips-color-transparent: get-css-var('tips-color-transparent') !default;
+
 // 链接色基础色
 $link-basic: #3F76FC !default;
+// 链接色基础色（rgb）
+$link-basic-rgb: get-css-var('link-basic-rgb') !default;
 // 链接色
 $link-color: get-css-var('link-color') !default;
+// 链接色悬停
+$link-color-hover: get-css-var('link-color-hover') !default;
+// 链接色激活
+$link-color-active: get-css-var('link-color-active') !default;
 // 链接色禁用
 $link-color-disabled: get-css-var('link-color-disabled') !default;