@opendesign-plus/components 0.0.1-rc.35 → 0.0.1-rc.36

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('>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('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('laptop') {
-      margin-top: 20px;
-    }
-
-    @include respond('pad_h') {
-      margin-top: 16px;
-    }
-
-    @include respond('<=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('<=pad_v') {
-        height: 72px;
-    }
-
-  @include respond('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('<=pad_v') {
-        :deep(.o-card-cover-img) {
-            height: 120px;
-        }
-    }
-}
-
-.buttons {
-    display: flex;
-    gap: 8px;
-}
-</style>

package/src/draft/MultiIconCard.vue

@@ -1,74 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { OCard, type CardPropsT } from '@opensig/opendesign';
-import { useScreen } from '@/composables/useScreen.ts';
-
-const { isPadV, isPhone } = useScreen();
-
-export type IconCardT = Pick<CardPropsT, 'title' | 'detail' | 'icon'>;
-
-const props = withDefaults(defineProps<{
-  /*卡片各自的配置*/
-  cards: IconCardT[];
-  /*布局*/
-  layout?: CardPropsT['layout'];
-  /*所有卡片的配置，优先级低于cards*/
-  cardProps?: Omit<CardPropsT, 'layout'>;
-}>(), {
-  layout: 'v',
-});
-
-const gridTemplateColumns = computed(() => {
-  if (isPhone.value) {
-    return '1fr';
-  }
-  if (isPadV.value) {
-    switch (props.cards.length) {
-      case 1:
-        return '1fr';
-      default:
-        return '1fr 1fr';
-    }
-  }
-  switch (props.cards.length) {
-    case 1:
-      return '1fr';
-    case 2:
-      return '1fr 1fr';
-    default:
-      return '1fr 1fr 1fr';
-  }
-});
-</script>
-
-<template>
-  <div v-if="props.cards?.length" class="multi-card-wrapper">
-    <OCard
-      v-for="(card, index) in cards"
-      :key="index"
-      class="multi-icon-card-item"
-      v-bind="{
-        ...props.cardProps,
-        layout: props.layout,
-        ...card
-      }"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.multi-card-wrapper {
-  display: grid;
-  gap: var(--o3-gap-5) var(--o3-gap-6);
-  grid-template-columns: v-bind(gridTemplateColumns);
-}
-.o-card {
-  --card-content-color: var(--o-color-info3);
-  @include respond("phone") {
-    --card-header-text-size: 16px;
-    --card-header-text-height: 24px;
-    --card-content-text-size: 14px;
-    --card-content-text-height: 22px;
-  }
-}
-</style>