@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

package/src/components/banner/index.ts

@@ -1,18 +0,0 @@
-import _OBanner from './OBanner.vue';
-import _OBannerContent from './OBannerContent.vue';
-import type { App } from 'vue';
-
-
-const OBanner = Object.assign(_OBanner, {
-  install(app: App) {
-    app.component('OBanner', _OBanner);
-  },
-});
-const OBannerContent = Object.assign(_OBannerContent, {
-  install(app: App) {
-    app.component('OBannerContent', _OBannerContent);
-  },
-});
-
-export { OBanner, OBannerContent };
-export * from './types';

package/src/components/banner/types.ts

@@ -1,39 +0,0 @@
-// Banner 项的类型定义
-export interface BannerItem {
-  title?: string;
-  subtitle?: string;
-  bg: string;
-  text_theme?: 'light' | 'dark';
-  bg_text?: string;
-  pc_text_width?: string;
-  pc_text_height?: string;
-  pad_text_width?: string;
-  pad_text_height?: string;
-  attach?: string;
-  href?: string;
-  btn?: string;
-  withStickyBg?: boolean;
-  pad_offset?: string;
-}
-
-// BannerContent 组件的 Props 类型
-export interface BannerContentProps {
-  info: BannerItem;
-  size?: 'large' | 'medium' | 'small' | 'tiny';
-  contentJustifyCenter?: boolean;
-  isPhone?: boolean;
-  isLight?: boolean;
-}
-
-// Emits 事件类型
-export interface HomeBannerEmits {
-  (e: 'before-change', index: number): void;
-  (e: 'click', href: string | undefined): void;
-}
-
-export interface BannerContentEmits {
-  (e: 'click', href: string | undefined): void;
-}
-
-// 组件尺寸类型
-export type ComponentSize = 'large' | 'medium' | 'small' | 'tiny';

package/src/components/common/AppAvatar.vue

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

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-
-const isClient = ref(false);
-
-onMounted(() => {
-  isClient.value = true;
-});
-</script>
-
-<template>
-  <slot v-if="isClient" />
-</template>

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('<=laptop') {
-    --layout-content-max-width: 100%;
-    --layout-content-padding: 40px;
-  }
-
-  @include respond('<=pad') {
-    --layout-content-padding: 32px;
-  }
-
-  @include respond('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/components/common/MoreText.vue

@@ -1,124 +0,0 @@
-<script setup lang="ts">
-import { OIcon, OIconChevronDown, OIconChevronUp } from '@opensig/opendesign';
-import { nextTick, onMounted, ref, watch } from 'vue';
-import { useI18n } from '@/i18n';
-
-const props = withDefaults(
-  defineProps<{
-    text?: string;
-    link?: boolean;
-    lines?: number;
-    show: boolean;
-  }>(),
-  {
-    text: '',
-    link: false,
-    lines: 3,
-    show: false,
-  },
-);
-
-const { t } = useI18n();
-
-const expanded = ref(false); // 是否展开
-const showBtn = ref(false); // 受否显示展开按钮
-const offsetHeight = ref(0); // 内容高度
-const contentRef = ref<any>(null); // 内容节点
-
-onMounted(() => {
-  determineHeight();
-});
-watch([() => props.text, () => props.show], () => {
-  determineHeight();
-});
-const determineHeight = () => {
-  nextTick(() => {
-    const ele = contentRef.value;
-    if (ele) {
-      const range = document.createRange();
-      range.setStart(ele, 0);
-      range.setEnd(ele, ele.childNodes.length);
-      showBtn.value = range.getBoundingClientRect().height > ele.offsetHeight + 10 || ele.scrollHeight > ele.offsetHeight + 10;
-      offsetHeight.value = range.getBoundingClientRect().height || ele.scrollHeight;
-    } else {
-      showBtn.value = false;
-    }
-  });
-};
-
-const clickText = () => {
-  if (props.link) {
-    window.open(props.text)
-  }
-};
-</script>
-
-<template>
-  <div class="more-text-wrapper">
-    <div
-      :class="['more-text-content', link && 'is-link']"
-      ref="contentRef"
-      :style="{
-        'max-height': expanded ? offsetHeight + 'px' : '4.5em',
-        '-webkit-line-clamp': expanded ? 'initial' : lines,
-      }"
-      @click="clickText"
-    >
-      {{ text }}
-    </div>
-    <div class="more-text-btn" v-if="showBtn" @click="expanded = !expanded">
-      <div v-if="!expanded">
-        <span>{{ t('common.expand') }}</span>
-        <OIcon>
-          <OIconChevronDown />
-        </OIcon>
-      </div>
-      <div v-else>
-        <span>{{ t('common.collapse') }}</span>
-        <OIcon>
-          <OIconChevronUp />
-        </OIcon>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.more-text-wrapper {
-  .more-text-content {
-    line-height: 1.5em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    white-space: pre-wrap;
-    word-break: break-all;
-    transition: height 0.1s;
-
-    &.is-link {
-      color: var(--o-color-primary1);
-      cursor: pointer;
-      @include hover {
-        color: var(--o-color-primary2);
-      }
-    }
-  }
-
-  .more-text-btn {
-    color: var(--o-color-primary1);
-    @include hover {
-      color: var(--o-color-primary2);
-    }
-
-    & > div {
-      height: 1.5em;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      column-gap: 4px;
-      justify-content: flex-end;
-      @include tip1;
-    }
-  }
-}
-</style>

package/src/components/common/ThFilter.vue

@@ -1,330 +0,0 @@
-<script setup lang="ts">
-import {
-  OCheckbox,
-  OCheckboxGroup,
-  ODivider,
-  ODropdown,
-  ODropdownItem,
-  OIcon,
-  OLink,
-  OPopover,
-  OScroller,
-} from '@opensig/opendesign';
-import { computed, h, nextTick, ref, watch } from 'vue';
-import IconFilter from '~icons/components/icon-filter.svg';
-import { useI18n } from '@/i18n';
-import { buildVueDompurifyHTMLDirective } from 'vue-dompurify-html';
-
-// 局部注册 v-dompurify-html 指令
-const vDompurifyHtml = buildVueDompurifyHTMLDirective();
-
-type TItem = { label: string; value: string | number; children?: TItem[] };
-const { t } = useI18n();
-const props = withDefaults(
-  defineProps<{
-    modelValue: string[] | number[] | string | number;
-    list: TItem[];
-    multiple?: boolean;
-    tableWidth?: number;
-  }>(),
-  {
-    list: () => [],
-    multiple: false,
-  },
-);
-const emits = defineEmits(['update:model-value', 'confirm']);
-/**
- * 根据options判断是否为级联选择器
- * 如果是级联选择器，需要注意子级是否存在相同value
- */
-const isCascader = computed(() => props.list.some((v: TItem) => v.children?.length));
-// 格式化数据
-const options = computed(() => {
-  return props.list.map((v: TItem) => {
-    const children = (v.children || []).map((t: TItem) => {
-      return {
-        label: t.label,
-        value: t.value,
-      };
-    });
-    return {
-      label: v.label,
-      value: v.value,
-      children: isCascader.value ? children : undefined,
-    };
-  });
-});
-const visible = ref(false); // 控制浮窗展示
-
-watch(
-  () => props.modelValue,
-  (val: any) => {
-    if (!props.multiple) {
-      checked.value = val;
-    } else {
-      multiChecked.value = val;
-    }
-  },
-);
-// -------------------- 普通多选 --------------------
-const multiChecked = ref<any>([]); // 选中的值
-
-const change = (val: (string | number)[]) => {
-  multiChecked.value = val;
-};
-
-// -------------------- 级联选择 --------------------
-const cascaderValue = ref([]);
-// -------------------- 单选 --------------------
-const checked = ref<any>(null); // 选中的值
-// 单选没有按钮，点击即是确认
-const handleCommand = (val: string | number) => {
-  if (checked.value === val) {
-    checked.value = null;
-  } else {
-    checked.value = val;
-  }
-  confirmFn();
-};
-// -------------------- 按钮操作 --------------------
-const reset = () => {
-  multiChecked.value = [];
-  cascaderValue.value = [];
-  checked.value = null;
-  confirmFn();
-};
-const confirmFn = () => {
-  let finalValue = null;
-  if (!props.multiple) {
-    finalValue = checked.value;
-  } else if (isCascader.value) {
-    finalValue = cascaderValue.value;
-  } else {
-    finalValue = multiChecked.value;
-  }
-  emits('update:model-value', finalValue);
-  visible.value = true;
-  nextTick(() => {
-    emits('confirm');
-    visible.value = false;
-  });
-};
-
-// 是否有选中值，用于切换图标
-const hasChecked = computed(() => {
-  return multiChecked.value.length || cascaderValue.value.length || checked.value || props.modelValue;
-});
-// -------------------- 自定义级联选择器label --------------------
-const aref = ref<any>(null);
-const clickLabelSpan = async (e: any) => {
-  const ele = e.target.parentElement.parentElement;
-  await nextTick();
-  const input = ele.querySelector('input');
-  input.click();
-  await nextTick();
-  input.change?.(input);
-  await nextTick();
-  aref.value?.$forceUpdate();
-  cascaderValue.value = JSON.parse(JSON.stringify(cascaderValue.value));
-};
-const renderLabel = ({ data }: any) => {
-  return h('span', { onclick: clickLabelSpan }, data.label);
-};
-</script>
-
-<template>
-  <div class="th-filter-wrapper" ref="filterRef">
-    <span>
-      <slot></slot>
-    </span>
-    <OPopover
-      v-if="multiple"
-      :visible="visible"
-      position="bottom"
-      wrapClass="th-filter-popover"
-      trigger="click"
-      :anchor="false">
-      <template #target>
-        <div class="filter-wrapper" :class="hasChecked && 'has-checked'">
-          <OIcon class="filter-icon">
-            <IconFilter />
-          </OIcon>
-        </div>
-      </template>
-      <OScroller class="content-wrapper" show-type="hover" disabled-x v-if="!isCascader">
-        <OCheckboxGroup direction="v" @change="change" v-model="multiChecked">
-          <OCheckbox v-for="item in options" :key="item.value" :value="item.value">
-            <span v-dompurify-html="item.label"></span>
-          </OCheckbox>
-        </OCheckboxGroup>
-      </OScroller>
-      <div class="list-content-wrapper" v-else>
-        <ElCascaderPanel
-          ref="aref"
-          expandTrigger="hover"
-          :renderLabel="renderLabel"
-          v-model="cascaderValue"
-          style="width: fit-content"
-          :options="options"
-          :props="{ multiple: true, expandTrigger: 'hover' }"
-        />
-      </div>
-      <ODivider />
-      <div class="btn-wrapper">
-        <OLink @click="reset">{{ t('common.reset') }}</OLink>
-        <OLink @click="confirmFn">{{ t('common.confirm') }}</OLink>
-      </div>
-    </OPopover>
-    <ODropdown v-else optionPosition="bottom" optionWrapClass="th-filter-dropdown" v-model="checked">
-      <div class="filter-wrapper" :class="hasChecked && 'has-checked'">
-        <OIcon class="filter-icon">
-          <IconFilter />
-        </OIcon>
-      </div>
-      <template #dropdown>
-        <OScroller disabled-x style="max-height: 300px" show-type="always" v-if="options.length">
-          <ODropdownItem
-            :style="{
-              '--table-width': tableWidth,
-            }"
-            :class="[{ 'is-active': modelValue === '' }]"
-            value="''"
-            :label="t('common.all')"
-            @click="handleCommand('')"
-          />
-          <ODropdownItem
-            :style="{
-              '--table-width': tableWidth,
-            }"
-            :class="[{ 'is-active': item.value === modelValue }]"
-            v-for="item in options"
-            :key="item.value"
-            :value="item.value"
-            @click="handleCommand(item.value)"
-          >
-            <span v-dompurify-html="item.label"></span>
-          </ODropdownItem>
-        </OScroller>
-        <slot name="empty" v-if="!options.length"></slot>
-      </template>
-    </ODropdown>
-  </div>
-</template>
-
-<style lang="scss">
-.th-filter-wrapper {
-  display: flex;
-  column-gap: var(--o-gap-2);
-  flex-wrap: nowrap;
-  align-items: center;
-
-  & > span:first-child {
-    word-break: keep-all;
-  }
-}
-
-.filter-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  & > * {
-    flex-shrink: 0;
-  }
-
-  .filter-hover-icon {
-    display: none;
-  }
-
-  .filter-icon {
-    @include h2;
-  }
-
-  &:hover,
-  &.has-checked {
-    .filter-icon {
-      color: var(--o-color-primary1);
-    }
-
-    .o-icon {
-      path {
-        fill: currentColor;
-      }
-    }
-  }
-}
-
-.th-filter-dropdown {
-  .o-dropdown-item {
-    min-width: 80px;
-    max-width: calc(var(--table-width, 300) * 0.8px);
-    --dropdown-item-justify: flex-start;
-    --dropdown-item-padding: 7px 12px;
-  }
-
-  .o-dropdown-item.is-active {
-    font-weight: 500;
-    background-color: var(--dropdown-item-bg-color-hover);
-    color: var(--dropdown-item-color-hover);
-  }
-}
-
-.th-filter-popover {
-  --popup-radius: var(--o-radius-xs);
-
-  .o-popup-body {
-    padding: var(--o-gap-2) 0 0 0;
-  }
-
-  .list-content-wrapper {
-    display: flex;
-
-    .o-scrollbar-wrapper:first-child {
-      border-right: 1px solid rgb(224, 226, 230);
-    }
-  }
-
-  .content-wrapper {
-    padding: 0 var(--o-gap-4);
-    overflow: auto;
-    max-height: 300px;
-
-    .o-checkbox-group {
-      flex-shrink: 0;
-    }
-
-    .o-checkbox-label {
-      flex-grow: 1;
-
-      .label-wrapper {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .o-svg-icon {
-          font-size: 24px;
-        }
-      }
-    }
-  }
-
-  .btn-wrapper {
-    min-width: 158px;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-bottom: var(--o-gap-3);
-    @include text1;
-
-    .o-link {
-      width: 80px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-</style>