@opendesign-plus/components 0.0.1-rc.4 → 0.0.1-rc.40

package/dist/treeshaking/components/header-language-switcher/OHeaderLanguageSwitcher.vue.d.ts

@@ -0,0 +1,58 @@
+export interface LanguageOptionT {
+    id: string;
+    label: string;
+    simple: string;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    options: {
+        type: () => LanguageOptionT[];
+        default(): {
+            id: string;
+            label: string;
+            simple: string;
+        }[];
+    };
+    type: {
+        type: () => "auto" | "common" | "mobile";
+        default: string;
+    };
+    auto: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    options: {
+        type: () => LanguageOptionT[];
+        default(): {
+            id: string;
+            label: string;
+            simple: string;
+        }[];
+    };
+    type: {
+        type: () => "auto" | "common" | "mobile";
+        default: string;
+    };
+    auto: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: "auto" | "common" | "mobile";
+    disabled: boolean;
+    auto: boolean;
+    options: LanguageOptionT[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,8 @@
+import _sfc_main from "./OHeaderLanguageSwitcher.vue2.mjs";
+import './OHeaderLanguageSwitcher.css';
+import './OHeaderLanguageSwitcher2.css';
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const _OHeaderLanguageSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9ed8b351"]]);
+export {
+  _OHeaderLanguageSwitcher as default
+};

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

@@ -0,0 +1,125 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createTextVNode, createCommentVNode, withModifiers } from "vue";
+import { useLocale, useScreen } from "@opendesign-plus/composables";
+import { ODropdown, OIcon, ODropdownItem, ODivider } from "@opensig/opendesign";
+import IconLocale from "../../_virtual/icon-locale.mjs";
+const _hoisted_1 = { class: "info-wrap" };
+const _hoisted_2 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __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: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const { changeLocale, locale } = useLocale();
+    const { lePadV } = useScreen();
+    const lang = computed(() => {
+      return locale.value;
+    });
+    const emits = __emit;
+    const changeLanguage = (newlang) => {
+      if (props.auto) {
+        changeLocale();
+      }
+      emits("change", newlang);
+    };
+    const getLang = (lang2, simple) => {
+      const item = props.options.find((el) => el.id === lang2);
+      if (item) {
+        return simple ? item.simple : item.label;
+      }
+      const defaultLang = props.options[0];
+      return simple ? defaultLang.simple : defaultLang.label;
+    };
+    const isCommon = computed(() => {
+      return props.type === "common" || props.type === "auto" && !lePadV.value;
+    });
+    return (_ctx, _cache) => {
+      return isCommon.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass([__props.options.length <= 1 ? "hide-lang" : "header-lang", __props.disabled ? "is-disabled" : ""])
+      }, [
+        createVNode(unref(ODropdown), {
+          trigger: "hover",
+          optionPosition: "bottom",
+          "option-width-mode": "auto",
+          optionWrapClass: {
+            dropdown: true,
+            "is-disabled": __props.disabled
+          }
+        }, {
+          dropdown: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (item) => {
+              return openBlock(), createBlock(unref(ODropdownItem), {
+                onClick: ($event) => changeLanguage(item),
+                key: item.id,
+                class: normalizeClass(["list", { "is-active": lang.value === item.id }])
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(getLang(item.id)), 1)
+                ]),
+                _: 2
+              }, 1032, ["onClick", "class"]);
+            }), 128))
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              createVNode(unref(OIcon), { class: "icon" }, {
+                default: withCtx(() => [
+                  createVNode(unref(IconLocale)),
+                  createElementVNode("div", {
+                    class: normalizeClass(["locale-tag", { "is-en": lang.value === "en" }])
+                  }, toDisplayString(getLang(lang.value, true)), 3)
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          _: 1
+        }, 8, ["optionWrapClass"])
+      ], 2)) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass([__props.options.length <= 1 ? "hide-lang" : "mobile-change-language", __props.disabled ? "is-disabled" : ""])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (item, idx) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: item.id
+          }, [
+            idx !== 0 ? (openBlock(), createBlock(unref(ODivider), {
+              key: 0,
+              direction: "v"
+            })) : createCommentVNode("", true),
+            createElementVNode("span", {
+              class: normalizeClass({ active: lang.value === item.id }),
+              onClick: withModifiers(($event) => changeLanguage(item), ["stop"])
+            }, toDisplayString(getLang(item.id, true)), 11, _hoisted_2)
+          ], 64);
+        }), 128))
+      ], 2));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/header-language-switcher/OHeaderLanguageSwitcher2.css

@@ -0,0 +1,11 @@
+.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);
+}
+}
+.o-dropdown-list.is-disabled {
+  display: none;
+}

package/dist/treeshaking/components/header-language-switcher/index.d.ts

@@ -0,0 +1,105 @@
+import { App } from 'vue';
+declare const OHeaderLanguageSwitcher: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        options: {
+            type: () => import('./OHeaderLanguageSwitcher.vue').LanguageOptionT[];
+            default(): {
+                id: string;
+                label: string;
+                simple: string;
+            }[];
+        };
+        type: {
+            type: () => "auto" | "common" | "mobile";
+            default: string;
+        };
+        auto: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onChange?: ((...args: any[]) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        change: (...args: any[]) => void;
+    }, import('vue').PublicProps, {
+        type: "auto" | "common" | "mobile";
+        disabled: boolean;
+        auto: boolean;
+        options: import('./OHeaderLanguageSwitcher.vue').LanguageOptionT[];
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        options: {
+            type: () => import('./OHeaderLanguageSwitcher.vue').LanguageOptionT[];
+            default(): {
+                id: string;
+                label: string;
+                simple: string;
+            }[];
+        };
+        type: {
+            type: () => "auto" | "common" | "mobile";
+            default: string;
+        };
+        auto: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onChange?: ((...args: any[]) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        type: "auto" | "common" | "mobile";
+        disabled: boolean;
+        auto: boolean;
+        options: import('./OHeaderLanguageSwitcher.vue').LanguageOptionT[];
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    options: {
+        type: () => import('./OHeaderLanguageSwitcher.vue').LanguageOptionT[];
+        default(): {
+            id: string;
+            label: string;
+            simple: string;
+        }[];
+    };
+    type: {
+        type: () => "auto" | "common" | "mobile";
+        default: string;
+    };
+    auto: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, {
+    type: "auto" | "common" | "mobile";
+    disabled: boolean;
+    auto: boolean;
+    options: import('./OHeaderLanguageSwitcher.vue').LanguageOptionT[];
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
+    install(app: App): void;
+};
+export { OHeaderLanguageSwitcher };

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

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

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

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