@bdsoft/element 1.1.9 → 1.1.12

package/src/components/badge/index.js

@@ -1,167 +0,0 @@
-import { ExtractPropTypes, PropType } from 'vue'
-
-const getPrefixCls = (suffixCls, customizePrefixCls) => {
-  if (customizePrefixCls) return customizePrefixCls
-  return suffixCls ? `bd-${suffixCls}` : 'bd'
-}
-export default defineComponent({
-  compatConfig: { MODE: 3 }, // 为了实现向后兼容
-  name: 'BdBadge',
-  props: {
-    count: [Object],
-    showZero: { type: Boolean, default: undefined },
-    /** Max count to show */
-    overflowCount: { type: Number, default: 99 },
-    /** whether to show red dot without number */
-    dot: { type: Boolean, default: undefined },
-    prefixCls: String,
-    scrollNumberPrefixCls: String,
-    status: { type: String },
-    size: { type: String, default: 'default' },
-    color: String,
-    text: [Object],
-    offset: [Array],
-    numberStyle: { type: Object },
-    title: String
-  },
-  slots: ['text', 'count'],
-  setup(props, { slots, attrs }) {
-    // 样式
-    const prefixCls = computed(() => getPrefixCls('badge', props.prefixCls))
-    // ================================ Misc ================================
-    const numberedDisplayCount = computed(() => {
-      return props.count > props.overflowCount ? `${props.overflowCount}+` : props.count
-    })
-
-    const hasStatus = computed(() => (props.status !== null && props.status !== undefined) || (props.color !== null && props.color !== undefined))
-
-    const showAsDot = computed(() => props.dot)
-
-    const mergedCount = computed(() => (showAsDot.value ? '' : numberedDisplayCount.value))
-
-    const isHidden = computed(() => {
-      const isEmpty = mergedCount.value === null || mergedCount.value === undefined || mergedCount.value === ''
-      return isEmpty && !showAsDot.value
-    })
-
-    // Count should be cache in case hidden change it
-    const livingCount = ref(props.count)
-
-    // We need cache count since remove motion should not change count display
-    const displayCount = ref(mergedCount.value)
-
-    // We will cache the dot status to avoid shaking on leaved motion
-    const isDotRef = ref(showAsDot.value)
-
-    watch(
-      [() => props.count, mergedCount, showAsDot],
-      () => {
-        if (!isHidden.value) {
-          livingCount.value = props.count
-          displayCount.value = mergedCount.value
-          isDotRef.value = showAsDot.value
-        }
-      },
-      { immediate: true }
-    )
-
-    // Shared styles
-    const statusCls = computed(() => ({
-      [`${prefixCls.value}-status-dot`]: hasStatus.value,
-      [`${prefixCls.value}-status-${props.status}`]: !!props.status,
-      [`${prefixCls.value}-status-${props.color}`]: isPresetColor(props.color)
-    }))
-
-    const statusStyle = computed(() => {
-      if (props.color && !isPresetColor(props.color)) {
-        return { background: props.color }
-      } else {
-        return {}
-      }
-    })
-
-    const scrollNumberCls = computed(() => ({
-      [`${prefixCls.value}-dot`]: isDotRef.value,
-      [`${prefixCls.value}-count`]: !isDotRef.value,
-      [`${prefixCls.value}-count-sm`]: props.size === 'small',
-      [`${prefixCls.value}-multiple-words`]: !isDotRef.value && displayCount.value && displayCount.value.toString().length > 1,
-      [`${prefixCls.value}-status-${props.status}`]: !!props.status,
-      [`${prefixCls.value}-status-${props.color}`]: isPresetColor(props.color)
-    }))
-
-    return () => {
-      const { offset, title, color } = props
-      const style = attrs.style
-      const text = getPropsSlot(slots, props, 'text')
-      const pre = prefixCls.value
-      const count = livingCount.value
-      let children = flattenChildren(slots.default?.())
-      children = children.length ? children : null
-
-      const visible = !!(!isHidden.value || slots.count)
-
-      // =============================== Styles ===============================
-      const mergedStyle = (() => {
-        if (!offset) {
-          return { ...style }
-        }
-
-        const offsetStyle = {
-          marginTop: isNumeric(offset[1]) ? `${offset[1]}px` : offset[1]
-        }
-        //   if (direction.value === 'rtl') {
-        //     offsetStyle.left = `${parseInt(offset[0] as string, 10)}px`;
-        //   } else {
-        //     offsetStyle.right = `${-parseInt(offset[0] as string, 10)}px`;
-        //   }
-
-        return {
-          ...offsetStyle,
-          ...style
-        }
-      })()
-
-      // =============================== Render ===============================
-      // >>> Title
-      const titleNode = title ?? (typeof count === 'string' || typeof count === 'number' ? count : undefined)
-
-      // >>> Status Text
-      const statusTextNode = visible || !text ? null : <span class={`${pre}-status-text`}>{text}</span>
-
-      // >>> Display Component
-      const displayNode =
-        typeof count === 'object' || (count === undefined && slots.count)
-          ? cloneElement(
-              count ?? slots.count?.(),
-              {
-                style: mergedStyle
-              },
-              false
-            )
-          : null
-
-      const badgeClassName = classNames(
-        pre,
-        {
-          [`${pre}-status`]: hasStatus.value,
-          [`${pre}-not-a-wrapper`]: !children,
-          [`${pre}-rtl`]: direction.value === 'rtl'
-        },
-        attrs.class
-      )
-
-      // <Badge status="success" />
-      if (!children && hasStatus.value) {
-        const statusTextColor = mergedStyle.color
-        return (
-          <span {...attrs} class={badgeClassName} style={mergedStyle}>
-            <span class={statusCls.value} style={statusStyle.value} />
-            <span style={{ color: statusTextColor }} class={`${pre}-status-text`}>
-              {text}
-            </span>
-          </span>
-        )
-      }
-    }
-  }
-})

package/src/components/badge/index.scss

@@ -1,166 +0,0 @@
-$badge-prefix-cls: 'bd-badge';
-$badge-status-size: 7px;
-$success-color: #52c41a;
-$processing-color: #1890ff;
-$normal-color: #d9d9d9;
-$error-color: #ff4d4f;
-$primary-color: #1890ff;
-$warning-color: #faad14;
-$text-color: #000000d9;
-$font-size-base: 14px;
-
-.bd-badge {
-  position: relative;
-  display: inline-block;
-  line-height: 1;
-
-  &-status {
-    line-height: inherit;
-    vertical-align: baseline;
-
-    &-dot {
-      position: relative;
-      top: -1px;
-      display: inline-block;
-      width: $badge-status-size;
-      height: $badge-status-size;
-      vertical-align: middle;
-      border-radius: 50%;
-    }
-
-    &-success {
-      background-color: $success-color;
-      &-text {
-        color: $success-color !important;
-      }
-    }
-   
-
-    &-processing {
-      position: relative;
-      background-color: $processing-color;
-      &-text {
-        color: $processing-color !important;
-      }
-      &::after {
-        position: absolute;
-        top: -1px;
-        left: -1px;
-        width: 100%;
-        height: 100%;
-        border: 1px solid $processing-color;
-        border-radius: 50%;
-        animation: antStatusProcessing 1.2s infinite ease-in-out;
-        content: '';
-      }
-    }
-
-    &-default {
-      background-color: $normal-color;
-     
-    }
-     &-primary {
-      background-color: $primary-color !important;
-      &-text {
-        color: $primary-color !important;
-      }
-    }
-    &-error {
-      background-color: $error-color !important;
-      &-text {
-        color: $error-color !important;
-      }
-    }
-
-    &-warning {
-      background-color: $warning-color;
-      &-text {
-        color: $warning-color !important;
-      }
-    }
-   
-    &-text {
-      margin-left: 8px;
-      color: $text-color;
-      font-size: $font-size-base;
-    }
-  }
-
-  // &-zoom-appear,
-  // &-zoom-enter {
-  //   animation: antZoomBadgeIn $animation-duration-slow $ease-out-back;
-  //   animation-fill-mode: both;
-  // }
-
-  // &-zoom-leave {
-  //   animation: antZoomBadgeOut $animation-duration-slow $ease-in-back;
-  //   animation-fill-mode: both;
-  // }
-}
-
-@keyframes antStatusProcessing {
-  0% {
-    transform: scale(0.8);
-    opacity: 0.5;
-  }
-
-  100% {
-    transform: scale(2.4);
-    opacity: 0;
-  }
-}
-
-@keyframes antZoomBadgeIn {
-  0% {
-    transform: scale(0) translate(50%, -50%);
-    opacity: 0;
-  }
-
-  100% {
-    transform: scale(1) translate(50%, -50%);
-  }
-}
-
-@keyframes antZoomBadgeOut {
-  0% {
-    transform: scale(1) translate(50%, -50%);
-  }
-
-  100% {
-    transform: scale(0) translate(50%, -50%);
-    opacity: 0;
-  }
-}
-
-@keyframes antNoWrapperZoomBadgeIn {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes antNoWrapperZoomBadgeOut {
-  0% {
-    transform: scale(1);
-  }
-
-  100% {
-    transform: scale(0);
-    opacity: 0;
-  }
-}
-
-@keyframes antBadgeLoadingCircle {
-  0% {
-    transform-origin: 50%;
-  }
-
-  100% {
-    transform: translate(50%, -50%) rotate(360deg);
-    transform-origin: 50%;
-  }
-}

package/src/components/badge/index.vue

@@ -1,98 +0,0 @@
-<!--
-* @FileDescription:   徽章组件
-* @Author: 李兵泉
-* @Date: 2021-06-08 09 时
-* @LastEditors: 最后更新作者
-* @LastEditTime: 最后更新时间
--->
-<script setup>
-import { ref, useAttrs, computed, watch, onMounted } from 'vue';
-const props = defineProps({
-  count: [Object],
-  showZero: { type: Boolean, default: undefined },
-  /** Max count to show */
-  overflowCount: { type: Number, default: 99 },
-  /** whether to show red dot without number */
-  dot: { type: Boolean, default: undefined },
-  prefixCls: String,
-  scrollNumberPrefixCls: String,
-  status: { type: String, default: '' },
-  type: { type: String, default: 'default' },
-  size: { type: String, default: 'default' },
-  color: String,
-  text: [String],
-  offset: [Array],
-  numberStyle: { type: Object },
-  title: String
-});
-// public
-const isString = val => typeof val === 'string';
-const isArray = Array.isArray;
-const isObject = val => val !== null && typeof val === 'object';
-
-let attrs = useAttrs();
-// 类样式返回
-const classNames = (...args) => {
-  const classes = [];
-  for (let i = 0; i < args.length; i++) {
-    const value = args[i];
-    if (!value) continue;
-    if (isString(value)) {
-      classes.push(value);
-    } else if (isArray(value)) {
-      for (let i = 0; i < value.length; i++) {
-        const inner = classNames(value[i]);
-        if (inner) {
-          classes.push(inner);
-        }
-      }
-    } else if (isObject(value)) {
-      for (const name in value) {
-        if (value[name]) {
-          classes.push(name);
-        }
-      }
-    }
-  }
-  return classes.join(' ');
-};
-
-const prefixCls = ref('bd-badge');
-const pre = prefixCls.value;
-const numberedDisplayCount = true;
-const hasStatus = ref(true);
-// 容器样式
-const badgeClassName = classNames(
-  pre,
-  {
-    [`${pre}-status`]: hasStatus.value,
-    [`${pre}-not-a-wrapper`]: true
-  },
-  attrs.class
-);
-const statusCls = computed(() => ({
-  [`${prefixCls.value}-status-dot`]: hasStatus.value,
-  [`${prefixCls.value}-status-${props.status || props.type}`]: !!props.type
-}));
-
-const statusStyle = computed(() => {
-  if (props.color) {
-    return { background: props.color };
-  } else {
-    return {};
-  }
-});
-const style = attrs.style;
-</script>
-<template>
-  <span v-bind="attrs" :class="{ badgeClassName }" :style="{ style }">
-    <span :class="statusCls" :style="{ statusStyle }" />
-    <span :class="`${pre}-status-text ${pre}-status-${type}-text`">
-      {{ text }}
-    </span>
-  </span>
-</template>
-
-<style lang="scss" scoped>
-@use './index.scss';
-</style>

package/src/components/badge/readme.md

@@ -1,18 +0,0 @@
-
-
-
-## 圆点组件
-  
-```
-import { BdBadge } from '@bdsoft/element';
- <ul>
-      如果想与圆点同色 写到text里面 如果想自定义颜色 写到/BdBadge后面
-      <li><BdBadge text='默认提示点'></BdBadge>默认提示点</li>
-      <li><BdBadge type="warning"></BdBadge>警告提示点</li>
-      <li><BdBadge type="error"></BdBadge>错误提示点</li>
-      <li><BdBadge type="processing"></BdBadge>动态提示点</li>
-      <li><BdBadge type="processing"></BdBadge>动态提示点</li>
-      <li><BdBadge type="success"></BdBadge>动态提示点</li>
-    </ul>
-```
-text 值与原点同色，放到slot里面则是灰色

package/src/components/basic/Finish.vue

@@ -1,107 +0,0 @@
-<!--
-* @FileDescription:  完成提示 动画组件
-* @Author: 李兵泉
-* @Date: 2025-09-09 
-* @LastEditors: 最后更新作者
-* @LastEditTime: 最后更新时间
--->
-<template>
-    <div class='svgwarp' :style="{scale:scale}">
-        <svg width="100" height="100">
-            <!-- 圆形部分 -->
-            <circle fill="none" stroke="#68E534" stroke-width="8" cx="50" cy="50" r="45" class="circle"
-                stroke-linecap="round" transform="rotate(-23 50 50)" />
-
-            <!-- 打钩部分 -->
-            <polyline fill="none" stroke="#68E534" stroke-width="10" points="22,53 43,71 76,34" stroke-linecap="round"
-                stroke-linejoin="round" class="tick" />
-        </svg>
-        <h2 class="title">{{ text }}</h2>
-    </div>
-</template>
-<script setup>
-import { ref, reactive, computed, watch, onMounted } from "vue";
-const props = defineProps({
-    text: {
-        type: String,
-        default: '处理数据完成！'
-    },
-    scale: {
-        type: Number,
-        default: 0.5
-    },
-})
-</script>
-
-<style lang="scss" scoped>
-.svgwarp {
-    display: flex;
-}
-
-svg .circle {
-    stroke-dasharray: 298;
-    /* 圆周长：2πr = 2×3.14×190 ≈ 1194 */
-    stroke-dashoffset: 298;
-    /* 初始偏移量等于周长 */
-    animation: circle 1s ease-in-out;
-    animation-fill-mode: forwards;
-}
-
-svg .tick {
-    stroke-dasharray: 88;
-    /* 打钩路径总长度 */
-    stroke-dashoffset: 88;
-    /* 初始偏移量 */
-    animation: tick .8s ease-out;
-    animation-fill-mode: forwards;
-    animation-delay: .95s;
-    /* 延迟启动 */
-}
-
-.title {
-    height: 100px;
-    line-height: 100px;
-    font-size: 36px;
-    color: #333;
-    opacity: 0;
-    animation: .6s titleAn ease-in-out;
-    animation-delay: 1.2s;
-    animation-fill-mode: forwards;
-    justify-content: center;
-    align-items: center;
-    margin-left: 20px;
-
-}
-
-@keyframes titleAn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes tick {
-    from {
-        stroke-dashoffset: 88;
-    }
-
-    to {
-        stroke-dashoffset: 0;
-        /* 动画结束时完全显示 */
-    }
-}
-
-@keyframes circle {
-    from {
-        stroke-dashoffset: 298;
-    }
-
-    to {
-        stroke-dashoffset: 597;
-        /* 动画结束时偏移量为2倍周长 */
-    }
-}
-</style>

package/src/components/basic/button.vue

@@ -1,19 +0,0 @@
-<!--
-* @FileDescription:  按钮处理
-* @Author: 李兵泉
-* @Date: 2021-06-08 09 时
-* @LastEditors: 最后更新作者
-* @LastEditTime: 最后更新时间
--->
-<template>
-    <div>
-        <el-button type="primary" > 测试按钮</el-button>
-    </div>
-</template>
-<script setup>
-import {ref ,reactive ,computed, watch,onMounted} from "vue";
-</script>
-
-<style lang="scss" scoped>
-
-</style>

package/src/components/basic/readme.md

@@ -1,7 +0,0 @@
-## 示例
-
-```
-import finish from "@bdsoft/element";
-
- <finish text='处理数据完成！' :scale='0.5'></finish>
-```

package/src/components/button/index.vue

@@ -1,48 +0,0 @@
-<!--
-* @FileDescription:  按钮组件-支持每个按钮添加loading效果
-* @Author: 李兵泉
-* @Date: 2021-06-08 09 时
-* @LastEditors: 最后更新作者
-* @LastEditTime: 最后更新时间
--->
-<script setup>
-import { ref, useSlots } from 'vue'
-//props
-const props = defineProps({
-    onClick:{
-        type: Function,
-        required: true
-    },
-    loadingText: {
-        type: String,
-        default: '加载中...',
-        required: false
-    }
-})
-
-const loading = ref(false)
-
-// 点击事件
-const clickHandler = async (e) => {
-
-    loading.value = true
-    try {
-        await props.onClick(e)
-    } finally {
-        loading.value = false
-    }
-}
-const slots = useSlots()
-</script>
-
-<template>
-    <el-button @click="clickHandler" :loading="loading">
-
-        <template v-if="loading">
-            {{ props.loadingText }}
-        </template>
-        <template v-else>
-            <slot />
-        </template>
-    </el-button>
-</template>

package/src/components/button/readme.md

@@ -1,62 +0,0 @@
-## 使用示例
-
-```html
-<!--
-* @FileDescription:  测试
-* @Author: 李兵泉
-* @Date: 2021-06-08 09 时
-* @LastEditors: 最后更新作者
-* @LastEditTime: 最后更新时间
--->
-<template>
-  <div>11111</div>
-  <!-- <BdButton @click="handler1">测试按钮</BdButton> -->
-  <BdButton type="primary" loadingText="加载中" @click="handler1"> 按钮1 </BdButton>
-  <BdButton @click="asyncFn" loadingText="保存中"> 按钮2 </BdButton>
-  <BdButton type="primary" plain @click="handler3">
-    <template #loading>
-      <div class="custom-loading">
-        <el-icon><Refresh /></el-icon>
-      </div>
-    </template>
-    按钮3
-  </BdButton>
-</template>
-<script setup>
-  import { ref, reactive, computed, watch, onMounted } from 'vue'
-  import { BdButton } from '@bdsoft/element'
-
-  const asyncFn = () =>
-    new Promise((resolve) => {
-      setTimeout(resolve, 3000)
-    })
-
-  const handler1 = async () => {
-    // ...
-    await asyncFn()
-  }
-
-  const handler3 = () => {
-    // ...
-    return asyncFn()
-  }
-</script>
-
-<style lang="scss" scoped>
-  .el-button .custom-loading {
-    //   margin-right: 6px;
-    width: 16px;
-    height: 16px;
-    animation: loading-rotate 2s linear infinite;
-  }
-
-  .el-button .custom-loading .circular .path {
-    animation: loading-dash 1.5s ease-in-out infinite;
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: 0;
-    stroke-width: 2;
-    stroke: var(--el-button-text-color);
-    stroke-linecap: round;
-  }
-</style>
-```