@bdsoft/element 1.1.0

package/src/components/badge/index.js

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

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

@@ -0,0 +1,98 @@
+<!--
+* @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

@@ -0,0 +1,18 @@
+
+
+
+## 圆点组件
+  
+```
+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

@@ -0,0 +1,107 @@
+<!--
+* @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

@@ -0,0 +1,19 @@
+<!--
+* @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

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

package/src/components/button/index.vue

@@ -0,0 +1,48 @@
+<!--
+* @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

@@ -0,0 +1,62 @@
+## 使用示例
+
+```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>
+```