smart-admin-web 10.14.0 → 10.20.0

package/dist/layouts/SettingsDrawer2.vue.js

@@ -1,368 +1,304 @@
-import { defineComponent as P, useModel as V, computed as h, openBlock as m, createBlock as v, unref as e, withCtx as a, createVNode as t, createTextVNode as i, toDisplayString as r, createElementVNode as k, createElementBlock as C, Fragment as $, renderList as E, normalizeStyle as F, normalizeClass as H, createCommentVNode as g } from "vue";
-import { useMessage as I, NDrawer as L, NDrawerContent as R, NTabs as G, NTabPane as b, NDivider as d, NRadioGroup as w, NRadioButton as p, NColorPicker as O, NSwitch as f, NSelect as W, NInput as J, NButton as S, NPopconfirm as j } from "naive-ui";
-import { Icon as c } from "@iconify/vue";
-import { useI18n as q } from "vue-i18n";
-import { useClipboard as K, useWindowSize as Q } from "@vueuse/core";
-import { useAppStore as X } from "../stores/app.js";
-import { ACCENTS as N } from "../theme/accents.js";
-import { runtime as Y } from "../lib/runtime.js";
-import u from "./SettingRow.vue.js";
-import Z from "./LayoutModeCards.vue.js";
-const ee = { class: "accents" }, te = ["aria-label", "aria-pressed", "onClick"], ae = { class: "footer-actions" }, ve = /* @__PURE__ */ P({
+import { defineComponent as M, useModel as D, computed as h, openBlock as _, createBlock as w, unref as e, withCtx as t, createVNode as s, createElementVNode as l, toDisplayString as i, createTextVNode as u, createCommentVNode as z } from "vue";
+import { useMessage as O, NDrawer as H, NDrawerContent as L, NTabs as v, NTab as r, NSelect as b, NList as P, NListItem as c, NSwitch as f, NButton as y, NPopconfirm as V } from "naive-ui";
+import { Icon as p } from "@iconify/vue";
+import { useI18n as A } from "vue-i18n";
+import { useClipboard as F } from "@vueuse/core";
+import { useAppStore as I, LAYOUT_MODES as E } from "../stores/app.js";
+import { runtime as j } from "../lib/runtime.js";
+import J from "./AccentPicker.vue.js";
+const Y = { class: "section-title first" }, $ = { class: "section-title" }, q = { class: "section-title" }, G = { class: "section-title" }, K = { class: "section-title" }, Q = { class: "section-title" }, R = { class: "sym" }, W = { class: "txt" }, X = { class: "sym" }, Z = { class: "txt" }, ee = { class: "sym" }, te = { class: "txt" }, se = { class: "sym" }, oe = { class: "txt" }, le = { class: "sym" }, ie = { class: "txt" }, ae = { class: "footer-actions" }, ve = /* @__PURE__ */ M({
   __name: "SettingsDrawer",
   props: {
     show: { type: Boolean, default: !1 },
     showModifiers: {}
   },
   emits: ["update:show"],
-  setup(_) {
-    const y = V(_, "show"), o = X(), { t: l } = q(), x = I(), { copy: z, isSupported: U } = K(), T = U && Y.dev;
-    async function B() {
-      await z(JSON.stringify(o.exportSettings(), null, 2)), x.success(l("settings.configCopied"));
+  setup(x) {
+    const g = D(x, "show"), n = I(), { t: o } = A(), S = O(), { copy: C, isSupported: N } = F(), k = N && j.dev;
+    async function T() {
+      await C(JSON.stringify(n.exportSettings(), null, 2)), S.success(o("settings.configCopied"));
     }
-    const { width: M } = Q(), D = h(() => Math.min(400, Math.round(M.value * 0.9))), A = h(() => [
-      { label: l("settings.transitionNone"), value: "none" },
-      { label: l("settings.transitionFade"), value: "fade" },
-      { label: l("settings.transitionFadeSlide"), value: "fade-slide" }
+    const U = h(
+      () => E.map((m) => ({
+        label: o(
+          "settings.layout" + m.split("-").map((a) => a[0].toUpperCase() + a.slice(1)).join("")
+        ),
+        value: m
+      }))
+    ), B = h(() => [
+      { label: o("settings.transitionNone"), value: "none" },
+      { label: o("settings.transitionFade"), value: "fade" },
+      { label: o("settings.transitionFadeSlide"), value: "fade-slide" }
     ]);
-    return (le, n) => (m(), v(e(L), {
-      show: y.value,
-      "onUpdate:show": n[12] || (n[12] = (s) => y.value = s),
-      width: D.value,
+    return (m, a) => (_(), w(e(H), {
+      show: g.value,
+      "onUpdate:show": a[10] || (a[10] = (d) => g.value = d),
+      width: "min(360px, 100vw)",
       placement: "right"
     }, {
-      default: a(() => [
-        t(e(R), {
-          title: e(l)("settings.title"),
+      default: t(() => [
+        s(e(L), {
+          title: e(o)("app.appearance"),
           closable: "",
           "native-scrollbar": !1
         }, {
-          footer: a(() => [
-            k("div", ae, [
-              e(T) ? (m(), v(e(S), {
+          footer: t(() => [
+            l("div", ae, [
+              e(k) ? (_(), w(e(y), {
                 key: 0,
                 block: "",
-                tertiary: "",
-                onClick: B
+                secondary: "",
+                onClick: T
               }, {
-                default: a(() => [
-                  t(e(c), {
+                icon: t(() => [
+                  s(e(p), {
                     icon: "ph:clipboard-text",
-                    class: "ri"
-                  }),
-                  i(" " + r(e(l)("settings.copyConfig")), 1)
+                    width: 16
+                  })
+                ]),
+                default: t(() => [
+                  u(" " + i(e(o)("settings.copyConfig")), 1)
                 ]),
                 _: 1
-              })) : g("", !0),
-              t(e(j), {
-                onPositiveClick: n[11] || (n[11] = (s) => e(o).resetSettings())
+              })) : z("", !0),
+              s(e(V), {
+                onPositiveClick: a[9] || (a[9] = (d) => e(n).resetSettings())
               }, {
-                trigger: a(() => [
-                  t(e(S), {
+                trigger: t(() => [
+                  s(e(y), {
                     block: "",
                     secondary: ""
                   }, {
-                    default: a(() => [
-                      t(e(c), {
+                    icon: t(() => [
+                      s(e(p), {
                         icon: "ph:arrow-counter-clockwise",
-                        class: "ri"
-                      }),
-                      i(" " + r(e(l)("common.reset")), 1)
+                        width: 16
+                      })
+                    ]),
+                    default: t(() => [
+                      u(" " + i(e(o)("common.reset")), 1)
                     ]),
                     _: 1
                   })
                 ]),
-                default: a(() => [
-                  i(" " + r(e(l)("settings.resetConfirm")), 1)
+                default: t(() => [
+                  u(" " + i(e(o)("settings.resetConfirm")), 1)
                 ]),
                 _: 1
               })
             ])
           ]),
-          default: a(() => [
-            t(e(G), {
-              type: "segment",
-              size: "small",
-              animated: "",
-              class: "tabs"
+          default: t(() => [
+            l("div", Y, i(e(o)("settings.themeMode")), 1),
+            s(e(v), {
+              value: e(n).themeScheme,
+              "onUpdate:value": a[0] || (a[0] = (d) => e(n).themeScheme = d),
+              type: "segment"
             }, {
-              default: a(() => [
-                t(e(b), {
-                  name: "appearance",
-                  tab: e(l)("settings.tabAppearance")
-                }, {
-                  default: a(() => [
-                    t(e(d), { "title-placement": "left" }, {
-                      default: a(() => [
-                        i(r(e(l)("settings.themeMode")), 1)
-                      ]),
-                      _: 1
-                    }),
-                    t(e(w), {
-                      value: e(o).themeScheme,
-                      "onUpdate:value": n[0] || (n[0] = (s) => e(o).themeScheme = s),
-                      size: "small",
-                      class: "seg"
-                    }, {
-                      default: a(() => [
-                        t(e(p), { value: "light" }, {
-                          default: a(() => [
-                            t(e(c), {
-                              icon: "ph:sun",
-                              class: "ri"
-                            }),
-                            i(" " + r(e(l)("app.light")), 1)
-                          ]),
-                          _: 1
-                        }),
-                        t(e(p), { value: "dark" }, {
-                          default: a(() => [
-                            t(e(c), {
-                              icon: "ph:moon-stars",
-                              class: "ri"
-                            }),
-                            i(" " + r(e(l)("app.dark")), 1)
-                          ]),
-                          _: 1
-                        }),
-                        t(e(p), { value: "auto" }, {
-                          default: a(() => [
-                            t(e(c), {
-                              icon: "ph:circle-half",
-                              class: "ri"
-                            }),
-                            i(" " + r(e(l)("settings.auto")), 1)
-                          ]),
-                          _: 1
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["value"]),
-                    t(e(d), { "title-placement": "left" }, {
-                      default: a(() => [
-                        i(r(e(l)("settings.themeColor")), 1)
-                      ]),
-                      _: 1
-                    }),
-                    k("div", ee, [
-                      (m(!0), C($, null, E(e(N), (s) => (m(), C("button", {
-                        key: s,
-                        type: "button",
-                        class: H(["dot", { on: e(o).accent === s }]),
-                        style: F({ background: s }),
-                        "aria-label": `${e(l)("settings.themeColor")} ${s}`,
-                        "aria-pressed": e(o).accent === s,
-                        onClick: (se) => e(o).setAccent(s)
-                      }, [
-                        e(o).accent === s ? (m(), v(e(c), {
-                          key: 0,
-                          icon: "ph:check-bold",
-                          class: "tick"
-                        })) : g("", !0)
-                      ], 14, te))), 128))
-                    ]),
-                    t(e(O), {
-                      value: e(o).accent,
-                      modes: ["hex"],
-                      "show-alpha": !1,
-                      swatches: [...e(N)],
-                      "onUpdate:value": e(o).setAccent
-                    }, null, 8, ["value", "swatches", "onUpdate:value"]),
-                    t(e(d), { "title-placement": "left" }, {
-                      default: a(() => [
-                        i(r(e(l)("app.density")), 1)
-                      ]),
-                      _: 1
-                    }),
-                    t(e(w), {
-                      value: e(o).density,
-                      "onUpdate:value": n[1] || (n[1] = (s) => e(o).density = s),
-                      size: "small",
-                      class: "seg"
-                    }, {
-                      default: a(() => [
-                        t(e(p), { value: "comfortable" }, {
-                          default: a(() => [
-                            i(r(e(l)("app.comfortable")), 1)
-                          ]),
-                          _: 1
-                        }),
-                        t(e(p), { value: "compact" }, {
-                          default: a(() => [
-                            i(r(e(l)("app.compact")), 1)
-                          ]),
-                          _: 1
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["value"])
+              default: t(() => [
+                s(e(r), { name: "light" }, {
+                  default: t(() => [
+                    u(i(e(o)("app.light")), 1)
+                  ]),
+                  _: 1
+                }),
+                s(e(r), { name: "dark" }, {
+                  default: t(() => [
+                    u(i(e(o)("app.dark")), 1)
+                  ]),
+                  _: 1
+                }),
+                s(e(r), { name: "auto" }, {
+                  default: t(() => [
+                    u(i(e(o)("settings.auto")), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["value"]),
+            l("div", $, i(e(o)("settings.themeColor")), 1),
+            s(J),
+            l("div", q, i(e(o)("app.density")), 1),
+            s(e(v), {
+              value: e(n).density,
+              "onUpdate:value": a[1] || (a[1] = (d) => e(n).density = d),
+              type: "segment"
+            }, {
+              default: t(() => [
+                s(e(r), { name: "comfortable" }, {
+                  default: t(() => [
+                    u(i(e(o)("app.comfortable")), 1)
+                  ]),
+                  _: 1
+                }),
+                s(e(r), { name: "compact" }, {
+                  default: t(() => [
+                    u(i(e(o)("app.compact")), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["value"]),
+            l("div", G, i(e(o)("settings.layout")), 1),
+            s(e(b), {
+              value: e(n).layoutMode,
+              options: U.value,
+              "onUpdate:value": a[2] || (a[2] = (d) => e(n).setLayoutMode(d))
+            }, null, 8, ["value", "options"]),
+            l("div", K, i(e(o)("settings.formStyle")), 1),
+            s(e(v), {
+              value: e(n).formStyle,
+              "onUpdate:value": a[3] || (a[3] = (d) => e(n).formStyle = d),
+              type: "segment"
+            }, {
+              default: t(() => [
+                s(e(r), { name: "modal" }, {
+                  default: t(() => [
+                    u(i(e(o)("settings.formStyleModal")), 1)
                   ]),
                   _: 1
-                }, 8, ["tab"]),
-                t(e(b), {
-                  name: "layout",
-                  tab: e(l)("settings.tabLayout")
-                }, {
-                  default: a(() => [
-                    t(e(d), { "title-placement": "left" }, {
-                      default: a(() => [
-                        i(r(e(l)("settings.layout")), 1)
-                      ]),
-                      _: 1
-                    }),
-                    t(Z),
-                    t(e(d), { "title-placement": "left" }, {
-                      default: a(() => [
-                        i(r(e(l)("settings.interface")), 1)
-                      ]),
-                      _: 1
-                    }),
-                    t(u, {
-                      label: e(l)("settings.showBreadcrumb")
-                    }, {
-                      default: a(() => [
-                        t(e(f), {
-                          value: e(o).showBreadcrumb,
-                          "onUpdate:value": n[2] || (n[2] = (s) => e(o).showBreadcrumb = s),
-                          size: "small"
-                        }, null, 8, ["value"])
-                      ]),
-                      _: 1
-                    }, 8, ["label"]),
-                    t(u, {
-                      label: e(l)("settings.showTabs")
-                    }, {
-                      default: a(() => [
-                        t(e(f), {
-                          value: e(o).showTabs,
-                          "onUpdate:value": n[3] || (n[3] = (s) => e(o).showTabs = s),
-                          size: "small"
-                        }, null, 8, ["value"])
-                      ]),
-                      _: 1
-                    }, 8, ["label"]),
-                    t(u, {
-                      label: e(l)("settings.fixedHeader")
-                    }, {
-                      default: a(() => [
-                        t(e(f), {
-                          value: e(o).fixedHeader,
-                          "onUpdate:value": n[4] || (n[4] = (s) => e(o).fixedHeader = s),
-                          size: "small"
-                        }, null, 8, ["value"])
-                      ]),
-                      _: 1
-                    }, 8, ["label"]),
-                    t(u, {
-                      label: e(l)("settings.pageTransition")
-                    }, {
-                      default: a(() => [
-                        t(e(W), {
-                          value: e(o).pageTransition,
-                          "onUpdate:value": n[5] || (n[5] = (s) => e(o).pageTransition = s),
-                          options: A.value,
-                          size: "small",
-                          style: { width: "120px" }
-                        }, null, 8, ["value", "options"])
-                      ]),
-                      _: 1
-                    }, 8, ["label"]),
-                    t(u, {
-                      label: e(l)("settings.grayscale")
-                    }, {
-                      default: a(() => [
-                        t(e(f), {
-                          value: e(o).grayscale,
-                          "onUpdate:value": n[6] || (n[6] = (s) => e(o).grayscale = s),
-                          size: "small"
-                        }, null, 8, ["value"])
-                      ]),
-                      _: 1
-                    }, 8, ["label"]),
-                    t(u, {
-                      label: e(l)("app.collapse")
-                    }, {
-                      default: a(() => [
-                        t(e(f), {
-                          value: e(o).collapsed,
-                          "onUpdate:value": n[7] || (n[7] = (s) => e(o).collapsed = s),
-                          size: "small"
-                        }, null, 8, ["value"])
-                      ]),
-                      _: 1
-                    }, 8, ["label"])
+                }),
+                s(e(r), { name: "drawer" }, {
+                  default: t(() => [
+                    u(i(e(o)("settings.formStyleDrawer")), 1)
                   ]),
                   _: 1
-                }, 8, ["tab"]),
-                t(e(b), {
-                  name: "general",
-                  tab: e(l)("settings.tabGeneral")
-                }, {
-                  default: a(() => [
-                    t(e(d), { "title-placement": "left" }, {
-                      default: a(() => [
-                        i(r(e(l)("settings.watermark")), 1)
-                      ]),
-                      _: 1
-                    }),
-                    t(u, {
-                      label: e(l)("settings.watermark")
-                    }, {
-                      default: a(() => [
-                        t(e(f), {
-                          value: e(o).watermark,
-                          "onUpdate:value": n[8] || (n[8] = (s) => e(o).watermark = s),
-                          size: "small"
-                        }, null, 8, ["value"])
-                      ]),
-                      _: 1
-                    }, 8, ["label"]),
-                    e(o).watermark ? (m(), v(u, {
-                      key: 0,
-                      label: e(l)("settings.watermarkText")
-                    }, {
-                      default: a(() => [
-                        t(e(J), {
-                          value: e(o).watermarkText,
-                          "onUpdate:value": n[9] || (n[9] = (s) => e(o).watermarkText = s),
-                          size: "small",
-                          placeholder: e(l)("settings.watermarkPlaceholder"),
-                          style: { width: "140px" }
-                        }, null, 8, ["value", "placeholder"])
-                      ]),
-                      _: 1
-                    }, 8, ["label"])) : g("", !0),
-                    t(e(d), { "title-placement": "left" }, {
-                      default: a(() => [
-                        i(r(e(l)("settings.formStyle")), 1)
-                      ]),
-                      _: 1
-                    }),
-                    t(e(w), {
-                      value: e(o).formStyle,
-                      "onUpdate:value": n[10] || (n[10] = (s) => e(o).formStyle = s),
+                })
+              ]),
+              _: 1
+            }, 8, ["value"]),
+            l("div", Q, i(e(o)("settings.interface")), 1),
+            s(e(P), {
+              class: "set-group",
+              hoverable: "",
+              bordered: !1,
+              "show-divider": !1
+            }, {
+              default: t(() => [
+                s(e(c), null, {
+                  prefix: t(() => [
+                    l("div", R, [
+                      s(e(p), {
+                        icon: "ph:caret-double-right",
+                        width: 15
+                      })
+                    ])
+                  ]),
+                  suffix: t(() => [
+                    s(e(f), {
+                      value: e(n).showBreadcrumb,
+                      "onUpdate:value": a[4] || (a[4] = (d) => e(n).showBreadcrumb = d),
+                      size: "small"
+                    }, null, 8, ["value"])
+                  ]),
+                  default: t(() => [
+                    l("div", W, [
+                      l("b", null, i(e(o)("settings.showBreadcrumb")), 1),
+                      l("span", null, i(e(o)("settings.descBreadcrumb")), 1)
+                    ])
+                  ]),
+                  _: 1
+                }),
+                s(e(c), null, {
+                  prefix: t(() => [
+                    l("div", X, [
+                      s(e(p), {
+                        icon: "ph:browsers",
+                        width: 15
+                      })
+                    ])
+                  ]),
+                  suffix: t(() => [
+                    s(e(f), {
+                      value: e(n).showTabs,
+                      "onUpdate:value": a[5] || (a[5] = (d) => e(n).showTabs = d),
+                      size: "small"
+                    }, null, 8, ["value"])
+                  ]),
+                  default: t(() => [
+                    l("div", Z, [
+                      l("b", null, i(e(o)("settings.showTabs")), 1),
+                      l("span", null, i(e(o)("settings.descTabs")), 1)
+                    ])
+                  ]),
+                  _: 1
+                }),
+                s(e(c), null, {
+                  prefix: t(() => [
+                    l("div", ee, [
+                      s(e(p), {
+                        icon: "ph:push-pin",
+                        width: 15
+                      })
+                    ])
+                  ]),
+                  suffix: t(() => [
+                    s(e(f), {
+                      value: e(n).fixedHeader,
+                      "onUpdate:value": a[6] || (a[6] = (d) => e(n).fixedHeader = d),
+                      size: "small"
+                    }, null, 8, ["value"])
+                  ]),
+                  default: t(() => [
+                    l("div", te, [
+                      l("b", null, i(e(o)("settings.fixedHeader")), 1),
+                      l("span", null, i(e(o)("settings.descFixedHeader")), 1)
+                    ])
+                  ]),
+                  _: 1
+                }),
+                s(e(c), null, {
+                  prefix: t(() => [
+                    l("div", se, [
+                      s(e(p), {
+                        icon: "ph:sidebar-simple",
+                        width: 15
+                      })
+                    ])
+                  ]),
+                  suffix: t(() => [
+                    s(e(f), {
+                      value: e(n).collapsed,
+                      "onUpdate:value": a[7] || (a[7] = (d) => e(n).collapsed = d),
+                      size: "small"
+                    }, null, 8, ["value"])
+                  ]),
+                  default: t(() => [
+                    l("div", oe, [
+                      l("b", null, i(e(o)("app.collapse")), 1),
+                      l("span", null, i(e(o)("settings.descCollapse")), 1)
+                    ])
+                  ]),
+                  _: 1
+                }),
+                s(e(c), null, {
+                  prefix: t(() => [
+                    l("div", le, [
+                      s(e(p), {
+                        icon: "ph:sparkle",
+                        width: 15
+                      })
+                    ])
+                  ]),
+                  suffix: t(() => [
+                    s(e(b), {
+                      value: e(n).pageTransition,
+                      "onUpdate:value": a[8] || (a[8] = (d) => e(n).pageTransition = d),
+                      options: B.value,
                       size: "small",
-                      class: "seg"
-                    }, {
-                      default: a(() => [
-                        t(e(p), { value: "modal" }, {
-                          default: a(() => [
-                            i(r(e(l)("settings.formStyleModal")), 1)
-                          ]),
-                          _: 1
-                        }),
-                        t(e(p), { value: "drawer" }, {
-                          default: a(() => [
-                            i(r(e(l)("settings.formStyleDrawer")), 1)
-                          ]),
-                          _: 1
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["value"])
+                      class: "sel"
+                    }, null, 8, ["value", "options"])
+                  ]),
+                  default: t(() => [
+                    l("div", ie, [
+                      l("b", null, i(e(o)("settings.pageTransition")), 1),
+                      l("span", null, i(e(o)("settings.descPageTransition")), 1)
+                    ])
                   ]),
                   _: 1
-                }, 8, ["tab"])
+                })
               ]),
               _: 1
             })
@@ -371,7 +307,7 @@ const ee = { class: "accents" }, te = ["aria-label", "aria-pressed", "onClick"],
         }, 8, ["title"])
       ]),
       _: 1
-    }, 8, ["show", "width"]));
+    }, 8, ["show"]));
   }
 });
 export {