@opendesign-plus-test/components 0.0.1-rc.64 → 0.0.1-rc.66

package/dist/esm/components/header-theme/OHeaderTheme.vue2.mjs

@@ -0,0 +1,71 @@
+import { defineComponent as b, computed as s, openBlock as c, createElementBlock as i, normalizeClass as y, createVNode as o, unref as e, withCtx as n, createBlock as h } from "vue";
+import { OIcon as w, OSwitch as C, OIconMoon as r, OIconSun as f } from "@opensig/opendesign";
+import { useScreen as I } from "@opendesign-plus/composables";
+import O from "../../icons/icon-sun.mjs";
+import B from "../../icons/icon-moon.mjs";
+const S = { class: "o-theme-switcher" }, x = {
+  key: 1,
+  class: "o-theme-switcher-mobile"
+}, N = /* @__PURE__ */ b({
+  __name: "OHeaderTheme",
+  props: {
+    theme: { default: "light" },
+    type: { default: "auto" },
+    lightValue: { default: "light" },
+    darkValue: { default: "dark" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:theme", "change"],
+  setup(a, { emit: k }) {
+    const t = a, d = k, { gtPhone: v } = I(), l = s({
+      get() {
+        return t.theme;
+      },
+      set(u) {
+        d("update:theme", u), d("change", u);
+      }
+    }), g = s(() => t.type === "common" || t.type === "auto" && v.value), V = () => {
+      t.disabled || (l.value = l.value === t.lightValue ? t.darkValue : t.lightValue);
+    };
+    return (u, m) => (c(), i("div", S, [
+      g.value ? (c(), i("div", {
+        key: 0,
+        class: y(["o-theme-switcher-common", { disabled: a.disabled }]),
+        onClick: V
+      }, [
+        o(e(w), { class: "o-theme-icon" }, {
+          default: n(() => [
+            l.value === a.lightValue ? (c(), h(e(B), { key: 0 })) : (c(), h(e(O), { key: 1 }))
+          ]),
+          _: 1
+        })
+      ], 2)) : (c(), i("div", x, [
+        o(e(C), {
+          modelValue: l.value,
+          "onUpdate:modelValue": m[0] || (m[0] = (p) => l.value = p),
+          class: "o-theme-switch",
+          "checked-value": a.lightValue,
+          "unchecked-value": a.darkValue,
+          disabled: a.disabled
+        }, {
+          inactive: n(() => [
+            o(e(r))
+          ]),
+          active: n(() => [
+            o(e(f))
+          ]),
+          off: n(() => [
+            o(e(f))
+          ]),
+          on: n(() => [
+            o(e(r))
+          ]),
+          _: 1
+        }, 8, ["modelValue", "checked-value", "unchecked-value", "disabled"])
+      ]))
+    ]));
+  }
+});
+export {
+  N as default
+};

package/dist/esm/components/header-theme/index.mjs

@@ -0,0 +1,9 @@
+import e from "./OHeaderTheme.vue.mjs";
+const r = Object.assign(e, {
+  install(m) {
+    m.component("OHeaderTheme", e);
+  }
+});
+export {
+  r as OHeaderTheme
+};

package/dist/esm/components/header-user/OHeaderUser.css

@@ -0,0 +1,135 @@
+.hover-icon-rotate .o-icon[data-v-438cc618] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-438cc618] {
+    transform: rotate(-180deg);
+}
+}
+.header-user[data-v-438cc618] {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.15s;
+}
+.user-info[data-v-438cc618] {
+  height: 100%;
+  min-width: 32px;
+  display: flex;
+  cursor: pointer;
+}
+.info-wrap[data-v-438cc618] {
+  height: calc(100% - 10px);
+  margin: 5px 0;
+  display: flex;
+  align-items: center;
+}
+.info-wrap .icon[data-v-438cc618] {
+  margin-left: 4px;
+}
+.user-avatar[data-v-438cc618] {
+  margin-right: 4px;
+}
+.user-avatar[data-v-438cc618] .o-badge-content {
+  --badge-dot-size: 6px;
+  right: 7px;
+  top: 2px;
+}
+.o-dropdown-item[data-v-438cc618] {
+  white-space: nowrap;
+  --dropdown-item-color: var(--o-color-info1);
+  --dropdown-item-padding: 5px 12px;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-dropdown-item[data-v-438cc618] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-dropdown-item[data-v-438cc618] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-dropdown-item[data-v-438cc618] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-dropdown-item[data-v-438cc618] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (hover: hover) {
+.o-dropdown-item[data-v-438cc618]:hover {
+    color: var(--o-color-primary1);
+    background: var(--o-color-control2-light);
+}
+}
+.notice-not[data-v-438cc618] .o-badge-content {
+  display: none;
+}
+.user-account[data-v-438cc618] {
+  color: var(--o-color-info1);
+  max-width: 96px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.user-account[data-v-438cc618] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.user-account[data-v-438cc618] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.user-account[data-v-438cc618] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.user-account[data-v-438cc618] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.user-account[data-v-438cc618] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+@media (max-width: 840px) {
+.header-user[data-v-438cc618] {
+    min-width: auto;
+}
+.header-user .user-info[data-v-438cc618] {
+    min-width: 24px;
+}
+.header-user .user-info .info-wrap .user-avatar[data-v-438cc618] {
+    margin-right: 0;
+}
+.header-user .user-info .info-wrap .user-account[data-v-438cc618] {
+    display: none;
+}
+.header-user .user-info .info-wrap .icon[data-v-438cc618] {
+    display: none;
+}
+}

package/dist/esm/components/header-user/OHeaderUser.vue.mjs

@@ -0,0 +1,8 @@
+import o from "./OHeaderUser.vue2.mjs";
+import './OHeaderUser.css';
+import './OHeaderUser2.css';
+import r from "../../_plugin-vue_export-helper.mjs";
+const _ = /* @__PURE__ */ r(o, [["__scopeId", "data-v-438cc618"]]);
+export {
+  _ as default
+};

package/dist/esm/components/header-user/OHeaderUser.vue2.mjs

@@ -0,0 +1,105 @@
+import { defineComponent as y, openBlock as a, createElementBlock as l, createBlock as c, unref as o, withCtx as n, createVNode as r, createCommentVNode as f, Transition as C, createElementVNode as m, normalizeClass as g, toDisplayString as i, Fragment as I, renderList as z, createTextVNode as T } from "vue";
+import { OIcon as v, ODropdown as b, OBadge as p, ODropdownItem as O } from "@opensig/opendesign";
+import V from "../common/AppAvatar.vue.mjs";
+import _ from "../../icons/icon-avatar-line.mjs";
+import x from "../../icons/icon-chevron-down.mjs";
+import { useScreen as B } from "@opendesign-plus/composables";
+const D = { class: "header-user" }, N = {
+  key: 0,
+  class: "user-info"
+}, P = { class: "info-wrap hover-icon-rotate" }, S = { class: "user-account" }, A = { key: 1 }, G = /* @__PURE__ */ y({
+  __name: "OHeaderUser",
+  props: {
+    token: { default: void 0 },
+    lang: { default: void 0 },
+    noticeTotal: { default: void 0 },
+    userInfo: { default: void 0 },
+    options: { default: void 0 },
+    customSize: { default: void 0 }
+  },
+  emits: ["login", "logout"],
+  setup(e, { emit: h }) {
+    const { lePadV: d } = B(), u = h, k = () => {
+      u("login");
+    }, w = (s) => {
+      s != null && s.logout ? u("logout") : window.open(s.url, s.target);
+    };
+    return (s, j) => (a(), l("div", D, [
+      e.token ? f("", !0) : (a(), c(o(v), {
+        key: 0,
+        onClick: k,
+        class: "avatar-icon"
+      }, {
+        default: n(() => [
+          r(o(_))
+        ]),
+        _: 1
+      })),
+      r(C, { name: "header-user-zoom-in" }, {
+        default: n(() => [
+          e.token ? (a(), l("div", N, [
+            r(o(b), {
+              trigger: o(d) ? "click" : "hover",
+              optionPosition: o(d) ? "br" : "bottom",
+              "option-wrap-class": `user-dropdown ${e.lang === "en" ? "is-en" : ""}`
+            }, {
+              dropdown: n(() => [
+                (a(!0), l(I, null, z(e.options, (t) => (a(), c(o(O), {
+                  key: t.label,
+                  style: { "--dropdown-item-justify": "center" },
+                  onClick: (E) => w(t)
+                }, {
+                  default: n(() => [
+                    t != null && t.total ? (a(), c(o(p), {
+                      key: 0,
+                      value: t.total,
+                      color: "danger",
+                      class: g(["header-message message", { "notice-not": !t.total }])
+                    }, {
+                      default: n(() => [
+                        T(i(t.label), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["value", "class"])) : (a(), l("span", A, i(t.label), 1))
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"]))), 128))
+              ]),
+              default: n(() => [
+                m("div", P, [
+                  r(o(p), {
+                    value: e.noticeTotal,
+                    dot: !0,
+                    color: "danger",
+                    class: g(["header-message user-avatar", { "notice-not": !e.noticeTotal }])
+                  }, {
+                    default: n(() => [
+                      r(V, {
+                        avatar: e.userInfo.photo,
+                        name: e.userInfo.username,
+                        "custom-size": e.customSize
+                      }, null, 8, ["avatar", "name", "custom-size"])
+                    ]),
+                    _: 1
+                  }, 8, ["value", "class"]),
+                  m("p", S, i(e.userInfo.username), 1),
+                  r(o(v), { class: "icon" }, {
+                    default: n(() => [
+                      r(o(x))
+                    ]),
+                    _: 1
+                  })
+                ])
+              ]),
+              _: 1
+            }, 8, ["trigger", "optionPosition", "option-wrap-class"])
+          ])) : f("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+export {
+  G as default
+};

package/dist/esm/components/header-user/OHeaderUser2.css

@@ -0,0 +1,44 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+.user-dropdown {
+  --dropdown-list-radius: var(--o-radius-xs);
+}
+.avatar-icon {
+  font-size: 24px;
+  color: var(--o-color-info1);
+  cursor: pointer;
+}
+@media (hover: hover) {
+.avatar-icon:hover {
+    color: var(--o-color-primary1);
+}
+}
+@media (max-width: 840px) {
+.user-dropdown .o-divider {
+    display: none;
+}
+.user-dropdown .o-icon {
+    display: none;
+}
+.user-dropdown .o-badge-content {
+    right: 0 !important;
+    transform: translate(0, 0) scale(0.5);
+    transform-origin: top right;
+    min-width: 18px;
+    width: fit-content;
+    height: 18px;
+    font-size: 12px;
+    line-height: 18px;
+}
+.user-dropdown .o-badge-content .o-badge-label {
+    transform: scale(1);
+    font-size: 12px;
+    line-height: 18px;
+}
+}

package/dist/esm/components/header-user/index.mjs

@@ -0,0 +1,9 @@
+import e from "./OHeaderUser.vue.mjs";
+const o = Object.assign(e, {
+  install(r) {
+    r.component("OHeaderUser", e);
+  }
+});
+export {
+  o as OHeaderUser
+};