3h1-ui 3.0.0-next.65 → 3.0.0-next.66

package/es/index.js

@@ -10244,6 +10244,16 @@ const buttonProps = {
   iconSize: { type: Number, default: 14 },
   onClick: { type: Function, default: null }
 };
+const lessString = ":root {\n  --primary-1: #dafbe1;\n  --primary-2: #aceebb;\n  --primary-3: #6fdd8b;\n  --primary-4: #4ac26b;\n  --primary-5: #2da44e;\n  --primary-6: #1a7f37;\n  --primary-7: #116329;\n  --primary-8: #044f1e;\n  --primary-9: #003d16;\n  --primary-10: #002d11;\n  --gray-0: #fff;\n  --gray-1: #f6f8fa;\n  --gray-2: #eaeef2;\n  --gray-3: #d0d7de;\n  --gray-4: #afb8c1;\n  --gray-5: #8c959f;\n  --gray-6: #6e7781;\n  --gray-7: #57606a;\n  --gray-8: #424a53;\n  --gray-9: #32383f;\n  --gray-10: #24292f;\n  --green-1: #dafbe1;\n  --green-2: #aceebb;\n  --green-3: #6fdd8b;\n  --green-4: #4ac26b;\n  --green-5: #2da44e;\n  --green-6: #1a7f37;\n  --green-7: #116329;\n  --green-8: #044f1e;\n  --green-9: #003d16;\n  --green-10: #002d11;\n  --orange-1: #fff1e5;\n  --orange-2: #ffd8b5;\n  --orange-3: #ffb77c;\n  --orange-4: #fb8f44;\n  --orange-5: #e16f24;\n  --orange-6: #bc4c00;\n  --orange-7: #953800;\n  --orange-8: #762c00;\n  --orange-9: #5c2200;\n  --orange-10: #471700;\n  --pink-1: #ffeff7;\n  --pink-2: #ffd3eb;\n  --pink-3: #ffadda;\n  --pink-4: #ff80c8;\n  --pink-5: #e85aad;\n  --pink-6: #bf3989;\n  --pink-7: #99286e;\n  --pink-8: #772057;\n  --pink-9: #611347;\n  --pink-10: #4d0336;\n  --purple-1: #fbefff;\n  --purple-2: #ecd8ff;\n  --purple-3: #d8b9ff;\n  --purple-4: #c297ff;\n  --purple-5: #a475f9;\n  --purple-6: #8250df;\n  --purple-7: #6639ba;\n  --purple-8: #512a97;\n  --purple-9: #3e1f79;\n  --purple-10: #2e1461;\n  --red-1: #ffebe9;\n  --red-2: #ffcecb;\n  --red-3: #ffaba8;\n  --red-4: #ff8182;\n  --red-5: #fa4549;\n  --red-6: #cf222e;\n  --red-7: #a40e26;\n  --red-8: #82071e;\n  --red-9: #660018;\n  --red-10: #4c0014;\n  --yellow-1: #fff8c5;\n  --yellow-2: #fae17d;\n  --yellow-3: #eac54f;\n  --yellow-4: #d4a72c;\n  --yellow-5: #bf8700;\n  --yellow-6: #9a6700;\n  --yellow-7: #7d4e00;\n  --yellow-8: #633c01;\n  --yellow-9: #4d2d00;\n  --yellow-10: #3b2300;\n  --blue-1: #ddf4ff;\n  --blue-2: #b6e3ff;\n  --blue-3: #80ccff;\n  --blue-4: #54aeff;\n  --blue-5: #218bff;\n  --blue-6: #0969da;\n  --blue-7: #0550ae;\n  --blue-8: #033d8b;\n  --blue-9: #0a3069;\n  --blue-10: #002155;\n  --shadow-2: 0px 2px 4px 0px rgba(0, 0, 0, 0.04),\n      0px 1px 1px 0px rgba(0, 0, 0, 0.02);\n  --shadow-3: 0px 4px 10px 0px rgba(0, 0, 0, 0.08),\n      0px 1px px 0px rgba(0, 0, 0, 0.04);\n  --shadow-4: 0px 8px 32px 0px rgba(0, 0, 0, 0.08),\n      0px 2px 20px 0px rgba(0, 0, 0, 0.04);\n  --shadow-5: 0px 24px 60px 0px rgba(0, 0, 0, 0.12),\n      0px 8px 20px 0px rgba(0, 0, 0, 0.06);\n}";
+const keyValuePairs = lessString.match(/--\w+-\d+:\s#[a-fA-F0-9]+;/g);
+const keyValueMap = {};
+keyValuePairs.forEach((pair) => {
+  const [key2, value] = pair.split(":");
+  keyValueMap[key2.trim()] = value.slice(0, -1).trim();
+});
+const getVarColor = (name) => {
+  return keyValueMap[name];
+};
 const BasicButton = /* @__PURE__ */ defineComponent({
   props: buttonProps,
   setup(props2, {
@@ -10268,19 +10278,19 @@ const BasicButton = /* @__PURE__ */ defineComponent({
         let colorPrimary;
         switch (props2.type || props2.color) {
           case "danger":
-            colorPrimary = "#CF222E";
+            colorPrimary = getVarColor("--red-6");
             break;
           case "waring":
-            colorPrimary = "#BF8700";
+            colorPrimary = getVarColor("--yellow-5");
             break;
           case "success":
-            colorPrimary = "#2DA44E";
+            colorPrimary = getVarColor("--primary-5");
             break;
           case "message":
-            colorPrimary = "#0969DA";
+            colorPrimary = getVarColor("--blue-6");
             break;
           default:
-            colorPrimary = "#2DA44E";
+            colorPrimary = getVarColor("--primary-5");
             break;
         }
         return colorPrimary;
@@ -39764,6 +39774,7 @@ export {
   createLoading,
   descriptionsForm,
   getGlobalAdvancedType,
+  getVarColor,
   registerGlobalConfig,
   searchType,
   searchTypeDate,

package/es/style.css

@@ -1383,6 +1383,7 @@ span.iconify {
   border-top: unset;
   box-shadow: inset 0px 1px 0px 0px var(--gray-3);
   background: var(--gray-1);
+  border-radius: 0 0 10px 10px;
 }
 .shy-basic-modal.fullscreen-modal {
   height: 100%;
@@ -1648,6 +1649,106 @@ span.iconify {
       0px 2px 20px 0px rgba(0, 0, 0, 0.04);
   --shadow-5: 0px 24px 60px 0px rgba(0, 0, 0, 0.12),
       0px 8px 20px 0px rgba(0, 0, 0, 0.06);
+}:root {
+  --primary-1: #dafbe1;
+  --primary-2: #aceebb;
+  --primary-3: #6fdd8b;
+  --primary-4: #4ac26b;
+  --primary-5: #2da44e;
+  --primary-6: #1a7f37;
+  --primary-7: #116329;
+  --primary-8: #044f1e;
+  --primary-9: #003d16;
+  --primary-10: #002d11;
+  --gray-0: #fff;
+  --gray-1: #f6f8fa;
+  --gray-2: #eaeef2;
+  --gray-3: #d0d7de;
+  --gray-4: #afb8c1;
+  --gray-5: #8c959f;
+  --gray-6: #6e7781;
+  --gray-7: #57606a;
+  --gray-8: #424a53;
+  --gray-9: #32383f;
+  --gray-10: #24292f;
+  --green-1: #dafbe1;
+  --green-2: #aceebb;
+  --green-3: #6fdd8b;
+  --green-4: #4ac26b;
+  --green-5: #2da44e;
+  --green-6: #1a7f37;
+  --green-7: #116329;
+  --green-8: #044f1e;
+  --green-9: #003d16;
+  --green-10: #002d11;
+  --orange-1: #fff1e5;
+  --orange-2: #ffd8b5;
+  --orange-3: #ffb77c;
+  --orange-4: #fb8f44;
+  --orange-5: #e16f24;
+  --orange-6: #bc4c00;
+  --orange-7: #953800;
+  --orange-8: #762c00;
+  --orange-9: #5c2200;
+  --orange-10: #471700;
+  --pink-1: #ffeff7;
+  --pink-2: #ffd3eb;
+  --pink-3: #ffadda;
+  --pink-4: #ff80c8;
+  --pink-5: #e85aad;
+  --pink-6: #bf3989;
+  --pink-7: #99286e;
+  --pink-8: #772057;
+  --pink-9: #611347;
+  --pink-10: #4d0336;
+  --purple-1: #fbefff;
+  --purple-2: #ecd8ff;
+  --purple-3: #d8b9ff;
+  --purple-4: #c297ff;
+  --purple-5: #a475f9;
+  --purple-6: #8250df;
+  --purple-7: #6639ba;
+  --purple-8: #512a97;
+  --purple-9: #3e1f79;
+  --purple-10: #2e1461;
+  --red-1: #ffebe9;
+  --red-2: #ffcecb;
+  --red-3: #ffaba8;
+  --red-4: #ff8182;
+  --red-5: #fa4549;
+  --red-6: #cf222e;
+  --red-7: #a40e26;
+  --red-8: #82071e;
+  --red-9: #660018;
+  --red-10: #4c0014;
+  --yellow-1: #fff8c5;
+  --yellow-2: #fae17d;
+  --yellow-3: #eac54f;
+  --yellow-4: #d4a72c;
+  --yellow-5: #bf8700;
+  --yellow-6: #9a6700;
+  --yellow-7: #7d4e00;
+  --yellow-8: #633c01;
+  --yellow-9: #4d2d00;
+  --yellow-10: #3b2300;
+  --blue-1: #ddf4ff;
+  --blue-2: #b6e3ff;
+  --blue-3: #80ccff;
+  --blue-4: #54aeff;
+  --blue-5: #218bff;
+  --blue-6: #0969da;
+  --blue-7: #0550ae;
+  --blue-8: #033d8b;
+  --blue-9: #0a3069;
+  --blue-10: #002155;
+  --shadow-2: 0px 2px 4px 0px rgba(0, 0, 0, 0.04),
+      0px 1px 1px 0px rgba(0, 0, 0, 0.02);
+  --shadow-3: 0px 4px 10px 0px rgba(0, 0, 0, 0.08),
+      0px 1px px 0px rgba(0, 0, 0, 0.04);
+  --shadow-4: 0px 8px 32px 0px rgba(0, 0, 0, 0.08),
+      0px 2px 20px 0px rgba(0, 0, 0, 0.04);
+  --shadow-5: 0px 24px 60px 0px rgba(0, 0, 0, 0.12),
+      0px 8px 20px 0px rgba(0, 0, 0, 0.06);
 }
 .shy-basic-help {
   display: inline-block;
@@ -1843,6 +1944,7 @@ span.iconify {
   border-top: unset;
   box-shadow: inset 0px 1px 0px 0px var(--gray-3);
   background: var(--gray-1);
+  border-radius: 0 0 10px 10px;
 }
 .shy-basic-modal.fullscreen-modal {
   height: 100%;

package/lib/index.js

@@ -10268,6 +10268,16 @@ const buttonProps = {
   iconSize: { type: Number, default: 14 },
   onClick: { type: Function, default: null }
 };
+const lessString = ":root {\n  --primary-1: #dafbe1;\n  --primary-2: #aceebb;\n  --primary-3: #6fdd8b;\n  --primary-4: #4ac26b;\n  --primary-5: #2da44e;\n  --primary-6: #1a7f37;\n  --primary-7: #116329;\n  --primary-8: #044f1e;\n  --primary-9: #003d16;\n  --primary-10: #002d11;\n  --gray-0: #fff;\n  --gray-1: #f6f8fa;\n  --gray-2: #eaeef2;\n  --gray-3: #d0d7de;\n  --gray-4: #afb8c1;\n  --gray-5: #8c959f;\n  --gray-6: #6e7781;\n  --gray-7: #57606a;\n  --gray-8: #424a53;\n  --gray-9: #32383f;\n  --gray-10: #24292f;\n  --green-1: #dafbe1;\n  --green-2: #aceebb;\n  --green-3: #6fdd8b;\n  --green-4: #4ac26b;\n  --green-5: #2da44e;\n  --green-6: #1a7f37;\n  --green-7: #116329;\n  --green-8: #044f1e;\n  --green-9: #003d16;\n  --green-10: #002d11;\n  --orange-1: #fff1e5;\n  --orange-2: #ffd8b5;\n  --orange-3: #ffb77c;\n  --orange-4: #fb8f44;\n  --orange-5: #e16f24;\n  --orange-6: #bc4c00;\n  --orange-7: #953800;\n  --orange-8: #762c00;\n  --orange-9: #5c2200;\n  --orange-10: #471700;\n  --pink-1: #ffeff7;\n  --pink-2: #ffd3eb;\n  --pink-3: #ffadda;\n  --pink-4: #ff80c8;\n  --pink-5: #e85aad;\n  --pink-6: #bf3989;\n  --pink-7: #99286e;\n  --pink-8: #772057;\n  --pink-9: #611347;\n  --pink-10: #4d0336;\n  --purple-1: #fbefff;\n  --purple-2: #ecd8ff;\n  --purple-3: #d8b9ff;\n  --purple-4: #c297ff;\n  --purple-5: #a475f9;\n  --purple-6: #8250df;\n  --purple-7: #6639ba;\n  --purple-8: #512a97;\n  --purple-9: #3e1f79;\n  --purple-10: #2e1461;\n  --red-1: #ffebe9;\n  --red-2: #ffcecb;\n  --red-3: #ffaba8;\n  --red-4: #ff8182;\n  --red-5: #fa4549;\n  --red-6: #cf222e;\n  --red-7: #a40e26;\n  --red-8: #82071e;\n  --red-9: #660018;\n  --red-10: #4c0014;\n  --yellow-1: #fff8c5;\n  --yellow-2: #fae17d;\n  --yellow-3: #eac54f;\n  --yellow-4: #d4a72c;\n  --yellow-5: #bf8700;\n  --yellow-6: #9a6700;\n  --yellow-7: #7d4e00;\n  --yellow-8: #633c01;\n  --yellow-9: #4d2d00;\n  --yellow-10: #3b2300;\n  --blue-1: #ddf4ff;\n  --blue-2: #b6e3ff;\n  --blue-3: #80ccff;\n  --blue-4: #54aeff;\n  --blue-5: #218bff;\n  --blue-6: #0969da;\n  --blue-7: #0550ae;\n  --blue-8: #033d8b;\n  --blue-9: #0a3069;\n  --blue-10: #002155;\n  --shadow-2: 0px 2px 4px 0px rgba(0, 0, 0, 0.04),\n      0px 1px 1px 0px rgba(0, 0, 0, 0.02);\n  --shadow-3: 0px 4px 10px 0px rgba(0, 0, 0, 0.08),\n      0px 1px px 0px rgba(0, 0, 0, 0.04);\n  --shadow-4: 0px 8px 32px 0px rgba(0, 0, 0, 0.08),\n      0px 2px 20px 0px rgba(0, 0, 0, 0.04);\n  --shadow-5: 0px 24px 60px 0px rgba(0, 0, 0, 0.12),\n      0px 8px 20px 0px rgba(0, 0, 0, 0.06);\n}";
+const keyValuePairs = lessString.match(/--\w+-\d+:\s#[a-fA-F0-9]+;/g);
+const keyValueMap = {};
+keyValuePairs.forEach((pair) => {
+  const [key2, value] = pair.split(":");
+  keyValueMap[key2.trim()] = value.slice(0, -1).trim();
+});
+const getVarColor = (name) => {
+  return keyValueMap[name];
+};
 const BasicButton = /* @__PURE__ */ vue.defineComponent({
   props: buttonProps,
   setup(props2, {
@@ -10292,19 +10302,19 @@ const BasicButton = /* @__PURE__ */ vue.defineComponent({
         let colorPrimary;
         switch (props2.type || props2.color) {
           case "danger":
-            colorPrimary = "#CF222E";
+            colorPrimary = getVarColor("--red-6");
             break;
           case "waring":
-            colorPrimary = "#BF8700";
+            colorPrimary = getVarColor("--yellow-5");
             break;
           case "success":
-            colorPrimary = "#2DA44E";
+            colorPrimary = getVarColor("--primary-5");
             break;
           case "message":
-            colorPrimary = "#0969DA";
+            colorPrimary = getVarColor("--blue-6");
             break;
           default:
-            colorPrimary = "#2DA44E";
+            colorPrimary = getVarColor("--primary-5");
             break;
         }
         return colorPrimary;
@@ -39787,6 +39797,7 @@ exports.componentMap = componentMap$3;
 exports.createLoading = createLoading;
 exports.descriptionsForm = descriptionsForm;
 exports.getGlobalAdvancedType = getGlobalAdvancedType;
+exports.getVarColor = getVarColor;
 exports.registerGlobalConfig = registerGlobalConfig;
 exports.searchType = searchType;
 exports.searchTypeDate = searchTypeDate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "3h1-ui",
-  "version": "3.0.0-next.65",
+  "version": "3.0.0-next.66",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -30,8 +30,8 @@
     "vxe-table": "^4.3.6",
     "xe-utils": "^3.5.7",
     "@shy-plugins/tinymce": "^1.0.6",
-    "@shy-plugins/use": "1.0.0-next.1",
-    "@shy-plugins/utils": "1.0.0-next.1"
+    "@shy-plugins/utils": "1.0.0-next.1",
+    "@shy-plugins/use": "1.0.0-next.1"
   },
   "types": "es/ui/index.d.ts",
   "devDependencies": {