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

package/components/base/progress/api.ts

@@ -0,0 +1,18 @@
+/**
+ * @description progress api
+ * @author 阿怪
+ * @date 2026/2/27
+ * @version v1.1.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { ProgressProps, ProgressStatus } from './props';
+
+export const props: MCOPO<ProgressProps> = {
+  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 },
+};

package/components/base/progress/index.ts

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

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

@@ -0,0 +1,53 @@
+/**
+ * @description progress props type
+ * @author 阿怪
+ * @date 2026/2/27
+ * @version v1.1.0
+ *
+ * @name m-progress
+ * @docDescription Progress component.
+ *                 进度条组件。
+ * @docUrl https://shuimo.design/progress
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type ProgressStatus = 'default' | 'success' | 'warning' | 'danger';
+
+export declare type ProgressProps = {
+  /**
+   * @description progress value
+   *              进度条的值（0 ~ max）
+   * @type number
+   * @default 0
+   */
+  value?: number,
+  /**
+   * @description progress value max
+   *              进度条最大值
+   * @type number
+   * @default 100
+   */
+  max?: number,
+  /**
+   * @description display value
+   *              是否显示进度值
+   * @type boolean
+   * @default true
+   */
+  showInfo?: boolean,
+  /**
+   * @description status color variant
+   *              状态颜色变体：default | success | warning | danger
+   * @type ProgressStatus
+   * @default 'default'
+   */
+  status?: ProgressStatus,
+  /**
+   * @description stroke width in px
+   *              进度条粗细（px）
+   * @type number
+   * @default 4
+   */
+  strokeWidth?: number,
+};

package/components/base/progress/useProgress.ts

@@ -0,0 +1,28 @@
+/**
+ * @description progress hook
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { computed } from 'vue';
+import { ProgressProps } from './props';
+
+/**
+ * @description 清除多余小数位，保留两位小数
+ */
+const clearZero = (num: number) => {
+  const str = num.toString();
+  const index = str.indexOf('.');
+  if (index === -1) { return num; }
+  return str.slice(0, index + 3);
+};
+
+export function useProgress(props: Required<ProgressProps>) {
+  const percentage = computed(() => clearZero((props.value * 100 / props.max)));
+
+  return {
+    percentage,
+  };
+}

package/components/base/radio/api.ts

@@ -0,0 +1,19 @@
+/**
+ * @description radio api
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { RadioProps } from './props';
+
+export const props: MCOPO<RadioProps> = {
+  label: { type: [String, Number], default: '' },
+  name: { type: String, default: undefined },
+  checked: { type: Boolean, default: undefined },
+  value: { type: [String, Number], default: '' },
+  modelValue: { type: null, default: '' },
+  disabled: { type: Boolean, default: false },
+};

package/components/base/radio/index.ts

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

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

@@ -0,0 +1,59 @@
+/**
+ * @description radio props type
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * @name m-radio
+ * @docDescription Radio component.
+ *                 单选组件。
+ * @docUrl https://shuimo.design/radio
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type RadioProps = {
+  /**
+   * @description radio label
+   *              单选框的标签值
+   * @type string | number
+   * @default ''
+   */
+  label?: string | number,
+  /**
+   * @description radio name
+   *              单选框的name值
+   * @type string | undefined
+   * @default undefined
+   */
+  name?: string,
+  /**
+   * @description radio checked
+   *              是否选中
+   * @default undefined
+   */
+  checked?: boolean | undefined | null,
+  /**
+   * @description radio value
+   *              单选框的值
+   * @default undefined
+   */
+  value?: string | number,
+  /**
+   * @description value
+   *              绑定值
+   * @type string | number | boolean
+   * @default ''
+   */
+  modelValue?: string | number | boolean,
+  /**
+   * @description radio disabled
+   *              是否禁用
+   * @default false
+   */
+  disabled?: boolean,
+};
+
+export declare type RadioEvents = {
+  onClick?: (e: MouseEvent, value?: string | number) => void
+};

package/components/base/radio/useRadio.ts

@@ -0,0 +1,11 @@
+/**
+ * @description radio hook
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export { initChecked, getNewModelValue } from '../../../compositions/input/useBooleanInput';
+export const createRadioId = () => `m-radio-${Math.random().toString(36).substring(2)}`;

package/components/base/rate/api.ts

@@ -0,0 +1,18 @@
+/**
+ * @description rate api
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { RateProps } from './props';
+
+export const props: MCOPO<RateProps> = {
+  modelValue: { type: Number, default: 0 },
+  count: { type: Number, default: 5 },
+  allowHalf: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+};

package/components/base/rate/index.ts

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

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

@@ -0,0 +1,49 @@
+/**
+ * @description rate props type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * @name k-rate
+ * @docDescription Rate（评分）组件。
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type RateProps = {
+  /**
+   * @description 当前评分值（v-model）
+   * @type number
+   * @default 0
+   */
+  modelValue?: number,
+  /**
+   * @description 星星总数
+   * @type number
+   * @default 5
+   */
+  count?: number,
+  /**
+   * @description 是否允许半星
+   * @type boolean
+   * @default false
+   */
+  allowHalf?: boolean,
+  /**
+   * @description 是否只读（仅展示，不可交互，不灰显）
+   * @type boolean
+   * @default false
+   */
+  readonly?: boolean,
+  /**
+   * @description 是否禁用
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean,
+};
+
+export declare type RateEmits = {
+  'onUpdate:modelValue'?: (value: number) => void,
+  onChange?: (value: number) => void,
+};

package/components/base/rate/useRate.ts

@@ -0,0 +1,75 @@
+/**
+ * @description rate hook
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { ref } from 'vue';
+import { RateProps } from './props';
+
+export function useRate(props: Required<RateProps>, emit: (...args: any[]) => void) {
+  // 悬停预览值，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,31 @@
+/**
+ * @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 },
+};

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,132 @@
+/**
+ * @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，支持内置搜索过滤 阿怪
+ */
+
+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>
+};

package/components/base/select/select.css

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