@kine-design/core 0.0.1-beta.4 → 0.0.1-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.vlaude/last-session-id +1 -0
- package/components/base/button/api.ts +1 -1
- package/components/base/button/props.d.ts +3 -1
- package/components/base/datePicker/api.ts +4 -0
- package/components/base/datePicker/props.d.ts +26 -0
- package/components/base/input/api.ts +5 -1
- package/components/base/input/props.d.ts +26 -1
- package/components/base/input/useInput.ts +9 -1
- package/components/base/inputNumber/api.ts +2 -1
- package/components/base/inputNumber/props.d.ts +9 -1
- package/components/base/loading/api.ts +1 -1
- package/components/base/loading/props.d.ts +3 -1
- package/components/base/progress/api.ts +3 -1
- package/components/base/progress/props.d.ts +15 -0
- package/components/base/select/api.ts +3 -0
- package/components/base/select/props.d.ts +21 -1
- package/components/base/slider/api.ts +3 -1
- package/components/base/slider/props.d.ts +14 -0
- package/components/base/slider/useSlider.ts +4 -1
- package/components/base/tag/api.ts +1 -1
- package/components/base/tag/props.d.ts +3 -1
- package/components/base/timePicker/api.ts +4 -1
- package/components/base/timePicker/props.d.ts +20 -0
- package/components/base/tooltip/api.ts +1 -0
- package/components/base/tooltip/props.d.ts +6 -0
- package/components/message/dialog/api.ts +2 -1
- package/components/message/dialog/props.d.ts +7 -0
- package/components/message/drawer/api.ts +1 -0
- package/components/message/drawer/props.d.ts +7 -0
- package/components/types/props.d.ts +5 -0
- package/compositions/common/useComponentSize.ts +17 -0
- package/dist/components/base/input/useInput.d.ts +2 -0
- package/dist/compositions/common/useComponentSize.d.ts +6 -0
- package/dist/core.js +89 -5
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
f4377795-16b1-4f6c-a26e-f3f958bef0f4
|
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
* 公司的业务千篇一律,复杂的代码好几百行。
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
|
+
import { KineSize } from '../../types/props';
|
|
15
|
+
|
|
14
16
|
export declare type ButtonProps = {
|
|
15
17
|
/**
|
|
16
18
|
* @description button inline text, will replace by slot
|
|
@@ -56,7 +58,7 @@ export declare type ButtonProps = {
|
|
|
56
58
|
* @default medium
|
|
57
59
|
* @enum large|medium|small
|
|
58
60
|
*/
|
|
59
|
-
size?:
|
|
61
|
+
size?: KineSize,
|
|
60
62
|
};
|
|
61
63
|
|
|
62
64
|
export declare type ButtonEvents = {
|
|
@@ -15,4 +15,8 @@ export const props: MCOPO<DatePickerProps> = {
|
|
|
15
15
|
format: { type: String, default: undefined },
|
|
16
16
|
type: { type: String as MPropType<'date' | 'month' | 'datetime'>, default: 'date' },
|
|
17
17
|
disabled: { type: Boolean, default: false },
|
|
18
|
+
readonly: { type: Boolean, default: false },
|
|
19
|
+
clearable: { type: Boolean, default: false },
|
|
20
|
+
size: { type: String as unknown as MPropType<NonNullable<DatePickerProps['size']>>, default: undefined },
|
|
21
|
+
disabledDate: { type: Function as MPropType<(date: Date) => boolean>, default: undefined },
|
|
18
22
|
};
|
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
+
import { KineSize } from '../../types/props';
|
|
11
|
+
|
|
10
12
|
export declare type DatePickerProps = {
|
|
11
13
|
/**
|
|
12
14
|
* @description 日期值
|
|
@@ -38,6 +40,30 @@ export declare type DatePickerProps = {
|
|
|
38
40
|
* @default false
|
|
39
41
|
*/
|
|
40
42
|
disabled?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* @description 是否只读
|
|
45
|
+
* @type boolean
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
readonly?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* @description whether to show clear button. 是否可清空
|
|
51
|
+
* @type boolean
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
clearable?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* @description 尺寸
|
|
57
|
+
* @type KineSize
|
|
58
|
+
* @default undefined
|
|
59
|
+
*/
|
|
60
|
+
size?: KineSize;
|
|
61
|
+
/**
|
|
62
|
+
* @description callback to determine if a date is disabled. 判断日期是否禁用的回调
|
|
63
|
+
* @type (date: Date) => boolean
|
|
64
|
+
* @default undefined
|
|
65
|
+
*/
|
|
66
|
+
disabledDate?: (date: Date) => boolean;
|
|
41
67
|
};
|
|
42
68
|
|
|
43
69
|
/** 日历面板的显示模式 */
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { MCOPO } from '../../types/props';
|
|
9
|
+
import { MCOPO, MPropType } from '../../types/props';
|
|
10
10
|
import { InputProps } from './props';
|
|
11
11
|
|
|
12
12
|
export const props: MCOPO<InputProps> = {
|
|
@@ -16,4 +16,8 @@ export const props: MCOPO<InputProps> = {
|
|
|
16
16
|
readonly: { type: Boolean, default: false },
|
|
17
17
|
disabled: { type: Boolean, default: false },
|
|
18
18
|
autofocus: { type: Boolean, default: false },
|
|
19
|
+
clearable: { type: Boolean, default: false },
|
|
20
|
+
size: { type: String as unknown as MPropType<NonNullable<InputProps['size']>>, default: undefined },
|
|
21
|
+
maxlength: { type: Number, default: undefined },
|
|
22
|
+
showWordLimit: { type: Boolean, default: false },
|
|
19
23
|
};
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
13
13
|
*/
|
|
14
14
|
import { HTMLElementEvent } from '../../types/template';
|
|
15
|
+
import { KineSize } from '../../types/props';
|
|
15
16
|
|
|
16
17
|
export declare type InputProps = {
|
|
17
18
|
/**
|
|
@@ -50,7 +51,31 @@ export declare type InputProps = {
|
|
|
50
51
|
* @type boolean
|
|
51
52
|
* @default false
|
|
52
53
|
*/
|
|
53
|
-
autofocus?: boolean
|
|
54
|
+
autofocus?: boolean,
|
|
55
|
+
/**
|
|
56
|
+
* @description whether to show clear button. 是否可清空
|
|
57
|
+
* @type boolean
|
|
58
|
+
* @default false
|
|
59
|
+
*/
|
|
60
|
+
clearable?: boolean,
|
|
61
|
+
/**
|
|
62
|
+
* @description input size. 输入框尺寸
|
|
63
|
+
* @type KineSize
|
|
64
|
+
* @default undefined
|
|
65
|
+
*/
|
|
66
|
+
size?: KineSize,
|
|
67
|
+
/**
|
|
68
|
+
* @description max character length. 最大输入长度
|
|
69
|
+
* @type number
|
|
70
|
+
* @default undefined
|
|
71
|
+
*/
|
|
72
|
+
maxlength?: number,
|
|
73
|
+
/**
|
|
74
|
+
* @description whether to show word count. 是否显示字数统计
|
|
75
|
+
* @type boolean
|
|
76
|
+
* @default false
|
|
77
|
+
*/
|
|
78
|
+
showWordLimit?: boolean
|
|
54
79
|
};
|
|
55
80
|
|
|
56
81
|
export declare type InputEvents = {
|
|
@@ -25,6 +25,7 @@ export function useInput<
|
|
|
25
25
|
disabled: props.disabled,
|
|
26
26
|
type: props.type,
|
|
27
27
|
readOnly: props.readonly,
|
|
28
|
+
maxLength: props.maxlength,
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
const onInput = (e: HTMLElementEvent<HTMLInputElement>)=>{
|
|
@@ -40,6 +41,12 @@ export function useInput<
|
|
|
40
41
|
ctx.emit('blur', e);
|
|
41
42
|
}
|
|
42
43
|
|
|
44
|
+
const onClear = () => {
|
|
45
|
+
ctx.emit('update:modelValue', '');
|
|
46
|
+
ctx.emit('input', '');
|
|
47
|
+
ctx.emit('clear');
|
|
48
|
+
}
|
|
49
|
+
|
|
43
50
|
return {
|
|
44
51
|
baseProps,
|
|
45
52
|
inputType,
|
|
@@ -47,7 +54,8 @@ export function useInput<
|
|
|
47
54
|
rowInfo,
|
|
48
55
|
onInput,
|
|
49
56
|
onFocus,
|
|
50
|
-
onBlur
|
|
57
|
+
onBlur,
|
|
58
|
+
onClear,
|
|
51
59
|
}
|
|
52
60
|
|
|
53
61
|
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { MCOPO } from '../../types/props';
|
|
9
|
+
import { MCOPO, MPropType } from '../../types/props';
|
|
10
10
|
import { InputNumberProps } from './props';
|
|
11
11
|
|
|
12
12
|
export const props: MCOPO<InputNumberProps> = {
|
|
@@ -19,4 +19,5 @@ export const props: MCOPO<InputNumberProps> = {
|
|
|
19
19
|
step: { type: Number, default: 1 },
|
|
20
20
|
precision: { type: Number, default: 0 },
|
|
21
21
|
controls: { type: Boolean, default: true },
|
|
22
|
+
size: { type: String as unknown as MPropType<NonNullable<InputNumberProps['size']>>, default: undefined },
|
|
22
23
|
};
|
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
+
import { KineSize } from '../../types/props';
|
|
16
|
+
|
|
15
17
|
export declare type InputNumberProps = {
|
|
16
18
|
/**
|
|
17
19
|
* @description input-number modelValue
|
|
@@ -66,5 +68,11 @@ export declare type InputNumberProps = {
|
|
|
66
68
|
* @type boolean
|
|
67
69
|
* @default true
|
|
68
70
|
*/
|
|
69
|
-
controls?: boolean
|
|
71
|
+
controls?: boolean,
|
|
72
|
+
/**
|
|
73
|
+
* @description 尺寸
|
|
74
|
+
* @type KineSize
|
|
75
|
+
* @default undefined
|
|
76
|
+
*/
|
|
77
|
+
size?: KineSize
|
|
70
78
|
};
|
|
@@ -11,7 +11,7 @@ import { LoadingProps } from './props';
|
|
|
11
11
|
|
|
12
12
|
export const props: MCOPO<LoadingProps> = {
|
|
13
13
|
modelValue: { type: Boolean, default: false },
|
|
14
|
-
size: { type: String as unknown as MPropType<NonNullable<LoadingProps['size']>>, default:
|
|
14
|
+
size: { type: String as unknown as MPropType<NonNullable<LoadingProps['size']>>, default: undefined },
|
|
15
15
|
mask: { type: Boolean, default: false },
|
|
16
16
|
text: { type: String, default: undefined },
|
|
17
17
|
};
|
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
|
+
import { KineSize } from '../../types/props';
|
|
15
|
+
|
|
14
16
|
export declare type LoadingProps = {
|
|
15
17
|
/**
|
|
16
18
|
* @description 是否显示 loading
|
|
@@ -23,7 +25,7 @@ export declare type LoadingProps = {
|
|
|
23
25
|
* @type 'large' | 'medium' | 'small'
|
|
24
26
|
* @default 'medium'
|
|
25
27
|
*/
|
|
26
|
-
size?:
|
|
28
|
+
size?: KineSize;
|
|
27
29
|
/**
|
|
28
30
|
* @description 是否显示遮罩层(覆盖父元素)
|
|
29
31
|
* @type boolean
|
|
@@ -7,12 +7,14 @@
|
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
9
|
import { MCOPO, MPropType } from '../../types/props';
|
|
10
|
-
import { ProgressProps, ProgressStatus } from './props';
|
|
10
|
+
import { ProgressProps, ProgressStatus, ProgressType } from './props';
|
|
11
11
|
|
|
12
12
|
export const props: MCOPO<ProgressProps> = {
|
|
13
|
+
type: { type: String as unknown as MPropType<ProgressType>, default: 'line' },
|
|
13
14
|
value: { type: Number, default: 0 },
|
|
14
15
|
max: { type: Number, default: 100 },
|
|
15
16
|
showInfo: { type: Boolean, default: true },
|
|
16
17
|
status: { type: String as unknown as MPropType<ProgressStatus>, default: 'default' },
|
|
17
18
|
strokeWidth: { type: Number, default: 4 },
|
|
19
|
+
width: { type: Number, default: 80 },
|
|
18
20
|
};
|
|
@@ -14,7 +14,15 @@
|
|
|
14
14
|
|
|
15
15
|
export declare type ProgressStatus = 'default' | 'success' | 'warning' | 'danger';
|
|
16
16
|
|
|
17
|
+
export declare type ProgressType = 'line' | 'circle';
|
|
18
|
+
|
|
17
19
|
export declare type ProgressProps = {
|
|
20
|
+
/**
|
|
21
|
+
* @description progress type. 进度条类型:line 线性 | circle 环形
|
|
22
|
+
* @type ProgressType
|
|
23
|
+
* @default 'line'
|
|
24
|
+
*/
|
|
25
|
+
type?: ProgressType,
|
|
18
26
|
/**
|
|
19
27
|
* @description progress value
|
|
20
28
|
* 进度条的值(0 ~ max)
|
|
@@ -50,4 +58,11 @@ export declare type ProgressProps = {
|
|
|
50
58
|
* @default 4
|
|
51
59
|
*/
|
|
52
60
|
strokeWidth?: number,
|
|
61
|
+
/**
|
|
62
|
+
* @description circle diameter in px (only for type='circle')
|
|
63
|
+
* 环形进度条直径(px),仅 type='circle' 时生效
|
|
64
|
+
* @type number
|
|
65
|
+
* @default 80
|
|
66
|
+
*/
|
|
67
|
+
width?: number,
|
|
53
68
|
};
|
|
@@ -28,4 +28,7 @@ export const props: MCOPO<SelectProps> = {
|
|
|
28
28
|
optionsH: { type: [Number, String], default: undefined },
|
|
29
29
|
needFetch: { type: Boolean, default: false },
|
|
30
30
|
fetch: { type: Function as MPropType<() => Promise<void>>, default: undefined },
|
|
31
|
+
clearable: { type: Boolean, default: false },
|
|
32
|
+
size: { type: String as unknown as MPropType<NonNullable<SelectProps['size']>>, default: undefined },
|
|
33
|
+
loading: { type: Boolean, default: false },
|
|
31
34
|
};
|
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
* v1.0.2 新增 filterable prop,支持内置搜索过滤 阿怪
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
+
import { KineSize } from '../../types/props';
|
|
19
|
+
|
|
18
20
|
export declare type SelectProps = {
|
|
19
21
|
/**
|
|
20
22
|
* @description select value
|
|
@@ -128,5 +130,23 @@ export declare type SelectProps = {
|
|
|
128
130
|
* @type Function
|
|
129
131
|
* @default undefined
|
|
130
132
|
*/
|
|
131
|
-
fetch?: () => Promise<void
|
|
133
|
+
fetch?: () => Promise<void>,
|
|
134
|
+
/**
|
|
135
|
+
* @description whether to show clear button. 是否可清空
|
|
136
|
+
* @type boolean
|
|
137
|
+
* @default false
|
|
138
|
+
*/
|
|
139
|
+
clearable?: boolean,
|
|
140
|
+
/**
|
|
141
|
+
* @description select size. 选择框尺寸
|
|
142
|
+
* @type KineSize
|
|
143
|
+
* @default undefined
|
|
144
|
+
*/
|
|
145
|
+
size?: KineSize,
|
|
146
|
+
/**
|
|
147
|
+
* @description whether to show loading indicator. 是否显示加载中状态
|
|
148
|
+
* @type boolean
|
|
149
|
+
* @default false
|
|
150
|
+
*/
|
|
151
|
+
loading?: boolean,
|
|
132
152
|
};
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { MCOPO } from '../../types/props';
|
|
9
|
+
import { MCOPO, MPropType } from '../../types/props';
|
|
10
10
|
import { SliderProps } from './props';
|
|
11
11
|
|
|
12
12
|
export const props: MCOPO<SliderProps> = {
|
|
@@ -17,4 +17,6 @@ export const props: MCOPO<SliderProps> = {
|
|
|
17
17
|
disabled: { type: Boolean, default: false },
|
|
18
18
|
showInfo: { type: Boolean, default: false },
|
|
19
19
|
showStops: { type: Boolean, default: false },
|
|
20
|
+
readonly: { type: Boolean, default: false },
|
|
21
|
+
size: { type: String as unknown as MPropType<NonNullable<SliderProps['size']>>, default: undefined },
|
|
20
22
|
};
|
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
+
import { KineSize } from '../../types/props';
|
|
16
|
+
|
|
15
17
|
export declare type SliderProps = {
|
|
16
18
|
/**
|
|
17
19
|
* @description slider value
|
|
@@ -62,4 +64,16 @@ export declare type SliderProps = {
|
|
|
62
64
|
* @default false
|
|
63
65
|
*/
|
|
64
66
|
showStops?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* @description slider readonly. 是否只读
|
|
69
|
+
* @type boolean
|
|
70
|
+
* @default false
|
|
71
|
+
*/
|
|
72
|
+
readonly?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* @description 尺寸
|
|
75
|
+
* @type KineSize
|
|
76
|
+
* @default undefined
|
|
77
|
+
*/
|
|
78
|
+
size?: KineSize;
|
|
65
79
|
};
|
|
@@ -25,7 +25,10 @@ export function useSlider(props: Required<SliderProps>, ctx: any) {
|
|
|
25
25
|
const sub = props.max - props.min;
|
|
26
26
|
|
|
27
27
|
// 处理拖拽移动,计算并约束位置,更新百分比
|
|
28
|
-
const movePositionHandler = (event: InteractEvent, position: DragPosition) => {
|
|
28
|
+
const movePositionHandler = (event: InteractEvent, position: DragPosition): DragPosition => {
|
|
29
|
+
if (props.readonly) {
|
|
30
|
+
return position;
|
|
31
|
+
}
|
|
29
32
|
const totalW = sliderSize.w.value - btnW;
|
|
30
33
|
|
|
31
34
|
let positionX = position.x + event.dx;
|
|
@@ -11,7 +11,7 @@ import { TagProps } from './props';
|
|
|
11
11
|
|
|
12
12
|
export const props: MCOPO<TagProps> = {
|
|
13
13
|
type: { type: String as MPropType<'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'>, default: 'default' },
|
|
14
|
-
size: { type: String as MPropType<'large' | 'medium' | 'small'>, default:
|
|
14
|
+
size: { type: String as MPropType<'large' | 'medium' | 'small'>, default: undefined },
|
|
15
15
|
closable: { type: Boolean, default: false },
|
|
16
16
|
disabled: { type: Boolean, default: false },
|
|
17
17
|
};
|
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
+
import { KineSize } from '../../types/props';
|
|
16
|
+
|
|
15
17
|
export declare type TagProps = {
|
|
16
18
|
/**
|
|
17
19
|
* @description tag type
|
|
@@ -28,7 +30,7 @@ export declare type TagProps = {
|
|
|
28
30
|
* @default medium
|
|
29
31
|
* @enum large|medium|small
|
|
30
32
|
*/
|
|
31
|
-
size?:
|
|
33
|
+
size?: KineSize;
|
|
32
34
|
/**
|
|
33
35
|
* @description 是否显示关闭按钮
|
|
34
36
|
* @type boolean
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { MCOPO } from '../../types/props';
|
|
9
|
+
import { MCOPO, MPropType } from '../../types/props';
|
|
10
10
|
import { TimePickerProps } from './props';
|
|
11
11
|
|
|
12
12
|
export const props: MCOPO<TimePickerProps> = {
|
|
@@ -18,4 +18,7 @@ export const props: MCOPO<TimePickerProps> = {
|
|
|
18
18
|
hourStep: { type: Number, default: 1 },
|
|
19
19
|
minuteStep: { type: Number, default: 1 },
|
|
20
20
|
secondStep: { type: Number, default: 1 },
|
|
21
|
+
readonly: { type: Boolean, default: false },
|
|
22
|
+
clearable: { type: Boolean, default: false },
|
|
23
|
+
size: { type: String as unknown as MPropType<NonNullable<TimePickerProps['size']>>, default: undefined },
|
|
21
24
|
};
|
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
+
import { KineSize } from '../../types/props';
|
|
11
|
+
|
|
10
12
|
export declare type TimePickerProps = {
|
|
11
13
|
/**
|
|
12
14
|
* @description 时间值(字符串,如 "14:30:00")
|
|
@@ -56,6 +58,24 @@ export declare type TimePickerProps = {
|
|
|
56
58
|
* @default 1
|
|
57
59
|
*/
|
|
58
60
|
secondStep?: number;
|
|
61
|
+
/**
|
|
62
|
+
* @description 是否只读
|
|
63
|
+
* @type boolean
|
|
64
|
+
* @default false
|
|
65
|
+
*/
|
|
66
|
+
readonly?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* @description whether to show clear button. 是否可清空
|
|
69
|
+
* @type boolean
|
|
70
|
+
* @default false
|
|
71
|
+
*/
|
|
72
|
+
clearable?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* @description 尺寸
|
|
75
|
+
* @type KineSize
|
|
76
|
+
* @default undefined
|
|
77
|
+
*/
|
|
78
|
+
size?: KineSize;
|
|
59
79
|
};
|
|
60
80
|
|
|
61
81
|
/** 时间内部引用 */
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
8
|
*/
|
|
9
|
-
import { MCOPO } from '../../types/props';
|
|
9
|
+
import { MCOPO, MPropType } from '../../types/props';
|
|
10
10
|
import { DialogProps } from './props';
|
|
11
11
|
|
|
12
12
|
export const props: MCOPO<DialogProps> = {
|
|
@@ -16,4 +16,5 @@ export const props: MCOPO<DialogProps> = {
|
|
|
16
16
|
teleport: { type: Object, default: () => ({ to: 'body' }) },
|
|
17
17
|
title: { type: String, default: undefined },
|
|
18
18
|
width: { type: String, default: undefined },
|
|
19
|
+
beforeClose: { type: Function as unknown as MPropType<NonNullable<DialogProps['beforeClose']>>, default: undefined },
|
|
19
20
|
};
|
|
@@ -52,4 +52,11 @@ export declare type DialogProps = {
|
|
|
52
52
|
* @default undefined
|
|
53
53
|
*/
|
|
54
54
|
width?: string;
|
|
55
|
+
/**
|
|
56
|
+
* @description callback before close, return false or Promise.reject to prevent close
|
|
57
|
+
* 关闭前的回调,返回 false 或 reject 的 Promise 可阻止关闭
|
|
58
|
+
* @type () => boolean | Promise<boolean>
|
|
59
|
+
* @default undefined
|
|
60
|
+
*/
|
|
61
|
+
beforeClose?: () => boolean | Promise<boolean>;
|
|
55
62
|
};
|
|
@@ -29,4 +29,5 @@ export const props: MCOPO<DrawerProps> = {
|
|
|
29
29
|
title: { type: String, default: undefined },
|
|
30
30
|
width: { type: String, default: undefined },
|
|
31
31
|
height: { type: String, default: undefined },
|
|
32
|
+
beforeClose: { type: Function as unknown as MPropType<NonNullable<DrawerProps['beforeClose']>>, default: undefined },
|
|
32
33
|
};
|
|
@@ -70,4 +70,11 @@ export declare type DrawerProps = {
|
|
|
70
70
|
* @default undefined
|
|
71
71
|
*/
|
|
72
72
|
height?: string,
|
|
73
|
+
/**
|
|
74
|
+
* @description callback before close, return false or Promise.reject to prevent close
|
|
75
|
+
* 关闭前的回调,返回 false 或 reject 的 Promise 可阻止关闭
|
|
76
|
+
* @type () => boolean | Promise<boolean>
|
|
77
|
+
* @default undefined
|
|
78
|
+
*/
|
|
79
|
+
beforeClose?: () => boolean | Promise<boolean>,
|
|
73
80
|
};
|
|
@@ -50,3 +50,8 @@ type MPropMethod<T, TConstructor = any> = [T] extends [
|
|
|
50
50
|
: never
|
|
51
51
|
|
|
52
52
|
export type MPropType<T> = MPropConstructor<T> | MPropConstructor<T>[];
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* @description unified component size variants
|
|
56
|
+
*/
|
|
57
|
+
export type KineSize = 'large' | 'medium' | 'small';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @description composable for unified component size with global injection support
|
|
3
|
+
* @author 阿怪
|
|
4
|
+
* @date 2026/4/7
|
|
5
|
+
* @version v1.0.0
|
|
6
|
+
*
|
|
7
|
+
* 江湖的业务千篇一律,复杂的代码好几百行。
|
|
8
|
+
*/
|
|
9
|
+
import { computed, inject, type InjectionKey, type Ref } from 'vue';
|
|
10
|
+
import { KineSize } from '../../components/types/props';
|
|
11
|
+
|
|
12
|
+
export const KINE_SIZE_KEY: InjectionKey<Ref<KineSize>> = Symbol('kine-size');
|
|
13
|
+
|
|
14
|
+
export function useComponentSize(props: { size?: KineSize }): Ref<KineSize> {
|
|
15
|
+
const globalSize = inject(KINE_SIZE_KEY, undefined);
|
|
16
|
+
return computed(() => props.size ?? globalSize?.value ?? 'medium');
|
|
17
|
+
}
|
|
@@ -7,6 +7,7 @@ export declare function useInput<Props extends Record<string, any>>(props: Props
|
|
|
7
7
|
disabled: any;
|
|
8
8
|
type: any;
|
|
9
9
|
readOnly: any;
|
|
10
|
+
maxLength: any;
|
|
10
11
|
};
|
|
11
12
|
inputType: string;
|
|
12
13
|
inputClass: string;
|
|
@@ -18,4 +19,5 @@ export declare function useInput<Props extends Record<string, any>>(props: Props
|
|
|
18
19
|
onInput: (e: HTMLElementEvent<HTMLInputElement>) => void;
|
|
19
20
|
onFocus: (e: FocusEvent) => void;
|
|
20
21
|
onBlur: (e: FocusEvent) => void;
|
|
22
|
+
onClear: () => void;
|
|
21
23
|
};
|
package/dist/core.js
CHANGED
|
@@ -56,6 +56,22 @@ var props$49 = {
|
|
|
56
56
|
autofocus: {
|
|
57
57
|
type: Boolean,
|
|
58
58
|
default: false
|
|
59
|
+
},
|
|
60
|
+
clearable: {
|
|
61
|
+
type: Boolean,
|
|
62
|
+
default: false
|
|
63
|
+
},
|
|
64
|
+
size: {
|
|
65
|
+
type: String,
|
|
66
|
+
default: void 0
|
|
67
|
+
},
|
|
68
|
+
maxlength: {
|
|
69
|
+
type: Number,
|
|
70
|
+
default: void 0
|
|
71
|
+
},
|
|
72
|
+
showWordLimit: {
|
|
73
|
+
type: Boolean,
|
|
74
|
+
default: false
|
|
59
75
|
}
|
|
60
76
|
};
|
|
61
77
|
//#endregion
|
|
@@ -71,7 +87,8 @@ function useInput(props, ctx) {
|
|
|
71
87
|
placeholder: props.placeholder,
|
|
72
88
|
disabled: props.disabled,
|
|
73
89
|
type: props.type,
|
|
74
|
-
readOnly: props.readonly
|
|
90
|
+
readOnly: props.readonly,
|
|
91
|
+
maxLength: props.maxlength
|
|
75
92
|
};
|
|
76
93
|
const onInput = (e) => {
|
|
77
94
|
ctx.emit("update:modelValue", e.target.value);
|
|
@@ -83,6 +100,11 @@ function useInput(props, ctx) {
|
|
|
83
100
|
const onBlur = (e) => {
|
|
84
101
|
ctx.emit("blur", e);
|
|
85
102
|
};
|
|
103
|
+
const onClear = () => {
|
|
104
|
+
ctx.emit("update:modelValue", "");
|
|
105
|
+
ctx.emit("input", "");
|
|
106
|
+
ctx.emit("clear");
|
|
107
|
+
};
|
|
86
108
|
return {
|
|
87
109
|
baseProps,
|
|
88
110
|
inputType,
|
|
@@ -90,7 +112,8 @@ function useInput(props, ctx) {
|
|
|
90
112
|
rowInfo,
|
|
91
113
|
onInput,
|
|
92
114
|
onFocus,
|
|
93
|
-
onBlur
|
|
115
|
+
onBlur,
|
|
116
|
+
onClear
|
|
94
117
|
};
|
|
95
118
|
}
|
|
96
119
|
//#endregion
|
|
@@ -144,7 +167,7 @@ var props$48 = {
|
|
|
144
167
|
},
|
|
145
168
|
size: {
|
|
146
169
|
type: String,
|
|
147
|
-
default:
|
|
170
|
+
default: void 0,
|
|
148
171
|
enum: [
|
|
149
172
|
"large",
|
|
150
173
|
"medium",
|
|
@@ -255,6 +278,18 @@ var props$47 = {
|
|
|
255
278
|
fetch: {
|
|
256
279
|
type: Function,
|
|
257
280
|
default: void 0
|
|
281
|
+
},
|
|
282
|
+
clearable: {
|
|
283
|
+
type: Boolean,
|
|
284
|
+
default: false
|
|
285
|
+
},
|
|
286
|
+
size: {
|
|
287
|
+
type: String,
|
|
288
|
+
default: void 0
|
|
289
|
+
},
|
|
290
|
+
loading: {
|
|
291
|
+
type: Boolean,
|
|
292
|
+
default: false
|
|
258
293
|
}
|
|
259
294
|
};
|
|
260
295
|
//#endregion
|
|
@@ -799,7 +834,7 @@ var TagCore = { props: {
|
|
|
799
834
|
},
|
|
800
835
|
size: {
|
|
801
836
|
type: String,
|
|
802
|
-
default:
|
|
837
|
+
default: void 0
|
|
803
838
|
},
|
|
804
839
|
closable: {
|
|
805
840
|
type: Boolean,
|
|
@@ -813,6 +848,10 @@ var TagCore = { props: {
|
|
|
813
848
|
//#endregion
|
|
814
849
|
//#region components/base/progress/api.ts
|
|
815
850
|
var props$43 = {
|
|
851
|
+
type: {
|
|
852
|
+
type: String,
|
|
853
|
+
default: "line"
|
|
854
|
+
},
|
|
816
855
|
value: {
|
|
817
856
|
type: Number,
|
|
818
857
|
default: 0
|
|
@@ -832,6 +871,10 @@ var props$43 = {
|
|
|
832
871
|
strokeWidth: {
|
|
833
872
|
type: Number,
|
|
834
873
|
default: 4
|
|
874
|
+
},
|
|
875
|
+
width: {
|
|
876
|
+
type: Number,
|
|
877
|
+
default: 80
|
|
835
878
|
}
|
|
836
879
|
};
|
|
837
880
|
//#endregion
|
|
@@ -1036,6 +1079,10 @@ var props$39 = {
|
|
|
1036
1079
|
controls: {
|
|
1037
1080
|
type: Boolean,
|
|
1038
1081
|
default: true
|
|
1082
|
+
},
|
|
1083
|
+
size: {
|
|
1084
|
+
type: String,
|
|
1085
|
+
default: void 0
|
|
1039
1086
|
}
|
|
1040
1087
|
};
|
|
1041
1088
|
//#endregion
|
|
@@ -1175,6 +1222,14 @@ var props$38 = {
|
|
|
1175
1222
|
showStops: {
|
|
1176
1223
|
type: Boolean,
|
|
1177
1224
|
default: false
|
|
1225
|
+
},
|
|
1226
|
+
readonly: {
|
|
1227
|
+
type: Boolean,
|
|
1228
|
+
default: false
|
|
1229
|
+
},
|
|
1230
|
+
size: {
|
|
1231
|
+
type: String,
|
|
1232
|
+
default: void 0
|
|
1178
1233
|
}
|
|
1179
1234
|
};
|
|
1180
1235
|
//#endregion
|
|
@@ -1297,6 +1352,7 @@ function useSlider(props, ctx) {
|
|
|
1297
1352
|
const btnW = 20;
|
|
1298
1353
|
const sub = props.max - props.min;
|
|
1299
1354
|
const movePositionHandler = (event, position) => {
|
|
1355
|
+
if (props.readonly) return position;
|
|
1300
1356
|
const totalW = sliderSize.w.value - btnW;
|
|
1301
1357
|
let positionX = position.x + event.dx;
|
|
1302
1358
|
if (positionX > totalW) positionX = totalW;
|
|
@@ -1796,6 +1852,10 @@ var props$36 = {
|
|
|
1796
1852
|
disabled: {
|
|
1797
1853
|
type: Boolean,
|
|
1798
1854
|
default: false
|
|
1855
|
+
},
|
|
1856
|
+
maxWidth: {
|
|
1857
|
+
type: String,
|
|
1858
|
+
default: void 0
|
|
1799
1859
|
}
|
|
1800
1860
|
};
|
|
1801
1861
|
//#endregion
|
|
@@ -1917,7 +1977,7 @@ var LoadingCore = { props: {
|
|
|
1917
1977
|
},
|
|
1918
1978
|
size: {
|
|
1919
1979
|
type: String,
|
|
1920
|
-
default:
|
|
1980
|
+
default: void 0
|
|
1921
1981
|
},
|
|
1922
1982
|
mask: {
|
|
1923
1983
|
type: Boolean,
|
|
@@ -1965,6 +2025,10 @@ var DialogCore = { props: {
|
|
|
1965
2025
|
width: {
|
|
1966
2026
|
type: String,
|
|
1967
2027
|
default: void 0
|
|
2028
|
+
},
|
|
2029
|
+
beforeClose: {
|
|
2030
|
+
type: Function,
|
|
2031
|
+
default: void 0
|
|
1968
2032
|
}
|
|
1969
2033
|
} };
|
|
1970
2034
|
//#endregion
|
|
@@ -2012,6 +2076,10 @@ var DrawerCore = { props: {
|
|
|
2012
2076
|
height: {
|
|
2013
2077
|
type: String,
|
|
2014
2078
|
default: void 0
|
|
2079
|
+
},
|
|
2080
|
+
beforeClose: {
|
|
2081
|
+
type: Function,
|
|
2082
|
+
default: void 0
|
|
2015
2083
|
}
|
|
2016
2084
|
} };
|
|
2017
2085
|
//#endregion
|
|
@@ -2602,6 +2670,22 @@ var props$25 = {
|
|
|
2602
2670
|
disabled: {
|
|
2603
2671
|
type: Boolean,
|
|
2604
2672
|
default: false
|
|
2673
|
+
},
|
|
2674
|
+
readonly: {
|
|
2675
|
+
type: Boolean,
|
|
2676
|
+
default: false
|
|
2677
|
+
},
|
|
2678
|
+
clearable: {
|
|
2679
|
+
type: Boolean,
|
|
2680
|
+
default: false
|
|
2681
|
+
},
|
|
2682
|
+
size: {
|
|
2683
|
+
type: String,
|
|
2684
|
+
default: void 0
|
|
2685
|
+
},
|
|
2686
|
+
disabledDate: {
|
|
2687
|
+
type: Function,
|
|
2688
|
+
default: void 0
|
|
2605
2689
|
}
|
|
2606
2690
|
};
|
|
2607
2691
|
//#endregion
|