@opendesign-plus/components 0.0.1-rc.16

package/src/components/OThemeSwitcher.vue

@@ -0,0 +1,108 @@
+<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/AppAvatar.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, type PropType } from 'vue';
+
+const props = defineProps({
+  // 头像
+  avatar: {
+    type: String,
+    default: '',
+  },
+  // 用户名
+  name: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  // mini： 16 small： 24， medium： 40， large： 64
+  size: {
+    type: String as PropType<'mini' | 'small' | 'medium' | 'large'>,
+    default: 'medium',
+  },
+  // 大小尺寸自定义，单位px
+  customSize: {
+    type: Number,
+    default: 0,
+  },
+  // round--圆形 square--方形
+  variant: {
+    type: String as PropType<'round' | 'square'>,
+    default: 'round',
+  },
+});
+
+const bgColorArr = ['#058EF0', '#FA7305', '#03B5A5'];
+
+const avatarText = computed(() => props.name?.charAt(0).toUpperCase());
+const getAvatarStyle = computed(() => {
+  const avatarStyle = {
+    'background-color': '',
+    width: '32px',
+    height: '32px',
+    'font-size': '20px',
+  };
+  avatarStyle['background-color'] = props.name ? bgColorArr[props.name?.length % bgColorArr.length] : 'transparent';
+  let sizeNum = 0;
+  if (props.customSize) {
+    sizeNum = Number(props.customSize);
+  } else {
+    const sizeToNum = {
+      mini: 16,
+      small: 24,
+      medium: 40,
+      large: 64,
+    };
+    sizeNum = sizeToNum[props.size];
+  }
+  avatarStyle.height = `${sizeNum}px`;
+  avatarStyle.width = `${sizeNum}px`;
+  avatarStyle['font-size'] = `${sizeNum / 2}px`;
+  return avatarStyle;
+});
+</script>
+
+<template>
+  <img v-if="avatar && !avatar.includes('gitcode')" :src="avatar" class="img-avatar" :class="variant" :style="getAvatarStyle" alt="" />
+  <div v-else class="word-avatar" :class="variant" :style="getAvatarStyle">
+    {{ avatarText }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.img-avatar {
+  background-color: transparent !important;
+}
+.word-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--o-color-info1-inverse);
+}
+.round {
+  border-radius: 50%;
+}
+</style>

package/src/components/common/ClientOnlyWrapper.ts

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

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