nicklabs-ui 1.0.108 → 1.0.110
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 +54 -1
- package/dist/index.mjs +871 -579
- package/dist/nicklabs-ui.css +1 -1
- package/dist/src/components/NTimePicker.vue.d.ts +23 -0
- package/dist/src/index.d.ts +4 -1
- package/dist/src/types/components/timepicker.d.ts +6 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A Vue 3 component library with glassmorphism design, built for modern web applications.
|
|
4
4
|
|
|
5
|
-
**Version**: 1.0.
|
|
5
|
+
**Version**: 1.0.110 | **Framework**: Vue 3.5+
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -23,6 +23,7 @@ A Vue 3 component library with glassmorphism design, built for modern web applic
|
|
|
23
23
|
- [NAudioSelect](#naudioselect)
|
|
24
24
|
- [NSwitch](#nswitch)
|
|
25
25
|
- [NDatePicker](#ndatepicker)
|
|
26
|
+
- [NTimePicker](#ntimepicker)
|
|
26
27
|
- [Data Display](#data-display)
|
|
27
28
|
- [NTable](#ntable)
|
|
28
29
|
- [NVirtualTable](#nvirtualtable)
|
|
@@ -861,6 +862,58 @@ const endDate = ref('')
|
|
|
861
862
|
|
|
862
863
|
---
|
|
863
864
|
|
|
865
|
+
#### NTimePicker
|
|
866
|
+
|
|
867
|
+
Time picker for selecting hour, minute, and second. Each unit can be toggled on or off independently, and the bound string is trimmed to match the enabled units. Uses a scrolling-list dropdown on desktop and a bottom sheet on mobile.
|
|
868
|
+
|
|
869
|
+
**Props**
|
|
870
|
+
|
|
871
|
+
| Prop | Type | Default | Description |
|
|
872
|
+
|------|------|---------|-------------|
|
|
873
|
+
| `modelValue` | `string` | `""` | Bound value (v-model). Format follows the enabled units, e.g. `HH:mm:ss`, `HH:mm`, `mm:ss` |
|
|
874
|
+
| `hour` | `boolean` | `true` | Show the "hour" column |
|
|
875
|
+
| `minute` | `boolean` | `true` | Show the "minute" column |
|
|
876
|
+
| `second` | `boolean` | `true` | Show the "second" column |
|
|
877
|
+
| `placeholder` | `string` | `"請選擇時間"` | Placeholder text |
|
|
878
|
+
| `disabled` | `boolean` | `false` | Disable picker |
|
|
879
|
+
| `clearable` | `boolean` | `false` | Show clear button |
|
|
880
|
+
| `title` | `string` | `""` | Label above picker |
|
|
881
|
+
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Trigger size |
|
|
882
|
+
|
|
883
|
+
**Events**
|
|
884
|
+
|
|
885
|
+
| Event | Payload | Description |
|
|
886
|
+
|-------|---------|-------------|
|
|
887
|
+
| `update:modelValue` | `string` | Value changed (v-model) |
|
|
888
|
+
| `change` | `string` | Value changed |
|
|
889
|
+
| `clear` | — | Clear button clicked |
|
|
890
|
+
|
|
891
|
+
**Usage**
|
|
892
|
+
|
|
893
|
+
```vue
|
|
894
|
+
<template>
|
|
895
|
+
<!-- Hour : minute : second -->
|
|
896
|
+
<NTimePicker v-model="time" title="Select Time" clearable />
|
|
897
|
+
|
|
898
|
+
<!-- Hour : minute only (value becomes "HH:mm") -->
|
|
899
|
+
<NTimePicker v-model="timeHM" :second="false" title="Hour & Minute" />
|
|
900
|
+
|
|
901
|
+
<!-- Hour only (value becomes "HH") -->
|
|
902
|
+
<NTimePicker v-model="hourOnly" :minute="false" :second="false" title="Hour" />
|
|
903
|
+
</template>
|
|
904
|
+
|
|
905
|
+
<script setup>
|
|
906
|
+
import { ref } from 'vue'
|
|
907
|
+
import { NTimePicker } from 'nicklabs-ui'
|
|
908
|
+
|
|
909
|
+
const time = ref('09:30:00')
|
|
910
|
+
const timeHM = ref('14:30')
|
|
911
|
+
const hourOnly = ref('08')
|
|
912
|
+
</script>
|
|
913
|
+
```
|
|
914
|
+
|
|
915
|
+
---
|
|
916
|
+
|
|
864
917
|
### Data Display
|
|
865
918
|
|
|
866
919
|
---
|