@opendesign-plus-test/components 0.0.1-rc.22 → 0.0.1-rc.220

package/dist/treeshaking/components/logo-swiper/OLogoSwiperItems.css

@@ -0,0 +1,101 @@
+.hover-icon-rotate .o-icon[data-v-a34497b2] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-a34497b2] {
+    transform: rotate(-180deg);
+}
+}
+.o-logo-swiper-items[data-v-a34497b2] {
+  display: flex;
+  white-space: nowrap;
+  overflow: hidden;
+  overflow-x: clip;
+  overflow-y: visible;
+  position: relative;
+}
+.o-logo-swiper-items .o-logo-swiper-track[data-v-a34497b2] {
+  display: flex;
+  flex-shrink: 0;
+  animation: logo-swiper-marquee-a34497b2 var(--logo-swiper-duration) linear infinite;
+  animation-play-state: paused;
+}
+.o-logo-swiper-items.is-reverse .o-logo-swiper-track[data-v-a34497b2] {
+  animation-name: logo-swiper-marquee-reverse-a34497b2;
+}
+.o-logo-swiper-items.is-paused .o-logo-swiper-track[data-v-a34497b2] {
+  animation-play-state: paused;
+}
+.o-logo-swiper-items.is-visible:not(.is-paused) .o-logo-swiper-track[data-v-a34497b2] {
+  animation-play-state: running;
+}
+@media (min-width: 601px) and (hover: hover) {
+.o-logo-swiper-items.pause-on-hover:hover .o-logo-swiper-track[data-v-a34497b2] {
+    animation-play-state: paused;
+}
+}
+.o-logo-swiper-item[data-v-a34497b2] {
+  --o-logo-swiper-item-gap: 32px;
+  --o-logo-swiper-item-width: 268px;
+  --o-logo-swiper-item-height: 96px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  width: var(--o-logo-swiper-item-width);
+  height: var(--o-logo-swiper-item-height);
+  margin-right: var(--o-logo-swiper-item-gap);
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-logo-swiper-item-radius, var(--o-radius-xs));
+}
+@media (max-width: 1680px) {
+.o-logo-swiper-item[data-v-a34497b2] {
+    --o-logo-swiper-item-width: 201px;
+    --o-logo-swiper-item-height: 72px;
+    --o-logo-swiper-item-gap: 24px;
+}
+}
+@media (max-width: 1200px) {
+.o-logo-swiper-item[data-v-a34497b2] {
+    --o-logo-swiper-item-width: 150px;
+    --o-logo-swiper-item-height: 54px;
+    --o-logo-swiper-item-gap: 16px;
+}
+}
+@media (max-width: 840px) {
+.o-logo-swiper-item[data-v-a34497b2] {
+    --o-logo-swiper-item-width: 103px;
+    --o-logo-swiper-item-height: 37px;
+    --o-logo-swiper-item-gap: 12px;
+}
+}
+.o-logo-swiper-item .o-logo-swiper-img[data-v-a34497b2] {
+  --figure-radius: var(--o-logo-swiper-item-radius, var(--o-radius-xs));
+  width: var(--o-logo-swiper-item-width);
+  height: var(--o-logo-swiper-item-height);
+}
+.o-logo-swiper-item .o-logo-swiper-img img[data-v-a34497b2] {
+  width: var(--o-logo-swiper-item-width);
+  height: var(--o-logo-swiper-item-height);
+}
+@media (hover: hover) {
+.o-logo-swiper-item.link[data-v-a34497b2]:hover {
+    box-shadow: var(--o-shadow-2);
+}
+}
+@keyframes logo-swiper-marquee-a34497b2 {
+0% {
+    transform: translateX(0);
+}
+100% {
+    transform: translateX(-50%);
+}
+}
+@keyframes logo-swiper-marquee-reverse-a34497b2 {
+0% {
+    transform: translateX(-50%);
+}
+100% {
+    transform: translateX(0);
+}
+}

package/dist/treeshaking/components/logo-swiper/OLogoSwiperItems.vue.d.ts

@@ -0,0 +1,18 @@
+import { OLogoSwiperItemsPropsT, OLogoSwiperItemT } from './types';
+declare const _default: import('vue').DefineComponent<OLogoSwiperItemsPropsT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (item: OLogoSwiperItemT) => any;
+}, string, import('vue').PublicProps, Readonly<OLogoSwiperItemsPropsT> & Readonly<{
+    onClick?: ((item: OLogoSwiperItemT) => any) | undefined;
+}>, {
+    reverse: boolean;
+    data: OLogoSwiperItemT[];
+    target: "_blank" | "_parent" | "_self" | "_top";
+    duration: number;
+    fit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    radius: number | string;
+    autoPlay: boolean;
+    pauseOnHover: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/treeshaking/components/logo-swiper/OLogoSwiperItems.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./OLogoSwiperItems.vue2.mjs";
+import './OLogoSwiperItems.css';
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const _OLogoSwiperItems = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a34497b2"]]);
+export {
+  _OLogoSwiperItems as default
+};

package/dist/treeshaking/components/logo-swiper/OLogoSwiperItems.vue2.mjs

@@ -0,0 +1,162 @@
+import { defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, Fragment, renderList, createVNode, unref, createBlock } from "vue";
+import { OFigure } from "@opensig/opendesign";
+import { useI18n } from "../../i18n/index.mjs";
+import { useTheme } from "../../shared/theme.mjs";
+const _hoisted_1 = { class: "o-logo-swiper-track" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["href", "target"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OLogoSwiperItems",
+  props: {
+    data: { default: () => [] },
+    reverse: { type: Boolean, default: false },
+    autoPlay: { type: Boolean, default: true },
+    duration: { default: 100 },
+    pauseOnHover: { type: Boolean, default: true },
+    target: { default: "_blank" },
+    radius: { default: "" },
+    fit: { default: "fill" }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { locale } = useI18n();
+    const { isDark } = useTheme();
+    const rootStyle = computed(() => {
+      const style = {
+        "--logo-swiper-duration": `${props.duration}s`
+      };
+      if (props.radius !== "") {
+        style["--o-logo-swiper-item-radius"] = typeof props.radius === "number" ? `${props.radius}px` : props.radius;
+      }
+      return style;
+    });
+    const rootRef = ref(null);
+    const isVisible = ref(false);
+    const repeatCount = ref(2);
+    let resizeObserver = null;
+    let io = null;
+    const measure = () => {
+      const root = rootRef.value;
+      if (!root || !props.data.length) {
+        repeatCount.value = 2;
+        return;
+      }
+      const containerWidth = root.offsetWidth;
+      if (containerWidth <= 0) {
+        return;
+      }
+      const firstItem = root.querySelector(".o-logo-swiper-item");
+      if (!firstItem) {
+        return;
+      }
+      const style = getComputedStyle(firstItem);
+      const itemWidth = firstItem.offsetWidth + (parseFloat(style.marginRight) || 0);
+      if (itemWidth <= 0) {
+        return;
+      }
+      const dataWidth = props.data.length * itemWidth;
+      let need = Math.ceil(containerWidth * 2 / dataWidth);
+      if (need < 2) {
+        need = 2;
+      }
+      if (need % 2 !== 0) {
+        need += 1;
+      }
+      repeatCount.value = need;
+    };
+    const loopData = computed(() => {
+      const out = [];
+      for (let i = 0; i < repeatCount.value; i++) {
+        out.push(...props.data);
+      }
+      return out;
+    });
+    watch(
+      () => props.data,
+      () => nextTick(measure)
+    );
+    onMounted(() => {
+      if (typeof IntersectionObserver === "undefined" || !rootRef.value) {
+        isVisible.value = true;
+      } else {
+        io = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              isVisible.value = entry.isIntersecting;
+            });
+          },
+          { threshold: 0.5 }
+        );
+        io.observe(rootRef.value);
+      }
+      nextTick(measure);
+      if (typeof ResizeObserver !== "undefined" && rootRef.value) {
+        resizeObserver = new ResizeObserver(() => measure());
+        resizeObserver.observe(rootRef.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      io == null ? void 0 : io.disconnect();
+      resizeObserver = io = null;
+    });
+    const getHref = (item) => {
+      if (locale.value !== "zh" && item.hrefEn) {
+        return item.hrefEn;
+      }
+      return item.href;
+    };
+    const getLogo = (item) => {
+      if (isDark.value) {
+        return item.logoDark || item.logo;
+      }
+      return item.logo;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "rootRef",
+        ref: rootRef,
+        class: normalizeClass(["o-logo-swiper-items", {
+          "is-reverse": __props.reverse,
+          "is-paused": !__props.autoPlay,
+          "is-visible": isVisible.value,
+          "pause-on-hover": __props.pauseOnHover
+        }]),
+        style: normalizeStyle(rootStyle.value)
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(loopData.value, (item, i) => {
+            return openBlock(), createElementBlock("div", {
+              key: i,
+              class: normalizeClass(["o-logo-swiper-item", { link: getHref(item) }]),
+              onClick: ($event) => emit("click", item)
+            }, [
+              getHref(item) ? (openBlock(), createElementBlock("a", {
+                key: 0,
+                href: getHref(item),
+                target: __props.target,
+                rel: "noopener noreferrer"
+              }, [
+                createVNode(unref(OFigure), {
+                  class: "o-logo-swiper-img",
+                  src: getLogo(item),
+                  fit: __props.fit
+                }, null, 8, ["src", "fit"])
+              ], 8, _hoisted_3)) : (openBlock(), createBlock(unref(OFigure), {
+                key: 1,
+                class: "o-logo-swiper-img",
+                src: getLogo(item),
+                fit: __props.fit
+              }, null, 8, ["src", "fit"]))
+            ], 10, _hoisted_2);
+          }), 128))
+        ])
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/logo-swiper/index.d.ts

@@ -0,0 +1,77 @@
+import { App } from 'vue';
+declare const OLogoSwiper: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+        tip?(_: {}): any;
+    };
+}) & {
+    install(app: App): void;
+};
+declare const OLogoSwiperItems: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./types').OLogoSwiperItemsPropsT> & Readonly<{
+        onClick?: ((item: import('./types').OLogoSwiperItemT) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        click: (item: import('./types').OLogoSwiperItemT) => any;
+    }, import('vue').PublicProps, {
+        reverse: boolean;
+        data: import('./types').OLogoSwiperItemT[];
+        target: "_blank" | "_parent" | "_self" | "_top";
+        duration: number;
+        fit: "cover" | "contain" | "fill" | "none" | "scale-down";
+        radius: number | string;
+        autoPlay: boolean;
+        pauseOnHover: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        rootRef: HTMLDivElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('./types').OLogoSwiperItemsPropsT> & Readonly<{
+        onClick?: ((item: import('./types').OLogoSwiperItemT) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        reverse: boolean;
+        data: import('./types').OLogoSwiperItemT[];
+        target: "_blank" | "_parent" | "_self" | "_top";
+        duration: number;
+        fit: "cover" | "contain" | "fill" | "none" | "scale-down";
+        radius: number | string;
+        autoPlay: boolean;
+        pauseOnHover: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('./types').OLogoSwiperItemsPropsT> & Readonly<{
+    onClick?: ((item: import('./types').OLogoSwiperItemT) => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (item: import('./types').OLogoSwiperItemT) => any;
+}, string, {
+    reverse: boolean;
+    data: import('./types').OLogoSwiperItemT[];
+    target: "_blank" | "_parent" | "_self" | "_top";
+    duration: number;
+    fit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    radius: number | string;
+    autoPlay: boolean;
+    pauseOnHover: boolean;
+}, {}, 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 { OLogoSwiper, OLogoSwiperItems };
+export * from './types';

package/dist/treeshaking/components/logo-swiper/index.mjs

@@ -0,0 +1,16 @@
+import _OLogoSwiper from "./OLogoSwiper.vue.mjs";
+import _OLogoSwiperItems from "./OLogoSwiperItems.vue.mjs";
+const OLogoSwiper = Object.assign(_OLogoSwiper, {
+  install(app) {
+    app.component("OLogoSwiper", _OLogoSwiper);
+  }
+});
+const OLogoSwiperItems = Object.assign(_OLogoSwiperItems, {
+  install(app) {
+    app.component("OLogoSwiperItems", _OLogoSwiperItems);
+  }
+});
+export {
+  OLogoSwiper,
+  OLogoSwiperItems
+};

package/dist/treeshaking/components/logo-swiper/types.d.ts

@@ -0,0 +1,19 @@
+export interface OLogoSwiperItemT {
+    logo: string;
+    logoDark?: string;
+    href?: string;
+    hrefEn?: string;
+}
+export interface OLogoSwiperItemsPropsT {
+    data: OLogoSwiperItemT[];
+    reverse?: boolean;
+    autoPlay?: boolean;
+    duration?: number;
+    pauseOnHover?: boolean;
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    radius?: number | string;
+    fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+}
+export interface OLogoSwiperItemsEmitsT {
+    (e: 'click', item: OLogoSwiperItemT): void;
+}