@kine-design/core 0.0.1-beta.1 → 0.0.1-beta.10

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

@@ -0,0 +1,66 @@
+/**
+ * @description switch api type
+ * @author 阿怪
+ * @date 2022/8/16 23:13
+ * @version v1.0.0
+ *
+ * @name m-switch
+ * @docDescription Switch component with shuimo-ui style.
+ *                  水墨组件的开关组件。
+ *                  slot优先级高于text
+ * @docUrl https://shuimo.design/switch
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type SwitchProps = {
+  /**
+   * @description switch value. 开关绑定值
+   * @type any
+   */
+  modelValue: any,
+  /**
+   * @description switch disabled
+   *              是否禁用
+   * @default false
+   */
+  disabled?: boolean,
+  /**
+   * @description switch disabled
+   *              是否加载中
+   * @default false
+   */
+  loading?: boolean,
+  /**
+   * @description 打开文本
+   * @type string
+   */
+  activeInfo?: string,
+  /**
+   * @description 关闭文本
+   * @type string
+   */
+  inactiveInfo?: string,
+  /**
+   * @description 打开参数
+   * @type string
+   */
+  activeValue?: any,
+  /**
+   * @description 关闭参数
+   * @type string
+   */
+  inactiveValue?: any,
+  /**
+   * @description 是否控制
+   * @type string
+   * @default false
+   */
+  onControl?: boolean
+};
+
+
+export declare type SwitchEvents = {
+  onClick?: (e: MouseEvent) => void
+};
+

package/components/base/switch/useSwitch.tsx

@@ -0,0 +1,80 @@
+/**
+ * @description switch hook
+ * @author 阿怪
+ * @date 2023/4/23 21:34
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+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';
+};
+
+export const getIsActive = (value: SwitchProps['modelValue'], activeValue: SwitchProps['activeValue']) => {
+  return value === activeValue;
+};
+
+
+export function useSwitch<
+  Props extends Record<string, any>,
+>(props: Props, ctx: HookContext) {
+  const activeValue = ref(props.activeValue);
+  const inactiveValue = ref(props.inactiveValue);
+  const { slots, emit } = ctx;
+
+  const isBoolean = computed(() => switchIsBoolean(props.modelValue));
+  // 如果modelValue是布尔值
+  if (isBoolean.value) {
+    // 如果activeValue和inactiveValue都为空
+    if (isEmpty(props.activeValue) && isEmpty(props.inactiveValue)) {
+      activeValue.value = true;
+      inactiveValue.value = false;
+    }
+  }
+
+  const isActive = computed(() => getIsActive(props.modelValue, activeValue.value));
+
+
+  const changeSwitch = () => {
+    if (props.disabled || props.loading) {
+      return;
+    }
+    // 如果不是自定义控制的
+    if (!props.onControl) {
+      // 如果是简单的布尔值
+      if (isBoolean.value) {
+        emit('update:modelValue', !props.modelValue);
+      }
+    }
+    emit('change', !isActive.value ? props.activeValue ?? true : inactiveValue ?? false);
+  };
+
+  const getInfo = (key: keyof Pick<SwitchProps, 'activeInfo' | 'inactiveInfo'>) => {
+    if (slots[key]) {
+      return slots[key]!();
+    }
+    const info = props[key];
+    if (!info) {
+      return;
+    }
+    return <span class="m-switch-span">{info}</span>;
+  };
+  const switchClass = computed(()=>[
+    'm-switch',
+    isActive.value ? 'm-switch-active' : 'm-switch-inactive',
+    { 'm-switch-loading': props.loading },
+    { 'm-switch-disabled': props.disabled },
+  ])
+
+
+  return {
+    getInfo,
+    changeSwitch,
+    switchClass
+  };
+}

package/components/base/tabs/api.ts

@@ -0,0 +1,23 @@
+/**
+ * @description tabs api
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { TabsProps, TabPaneProps } from './props';
+
+export const props: MCOPO<TabsProps> = {
+  modelValue: { type: [String, Number], required: true },
+  items: { type: Array, default: () => [] },
+  type: { type: String as MPropType<'line' | 'card'>, default: 'line' },
+};
+
+export const tabPaneProps: MCOPO<TabPaneProps> = {
+  label: { type: String, required: true },
+  name: { type: [String, Number], required: true },
+  disabled: { type: Boolean, default: false },
+  lazy: { type: Boolean, default: false },
+};

package/components/base/tabs/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @description tabs barrel export
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props, tabPaneProps } from './api';
+import { useTabs } from './useTabs';
+
+export const TabsCore = {
+  props,
+  tabPaneProps,
+  useTabs,
+};
+
+export type { TabsProps, TabPaneProps, TabItem } from './props';

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

@@ -0,0 +1,41 @@
+/**
+ * @description tabs api type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type TabItem = {
+  /** 标签页显示文本 */
+  label: string;
+  /** 标签页唯一标识 */
+  name: string | number;
+  /** 是否禁用 */
+  disabled?: boolean;
+};
+
+export declare type TabsProps = {
+  /** 当前激活的标签页 name */
+  modelValue: string | number;
+  /** 标签页数据（与插槽 API 二选一） */
+  items?: TabItem[];
+  /** 标签页样式类型 */
+  type?: 'line' | 'card';
+};
+
+export declare type TabsEvents = {
+  onChange?: (name: string | number) => void;
+};
+
+export declare type TabPaneProps = {
+  /** 标签页显示文本 */
+  label: string;
+  /** 标签页唯一标识，需与父组件 modelValue 对应 */
+  name: string | number;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 是否懒加载（首次激活才渲染内容） */
+  lazy?: boolean;
+};

package/components/base/tabs/useTabs.ts

@@ -0,0 +1,67 @@
+/**
+ * @description tabs hook
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+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: HookContext) {
+  const { emit } = ctx;
+
+  /** 当前激活的标签名 */
+  const activeTab = computed(() => (props as unknown as TabsProps).modelValue);
+
+  /** 判断某个标签是否为激活状态 */
+  const isActive = (name: string | number) => activeTab.value === name;
+
+  /** 切换标签页，禁用状态下不响应 */
+  const switchTab = (name: string | number, disabled?: boolean) => {
+    if (disabled) {
+      return;
+    }
+    if (name === activeTab.value) {
+      return;
+    }
+    emit('update:modelValue', name);
+    emit('change', name);
+  };
+
+  /** 容器根节点 class */
+  const tabsClass = computed(() => {
+    const type = (props as unknown as TabsProps).type ?? 'line';
+    return [
+      'm-tabs',
+      `m-tabs-${type}`,
+    ];
+  });
+
+  /** 导航栏 class */
+  const navClass = 'm-tabs-nav';
+
+  /** 获取单个导航项的 class */
+  const getNavItemClass = (name: string | number, disabled?: boolean) => [
+    'm-tabs-nav-item',
+    isActive(name) ? 'm-tabs-nav-item-active' : '',
+    disabled ? 'm-tabs-nav-item-disabled' : '',
+  ].filter(Boolean);
+
+  /** 内容区域 class */
+  const contentClass = 'm-tabs-content';
+
+  return {
+    activeTab,
+    isActive,
+    switchTab,
+    tabsClass,
+    navClass,
+    getNavItemClass,
+    contentClass,
+  };
+}

package/components/base/tag/api.ts

@@ -0,0 +1,17 @@
+/**
+ * @description tag api
+ * @author 阿怪
+ * @date 2026/2/27 00:00
+ * @version v1.1.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+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: undefined },
+  closable: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+};

package/components/base/tag/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @description tag core
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props } from './api';
+
+export const TagCore = {
+  props,
+};
+
+export type { TagProps } from './props';

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

@@ -0,0 +1,51 @@
+/**
+ * @description tag props type
+ * @author 阿怪
+ * @date 2026/2/27 00:00
+ * @version v1.1.0
+ *
+ * @name m-tag
+ * @docDescription Tag component.
+ *                 标签组件。
+ * @docUrl https://shuimo.design/tag
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { KineSize } from '../../types/props';
+
+export declare type TagProps = {
+  /**
+   * @description tag type
+   *              标签类型
+   * @type string
+   * @default default
+   * @enum default|primary|success|warning|danger|info
+   */
+  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  /**
+   * @description tag size
+   *              标签尺寸
+   * @type string
+   * @default medium
+   * @enum large|medium|small
+   */
+  size?: KineSize;
+  /**
+   * @description 是否显示关闭按钮
+   * @type boolean
+   * @default false
+   */
+  closable?: boolean;
+  /**
+   * @description 是否禁用
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean;
+};
+
+export declare type TagEmits = {
+  onClose?: (e: MouseEvent) => void;
+  onClick?: (e: MouseEvent) => void;
+};

package/components/base/timePicker/__tests__/useTimePicker.test.ts

@@ -0,0 +1,124 @@
+/**
+ * @description useTimePicker 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it } from 'vitest';
+import { useTimePicker, generateColumn } from '../useTimePicker';
+
+describe('generateColumn', () => {
+  it('生成 24 小时列', () => {
+    expect(generateColumn(24, 1)).toHaveLength(24);
+  });
+
+  it('生成 60 分钟列，步进 5', () => {
+    expect(generateColumn(60, 5)).toEqual([0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]);
+  });
+
+  // step=0 会导致 for 循环条件 i += 0 永远不推进，造成死循环。
+  // 源码无守卫，此处跳过并记录风险，避免测试挂起。
+  it.skip('step=0 会导致死循环（源码未做守卫）', () => {
+    // generateColumn(24, 0) — 无限循环，不可执行
+  });
+});
+
+describe('useTimePicker', () => {
+  const defaultProps = {
+    modelValue: undefined as string | undefined,
+    showSeconds: true,
+    format: '',
+    placeholder: '请选择时间...',
+    hourStep: 1,
+    minuteStep: 1,
+    secondStep: 1,
+  };
+
+  it('初始化空值显示 placeholder', () => {
+    const tp = useTimePicker({ ...defaultProps });
+    expect(tp.displayValue.value).toBe('请选择时间...');
+    expect(tp.spanClass.value).toContain('m-time-picker-placeholder');
+  });
+
+  it('初始化有效时间正确解析', () => {
+    const tp = useTimePicker({ ...defaultProps, modelValue: '14:30:00' });
+    expect(tp.timeRef.value.hours).toBe(14);
+    expect(tp.timeRef.value.minutes).toBe(30);
+    expect(tp.timeRef.value.seconds).toBe(0);
+    expect(tp.displayValue.value).toBe('14:30:00');
+  });
+
+  it('解析 HH:mm 格式', () => {
+    const tp = useTimePicker({ ...defaultProps, modelValue: '08:15' });
+    expect(tp.timeRef.value.hours).toBe(8);
+    expect(tp.timeRef.value.minutes).toBe(15);
+  });
+
+  it('updateTimeRef 更新状态', () => {
+    const tp = useTimePicker({ ...defaultProps });
+    tp.updateTimeRef('22:45:30');
+
+    expect(tp.timeRef.value.hours).toBe(22);
+    expect(tp.timeRef.value.minutes).toBe(45);
+    expect(tp.timeRef.value.seconds).toBe(30);
+  });
+
+  it('updateTimeRef 空值恢复 placeholder', () => {
+    const tp = useTimePicker({ ...defaultProps, modelValue: '10:00:00' });
+    tp.updateTimeRef('');
+    expect(tp.displayValue.value).toBe('请选择时间...');
+  });
+
+  it('selectHour 更新小时并刷新显示', () => {
+    const tp = useTimePicker({ ...defaultProps, modelValue: '10:00:00' });
+    tp.selectHour(15);
+
+    expect(tp.timeRef.value.hours).toBe(15);
+    expect(tp.displayValue.value).toContain('15');
+    expect(tp.spanClass.value).not.toContain('m-time-picker-placeholder');
+  });
+
+  it('selectMinute 更新分钟', () => {
+    const tp = useTimePicker({ ...defaultProps, modelValue: '10:00:00' });
+    tp.selectMinute(30);
+    expect(tp.timeRef.value.minutes).toBe(30);
+  });
+
+  it('selectSecond 更新秒', () => {
+    const tp = useTimePicker({ ...defaultProps, modelValue: '10:00:00' });
+    tp.selectSecond(45);
+    expect(tp.timeRef.value.seconds).toBe(45);
+  });
+
+  it('getValue 返回格式化时间', () => {
+    const tp = useTimePicker({ ...defaultProps, modelValue: '10:30:45' });
+    expect(tp.getValue()).toBe('10:30:45');
+  });
+
+  it('showSeconds=false 时格式为 HH:mm', () => {
+    const tp = useTimePicker({ ...defaultProps, showSeconds: false, modelValue: '10:30:45' });
+    expect(tp.getValue()).toBe('10:30');
+  });
+
+  it('自定义 format', () => {
+    const tp = useTimePicker({ ...defaultProps, format: 'HH-mm-ss', modelValue: '10:30:45' });
+    expect(tp.displayValue.value).toBe('10-30-45');
+  });
+
+  it('hoursColumn 按 hourStep 生成', () => {
+    const tp = useTimePicker({ ...defaultProps, hourStep: 2 });
+    expect(tp.hoursColumn.value).toEqual([0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]);
+  });
+
+  it('minutesColumn 按 minuteStep 生成', () => {
+    const tp = useTimePicker({ ...defaultProps, minuteStep: 15 });
+    expect(tp.minutesColumn.value).toEqual([0, 15, 30, 45]);
+  });
+
+  it('secondsColumn 按 secondStep 生成', () => {
+    const tp = useTimePicker({ ...defaultProps, secondStep: 30 });
+    expect(tp.secondsColumn.value).toEqual([0, 30]);
+  });
+});

package/components/base/timePicker/api.ts

@@ -0,0 +1,24 @@
+/**
+ * @description timePicker api
+ * @author 阿怪
+ * @date 2026/2/27
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { TimePickerProps } from './props';
+
+export const props: MCOPO<TimePickerProps> = {
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '请选择时间...' },
+  format: { type: String, default: undefined },
+  disabled: { type: Boolean, default: false },
+  showSeconds: { type: Boolean, default: true },
+  hourStep: { type: Number, default: 1 },
+  minuteStep: { type: Number, default: 1 },
+  secondStep: { type: Number, default: 1 },
+  readonly: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
+  size: { type: String as unknown as MPropType<NonNullable<TimePickerProps['size']>>, default: undefined },
+};

package/components/base/timePicker/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @description timePicker core 导出
+ * @author 阿怪
+ * @date 2026/2/27
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props } from './api';
+import { useTimePicker } from './useTimePicker';
+
+export const TimePickerCore = {
+  props,
+  useTimePicker,
+};
+
+export type { TimePickerProps, TimeRefType } from './props';
+export { useTimePicker, generateColumn } from './useTimePicker';

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

@@ -0,0 +1,86 @@
+/**
+ * @description timePicker props 类型定义
+ * @author 阿怪
+ * @date 2026/2/27
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { KineSize } from '../../types/props';
+
+export declare type TimePickerProps = {
+  /**
+   * @description 时间值（字符串，如 "14:30:00"）
+   * @type string
+   * @default ''
+   */
+  modelValue?: string;
+  /**
+   * @description 提示文字
+   * @type string
+   * @default '请选择时间...'
+   */
+  placeholder?: string;
+  /**
+   * @description 时间格式
+   * @type string
+   * @default 'HH:mm:ss'
+   */
+  format?: string;
+  /**
+   * @description 是否禁用
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * @description 是否显示秒列
+   * @type boolean
+   * @default true
+   */
+  showSeconds?: boolean;
+  /**
+   * @description 小时步长
+   * @type number
+   * @default 1
+   */
+  hourStep?: number;
+  /**
+   * @description 分钟步长
+   * @type number
+   * @default 1
+   */
+  minuteStep?: number;
+  /**
+   * @description 秒步长
+   * @type number
+   * @default 1
+   */
+  secondStep?: number;
+  /**
+   * @description 是否只读
+   * @type boolean
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * @description whether to show clear button. 是否可清空
+   * @type boolean
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * @description 尺寸
+   * @type KineSize
+   * @default undefined
+   */
+  size?: KineSize;
+};
+
+/** 时间内部引用 */
+export type TimeRefType = {
+  hours: number;
+  minutes: number;
+  seconds: number;
+};