@opendesign-plus/components 0.0.1-rc.10 → 0.0.1-rc.101

package/src/draft/OInfoCard.vue

@@ -1,176 +0,0 @@
-<script lang="ts" setup>
-import { OCard, OLink } from '@opensig/opendesign';
-import { useScreen } from '@/composables/useScreen';
-import { ref, watch, type Component } from 'vue';
-
-const { lePadV } = useScreen();
-
-interface LinkT {
-  title: string;
-  target?: '_blank' | '_self';
-  href?: string;
-}
-
-interface BgImgT {
-  pcImg: string;
-  padImg: string;
-  mbImg: string;
-}
-
-export interface LinkCardItemT {
-  icon: Component;
-  title: string;
-  desc: string;
-  links: LinkT[];
-  linkLayout?: 'block' | 'inline';
-  bgImg?: BgImgT;
-  bgPosition?: string;
-}
-
-const props = defineProps<{
-  item: LinkCardItemT;
-}>();
-
-const links = ref<LinkT[]>([]);
-watch(
-  () => props.item,
-  () => {
-    links.value = props.item.links;
-  },
-  { immediate: true }
-);
-</script>
-
-<template>
-  <OCard
-    :href="lePadV && links.length === 1 && links[0].href ? links[0].href : undefined"
-    class="info-card"
-    :style="[{ backgroundImage: `url(${props.item.bgImg?.pcImg})` }, props.item.bgPosition ? { backgroundPosition: props.item.bgPosition } : {}]"
-  >
-    <template #main>
-      <div class="header">
-        <div class="title">
-          <component :is="item.icon" class="title-icon"></component>
-          <span class="title-text">{{ item.title }}</span>
-        </div>
-        <div class="desc">{{ item.desc }}</div>
-      </div>
-
-      <div v-if="lePadV" class="footer" :class="item.linkLayout ? item.linkLayout : ''">
-        <OLink v-for="(link, index) in links" :key="index" hover-underline class="link-item" :href="link.href" :target="link.target" color="primary">
-          {{ link.title }}
-        </OLink>
-      </div>
-
-      <div v-if="!lePadV && links.length > 1" class="footer" :class="item.linkLayout ? item.linkLayout : ''">
-        <OLink v-for="(link, index) in links" :key="index" hover-underline class="link-item" :href="link.href" :target="link.target" color="primary">
-          {{ link.title }}
-        </OLink>
-      </div>
-    </template>
-  </OCard>
-</template>
-
-<style lang="scss" scoped>
-.info-card {
-  height: 100%;
-  --bg-height: 100%;
-  background-size: 100% auto;
-  background-repeat: no-repeat;
-  position: relative;
-  @include respond-to('<=pad_v') {
-    background-size: auto var(--bg-height);
-    height: auto;
-    &.has-bg-img {
-      :deep(.o-card-main) {
-        padding-top: 48px;
-      }
-    }
-  }
-  --padding-bottom: 0;
-  :deep(.o-card-main) {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    @include respond-to('<=pad_v') {
-      padding-bottom: var(--padding-bottom);
-    }
-  }
-}
-
-.title {
-  @include h1;
-  color: var(--o-color-info1);
-  font-weight: 600;
-  vertical-align: vertical;
-}
-
-.title-icon {
-  line-height: var(--o-icon_size-l);
-  font-size: var(--o-icon_size-l);
-  margin-right: var(--o3-gap-2);
-  position: relative;
-  top: calc((var(--o-icon_size-l) - var(--line-height)) / 2);
-}
-
-.desc {
-  @include text1;
-  color: var(--o-color-info3);
-  margin-top: 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  line-clamp: 2;
-}
-
-.footer {
-  @include text1;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  &.block {
-    flex-direction: column;
-    .link-item {
-      margin-right: 0;
-    }
-  }
-
-  @include respond-to('>pad_v') {
-    :deep(.o-link-main) {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      line-clamp: 1;
-    }
-
-    margin-top: calc(-1 * var(--o3-gap-3) + var(--o3-gap-5));
-
-    .link-item {
-      margin-left: var(var(--o3-gap-7));
-      margin-top: var(--o3-gap-3);
-    }
-    :deep(.o-link) {
-      display: inline-flex;
-      flex-direction: row-reverse;
-      .o-link-prefix {
-        margin-right: 0;
-        margin-left: var(--link-gap);
-      }
-    }
-  }
-
-  @include respond-to('<=pad_v') {
-    border-top: 1px solid #edeff2;
-    margin: 8px -12 px 0 -12px;
-    padding: 0 12px;
-  }
-}
-
-.link-item {
-  --link-icon-size: var(--o-icon_size-m);
-}
-</style>

package/src/draft/Process.vue

@@ -1,81 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import {} from '@opensig/opendesign';
-import arrow from '@/assets/category/process/arrow.png';
-
-interface ProcessItem {
-  title: string;
-  icon?: any;
-}
-
-const props = defineProps<{
-  process: ProcessItem[];
-}>();
-
-const serials = computed(() => props.process.map((_, idx) => String(idx + 1).padStart(2, '0')));
-</script>
-
-<template>
-  <div class="process-list">
-    <template v-for="(item, idx) in props.process" :key="idx">
-      <div class="process-item">
-        <div class="icon">
-          <component :is="item.icon" v-if="item.icon" />
-        </div>
-        <div class="serial">
-          <span class="clip-text">{{ serials[idx] }}</span>
-        </div>
-        <div class="title">{{ item.title }}</div>
-      </div>
-      <img v-if="idx < props.process.length - 1" :src="arrow" alt="arrow" class="process-arrow" />
-    </template>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.process-list {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-.process-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 80px;
-  flex: 1 1 0;
-}
-.process-arrow {
-  width: 44px;
-  height: 6px;
-  margin: 0 1rem;
-  flex-shrink: 0;
-}
-.icon {
-  font-size: 48px;
-  margin-bottom: 0.5rem;
-}
-.serial {
-  margin-bottom: 0.5rem;
-  .clip-text {
-    font-size: 48px;
-    font-weight: bold;
-    clip-path: polygon(0 0, 100% 0, 100% 54%, 0 54%);
-    -webkit-clip-path: polygon(0 0, 100% 0, 100% 54%, 0 54%);
-    color: var(--o-color-info3);
-    opacity: 0.4;
-    line-height: 1;
-    display: inline-block;
-  }
-}
-.title {
-  @include text1;
-  font-weight: 600;
-  margin-top: 0.5rem;
-  text-align: center;
-  position: relative;
-  top: -20px;
-}
-</style>

package/src/draft/Section.vue

@@ -1,167 +0,0 @@
-<script setup lang="ts">
-import { isArray, OLink } from '@opensig/opendesign';
-
-interface SectionPropsT {
-  title?: string | Array<string>;
-  subtitle?: string;
-  full?: boolean;
-  headerJustifyCenter?: boolean;
-  footer?: string;
-  footerHref?: string;
-}
-
-const props = withDefaults(defineProps<SectionPropsT>(), {
-  title: undefined,
-  subtitle: undefined,
-  full: false,
-  headerJustifyCenter: true,
-  footer: undefined,
-  footerHref: undefined,
-});
-</script>
-
-<template>
-  <div class="app-section" :class="{ 'is-full': props.full }">
-    <div class="section-wrapper">
-      <slot name="main">
-        <!-- header -->
-        <div v-if="$slots.header || props.title || props.subtitle" class="section-header"
-          :class="{ 'is-left': !props.headerJustifyCenter }">
-          <slot name="header">
-            <template v-if="isArray(props.title)">
-              <h2 v-for="item in props.title" :key="item" class="section-title">
-                {{ item }}
-              </h2>
-            </template>
-            <h2 v-else-if="$slots.title || props.title" class="section-title">
-              <slot name="title">
-                {{ props.title }}
-              </slot>
-            </h2>
-            <p v-if="$slots.subtitle || props.subtitle" class="section-subtitle">
-              <slot name="subtitle">
-                {{ props.subtitle }}
-              </slot>
-            </p>
-          </slot>
-        </div>
-
-        <!-- body -->
-        <div v-if="$slots.default" class="section-body">
-          <slot></slot>
-        </div>
-
-        <!-- footer -->
-        <div v-if="$slots.footer || props.footer" class="section-footer">
-          <slot name="footer">
-            <OLink :href="props.footerHref" target="_blank">
-              {{ props.footer }}
-              <template #suffix>
-                <!-- <OIcon class="footer-icon"><IconChevronRight /> </OIcon> -->
-              </template>
-            </OLink>
-          </slot>
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.app-section {
-  .section-wrapper {
-    max-width: 1416px;
-    margin: var(--o-gap-section) auto 0;
-  }
-
-  &.is-full {
-    .section-body {
-      max-width: 100%;
-      width: 100%;
-      padding: 0;
-    }
-  }
-
-  &:last-child {
-    .section-wrapper {
-      padding-bottom: var(--o-gap-section);
-    }
-  }
-
-  .section-header {
-    &.is-left {
-
-      .section-title,
-      .section-subtitle {
-        justify-content: start;
-      }
-    }
-  }
-
-  .section-title {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-
-    display: flex;
-    justify-content: center;
-    color: var(--o-color-info1);
-    text-align: center;
-    @include display3;
-    font-weight: 500;
-  }
-
-  .section-subtitle {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-
-    display: flex;
-    justify-content: center;
-    margin-top: 12px;
-    color: var(--o-color-info2);
-    @include text1;
-
-    @include respond-to('pad-laptop') {
-      margin-top: 8px;
-    }
-
-    @include respond-to('phone') {
-      margin-top: 12px;
-      text-align: center;
-    }
-  }
-
-  .section-body {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-
-    margin-top: var(--o-gap-t2c);
-  }
-
-  .section-footer {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-
-    display: flex;
-    justify-content: center;
-    @include text1;
-
-    margin-top: 32px;
-
-    @include respond-to('<=laptop') {
-      margin-top: 16px;
-    }
-
-    @include respond-to('phone') {
-      margin-top: 12px;
-    }
-  }
-
-  .footer-icon {
-    font-size: 16px;
-  }
-}
-</style>

package/src/draft/SingleTabCard.vue

@@ -1,85 +0,0 @@
-<script lang="ts" setup>
-import { type PropType } from 'vue';
-import { OButton, OCard, OTab, OTabPane } from '@opensig/opendesign';
-import { useScreen } from '@/composables/useScreen';
-
-const { lePadV } = useScreen();
-
-interface ButtonT {
-    text: string;
-    href?: string;
-}
-
-interface CardT {
-    title: string;
-    content: string;
-    cover?: string;
-    buttons?: ButtonT[];
-}
-
-interface TabListT {
-    title: string;
-    card: CardT;
-}
-
-defineProps({
-    tabs: {
-        type: Array as PropType<TabListT[]>,
-        default: () => [],
-    },
-});
-</script>
-<template>
-    <div class="wrapper">
-        <template v-if="tabs.length === 1">
-            <OCard :title="tabs[0].card.title" :detail="tabs[0].card.content" :cover="tabs[0].card.cover"
-                :layout="lePadV ? 'v' : 'hr'" :cover-ratio="lePadV ? undefined : 16 / 9" class="single-card">
-                <template #footer>
-                    <div class="buttons">
-                        <OButton v-for="(button, index) in tabs[0].card.buttons" :key="index" :href="button.href"
-                            color="primary" round="pill" variant="outline" class="button">{{ button.text }}
-                        </OButton>
-                    </div>
-                </template>
-            </OCard>
-        </template>
-        <template v-else>
-            <OTab :line="false" class="section-tab">
-                <OTabPane v-for="(tab, index) in tabs" :key="index" :label="tab.title" :value="tab.title"
-                    class="tab-pane">
-                    <OCard :title="tab.card.title" :detail="tab.card.content" :cover="tab.card.cover"
-                        :layout="lePadV ? 'v' : 'hr'" :cover-ratio="lePadV ? undefined : 16 / 9" class="single-card">
-                        <template #footer>
-                            <div class="buttons">
-                                <OButton v-for="(button, index) in tab.card.buttons" :key="index" :href="button.href"
-                                    color="primary" round="pill" variant="outline" class="button">{{ button.text }}
-                                </OButton>
-                            </div>
-                        </template>
-                    </OCard>
-                </OTabPane>
-            </OTab>
-        </template>
-
-    </div>
-</template>
-<style lang="scss" scoped>
-.section-tab {
-    :deep(.o-tab-pane) {
-        padding-top: var(--o3-gap-5);
-    }
-}
-
-.buttons {
-    display: flex;
-    gap: var(--o3-gap-4);
-}
-
-.single-card {
-    @include respond-to('<=pad_v') {
-        :deep(.o-figure-img) {
-            height: 184px;
-        }
-    }
-}
-</style>

package/src/draft/SliderCard.vue

@@ -1,110 +0,0 @@
-<script lang="ts" setup>
-import { OCarousel, OCarouselItem, OFigure, OLink } from '@opensig/opendesign';
-import { useScreen } from '@/composables/useScreen';
-
-const { lePadV } = useScreen();
-
-interface CardT {
-  title: string;
-  content: string;
-  cover: string;
-  href: string;
-}
-
-const props = defineProps({
-  cards: {
-    type: Array as () => CardT[],
-    default: () => [],
-  },
-});
-</script>
-
-<template>
-  <div class="wrapper">
-    <OCarousel v-if="!lePadV" class="slider-card" indicator-click :loop="true" effect="toggle">
-      <OCarouselItem v-for="(card, index) in props.cards" :key="index" class="slider-card-item">
-        <OFigure :src="card.cover" :alt="card.title" class="slider-card-cover">
-          <div class="card-content">
-            <div class="card-title">{{ card.title }}</div>
-            <div class="card-description">{{ card.content }}</div>
-            <OLink v-if="card.href" :href="card.href" class="card-link"> 了解更多 </OLink>
-          </div>
-        </OFigure>
-      </OCarouselItem>
-    </OCarousel>
-    <OCarousel v-else class="slider-card" indicator-click :loop="true" effect="toggle">
-      <OCarouselItem v-for="(card, index) in props.cards" :key="index" class="slider-card-item">
-        <OFigure :src="card.cover" :alt="card.title" class="slider-card-cover">
-          <div class="card-content">
-            <div class="card-title">{{ card.title }}</div>
-            <div class="card-description">{{ card.content }}</div>
-            <OLink v-if="card.href" :href="card.href" class="card-link"> 了解更多 </OLink>
-          </div>
-        </OFigure>
-      </OCarouselItem>
-    </OCarousel>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.slider-card {
-  --slide-width: calc(70vw - 36px);
-  --slide-gap: 16px;
-  --carousel-indicator-offset: -32px;
-  height: 360px;
-  width: 100%;
-  overflow: visible;
-  :deep(.the-slider-container) {
-    height: 100%;
-    overflow: hidden;
-  }
-  :deep(.o-carousel-indicator-bar) {
-    width: 100%;
-    &::after {
-      border-radius: 6px;
-    }
-    &::before {
-      border-radius: 6px;
-    }
-  }
-  @include respond-to('pc_s') {
-    height: 300px;
-  }
-  @include respond-to('<=laptop') {
-    height: 280px;
-  }
-  @include respond-to('<=pad_v') {
-    --slide-width: calc(100vw - 64px);
-    width: calc(var(--slide-gap) + var(--slide-width));
-    height: 184px;
-  }
-}
-
-.slider-card-item {
-  height: 100%;
-}
-
-.slider-card-cover {
-  width: 100%;
-  height: 100%;
-}
-
-.card-content {
-  padding: 0 96px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
-}
-
-.card-title {
-  @include h1;
-  font-weight: 600;
-  color: var(--o-color-info1);
-}
-
-.card-description {
-  margin-top: var(--o3-gap-3);
-  margin-bottom: var(--o3-gap-7);
-}
-</style>

package/src/env.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.svg' {
-  const src: string;
-  export default src;
-}