@opendesign-plus/components 0.0.1-rc.4 → 0.0.1-rc.40

package/src/components/OSection.vue

@@ -1,178 +0,0 @@
-<script setup lang="ts">
-import { isArray, OLink, OIcon } from '@opensig/opendesign';
-import IconChevronRight from '~icons/components/icon-chevron-right.svg';
-
-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 {
-  --o-gap-section: var(--o-gap-7);
-  .section-wrapper {
-    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-7);
-  }
-
-  .section-footer {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-    color: var(--o-color-info1);
-
-    display: flex;
-    justify-content: center;
-    @include text1;
-
-    margin-top: 32px;
-
-    :deep(.o-btn) {
-      border-radius: var(--btn-height);
-    }
-
-    @include respond-to('<=laptop') {
-      margin-top: 16px;
-    }
-
-    @include respond-to('phone') {
-      margin-top: 12px;
-    }
-
-    &:hover {
-      .footer-icon {
-        fill: var(--link-color-active);
-      }
-    }
-  }
-
-  .footer-icon {
-    font-size: 16px;
-    height: 24px;
-  }
-}
-</style>

package/src/components/OThemeSwitcher.vue

@@ -1,108 +0,0 @@
-<script lang="ts" setup>
-import { Component, computed } from 'vue';
-import { OIcon, OSwitch } from '@opensig/opendesign';
-import { useScreen } from '@opendesign-plus/composables';
-
-import IconSun from '~icons/components/icon-sun.svg';
-import IconMoon from '~icons/components/icon-moon.svg';
-
-export interface OThemeSwitcherPropsT {
-  theme?: string;
-  type?: 'auto' | 'common' | 'mobile';
-  lightValue?: string;
-  darkValue?: string;
-  lightIcon?: Component;
-  darkIcon?: Component;
-}
-
-export interface OThemeSwitcherEmitsT {
-  (e: 'update:theme', value: string): void;
-  (e: 'change', val: string): void;
-}
-
-const props = withDefaults(defineProps<OThemeSwitcherPropsT>(), {
-  theme: 'light',
-  type: 'auto',
-  lightValue: 'light',
-  darkValue: 'dark',
-  lightIcon: IconSun,
-  darkIcon: IconMoon,
-});
-
-const emit = defineEmits<OThemeSwitcherEmitsT>();
-
-const { gtPhone } = useScreen();
-
-const switchVal = computed({
-  get() {
-    return props.theme;
-  },
-  set(val) {
-    emit('update:theme', val);
-    emit('change', val);
-  },
-});
-
-const isCommon = computed(() => {
-  return props.type === 'common' || (props.type === 'auto' && gtPhone.value);
-});
-
-const toggleTheme = () => {
-  switchVal.value = switchVal.value === props.lightValue ? props.darkValue : props.lightValue;
-};
-</script>
-
-<template>
-  <div class="o-theme-switcher">
-    <div v-if="isCommon" class="o-theme-switcher-common" @click="toggleTheme">
-      <OIcon class="o-theme-icon">
-        <IconMoon v-if="switchVal === lightValue" />
-        <IconSun v-else />
-      </OIcon>
-    </div>
-
-    <div v-else class="o-theme-switcher-mobile">
-      <OSwitch v-model="switchVal" class="o-theme-switch" :checked-value="darkValue" :unchecked-value="lightValue">
-        <template #on>
-          <OIcon class="o-theme-icon">
-            <IconSun />
-          </OIcon>
-        </template>
-        <template #off>
-          <OIcon class="o-theme-icon">
-            <IconMoon />
-          </OIcon>
-        </template>
-      </OSwitch>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.o-theme-switcher-common {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-
-  .o-theme-icon {
-    font-size: 24px;
-    color: var(--o-color-info1);
-
-    @include hover {
-      color: var(--o-color-primary1);
-    }
-  }
-}
-
-.o-theme-switcher-mobile {
-  .o-theme-switch {
-    background-color: var(--o-color-control1-light);
-
-    .o-theme-icon {
-      color: var(--o-color-white);
-    }
-  }
-}
-</style>

package/src/components/common/ClientOnlyWrapper.ts

@@ -1,21 +0,0 @@
-import { defineComponent, onMounted, ref, h, resolveComponent } from 'vue';
-
-const fallback = (slots: any) => {
-  const show = ref(false);
-
-  onMounted(() => {
-    show.value = true;
-  });
-
-  return () => (show.value && slots.default ? slots.default() : null);
-};
-
-export default defineComponent({
-  setup(_, { slots }) {
-    const BuiltIn = resolveComponent('ClientOnly');
-    if (BuiltIn && typeof BuiltIn !== 'string') {
-      return () => h(BuiltIn, null, { default: () => slots.default ? slots.default() : null });
-    }
-    return fallback(slots);
-  },
-});

package/src/components/common/ContentWrapper.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import { isBoolean, isString, isUndefined } from '@opensig/opendesign';
-import { computed } from 'vue';
-
-const DEFAULT = Symbol('default');
-
-interface ContentWrapperPropsT {
-  verticalPadding?: boolean | string | Array<string>;
-}
-
-const props = withDefaults(defineProps<ContentWrapperPropsT>(), {
-  verticalPadding: undefined,
-});
-
-const paddingTop = computed(() => {
-  if (!props.verticalPadding) {
-    return 0;
-  }
-
-  if (isBoolean(props.verticalPadding)) {
-    return DEFAULT;
-  } else if (isString(props.verticalPadding)) {
-    return props.verticalPadding;
-  } else {
-    return props.verticalPadding[0];
-  }
-});
-
-const paddingBottom = computed(() => {
-  if (!props.verticalPadding) {
-    return 0;
-  }
-
-  if (isBoolean(props.verticalPadding)) {
-    return DEFAULT;
-  } else if (isString(props.verticalPadding)) {
-    return props.verticalPadding;
-  } else {
-    return !isUndefined(props.verticalPadding[1]) ? props.verticalPadding[1] : props.verticalPadding[0];
-  }
-});
-</script>
-
-<template>
-  <div
-    class="content-wrapper"
-    :style="{
-      '--content-wrapper-vertical-paddingTop': paddingTop === DEFAULT ? undefined : paddingTop,
-      '--content-wrapper-vertical-paddingBottom': paddingBottom === DEFAULT ? undefined : paddingBottom,
-    }"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.content-wrapper {
-  --layout-content-max-width: 1544px;
-  --layout-content-padding: 64px;
-  --layout-header-height: 80px;
-
-  @include respond-to('<=laptop') {
-    --layout-content-max-width: 100%;
-    --layout-content-padding: 40px;
-  }
-
-  @include respond-to('<=pad') {
-    --layout-content-padding: 32px;
-  }
-
-  @include respond-to('phone') {
-    --layout-content-padding: 24px;
-  }
-
-  max-width: var(--layout-content-max-width);
-  padding-left: var(--layout-content-padding);
-  padding-right: var(--layout-content-padding);
-  margin: 0 auto;
-
-  --content-wrapper-vertical-paddingTop: 72px;
-  --content-wrapper-vertical-paddingBottom: 72px;
-  padding-top: var(--content-wrapper-vertical-paddingTop);
-  padding-bottom: var(--content-wrapper-vertical-paddingBottom);
-}
-</style>

package/src/draft/Banner.vue

@@ -1,265 +0,0 @@
-<script setup lang="ts">
-import { onMounted, type PropType } from 'vue';
-import { OButton } from '@opensig/opendesign';
-
-import AOS from 'aos';
-
-import ContentWrapper from './ContentWrapper.vue';
-
-defineProps({
-  backgroundImage: {
-    type: String,
-    default: '',
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-  href: {
-    type: String,
-    default: '',
-  },
-  text: {
-    type: String,
-    default: '',
-  },
-  // 风格
-  theme: {
-    type: String as PropType<'light' | 'dark'>,
-    default: 'light',
-  },
-  // 指定在何处显示链接的资源
-  target: {
-    type: String,
-    default: '_blank',
-  },
-  size: {
-    type: String as PropType<'small' | 'medium' | 'large'>,
-    default: 'medium',
-  },
-});
-
-onMounted(() => {
-  AOS.init({
-    duration: 800,
-  });
-});
-</script>
-
-<template>
-  <div class="banner-content" :class="`banner-${size}`">
-    <div class="banner-bg" :style="{ backgroundImage: `url(${backgroundImage})` }"></div>
-    <ContentWrapper class="banner-text">
-      <div class="banner-text-content">
-        <p v-if="title" class="banner-title" data-aos="fade-up">{{ title }}</p>
-        <p v-if="subtitle" class="banner-subtitle" data-aos="fade-up">
-          {{ subtitle }}
-        </p>
-        <OButton v-if="href" variant="outline" color="primary" size="medium" :href="href" :target="target"
-          class="learn-btn">
-          <span>{{ text }}</span>
-        </OButton>
-      </div>
-    </ContentWrapper>
-  </div>
-</template>
-
-<style lang="scss">
-.banner-content {
-  width: 100%;
-  position: relative;
-}
-
-.banner-bg {
-  height: 100%;
-  margin: 0 auto;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
-.banner-text {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.banner-text-content {
-  height: 100%;
-}
-
-.learn-btn {
-  margin-top: 24px;
-}
-
-.banner-small {
-  height: 280px;
-
-  .banner-title {
-    color: var(--o-color-info1);
-    font-weight: 500;
-    padding-top: 48px;
-    @include display2;
-  }
-
-  .banner-subtitle {
-    color: var(--o-color-info1);
-    margin-top: 8px;
-    width: 60%;
-    @include text2;
-  }
-
-  @media (min-width: 1201px) and (max-width: 1680px) {
-    height: 220px;
-
-    .banner-title {
-      padding-top: 40px;
-      @include display3;
-    }
-
-    .banner-subtitle {
-      @include text1;
-    }
-  }
-
-  @include respond-to('pad_h') {
-    height: 180px;
-
-    .banner-title {
-      padding-top: 32px;
-      @include h1;
-    }
-
-    .banner-subtitle {
-      @include tip1;
-    }
-  }
-
-  @include respond-to('<=pad_v') {
-    display: none;
-  }
-}
-
-.banner-medium {
-  height: 360px;
-
-  .banner-title {
-    color: var(--o-color-info1);
-    font-weight: 500;
-    padding-top: 88px;
-    @include display2;
-  }
-
-  .banner-subtitle {
-    color: var(--o-color-info1);
-    margin-top: 8px;
-    width: 60%;
-    @include text2;
-  }
-
-  @media (min-width: 1201px) and (max-width: 1680px) {
-    height: 280px;
-
-    .banner-title {
-      padding-top: 64px;
-      @include display3;
-    }
-
-    .banner-subtitle {
-      @include text1;
-    }
-  }
-
-  @include respond-to('pad_h') {
-    height: 220px;
-
-    .banner-title {
-      padding-top: 48px;
-      @include h1;
-    }
-
-    .banner-subtitle {
-      @include tip1;
-    }
-  }
-
-  @include respond-to('<=pad_v') {
-    height: 120px;
-
-    .banner-title {
-      text-align: center;
-      padding-top: 48px;
-      @include h3;
-    }
-
-    .banner-subtitle {
-      display: none;
-    }
-  }
-}
-
-.banner-large {
-  height: 460px;
-
-  .banner-title {
-    color: var(--o-color-info1);
-    font-weight: 500;
-    padding-top: 124px;
-    @include display1;
-  }
-
-  .banner-subtitle {
-    color: var(--o-color-info1);
-    margin-top: 8px;
-    width: 60%;
-    @include h4;
-  }
-
-  @media (min-width: 1201px) and (max-width: 1680px) {
-    height: 400px;
-
-    .banner-title {
-      padding-top: 100px;
-      @include display2;
-    }
-
-    .banner-subtitle {
-      @include text2;
-    }
-  }
-
-  @include respond-to('pad_h') {
-    height: 320px;
-
-    .banner-title {
-      padding-top: 80px;
-      @include display3;
-    }
-
-    .banner-subtitle {
-      @include text1;
-    }
-  }
-
-  @include respond-to('<=pad_v') {
-    height: 184px;
-
-    .banner-title {
-      text-align: center;
-      padding-top: 48px;
-      @include h3;
-    }
-
-    .banner-subtitle {
-      text-align: center;
-      @include tip2;
-    }
-  }
-}
-</style>