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

package/components/base/inputNumber/useInputNumber.ts

@@ -0,0 +1,140 @@
+/**
+ * @description inputNumber composable
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.1.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { ref, watch } from 'vue';
+import { InputNumberProps } from './props';
+import { HTMLElementEvent } from '../../types/template';
+
+export type InputNumber = string | number | null;
+
+export function useInputNumber(props: Required<InputNumberProps>, ctx: any) {
+  const currentValue = ref<string | number>(props.modelValue ?? '');
+
+  const updateInput = (oldVal: InputNumber) => {
+    ctx.emit('update:modelValue', currentValue.value);
+    ctx.emit('change', currentValue.value, oldVal);
+  };
+
+  const setCurrentValue = (newVal: string | number, e?: HTMLElementEvent<HTMLInputElement>) => {
+    const oldVal = currentValue.value;
+    const { min, max, precision } = props;
+    if (oldVal === newVal) {
+      return;
+    } else if (+newVal >= +max) {
+      // 超过最大值，截断到 max
+      newVal = max;
+    } else if (+newVal <= +min) {
+      // 低于最小值，截断到 min
+      newVal = min;
+    } else if (
+      precision !== 0 &&
+      String(newVal).includes('.') &&
+      (`${newVal}`.length - (`${newVal}`.indexOf('.') + 1) >= precision)
+    ) {
+      // 按精度截断小数位
+      newVal = Number(`${newVal}`.substring(0, `${newVal}`.indexOf('.') + (precision + 1)));
+    }
+    if (e) { e.target.value = String(newVal); }
+    currentValue.value = newVal;
+    updateInput(oldVal);
+  };
+
+  const validate = (value: InputNumber, e?: HTMLElementEvent<HTMLInputElement>) => {
+    if (value === null || value === undefined) {
+      const oldVal = currentValue.value;
+      currentValue.value = '';
+      updateInput(oldVal);
+      return;
+    }
+    // 合法值：数字、空字符串、负号前缀（用户正在输入负数）
+    if (!isNaN(+value) || value === '' || value === '-') {
+      setCurrentValue(value, e);
+    } else {
+      // 非法输入，还原为当前值
+      if (e) e.target.value = String(currentValue.value);
+    }
+  };
+
+  const handleInputChange = (e: HTMLElementEvent<HTMLInputElement>) => {
+    let val = e.target.value;
+    // 处理以小数点开头的输入，补充整数部分 0
+    if (val.indexOf('.') === 0) {
+      val = val.replace(/^\./g, '0.');
+    }
+    // 处理整数部分多余前导零
+    if (/^-?\d+$/.test(val) && val.indexOf('0') === 0) {
+      val = `${Number(val)}`;
+      e.target.value = val;
+    }
+    validate(val, e);
+  };
+
+  const handleInputBlur = () => {
+    // blur 时清理末尾的负号
+    if (currentValue.value === '-') {
+      currentValue.value = '';
+    } else if (currentValue.value === '-0') {
+      currentValue.value = 0;
+    }
+    const oldVal = currentValue.value;
+    const str = String(currentValue.value);
+    // 清理末尾小数点
+    currentValue.value = str.indexOf('.') === str.length - 1
+      ? str.replace(/\.$/g, '')
+      : currentValue.value;
+    updateInput(oldVal);
+  };
+
+  /**
+   * 按步长增加当前值，不超过 max
+   */
+  const increment = () => {
+    if (props.disabled || props.readonly) { return; }
+    const base = currentValue.value === '' ? 0 : +currentValue.value;
+    const next = base + props.step;
+    validate(next);
+  };
+
+  /**
+   * 按步长减少当前值，不低于 min
+   */
+  const decrement = () => {
+    if (props.disabled || props.readonly) { return; }
+    const base = currentValue.value === '' ? 0 : +currentValue.value;
+    const next = base - props.step;
+    validate(next);
+  };
+
+  /**
+   * 键盘上/下箭头按步长增减
+   */
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      increment();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      decrement();
+    }
+  };
+
+  // 监听外部 modelValue 变化，同步内部值
+  watch(() => props.modelValue, val => {
+    validate(val);
+  });
+
+  return {
+    currentValue,
+    handleInputChange,
+    handleInputBlur,
+    handleKeydown,
+    increment,
+    decrement,
+    validate,
+  };
+}

package/components/base/li/api.ts

@@ -0,0 +1,15 @@
+/**
+ * @description li api
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { LiProps } from './props';
+
+export const props: MCOPO<LiProps> = {
+  active: { type: Boolean, default: false },
+  marker: { type: Boolean, default: true },
+};

package/components/base/li/index.ts

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

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

@@ -0,0 +1,30 @@
+/**
+ * @description li props type
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * @name m-li
+ * @docDescription Li component.
+ *                 列表项组件。
+ * @docUrl https://shuimo.design/li
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type LiProps = {
+  /**
+   * @description is active style or not
+   *              是否激活样式
+   * @type boolean
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * @description show marker or not
+   *              是否显示标记
+   * @type boolean
+   * @default true
+   */
+  marker?: boolean;
+};

package/components/base/list/api.ts

@@ -0,0 +1,16 @@
+/**
+ * @description list api
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { ListProps } from './props';
+
+export const props: MCOPO<ListProps> = {
+  data: { type: Array, default: () => [] },
+  autoActive: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+};

package/components/base/list/index.ts

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

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

@@ -0,0 +1,33 @@
+/**
+ * @description list props type
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * @name m-list
+ * @docDescription List component.
+ *                 列表组件。
+ * @docUrl https://shuimo.design/list
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type ListProps = {
+  /**
+   * @description List data
+   *              列表数据
+   * @default []
+   */
+  data?: Record<string, unknown>[],
+  /**
+   * @description all item use active style
+   *              所有项使用激活样式
+   * @default false
+   */
+  autoActive?: boolean,
+  /**
+   * @description 加载中状态
+   * @default false
+   */
+  loading?: boolean
+};

package/components/base/list/useList.ts

@@ -0,0 +1,36 @@
+/**
+ * @description list hook
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+/**
+ * @description 基础渲染，将数据转为字符串
+ */
+const baseRender = (item: unknown) => {
+  if (['string', 'number'].includes(typeof item)) {
+    return String(item);
+  }
+  if (typeof item === 'object') {
+    return JSON.stringify(item);
+  }
+  return '';
+};
+
+export function useList<T>() {
+  const dataValidate = (data: T[] | undefined) => {
+    if (!Array.isArray(data)) {
+      console.warn('[shuimo-list] data必须是数组');
+      return false;
+    }
+    return true;
+  };
+
+  return {
+    baseRender,
+    dataValidate,
+  };
+}

package/components/base/loading/api.ts

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

package/components/base/loading/index.ts

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

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

@@ -0,0 +1,38 @@
+/**
+ * @description loading api type
+ * @author 阿怪
+ * @date 2026/2/27
+ * @version v1.1.0
+ *
+ * @name k-loading
+ * @docDescription Loading component with Phosphor sci-fi theme.
+ *                 Kine Design 加载组件。
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type LoadingProps = {
+  /**
+   * @description 是否显示 loading
+   * @type boolean
+   * @default false
+   */
+  modelValue?: boolean;
+  /**
+   * @description 尺寸
+   * @type 'large' | 'medium' | 'small'
+   * @default 'medium'
+   */
+  size?: 'large' | 'medium' | 'small';
+  /**
+   * @description 是否显示遮罩层（覆盖父元素）
+   * @type boolean
+   * @default false
+   */
+  mask?: boolean;
+  /**
+   * @description 加载提示文字
+   * @type string
+   */
+  text?: string;
+};

package/components/base/popover/api.ts

@@ -0,0 +1,28 @@
+/**
+ * @description popover 运行时 props
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { PopoverProps } from './props';
+import { MCOPO, MPropType } from '../../types/props';
+import { Placement } from '../../../compositions/popper/usePopper.ts';
+
+export const props: MCOPO<PopoverProps> = {
+  placement: {
+    type: String as MPropType<Placement>,
+    default: 'bottom',
+  },
+  mountRender: { type: Boolean, default: false },
+  disableClickAway: { type: Boolean, default: false },
+  hover: { type: Boolean, default: false },
+  show: { type: Boolean, default: null },
+  content: { type: String, default: '' },
+  popper: {
+    type: Object, default: () => ({}),
+  },
+  teleport: { type: [Object, Boolean], default: undefined },
+  title: { type: String, default: undefined },
+};

package/components/base/popover/index.ts

@@ -0,0 +1,17 @@
+/**
+ * @description popover core 导出
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props } from './api';
+import { usePopover } from './usePopover';
+
+export const PopoverCore = {
+  props,
+  usePopover,
+};
+
+export type { PopoverProps } from './props';

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

@@ -0,0 +1,73 @@
+/**
+ * @description popover 类型定义
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * @name m-popover
+ * @docDescription Popover component.
+ *                 弹出框组件。
+ * @docUrl https://shuimo.design/popover
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { Placement, PopperConfig } from '../../../compositions/popper/usePopper.ts';
+import { MTeleportProps } from '../../../types/common/common';
+
+
+export type PopoverProps = {
+  /**
+   * @description 弹出框位置
+   * @type Placement
+   * @default bottom
+   */
+  placement?: Placement,
+  /**
+   * @description 挂载时是否渲染弹出内容
+   * @type boolean
+   * @default false
+   */
+  mountRender?: boolean,
+  /**
+   * @description 禁用点击外部自动关闭
+   * @type boolean
+   * @default false
+   */
+  disableClickAway?: boolean,
+  /**
+   * @description 简单文本内容可通过 prop 传入
+   * @type any
+   * @default ''
+   */
+  content?: any,
+  /**
+   * @description 是否通过 hover 触发
+   * @type boolean
+   * @default false
+   */
+  hover?: boolean,
+  /**
+   * @description 是否显示
+   * @type boolean
+   * @default false
+   */
+  show?: boolean,
+  /**
+   * @description floating-ui 配置项，参考 https://floating-ui.com/
+   * @type PopperConfig
+   * @default {}
+   */
+  popper?: PopperConfig,
+  /**
+   * @description 传送门配置
+   * @type MTeleportProps | boolean
+   * @default undefined
+   */
+  teleport?: MTeleportProps | undefined | boolean,
+  /**
+   * @description 气泡标题，传入时在内容上方渲染标题行
+   * @type string
+   * @default undefined
+   */
+  title?: string,
+};

package/components/base/popover/usePopover.ts

@@ -0,0 +1,192 @@
+/**
+ * @description popover composable
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { Placement, PopperConfig, PositionStyle, usePopper } from '../../../compositions/popper/usePopper.ts';
+import useClickAway from '../../../compositions/popper/useClickAway';
+import { PopoverProps } from './props';
+import { onBeforeUnmount, onMounted, ref, type Ref, shallowRef } from 'vue';
+
+
+export type IPopper = ReturnType<typeof usePopper>;
+
+/**
+ * Popover 实例，管理定位、显示/隐藏状态
+ */
+export class PopoverImpl {
+
+  protected _active: HTMLElement;
+  protected _content: HTMLElement;
+  protected _arrow: HTMLElement | undefined;
+  popperInstance: IPopper;
+  style: Ref;
+  arrowStyle: Ref;
+  placement: Ref;
+  visible: boolean = false;
+  onShow?: Function;
+  onHide?: Function;
+
+  constructor(
+    val: { style: Ref, arrowStyle: Ref, placement: Ref, show: boolean },
+    active: HTMLElement,
+    content: HTMLElement,
+    arrow?: HTMLElement,
+    config?: PopperConfig,
+    lifecycle?: {
+      onShow?: Function,
+      onHide?: Function
+    },
+  ) {
+    if (!content) { throw new Error('MPopover: content is required'); }
+    if (!active) { throw new Error('MPopover: active is required'); }
+
+    this._active = active;
+    this._content = content;
+    this._arrow = arrow;
+    this.popperInstance = usePopper(this._active, this._content,
+      (positionStyle: PositionStyle) => this.update(positionStyle), this._arrow, config);
+    this.style = val.style;
+    this.arrowStyle = val.arrowStyle;
+    this.placement = val.placement;
+    this.visible = val.show;
+    this.onShow = lifecycle?.onShow;
+    this.onHide = lifecycle?.onHide;
+  }
+
+  get content() {
+    return this._content;
+  }
+
+  async show() {
+    this.style.value = { display: 'block', opacity: '0' };
+    this.arrowStyle.value = { display: 'block', opacity: '0' };
+    this.visible = true;
+    await this.popperInstance.getPositionStyle();
+    this.onShow?.();
+  }
+
+  update(positionStyle: PositionStyle) {
+    if (!this.visible) {
+      this.hide();
+      return;
+    }
+    this.style.value = positionStyle.style;
+    this.arrowStyle.value = positionStyle.arrowStyle;
+    this.placement.value = positionStyle.placement;
+  }
+
+  hide() {
+    this.style.value = undefined;
+    this.arrowStyle.value = undefined;
+    this.visible = false;
+    this.onHide?.();
+  }
+
+  async toggle() {
+    if (this.visible) {
+      this.hide();
+    } else {
+      await this.show();
+    }
+  }
+
+  destroy() {
+    this.popperInstance?.clear?.();
+    this.visible = false;
+    this.onShow = undefined;
+    this.onHide = undefined;
+  }
+}
+
+
+export function usePopover(props: Required<PopoverProps>, ctx: any) {
+  const style = ref();
+  const arrowStyle = ref();
+  const placement = ref<Placement>(props.placement);
+  let instance: PopoverImpl | null = null;
+  let clickAwayInstance: ReturnType<typeof useClickAway>;
+
+  const popperInstance = shallowRef<PopoverImpl>();
+
+  const popoverRef = ref<HTMLElement>();
+  const contentRef = ref<HTMLElement>();
+  const arrowRef = ref<HTMLElement>();
+
+  const createPopover = (
+    active: HTMLElement,
+    content: HTMLElement,
+    arrow?: HTMLElement,
+    config?: PopperConfig,
+  ) => {
+    instance = new PopoverImpl(
+      { style, arrowStyle, placement, show: props.show },
+      active,
+      content,
+      arrow,
+      config,
+      {
+        onShow: () => {
+          clickAwayInstance?.add();
+          ctx.emit('update:show', true);
+        },
+        onHide: () => {
+          clickAwayInstance?.remove();
+          ctx.emit('update:show', false);
+        },
+      });
+    return instance;
+  };
+
+  const popoverEnter = () => {
+    if (props.hover) {
+      instance?.show();
+    }
+  };
+  const popoverLeave = () => {
+    if (props.hover) {
+      instance?.hide();
+    }
+  };
+
+  onMounted(() => {
+    if (!popoverRef.value || !contentRef.value) {
+      return;
+    }
+    popperInstance.value = createPopover(popoverRef.value, contentRef.value, arrowRef.value, {
+      ...props.popper,
+      placement: props.placement,
+    });
+
+    if (props.disableClickAway) {
+      return;
+    }
+
+    clickAwayInstance = useClickAway({
+      target: () => instance?.content?.parentElement,
+      handler: () => {
+        instance?.hide();
+      },
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (clickAwayInstance) {
+      const { onBeforeDestroy } = clickAwayInstance;
+      onBeforeDestroy();
+    }
+    instance?.destroy();
+  });
+
+  return {
+    popoverEnter,
+    popoverLeave,
+    popoverRef, contentRef, arrowRef,
+    popperInstance,
+    style, arrowStyle,
+    placement,
+  };
+}