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

package/dist/esm/components/header/components/HeaderNavMobile.css

@@ -0,0 +1,418 @@
+.hover-icon-rotate .o-icon[data-v-7aa3e2e5] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-7aa3e2e5] {
+    transform: rotate(-180deg);
+}
+}
+.header-nav[data-v-7aa3e2e5] {
+  flex: 1;
+  justify-content: space-between;
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+  background-color: var(--o-color-fill2);
+  transform: translateX(-130%);
+  transition-duration: 0.333s;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.5, 0, 0.84, 0.25);
+  display: block;
+  opacity: 0;
+}
+.header-nav.active[data-v-7aa3e2e5] {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+}
+.o-nav[data-v-7aa3e2e5] {
+  height: 100%;
+  position: relative;
+  width: 99px;
+  background: var(--o-color-fill1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.o-nav .o-nav-list[data-v-7aa3e2e5] {
+  padding: 0;
+  margin: 0;
+  height: auto;
+}
+.o-nav .o-nav-list > li[data-v-7aa3e2e5] {
+  position: relative;
+  text-align: center;
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-nav .o-nav-list > li[data-v-7aa3e2e5] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-nav .o-nav-list > li[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-nav .o-nav-list > li[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-nav .o-nav-list > li[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.o-nav .o-nav-list > li[data-v-7aa3e2e5] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  color: var(--o-color-info1);
+}
+.o-nav .o-nav-list > li.active[data-v-7aa3e2e5] {
+  color: var(--o-color-primary1);
+  background: var(--o-color-fill2);
+  font-weight: 500;
+}
+.nav-aside[data-v-7aa3e2e5] {
+  position: fixed;
+  background-color: var(--o-color-fill2);
+  top: 0;
+  left: 0;
+  width: calc(100% - 99px);
+  transform: translateX(99px);
+  height: 100%;
+  z-index: 190;
+}
+.nav-aside .nav-aside-wrapper[data-v-7aa3e2e5] {
+  overflow-y: auto;
+  padding: 16px 12px 32px;
+  height: 100%;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content[data-v-7aa3e2e5] {
+  display: block;
+  flex: 0 1 auto;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content + .nav-aside-content[data-v-7aa3e2e5] {
+  position: relative;
+  padding-top: var(--o-gap-3);
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content + .nav-aside-content[data-v-7aa3e2e5]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  background-color: rgba(var(--o-grey-14), 0.1);
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-7aa3e2e5] {
+  color: var(--o-color-info3);
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-7aa3e2e5] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .item-not-children[data-v-7aa3e2e5] {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .item-not-children .o-tag[data-v-7aa3e2e5] {
+  margin-left: var(--o-gap-2);
+  --layout-pkg-radius: 100vh;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .item-not-children .o-icon[data-v-7aa3e2e5] {
+  margin-left: var(--o-gap-2);
+}
+.nav-aside .nav-aside-wrapper .source-code-item[data-v-7aa3e2e5] {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  color: var(--o-color-info1);
+}
+.nav-aside .nav-aside-wrapper .source-code-item.active[data-v-7aa3e2e5] {
+  color: var(--o-color-primary1);
+}
+.nav-aside .nav-aside-wrapper .source-code-item + .source-code-item[data-v-7aa3e2e5] {
+  border-top: 1px solid var(--o-color-control4);
+}
+.nav-aside .nav-aside-wrapper .source-code-item .icon[data-v-7aa3e2e5] {
+  margin-left: var(--o-gap-2);
+}
+.nav-aside .nav-aside-wrapper[data-v-7aa3e2e5]::-webkit-scrollbar-track {
+  border-radius: 3px;
+}
+.nav-aside .nav-aside-wrapper[data-v-7aa3e2e5]::-webkit-scrollbar {
+  width: 6px;
+  background-color: transparent;
+}
+.nav-aside .nav-aside-wrapper[data-v-7aa3e2e5]::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: var(--o-color-control1);
+}
+.nav-aside .container-mobile[data-v-7aa3e2e5] {
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .container-mobile[data-v-7aa3e2e5] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .container-mobile[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .container-mobile[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .container-mobile[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.nav-aside .container-mobile .o-icon[data-v-7aa3e2e5] {
+  --icon-size: 16px;
+  margin-left: var(--o-gap-2);
+}
+.nav-aside .content-container-mobile[data-v-7aa3e2e5] {
+  margin-top: var(--o-gap-3);
+}
+.nav-aside .content-container-mobile[data-v-7aa3e2e5]:first-child {
+  margin-top: 8px;
+}
+.nav-aside .content-container-mobile[data-v-7aa3e2e5]:last-child {
+  margin-bottom: 12px;
+}
+.nav-aside .content-container-mobile .content-subtitle[data-v-7aa3e2e5] {
+  color: var(--o-color-info1);
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-7aa3e2e5] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.nav-aside .content-container-mobile .content-tag[data-v-7aa3e2e5] {
+  margin-left: var(--o-gap-2);
+  --layout-pkg-radius: var(--o-radius-xs);
+}
+.nav-aside .content-container-mobile .desc-container[data-v-7aa3e2e5] {
+  overflow: hidden;
+  position: relative;
+}
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-7aa3e2e5] {
+  color: var(--o-color-info2);
+  margin-top: var(--o-gap-1);
+  text-align: justify;
+  word-break: normal;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-7aa3e2e5] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-7aa3e2e5] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-7aa3e2e5] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-7aa3e2e5] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-7aa3e2e5] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+@media (max-width: 600px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-7aa3e2e5] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) and (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 601px) and (max-width: 840px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (max-width: 600px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-7aa3e2e5] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.header-tool[data-v-7aa3e2e5] {
+  position: absolute;
+  bottom: 36px;
+  left: 0;
+  width: 99px;
+  display: flex;
+  height: auto;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.header-tool-item[data-v-7aa3e2e5] {
+  width: 99px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  color: var(--o-color-info1);
+}
+.header-tool-item.active[data-v-7aa3e2e5] {
+  color: var(--o-color-primary1);
+  background: var(--o-color-fill2);
+  font-weight: 500;
+}
+.header-tool-item[data-v-7aa3e2e5] {
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.header-tool-item[data-v-7aa3e2e5] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.header-tool-item[data-v-7aa3e2e5] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.header-tool-item[data-v-7aa3e2e5] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.header-tool-item[data-v-7aa3e2e5] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.header-tool-item[data-v-7aa3e2e5] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) and (min-width: 1201px) and (max-width: 1680px) {
+.header-tool-item[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 841px) and (max-width: 1200px) {
+.header-tool-item[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 601px) and (max-width: 840px) {
+.header-tool-item[data-v-7aa3e2e5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (max-width: 600px) {
+.header-tool-item[data-v-7aa3e2e5] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.other-tool[data-v-7aa3e2e5] {
+  width: 99px;
+  margin-top: 8px;
+  text-align: center;
+}

package/dist/esm/components/header/components/HeaderNavMobile.vue.mjs

@@ -0,0 +1,7 @@
+import o from "./HeaderNavMobile.vue2.mjs";
+import './HeaderNavMobile.css';
+import a from "../../../_plugin-vue_export-helper.mjs";
+const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-7aa3e2e5"]]);
+export {
+  m as default
+};

package/dist/esm/components/header/components/HeaderNavMobile.vue2.mjs

@@ -0,0 +1,168 @@
+import { defineComponent as L, ref as b, onMounted as S, watch as V, openBlock as a, createElementBlock as n, normalizeClass as D, createElementVNode as s, Fragment as f, renderList as C, toDisplayString as d, createBlock as u, unref as _, withCtx as g, resolveDynamicComponent as w, createCommentVNode as v, createTextVNode as A, renderSlot as z } from "vue";
+import { OIcon as $, OTag as E } from "@opensig/opendesign";
+import { NavType as h } from "../types.mjs";
+const G = { class: "o-nav" }, T = { class: "o-nav-list" }, x = ["onClick"], M = { class: "nav-aside" }, F = {
+  key: 0,
+  class: "nav-aside-wrapper"
+}, H = ["value"], j = { class: "content-label" }, q = { class: "container-mobile" }, J = ["onClick"], K = { class: "item-label" }, P = { class: "desc-container" }, Q = { class: "item-desc" }, R = ["onClick"], U = { class: "item-label" }, W = {
+  key: 1,
+  class: "nav-aside-wrapper"
+}, X = ["onClick"], Y = { class: "header-tool" }, Z = {
+  key: 2,
+  class: "other-tool"
+}, le = /* @__PURE__ */ L({
+  __name: "HeaderNavMobile",
+  props: {
+    menuShow: { type: Boolean, default: !1 },
+    navData: { default: () => [] },
+    codeData: { default: () => [] },
+    langData: { default: () => [] }
+  },
+  emits: ["on-click", "lang-click", "handle-click"],
+  setup(k, { emit: O }) {
+    const p = O, i = k, o = b(""), r = b({}), y = (l, c) => {
+      var e;
+      c === h.NAV ? (e = l == null ? void 0 : l.children) != null && e.length ? (o.value = l.id, r.value = l) : p("handle-click", l) : c === h.CODE ? (o.value = c, r.value = i.codeData.list) : c === h.LANG && (o.value = c, r.value = i.langData.list);
+    }, N = (l, c) => {
+      window.open(l, c || "_self"), p("on-click");
+    }, B = (l) => {
+      o.value === h.CODE ? N(l.href, l == null ? void 0 : l.target) : o.value === h.LANG && p("lang-click", l);
+    };
+    return S(() => {
+      o.value = i.navData[0].id, r.value = i.navData[0];
+    }), V(
+      () => i.navData || i.codeData || i.langData,
+      () => {
+        o.value === h.CODE ? r.value = i.codeData.list : o.value === h.LANG ? r.value = i.langData.list : r.value = i.navData.find((l) => l.id === o.value);
+      },
+      {
+        deep: !0
+      }
+    ), (l, c) => (a(), n("div", {
+      class: D(["header-nav", { active: k.menuShow }])
+    }, [
+      s("div", G, [
+        s("ul", T, [
+          (a(!0), n(f, null, C(k.navData, (e) => (a(), n("li", {
+            key: e.id,
+            class: D({
+              active: o.value === e.id
+            })
+          }, [
+            s("span", {
+              onClick: (t) => y(e, "nav")
+            }, d(e.label), 9, x)
+          ], 2))), 128))
+        ]),
+        s("div", M, [
+          o.value !== "code" && o.value !== "lang" ? (a(), n("ul", F, [
+            (a(!0), n(f, null, C(r.value.children, (e) => (a(), n("li", {
+              value: e.label,
+              key: e.label,
+              class: "nav-aside-content"
+            }, [
+              e != null && e.children ? (a(), n(f, { key: 0 }, [
+                s("p", j, d(e.label), 1),
+                s("div", q, [
+                  (a(!0), n(f, null, C(e == null ? void 0 : e.children, (t) => (a(), n("div", {
+                    key: t.label,
+                    class: "content-container-mobile"
+                  }, [
+                    s("a", {
+                      onClick: (I) => N(t.href, t == null ? void 0 : t.target),
+                      rel: "noopener noreferrer",
+                      class: "content-subtitle"
+                    }, [
+                      s("span", K, d(t.label), 1),
+                      t.icon ? (a(), u(_($), { key: 0 }, {
+                        default: g(() => [
+                          (a(), u(w(t.icon), { class: "icon" }))
+                        ]),
+                        _: 2
+                      }, 1024)) : v("", !0),
+                      t.tag ? (a(), u(_(E), {
+                        key: 1,
+                        round: "pill",
+                        color: "danger",
+                        size: "small",
+                        class: "content-tag"
+                      }, {
+                        default: g(() => [
+                          A(d(t.tag), 1)
+                        ]),
+                        _: 2
+                      }, 1024)) : v("", !0)
+                    ], 8, J),
+                    s("div", P, [
+                      s("p", Q, d(t.description), 1)
+                    ])
+                  ]))), 128))
+                ])
+              ], 64)) : (a(), n("a", {
+                key: 1,
+                onClick: (t) => N(e.href, e == null ? void 0 : e.target),
+                rel: "noopener noreferrer",
+                class: "content-subtitle item-not-children"
+              }, [
+                s("span", U, d(e.label), 1),
+                e.icon ? (a(), u(_($), { key: 0 }, {
+                  default: g(() => [
+                    (a(), u(w(e.icon), { class: "icon" }))
+                  ]),
+                  _: 2
+                }, 1024)) : v("", !0),
+                e.tag ? (a(), u(_(E), {
+                  key: 1,
+                  round: "pill",
+                  color: "danger",
+                  size: "small"
+                }, {
+                  default: g(() => [
+                    A(d(e.tag), 1)
+                  ]),
+                  _: 2
+                }, 1024)) : v("", !0)
+              ], 8, R))
+            ], 8, H))), 128))
+          ])) : (a(), n("div", W, [
+            (a(!0), n(f, null, C(r.value, (e) => (a(), n("a", {
+              key: e.label,
+              onClick: (t) => B(e),
+              class: "source-code-item"
+            }, [
+              s("span", null, d(e.label), 1),
+              e.icon ? (a(), u(_($), { key: 0 }, {
+                default: g(() => [
+                  (a(), u(w(e.icon), { class: "icon" }))
+                ]),
+                _: 2
+              }, 1024)) : v("", !0)
+            ], 8, X))), 128))
+          ]))
+        ])
+      ]),
+      s("div", Y, [
+        k.codeData ? (a(), n("div", {
+          key: 0,
+          class: D(["header-tool-item", {
+            active: o.value === "code"
+          }]),
+          onClick: c[0] || (c[0] = (e) => y(null, "code"))
+        }, d(k.codeData.label), 3)) : v("", !0),
+        k.langData ? (a(), n("div", {
+          key: 1,
+          class: D(["header-tool-item", {
+            active: o.value === "lang"
+          }]),
+          onClick: c[1] || (c[1] = (e) => y(null, "lang"))
+        }, d(k.langData.label), 3)) : v("", !0),
+        l.$slots.tool ? (a(), n("div", Z, [
+          z(l.$slots, "tool", {}, void 0, !0)
+        ])) : v("", !0)
+      ])
+    ], 2));
+  }
+});
+export {
+  le as default
+};

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

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

package/dist/esm/components/header/types.mjs

@@ -0,0 +1,4 @@
+var n = /* @__PURE__ */ ((r) => (r.NAV = "nav", r.CODE = "code", r.LANG = "lang", r))(n || {});
+export {
+  n as NavType
+};