@opendesign-plus-test/components 0.0.1-rc.19 → 0.0.1-rc.190

package/src/draft/HorizontalAnchor.vue

@@ -1,165 +0,0 @@
-<script lang="ts" setup>
-import { ref, type PropType } from 'vue';
-
-import { useIntersectionObserver } from '@vueuse/core';
-
-import { OAnchor, OAnchorItem } from '@opensig/opendesign';
-import ContentWrapper from './ContentWrapper.vue';
-
-const target = ref(null);
-const showAnchor = ref(false);
-defineProps({
-  anchorData: {
-    type: Object,
-    required: true,
-    default: () => null,
-  },
-  wrapClass: {
-    type: [String, Array] as PropType<string | any[]>,
-    default: undefined,
-  },
-  transparent: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-useIntersectionObserver(target, ([entry]) => {
-  showAnchor.value = !entry?.isIntersecting;
-});
-</script>
-<template>
-  <div v-show="showAnchor" :class="[transparent ? 'anchor-transparent' : 'anchor-header', wrapClass]">
-    <ContentWrapper :style="{
-      '--content-wrapper-vertical-paddingTop': '0',
-      '--content-wrapper-vertical-paddingBottom': '0',
-    }">
-      <div class="anchor-container">
-        <OAnchor container="#app > .o-scroller > .o-scroller-container" :targetOffset="160">
-          <OAnchorItem v-for="anchor in anchorData" :key="anchor.id" :title="anchor.title" :href="`#${anchor.id}`">
-          </OAnchorItem>
-        </OAnchor>
-      </div>
-    </ContentWrapper>
-  </div>
-  <div ref="target"></div>
-</template>
-
-<style lang="scss" scoped>
-.anchor-header {
-  position: fixed;
-  top: 0;
-  height: 68px;
-  z-index: 10;
-  background-color: var(--o-color-control2-light);
-  @include text1;
-
-  @include respond-to('<=pad_v') {
-    top: 48px;
-    height: 54px;
-  }
-
-  .anchor-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    max-width: 920px;
-    margin: 0 auto;
-    height: 68px;
-
-    @include respond-to('<=pad_v') {
-      height: 54px;
-    }
-
-
-    :deep(.o-anchor) {
-      width: 100%;
-
-      .o-anchor-line {
-        display: none;
-      }
-
-      .o-anchor-items {
-        display: flex;
-        max-width: 920px;
-        width: 100%;
-        gap: var(--o-gap-4);
-        background-color: var(--o-color-control3-light);
-        padding: var(--o-gap-1);
-        border-radius: var(--o-radius-xs);
-      }
-
-      .o-anchor-item {
-        flex: 1 1 auto;
-        --anchor-item-link-bg-color-hover: transparent;
-        --anchor-item-link-color-hover: --anchor-item-link-gap: 0;
-        --anchor-item-link-radius: var(--o-radius-xs);
-        --anchor-item-min-width: 60px;
-        --anchor-item-link-gap: 0px;
-
-        .o-anchor-item-link {
-          @include text1;
-          --anchor-item-link-bg-color-active: var(--o-color-control5-light);
-          --anchor-item-link-color-active: var(--o-color-primary1);
-          --anchor-item-link-color-hover: var(--o-color-primary1);
-          --anchor-item-link-color: var(--o-color-info2);
-          --anchor-item-link-padding: 6px 0;
-          font-weight: 500;
-          display: block;
-          text-align: center;
-        }
-      }
-    }
-  }
-}
-
-.anchor-transparent {
-  position: fixed;
-  top: 0;
-  height: 48px;
-  backdrop-filter: blur(10px);
-  z-index: 10;
-  background-color: rgba($color: var(--o-mixedgray-1), $alpha: 0.25);
-  @include text1;
-
-  @include respond-to('<=pad_v') {
-    display: none;
-  }
-
-  .anchor-container {
-    display: flex;
-    align-items: center;
-    height: 48px;
-
-    :deep(.o-anchor) {
-      .o-anchor-line {
-        display: none;
-      }
-
-      .o-anchor-items {
-        display: flex;
-        flex-wrap: wrap;
-      }
-
-      .o-anchor-item {
-        --anchor-item-width: auto;
-        --anchor-item-min-width: auto;
-        --anchor-item-link-bg-color-hover: transparent;
-        --anchor-item-link-bg-color-active: transparent;
-        --anchor-item-link-color: var(--o-color-info3);
-        --anchor-item-link-color-active: var(--o-color-info1);
-        --anchor-item-link-color-hover: --anchor-item-link-gap: 0;
-        --anchor-item-link-padding: 0 32px 0 0;
-
-        .o-anchor-item-link {
-          @include hover {
-            &:not(.is-active) {
-              color: var(--o-color-info2);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

package/src/draft/ItemSwiper.vue

@@ -1,133 +0,0 @@
-<script setup lang="ts">
-import { OFigure, OLink } from '@opensig/opendesign';
-import type { PropType } from 'vue';
-
-interface ItemLogoT {
-  logo: {
-    [key: string]: string;
-  };
-  href: string;
-  hrefEn: string;
-}
-
-defineProps({
-  // 轮播数据
-  data: {
-    type: Array as PropType<ItemLogoT[]>,
-    default: () => {
-      [];
-    },
-  },
-  // 反向轮播
-  reverseDirection: {
-    type: Boolean,
-    default: false,
-  },
-  // 语言
-  lang: {
-    type: String as PropType<'zh' | 'en'>,
-    default: 'zh',
-  },
-  // 风格
-  theme: {
-    type: String as PropType<'light' | 'dark'>,
-    default: 'light',
-  },
-  // 指定在何处显示链接的资源
-  target: {
-    type: String as PropType<'_blank' | '_parent' | '_self' | '_top'>,
-    default: '_blank',
-  },
-});
-</script>
-
-<template>
-  <div v-if="data.length > 0" class="swiper">
-    <div class="swiper-list" :class="{ 'swiper-reverse': reverseDirection }">
-      <div v-for="(item, i) in data" :key="i" class="swiper-item">
-        <OLink v-if="item.href || item.hrefEn" :href="lang === 'en' ? item.hrefEn || item.href : item.href" :target="target">
-          <div class="swiper-card">
-            <OFigure :src="item.logo[theme]" />
-          </div>
-        </OLink>
-        <div v-else class="swiper-card">
-          <OFigure :src="item.logo[theme]" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.swiper {
-  display: flex;
-  white-space: nowrap;
-  overflow: hidden;
-  position: relative;
-}
-.swiper-list {
-  display: flex;
-  animation: marque 100s linear infinite;
-  @include respond-to('>phone') {
-    @include hover {
-      animation-play-state: paused;
-    }
-  }
-}
-.swiper-reverse {
-  animation: marquere 100s linear infinite;
-}
-
-.swiper-item {
-  display: flex;
-}
-
-.swiper-card {
-  width: 269px;
-  background-color: var(--o-color-fill2);
-  border-radius: var(--o-radius-xs);
-  margin-right: 24px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  pointer-events: auto;
-}
-.o-figure {
-  width: 100%;
-  border-radius: var(--o-radius-xs);
-  :deep(img) {
-    width: 100%;
-  }
-}
-
-:deep(.o-link) {
-  .o-link-label {
-    display: flex;
-  }
-}
-
-@keyframes marque {
-  0% {
-    transform: translateX(0%);
-  }
-  100% {
-    transform: translateX(-50%);
-  }
-}
-@keyframes marquere {
-  0% {
-    transform: translateX(-50%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-@include respond-to('phone') {
-  .swiper-card {
-    width: 160px;
-    margin-right: 12px;
-  }
-}
-</style>

package/src/draft/Logo.vue

@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import { computed, type PropType } from 'vue';
-import { ORow, OCol, OLink, OFigure } from '@opensig/opendesign';
-
-import ItemSwiper from '@component/ItemSwiper.vue';
-import ContentWrapper from '@component/ContentWrapper.vue';
-
-import { publisher } from '@/data/logo';
-
-interface ItemLogoT {
-  logo: {
-    [key: string]: string;
-  };
-  href: string;
-  hrefEn: string;
-}
-interface ItemSwiperT {
-  children: ItemLogoT[];
-  reverseDirection: boolean;
-}
-
-defineProps({
-  // 语言
-  lang: {
-    type: String as PropType<'zh' | 'en'>,
-    default: 'zh',
-  },
-  // 风格
-  theme: {
-    type: String as PropType<'light' | 'dark'>,
-    default: 'light',
-  },
-  // 指定在何处显示链接的资源
-  target: {
-    type: String as PropType<'_blank' | '_parent' | '_self' | '_top'>,
-    default: '_blank',
-  },
-});
-
-const total = publisher.length;
-
-const list = computed(() => {
-  const row = total > 15 ? 3 : 2;
-  const num = total / row;
-  let arr = [] as ItemSwiperT[];
-  for (let i = 0; i < row; i++) {
-    arr.push({
-      children: [...publisher.slice(i * num, (i + 1) * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' })), ...publisher.slice(i * num, (i + 1) * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' }))],
-      reverseDirection: false,
-    });
-    if (i === row - 1) {
-      arr[i].children = [...publisher.slice(i * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' })), ...publisher.slice(i * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' }))];
-    }
-    if (i % 2 === 1) {
-      arr[i].reverseDirection = true;
-    }
-  }
-  return arr;
-});
-
-const col = computed(() => {
-  let num = 5;
-  if (total < 6) {
-    num = total;
-  } else if (total < 7) {
-    num = 3;
-  } else if (total < 9) {
-    num = 4;
-  }
-  return num;
-});
-</script>
-
-<template>
-  <div class="logo-swiper">
-    <template v-if="total > 10">
-      <ItemSwiper v-for="(item, index) in list" :key="index" :data="item.children"
-        :reverse-direction="item.reverseDirection" :lang="lang" :theme="theme" :target="target"
-        class="partner-swiper" />
-    </template>
-    <template v-else>
-      <ContentWrapper>
-        <ORow gap="24px 24px" wrap="wrap" class="logo-data">
-          <OCol v-for="item in publisher" :key="item.href" :flex="`0 0 ${100 / col}%`">
-            <div class="item-logo">
-              <OLink v-if="item.href || item.hrefEn" :href="lang === 'en' ? item.hrefEn || item.href : item.href"
-                :target="target">
-                <div class="logo-card">
-                  <OFigure :src="item.logo[theme]" />
-                </div>
-              </OLink>
-              <div v-else class="logo-card">
-                <OFigure :src="item.logo[theme]" />
-              </div>
-            </div>
-          </OCol>
-        </ORow>
-      </ContentWrapper>
-    </template>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.logo-swiper {
-  width: 100%;
-  overflow: hidden;
-}
-
-.partner-swiper {
-  &+.partner-swiper {
-    margin-top: 24px;
-
-    @include respond-to('laptop') {
-      margin-top: 20px;
-    }
-
-    @include respond-to('pad_h') {
-      margin-top: 16px;
-    }
-
-    @include respond-to('<=pad_v') {
-      margin-top: 12px;
-    }
-  }
-}
-
-.item-logo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--o-color-fill2);
-  border-radius: var(--o-radius-xs);
-
-  .o-figure {
-    :deep(img) {
-      width: auto;
-      max-height: 90px;
-    }
-  }
-}
-</style>

package/src/draft/LogoCard.vue

@@ -1,75 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { OCard, ORow, OCol, OFigure } from '@opensig/opendesign';
-import { useScreen } from '@/composables/useScreen';
-
-const { lePadV, isPhone } = useScreen();
-
-interface CardT {
-    title: string;
-    content: string;
-    cover: string;
-    time: string;
-}
-
-defineProps({
-    cards: {
-        type: Array as () => CardT[],
-        default: () => [],
-    },
-});
-
-const columns = computed(() => {
-    if (isPhone.value) {
-        return '0 1 100%';
-    } else if (lePadV.value) {
-        return '0 1 50%';
-    }
-    return '0 1 33.3333%';
-});
-
-</script>
-
-<template>
-    <div class="card-wrapper">
-        <ORow gap="var(--grid-column-gutter)">
-            <OCol v-for="(card, index) in cards" :key="index" :flex="columns">
-                <OCard :title="card.title" :detail="card.content" :cover-ratio="16 / 9" :layout="'v'">
-                    <template #cover>
-                        <div class="cover-box">
-                            <OFigure :src="card.cover" alt="Card Cover" class="cover-image" />
-                        </div>
-                    </template>
-                    <template #footer>
-                        <div class="timestamp">
-                            <span class="time">{{ card.time }}</span>
-                        </div>
-                    </template>
-                </OCard>
-            </OCol>
-        </ORow>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.card-wrapper {
-    --grid-column-gutter: var(--o3-gap-6);
-    --card-detail-max-row: 2
-}
-
-.cover-box {
-    height: 100px;
-
-    :deep(.cover-image) {
-        height: 100%;
-    }
-
-    @include respond-to('<=pad_v') {
-        height: 72px;
-    }
-
-    @include respond-to('phone') {
-        height: 68px;
-    }
-}
-</style>

package/src/draft/LogoV2.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import {} from '@opensig/opendesign';
-
-interface companyT {
-  href: string;
-  hrefEn: string;
-  logo: {
-    dark: string;
-    light: string;
-  };
-}
-defineProps<{
-  logos?: companyT[];
-}>();
-</script>
-<template>
-  <div>logo</div>
-</template>
-<style lang="scss" scoped></style>

package/src/draft/MainCard.vue

@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue';
-import type { LinkCardItemT } from './OInfoCard.vue';
-import OInfoCard from './OInfoCard.vue';
-
-defineProps({
-  cards: {
-    type: Array as PropType<LinkCardItemT[]>,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div class="card-list">
-    <OInfoCard v-for="(card, index) in cards" :key="index" :item="card" class="card-item"></OInfoCard>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.card-list {
-  display: grid;
-  grid-template-columns: 3.95fr 6.05fr;
-  gap: var(--o3-gap-6);
-
-  .card-item {
-    &:first-child {
-      grid-row-start: 1;
-      grid-row-end: 3;
-
-      :deep(.o-card-main) {
-        display: flex;
-        justify-content: end;
-      }
-    }
-  }
-}
-</style>

package/src/draft/MultiCard.vue

@@ -1,95 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { OCard, OButton, OScroller } from '@opensig/opendesign';
-import { useScreen } from '@/composables/useScreen';
-
-const { lePadV } = useScreen();
-
-interface CardT {
-    title: string;
-    content: string;
-    cover: string;
-    buttons?: { text: string; href?: string }[];
-}
-
-const props = defineProps({
-    cards: {
-        type: Array as () => CardT[],
-        default: () => [],
-    },
-});
-
-const cardCount = computed(() => props.cards.length);
-const cardWidth = computed(() => {
-    if (lePadV.value) {
-        if (cardCount.value <= 2) {
-            return `calc((100% - var(--card-gap) * 1) / 2)`;
-        }
-        return `calc((100% - var(--card-gap) * 2) / 3)`;
-    } else {
-        if (cardCount.value <= 4) {
-            return `calc((100% - var(--card-gap) * ${cardCount.value - 1}) / ${cardCount.value})`;
-        }
-        return `calc((100% - var(--card-gap) * 3) / 4)`;
-    }
-
-});
-const coverRatio = computed(() => {
-    return cardCount.value === 2 ? 3 : 16 / 9;
-});
-</script>
-
-<template>
-    <div class="multi-card-wrapper">
-        <OScroller class="pane" size="small" :show-type="lePadV ? 'never' : 'always'" disabled-y>
-            <template v-for="card in cards" :key="card.title">
-                <OCard :title="card.title" :detail="card.content" :cover="card.cover"
-                    :cover-ratio="lePadV ? undefined : coverRatio" :layout="'v'" class="multi-card-item"
-                    :style="{ width: cardWidth }">
-                    <template #footer>
-                        <div class="buttons">
-                            <OButton v-for="(button, btnIndex) in card.buttons" :key="btnIndex" :href="button.href"
-                                color="primary" round="pill" variant="outline" class="button">{{ button.text }}
-                            </OButton>
-                        </div>
-                    </template>
-                </OCard>
-            </template>
-        </OScroller>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.multi-card-wrapper {
-    width: 100%;
-    --card-gap: var(--o3-gap-5);
-}
-
-.pane {
-    white-space: nowrap;
-
-    :deep(.o-scrollbar) {
-        --scrollbar-x-bottom: calc(-1 * var(--o3-gap-5) - 4px)
-    }
-}
-
-.multi-card-item {
-    display: inline-flex;
-    margin-right: var(--card-gap);
-
-    &:last-child {
-        margin-right: 0;
-    }
-
-    @include respond-to('<=pad_v') {
-        :deep(.o-card-cover-img) {
-            height: 120px;
-        }
-    }
-}
-
-.buttons {
-    display: flex;
-    gap: 8px;
-}
-</style>