@jasperdai/uikit-base-component-vue2 0.3.0

package/README.md

@@ -0,0 +1,34 @@
+# vue2-uikit-provider
+
+## 1 Usage
+
+### 1.1 Use UIKitProvider Components
+
+```vue
+<script lang="ts" setup>
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue2';
+</script>
+
+<template>
+  <UIKitProvider theme="light">
+
+  </UIKitProvider>
+</template>
+```
+
+### 1.2 Use Hook useUIKit
+
+```vue
+<template>
+  <div>{{ theme }}</div>
+  <button @click="setTheme('dark')">set theme to dark</button>
+  <button @click="setTheme('light')">set theme to light</button>
+</template>
+
+<script lang="ts" setup>
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue2';
+
+const { theme, setTheme } = useUIKit();
+</script>
+
+```

package/dist/ThemeProvider-DcrhE6dp.js

@@ -0,0 +1,49 @@
+import './styles/index.css';import { useTheme as r } from "./providers/UIKitProvider/contexts/ThemeProvider/useThemeProvider.js";
+function s(e, t, o, d, f, i, l, u) {
+  var n = typeof e == "function" ? e.options : e;
+  return t && (n.render = t, n.staticRenderFns = o, n._compiled = !0), i && (n._scopeId = "data-v-" + i), {
+    exports: e,
+    options: n
+  };
+}
+const a = {
+  name: "ThemeProvider",
+  props: {
+    theme: {
+      type: [String, Object],
+      required: !0,
+      validator: function(e) {
+        return typeof e == "string" || e instanceof Object;
+      }
+    }
+  },
+  data() {
+    const { setTheme: e } = r();
+    return {
+      setTheme: e
+    };
+  },
+  mounted() {
+    if (console.log(this.theme, "jasper2"), typeof this.theme == "object") {
+      const { themeStyle: e, primaryColor: t } = this.theme;
+      this.setTheme({ themeStyle: e, primaryColor: t });
+    } else
+      this.setTheme(this.theme);
+  }
+};
+var m = function() {
+  var t = this, o = t._self._c;
+  return o("div", { staticClass: "uikit-theme-context" }, [t._t("default")], 2);
+}, c = [], h = /* @__PURE__ */ s(
+  a,
+  m,
+  c,
+  !1,
+  null,
+  "89cdd6e7"
+);
+const p = h.exports;
+export {
+  p as T,
+  s as n
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { useUIKit, UIKitProvider } from './providers/UIKitProvider/index';
+
+export { UIKitProvider, useUIKit, };

package/dist/index.js

@@ -0,0 +1,6 @@
+import { default as o } from "./providers/UIKitProvider/contexts/UIKitProvider/UIKitProvider.js";
+import { useUIKit as f } from "./providers/UIKitProvider/contexts/UIKitProvider/useUIKitProvider.js";
+export {
+  o as UIKitProvider,
+  f as useUIKit
+};

package/dist/providers/UIKitProvider/contexts/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,5 @@
+import "./useThemeProvider.js";
+import { T as a } from "../../../../ThemeProvider-DcrhE6dp.js";
+export {
+  a as default
+};

package/dist/providers/UIKitProvider/contexts/ThemeProvider/colorGenerator.d.ts

@@ -0,0 +1,9 @@
+export declare class ThemeColorGenerator {
+    private static readonly COLOR_TYPES;
+    private static readonly DEFAULT_COLOR;
+    private static getCurrentPrimaryColor;
+    private static replaceColorVariable;
+    private static updateCSSVariables;
+    static applyThemeColor(): void;
+    static watchThemeColor(): void;
+}

package/dist/providers/UIKitProvider/contexts/ThemeProvider/colorGenerator.js

@@ -0,0 +1,60 @@
+var n = Object.defineProperty;
+var m = (r, t, e) => t in r ? n(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var a = (r, t, e) => m(r, typeof t != "symbol" ? t + "" : t, e);
+const h = {
+  "--text-color-link": "var(--uikit-color-theme-6)",
+  "--text-color-link-hover": "var(--uikit-color-theme-5)",
+  "--text-color-link-disabled": "var(--uikit-color-theme-2)",
+  "--bg-color-bubble-own": "var(--uikit-color-theme-7)",
+  "--list-color-focused": "var(--uikit-color-theme-2)",
+  "--button-color-primary-default": "var(--uikit-color-theme-6)",
+  "--button-color-primary-hover": "var(--uikit-color-theme-5)",
+  "--button-color-primary-active": "var(--uikit-color-theme-7)",
+  "--button-color-primary-disabled": "var(--uikit-color-theme-2)",
+  "--checkbox-color-selected": "var(--uikit-color-theme-5)",
+  "--toast-color-default": "var(--uikit-color-theme-2)",
+  "--switch-color-on": "var(--uikit-color-theme-5)",
+  "--slider-color-filled": "var(--uikit-color-theme-5)"
+}, i = class i {
+  static getCurrentPrimaryColor() {
+    const t = document.documentElement;
+    return getComputedStyle(t).getPropertyValue("--primary-color").trim().toLowerCase();
+  }
+  static replaceColorVariable(t, e) {
+    const o = new RegExp(`var\\(--uikit-color-(${i.COLOR_TYPES.join("|")})-(\\d+)\\)`);
+    return t.replace(o, (s, l, c) => `var(--uikit-color-${e}-${c})`);
+  }
+  static updateCSSVariables(t, e) {
+    const o = document.documentElement;
+    Object.entries(t).forEach(([s, l]) => {
+      if (l.includes("var(--uikit-color-")) {
+        const c = this.replaceColorVariable(l, e);
+        o.style.setProperty(s, c);
+      }
+    });
+  }
+  static applyThemeColor() {
+    const t = this.getCurrentPrimaryColor();
+    if (!this.COLOR_TYPES.includes(t)) {
+      console.warn(`Unsupported color type: ${t}, using default color: ${this.DEFAULT_COLOR}`);
+      return;
+    }
+    const e = h;
+    this.updateCSSVariables(e, t);
+  }
+  static watchThemeColor() {
+    new MutationObserver((e) => {
+      e.forEach((o) => {
+        o.type === "attributes" && o.attributeName === "style" && this.applyThemeColor();
+      });
+    }).observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["style"]
+    });
+  }
+};
+a(i, "COLOR_TYPES", ["theme", "green", "red", "orange"]), a(i, "DEFAULT_COLOR", "theme");
+let u = i;
+export {
+  u as ThemeColorGenerator
+};

package/dist/providers/UIKitProvider/contexts/ThemeProvider/useThemeProvider.d.ts

@@ -0,0 +1,6 @@
+export declare function useTheme(): {
+    theme: {
+        value: string;
+    };
+    setTheme: (newTheme: any) => void;
+};

package/dist/providers/UIKitProvider/contexts/ThemeProvider/useThemeProvider.js

@@ -0,0 +1,17 @@
+import r from "vue";
+import { ThemeColorGenerator as l } from "./colorGenerator.js";
+const o = r.observable({
+  value: ""
+});
+function p() {
+  function t(e) {
+    o.value = typeof e == "object" ? e.themeStyle : e, document.documentElement.setAttribute("tui-theme-mode", `${o.value}`), typeof e == "object" && e.primaryColor && (document.documentElement.style.setProperty("--primary-color", e.primaryColor), l.applyThemeColor()), console.log(o.value, "jasper1");
+  }
+  return {
+    theme: o,
+    setTheme: t
+  };
+}
+export {
+  p as useTheme
+};

package/dist/providers/UIKitProvider/contexts/UIKitProvider/UIKitProvider.js

@@ -0,0 +1,26 @@
+import { n as t, T as n } from "../../../../ThemeProvider-DcrhE6dp.js";
+const o = {
+  components: {
+    ThemeProvider: n
+  },
+  props: {
+    theme: {
+      type: String | Object
+    }
+  }
+};
+var s = function() {
+  var e = this, r = e._self._c;
+  return r("ThemeProvider", { attrs: { theme: e.theme } }, [e._t("default")], 2);
+}, _ = [], a = /* @__PURE__ */ t(
+  o,
+  s,
+  _,
+  !1,
+  null,
+  null
+);
+const i = a.exports;
+export {
+  i as default
+};

package/dist/providers/UIKitProvider/contexts/UIKitProvider/useUIKitProvider.d.ts

@@ -0,0 +1,6 @@
+export declare function useUIKit(): {
+    theme: {
+        value: string;
+    };
+    setTheme: (newTheme: any) => void;
+};

package/dist/providers/UIKitProvider/contexts/UIKitProvider/useUIKitProvider.js

@@ -0,0 +1,7 @@
+import { useTheme as e } from "../ThemeProvider/useThemeProvider.js";
+function n() {
+  return e();
+}
+export {
+  n as useUIKit
+};

package/dist/providers/UIKitProvider/index.d.ts

@@ -0,0 +1,4 @@
+import { default as UIKitProvider } from './contexts/UIKitProvider/UIKitProvider.vue';
+import { useUIKit } from './contexts/UIKitProvider/useUIKitProvider';
+
+export { UIKitProvider, useUIKit, };

package/dist/providers/UIKitProvider/index.js

@@ -0,0 +1,6 @@
+import { default as o } from "./contexts/UIKitProvider/UIKitProvider.js";
+import { useUIKit as f } from "./contexts/UIKitProvider/useUIKitProvider.js";
+export {
+  o as UIKitProvider,
+  f as useUIKit
+};

package/dist/styles/index.css

@@ -0,0 +1 @@
+:root[tui-theme-mode=dark],.tui-theme-dark{--uikit-color-theme-1: #1C2333;--uikit-color-theme-2: #243047;--uikit-color-theme-3: #2F4875;--uikit-color-theme-4: #305BA6;--uikit-color-theme-5: #2B6AD6;--uikit-color-theme-6: #4086FF;--uikit-color-theme-7: #5C9DFF;--uikit-color-theme-8: #78B0FF;--uikit-color-theme-9: #9CC7FF;--uikit-color-theme-10: #C2DEFF;--uikit-color-black-1: rgba(0, 0, 0, 100%);--uikit-color-black-2: rgba(0, 0, 0, 90%);--uikit-color-black-3: rgba(0, 0, 0, 72%);--uikit-color-black-4: rgba(0, 0, 0, 55%);--uikit-color-black-5: rgba(0, 0, 0, 40%);--uikit-color-black-6: rgba(0, 0, 0, 25%);--uikit-color-black-7: rgba(0, 0, 0, 12%);--uikit-color-black-8: rgba(0, 0, 0, 6%);--uikit-color-white-1: rgba(255, 255, 255, 100%);--uikit-color-white-2: rgba(255, 255, 255, 93%);--uikit-color-white-3: rgba(255, 255, 255, 75%);--uikit-color-white-4: rgba(255, 255, 255, 55%);--uikit-color-white-5: rgba(255, 255, 255, 42%);--uikit-color-white-6: rgba(255, 255, 255, 30%);--uikit-color-white-7: rgba(255, 255, 255, 14%);--uikit-color-gray-1: #131417;--uikit-color-gray-2: #1F2024;--uikit-color-gray-3: #2B2C30;--uikit-color-gray-4: #3A3C42;--uikit-color-gray-5: #48494F;--uikit-color-gray-6: #54565C;--uikit-color-gray-7: #676A70;--uikit-color-green-1: #1A2620;--uikit-color-green-2: #22352C;--uikit-color-green-3: #2F4F3F;--uikit-color-green-4: #377355;--uikit-color-green-5: #368F65;--uikit-color-green-6: #38A673;--uikit-color-green-7: #62B58B;--uikit-color-green-8: #8BC7A9;--uikit-color-green-9: #A9D4BD;--uikit-color-green-10: #C8E5D5;--uikit-color-red-1: #2B1C1F;--uikit-color-red-2: #422324;--uikit-color-red-3: #613234;--uikit-color-red-4: #8A4242;--uikit-color-red-5: #C2544E;--uikit-color-red-6: #E6594C;--uikit-color-red-7: #E57A6E;--uikit-color-red-8: #F3A599;--uikit-color-red-9: #FACBC3;--uikit-color-red-10: #FAE4DE;--uikit-color-orange-1: #211A19;--uikit-color-orange-2: #35231A;--uikit-color-orange-3: #462E1F;--uikit-color-orange-4: #653C21;--uikit-color-orange-5: #96562A;--uikit-color-orange-6: #E37F32;--uikit-color-orange-7: #E39552;--uikit-color-orange-8: #EEAD72;--uikit-color-orange-9: #F7CFA4;--uikit-color-orange-10: #F9E9D1;--uikit-color-transparent: rgba(255, 255, 255, 0%);--text-color-primary: var(--uikit-color-white-2);--text-color-secondary: var(--uikit-color-white-4);--text-color-tertiary: var(--uikit-color-white-6);--text-color-disabled: var(--uikit-color-white-7);--text-color-button: var(--uikit-color-white-1);--text-color-button-disabled: var(--uikit-color-white-5);--text-color-link: var(--uikit-color-theme-6);--text-color-link-hover: var(--uikit-color-theme-5);--text-color-link-disabled: var(--uikit-color-theme-2);--text-color-link-active: var(--uikit-color-theme-7);--text-color-anti-primary: var(--uikit-color-black-2);--text-color-anti-secondary: var(--uikit-color-black-4);--text-color-warning: var(--uikit-color-orange-6);--text-color-success: var(--uikit-color-green-6);--text-color-error: var(--uikit-color-red-6);--bg-color-topbar: var(--uikit-color-gray-1);--bg-color-operate: var(--uikit-color-gray-2);--bg-color-dialog: var(--uikit-color-gray-2);--bg-color-dialog-module: var(--uikit-color-gray-3);--bg-color-entrycard: var(--uikit-color-gray-3);--bg-color-function: var(--uikit-color-gray-4);--bg-color-bottombar: var(--uikit-color-gray-3);--bg-color-input: var(--uikit-color-gray-3);--bg-color-bubble-reciprocal: var(--uikit-color-gray-3);--bg-color-bubble-own: var(--uikit-color-theme-7);--bg-color-default: var(--uikit-color-gray-1);--bg-color-tag-mask: var(--uikit-color-black-4);--bg-color-element-mask: var(--uikit-color-black-6);--bg-color-mask: var(--uikit-color-black-4);--bg-color-mask-disappeared: var(--uikit-color-black-8);--bg-color-mask-begin: var(--uikit-color-black-2);--stroke-color-primary: var(--uikit-color-gray-4);--stroke-color-secondary: var(--uikit-color-gray-3);--stroke-color-module: var(--uikit-color-gray-5);--shadow-color: var(--uikit-color-black-8);--list-color-default: var(--uikit-color-gray-2);--list-color-hover: var(--uikit-color-gray-3);--list-color-focused: var(--uikit-color-theme-2);--button-color-primary-default: var(--uikit-color-theme-6);--button-color-primary-hover: var(--uikit-color-theme-5);--button-color-primary-active: var(--uikit-color-theme-7);--button-color-primary-disabled: var(--uikit-color-theme-2);--button-color-secondary-default: var(--uikit-color-gray-4);--button-color-secondary-hover: var(--uikit-color-gray-3);--button-color-secondary-active: var(--uikit-color-gray-5);--button-color-secondary-disabled: var(--uikit-color-gray-3);--button-color-accept: var(--uikit-color-green-6);--button-color-hangup: var(--uikit-color-red-6);--button-color-on: var(--uikit-color-white-1);--button-color-off: var(--uikit-color-black-5);--dropdown-color-default: var(--uikit-color-gray-3);--dropdown-color-hover: var(--uikit-color-gray-4);--dropdown-color-active: var(--uikit-color-gray-2);--scroll-bar-color-default: var(--uikit-color-white-7);--scroll-bar-color-hover: var(--uikit-color-white-6);--floating-color-default: var(--uikit-color-gray-3);--floating-color-operate: var(--uikit-color-gray-4);--checkbox-color-selected: var(--uikit-color-theme-5);--toast-color-warning: var(--uikit-color-orange-2);--toast-color-success: var(--uikit-color-green-2);--toast-color-error: var(--uikit-color-red-2);--toast-color-default: var(--uikit-color-theme-2);--switch-color-off: var(--uikit-color-gray-4);--switch-color-on: var(--uikit-color-theme-5);--switch-color-button: var(--uikit-color-white-1);--slider-color-filled: var(--uikit-color-theme-5);--slider-color-empty: var(--uikit-color-gray-5);--slider-color-button: var(--uikit-color-white-1);--tab-color-selected: var(--uikit-color-gray-5);--tab-color-unselected: var(--uikit-color-gray-4);--tab-color-option: var(--uikit-color-gray-4)}:root[tui-theme-mode=light],.tui-theme-light{--uikit-color-theme-1: #EBF3FF;--uikit-color-theme-2: #CCE2FF;--uikit-color-theme-3: #ADCFFF;--uikit-color-theme-4: #7AAFFF;--uikit-color-theme-5: #4588F5;--uikit-color-theme-6: #1C66E5;--uikit-color-theme-7: #0D49BF;--uikit-color-theme-8: #033099;--uikit-color-theme-9: #001F73;--uikit-color-theme-10: #00124D;--uikit-color-black-1: rgba(0, 0, 0, 100%);--uikit-color-black-2: rgba(0, 0, 0, 90%);--uikit-color-black-3: rgba(0, 0, 0, 72%);--uikit-color-black-4: rgba(0, 0, 0, 55%);--uikit-color-black-5: rgba(0, 0, 0, 40%);--uikit-color-black-6: rgba(0, 0, 0, 25%);--uikit-color-black-7: rgba(0, 0, 0, 12%);--uikit-color-black-8: rgba(0, 0, 0, 6%);--uikit-color-white-1: rgba(255, 255, 255, 100%);--uikit-color-white-2: rgba(255, 255, 255, 93%);--uikit-color-white-3: rgba(255, 255, 255, 75%);--uikit-color-white-4: rgba(255, 255, 255, 55%);--uikit-color-white-5: rgba(255, 255, 255, 42%);--uikit-color-white-6: rgba(255, 255, 255, 30%);--uikit-color-white-7: rgba(255, 255, 255, 14%);--uikit-color-gray-1: #F9FAFC;--uikit-color-gray-2: #F0F2F7;--uikit-color-gray-3: #E6E9F0;--uikit-color-gray-4: #D1D4DE;--uikit-color-gray-5: #C0C3CC;--uikit-color-gray-6: #B3B6BE;--uikit-color-gray-7: #A5A9B0;--uikit-color-green-1: #DCFAE9;--uikit-color-green-2: #B6F0D1;--uikit-color-green-3: #84E3B5;--uikit-color-green-4: #5AD69E;--uikit-color-green-5: #3CC98C;--uikit-color-green-6: #0ABF77;--uikit-color-green-7: #09A768;--uikit-color-green-8: #078F59;--uikit-color-green-9: #067049;--uikit-color-green-10: #044D37;--uikit-color-red-1: #FFE7E6;--uikit-color-red-2: #FCC9C7;--uikit-color-red-3: #FAAEAC;--uikit-color-red-4: #F58989;--uikit-color-red-5: #E86666;--uikit-color-red-6: #E54545;--uikit-color-red-7: #C93439;--uikit-color-red-8: #AD2934;--uikit-color-red-9: #8F222D;--uikit-color-red-10: #6B1A27;--uikit-color-orange-1: #FFEEDB;--uikit-color-orange-2: #FFD6B2;--uikit-color-orange-3: #FFBE85;--uikit-color-orange-4: #FFA455;--uikit-color-orange-5: #FF8B2B;--uikit-color-orange-6: #FF7200;--uikit-color-orange-7: #E05D00;--uikit-color-orange-8: #BF4900;--uikit-color-orange-9: #8F370B;--uikit-color-orange-10: #662200;--uikit-color-transparent: rgba(255, 255, 255, 0%);--text-color-primary: var(--uikit-color-black-2);--text-color-secondary: var(--uikit-color-black-4);--text-color-tertiary: var(--uikit-color-black-5);--text-color-disabled: var(--uikit-color-black-6);--text-color-button: var(--uikit-color-white-1);--text-color-button-disabled: var(--uikit-color-white-1);--text-color-link: var(--uikit-color-theme-6);--text-color-link-hover: var(--uikit-color-theme-5);--text-color-link-disabled: var(--uikit-color-theme-2);--text-color-link-active: var(--uikit-color-theme-7);--text-color-anti-primary: var(--uikit-color-black-2);--text-color-anti-secondary: var(--uikit-color-black-4);--text-color-warning: var(--uikit-color-orange-6);--text-color-success: var(--uikit-color-green-6);--text-color-error: var(--uikit-color-red-6);--bg-color-topbar: var(--uikit-color-gray-1);--bg-color-operate: var(--uikit-color-white-1);--bg-color-dialog: var(--uikit-color-white-1);--bg-color-dialog-module: var(--uikit-color-gray-2);--bg-color-entrycard: var(--uikit-color-gray-2);--bg-color-function: var(--uikit-color-gray-2);--bg-color-bottombar: var(--uikit-color-white-1);--bg-color-input: var(--uikit-color-gray-2);--bg-color-bubble-reciprocal: var(--uikit-color-gray-2);--bg-color-bubble-own: var(--uikit-color-theme-2);--bg-color-default: var(--uikit-color-gray-2);--bg-color-tag-mask: var(--uikit-color-white-4);--bg-color-element-mask: var(--uikit-color-black-6);--bg-color-mask: var(--uikit-color-black-4);--bg-color-mask-disappeared: var(--uikit-color-white-7);--bg-color-mask-begin: var(--uikit-color-white-1);--stroke-color-primary: var(--uikit-color-gray-3);--stroke-color-secondary: var(--uikit-color-gray-2);--stroke-color-module: var(--uikit-color-gray-3);--shadow-color: var(--uikit-color-black-8);--list-color-default: var(--uikit-color-white-1);--list-color-hover: var(--uikit-color-gray-1);--list-color-focused: var(--uikit-color-theme-1);--button-color-primary-default: var(--uikit-color-theme-6);--button-color-primary-hover: var(--uikit-color-theme-5);--button-color-primary-active: var(--uikit-color-theme-7);--button-color-primary-disabled: var(--uikit-color-theme-2);--button-color-secondary-default: var(--uikit-color-gray-2);--button-color-secondary-hover: var(--uikit-color-gray-1);--button-color-secondary-active: var(--uikit-color-gray-3);--button-color-secondary-disabled: var(--uikit-color-gray-1);--button-color-accept: var(--uikit-color-green-6);--button-color-hangup: var(--uikit-color-red-6);--button-color-on: var(--uikit-color-white-1);--button-color-off: var(--uikit-color-black-5);--dropdown-color-default: var(--uikit-color-white-1);--dropdown-color-hover: var(--uikit-color-gray-1);--dropdown-color-active: var(--uikit-color-theme-2);--scroll-bar-color-default: var(--uikit-color-black-7);--scroll-bar-color-hover: var(--uikit-color-black-6);--floating-color-default: var(--uikit-color-white-1);--floating-color-operate: var(--uikit-color-gray-2);--checkbox-color-selected: var(--uikit-color-theme-6);--toast-color-warning: var(--uikit-color-orange-1);--toast-color-success: var(--uikit-color-green-1);--toast-color-error: var(--uikit-color-red-1);--toast-color-default: var(--uikit-color-theme-1);--switch-color-off: var(--uikit-color-gray-4);--switch-color-on: var(--uikit-color-theme-6);--switch-color-button: var(--uikit-color-white-1);--slider-color-filled: var(--uikit-color-theme-6);--slider-color-empty: var(--uikit-color-gray-3);--slider-color-button: var(--uikit-color-white-1);--tab-color-selected: var(--uikit-color-theme-2);--tab-color-unselected: var(--uikit-color-gray-2);--tab-color-option: var(--uikit-color-gray-3)}.uikit-theme-context[data-v-89cdd6e7]{width:100%;height:100%}

package/dist/styles/styles/themes/dark.scss

@@ -0,0 +1,168 @@
+:root[tui-theme-mode="dark"],
+.tui-theme-dark {
+  --uikit-color-theme-1: #1C2333;
+  --uikit-color-theme-2: #243047;
+  --uikit-color-theme-3: #2F4875;
+  --uikit-color-theme-4: #305BA6;
+  --uikit-color-theme-5: #2B6AD6;
+  --uikit-color-theme-6: #4086FF;
+  --uikit-color-theme-7: #5C9DFF;
+  --uikit-color-theme-8: #78B0FF;
+  --uikit-color-theme-9: #9CC7FF;
+  --uikit-color-theme-10: #C2DEFF;
+
+  --uikit-color-black-1: rgba(0, 0, 0, 100%);
+  --uikit-color-black-2: rgba(0, 0, 0, 90%);
+  --uikit-color-black-3: rgba(0, 0, 0, 72%);
+  --uikit-color-black-4: rgba(0, 0, 0, 55%);
+  --uikit-color-black-5: rgba(0, 0, 0, 40%);
+  --uikit-color-black-6: rgba(0, 0, 0, 25%);
+  --uikit-color-black-7: rgba(0, 0, 0, 12%);
+  --uikit-color-black-8: rgba(0, 0, 0, 6%);
+  --uikit-color-white-1: rgba(255, 255, 255, 100%);
+  --uikit-color-white-2: rgba(255, 255, 255, 93%);
+  --uikit-color-white-3: rgba(255, 255, 255, 75%);
+  --uikit-color-white-4: rgba(255, 255, 255, 55%);
+  --uikit-color-white-5: rgba(255, 255, 255, 42%);
+  --uikit-color-white-6: rgba(255, 255, 255, 30%);
+  --uikit-color-white-7: rgba(255, 255, 255, 14%);
+  --uikit-color-gray-1: #131417;
+  --uikit-color-gray-2: #1F2024;
+  --uikit-color-gray-3: #2B2C30;
+  --uikit-color-gray-4: #3A3C42;
+  --uikit-color-gray-5: #48494F;
+  --uikit-color-gray-6: #54565C;
+  --uikit-color-gray-7: #676A70;
+  --uikit-color-green-1: #1A2620;
+  --uikit-color-green-2: #22352C;
+  --uikit-color-green-3: #2F4F3F;
+  --uikit-color-green-4: #377355;
+  --uikit-color-green-5: #368F65;
+  --uikit-color-green-6: #38A673;
+  --uikit-color-green-7: #62B58B;
+  --uikit-color-green-8: #8BC7A9;
+  --uikit-color-green-9: #A9D4BD;
+  --uikit-color-green-10: #C8E5D5;
+  --uikit-color-red-1: #2B1C1F;
+  --uikit-color-red-2: #422324;
+  --uikit-color-red-3: #613234;
+  --uikit-color-red-4: #8A4242;
+  --uikit-color-red-5: #C2544E;
+  --uikit-color-red-6: #E6594C;
+  --uikit-color-red-7: #E57A6E;
+  --uikit-color-red-8: #F3A599;
+  --uikit-color-red-9: #FACBC3;
+  --uikit-color-red-10: #FAE4DE;
+  --uikit-color-orange-1: #211A19;
+  --uikit-color-orange-2: #35231A;
+  --uikit-color-orange-3: #462E1F;
+  --uikit-color-orange-4: #653C21;
+  --uikit-color-orange-5: #96562A;
+  --uikit-color-orange-6: #E37F32;
+  --uikit-color-orange-7: #E39552;
+  --uikit-color-orange-8: #EEAD72;
+  --uikit-color-orange-9: #F7CFA4;
+  --uikit-color-orange-10: #F9E9D1;
+  --uikit-color-transparent: rgba(255, 255, 255, 0%);
+
+  // text
+  --text-color-primary: var(--uikit-color-white-2);
+  --text-color-secondary: var(--uikit-color-white-4);
+  --text-color-tertiary: var(--uikit-color-white-6);
+  --text-color-disabled: var(--uikit-color-white-7);
+  --text-color-button: var(--uikit-color-white-1);
+  --text-color-button-disabled: var(--uikit-color-white-5);
+  --text-color-link: var(--uikit-color-theme-6);
+  --text-color-link-hover: var(--uikit-color-theme-5);
+  --text-color-link-disabled: var(--uikit-color-theme-2);
+  --text-color-link-active: var(--uikit-color-theme-7);
+  --text-color-anti-primary: var(--uikit-color-black-2);
+  --text-color-anti-secondary: var(--uikit-color-black-4);
+  --text-color-warning: var(--uikit-color-orange-6);
+  --text-color-success: var(--uikit-color-green-6);
+  --text-color-error: var(--uikit-color-red-6);
+
+  // background
+  --bg-color-topbar: var(--uikit-color-gray-1);
+  --bg-color-operate: var(--uikit-color-gray-2);
+  --bg-color-dialog: var(--uikit-color-gray-2);
+  --bg-color-dialog-module: var(--uikit-color-gray-3);
+  --bg-color-entrycard: var(--uikit-color-gray-3);
+  --bg-color-function: var(--uikit-color-gray-4);
+  --bg-color-bottombar: var(--uikit-color-gray-3);
+  --bg-color-input: var(--uikit-color-gray-3);
+  --bg-color-bubble-reciprocal: var(--uikit-color-gray-3);
+  --bg-color-bubble-own: var(--uikit-color-theme-7);
+  --bg-color-default: var(--uikit-color-gray-1);
+  --bg-color-tag-mask: var(--uikit-color-black-4);
+  --bg-color-element-mask: var(--uikit-color-black-6);
+  --bg-color-mask: var(--uikit-color-black-4);
+  --bg-color-mask-disappeared: var(--uikit-color-black-8);
+  --bg-color-mask-begin: var(--uikit-color-black-2);
+
+  // border
+  --stroke-color-primary: var(--uikit-color-gray-4);
+  --stroke-color-secondary: var(--uikit-color-gray-3);
+  --stroke-color-module: var(--uikit-color-gray-5);
+
+  // shadow
+  --shadow-color: var(--uikit-color-black-8);
+
+  // status
+  --list-color-default: var(--uikit-color-gray-2);
+  --list-color-hover: var(--uikit-color-gray-3);
+  --list-color-focused: var(--uikit-color-theme-2);
+
+  // button
+  --button-color-primary-default: var(--uikit-color-theme-6);
+  --button-color-primary-hover: var(--uikit-color-theme-5);
+  --button-color-primary-active: var(--uikit-color-theme-7);
+  --button-color-primary-disabled: var(--uikit-color-theme-2);
+  --button-color-secondary-default: var(--uikit-color-gray-4);
+  --button-color-secondary-hover: var(--uikit-color-gray-3);
+  --button-color-secondary-active: var(--uikit-color-gray-5);
+  --button-color-secondary-disabled: var(--uikit-color-gray-3);
+  --button-color-accept: var(--uikit-color-green-6);
+  --button-color-hangup: var(--uikit-color-red-6);
+  --button-color-on: var(--uikit-color-white-1);
+  --button-color-off: var(--uikit-color-black-5);
+
+  // dropdown
+  --dropdown-color-default: var(--uikit-color-gray-3);
+  --dropdown-color-hover: var(--uikit-color-gray-4);
+  --dropdown-color-active: var(--uikit-color-gray-2);
+
+  // scroll-bar
+  --scroll-bar-color-default: var(--uikit-color-white-7);
+  --scroll-bar-color-hover: var(--uikit-color-white-6);
+
+  // floating
+  --floating-color-default: var(--uikit-color-gray-3);
+  --floating-color-operate: var(--uikit-color-gray-4);
+
+  // checkbox
+  --checkbox-color-selected: var(--uikit-color-theme-5);
+
+  // toast
+  --toast-color-warning: var(--uikit-color-orange-2);
+  --toast-color-success: var(--uikit-color-green-2);
+  --toast-color-error: var(--uikit-color-red-2);
+  --toast-color-default: var(--uikit-color-theme-2);
+
+  // switch
+  --switch-color-off: var(--uikit-color-gray-4);
+  --switch-color-on: var(--uikit-color-theme-5);
+  --switch-color-button: var(--uikit-color-white-1);
+
+  // slider
+  --slider-color-filled: var(--uikit-color-theme-5);
+  --slider-color-empty: var(--uikit-color-gray-5);
+  --slider-color-button: var(--uikit-color-white-1);
+
+  // tab
+  --tab-color-selected: var(--uikit-color-gray-5);
+  --tab-color-unselected: var(--uikit-color-gray-4);
+  --tab-color-option: var(--uikit-color-gray-4);
+
+  // todo-tag
+}

package/dist/styles/styles/themes/light.scss

@@ -0,0 +1,168 @@
+:root[tui-theme-mode="light"],
+.tui-theme-light {
+  --uikit-color-theme-1: #EBF3FF;
+  --uikit-color-theme-2: #CCE2FF;
+  --uikit-color-theme-3: #ADCFFF;
+  --uikit-color-theme-4: #7AAFFF;
+  --uikit-color-theme-5: #4588F5;
+  --uikit-color-theme-6: #1C66E5;
+  --uikit-color-theme-7: #0D49BF;
+  --uikit-color-theme-8: #033099;
+  --uikit-color-theme-9: #001F73;
+  --uikit-color-theme-10: #00124D;
+
+  --uikit-color-black-1: rgba(0, 0, 0, 100%);
+  --uikit-color-black-2: rgba(0, 0, 0, 90%);
+  --uikit-color-black-3: rgba(0, 0, 0, 72%);
+  --uikit-color-black-4: rgba(0, 0, 0, 55%);
+  --uikit-color-black-5: rgba(0, 0, 0, 40%);
+  --uikit-color-black-6: rgba(0, 0, 0, 25%);
+  --uikit-color-black-7: rgba(0, 0, 0, 12%);
+  --uikit-color-black-8: rgba(0, 0, 0, 6%);
+  --uikit-color-white-1: rgba(255, 255, 255, 100%);
+  --uikit-color-white-2: rgba(255, 255, 255, 93%);
+  --uikit-color-white-3: rgba(255, 255, 255, 75%);
+  --uikit-color-white-4: rgba(255, 255, 255, 55%);
+  --uikit-color-white-5: rgba(255, 255, 255, 42%);
+  --uikit-color-white-6: rgba(255, 255, 255, 30%);
+  --uikit-color-white-7: rgba(255, 255, 255, 14%);
+  --uikit-color-gray-1: #F9FAFC;
+  --uikit-color-gray-2: #F0F2F7;
+  --uikit-color-gray-3: #E6E9F0;
+  --uikit-color-gray-4: #D1D4DE;
+  --uikit-color-gray-5: #C0C3CC;
+  --uikit-color-gray-6: #B3B6BE;
+  --uikit-color-gray-7: #A5A9B0;
+  --uikit-color-green-1: #DCFAE9;
+  --uikit-color-green-2: #B6F0D1;
+  --uikit-color-green-3: #84E3B5;
+  --uikit-color-green-4: #5AD69E;
+  --uikit-color-green-5: #3CC98C;
+  --uikit-color-green-6: #0ABF77;
+  --uikit-color-green-7: #09A768;
+  --uikit-color-green-8: #078F59;
+  --uikit-color-green-9: #067049;
+  --uikit-color-green-10: #044D37;
+  --uikit-color-red-1: #FFE7E6;
+  --uikit-color-red-2: #FCC9C7;
+  --uikit-color-red-3: #FAAEAC;
+  --uikit-color-red-4: #F58989;
+  --uikit-color-red-5: #E86666;
+  --uikit-color-red-6: #E54545;
+  --uikit-color-red-7: #C93439;
+  --uikit-color-red-8: #AD2934;
+  --uikit-color-red-9: #8F222D;
+  --uikit-color-red-10: #6B1A27;
+  --uikit-color-orange-1: #FFEEDB;
+  --uikit-color-orange-2: #FFD6B2;
+  --uikit-color-orange-3: #FFBE85;
+  --uikit-color-orange-4: #FFA455;
+  --uikit-color-orange-5: #FF8B2B;
+  --uikit-color-orange-6: #FF7200;
+  --uikit-color-orange-7: #E05D00;
+  --uikit-color-orange-8: #BF4900;
+  --uikit-color-orange-9: #8F370B;
+  --uikit-color-orange-10: #662200;
+  --uikit-color-transparent: rgba(255, 255, 255, 0%);
+
+  // text
+  --text-color-primary: var(--uikit-color-black-2);
+  --text-color-secondary: var(--uikit-color-black-4);
+  --text-color-tertiary: var(--uikit-color-black-5);
+  --text-color-disabled: var(--uikit-color-black-6);
+  --text-color-button: var(--uikit-color-white-1);
+  --text-color-button-disabled: var(--uikit-color-white-1);
+  --text-color-link: var(--uikit-color-theme-6);
+  --text-color-link-hover: var(--uikit-color-theme-5);
+  --text-color-link-disabled: var(--uikit-color-theme-2);
+  --text-color-link-active: var(--uikit-color-theme-7);
+  --text-color-anti-primary: var(--uikit-color-black-2);
+  --text-color-anti-secondary: var(--uikit-color-black-4);
+  --text-color-warning: var(--uikit-color-orange-6);
+  --text-color-success: var(--uikit-color-green-6);
+  --text-color-error: var(--uikit-color-red-6);
+
+  // background
+  --bg-color-topbar: var(--uikit-color-gray-1);
+  --bg-color-operate: var(--uikit-color-white-1);
+  --bg-color-dialog: var(--uikit-color-white-1);
+  --bg-color-dialog-module: var(--uikit-color-gray-2);
+  --bg-color-entrycard: var(--uikit-color-gray-2);
+  --bg-color-function: var(--uikit-color-gray-2);
+  --bg-color-bottombar: var(--uikit-color-white-1);
+  --bg-color-input: var(--uikit-color-gray-2);
+  --bg-color-bubble-reciprocal: var(--uikit-color-gray-2);
+  --bg-color-bubble-own: var(--uikit-color-theme-2);
+  --bg-color-default: var(--uikit-color-gray-2);
+  --bg-color-tag-mask: var(--uikit-color-white-4);
+  --bg-color-element-mask: var(--uikit-color-black-6);
+  --bg-color-mask: var(--uikit-color-black-4);
+  --bg-color-mask-disappeared: var(--uikit-color-white-7);
+  --bg-color-mask-begin: var(--uikit-color-white-1);
+
+  // border
+  --stroke-color-primary: var(--uikit-color-gray-3);
+  --stroke-color-secondary: var(--uikit-color-gray-2);
+  --stroke-color-module: var(--uikit-color-gray-3);
+
+  // shadow
+  --shadow-color: var(--uikit-color-black-8);
+
+  // status
+  --list-color-default: var(--uikit-color-white-1);
+  --list-color-hover: var(--uikit-color-gray-1);
+  --list-color-focused: var(--uikit-color-theme-1);
+
+  // button
+  --button-color-primary-default: var(--uikit-color-theme-6);
+  --button-color-primary-hover: var(--uikit-color-theme-5);
+  --button-color-primary-active: var(--uikit-color-theme-7);
+  --button-color-primary-disabled: var(--uikit-color-theme-2);
+  --button-color-secondary-default: var(--uikit-color-gray-2);
+  --button-color-secondary-hover: var(--uikit-color-gray-1);
+  --button-color-secondary-active: var(--uikit-color-gray-3);
+  --button-color-secondary-disabled: var(--uikit-color-gray-1);
+  --button-color-accept: var(--uikit-color-green-6);
+  --button-color-hangup: var(--uikit-color-red-6);
+  --button-color-on: var(--uikit-color-white-1);
+  --button-color-off: var(--uikit-color-black-5);
+
+  // dropdown
+  --dropdown-color-default: var(--uikit-color-white-1);
+  --dropdown-color-hover: var(--uikit-color-gray-1);
+  --dropdown-color-active: var(--uikit-color-theme-2);
+
+  // scroll-bar
+  --scroll-bar-color-default: var(--uikit-color-black-7);
+  --scroll-bar-color-hover: var(--uikit-color-black-6);
+
+  // floating
+  --floating-color-default: var(--uikit-color-white-1);
+  --floating-color-operate: var(--uikit-color-gray-2);
+
+  // checkbox
+  --checkbox-color-selected: var(--uikit-color-theme-6);
+
+  // toast
+  --toast-color-warning: var(--uikit-color-orange-1);
+  --toast-color-success: var(--uikit-color-green-1);
+  --toast-color-error: var(--uikit-color-red-1);
+  --toast-color-default: var(--uikit-color-theme-1);
+
+  // switch
+  --switch-color-off: var(--uikit-color-gray-4);
+  --switch-color-on: var(--uikit-color-theme-6);
+  --switch-color-button: var(--uikit-color-white-1);
+
+  // slider
+  --slider-color-filled: var(--uikit-color-theme-6);
+  --slider-color-empty: var(--uikit-color-gray-3);
+  --slider-color-button: var(--uikit-color-white-1);
+
+  // tab
+  --tab-color-selected: var(--uikit-color-theme-2);
+  --tab-color-unselected: var(--uikit-color-gray-2);
+  --tab-color-option: var(--uikit-color-gray-3);
+
+  // todo-tag
+}

package/dist/styles/styles/variables.scss

@@ -0,0 +1,3 @@
+
+@import './themes/dark';
+@import './themes/light';

package/dist/vite-env.d.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@jasperdai/uikit-base-component-vue2",
+  "version": "0.3.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "publish": "npm publish --access public"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.16"
+  },
+  "devDependencies": {
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
+    "sass": "^1.72.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.7.3",
+    "vue-tsc": "^2.0.6",
+    "@vitejs/plugin-vue2": "^2.3.1",
+    "glob": "^11.0.0",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-static-copy": "^2.2.0"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "vue-shims.d.ts"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,68 @@
+import { extname, relative, resolve } from 'path';
+import { fileURLToPath } from 'node:url';
+import { glob } from 'glob';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import vue2 from '@vitejs/plugin-vue2';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import { peerDependencies } from './package.json';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, '/src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: [
+        ...Object.keys(peerDependencies),
+      ],
+      input: getInputEntries(),
+      output: {
+        assetFileNames: 'styles/index[extname]',
+        entryFileNames: '[name].js',
+      },
+    },
+  },
+  plugins: [
+    vue2(),
+    libInjectCss(),
+    dts({
+      include: ['src/**/*.ts', 'src/**/*.vue'],
+    }),
+    viteStaticCopy({
+      targets: [
+        {
+          src: './src/providers/UIKitProvider/styles',
+          dest: 'styles',
+        },
+      ],
+    }),
+  ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
+});
+
+function getInputEntries() {
+  const inputEntries = Object.fromEntries(
+    glob.sync('src/**/*.{ts,vue}', {}).map(file => [
+      relative(
+        'src',
+        file.slice(0, file.length - extname(file).length),
+      ),
+      fileURLToPath(new URL(file, import.meta.url)),
+    ]),
+  );
+  return inputEntries;
+}

package/vue-shims.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from 'vue'
+  export default Vue
+}