@opentiny/tiny-engine-toolbar-theme-switch 2.3.0 → 2.4.0-rc.0

package/dist/index.js

@@ -1,16 +1,18 @@
-import { resolveComponent as _, createElementBlock as f, openBlock as u, createVNode as S, withCtx as y, createCommentVNode as A, createElementVNode as k, computed as p, reactive as x } from "vue";
-import { ToolbarBase as M, setGlobalMonacoEditorTheme as w } from "@opentiny/tiny-engine-common";
-import { RadioGroup as D } from "@opentiny/vue";
-import { getMetaApi as T, META_SERVICE as r, defineService as I, getMergeMeta as V } from "@opentiny/tiny-engine-meta-register";
-const L = (t, o) => {
-  const n = t.__vccOpts || t;
-  for (const [e, c] of o)
-    n[e] = c;
-  return n;
-}, B = {
+import "./style.css";
+import { resolveComponent as _, createElementBlock as p, openBlock as d, createVNode as f, withCtx as b, createElementVNode as A, Fragment as V, renderList as x, normalizeClass as B, toDisplayString as G, createCommentVNode as H, computed as m, ref as M, reactive as N } from "vue";
+import { ToolbarBase as O, setGlobalMonacoEditorTheme as R } from "@opentiny/tiny-engine-common";
+import { TinyPopover as U, TinyRadioGroup as F } from "@opentiny/vue";
+import { getMetaApi as S, META_SERVICE as v, defineService as P, getMergeRegistry as j, getMergeMeta as z } from "@opentiny/tiny-engine-meta-register";
+const q = (o, t) => {
+  const s = o.__vccOpts || o;
+  for (const [e, h] of t)
+    s[e] = h;
+  return s;
+}, J = {
   components: {
-    ToolbarBase: M,
-    TinyRadioGroup: D
+    ToolbarBase: O,
+    TinyRadioGroup: F,
+    TinyPopover: U
   },
   props: {
     options: {
@@ -22,99 +24,125 @@ const L = (t, o) => {
       default: "right"
     }
   },
-  setup(t) {
-    const { getThemeData: o, getThemeState: n, themeChange: e, getTheme: c } = T(r.ThemeSwitch), s = n(), h = o(), i = "collapse", d = p(() => {
-      const m = { ...t.options };
-      return t.position === i && (m.renderType = ""), m;
-    }), E = p(() => t.position === i ? "" : s.themeLabel), v = p(() => t.position === i ? "" : s.theme);
+  setup(o) {
+    const { getThemeData: t, getThemeState: s, themeChange: e, getTheme: h } = S(v.ThemeSwitch), l = s(), r = t(), c = "collapse", u = m(() => {
+      const n = { ...o.options };
+      return o.position === c && (n.renderType = ""), n;
+    }), a = m(() => r.value.map((n) => ({ ...n, label: n.type }))), E = m(() => o.position === c ? "" : l.themeLabel), D = m(() => o.position === c ? "" : l.themeIcon), y = M(!1), w = m(() => {
+      const n = r.value.filter((L) => ["light", "dark"].includes(L.type)) || [];
+      return r.value.length === n.length;
+    }), I = () => {
+      const n = h(l.theme).oppositeTheme;
+      e(n);
+    };
     return {
-      THEME_DATA: h,
-      state: s,
-      optionsData: d,
+      THEME_DATA: r,
+      state: l,
+      optionsData: u,
+      radioThemeList: a,
       baseContent: E,
-      baseIcon: v,
-      toChangeTheme: () => {
-        if (t.position === i)
-          return;
-        const m = c(s.theme).oppositeTheme;
-        e(m);
+      baseIcon: D,
+      toChangeTheme: I,
+      themeChange: e,
+      showpopover: y,
+      themeShowType: w,
+      themeItemChange: (n) => {
+        e(n), y.value = !1;
       },
-      themeChange: e
+      changeThemeType: () => {
+        o.position !== c && (w.value ? I() : y.value = !0);
+      }
     };
   }
-}, G = { class: "toolbar-theme-switch" }, H = {
+}, K = { class: "toolbar-theme-switch" }, Q = { class: "theme-list" }, W = ["onClick"], X = {
   key: 0,
   class: "toolbar-theme-switch-radio"
 };
-function N(t, o, n, e, c, s) {
-  const h = _("tiny-radio-group"), i = _("toolbar-base");
-  return u(), f("div", G, [
-    S(i, {
-      content: e.baseContent,
-      icon: e.baseIcon,
-      options: e.optionsData,
-      onClickApi: e.toChangeTheme
+function Y(o, t, s, e, h, l) {
+  const r = _("tiny-radio-group"), c = _("toolbar-base"), u = _("tiny-popover");
+  return d(), p("div", K, [
+    f(u, {
+      width: "130",
+      trigger: "manual",
+      modelValue: e.showpopover,
+      "onUpdate:modelValue": t[1] || (t[1] = (a) => e.showpopover = a),
+      "visible-arrow": !1,
+      "popper-class": "theme-popover"
     }, {
-      default: y(() => [
-        n.position === "collapse" ? (u(), f("div", H, [
-          o[1] || (o[1] = k("div", { class: "toolbar-theme-switch-radio-title" }, "主题", -1)),
-          S(h, {
-            modelValue: e.state.theme,
-            "onUpdate:modelValue": o[0] || (o[0] = (d) => e.state.theme = d),
-            options: e.THEME_DATA,
-            class: "theme-radio-group",
-            onChange: e.themeChange
-          }, null, 8, ["modelValue", "options", "onChange"])
-        ])) : A("", !0)
+      reference: b(() => [
+        f(c, {
+          content: e.baseContent,
+          icon: e.baseIcon,
+          options: e.optionsData,
+          onClickApi: e.changeThemeType
+        }, {
+          default: b(() => [
+            s.position === "collapse" ? (d(), p("div", X, [
+              t[2] || (t[2] = A("div", { class: "toolbar-theme-switch-radio-title" }, "主题", -1)),
+              f(r, {
+                modelValue: e.state.theme,
+                "onUpdate:modelValue": t[0] || (t[0] = (a) => e.state.theme = a),
+                options: e.radioThemeList,
+                vertical: !e.themeShowType,
+                class: "theme-radio-group",
+                onChange: e.themeChange
+              }, null, 8, ["modelValue", "options", "vertical", "onChange"])
+            ])) : H("", !0)
+          ]),
+          _: 1
+        }, 8, ["content", "icon", "options", "onClickApi"])
+      ]),
+      default: b(() => [
+        A("div", Q, [
+          (d(!0), p(V, null, x(e.THEME_DATA, (a) => (d(), p("div", {
+            key: a.type,
+            class: B(["theme-item", { active: e.state.theme === a.type }]),
+            onClick: (E) => e.themeItemChange(a.type)
+          }, G(a.text), 11, W))), 128))
+        ])
       ]),
       _: 1
-    }, 8, ["content", "icon", "options", "onClickApi"])
+    }, 8, ["modelValue"])
   ]);
 }
-const O = /* @__PURE__ */ L(B, [["render", N]]), R = {
+const Z = /* @__PURE__ */ q(J, [["render", Y], ["__scopeId", "data-v-e0cba3bc"]]), $ = {
   id: "engine.toolbars.themeSwitch",
   type: "toolbars",
   title: "themeSwitch",
   options: {
     renderType: "icon"
   }
-}, b = [
-  {
-    text: "浅色模式",
-    label: "light",
-    oppositeTheme: "dark"
-  },
-  {
-    text: "深色模式",
-    label: "dark",
-    oppositeTheme: "light"
-  }
-], l = b[0], a = x({
-  theme: l.label,
-  themeLabel: l.text
-}), U = () => b, j = () => a, g = (t) => b.find((o) => t === o.label) || l, C = (t) => {
+}, T = M([]);
+let C = null;
+const i = N({
+  theme: "",
+  themeLabel: "",
+  themeIcon: ""
+}), ee = () => T, te = () => i, g = (o) => T.value.find((t) => o === t.type) || C, k = (o) => {
   var e;
-  a.theme = g(t).label, a.themeLabel = g(a.theme).text, document.documentElement.setAttribute("data-theme", a.theme);
-  const o = T(r.GlobalService).getBaseInfo().id, n = (e = a.theme) != null && e.includes("dark") ? "vs-dark" : "vs";
-  localStorage.setItem(`tiny-engine-theme-${o}`, a.theme), w(n);
-}, K = I({
-  id: r.ThemeSwitch,
+  i.theme = g(o).type, i.themeLabel = g(i.theme).text, i.themeIcon = g(i.theme).icon, document.documentElement.setAttribute("data-theme", i.theme);
+  const t = S(v.GlobalService).getBaseInfo().id, s = (e = i.theme) != null && e.includes("dark") ? "vs-dark" : "vs";
+  localStorage.setItem(`tiny-engine-theme-${t}`, i.theme), R(s);
+}, le = P({
+  id: v.ThemeSwitch,
   type: "MetaService",
   init: () => {
-    const t = T(r.GlobalService).getBaseInfo().id, o = localStorage.getItem(`tiny-engine-theme-${t}`) || V("engine.config").theme || l.label;
-    C(o);
+    const o = S(v.GlobalService).getBaseInfo().id;
+    T.value = j("themes"), C = T.value[0];
+    const t = localStorage.getItem(`tiny-engine-theme-${o}`) || z("engine.config").theme || C.type;
+    k(t);
   },
   apis: () => ({
-    getThemeData: U,
-    getThemeState: j,
+    getThemeData: ee,
+    getThemeState: te,
     getTheme: g,
-    themeChange: C
+    themeChange: k
   })
-}), Q = {
-  ...R,
-  entry: O
+}), me = {
+  ...$,
+  entry: Z
 };
 export {
-  K as ThemeSwitchService,
-  Q as default
+  le as ThemeSwitchService,
+  me as default
 };

package/dist/style.css

@@ -1 +1 @@
-.toolbar-theme-switch{--te-toolbar-theme-switch-radio-title: var(--te-common-text-secondary)}
+.theme-list .theme-item[data-v-e0cba3bc]{padding:4px 16px;margin:0 -16px}.theme-list .theme-item[data-v-e0cba3bc]:hover{background-color:var(--te-toolbar-theme-popover-list-item-bg-color-hover)}.theme-list .active[data-v-e0cba3bc]{background-color:var(--te-toolbar-theme-popover-list-item-bg-color-active)}.toolbar-theme-switch{--te-toolbar-theme-switch-radio-title: var(--te-common-text-secondary)}.theme-list{--te-toolbar-theme-popover-list-item-bg-color-hover: var(--te-common-bg-container);--te-toolbar-theme-popover-list-item-bg-color-active: var(--te-common-bg-container)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-theme-switch",
-  "version": "2.3.0",
+  "version": "2.4.0-rc.0",
   "publishConfig": {
     "access": "public"
   },
@@ -25,12 +25,12 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@opentiny/tiny-engine-common": "2.3.0",
-    "@opentiny/tiny-engine-meta-register": "2.3.0",
-    "@opentiny/tiny-engine-utils": "2.3.0"
+    "@opentiny/tiny-engine-common": "2.4.0-rc.0",
+    "@opentiny/tiny-engine-meta-register": "2.4.0-rc.0",
+    "@opentiny/tiny-engine-utils": "2.4.0-rc.0"
   },
   "devDependencies": {
-    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.3.0",
+    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.4.0-rc.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "vite": "^5.4.2"
@@ -39,5 +39,5 @@
     "@opentiny/vue": "^3.20.0",
     "vue": "^3.4.15"
   },
-  "gitHead": "330c4d2b319d5b5ba6ad64c270c21a7931a2e400"
+  "gitHead": "40df6ee51c80bf918c176f7e8ad97b6b687ddc7b"
 }