@opendesign-plus/components 0.0.1-rc.2 → 0.0.1-rc.21

package/src/draft/Section.vue

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