@qi-tian-da-sheng/bin-project-ui 1.0.0

package/lib/packages/tools/element/render-node.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),u=require("../extra/types.js");function y(e,r="defaultNode"){return u.isObject(e)&&r in e}function C(e){return[void 0,null,""].includes(e)?!0:!(e instanceof Array?e:[e]).filter(t=>{var l;return((l=t==null?void 0:t.type)==null?void 0:l.toString())!=="Symbol(Comment)"}).length}function g(e){let r;return y(e)?r=e.defaultNode:(c.isVNode(e)||u.isString(e))&&(r=e),r}function N(e){return u.isObject(e)&&y(e,"params")?e.params:{}}function b(e){return u.isObject(e)&&y(e,"slotFirst")?e.slotFirst:{}}function a(e,r,n){var l,o,s,f;let t=(o=(l=e.slots)[u.camelCase(r)])==null?void 0:o.call(l,n);return t&&t.filter(d=>d.type!==Symbol.for("v-cmt")).length||(t=(f=(s=e.slots)[u.kebabCase(r)])==null?void 0:f.call(s,n),t&&t.filter(d=>d.type!==Symbol.for("v-cmt")).length)?t:null}const i=(e,r,n)=>{const t=N(n),l=g(n),o=b(n);let s;return Object.keys(e.props).includes(r)&&(s=e.props[r]),s===!1||s===null?void 0:s===!0?a(e,r,t)||l:u.isFunction(s)?s(c.h,t):([void 0,t,""].includes(s)||o)&&(e.slots[u.camelCase(r)]||e.slots[u.kebabCase(r)])?a(e,r,t):u.ensureArray(s)},S=()=>function(e,r){const n=c.getCurrentInstance();if(n!=null)return i(n,e,r)},m=(e,r,n,t)=>{const l=i(e,r,t),o=i(e,n,t),s=C(l)?o:l;return u.ensureArray(u.isEmpty(s)?g(t):s)},P=()=>function(e,r,n){const t=c.getCurrentInstance();if(t!=null)return m(t,e,r,n)};exports.getDefaultNode=g;exports.getParams=N;exports.getSlotFirst=b;exports.handleSlots=a;exports.renderContent=m;exports.renderPNode=i;exports.useContent=P;exports.usePNode=S;

package/lib/packages/tools/extra/css.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./types.js"),s=function(...r){for(let i of r)if(!t.isString(i))return"";return`var(--pixel-color-${Array.from(r.map(i=>i)).join("-")})`},o=(r,e)=>t.isEmpty(r)&&!t.isEmpty(e)?`${e}px`:t.isNumber(Number(r))?`${r}px`:"0";exports.getClrVar=s;exports.px=o;

package/lib/packages/tools/extra/delay.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=function(e=0){return new Promise(t=>{setTimeout(()=>{t("ok")},e)})};exports.delay=o;

package/lib/packages/tools/extra/fn-union.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=function(...t){return function(){for(let n=0;n<t.length;n++)t[n]()}};exports.fnUnion=e;

package/lib/packages/tools/extra/types.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=e=>typeof e=="string",o=e=>typeof e=="number",c=e=>typeof e=="boolean",f=e=>e===void 0,u=e=>typeof e=="symbol",a=e=>typeof e=="object"&&e!==null,y=e=>typeof e=="function",p=e=>!!e&&typeof e.then=="function",m=e=>e instanceof Date&&!isNaN(e.getTime()),b=e=>e instanceof Map,g=e=>e instanceof Set,s=e=>Array.isArray(e),l=e=>e instanceof RegExp,i=e=>{if(e==null)return!0;if(typeof e=="string")return!e.trim().length;if(Array.isArray(e))return!e.length;if(typeof e=="object"){for(const t in e)if(e.hasOwnProperty(t))return!1;return!0}return!1};function A(e){return i(e)?null:s(e)?e:[e]}function S(e){return e.replace(/[^\w\s-_]/g,"").replace(/[-\s_]+(.)?/g,function(t,n){return n?n.toUpperCase():""}).replace(/^./,function(t){return t.toLowerCase()})}function d(e){return e.match(/[A-Z]?[a-z]+|[0-9]+/g).map(t=>t.toLowerCase()).join("-")}exports.camelCase=S;exports.ensureArray=A;exports.isArray=s;exports.isBoolean=c;exports.isDate=m;exports.isEmpty=i;exports.isFunction=y;exports.isMap=b;exports.isNumber=o;exports.isObject=a;exports.isPromise=p;exports.isRegExp=l;exports.isSet=g;exports.isString=r;exports.isSymbol=u;exports.isUndefined=f;exports.kebabCase=d;

package/lib/packages/tools/managers/index-manager.js

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var s=(n,e,t)=>e in n?i(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var r=(n,e,t)=>s(n,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../decorator/single-ton.js");class a{constructor(e=2e3){r(this,"index");this.index=e}nextIndex(){return this.index++}}const d=o.singleTon(a);exports.IndexManager=d;

package/lib/packages/tools/managers/layout-manager.js

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var a=(p,t,s)=>t in p?i(p,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):p[t]=s;var e=(p,t,s)=>a(p,typeof t!="symbol"?t+"":t,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class o{constructor(t){e(this,"position");e(this,"appList");this.position=t,this.appList=[]}push(t){this.appList.push(t),this.update()}delete(t){const s=this.appList.indexOf(t);this.appList.splice(s,1),this.update()}nextPos(){let t=0;return this.appList.forEach(s=>{t+=parseInt(s.getAttribute("data-space"))+s.offsetHeight}),t}getEl(t){return this.appList[t]}getIndexOf(t){return this.appList.indexOf(t)}update(){this.position==="up"&&this._layoutUp(),this.position==="down"&&this._layoutDown()}_layoutUp(){let t=0;this.appList.forEach(s=>{t+=parseInt(s.getAttribute("data-space")),s.style.bottom=`${t}px`,t+=s.offsetHeight})}_layoutDown(){let t=0;this.appList.forEach(s=>{t+=parseInt(s.getAttribute("data-space")),s.style.top=`${t}px`,t+=s.offsetHeight})}}exports.LayoutManager=o;

package/lib/packages/tools/vn/with-install.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function i(o,a,n){const t=o;return t.install=(e,c)=>{const l=a||c||t.name;l&&(e.component(l,o),n&&e.directive(n.name,n.comp))},t}exports.withInstall=i;

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@qi-tian-da-sheng/bin-project-ui",
+  "version": "1.0.0",
+  "description": "ui库",
+  "type": "module",
+  "main": "lib/index.js",
+  "module": "es/index.mjs",
+  "types": "es/index.d.ts",
+  "style": "dist/index.css",
+  "sideEffects": false,
+  "author": {
+    "name": "bin",
+    "email": "1050487115@qq.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "homepage": "",
+  "license": "MIT",
+  "private": false,
+  "workspaces": [
+    "packages/*",
+    "examples"
+  ],
+  "keywords": [
+    "UI",
+    "Vue3",
+    "TypeScript",
+    "p"
+  ],
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "examples:dev": "vitepress dev ./examples/ --host 0.0.0.0",
+    "examples:build": "vitepress build ./examples/",
+    "type:build": "node buildWebTypes.js"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.6"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "^1.1.9",
+    "@vueuse/core": "^14.0.0"
+  },
+  "devDependencies": {
+    "@bin-ui/components": "workspace:*",
+    "@bin-ui/hooks": "workspace:*",
+    "@bin-ui/styles": "workspace:*",
+    "@bin-ui/tools": "workspace:*",
+    "@bin-ui/typings": "workspace:*",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitest/ui": "^2.1.8",
+    "@vue/test-utils": "^2.4.6",
+    "autoprefixer": "^10.4.21",
+    "happy-dom": "^15.11.7",
+    "jsdom": "^25.0.1",
+    "components-helper": "^2.2.0",
+    "cssnano": "^7.0.9",
+    "less": "^4.2.4",
+    "less-loader": "^12.2.0",
+    "path": "^0.12.7",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.1.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.7.2",
+    "unplugin-vue-define-options": "^1.5.1",
+    "vite": "^6.4.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^2.1.8",
+    "vue-tsc": "^3.1.4",
+    "vue": "^3.5.13",
+    "@vue/runtime-core": "^3.5.13",
+    "vue-docgen-web-types": "^0.1.8"
+  }
+}

package/packages/components/__tests__/utils.ts

@@ -0,0 +1,54 @@
+/**
+ * @description 测试工具函数
+ * @author MC.Yang
+ */
+import { VueWrapper } from '@vue/test-utils'
+
+/**
+ * 等待组件更新
+ */
+export const nextTick = () => new Promise(resolve => setTimeout(resolve, 0))
+
+/**
+ * 获取元素的类名数组
+ */
+export const getClasses = (wrapper: VueWrapper, selector?: string): string[] => {
+  const el = selector ? wrapper.find(selector) : wrapper
+  return el.classes()
+}
+
+/**
+ * 检查元素是否包含某个类名
+ */
+export const hasClass = (wrapper: VueWrapper, className: string, selector?: string): boolean => {
+  return getClasses(wrapper, selector).includes(className)
+}
+
+/**
+ * 等待元素出现
+ */
+export const waitFor = async (
+  condition: () => boolean,
+  timeout = 1000,
+  interval = 50
+): Promise<void> => {
+  const startTime = Date.now()
+  while (!condition()) {
+    if (Date.now() - startTime > timeout) {
+      throw new Error('Timeout waiting for condition')
+    }
+    await new Promise(resolve => setTimeout(resolve, interval))
+  }
+}
+
+/**
+ * 触发事件
+ */
+export const triggerEvent = async (
+  wrapper: VueWrapper,
+  event: string,
+  selector?: string
+): Promise<void> => {
+  const el = selector ? wrapper.find(selector) : wrapper
+  await el.trigger(event)
+}

package/packages/components/abstract/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 抽象组件（不会渲染成任何实际的 DOM 元素）
+ * @author: MC.Yang
+ */
+import _Partial from "./src/partial.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Partial = withInstall(_Partial);
+
+export type PPartialInstance = InstanceType<typeof _Partial>;
+
+export default {Partial};
+export {Partial};

package/packages/components/abstract/src/partial.vue

@@ -0,0 +1,79 @@
+<script lang="ts">
+import {defineComponent, h, useAttrs, VNode, warn} from "vue";
+
+/**
+ * @description 获取第一个合法元素
+ */
+export default defineComponent({
+  setup(__, context) {
+    const slots = context.slots;
+    const attrs = useAttrs();
+
+    // slots.default 为空, 抛出警告
+    if (!slots.default) {
+      warn('[PPartial] 不存在任何插槽');
+      return void 0
+    }
+
+    const VNodes: VNode[] = slots.default();
+    let dft: any;  // default 目标节点
+    let old: any;  // 目标节点的父节点
+
+
+    // 遍历 default 函数生成的虚拟节点列表, 找到第一个非注释节点
+    for (let i = 0; i < VNodes.length; i++) {
+      const VNode = VNodes[i];
+      if (VNode.type !== Symbol.for('v-cmt')) {
+        dft = VNode;
+        break;
+      }
+
+    }
+
+    // 经过遍历后，如果值为空，说明没有满足情况的节点，抛出警告
+    if (!dft) {
+      warn("是一个空的 nodeList");
+      return void 0
+    }
+
+    // 只有当节点类型是 template、slot、txt、comment 时, type 才会是 symbol
+    // 这里是为了找到第一个满足情况的节点
+    while (dft && typeof dft!.type === 'symbol') {
+      let index = 0;
+
+      // 当前是文本节点，满足要求， 为当前文本节点套上一层 span
+      if (dft!.type === Symbol.for('v-txt')) {
+        dft = h('span', {...attrs}, [dft]);
+        break;
+      }
+
+      // 当前节点是注释节点，则不断获取该节点的下一个节点
+      while (dft!.type === Symbol.for('v-cmt') && index < old.children.length) {
+        dft = (old as any)!.children[++index];
+      }
+
+      // 没有经历上面的过程则index不变, 此时只剩template和slot的情况
+      // 获取当前节点的第一个子节点
+      if (index === 0) {
+        old = dft;
+        dft = (dft as any)!.children[0];
+      }
+    }
+
+    // 如果到最后也没有合法节点，则抛出警告
+    if (!dft) {
+      warn("没有可用的 vNode 用于 partial");
+      return
+    }
+
+    // 最终渲染该节点
+    return () => {
+      return h(dft as any, {...attrs})
+    }
+  },
+  name: 'PPartial',
+})
+</script>
+
+
+

package/packages/components/badge/__tests__/badge.spec.ts

@@ -0,0 +1,152 @@
+/**
+ * @description Badge 组件测试
+ * @author MC.Yang
+ */
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Badge from '../src/badge.vue'
+
+describe('Badge', () => {
+  describe('基础功能', () => {
+    it('应该正确渲染', async () => {
+      const wrapper = mount(Badge, {
+        props: {
+          value: '5',
+        },
+        slots: {
+          default: '<button>按钮</button>',
+        },
+      })
+
+      await nextTick()
+      expect(wrapper.text()).toContain('按钮')
+      // Badge 组件应该有内容
+      expect(wrapper.find('button').exists()).toBe(true)
+    })
+
+    it('没有插槽时应该渲染空标记', () => {
+      const wrapper = mount(Badge, {
+        props: {
+          value: '5',
+        },
+      })
+      expect(wrapper.find('span[style*="display: inline-block"]').exists()).toBe(true)
+    })
+  })
+
+  describe('Props', () => {
+    it('value 属性应该传递', () => {
+      const wrapper = mount(Badge, {
+        props: {
+          value: '10',
+        },
+        slots: {
+          default: '<div>内容</div>',
+        },
+      })
+      expect(wrapper.props('value')).toBe('10')
+    })
+
+    it('value 为数字时应该正确显示', () => {
+      const wrapper = mount(Badge, {
+        props: {
+          value: 99,
+        },
+        slots: {
+          default: '<div>内容</div>',
+        },
+      })
+      expect(wrapper.props('value')).toBe(99)
+    })
+
+    it('maxvalue 属性应该传递', () => {
+      const wrapper = mount(Badge, {
+        props: {
+          value: 100,
+          maxvalue: 99,
+        },
+        slots: {
+          default: '<div>内容</div>',
+        },
+      })
+      expect(wrapper.props('maxvalue')).toBe(99)
+    })
+
+    it('type 属性应诤传递', () => {
+      const wrapper = mount(Badge, {
+        props: {
+          value: '5',
+          type: 'danger',
+        },
+        slots: {
+          default: '<div>内容</div>',
+        },
+      })
+      expect(wrapper.props('type')).toBe('danger')
+    })
+
+    it('variant 属性应该传递', () => {
+      const wrapper = mount(Badge, {
+        props: {
+          value: '5',
+          variant: 'empty',
+        },
+        slots: {
+          default: '<div>内容</div>',
+        },
+      })
+      expect(wrapper.props('variant')).toBe('empty')
+    })
+
+    it('hidden 属性为 true 时应该传递', () => {
+      const wrapper = mount(Badge, {
+        props: {
+          value: '5',
+          hidden: true,
+        },
+        slots: {
+          default: '<div>内容</div>',
+        },
+      })
+      expect(wrapper.props('hidden')).toBe(true)
+    })
+  })
+
+  describe('插槽', () => {
+    it('应该支持默认插槽', async () => {
+      const wrapper = mount(Badge, {
+        props: {
+          value: '5',
+        },
+        slots: {
+          default: '<span class="custom-content">自定义内容</span>',
+        },
+      })
+
+      expect(wrapper.find('.custom-content').exists()).toBe(true)
+      expect(wrapper.find('.custom-content').text()).toBe('自定义内容')
+    })
+  })
+
+  describe('组合场景', () => {
+    it('应该支持同时设置多个属性', () => {
+      const wrapper = mount(Badge, {
+        props: {
+          value: 200,
+          maxvalue: 99,
+          type: 'warning',
+          variant: 'fantasy',
+        },
+        slots: {
+          default: '<button>消息</button>',
+        },
+      })
+
+      expect(wrapper.props('value')).toBe(200)
+      expect(wrapper.props('maxvalue')).toBe(99)
+      expect(wrapper.props('type')).toBe('warning')
+      expect(wrapper.props('variant')).toBe('fantasy')
+    })
+  })
+})

package/packages/components/badge/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 徽章
+ * @author: MC.Yang
+ */
+import _Badge from "./src/badge.vue"
+import {withInstall} from "@bin-ui/tools";
+
+const Badge = withInstall(_Badge);
+
+export type PBadgeInstance = InstanceType<typeof _Badge>;
+
+export default {Badge};
+export {Badge};

package/packages/components/badge/src/badge.ts

@@ -0,0 +1,95 @@
+/**
+ * @file Badge 徽章组件的类型定义文件
+ * @description 定义徽章组件的所有属性和类型
+ * @author MC.Yang
+ * @see {@link https://tdesign.tencent.com/vue-next/components/badge TDesign Badge}
+ */
+import { BadgeType } from "@bin-ui/tools";
+import { PropType } from "vue";
+
+/**
+ * 徽章组件属性定义
+ * @description 包含徽章的所有可配置属性
+ * @example
+ * ```vue
+ * <p-badge
+ *   :value="12"
+ *   type="danger"
+ *   :maxvalue="99"
+ * >
+ *   <p-button>消息</p-button>
+ * </p-badge>
+ * ```
+ */
+export const PBadgeProps = {
+
+    /**
+     * @property {BadgeType} type - 徽章类型
+     * @description 控制徽章的颜色主题
+     * @default undefined (默认主题)
+     * @values 'success' | 'info' | 'warning' | 'danger' | 'primary'
+     * @example
+     * <p-badge type="danger" value="5">
+     *   <p-icon target="bell" />
+     * </p-badge>
+     */
+    type: String as PropType<BadgeType>,
+
+    /**
+     * @property {string} variant - 徽章的表现形式
+     * @description 控制徽章的视觉风格
+     * @default undefined (默认实心徽章)
+     * @values 'empty' | 'fantasy'
+     * - empty: 空心徽章，仅有边框
+     * - fantasy: 幻彩徽章，渐变色效果
+     * @example
+     * <p-badge variant="empty" value="new">
+     *   <p-button>新闻</p-button>
+     * </p-badge>
+     */
+    variant: String as PropType<'empty' | 'fantasy'>,
+
+    /**
+     * @property {string | number} value - 徽章文本内容
+     * @description 徽章显示的内容，可以是数字或文字
+     * @default undefined
+     * @example
+     * <p-badge :value="12">数字徽章</p-badge>
+     * <p-badge value="new">文字徽章</p-badge>
+     * <p-badge value="hot">热门标签</p-badge>
+     */
+    value: {
+        type: [String, Number] as PropType<string | number>
+    },
+
+    /**
+     * @property {string | number} maxvalue - 最大显示值
+     * @description 当 value 为数字类型且超过此值时，显示为 "maxvalue+"
+     * @default 99
+     * @example
+     * <p-badge :value="100" :maxvalue="99">
+     *   <!-- 显示为 "99+" -->
+     *   <p-button>消息</p-button>
+     * </p-badge>
+     * <p-badge :value="50" :maxvalue="99">
+     *   <!-- 显示为 "50" -->
+     *   <p-button>消息</p-button>
+     * </p-badge>
+     */
+    maxvalue: {
+        type: [String, Number] as PropType<string | number>,
+        default: 99
+    },
+
+    /**
+     * @property {boolean} hidden - 是否隐藏徽章
+     * @description 控制徽章的显示/隐藏状态
+     * @default false
+     * @example
+     * <p-badge :value="count" :hidden="count === 0">
+     *   <p-icon target="message" />
+     * </p-badge>
+     */
+    hidden: Boolean,
+
+}

package/packages/components/badge/src/badge.vue

@@ -0,0 +1,78 @@
+<!--
+  @component Badge 徽章组件
+  @description 出现在按钮、图标旁的数字或状态标记，常用于显示未读消息数量
+  @author MC.Yang
+  @example
+  <p-badge :value="12">
+    <p-button>Messages</p-button>
+  </p-badge>
+  <p-badge value="new" type="danger">
+    <p-button>News</p-button>
+  </p-badge>
+-->
+<template>
+  <!-- 有默认插槽内容时，使用 Partial 组件包装 -->
+  <p-partial
+      v-if="slot.default"
+      ref="target"
+  >
+    <slot></slot>
+  </p-partial>
+  <!-- 没有默认插槽内容时，使用一个占位元素 -->
+  <span v-else ref="target" style="display: inline-block;width: 10px;height: 10px"></span>
+</template>
+<script setup lang="ts">
+import { computed, ref, useSlots, watch } from "vue";
+import PPartial from "../../abstract/src/partial.vue";
+import { toRef } from "vue";
+import { useBadge, useNS } from "@bin-ui/hooks";
+import { isEmpty, isNumber } from "@bin-ui/tools";
+import { PBadgeProps } from "./badge";
+
+// 组件配置
+defineOptions({
+  name: "PBadge",
+  inheritAttrs: false
+})
+
+// BEM 命名空间工具
+const ns = useNS('badge');
+
+// 组件属性
+const props = defineProps({...PBadgeProps});
+
+// 组件插槽
+const slot = useSlots();
+
+// 目标元素引用
+let target = ref<HTMLElement | null>(null);
+
+// 计算徽章显示的值（超过最大值时显示 maxvalue+）
+const val = computed(() => {
+  if (!isEmpty(props.maxvalue) && isNumber(props.value) && props.value > Number(props.maxvalue)) {
+    return `${props.maxvalue}+`;
+  }
+  return props.value;
+})
+
+// 使用 Badge Hook 创建徽章元素
+const { hidden, show, setTxt, stop } = useBadge(target, {
+  value: val,
+  type: toRef(props, 'type'),
+  variant: toRef(props, 'variant'),
+});
+
+// 监听 hidden 属性的变化
+watch(() => props.hidden, (flag) => flag ? hidden() : show())
+
+// 暴露给父组件的方法
+defineExpose({
+  hidden,
+  show,
+  setTxt,
+  stop
+})
+</script>
+
+
+