rappel-ui 1.0.4 → 1.0.5

package/es/components/colors/src/secondary-color.vue.mjs

@@ -1,7 +1,61 @@
-import o from "./secondary-color.vue2.mjs";
-/* empty css                      */
-import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-b783d4cf"]]);
+import { defineComponent as y, createElementBlock as o, openBlock as n, normalizeClass as s, unref as a, Fragment as d, renderList as i, createElementVNode as r, normalizeStyle as m, toDisplayString as u } from "vue";
+/* empty css                                  */
+/* empty css                                    */
+import { createColors as l } from "../../../utils/util.mjs";
+import { useNamespace as f } from "../../../composables/use-namespace/index.mjs";
+const E = /* @__PURE__ */ y({
+  name: "ReSecondaryColor",
+  __name: "secondary-color",
+  setup(h) {
+    const { nm: p, ns: t } = f("colors"), b = [
+      {
+        base: "#06b56d",
+        text: "Success",
+        shades: l("#06b56d")
+      },
+      {
+        base: "#ee6979",
+        text: "Danger/Error ",
+        shades: l("#ee6979")
+      },
+      {
+        base: "#cd9a0a",
+        text: "Warning",
+        shades: l("#cd9a0a")
+      },
+      {
+        base: "#8e8e91",
+        text: "Info",
+        shades: l("#8e8e91")
+      }
+    ];
+    return (_, v) => (n(), o("div", {
+      class: s([a(p)("", "secondary")])
+    }, [
+      (n(), o(d, null, i(b, (e) => r("div", {
+        class: s([a(t)("", "panel")]),
+        key: e.base
+      }, [
+        r("div", {
+          class: s([a(t)("", "base")]),
+          style: m({ "background-color": e.base })
+        }, [
+          r("div", null, u(e.text), 1),
+          r("div", null, u(e.base.toUpperCase()), 1)
+        ], 6),
+        r("div", {
+          class: s([a(t)("", "shades")])
+        }, [
+          (n(!0), o(d, null, i(e.shades, (c) => (n(), o("div", {
+            class: s([a(t)("", "shade")]),
+            style: m({ "background-color": c }),
+            key: c
+          }, null, 6))), 128))
+        ], 2)
+      ], 2)), 64))
+    ], 2));
+  }
+});
 export {
-  f as default
+  E as default
 };

package/es/components/colors/src/secondary-color.vue2.mjs

@@ -1,54 +1,4 @@
-import { defineComponent as u, createElementBlock as a, openBlock as t, Fragment as n, renderList as l, createElementVNode as s, normalizeStyle as d, toDisplayString as c } from "vue";
-import { createColors as o } from "../../../utils/util.mjs";
-const m = { class: "status-colors" }, p = { class: "shades" }, x = /* @__PURE__ */ u({
-  name: "ReSecondaryColor",
-  __name: "secondary-color",
-  setup(_) {
-    const i = [
-      {
-        base: "#06b56d",
-        text: "Success",
-        shades: o("#06b56d")
-      },
-      {
-        base: "#ee6979",
-        text: "Danger/Error ",
-        shades: o("#ee6979")
-      },
-      {
-        base: "#cd9a0a",
-        text: "Warning",
-        shades: o("#cd9a0a")
-      },
-      {
-        base: "#8e8e91",
-        text: "Info",
-        shades: o("#8e8e91")
-      }
-    ];
-    return (b, h) => (t(), a("div", m, [
-      (t(), a(n, null, l(i, (e) => s("div", {
-        class: "panel",
-        key: e.base
-      }, [
-        s("div", {
-          class: "base",
-          style: d({ "background-color": e.base })
-        }, [
-          s("div", null, c(e.text), 1),
-          s("div", null, c(e.base.toUpperCase()), 1)
-        ], 4),
-        s("div", p, [
-          (t(!0), a(n, null, l(e.shades, (r) => (t(), a("div", {
-            class: "shade",
-            style: d({ "background-color": r }),
-            key: r
-          }, null, 4))), 128))
-        ])
-      ])), 64))
-    ]));
-  }
-});
+import f from "./secondary-color.vue.mjs";
 export {
-  x as default
+  f as default
 };

package/es/index.mjs

@@ -12,13 +12,13 @@ import { useNamespace as E } from "./composables/use-namespace/index.mjs";
 import { createGlobalInstaller as r } from "./utils/vue/index.mjs";
 import { INSTALLED_KEY as h, toLowerCase as w, withInstall as N, withMultiInstall as P } from "./utils/vue/index.mjs";
 import { autoCalcFileSize as z, buildTree as B, createColors as K, createOverload as U, darkenColor as k, deepClone as A, deleteKeys as q, flatArr as G, getEqualOpacityColor as M, hasOwnProperty as W, isPlainObject as Y, joinURLs as _, lineBreakToComma as $, omitEmptyKeys as H, paramsToFormData as J, readTxtByEncodes as Q, readTxtFile as V, setURLSearchParams as X, singleton as Z } from "./utils/util.mjs";
-import { ReButton as oe } from "./components/button/index.mjs";
-import { ReInput as te } from "./components/input/index.mjs";
-import { ReTabs as le } from "./components/tabs/index.mjs";
-import { ReColors as me } from "./components/colors/index.mjs";
-import { default as ne } from "./components/colors/src/primary-color.vue.mjs";
-import { default as fe } from "./components/colors/src/secondary-color.vue.mjs";
-import { default as ue } from "./components/colors/src/neutral-color.vue.mjs";
+import { default as oe } from "./components/colors/src/primary-color.vue.mjs";
+import { default as te } from "./components/colors/src/secondary-color.vue.mjs";
+import { default as le } from "./components/colors/src/neutral-color.vue.mjs";
+import { ReButton as me } from "./components/button/index.mjs";
+import { ReInput as ne } from "./components/input/index.mjs";
+import { ReTabs as fe } from "./components/tabs/index.mjs";
+import { ReColors as ue } from "./components/colors/index.mjs";
 import { RappelUIResolver as ce } from "./rappel-ui/resolver.mjs";
 const o = r(Object.values(e)), t = o.install, a = o.version, s = {
   install: t,
@@ -28,13 +28,13 @@ const o = r(Object.values(e)), t = o.install, a = o.version, s = {
 export {
   h as INSTALLED_KEY,
   ce as RappelUIResolver,
-  oe as ReButton,
-  me as ReColors,
-  te as ReInput,
-  ue as ReNeutralColor,
-  ne as RePrimaryColor,
-  fe as ReSecondaryColor,
-  le as ReTabs,
+  me as ReButton,
+  ue as ReColors,
+  ne as ReInput,
+  le as ReNeutralColor,
+  oe as RePrimaryColor,
+  te as ReSecondaryColor,
+  fe as ReTabs,
   u as applyResizable,
   z as autoCalcFileSize,
   B as buildTree,

package/es/theme-chalk/src/colors.css

@@ -0,0 +1 @@
+@charset "UTF-8";.re-colors--primary{width:60rem;border-radius:4px;overflow:hidden;color:#fff}.re-colors--secondary{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.re-colors--neutral{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.re-colors__panel{border-radius:4px;overflow:hidden;color:#fff}.re-colors__base{color:#fff;height:6rem;box-shadow:10px 10px;padding:1rem}.re-colors__shades{display:flex;align-items:center;flex-wrap:nowrap}.re-colors__shade{flex:1;height:3.2rem;padding:.2rem}.re-colors__collects{border-radius:4px;overflow:hidden;margin-bottom:1rem;height:7rem;padding:1rem}.re-colors__borders{display:flex;justify-content:space-between}.re-colors__border-content{border-radius:50%;margin-left:1rem;background-color:#fff;height:5rem;width:5rem;display:flex;justify-content:center;align-items:center;flex-shrink:0}.re-colors__grids{background-color:#fff;background-image:linear-gradient(45deg,#ededf0 25%,transparent 25%),linear-gradient(-45deg,#ededf0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ededf0 75%),linear-gradient(-45deg,transparent 75%,#ededf0 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0px}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rappel-ui",
   "private": false,
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "a vue3 ui library",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/theme-chalk/index.css

@@ -557,4 +557,70 @@ body {
 }
 .re-button--mini {
   padding: 4px 8px;
+}
+
+.re-colors--primary {
+  width: 60rem;
+  border-radius: 4px;
+  overflow: hidden;
+  color: #ffffff;
+}
+.re-colors--secondary {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+.re-colors--neutral {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+}
+.re-colors__panel {
+  border-radius: 4px;
+  overflow: hidden;
+  color: #ffffff;
+}
+.re-colors__base {
+  color: #ffffff;
+  height: 6rem;
+  box-shadow: 10px 10px;
+  padding: 1rem;
+}
+.re-colors__shades {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.re-colors__shade {
+  flex: 1;
+  height: 3.2rem;
+  padding: 0.2rem;
+}
+.re-colors__collects {
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  height: 7rem;
+  padding: 1rem;
+}
+.re-colors__borders {
+  display: flex;
+  justify-content: space-between;
+}
+.re-colors__border-content {
+  border-radius: 50%;
+  margin-left: 1rem;
+  background-color: #fff;
+  height: 5rem;
+  width: 5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+.re-colors__grids {
+  background-color: #ffffff; /* 轻灰色背景 */
+  background-image: linear-gradient(45deg, #ededf0 25%, transparent 25%), linear-gradient(-45deg, #ededf0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ededf0 75%), linear-gradient(-45deg, transparent 75%, #ededf0 75%);
+  background-size: 22px 22px;
+  background-position: 0 0, 0 11px, 11px -11px, -11px 0px;
 }

package/theme-chalk/re-colors.css

@@ -0,0 +1,100 @@
+@charset "UTF-8";
+/**
+ * 将十六进制颜色转换为RGB颜色
+ * @param $hex 十六进制颜色值
+ * @returns RGB颜色值
+ * color.channel($color, "red", $space: rgb)
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $value RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $color RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 创建一个等效的透明度颜色，并返回一个等效的透明度颜色
+ * @param $color 颜色
+ * @param $opacity 透明度，默认值为1
+ * @returns 一个等效的透明度颜色
+ */
+/**
+ * 创建一个变暗的颜色，并返回一个变暗的颜色
+ * @param $color 颜色
+ * @param $factor 颜色变暗的度量，默认为0.15
+ * @returns 一个变暗的颜色
+ */
+/**
+ * 创建层级颜色
+ * @param $base-color 基础颜色
+ * @param $darkness 变暗的度量，默认为0.15
+ * @returns 主题色映射
+ */
+.re-colors--primary {
+  width: 60rem;
+  border-radius: 4px;
+  overflow: hidden;
+  color: #ffffff;
+}
+.re-colors--secondary {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+.re-colors--neutral {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+}
+.re-colors__panel {
+  border-radius: 4px;
+  overflow: hidden;
+  color: #ffffff;
+}
+.re-colors__base {
+  color: #ffffff;
+  height: 6rem;
+  box-shadow: 10px 10px;
+  padding: 1rem;
+}
+.re-colors__shades {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.re-colors__shade {
+  flex: 1;
+  height: 3.2rem;
+  padding: 0.2rem;
+}
+.re-colors__collects {
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  height: 7rem;
+  padding: 1rem;
+}
+.re-colors__borders {
+  display: flex;
+  justify-content: space-between;
+}
+.re-colors__border-content {
+  border-radius: 50%;
+  margin-left: 1rem;
+  background-color: #fff;
+  height: 5rem;
+  width: 5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+.re-colors__grids {
+  background-color: #ffffff; /* 轻灰色背景 */
+  background-image: linear-gradient(45deg, #ededf0 25%, transparent 25%), linear-gradient(-45deg, #ededf0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ededf0 75%), linear-gradient(-45deg, transparent 75%, #ededf0 75%);
+  background-size: 22px 22px;
+  background-position: 0 0, 0 11px, 11px -11px, -11px 0px;
+}

package/theme-chalk/src/colors.scss

@@ -0,0 +1,77 @@
+@use 'mixins/index' as *;
+
+@include buildCls('colors') {
+  &--primary {
+    width: 60rem;
+    border-radius: 4px;
+    overflow: hidden;
+    color: #ffffff;
+  }
+  &--secondary {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+  &--neutral {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+  }
+  &__panel {
+    border-radius: 4px;
+    overflow: hidden;
+    color: #ffffff;
+  }
+  &__base {
+    color: #ffffff;
+    height: 6rem;
+    box-shadow: 10px 10px;
+    padding: 1rem;
+  }
+  &__shades {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+  &__shade {
+    flex: 1;
+    height: 3.2rem;
+    padding: 0.2rem;
+  }
+  &__collects {
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 1rem;
+    height: 7rem;
+    padding: 1rem;
+  }
+  &__borders {
+    display: flex;
+    justify-content: space-between;
+  }
+  &__border-content {
+    border-radius: 50%;
+    margin-left: 1rem;
+    background-color: #fff;
+    height: 5rem;
+    width: 5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+  }
+  &__grids {
+    background-color: #ffffff; /* 轻灰色背景 */
+    background-image:
+      linear-gradient(45deg, #ededf0 25%, transparent 25%),
+      linear-gradient(-45deg, #ededf0 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #ededf0 75%),
+      linear-gradient(-45deg, transparent 75%, #ededf0 75%);
+    background-size: 22px 22px;
+    background-position:
+      0 0,
+      0 11px,
+      11px -11px,
+      -11px 0px;
+  }
+}

package/theme-chalk/src/index.scss

@@ -1,2 +1,3 @@
 @forward './base.scss';
 @forward './button.scss';
+@forward './colors.scss';