@component-hook/picker 1.1.5 → 1.2.0-alpha.0
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/README.md +3 -29
- package/dist/react/index.css +1 -1
- package/dist/react/picker.es.d.ts +20 -39
- package/dist/react/picker.es.js +491 -1907
- package/dist/react/picker.umd.js +3 -38
- package/dist/vue/index.css +1 -1
- package/dist/vue/picker.es.d.ts +38 -57
- package/dist/vue/picker.es.js +315 -435
- package/dist/vue/picker.umd.js +2 -2
- package/package.json +3 -7
package/README.md
CHANGED
|
@@ -15,7 +15,6 @@ Picker component with `vue3` and `react`.
|
|
|
15
15
|
|
|
16
16
|
- Supports `single-column` and `cascade` picker
|
|
17
17
|
- Scroll wheel 3D effect for smooth selection
|
|
18
|
-
- Customize `title`, `confirm` and `cancel` buttons
|
|
19
18
|
- Flexible column structure for different use cases
|
|
20
19
|
- Built-in `DatePicker` and `TimePicker` components
|
|
21
20
|
- Full TypeScript support
|
|
@@ -46,30 +45,20 @@ $ pnpm install @component-hook/picker
|
|
|
46
45
|
import { Picker } from '@component-hook/picker/vue';
|
|
47
46
|
import { ref } from 'vue';
|
|
48
47
|
|
|
49
|
-
const isShowPicker = ref(false);
|
|
50
48
|
const pickerValues = ref<number[]>([]);
|
|
51
49
|
const columns = Array.from({ length: 50 }, (_, index) => ({ label: index, value: index }));
|
|
52
50
|
|
|
53
|
-
function
|
|
51
|
+
function onChange(value: number[]) {
|
|
54
52
|
pickerValues.value = value;
|
|
55
53
|
}
|
|
56
|
-
|
|
57
|
-
function onCancel() {
|
|
58
|
-
console.log('cancel');
|
|
59
|
-
}
|
|
60
54
|
</script>
|
|
61
55
|
|
|
62
56
|
<template>
|
|
63
57
|
<picker
|
|
64
|
-
v-model:show="isShowPicker"
|
|
65
58
|
:columns="columns"
|
|
66
|
-
|
|
67
|
-
@confirm="onConfirm"
|
|
68
|
-
@cancel="onCancel"
|
|
59
|
+
@change="onChange"
|
|
69
60
|
/>
|
|
70
61
|
|
|
71
|
-
<button @click="isShowPicker = true">toggle Base picker</button>
|
|
72
|
-
|
|
73
62
|
<p class="mt-6 text-sm font-mono">Selected value: {{ pickerValues.join('') || 'not selected yet' }}</p>
|
|
74
63
|
</template>
|
|
75
64
|
```
|
|
@@ -83,34 +72,19 @@ import { useState } from 'react';
|
|
|
83
72
|
const columns = Array.from({ length: 50 }, (_, index) => ({ label: index, value: index }));
|
|
84
73
|
|
|
85
74
|
export function BasePicker() {
|
|
86
|
-
const [showPicker, setShowPicker] = useState(false);
|
|
87
75
|
const [pickerValues, setPickerValues] = useState<number[]>([]);
|
|
88
76
|
|
|
89
|
-
function onConfirm(values: number[]) {
|
|
90
|
-
setPickerValues(values);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
77
|
return (
|
|
94
78
|
<>
|
|
95
79
|
<Picker
|
|
96
|
-
show={showPicker}
|
|
97
80
|
columns={columns}
|
|
98
|
-
|
|
99
|
-
onClose={() => setShowPicker(false)}
|
|
100
|
-
onConfirm={onConfirm}
|
|
101
|
-
onCancel={onCancel}
|
|
81
|
+
onChange={setPickerValues}
|
|
102
82
|
/>
|
|
103
83
|
|
|
104
|
-
<button onClick={() => setShowPicker(true)}>toggle Base picker</button>
|
|
105
|
-
|
|
106
84
|
<p>Selected value: {pickerValues.join('') || 'not selected yet'}</p>
|
|
107
85
|
</>
|
|
108
86
|
);
|
|
109
87
|
}
|
|
110
|
-
|
|
111
|
-
function onCancel() {
|
|
112
|
-
console.log('cancel');
|
|
113
|
-
}
|
|
114
88
|
```
|
|
115
89
|
|
|
116
90
|
## License
|
package/dist/react/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--chook-picker-background: #fff;--chook-picker-
|
|
1
|
+
:root{--chook-picker-background: #fff;--chook-picker-columns-margin: 0 1rem;--chook-picker-columns-backdrop: linear-gradient( to bottom, #f2f2f2 0px, #f2f2f2 .0625rem, transparent .0625rem, transparent calc(100% - .0625rem) , #f2f2f2 calc(100% - .0625rem) , #f2f2f2 100% );--chook-picker-mask-backdrop: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));--chook-picker-column-label-color: #323233;--chook-picker-column-label-padding: 0 .25rem;--chook-picker-column-font-size: 1rem;--chook-picker-column-font-weight: 500}.chook-picker-container{background:var(--chook-picker-background)}.chook-picker-columns{width:calc(100% - var(--chook-picker-columns-margin) * 2);height:13.5rem;overflow:hidden;position:relative;display:flex;margin:var(--chook-picker-columns-margin)}.chook-picker-columns-backdrop{background-image:var(--chook-picker-columns-backdrop);background-repeat:no-repeat;background-position:center;background-size:100% 3rem}.chook-picker-mask-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:var(--chook-picker-mask-backdrop);background-repeat:no-repeat;background-position:top,bottom;background-size:100% 5.25rem}.chook-picker-loading{height:100%;width:100%;position:absolute;top:0;left:0}.chook-picker-column{flex:1 1 0%;overflow:hidden;padding:5.375rem 0;cursor:grab}.chook-picker-column ul{margin:0;padding:0;list-style:none}.chook-picker-column-item{height:3rem;display:flex;justify-content:center;align-items:center;cursor:grab}.chook-picker-column-label{color:var(--chook-picker-column-label-color);font-size:var(--chook-picker-column-font-size);font-weight:var(--chook-picker-column-font-weight);padding:var(--chook-picker-column-label-padding);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none}
|
|
@@ -1,13 +1,19 @@
|
|
|
1
|
+
import { ForwardRefExoticComponent } from 'react';
|
|
1
2
|
import { JSX } from 'react';
|
|
2
3
|
import { ReactNode } from 'react';
|
|
4
|
+
import { RefAttributes } from 'react';
|
|
3
5
|
|
|
4
|
-
export declare
|
|
6
|
+
export declare const DatePicker: ForwardRefExoticComponent<Props & RefAttributes<DatePickerRef>>;
|
|
5
7
|
|
|
6
8
|
export declare type DatePickerColumnType = 'year' | 'month' | 'day';
|
|
7
9
|
|
|
10
|
+
export declare type DatePickerRef = {
|
|
11
|
+
setCurrentDate: () => void;
|
|
12
|
+
};
|
|
13
|
+
|
|
8
14
|
export declare type Direction = '' | 'vertical' | 'horizontal';
|
|
9
15
|
|
|
10
|
-
export declare function Picker<T>({
|
|
16
|
+
export declare function Picker<T>({ values, columns, loading, loadingSlot, emptySlot, columnsFieldNames, onChange, }: PickerProps<T>): JSX.Element;
|
|
11
17
|
|
|
12
18
|
export declare type PickerColumn<T = string | number> = Array<PickerOption<T> | undefined>;
|
|
13
19
|
|
|
@@ -28,73 +34,48 @@ export declare interface PickerOption<T> {
|
|
|
28
34
|
[key: PropertyKey]: any;
|
|
29
35
|
}
|
|
30
36
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
declare interface Props<T = string | number> {
|
|
34
|
-
show: boolean;
|
|
37
|
+
declare interface PickerProps<T = string | number> {
|
|
35
38
|
values?: T[];
|
|
36
|
-
title?: string;
|
|
37
39
|
columns: PickerColumn<T> | PickerColumn<T>[];
|
|
38
|
-
linkage?: boolean;
|
|
39
40
|
loading?: boolean;
|
|
40
41
|
loadingSlot?: ReactNode;
|
|
41
42
|
emptySlot?: ReactNode;
|
|
42
|
-
teleport?: Element | DocumentFragment;
|
|
43
|
-
confirmButtonText?: string;
|
|
44
|
-
cancelButtonText?: string;
|
|
45
43
|
columnsFieldNames?: PickerFields;
|
|
46
|
-
onConfirm?: (values: T[]) => void;
|
|
47
|
-
onClose: () => void;
|
|
48
44
|
onChange?: (values: T[]) => void;
|
|
49
|
-
onCancel?: () => void;
|
|
50
|
-
onOpen?: () => void;
|
|
51
|
-
onClosed?: () => void;
|
|
52
45
|
}
|
|
53
46
|
|
|
54
|
-
declare
|
|
55
|
-
|
|
47
|
+
export declare type PickerSelectedValues<T = string | number> = Array<PickerOption<T>['value']>;
|
|
48
|
+
|
|
49
|
+
declare interface Props {
|
|
56
50
|
values?: number[];
|
|
57
|
-
title?: string;
|
|
58
51
|
columnsType?: DatePickerColumnType[];
|
|
59
52
|
minDate?: Date;
|
|
60
53
|
maxDate?: Date;
|
|
61
|
-
teleport?: Element | DocumentFragment;
|
|
62
|
-
confirmButtonText?: string;
|
|
63
|
-
cancelButtonText?: string;
|
|
64
54
|
formatYearLabel?: PickerFormatLabel;
|
|
65
55
|
formatMonthLabel?: PickerFormatLabel;
|
|
66
56
|
formatDayLabel?: PickerFormatLabel;
|
|
67
|
-
|
|
68
|
-
onClose: () => void;
|
|
69
|
-
onCancel?: () => void;
|
|
70
|
-
onOpen?: () => void;
|
|
71
|
-
onClosed?: () => void;
|
|
57
|
+
onChange?: (values: number[]) => void;
|
|
72
58
|
}
|
|
73
59
|
|
|
74
|
-
declare interface
|
|
75
|
-
show: boolean;
|
|
60
|
+
declare interface Props_2 {
|
|
76
61
|
values?: number[];
|
|
77
|
-
title?: string;
|
|
78
62
|
columnsType?: TimePickerColumnType[];
|
|
79
63
|
minTime?: string;
|
|
80
64
|
maxTime?: string;
|
|
81
|
-
teleport?: Element | DocumentFragment;
|
|
82
|
-
confirmButtonText?: string;
|
|
83
|
-
cancelButtonText?: string;
|
|
84
65
|
formatHourLabel?: PickerFormatLabel;
|
|
85
66
|
formatMinuteLabel?: PickerFormatLabel;
|
|
86
67
|
formatSecondLabel?: PickerFormatLabel;
|
|
87
|
-
|
|
88
|
-
onClose: () => void;
|
|
89
|
-
onCancel?: () => void;
|
|
90
|
-
onOpen?: () => void;
|
|
91
|
-
onClosed?: () => void;
|
|
68
|
+
onChange?: (values: number[]) => void;
|
|
92
69
|
}
|
|
93
70
|
|
|
94
|
-
export declare
|
|
71
|
+
export declare const TimePicker: ForwardRefExoticComponent<Props_2 & RefAttributes<TimePickerRef>>;
|
|
95
72
|
|
|
96
73
|
export declare type TimePickerColumnType = 'hour' | 'minute' | 'second';
|
|
97
74
|
|
|
75
|
+
export declare type TimePickerRef = {
|
|
76
|
+
setCurrentTime: () => void;
|
|
77
|
+
};
|
|
78
|
+
|
|
98
79
|
export declare type TimeSelection = Record<TimePickerColumnType, number>;
|
|
99
80
|
|
|
100
81
|
export { }
|