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

package/src/draft/MultiCard.vue

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

package/src/draft/MultiIconCard.vue

@@ -1,74 +1,74 @@
-<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-to("phone") {
-    --card-header-text-size: 16px;
-    --card-header-text-height: 24px;
-    --card-content-text-size: 14px;
-    --card-content-text-height: 22px;
-  }
-}
+<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-to("phone") {
+    --card-header-text-size: 16px;
+    --card-header-text-height: 24px;
+    --card-content-text-size: 14px;
+    --card-content-text-height: 22px;
+  }
+}
 </style>