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

package/dist/esm/components/header-language-switcher/OHeaderLanguageSwitcher.css

@@ -0,0 +1,125 @@
+.hover-icon-rotate .o-icon[data-v-00163ab5] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-00163ab5] {
+    transform: rotate(-180deg);
+}
+}
+.hide-lang[data-v-00163ab5] {
+  display: none;
+}
+.header-lang[data-v-00163ab5] {
+  height: calc(100% + 10px);
+  display: flex;
+  align-items: center;
+}
+.header-lang .info-wrap[data-v-00163ab5] {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.header-lang .info-wrap .icon[data-v-00163ab5] {
+  font-size: var(--o-icon_size_control-m);
+  position: relative;
+  color: var(--o-color-info1);
+}
+.header-lang .info-wrap .icon[data-v-00163ab5]:hover {
+  color: var(--o-color-primary1);
+}
+.header-lang .info-wrap .locale-tag[data-v-00163ab5] {
+  position: absolute;
+  font-size: 10px;
+  height: 12px;
+  width: 12px;
+  background-color: var(--o-color-fill2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 12px;
+  top: 11px;
+}
+.header-lang .info-wrap .locale-tag.is-en[data-v-00163ab5] {
+  width: 16px;
+}
+.header-lang .list[data-v-00163ab5] {
+  background: var(--o-color-fill2);
+  cursor: pointer;
+  box-shadow: var(--o-shadow-1);
+  border-radius: var(--o-radius_control-xs);
+  padding: var(--o-gap-1);
+  width: 144px;
+}
+.o-dropdown[data-v-00163ab5] {
+  height: 100%;
+}
+.o-dropdown-item[data-v-00163ab5] {
+  background: var(--o-color-fill2);
+  cursor: pointer;
+  border-radius: var(--o-radius_control-xs);
+  padding: var(--o-gap-1);
+  min-width: 144px;
+  height: 40px;
+  color: var(--o-color-info1);
+}
+@media (hover: hover) {
+.o-dropdown-item[data-v-00163ab5]:hover {
+    background: var(--o-color-control2-light);
+}
+}
+.o-dropdown-item.is-active[data-v-00163ab5] {
+  color: var(--o-color-primary1);
+  background: var(--o-color-control3-light);
+}
+.dropdown[data-v-00163ab5] {
+  --dropdown-list-radius: var(--o-radius-xs);
+}
+.mobile-change-language[data-v-00163ab5] {
+  display: flex;
+  align-items: center;
+  height: 36px;
+}
+.mobile-change-language span[data-v-00163ab5] {
+  color: var(--o-color-info1);
+  margin-right: var(--o-gap-1);
+  text-align: center;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.mobile-change-language span[data-v-00163ab5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.mobile-change-language span[data-v-00163ab5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.mobile-change-language span[data-v-00163ab5] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.mobile-change-language span[data-v-00163ab5] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.mobile-change-language span[data-v-00163ab5] {
+  cursor: pointer;
+}
+.mobile-change-language span.active[data-v-00163ab5] {
+  color: var(--o-color-primary1);
+  font-weight: 500;
+}
+.mobile-change-language span[data-v-00163ab5]:not(:last-child):after {
+  content: "|";
+  margin-left: var(--o-gap-1);
+  color: var(--o-color-info1);
+}

package/dist/esm/components/header-language-switcher/OHeaderLanguageSwitcher.vue.mjs

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

package/dist/esm/components/header-language-switcher/OHeaderLanguageSwitcher.vue2.mjs

@@ -0,0 +1,87 @@
+import { defineComponent as E, computed as h, openBlock as t, createElementBlock as a, normalizeClass as l, createVNode as g, unref as c, withCtx as u, createElementVNode as v, toDisplayString as m, Fragment as y, renderList as k, createBlock as N, createTextVNode as O, withModifiers as S } from "vue";
+import { useLocale as V, useScreen as D } from "@opendesign-plus/composables";
+import { ODropdown as I, OIcon as z, ODropdownItem as P } from "@opensig/opendesign";
+import $ from "../../icons/icon-locale.mjs";
+const A = { class: "info-wrap" }, F = ["onClick"], q = /* @__PURE__ */ E({
+  __name: "OHeaderLanguageSwitcher",
+  props: {
+    options: {
+      type: Array,
+      default() {
+        return [
+          { id: "zh", label: "简体中文", simple: "中" },
+          { id: "en", label: "English", simple: "EN" }
+        ];
+      }
+    },
+    type: {
+      type: String,
+      default: "auto"
+    },
+    auto: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["change"],
+  setup(o, { emit: w }) {
+    const n = o, { changeLocale: C, locale: L } = V(), { lePadV: b } = D(), i = h(() => L.value), _ = w, f = (s) => {
+      n.auto && C(), _("change", s);
+    }, d = (s, p) => {
+      const e = n.options.find((B) => B.id === s);
+      if (e)
+        return p ? e.simple : e.label;
+      const r = n.options[0];
+      return p ? r.simple : r.label;
+    }, x = h(() => n.type === "common" || n.type === "auto" && !b.value);
+    return (s, p) => x.value ? (t(), a("div", {
+      key: 0,
+      class: l(o.options.length <= 1 ? "hide-lang" : "header-lang")
+    }, [
+      g(c(I), {
+        trigger: "hover",
+        optionPosition: "bottom",
+        "option-wrap-class": "dropdown"
+      }, {
+        dropdown: u(() => [
+          (t(!0), a(y, null, k(o.options, (e) => (t(), N(c(P), {
+            onClick: (r) => f(e),
+            key: e.id,
+            class: l(["list", { "is-active": i.value === e.id }])
+          }, {
+            default: u(() => [
+              O(m(d(e.id)), 1)
+            ]),
+            _: 2
+          }, 1032, ["onClick", "class"]))), 128))
+        ]),
+        default: u(() => [
+          v("div", A, [
+            g(c(z), { class: "icon" }, {
+              default: u(() => [
+                g(c($)),
+                v("div", {
+                  class: l(["locale-tag", { "is-en": i.value === "en" }])
+                }, m(d(i.value, !0)), 3)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      })
+    ], 2)) : (t(), a("div", {
+      key: 1,
+      class: l(o.options.length <= 1 ? "hide-lang" : "mobile-change-language")
+    }, [
+      (t(!0), a(y, null, k(o.options, (e) => (t(), a("span", {
+        key: e.id,
+        class: l({ active: i.value === e.id }),
+        onClick: S((r) => f(e), ["stop"])
+      }, m(d(e.id, !0)), 11, F))), 128))
+    ], 2));
+  }
+});
+export {
+  q as default
+};

package/dist/esm/components/header-language-switcher/index.mjs

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

package/dist/esm/components/header-search/OHeaderSearch.css

@@ -0,0 +1,199 @@
+.hover-icon-rotate .o-icon[data-v-a97b8e7c] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-a97b8e7c] {
+    transform: rotate(-180deg);
+}
+}
+.o-header-search[data-v-a97b8e7c] {
+  position: relative;
+  width: 160px;
+  height: 32px;
+}
+@media (max-width: 1440px) {
+.o-header-search[data-v-a97b8e7c] {
+    width: 120px;
+}
+}
+@media (max-width: 840px) {
+.o-header-search[data-v-a97b8e7c] {
+    width: 24px;
+    height: 24px;
+    margin-left: auto;
+}
+}
+.o-header-search-pos[data-v-a97b8e7c] {
+  position: absolute;
+  top: 0;
+  width: fit-content;
+  background-color: var(--o-color-fill2);
+  z-index: 100;
+}
+.o-header-search-pos.is-left[data-v-a97b8e7c] {
+  right: 0;
+}
+.o-header-search-pos.is-right[data-v-a97b8e7c] {
+  left: 0;
+}
+.o-header-search-pos.is-mobile[data-v-a97b8e7c] {
+  display: none;
+}
+.o-header-search-pos.is-pc.is-focus[data-v-a97b8e7c] {
+  box-shadow: var(--o-shadow-2);
+  top: calc(-1 * var(--o-gap-4));
+  border-radius: var(--o-radius-xs);
+}
+.o-header-search-pos.is-mobile.is-focus[data-v-a97b8e7c] {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: block;
+  height: 100vh;
+  background-color: var(--o-color-fill2);
+  z-index: 100;
+  overflow-y: auto;
+}
+.o-header-search-row[data-v-a97b8e7c] {
+  display: flex;
+  align-items: start;
+}
+.o-header-search-row.is-focus[data-v-a97b8e7c] {
+  padding: var(--o-gap-4);
+  border-radius: var(--o-radius-xs);
+}
+@media (max-width: 840px) {
+.o-header-search-row.is-focus[data-v-a97b8e7c] {
+    gap: var(--o-gap-4);
+    padding: 10px var(--o-gap-4) var(--o-gap-4) var(--o-gap-4);
+    border-radius: unset;
+}
+}
+.o-header-search-input[data-v-a97b8e7c] {
+  width: 160px;
+  transition: width var(--o-duration-m2) var(--o-easing-standard-in);
+}
+@media (max-width: 1440px) {
+.o-header-search-input[data-v-a97b8e7c] {
+    width: 120px;
+}
+}
+.o-header-search-row.is-focus .o-header-search-input[data-v-a97b8e7c] {
+  width: 480px;
+}
+@media (min-width: 1201px) and (max-width: 1440px) {
+.o-header-search-row.is-focus .o-header-search-input[data-v-a97b8e7c] {
+    width: 360px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-header-search-row.is-focus .o-header-search-input[data-v-a97b8e7c] {
+    width: 272px;
+}
+}
+@media (max-width: 840px) {
+.o-header-search-row.is-focus .o-header-search-input[data-v-a97b8e7c] {
+    flex: 1;
+    width: auto;
+}
+}
+.o-header-search-back-icon[data-v-a97b8e7c] {
+  cursor: pointer;
+  color: var(--o-color-info1);
+  font-size: 20px;
+  height: 30px;
+}
+.o-header-search-text[data-v-a97b8e7c] {
+  white-space: nowrap;
+  font-size: 16px;
+  line-height: 24px;
+  cursor: pointer;
+  color: var(--o-color-info1);
+  height: 30px;
+}
+@media (hover: hover) {
+.o-header-search-text[data-v-a97b8e7c]:hover {
+    color: var(--o-color-primary1);
+}
+}
+.o-header-search-drawer[data-v-a97b8e7c] {
+  position: absolute;
+  width: 100%;
+  padding: var(--o-gap-4);
+  padding-top: 0;
+  background-color: var(--o-color-fill2);
+  box-shadow: var(--o-shadow-2);
+  border-radius: 0 0 var(--o-radius-xs) var(--o-radius-xs);
+}
+@media (max-width: 840px) {
+.o-header-search-drawer[data-v-a97b8e7c] {
+    position: static;
+    height: calc(100vh - 50px);
+    padding-top: 0;
+    overflow-y: auto;
+    box-shadow: unset;
+    border-radius: unset;
+}
+}
+.o-header-search-drawer[data-v-a97b8e7c]::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(-1 * var(--o-gap-4));
+  height: calc(var(--o-gap-4) + 1px);
+  background-color: var(--o-color-fill2);
+}
+@media (max-width: 840px) {
+.o-header-search-drawer[data-v-a97b8e7c]::before {
+    display: none;
+}
+}
+.o-header-search-mobile-icon[data-v-a97b8e7c] {
+  font-size: 24px;
+  line-height: 28px;
+  color: var(--o-color-info1);
+  cursor: pointer;
+  display: none;
+}
+@media (max-width: 840px) {
+.o-header-search-mobile-icon[data-v-a97b8e7c] {
+    display: block;
+}
+}
+.o-header-search-drawer-enter-active[data-v-a97b8e7c] {
+  transition: opacity var(--o-duration-m1);
+}
+.o-header-search-drawer-enter-from[data-v-a97b8e7c] {
+  opacity: 0;
+}
+.o-header-search.is-mobile-mode[data-v-a97b8e7c] {
+  width: 24px;
+  height: 24px;
+}
+.o-header-search.is-mobile-mode .o-header-search-mobile-icon[data-v-a97b8e7c] {
+  display: block;
+}
+.o-header-search.is-mobile-mode .o-header-search-row.is-focus[data-v-a97b8e7c] {
+  gap: var(--o-gap-4);
+  padding: 10px var(--o-gap-4) var(--o-gap-4) var(--o-gap-4);
+  border-radius: unset;
+}
+.o-header-search.is-mobile-mode .o-header-search-row.is-focus .o-header-search-input[data-v-a97b8e7c] {
+  flex: 1;
+  width: auto;
+}
+.o-header-search.is-mobile-mode .o-header-search-drawer[data-v-a97b8e7c] {
+  position: static;
+  height: calc(100vh - 50px);
+  padding-top: 0;
+  overflow-y: auto;
+  box-shadow: unset;
+  border-radius: unset;
+}
+.o-header-search.is-mobile-mode .o-header-search-drawer[data-v-a97b8e7c]::before {
+  display: none;
+}

package/dist/esm/components/header-search/OHeaderSearch.vue.mjs

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