@kine-design/core 0.0.1-beta.4 → 0.0.1-beta.6

package/components/base/input/useInput.ts

@@ -6,12 +6,14 @@
  *
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
+
 import { HTMLElementEvent } from '../../types/template';
+import { type HookContext } from '../../types/hook';
 
 
 export function useInput<
   Props extends Record<string, any>,
->(props: Props, ctx: any) {
+>(props: Props, ctx: HookContext) {
 
   const isInput = props.type !== 'textarea';
   const inputType = isInput ? 'input' : 'textarea';
@@ -25,6 +27,7 @@ export function useInput<
     disabled: props.disabled,
     type: props.type,
     readOnly: props.readonly,
+    maxLength: props.maxlength,
   }
 
   const onInput = (e: HTMLElementEvent<HTMLInputElement>)=>{
@@ -40,6 +43,12 @@ export function useInput<
     ctx.emit('blur', e);
   }
 
+  const onClear = () => {
+    ctx.emit('update:modelValue', '');
+    ctx.emit('input', '');
+    ctx.emit('clear');
+  }
+
   return {
     baseProps,
     inputType,
@@ -47,7 +56,8 @@ export function useInput<
     rowInfo,
     onInput,
     onFocus,
-    onBlur
+    onBlur,
+    onClear,
   }
 
 }

package/components/base/inputNumber/__tests__/useInputNumber.test.ts

@@ -0,0 +1,153 @@
+/**
+ * @description useInputNumber 归一 / emit 保真单测
+ * @author 阿怪
+ * @date 2026/4/24
+ * @version v1.0.0
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { nextTick, reactive } from 'vue';
+import { useInputNumber } from '../useInputNumber';
+import type { InputNumberProps } from '../props';
+import type { HookContext } from '../../../types/hook';
+
+type PropsShape = Required<InputNumberProps>;
+
+const defaultProps: PropsShape = {
+  modelValue: null,
+  max: Infinity,
+  min: -Infinity,
+  step: 1,
+  precision: 0,
+  disabled: false,
+  readonly: false,
+  placeholder: '',
+  controls: true,
+  size: 'medium' as PropsShape['size'],
+};
+
+function setup(overrides: Partial<PropsShape> = {}) {
+  const props = reactive<PropsShape>({ ...defaultProps, ...overrides }) as PropsShape;
+  const emit = vi.fn();
+  const ctx: HookContext = { emit, slots: {} };
+  const hook = useInputNumber(props, ctx);
+  return { props, emit, ...hook };
+}
+
+const lastUpdate = (emit: ReturnType<typeof vi.fn>) =>
+  emit.mock.calls.filter((c: unknown[]) => c[0] === 'update:modelValue').at(-1)!;
+
+describe('useInputNumber emit 归一', () => {
+  it('number 入 → number 出', () => {
+    const { validate, emit } = setup({ modelValue: 1 });
+    validate(5);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(5);
+    expect(typeof call[1]).toBe('number');
+  });
+
+  it('string 入 → string 出', () => {
+    const { validate, emit } = setup({ modelValue: '1' });
+    validate('5');
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe('5');
+    expect(typeof call[1]).toBe('string');
+  });
+
+  it('null 入 → 用户输入整数后默认 number 出', () => {
+    const { validate, emit } = setup({ modelValue: null });
+    validate(3);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(3);
+    expect(typeof call[1]).toBe('number');
+  });
+
+  it('空字符串 currentValue → emit null（不是空串）', () => {
+    const { validate, emit } = setup({ modelValue: 5 });
+    validate(null);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBeNull();
+  });
+
+  it('中间态 "-" → emit null（未输完）', () => {
+    const { validate, emit } = setup({ modelValue: null });
+    validate('-');
+    const call = lastUpdate(emit);
+    expect(call[1]).toBeNull();
+  });
+
+  it('输入 "0." → emit 0（末尾小数点归一）', () => {
+    const { validate, emit } = setup({ modelValue: null, precision: 2 });
+    validate('0.');
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(0);
+  });
+
+  it('非法字符串 → emit 原样不变（validate 不触发 emit）', () => {
+    const { validate, emit } = setup({ modelValue: 5 });
+    emit.mockClear();
+    validate('abc' as unknown as number);
+    // 非法输入不触发 emit
+    expect(emit).not.toHaveBeenCalled();
+  });
+
+  it('跨类型 watch：外部传 1（number）→ 不会重复 emit 成 string', async () => {
+    const { props, emit } = setup({ modelValue: 1 });
+    emit.mockClear();
+    // 模拟外部 bind 把内部 string '1' 回传 number 1：这在真实 v-model 里是 watch 触发的
+    props.modelValue = 1;
+    await nextTick();
+    // 内部 '1' 和外部 1 的 String 归一相等，不该触发 emit
+    expect(emit).not.toHaveBeenCalled();
+  });
+
+  it('blur 末尾小数点归一：内部 "1." → emit 1', () => {
+    const { handleInputChange, handleInputBlur, emit } = setup({ modelValue: null, precision: 2 });
+    handleInputChange({ target: { value: '1.' } } as never);
+    emit.mockClear();
+    handleInputBlur();
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(1);
+  });
+
+  it('max 截断仍然保真类型', () => {
+    const { validate, emit } = setup({ modelValue: '10', max: 100 });
+    validate(150);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe('100');
+    expect(typeof call[1]).toBe('string');
+  });
+
+  it('min 截断仍然保真类型', () => {
+    const { validate, emit } = setup({ modelValue: 10, min: 0 });
+    validate(-5);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(0);
+    expect(typeof call[1]).toBe('number');
+  });
+});
+
+describe('useInputNumber 输入流程', () => {
+  it('合法数字输入触发 emit', () => {
+    const { handleInputChange, emit } = setup({ modelValue: 0 });
+    emit.mockClear();
+    handleInputChange({ target: { value: '88' } } as never);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(88);
+  });
+
+  it('increment 按 step 递增', () => {
+    const { increment, emit } = setup({ modelValue: 5, step: 3 });
+    emit.mockClear();
+    increment();
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(8);
+  });
+
+  it('decrement 按 step 递减', () => {
+    const { decrement, emit } = setup({ modelValue: 5, step: 2 });
+    emit.mockClear();
+    decrement();
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(3);
+  });
+});

package/components/base/inputNumber/api.ts

@@ -6,7 +6,7 @@
  *
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
-import { MCOPO } from '../../types/props';
+import { MCOPO, MPropType } from '../../types/props';
 import { InputNumberProps } from './props';
 
 export const props: MCOPO<InputNumberProps> = {
@@ -19,4 +19,5 @@ export const props: MCOPO<InputNumberProps> = {
   step: { type: Number, default: 1 },
   precision: { type: Number, default: 0 },
   controls: { type: Boolean, default: true },
+  size: { type: String as unknown as MPropType<NonNullable<InputNumberProps['size']>>, default: undefined },
 };

package/components/base/inputNumber/props.d.ts

@@ -12,6 +12,8 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 
+import { KineSize } from '../../types/props';
+
 export declare type InputNumberProps = {
   /**
    * @description input-number modelValue
@@ -66,5 +68,11 @@ export declare type InputNumberProps = {
    * @type boolean
    * @default true
    */
-  controls?: boolean
+  controls?: boolean,
+  /**
+   * @description 尺寸
+   * @type KineSize
+   * @default undefined
+   */
+  size?: KineSize
 };

package/components/base/inputNumber/useInputNumber.ts

@@ -2,28 +2,66 @@
  * @description inputNumber composable
  * @author 阿怪
  * @date 2026/2/25 00:00
- * @version v1.1.0
+ * @version v1.2.0
  *
  * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * v1.2.0 changelog:
+ * - emit 类型保真：string 入 string 出，number 入 number 出；空值一律 emit null
+ * - 内部 currentValue 保留中间态（'-' / '0.' / ''），仅在 emit 时归一
  */
 import { ref, watch } from 'vue';
 import { InputNumberProps } from './props';
 import { HTMLElementEvent } from '../../types/template';
+import { type HookContext } from '../../types/hook';
 
 export type InputNumber = string | number | null;
 
-export function useInputNumber(props: Required<InputNumberProps>, ctx: any) {
+/** 用户输入中间态：不构成可 emit 的数字，emit null */
+const MID_STATES = new Set(['', '-', '.', '-.']);
+
+/**
+ * 把任意内部值归一为 number | null。
+ * 规则：
+ * - null/undefined/中间态 → null
+ * - 末尾小数点去掉（'1.' → '1'）
+ * - 非法 NaN → null
+ * - 其他 → Number(v)
+ */
+const normalize = (v: string | number | null | undefined): number | null => {
+  if (v === null || v === undefined) return null;
+  const s = String(v);
+  if (MID_STATES.has(s)) return null;
+  const cleaned = s.endsWith('.') ? s.slice(0, -1) : s;
+  const n = Number(cleaned);
+  return Number.isNaN(n) ? null : n;
+};
+
+export function useInputNumber(props: Required<InputNumberProps>, ctx: HookContext) {
   const currentValue = ref<string | number>(props.modelValue ?? '');
 
+  /**
+   * 按外部 modelValue 的当前 typeof 决定出参类型，保真 v-model 声明。
+   * - null/undefined → null
+   * - 外部当前是 string → emit String(n)
+   * - 否则 → emit n（默认 number）
+   */
+  const toEmitValue = (n: number | null): number | string | null => {
+    if (n === null) return null;
+    return typeof props.modelValue === 'string' ? String(n) : n;
+  };
+
   const updateInput = (oldVal: InputNumber) => {
-    ctx.emit('update:modelValue', currentValue.value);
-    ctx.emit('change', currentValue.value, oldVal);
+    const out = toEmitValue(normalize(currentValue.value));
+    ctx.emit('update:modelValue', out);
+    ctx.emit('change', out, oldVal);
   };
 
   const setCurrentValue = (newVal: string | number, e?: HTMLElementEvent<HTMLInputElement>) => {
     const oldVal = currentValue.value;
     const { min, max, precision } = props;
-    if (oldVal === newVal) {
+    // 字符串归一比较：'1' 和 1 视为同值，避免跨类型重复 emit；'-' vs '-' 也命中
+    if (String(oldVal) === String(newVal)) {
       return;
     } else if (+newVal >= +max) {
       // 超过最大值，截断到 max
@@ -75,18 +113,22 @@ export function useInputNumber(props: Required<InputNumberProps>, ctx: any) {
   };
 
   const handleInputBlur = () => {
+    const oldVal = currentValue.value;
     // blur 时清理末尾的负号
     if (currentValue.value === '-') {
       currentValue.value = '';
     } else if (currentValue.value === '-0') {
       currentValue.value = 0;
+    } else {
+      const str = String(currentValue.value);
+      // 清理末尾小数点
+      if (str.indexOf('.') === str.length - 1 && str.length > 0) {
+        currentValue.value = str.replace(/\.$/g, '');
+      }
     }
-    const oldVal = currentValue.value;
-    const str = String(currentValue.value);
-    // 清理末尾小数点
-    currentValue.value = str.indexOf('.') === str.length - 1
-      ? str.replace(/\.$/g, '')
-      : currentValue.value;
+    // blur 后内部归一到数字（避免 '1' 和 1 并存）
+    const n = normalize(currentValue.value);
+    currentValue.value = n === null ? '' : n;
     updateInput(oldVal);
   };
 

package/components/base/loading/api.ts

@@ -11,7 +11,7 @@ import { LoadingProps } from './props';
 
 export const props: MCOPO<LoadingProps> = {
   modelValue: { type: Boolean, default: false },
-  size: { type: String as unknown as MPropType<NonNullable<LoadingProps['size']>>, default: 'medium' },
+  size: { type: String as unknown as MPropType<NonNullable<LoadingProps['size']>>, default: undefined },
   mask: { type: Boolean, default: false },
   text: { type: String, default: undefined },
 };

package/components/base/loading/props.d.ts

@@ -11,6 +11,8 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 
+import { KineSize } from '../../types/props';
+
 export declare type LoadingProps = {
   /**
    * @description 是否显示 loading
@@ -23,7 +25,7 @@ export declare type LoadingProps = {
    * @type 'large' | 'medium' | 'small'
    * @default 'medium'
    */
-  size?: 'large' | 'medium' | 'small';
+  size?: KineSize;
   /**
    * @description 是否显示遮罩层（覆盖父元素）
    * @type boolean

package/components/base/popover/usePopover.ts

@@ -10,6 +10,7 @@ import { Placement, PopperConfig, PositionStyle, usePopper } from '../../../comp
 import useClickAway from '../../../compositions/popper/useClickAway';
 import { PopoverProps } from './props';
 import { onBeforeUnmount, onMounted, ref, type Ref, shallowRef } from 'vue';
+import { type HookContext } from '../../types/hook';
 
 
 export type IPopper = ReturnType<typeof usePopper>;
@@ -103,7 +104,7 @@ export class PopoverImpl {
 }
 
 
-export function usePopover(props: Required<PopoverProps>, ctx: any) {
+export function usePopover(props: Required<PopoverProps>, ctx: HookContext) {
   const style = ref();
   const arrowStyle = ref();
   const placement = ref<Placement>(props.placement);
@@ -175,8 +176,8 @@ export function usePopover(props: Required<PopoverProps>, ctx: any) {
 
   onBeforeUnmount(() => {
     if (clickAwayInstance) {
-      const { onBeforeDestroy } = clickAwayInstance;
-      onBeforeDestroy();
+      const { onBeforeUnmount } = clickAwayInstance;
+      onBeforeUnmount();
     }
     instance?.destroy();
   });

package/components/base/progress/api.ts

@@ -7,12 +7,14 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 import { MCOPO, MPropType } from '../../types/props';
-import { ProgressProps, ProgressStatus } from './props';
+import { ProgressProps, ProgressStatus, ProgressType } from './props';
 
 export const props: MCOPO<ProgressProps> = {
+  type: { type: String as unknown as MPropType<ProgressType>, default: 'line' },
   value: { type: Number, default: 0 },
   max: { type: Number, default: 100 },
   showInfo: { type: Boolean, default: true },
   status: { type: String as unknown as MPropType<ProgressStatus>, default: 'default' },
   strokeWidth: { type: Number, default: 4 },
+  width: { type: Number, default: 80 },
 };

package/components/base/progress/props.d.ts

@@ -14,7 +14,15 @@
 
 export declare type ProgressStatus = 'default' | 'success' | 'warning' | 'danger';
 
+export declare type ProgressType = 'line' | 'circle';
+
 export declare type ProgressProps = {
+  /**
+   * @description progress type. 进度条类型：line 线性 | circle 环形
+   * @type ProgressType
+   * @default 'line'
+   */
+  type?: ProgressType,
   /**
    * @description progress value
    *              进度条的值（0 ~ max）
@@ -50,4 +58,11 @@ export declare type ProgressProps = {
    * @default 4
    */
   strokeWidth?: number,
+  /**
+   * @description circle diameter in px (only for type='circle')
+   *              环形进度条直径（px），仅 type='circle' 时生效
+   * @type number
+   * @default 80
+   */
+  width?: number,
 };

package/components/base/rate/useRate.ts

@@ -7,9 +7,10 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 import { ref } from 'vue';
+import { type HookContext } from '../../types/hook';
 import { RateProps } from './props';
 
-export function useRate(props: Required<RateProps>, emit: (...args: any[]) => void) {
+export function useRate(props: Required<RateProps>, emit: HookContext['emit']) {
   // 悬停预览值，null 表示未悬停
   const hoverValue = ref<number | null>(null);
 

package/components/base/select/api.ts

@@ -28,4 +28,7 @@ export const props: MCOPO<SelectProps> = {
   optionsH: { type: [Number, String], default: undefined },
   needFetch: { type: Boolean, default: false },
   fetch: { type: Function as MPropType<() => Promise<void>>, default: undefined },
+  clearable: { type: Boolean, default: false },
+  size: { type: String as unknown as MPropType<NonNullable<SelectProps['size']>>, default: undefined },
+  loading: { type: Boolean, default: false },
 };

package/components/base/select/props.d.ts

@@ -15,6 +15,8 @@
  * v1.0.2 新增 filterable prop，支持内置搜索过滤 阿怪
  */
 
+import { KineSize } from '../../types/props';
+
 export declare type SelectProps = {
   /**
    * @description select value
@@ -128,5 +130,23 @@ export declare type SelectProps = {
    * @type Function
    * @default undefined
    */
-  fetch?: () => Promise<void>
+  fetch?: () => Promise<void>,
+  /**
+   * @description whether to show clear button. 是否可清空
+   * @type boolean
+   * @default false
+   */
+  clearable?: boolean,
+  /**
+   * @description select size. 选择框尺寸
+   * @type KineSize
+   * @default undefined
+   */
+  size?: KineSize,
+  /**
+   * @description whether to show loading indicator. 是否显示加载中状态
+   * @type boolean
+   * @default false
+   */
+  loading?: boolean,
 };

package/components/base/select/useSelect.ts

@@ -14,6 +14,7 @@
 import { computed, ref, watch, toRef, onBeforeUnmount } from 'vue';
 import { SelectProps } from './props';
 import { useSelectTools } from './useSelectTools';
+import { type HookContext } from '../../types/hook';
 
 export interface SelectOptionItem {
   /** 原始值 */
@@ -24,7 +25,7 @@ export interface SelectOptionItem {
   isSelected: boolean;
 }
 
-export function useSelect(props: SelectProps, ctx: any) {
+export function useSelect(props: SelectProps, ctx: HookContext) {
   const tools = useSelectTools(props);
   const optionsRef = toRef(() => props.options ?? []);
   const modelValueRef = toRef(() => props.modelValue);

package/components/base/slider/api.ts

@@ -6,7 +6,7 @@
  *
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
-import { MCOPO } from '../../types/props';
+import { MCOPO, MPropType } from '../../types/props';
 import { SliderProps } from './props';
 
 export const props: MCOPO<SliderProps> = {
@@ -17,4 +17,6 @@ export const props: MCOPO<SliderProps> = {
   disabled: { type: Boolean, default: false },
   showInfo: { type: Boolean, default: false },
   showStops: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  size: { type: String as unknown as MPropType<NonNullable<SliderProps['size']>>, default: undefined },
 };

package/components/base/slider/props.d.ts

@@ -12,6 +12,8 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 
+import { KineSize } from '../../types/props';
+
 export declare type SliderProps = {
   /**
    * @description slider value
@@ -62,4 +64,16 @@ export declare type SliderProps = {
    * @default false
    */
   showStops?: boolean;
+  /**
+   * @description slider readonly. 是否只读
+   * @type boolean
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * @description 尺寸
+   * @type KineSize
+   * @default undefined
+   */
+  size?: KineSize;
 };

package/components/base/slider/useSlider.ts

@@ -10,8 +10,9 @@ import { onMounted, ref } from 'vue';
 import { SliderProps } from './props';
 import { useElementSize } from '../../../compositions/common/useElementSize.ts';
 import useDrag, { DragOption, DragPosition, InteractEvent } from '../../../compositions/common/useDrag.ts';
+import { type HookContext } from '../../types/hook';
 
-export function useSlider(props: Required<SliderProps>, ctx: any) {
+export function useSlider(props: Required<SliderProps>, ctx: HookContext) {
   const sliderRef = ref<HTMLElement | null>(null);
   const sliderSize = useElementSize(sliderRef);
 
@@ -25,7 +26,10 @@ export function useSlider(props: Required<SliderProps>, ctx: any) {
   const sub = props.max - props.min;
 
   // 处理拖拽移动，计算并约束位置，更新百分比
-  const movePositionHandler = (event: InteractEvent, position: DragPosition) => {
+  const movePositionHandler = (event: InteractEvent, position: DragPosition): DragPosition => {
+    if (props.readonly) {
+      return position;
+    }
     const totalW = sliderSize.w.value - btnW;
 
     let positionX = position.x + event.dx;

package/components/base/steps/__tests__/useSteps.test.ts

@@ -0,0 +1,46 @@
+/**
+ * @description resolveStepStatus 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it } from 'vitest';
+import { resolveStepStatus, type StepsContext } from '../useSteps';
+
+const createCtx = (active: number): StepsContext => ({
+  active,
+  finishStatus: 'finish',
+  processStatus: 'process',
+  total: 4,
+  direction: 'horizontal',
+});
+
+describe('resolveStepStatus', () => {
+  it('显式状态优先', () => {
+    expect(resolveStepStatus(0, 'error', createCtx(2))).toBe('error');
+  });
+
+  it('index < active 返回 finishStatus', () => {
+    expect(resolveStepStatus(0, undefined, createCtx(2))).toBe('finish');
+    expect(resolveStepStatus(1, undefined, createCtx(2))).toBe('finish');
+  });
+
+  it('index === active 返回 processStatus', () => {
+    expect(resolveStepStatus(2, undefined, createCtx(2))).toBe('process');
+  });
+
+  it('index > active 返回 wait', () => {
+    expect(resolveStepStatus(3, undefined, createCtx(2))).toBe('wait');
+  });
+
+  it('active=0 时第一步为 process', () => {
+    expect(resolveStepStatus(0, undefined, createCtx(0))).toBe('process');
+  });
+
+  it('自定义 finishStatus=success', () => {
+    const ctx = { ...createCtx(2), finishStatus: 'success' as const };
+    expect(resolveStepStatus(0, undefined, ctx)).toBe('success');
+  });
+});

package/components/base/switch/useSwitch.tsx

@@ -9,6 +9,7 @@
 import { SwitchProps } from './props';
 import { computed, ref } from 'vue';
 import { isEmpty } from '../../../tools';
+import { type HookContext } from '../../types/hook';
 
 export const switchIsBoolean = (value: SwitchProps['modelValue']) => {
   return typeof value === 'boolean';
@@ -21,7 +22,7 @@ export const getIsActive = (value: SwitchProps['modelValue'], activeValue: Switc
 
 export function useSwitch<
   Props extends Record<string, any>,
->(props: Props, ctx: any) {
+>(props: Props, ctx: HookContext) {
   const activeValue = ref(props.activeValue);
   const inactiveValue = ref(props.inactiveValue);
   const { slots, emit } = ctx;

package/components/base/tabs/useTabs.ts

@@ -8,10 +8,11 @@
  */
 import { computed } from 'vue';
 import { TabsProps } from './props';
+import { type HookContext } from '../../types/hook';
 
 export function useTabs<
   Props extends Record<string, unknown>,
->(props: Props, ctx: any) {
+>(props: Props, ctx: HookContext) {
   const { emit } = ctx;
 
   /** 当前激活的标签名 */

package/components/base/tag/api.ts

@@ -11,7 +11,7 @@ import { TagProps } from './props';
 
 export const props: MCOPO<TagProps> = {
   type: { type: String as MPropType<'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'>, default: 'default' },
-  size: { type: String as MPropType<'large' | 'medium' | 'small'>, default: 'medium' },
+  size: { type: String as MPropType<'large' | 'medium' | 'small'>, default: undefined },
   closable: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
 };