@opendesign-plus/components 0.0.1-rc.10

package/src/draft/OInfoCard.vue

@@ -0,0 +1,176 @@
+<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

@@ -0,0 +1,81 @@
+<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

@@ -0,0 +1,167 @@
+<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

@@ -0,0 +1,85 @@
+<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

@@ -0,0 +1,110 @@
+<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

@@ -0,0 +1,16 @@
+/// <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;
+}