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

package/packages/components/grid/src/col.ts

@@ -0,0 +1,43 @@
+/*
+ * @description: 栅格 Col
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+
+/**
+ * 栅格 Col Props
+ */
+export const PColProps = {
+
+    /**
+     * @description 栅格占位格数，为 0 时相当于 display: none
+     */
+    span: {
+        type: [String, Number] as PropType<string | number>,
+        default: 1,
+        validator: (val: any) => {
+            const _ = Number.parseInt(val);
+            return 0 <= _ && _ <= 24;
+        }
+    },
+
+    /**
+     * @description 栅格左侧的间隔格数，间隔内不可以有栅格
+     */
+    offset: {
+        type: [String, Number] as PropType<string | number>,
+        default:0,
+        validator: (val: any) => {
+            const _ = Number.parseInt(val);
+            return 0 <= _ && _ <= 24;
+        }
+    },
+
+    /**
+     * @description 自定义元素标签
+     */
+    tag: {
+        type: String,
+        default: 'div'
+    }
+}

package/packages/components/grid/src/col.vue

@@ -0,0 +1,33 @@
+<template>
+  <component
+      :is="props.tag"
+      :class="classes"
+  >
+    <slot/>
+  </component>
+</template>
+
+<script setup lang="ts">
+import {useNS} from "@bin-ui/hooks";
+import {PColProps} from "./col";
+import {computed} from "vue";
+
+defineOptions({
+  name: 'PCol',
+  inheritAttrs: true,
+})
+
+const ns = useNS('col');
+const props = defineProps(PColProps);
+
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.bb('span', props.span as string),
+    ns.bb('offset', props.offset as string),
+  ]
+})
+
+</script>
+
+

package/packages/components/grid/src/row.ts

@@ -0,0 +1,54 @@
+/*
+ * @description: 栅格 Row
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {isNumber} from "@bin-ui/tools";
+
+/**
+ * 纵向对齐方式
+ */
+type Vertical = 'center' | 'stretch' | 'flex-start' | 'flex-end' | 'baseline';
+/**
+ * 布局下的水平排列方式
+ */
+type Horizontal = 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+
+/**
+ * 栅格 Row Props
+ */
+export const PRowProps = {
+
+    /**
+     * @description 栅格间隔
+     */
+    gutter:{
+        type:[Number, String] as PropType<string | number>,
+        default:0,
+        validator:(val:any) => isNumber(Number.parseInt(val))
+    },
+
+    /**
+     * @description 纵向对齐方式
+     */
+    align:{
+        type: String as PropType<Vertical>,
+        default:'stretch',
+    },
+
+    /**
+     * @description flex 布局下的水平排列方式
+     */
+    justify:{
+        type:String as PropType<Horizontal>,
+        default:'flex-start',
+    },
+
+    /**
+     * @description 自定义元素标签
+     */
+    tag:{
+        type:String,
+        default:'div'
+    }
+}

package/packages/components/grid/src/row.vue

@@ -0,0 +1,36 @@
+<template>
+  <component
+      :is="props.tag"
+      :class="ns.namespace"
+      :style="style"
+      v-bind="$attrs"
+  >
+    <slot></slot>
+  </component>
+</template>
+<script setup lang="ts">
+import {computed} from "vue";
+import {PRowProps} from "./row.ts";
+import {useNS} from "@bin-ui/hooks";
+import {px} from "@bin-ui/tools";
+
+defineOptions({
+  name: 'PRow',
+  inheritAttrs: false
+})
+
+const ns = useNS('row');
+const props = defineProps({...PRowProps});
+
+const style = computed(() => {
+  return {
+    [ns.cssVar('gutter')]: px(props.gutter),
+    [ns.cssVar('justify')]: props.justify,
+    [ns.cssVar('align')]: props.align,
+  };
+})
+
+</script>
+
+
+

package/packages/components/icon/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 图标
+ * @author: MC.Yang
+ */
+import _Icon from "./src/icon.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Icon = withInstall(_Icon);
+
+export type PIconInstance = InstanceType<typeof _Icon>;
+
+export default {Icon};
+export {Icon};

package/packages/components/icon/src/icon.ts

@@ -0,0 +1,47 @@
+/*
+ * @description: 图标
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+
+/**
+ * 图标类型
+ */
+const PIconTypes: string[] = [
+    'i',
+    'label',
+]
+
+/**
+ * 图标 Props
+ */
+export const PIconProps = {
+
+    /**
+     * @description 图标的名称
+     */
+    target: String,
+
+    /**
+     * @description 图标的自定义元素标签
+     */
+    tag: {
+        type: String as PropType<(typeof PIconTypes)[number]>,
+        default: PIconTypes[0]
+    },
+
+    /**
+     * @description 当图标标签为label时, label.for
+     */
+    for: String,
+
+    /**
+     * @description 图标是否会无限旋转
+     */
+    rotating: Boolean,
+
+    /**
+     * @description 图标的颜色
+     */
+    color: String,
+}

package/packages/components/icon/src/icon.vue

@@ -0,0 +1,42 @@
+<template>
+  <component
+      ref="icon"
+      v-if="props.target"
+      :class="classes"
+      :style="style"
+      :is="props.tag"
+      :for="props.for"
+      v-bind="$attrs"
+  ></component>
+</template>
+
+<script setup lang="ts">
+import {PIconProps} from "./icon";
+import {computed, ref} from "vue";
+import {useNS} from "@bin-ui/hooks/useNS";
+
+defineOptions({
+  name: "PIcon",
+  inheritAttrs: false,
+})
+
+const ns = useNS('icon');
+const props = defineProps({...PIconProps});
+const icon = ref<HTMLElement | null>(null);
+
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.is(props.rotating, 'rotating'),
+    "iconfont",
+    `pixel-${props.target}`
+  ]
+})
+
+const style = computed(() => {
+  return{
+    [ns.cssVar('color')]:props.color ? `${props.color}` : 'inherit',
+  }
+})
+
+</script>

package/packages/components/index.ts

@@ -0,0 +1,32 @@
+/*
+ * @description: UI 组件
+ * @author: MC.Yang
+ */
+// 抽象组件
+export * from "./abstract";
+// 基础组件
+export * from "./button";
+export * from "./icon";
+export * from "./link";
+export * from "./floating";
+export * from "./scrollbar";
+// 布局组件
+export * from "./grid";
+export * from "./divider";
+export * from "./layout";
+// 导航组件
+export * from "./dropdown";
+export * from "./menu";
+export * from "./tabs";
+// 消息提醒组件
+export * from "./message";
+export * from "./dialog";
+export * from "./drawer";
+export * from "./popconfirm";
+// 数据展示组件
+export * from "./tooltip";
+export * from "./badge";
+// export * from "./tag";
+// 数据输入组件
+export * from "./input";
+export * from "./switch";

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

@@ -0,0 +1,379 @@
+/**
+ * @description Input 组件测试
+ * @author MC.Yang
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Input from '../src/input.vue'
+import { hasClass } from '../../__tests__/utils'
+
+describe('Input', () => {
+  let wrapper: VueWrapper
+
+  beforeEach(() => {
+    wrapper?.unmount()
+  })
+
+  describe('基础功能', () => {
+    it('应该正确渲染', () => {
+      wrapper = mount(Input, {
+        props: {
+          modelValue: '',
+        },
+      })
+      expect(wrapper.find('input').exists()).toBe(true)
+      expect(wrapper.find('.p-input').exists()).toBe(true)
+    })
+
+    it('应该正确显示占位符', () => {
+      wrapper = mount(Input, {
+        props: {
+          placeholder: '请输入内容',
+        },
+      })
+      expect(wrapper.find('input').attributes('placeholder')).toBe('请输入内容')
+    })
+
+    it('应该正确绑定值', async () => {
+      wrapper = mount(Input, {
+        props: {
+          modelValue: 'test value',
+        },
+      })
+      await nextTick()
+      expect(wrapper.find('input').element.value).toBe('test value')
+    })
+  })
+
+  describe('Props', () => {
+    it('type 属性应该设置输入框类型', () => {
+      wrapper = mount(Input, {
+        props: {
+          type: 'password',
+        },
+      })
+      expect(wrapper.find('input').attributes('type')).toBe('password')
+    })
+
+    it('disabled 属性应该禁用输入框', () => {
+      wrapper = mount(Input, {
+        props: {
+          disabled: true,
+        },
+      })
+      expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+      expect(hasClass(wrapper, 'is-disabled')).toBe(true)
+    })
+
+    it('readonly 属性应该设置只读', () => {
+      wrapper = mount(Input, {
+        props: {
+          readonly: true,
+        },
+      })
+      expect(wrapper.find('input').attributes('readonly')).toBeDefined()
+    })
+
+    it('size 属性应该生效', () => {
+      wrapper = mount(Input, {
+        props: {
+          size: 'large',
+        },
+      })
+      expect(hasClass(wrapper, 'p-input--large')).toBe(true)
+    })
+
+    it('maxLength 属性应该限制最大长度', () => {
+      wrapper = mount(Input, {
+        props: {
+          maxLength: 10,
+        },
+      })
+      expect(wrapper.find('input').attributes('maxlength')).toBe('10')
+    })
+
+    it('minLength 属性应该限制最小长度', () => {
+      wrapper = mount(Input, {
+        props: {
+          minLength: 5,
+        },
+      })
+      expect(wrapper.find('input').attributes('minlength')).toBe('5')
+    })
+
+    it('autofocus 属性应该自动聚焦', () => {
+      wrapper = mount(Input, {
+        props: {
+          autofocus: true,
+        },
+      })
+      expect(wrapper.find('input').attributes('autofocus')).toBeDefined()
+    })
+
+    it('clearable 属性应该显示清除按钮', async () => {
+      wrapper = mount(Input, {
+        props: {
+          modelValue: 'test',
+          clearable: true,
+        },
+      })
+      await nextTick()
+      const clearIcon = wrapper.find('.p-input__icon--clear')
+      expect(clearIcon.exists()).toBe(true)
+    })
+
+    it('showPassword 属性应该显示密码切换按钮', async () => {
+      wrapper = mount(Input, {
+        props: {
+          type: 'password',
+          modelValue: 'password',
+          showPassword: true,
+        },
+      })
+      await nextTick()
+      const eyeIcon = wrapper.find('.p-input__icon--switch')
+      expect(eyeIcon.exists()).toBe(true)
+    })
+
+    it('prefixIcon 应该显示前缀图标', () => {
+      wrapper = mount(Input, {
+        props: {
+          prefixIcon: 'search',
+        },
+      })
+      const prefixIcon = wrapper.find('.p-input__icon--prefix')
+      expect(prefixIcon.exists()).toBe(true)
+    })
+
+    it('suffixIcon 应该显示后缀图标', () => {
+      wrapper = mount(Input, {
+        props: {
+          suffixIcon: 'calendar',
+        },
+      })
+      const suffixIcon = wrapper.find('.p-input__icon--suffix')
+      expect(suffixIcon.exists()).toBe(true)
+    })
+  })
+
+  describe('事件', () => {
+    it('input 事件应该正确触发', async () => {
+      const onInput = vi.fn()
+      wrapper = mount(Input, {
+        props: {
+          modelValue: '',
+          'onUpdate:modelValue': onInput,
+        },
+      })
+
+      const input = wrapper.find('input')
+      await input.setValue('test')
+      expect(onInput).toHaveBeenCalledWith('test')
+    })
+
+    it('change 事件应该正确触发', async () => {
+      const onChange = vi.fn()
+      wrapper = mount(Input, {
+        props: {
+          modelValue: '',
+          onChange,
+        },
+      })
+
+      await wrapper.setProps({ modelValue: 'new value' })
+      await nextTick()
+      expect(onChange).toHaveBeenCalled()
+    })
+
+    it('focus 事件应该正确触发', async () => {
+      const onFocus = vi.fn()
+      wrapper = mount(Input, {
+        props: {
+          onFocus,
+        },
+      })
+
+      await wrapper.find('input').trigger('focus')
+      expect(onFocus).toHaveBeenCalled()
+    })
+
+    it('blur 事件应该正确触发', async () => {
+      const onBlur = vi.fn()
+      wrapper = mount(Input, {
+        props: {
+          onBlur,
+        },
+      })
+
+      await wrapper.find('input').trigger('blur')
+      expect(onBlur).toHaveBeenCalled()
+    })
+
+    it('clear 事件应该正确触发', async () => {
+      const onClear = vi.fn()
+      wrapper = mount(Input, {
+        props: {
+          modelValue: 'test',
+          clearable: true,
+          onClear,
+        },
+      })
+
+      await nextTick()
+      const clearIcon = wrapper.find('.p-input__icon--clear')
+      await clearIcon.trigger('click')
+      expect(onClear).toHaveBeenCalled()
+    })
+  })
+
+  describe('插槽', () => {
+    it('应该支持 prefixSlot 插槽', () => {
+      wrapper = mount(Input, {
+        slots: {
+          prefixSlot: '<span class="custom-prefix">前缀</span>',
+        },
+      })
+      expect(wrapper.find('.custom-prefix').text()).toBe('前缀')
+      expect(wrapper.find('.p-input__slot--prefix').exists()).toBe(true)
+    })
+
+    it('应该支持 suffixSlot 插槽', () => {
+      wrapper = mount(Input, {
+        slots: {
+          suffixSlot: '<span class="custom-suffix">后缀</span>',
+        },
+      })
+      expect(wrapper.find('.custom-suffix').text()).toBe('后缀')
+      expect(wrapper.find('.p-input__slot--suffix').exists()).toBe(true)
+    })
+  })
+
+  describe('方法', () => {
+    it('focus 方法应该聚焦输入框', async () => {
+      wrapper = mount(Input, {
+        attachTo: document.body,
+      })
+
+      const input = wrapper.find('input').element as HTMLInputElement
+      input.focus()
+      await nextTick()
+      expect(document.activeElement).toBe(input)
+    })
+
+    it('blur 方法应该失焦输入框', async () => {
+      wrapper = mount(Input, {
+        attachTo: document.body,
+      })
+
+      const input = wrapper.find('input').element as HTMLInputElement
+      input.focus()
+      await nextTick()
+      input.blur()
+      await nextTick()
+      expect(document.activeElement).not.toBe(input)
+    })
+
+    it('clear 功能应该清空输入框', async () => {
+      const onUpdate = vi.fn()
+      const onClear = vi.fn()
+      wrapper = mount(Input, {
+        props: {
+          modelValue: 'test',
+          clearable: true,
+          'onUpdate:modelValue': onUpdate,
+          onClear,
+        },
+      })
+
+      await nextTick()
+      const clearIcon = wrapper.find('.p-input__icon--clear')
+      await clearIcon.trigger('click')
+      expect(onClear).toHaveBeenCalled()
+      expect(onUpdate).toHaveBeenCalledWith('')
+    })
+
+    it('select 方法应该选中输入框内容', async () => {
+      wrapper = mount(Input, {
+        props: {
+          modelValue: 'test',
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+      const input = wrapper.find('input').element as HTMLInputElement
+      input.select()
+      expect(input.selectionStart).toBe(0)
+      expect(input.selectionEnd).toBe(4)
+    })
+  })
+
+  describe('特殊场景', () => {
+    it('禁用状态下不应该响应输入', async () => {
+      const onInput = vi.fn()
+      wrapper = mount(Input, {
+        props: {
+          disabled: true,
+          'onUpdate:modelValue': onInput,
+        },
+      })
+
+      const input = wrapper.find('input')
+      await input.setValue('test')
+      // 虽然 setValue 会改变值，但实际上 disabled 的 input 不会触发 input 事件
+      expect(input.element.disabled).toBe(true)
+    })
+
+    it('只读状态下不应该响应输入', async () => {
+      const onUpdate = vi.fn()
+      wrapper = mount(Input, {
+        props: {
+          readonly: true,
+          modelValue: '',
+          'onUpdate:modelValue': onUpdate,
+        },
+      })
+
+      const input = wrapper.find('input')
+      await input.trigger('input')
+      // readonly 状态下不应该更新值
+      expect(input.element.readOnly).toBe(true)
+    })
+
+    it('密码显示切换应该正常工作', async () => {
+      wrapper = mount(Input, {
+        props: {
+          type: 'password',
+          modelValue: 'password',
+          showPassword: true,
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+      const input = wrapper.find('input').element as HTMLInputElement
+      expect(input.type).toBe('password')
+
+      const eyeIcon = wrapper.find('.p-input__icon--switch')
+      await eyeIcon.trigger('click')
+      await nextTick()
+      expect(input.type).toBe('text')
+
+      await eyeIcon.trigger('click')
+      await nextTick()
+      expect(input.type).toBe('password')
+    })
+  })
+
+  describe('可访问性', () => {
+    it('应该支持 id 属性', () => {
+      wrapper = mount(Input, {
+        props: {
+          id: 'custom-input',
+        },
+      })
+      expect(wrapper.find('input').attributes('id')).toBe('custom-input')
+    })
+  })
+})

package/packages/components/input/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 输入框
+ * @author: MC.Yang
+ */
+import _Input from "./src/input.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Input = withInstall(_Input);
+
+export type PInputInstance = InstanceType<typeof _Input>;
+
+export default {Input};
+export {Input};