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

package/components/base/steps/api.ts

@@ -0,0 +1,30 @@
+/**
+ * @description steps runtime props 定义
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { StepsProps, StepProps, StepsDirection, StepStatus } from './props';
+
+/**
+ * Steps 容器组件运行时 props
+ */
+export const stepsProps: MCOPO<StepsProps> = {
+  active: { type: Number, default: 0 },
+  direction: { type: String as MPropType<StepsDirection>, default: 'horizontal' },
+  finishStatus: { type: String as MPropType<'success' | 'finish'>, default: 'finish' },
+  processStatus: { type: String as MPropType<'process' | 'finish'>, default: 'process' },
+};
+
+/**
+ * Step 单个步骤组件运行时 props
+ */
+export const stepProps: MCOPO<StepProps> = {
+  title: { type: String, required: true },
+  description: { type: String, default: '' },
+  icon: { type: String, default: '' },
+  status: { type: String as MPropType<StepStatus>, default: undefined },
+};

package/components/base/steps/index.ts

@@ -0,0 +1,22 @@
+/**
+ * @description steps core 导出
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { stepsProps, stepProps } from './api';
+import { useSteps, useStep, stepsContextKey, resolveStepStatus } from './useSteps';
+
+export const StepsCore = {
+  stepsProps,
+  stepProps,
+  useSteps,
+  useStep,
+  stepsContextKey,
+  resolveStepStatus,
+};
+
+export type { StepsProps, StepProps, StepItem, StepStatus, StepsDirection } from './props';
+export type { StepsContext } from './useSteps';

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

@@ -0,0 +1,88 @@
+/**
+ * @description steps 组件 props 类型定义
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+/**
+ * 步骤状态类型
+ */
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+
+/**
+ * 步骤条方向
+ */
+export type StepsDirection = 'horizontal' | 'vertical';
+
+/**
+ * 单个步骤数据（用于数据驱动模式）
+ */
+export declare type StepItem = {
+  /**
+   * @description 步骤标题
+   */
+  title: string;
+  /**
+   * @description 步骤描述
+   */
+  description?: string;
+  /**
+   * @description 自定义图标
+   */
+  icon?: string;
+  /**
+   * @description 强制指定步骤状态，不指定时由 active 自动推算
+   */
+  status?: StepStatus;
+};
+
+/**
+ * Steps 容器组件 props
+ */
+export declare type StepsProps = {
+  /**
+   * @description 当前激活步骤（从 0 开始）
+   * @default 0
+   */
+  active?: number;
+  /**
+   * @description 步骤条方向
+   * @default 'horizontal'
+   */
+  direction?: StepsDirection;
+  /**
+   * @description 已完成步骤的状态
+   * @default 'finish'
+   */
+  finishStatus?: 'success' | 'finish';
+  /**
+   * @description 当前步骤的状态
+   * @default 'process'
+   */
+  processStatus?: 'process' | 'finish';
+};
+
+/**
+ * Step 单个步骤组件 props
+ */
+export declare type StepProps = {
+  /**
+   * @description 步骤标题
+   */
+  title: string;
+  /**
+   * @description 步骤描述
+   */
+  description?: string;
+  /**
+   * @description 自定义图标
+   */
+  icon?: string;
+  /**
+   * @description 强制指定步骤状态，不指定时由父级 Steps 推算
+   */
+  status?: StepStatus;
+};

package/components/base/steps/useSteps.ts

@@ -0,0 +1,101 @@
+/**
+ * @description steps composable
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { computed, InjectionKey, provide, inject } from 'vue';
+import { StepsProps, StepStatus } from './props';
+
+/**
+ * Steps 向子 Step 注入的上下文结构
+ */
+export interface StepsContext {
+  /** 当前激活步骤索引 */
+  active: number;
+  /** 已完成步骤状态 */
+  finishStatus: 'success' | 'finish';
+  /** 当前步骤状态 */
+  processStatus: 'process' | 'finish';
+  /** 步骤总数（由子步骤注册后更新） */
+  total: number;
+  /** 方向 */
+  direction: 'horizontal' | 'vertical';
+}
+
+/** 注入键 */
+export const stepsContextKey: InjectionKey<StepsContext> = Symbol('stepsContext');
+
+/**
+ * Steps 容器 composable
+ * 负责将当前激活状态通过 provide 下发给 MStep 子组件
+ */
+export function useSteps(props: StepsProps) {
+  const context: StepsContext = {
+    get active() { return props.active ?? 0; },
+    get finishStatus() { return props.finishStatus ?? 'finish'; },
+    get processStatus() { return props.processStatus ?? 'process'; },
+    get direction() { return props.direction ?? 'horizontal'; },
+    total: 0,
+  };
+
+  provide(stepsContextKey, context);
+
+  /** 容器 class 列表 */
+  const stepsClass = computed(() => [
+    'm-steps',
+    `m-steps-${props.direction ?? 'horizontal'}`,
+  ]);
+
+  return { stepsClass, context };
+}
+
+/**
+ * 根据步骤索引和父级上下文推算当前步骤状态
+ * @param index 当前步骤序号（从 0 开始）
+ * @param overrideStatus 显式指定的状态，优先级最高
+ * @param ctx 父级 Steps 上下文
+ */
+export function resolveStepStatus(
+  index: number,
+  overrideStatus: StepStatus | undefined,
+  ctx: StepsContext,
+): StepStatus {
+  // 显式指定时直接使用
+  if (overrideStatus) return overrideStatus;
+
+  const active = ctx.active;
+  if (index < active) return ctx.finishStatus as StepStatus;
+  if (index === active) return ctx.processStatus as StepStatus;
+  return 'wait';
+}
+
+/**
+ * Step 单个步骤 composable
+ * 从父级注入 StepsContext，计算当前步骤的状态与样式类
+ */
+export function useStep(index: number, overrideStatus?: StepStatus) {
+  const ctx = inject(stepsContextKey, null);
+
+  const status = computed<StepStatus>(() => {
+    if (!ctx) {
+      // 未嵌套在 Steps 中时默认为 wait
+      return overrideStatus ?? 'wait';
+    }
+    return resolveStepStatus(index, overrideStatus, ctx);
+  });
+
+  const stepClass = computed(() => [
+    'm-step',
+    `m-step-${status.value}`,
+  ]);
+
+  const isLast = computed(() => {
+    if (!ctx) return true;
+    return index >= ctx.total - 1;
+  });
+
+  return { status, stepClass, isLast, ctx };
+}

package/components/base/switch/api.ts

@@ -0,0 +1,22 @@
+/**
+ * @description switch api
+ * @author 阿怪
+ * @date 2023/4/23 11:52
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { SwitchProps } from './props';
+
+
+export const props: MCOPO<SwitchProps> = {
+  modelValue: { type: undefined, required: true },
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  activeInfo: { type: String, default: '' },
+  inactiveInfo: { type: String, default: '' },
+  activeValue: { type: undefined, default: undefined },
+  inactiveValue: { type: undefined, default: undefined },
+  onControl: { type: Boolean, default: false },
+};

package/components/base/switch/index.ts

@@ -0,0 +1,19 @@
+/**
+ * @description
+ * @author 阿怪
+ * @date 2025/1/13 10:35
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props } from './api';
+import { useSwitch, getIsActive, switchIsBoolean } from './useSwitch';
+
+export const SwitchCore = {
+  props,
+  switchIsBoolean,
+  getIsActive,
+  useSwitch,
+};
+
+export type { SwitchProps } from './props';

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,79 @@
+/**
+ * @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';
+
+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: any) {
+  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,66 @@
+/**
+ * @description tabs hook
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { computed } from 'vue';
+import { TabsProps } from './props';
+
+export function useTabs<
+  Props extends Record<string, unknown>,
+>(props: Props, ctx: any) {
+  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: 'medium' },
+  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,49 @@
+/**
+ * @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
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+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?: 'large' | 'medium' | 'small';
+  /**
+   * @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/api.ts

@@ -0,0 +1,21 @@
+/**
+ * @description timePicker api
+ * @author 阿怪
+ * @date 2026/2/27
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } 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 },
+};