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

package/src/draft/HorizontalAnchor.vue

@@ -1,165 +1,165 @@
-<script lang="ts" setup>
-import { ref, type PropType } from 'vue';
-
-import { useIntersectionObserver } from '@vueuse/core';
-
-import { OAnchor, OAnchorItem } from '@opensig/opendesign';
-import ContentWrapper from './ContentWrapper.vue';
-
-const target = ref(null);
-const showAnchor = ref(false);
-defineProps({
-  anchorData: {
-    type: Object,
-    required: true,
-    default: () => null,
-  },
-  wrapClass: {
-    type: [String, Array] as PropType<string | any[]>,
-    default: undefined,
-  },
-  transparent: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-useIntersectionObserver(target, ([entry]) => {
-  showAnchor.value = !entry?.isIntersecting;
-});
-</script>
-<template>
-  <div v-show="showAnchor" :class="[transparent ? 'anchor-transparent' : 'anchor-header', wrapClass]">
-    <ContentWrapper :style="{
-      '--content-wrapper-vertical-paddingTop': '0',
-      '--content-wrapper-vertical-paddingBottom': '0',
-    }">
-      <div class="anchor-container">
-        <OAnchor container="#app > .o-scroller > .o-scroller-container" :targetOffset="160">
-          <OAnchorItem v-for="anchor in anchorData" :key="anchor.id" :title="anchor.title" :href="`#${anchor.id}`">
-          </OAnchorItem>
-        </OAnchor>
-      </div>
-    </ContentWrapper>
-  </div>
-  <div ref="target"></div>
-</template>
-
-<style lang="scss" scoped>
-.anchor-header {
-  position: fixed;
-  top: 0;
-  height: 68px;
-  z-index: 10;
-  background-color: var(--o-color-control2-light);
-  @include text1;
-
-  @include respond-to('<=pad_v') {
-    top: 48px;
-    height: 54px;
-  }
-
-  .anchor-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    max-width: 920px;
-    margin: 0 auto;
-    height: 68px;
-
-    @include respond-to('<=pad_v') {
-      height: 54px;
-    }
-
-
-    :deep(.o-anchor) {
-      width: 100%;
-
-      .o-anchor-line {
-        display: none;
-      }
-
-      .o-anchor-items {
-        display: flex;
-        max-width: 920px;
-        width: 100%;
-        gap: var(--o-gap-4);
-        background-color: var(--o-color-control3-light);
-        padding: var(--o-gap-1);
-        border-radius: var(--o-radius-xs);
-      }
-
-      .o-anchor-item {
-        flex: 1 1 auto;
-        --anchor-item-link-bg-color-hover: transparent;
-        --anchor-item-link-color-hover: --anchor-item-link-gap: 0;
-        --anchor-item-link-radius: var(--o-radius-xs);
-        --anchor-item-min-width: 60px;
-        --anchor-item-link-gap: 0px;
-
-        .o-anchor-item-link {
-          @include text1;
-          --anchor-item-link-bg-color-active: var(--o-color-control5-light);
-          --anchor-item-link-color-active: var(--o-color-primary1);
-          --anchor-item-link-color-hover: var(--o-color-primary1);
-          --anchor-item-link-color: var(--o-color-info2);
-          --anchor-item-link-padding: 6px 0;
-          font-weight: 500;
-          display: block;
-          text-align: center;
-        }
-      }
-    }
-  }
-}
-
-.anchor-transparent {
-  position: fixed;
-  top: 0;
-  height: 48px;
-  backdrop-filter: blur(10px);
-  z-index: 10;
-  background-color: rgba($color: var(--o-mixedgray-1), $alpha: 0.25);
-  @include text1;
-
-  @include respond-to('<=pad_v') {
-    display: none;
-  }
-
-  .anchor-container {
-    display: flex;
-    align-items: center;
-    height: 48px;
-
-    :deep(.o-anchor) {
-      .o-anchor-line {
-        display: none;
-      }
-
-      .o-anchor-items {
-        display: flex;
-        flex-wrap: wrap;
-      }
-
-      .o-anchor-item {
-        --anchor-item-width: auto;
-        --anchor-item-min-width: auto;
-        --anchor-item-link-bg-color-hover: transparent;
-        --anchor-item-link-bg-color-active: transparent;
-        --anchor-item-link-color: var(--o-color-info3);
-        --anchor-item-link-color-active: var(--o-color-info1);
-        --anchor-item-link-color-hover: --anchor-item-link-gap: 0;
-        --anchor-item-link-padding: 0 32px 0 0;
-
-        .o-anchor-item-link {
-          @include hover {
-            &:not(.is-active) {
-              color: var(--o-color-info2);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<script lang="ts" setup>
+import { ref, type PropType } from 'vue';
+
+import { useIntersectionObserver } from '@vueuse/core';
+
+import { OAnchor, OAnchorItem } from '@opensig/opendesign';
+import ContentWrapper from './ContentWrapper.vue';
+
+const target = ref(null);
+const showAnchor = ref(false);
+defineProps({
+  anchorData: {
+    type: Object,
+    required: true,
+    default: () => null,
+  },
+  wrapClass: {
+    type: [String, Array] as PropType<string | any[]>,
+    default: undefined,
+  },
+  transparent: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+useIntersectionObserver(target, ([entry]) => {
+  showAnchor.value = !entry?.isIntersecting;
+});
+</script>
+<template>
+  <div v-show="showAnchor" :class="[transparent ? 'anchor-transparent' : 'anchor-header', wrapClass]">
+    <ContentWrapper :style="{
+      '--content-wrapper-vertical-paddingTop': '0',
+      '--content-wrapper-vertical-paddingBottom': '0',
+    }">
+      <div class="anchor-container">
+        <OAnchor container="#app > .o-scroller > .o-scroller-container" :targetOffset="160">
+          <OAnchorItem v-for="anchor in anchorData" :key="anchor.id" :title="anchor.title" :href="`#${anchor.id}`">
+          </OAnchorItem>
+        </OAnchor>
+      </div>
+    </ContentWrapper>
+  </div>
+  <div ref="target"></div>
+</template>
+
+<style lang="scss" scoped>
+.anchor-header {
+  position: fixed;
+  top: 0;
+  height: 68px;
+  z-index: 10;
+  background-color: var(--o-color-control2-light);
+  @include text1;
+
+  @include respond-to('<=pad_v') {
+    top: 48px;
+    height: 54px;
+  }
+
+  .anchor-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 920px;
+    margin: 0 auto;
+    height: 68px;
+
+    @include respond-to('<=pad_v') {
+      height: 54px;
+    }
+
+
+    :deep(.o-anchor) {
+      width: 100%;
+
+      .o-anchor-line {
+        display: none;
+      }
+
+      .o-anchor-items {
+        display: flex;
+        max-width: 920px;
+        width: 100%;
+        gap: var(--o-gap-4);
+        background-color: var(--o-color-control3-light);
+        padding: var(--o-gap-1);
+        border-radius: var(--o-radius-xs);
+      }
+
+      .o-anchor-item {
+        flex: 1 1 auto;
+        --anchor-item-link-bg-color-hover: transparent;
+        --anchor-item-link-color-hover: --anchor-item-link-gap: 0;
+        --anchor-item-link-radius: var(--o-radius-xs);
+        --anchor-item-min-width: 60px;
+        --anchor-item-link-gap: 0px;
+
+        .o-anchor-item-link {
+          @include text1;
+          --anchor-item-link-bg-color-active: var(--o-color-control5-light);
+          --anchor-item-link-color-active: var(--o-color-primary1);
+          --anchor-item-link-color-hover: var(--o-color-primary1);
+          --anchor-item-link-color: var(--o-color-info2);
+          --anchor-item-link-padding: 6px 0;
+          font-weight: 500;
+          display: block;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+.anchor-transparent {
+  position: fixed;
+  top: 0;
+  height: 48px;
+  backdrop-filter: blur(10px);
+  z-index: 10;
+  background-color: rgba($color: var(--o-mixedgray-1), $alpha: 0.25);
+  @include text1;
+
+  @include respond-to('<=pad_v') {
+    display: none;
+  }
+
+  .anchor-container {
+    display: flex;
+    align-items: center;
+    height: 48px;
+
+    :deep(.o-anchor) {
+      .o-anchor-line {
+        display: none;
+      }
+
+      .o-anchor-items {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .o-anchor-item {
+        --anchor-item-width: auto;
+        --anchor-item-min-width: auto;
+        --anchor-item-link-bg-color-hover: transparent;
+        --anchor-item-link-bg-color-active: transparent;
+        --anchor-item-link-color: var(--o-color-info3);
+        --anchor-item-link-color-active: var(--o-color-info1);
+        --anchor-item-link-color-hover: --anchor-item-link-gap: 0;
+        --anchor-item-link-padding: 0 32px 0 0;
+
+        .o-anchor-item-link {
+          @include hover {
+            &:not(.is-active) {
+              color: var(--o-color-info2);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/draft/ItemSwiper.vue

@@ -1,133 +1,133 @@
-<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-to('>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-to('phone') {
-  .swiper-card {
-    width: 160px;
-    margin-right: 12px;
-  }
-}
-</style>
+<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-to('>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-to('phone') {
+  .swiper-card {
+    width: 160px;
+    margin-right: 12px;
+  }
+}
+</style>