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

package/components/base/rate/useRate.ts

@@ -0,0 +1,76 @@
+/**
+ * @description rate hook
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { ref } from 'vue';
+import { type HookContext } from '../../types/hook';
+import { RateProps } from './props';
+
+export function useRate(props: Required<RateProps>, emit: HookContext['emit']) {
+  // 悬停预览值，null 表示未悬停
+  const hoverValue = ref<number | null>(null);
+
+  /**
+   * 计算鼠标在星星内的位置，返回实际值（支持半星）
+   */
+  const getValueFromEvent = (e: MouseEvent, index: number): number => {
+    if (!props.allowHalf) {
+      return index + 1;
+    }
+    const target = e.currentTarget as HTMLElement;
+    const { left, width } = target.getBoundingClientRect();
+    const isHalf = (e.clientX - left) / width <= 0.5;
+    return isHalf ? index + 0.5 : index + 1;
+  };
+
+  const onMouseEnter = (e: MouseEvent, index: number) => {
+    if (props.disabled || props.readonly) { return; }
+    hoverValue.value = getValueFromEvent(e, index);
+  };
+
+  const onMouseMove = (e: MouseEvent, index: number) => {
+    if (props.disabled || props.readonly) { return; }
+    hoverValue.value = getValueFromEvent(e, index);
+  };
+
+  const onMouseLeave = () => {
+    if (props.disabled || props.readonly) { return; }
+    hoverValue.value = null;
+  };
+
+  const onClick = (e: MouseEvent, index: number) => {
+    if (props.disabled || props.readonly) { return; }
+    const value = getValueFromEvent(e, index);
+    emit('update:modelValue', value);
+    emit('change', value);
+  };
+
+  /**
+   * 计算第 index 颗星（0 起始）的填充状态
+   * @returns 'full' | 'half' | 'empty'
+   */
+  const getStarState = (index: number): 'full' | 'half' | 'empty' => {
+    const current = hoverValue.value ?? props.modelValue;
+    const starValue = index + 1;
+    if (current >= starValue) {
+      return 'full';
+    }
+    if (props.allowHalf && current >= starValue - 0.5) {
+      return 'half';
+    }
+    return 'empty';
+  };
+
+  return {
+    hoverValue,
+    getStarState,
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave,
+    onClick,
+  };
+}

package/components/base/result/api.ts

@@ -0,0 +1,20 @@
+/**
+ * @description result api
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { ResultProps, ResultStatus } from './props';
+
+export const props: MCOPO<ResultProps> = {
+  status: {
+    type: String as MPropType<ResultStatus>,
+    default: 'info',
+    enum: ['success', 'warning', 'error', 'info', '404'],
+  },
+  title: { type: String, default: '' },
+  subTitle: { type: String, default: '' },
+};

package/components/base/result/index.ts

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

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

@@ -0,0 +1,36 @@
+/**
+ * @description result props type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * @name m-result
+ * @docDescription Result page component for displaying operation results.
+ *                 结果页组件，用于展示操作结果或页面状态。
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type ResultStatus = 'success' | 'warning' | 'error' | 'info' | '404';
+
+export declare type ResultProps = {
+  /**
+   * @description 结果状态，决定默认图标和配色
+   * @type string
+   * @default 'info'
+   * @enum success|warning|error|info|404
+   */
+  status?: ResultStatus,
+  /**
+   * @description 主标题
+   * @type string
+   * @default ''
+   */
+  title?: string,
+  /**
+   * @description 副标题
+   * @type string
+   * @default ''
+   */
+  subTitle?: string,
+};

package/components/base/select/api.ts

@@ -0,0 +1,34 @@
+/**
+ * @description select api
+ * @author 阿怪
+ * @date 2023/4/23 11:46
+ * @version v1.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * v1.0.1 新增 filterable prop 阿怪 2026/2/27
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { SelectProps } from './props';
+
+export const props: MCOPO<SelectProps> = {
+  modelValue: { type: undefined, default: '' },
+  options: { type: Array, default: () => [] },
+  inputParam: { type: String, default: undefined },
+  optionParam: { type: String, default: undefined },
+  valueParam: { type: String, default: undefined },
+  readonly: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  placeholder: { type: String, default: '请选择...' },
+  toMatch: { type: Function as MPropType<(option: any, value: any) => boolean>, default: undefined },
+  multiple: { type: Boolean, default: false },
+  checkbox: { type: Boolean, default: true },
+  filterable: { type: Boolean, default: false },
+  filter: { type: Function as MPropType<(option: any, inputValue: string) => boolean>, default: undefined },
+  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/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @description select core 导出
+ * @author 阿怪
+ * @date 2026/2/25 14:50
+ * @version v2.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props } from './api';
+import { useSelect } from './useSelect';
+
+export const SelectCore = {
+  props,
+  useSelect,
+};
+
+export type { SelectProps } from './props';
+export type { SelectOptionItem } from './useSelect';

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

@@ -0,0 +1,152 @@
+/**
+ * @description select api type
+ * @author 阿怪
+ * @date 2022/4/16 21:10
+ * @version v1.0.2
+ *
+ * @name m-select
+ * @docDescription Select component with shuimo-ui style.
+ *                 水墨组件的选择组件。
+ * @docUrl https://shuimo.design/select
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * v1.0.1 新增多选和filter配置 Jimmy
+ * v1.0.2 新增 filterable prop，支持内置搜索过滤 阿怪
+ */
+
+import { KineSize } from '../../types/props';
+
+export declare type SelectProps = {
+  /**
+   * @description select value
+   *              选择框的值
+   * @type any | any[]
+   * @default ''
+   */
+  modelValue?: any | any[],
+  /**
+   * @description select options
+   *              选择框的数组
+   * @type any[]
+   * @default []
+   */
+  options?: Array<any>,
+  /**
+   * @description support for which key value to display in 'input'
+   *              选择后使用option中的哪个key的值去更新modelValue
+   * @type string
+   * @default undefined
+   */
+  inputParam?: string,
+  /**
+   * @description select dropdown display info key
+   *              选择下拉框中显示内容的key
+   * @type string
+   * @default undefined
+   */
+  optionParam?: string,
+  /**
+   * @description modelValue's key
+   *              参数的key
+   * @type string
+   * @default undefined
+   */
+  valueParam?: string,
+  /**
+   * @description used to disable input event
+   *              用于禁止输入事件
+   * @type boolean
+   * @default true
+   */
+  readonly?: boolean,
+  /**
+   * @description used to disable select
+   *              是否禁用
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean,
+  /**
+   * @description input placeholder. 提示语
+   * @type string
+   * @default '请选择...'
+   */
+  placeholder?: string,
+  /**
+   * @description modelValue match function
+   *              用于比较参数和modelValue是否相等的方法，常用于modelValue为对象的场景
+   *              option: 列表数据
+   *              value: modelValue
+   * @type function
+   * @default undefined
+   */
+  toMatch?: (option: any, value: any) => boolean,
+  /**
+   * @description multiple choice
+   *              是否为多选
+   * @type boolean
+   * @default false
+   */
+  multiple?: boolean,
+  /**
+   * @description in multiple, whether to show checkbox
+   *              多选模式下是否启用checkbox
+   * @type boolean
+   * @default true
+   */
+  checkbox?: boolean,
+  /**
+   * @description whether to enable built-in search filtering
+   *              是否开启内置搜索过滤，开启后输入框变为可编辑状态
+   * @type boolean
+   * @default false
+   */
+  filterable?: boolean,
+  /**
+   * @description defined input box filter query method
+   *              自定义输入框filter查询方法，filterable 为 true 时生效；未传则使用默认标签匹配
+   * @type function  (options:any, inputValue: string) =>boolean
+   * @default undefined
+   */
+  filter?: (options: any, inputValue: string) => boolean,
+  /**
+   * @description The height of the options dom
+   *              下拉框的高度
+   * @type number | string
+   * @default undefined
+   */
+  optionsH?: number | string,
+  /**
+   * @description Whether to fetch
+   *              是否fetch
+   * @type boolean
+   * @default false
+   */
+  needFetch?: boolean,
+  /**
+   * @description beta version autoComplete fetch func, should return an end flag
+   *            beta版本的自动补全，需要返回一个是否停止标志
+   * @type Function
+   * @default undefined
+   */
+  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/select.css

@@ -0,0 +1,7 @@
+:root {
+
+}
+
+.m-select {
+
+}

package/components/base/select/useSelect.ts

@@ -0,0 +1,281 @@
+/**
+ * @description select 核心 composable
+ * @author 阿怪
+ * @date 2026/2/25 14:40
+ * @version v1.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 用 computed + ref 替代原 class 继承方案
+ * 单选/多选通过 props.multiple 分支处理
+ * fetch 通过 IntersectionObserver 观察最后一个选项实现
+ * v1.0.1 新增 filterable 支持：开启后 inputReadonly 为 false，可输入过滤 阿怪 2026/2/27
+ */
+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 {
+  /** 原始值 */
+  value: any;
+  /** 在 options 数组中的索引 */
+  index: number;
+  /** 是否选中 */
+  isSelected: boolean;
+}
+
+export function useSelect(props: SelectProps, ctx: HookContext) {
+  const tools = useSelectTools(props);
+  const optionsRef = toRef(() => props.options ?? []);
+  const modelValueRef = toRef(() => props.modelValue);
+  const multipleRef = toRef(() => props.multiple ?? false);
+
+  /**
+   * 输入框是否只读：
+   * - filterable=true 时强制可编辑（忽略 readonly prop）
+   * - 否则沿用 props.readonly（默认 true）
+   */
+  const inputReadonly = toRef(() => props.filterable ? false : (props.readonly ?? true));
+
+  // --- 状态 ---
+  const inputValue = ref('');
+  const isOpen = ref(false);
+  const fetchLoading = ref(false);
+
+  // --- 选中状态 ---
+  /** 多选时记录选中的索引集合 */
+  const selectedIndices = ref<Set<number>>(new Set());
+
+  /** 判断某个 option 是否选中 */
+  const isSelected = (option: any, index: number): boolean => {
+    if (multipleRef.value) {
+      return selectedIndices.value.has(index);
+    }
+    if (props.toMatch) {
+      return props.toMatch(option, modelValueRef.value);
+    }
+    return modelValueRef.value === tools.getModelValue(option);
+  };
+
+  // --- 选项列表 ---
+  /** 全量选项（带 isSelected 标记） */
+  const allOptions = computed<SelectOptionItem[]>(() => {
+    return optionsRef.value.map((o, i) => ({
+      value: o,
+      index: i,
+      isSelected: isSelected(o, i),
+    }));
+  });
+
+  /** 过滤后的显示选项 */
+  const displayOptions = computed<SelectOptionItem[]>(() => {
+    return allOptions.value.filter(o => {
+      // 只读模式（非 filterable 且 readonly）直接不过滤
+      if (inputReadonly.value) return true;
+      // 没有输入值时不过滤
+      if (!inputValue.value) return true;
+      // 优先使用自定义过滤函数（filterable 或 readonly=false 场景均生效）
+      if (props.filter) {
+        return props.filter(o.value, inputValue.value);
+      }
+      // 默认：输入值包含在 optionParam 显示值中（大小写不敏感）
+      return tools.getOptionValue(o.value).toLowerCase().includes(inputValue.value.toLowerCase());
+    });
+  });
+
+  /** 多选已选标签 */
+  const selectedTags = computed<SelectOptionItem[]>(() => {
+    if (!multipleRef.value) return [];
+    return allOptions.value.filter(o => o.isSelected);
+  });
+
+  // --- 初始化 inputValue ---
+  const syncInputFromModelValue = () => {
+    if (multipleRef.value) {
+      inputValue.value = '';
+      return;
+    }
+    const mv = modelValueRef.value;
+    if (mv == null || mv === '') {
+      inputValue.value = '';
+      return;
+    }
+    const found = optionsRef.value.find(o => {
+      if (props.toMatch) return props.toMatch(o, mv);
+      return tools.getModelValue(o) === mv;
+    });
+    inputValue.value = found ? tools.getInputValue(found) : '';
+  };
+
+  /** 初始化多选选中状态 */
+  const syncSelectedFromModelValue = () => {
+    if (!multipleRef.value) return;
+    const mv = modelValueRef.value;
+    const newSet = new Set<number>();
+    if (Array.isArray(mv)) {
+      optionsRef.value.forEach((o, i) => {
+        const val = tools.getModelValue(o);
+        if (mv.includes(val)) {
+          newSet.add(i);
+        }
+        if (props.toMatch && mv.some((v: any) => props.toMatch!(o, v))) {
+          newSet.add(i);
+        }
+      });
+    }
+    selectedIndices.value = newSet;
+  };
+
+  // 初始同步
+  syncSelectedFromModelValue();
+  syncInputFromModelValue();
+
+  // --- 事件处理 ---
+
+  /** 点击选项 */
+  const onSelect = (index: number) => {
+    const option = optionsRef.value[index];
+    if (!option) return;
+    if (option.disabled) return;
+
+    if (multipleRef.value) {
+      // 多选：切换选中
+      const newSet = new Set(selectedIndices.value);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        newSet.add(index);
+      }
+      selectedIndices.value = newSet;
+      inputValue.value = '';
+
+      const newModelValue = optionsRef.value
+        .filter((_, i) => newSet.has(i))
+        .map(o => tools.getModelValue(o));
+      ctx.emit('update:modelValue', newModelValue);
+      ctx.emit('select', option);
+    } else {
+      // 单选：选中并关闭
+      inputValue.value = tools.getInputValue(option);
+      ctx.emit('update:modelValue', tools.getModelValue(option));
+      ctx.emit('select', option);
+      isOpen.value = false;
+    }
+  };
+
+  /** 删除多选标签 */
+  const onDeleteTag = (index: number) => {
+    const newSet = new Set(selectedIndices.value);
+    newSet.delete(index);
+    selectedIndices.value = newSet;
+
+    const newModelValue = optionsRef.value
+      .filter((_, i) => newSet.has(i))
+      .map(o => tools.getModelValue(o));
+    ctx.emit('update:modelValue', newModelValue);
+  };
+
+  /** 输入事件 */
+  const onInput = () => {
+    ctx.emit('input', inputValue.value);
+  };
+
+  /** 聚焦 */
+  const onFocus = (e: FocusEvent) => {
+    if (inputReadonly.value) return;
+    ctx.emit('focus', e, inputValue.value);
+  };
+
+  /** 失焦 */
+  const onBlur = (e: FocusEvent) => {
+    if (inputReadonly.value) return;
+    ctx.emit('blur', e, inputValue.value);
+
+    // 单选失焦时，如果输入值不匹配任何选项，清空
+    if (!multipleRef.value) {
+      const matched = displayOptions.value.find(o => o.isSelected);
+      if (matched && inputValue.value === tools.getInputValue(matched.value)) return;
+      if (!inputValue.value) {
+        ctx.emit('update:modelValue', undefined);
+      }
+    }
+  };
+
+  // --- Fetch（IntersectionObserver 观察最后一个选项） ---
+  const lastOptionRef = ref<HTMLElement | null>(null);
+  const optionsContainerRef = ref<HTMLElement | null>(null);
+  let fetchObserver: IntersectionObserver | undefined;
+
+  const cleanupFetchObserver = () => {
+    if (fetchObserver) {
+      fetchObserver.disconnect();
+      fetchObserver = undefined;
+    }
+  };
+
+  /** 更新 fetch observer：观察最后一个选项元素 */
+  const updateFetchObserver = () => {
+    cleanupFetchObserver();
+    if (!props.needFetch || !lastOptionRef.value || !optionsContainerRef.value) return;
+
+    fetchObserver = new IntersectionObserver(
+      async (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting && props.needFetch) {
+          fetchLoading.value = true;
+          await props.fetch?.();
+          fetchLoading.value = false;
+        }
+      },
+      { root: optionsContainerRef.value, threshold: 1 },
+    );
+    fetchObserver.observe(lastOptionRef.value);
+  };
+
+  // --- Watch ---
+
+  // modelValue 变化时同步输入框和选中状态
+  watch(modelValueRef, () => {
+    syncSelectedFromModelValue();
+    syncInputFromModelValue();
+  });
+
+  // options 变化时重新同步
+  watch(optionsRef, () => {
+    syncSelectedFromModelValue();
+    syncInputFromModelValue();
+  }, { deep: true });
+
+  // lastOptionRef 变化时更新 fetch observer
+  watch(lastOptionRef, () => {
+    updateFetchObserver();
+  });
+
+  onBeforeUnmount(cleanupFetchObserver);
+
+  return {
+    // 状态
+    inputValue,
+    isOpen,
+    fetchLoading,
+    // 输入框是否只读（filterable=true 时为 false）
+    inputReadonly,
+    // 列表
+    displayOptions,
+    selectedTags,
+    // DOM refs（fetch 用）
+    lastOptionRef,
+    optionsContainerRef,
+    // 事件
+    onSelect,
+    onDeleteTag,
+    onInput,
+    onFocus,
+    onBlur,
+    // 工具
+    tools,
+    // fetch
+    updateFetchObserver,
+  };
+}

package/components/base/select/useSelectTools.ts

@@ -0,0 +1,60 @@
+/**
+ * @description select 参数映射工具
+ * @author 阿怪
+ * @date 2026/2/25 14:40
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 处理 options 中对象数据的 key 映射
+ * inputParam: 选中后输入框显示哪个字段
+ * optionParam: 下拉列表中显示哪个字段
+ * valueParam: modelValue 绑定哪个字段
+ */
+import { SelectProps } from './props';
+
+export type SelectParamKeys = 'optionParam' | 'valueParam' | 'inputParam';
+
+export function useSelectTools(props: SelectProps) {
+
+  /** 从 option 中取指定 key 的值 */
+  const getInfoWithKey = (option: any, key: SelectParamKeys): any => {
+    const paramKey = props[key];
+    if (!paramKey) {
+      if (option && typeof option === 'object') {
+        if ('label' in option) return option.label;
+        if ('name' in option) return option.name;
+        if ('text' in option) return option.text;
+      }
+      return option;
+    }
+    try {
+      return option[paramKey];
+    } catch {
+      return option;
+    }
+  };
+
+  /** 输入框显示值 */
+  const getInputValue = (option: any): string => {
+    return String(getInfoWithKey(option, 'inputParam') ?? '');
+  };
+
+  /** 下拉列表显示值 */
+  const getOptionValue = (option: any): string => {
+    return String(getInfoWithKey(option, 'optionParam') ?? '');
+  };
+
+  /** modelValue 绑定值 */
+  const getModelValue = (option: any): any => {
+    if (props.valueParam) {
+      return getInfoWithKey(option, 'valueParam');
+    }
+    if (option && typeof option === 'object' && 'value' in option) {
+      return option.value;
+    }
+    return option;
+  };
+
+  return { getInfoWithKey, getInputValue, getOptionValue, getModelValue };
+}