@polymarbot/nuxt-layer-shadcn-ui 0.5.4 → 0.6.1
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/app/components/ui/DatePicker/index.stories.ts +4 -4
- package/app/components/ui/DateRangePicker/en.json +2 -3
- package/app/components/ui/DateRangePicker/index.stories.ts +57 -47
- package/app/components/ui/DateRangePicker/index.vue +36 -48
- package/app/components/ui/DateRangePicker/types.ts +6 -10
- package/app/components/ui/Drawer/index.stories.ts +1 -1
- package/app/components/ui/InputCurrency/index.stories.ts +1 -1
- package/app/components/ui/InputNumber/index.stories.ts +1 -1
- package/app/components/ui/InputOtp/index.stories.ts +1 -1
- package/app/components/ui/InputPercent/index.stories.ts +1 -1
- package/app/components/ui/InputRange/index.stories.ts +1 -1
- package/app/components/ui/InputRange/index.vue +5 -3
- package/app/components/ui/Modal/index.stories.ts +1 -1
- package/app/components/ui/Select/index.stories.ts +1 -1
- package/app/components/ui/Slider/index.stories.ts +1 -1
- package/app/components/ui/Switch/index.stories.ts +1 -1
- package/app/en.json +3 -0
- package/i18n/messages/ar.json +4 -2
- package/i18n/messages/de.json +4 -2
- package/i18n/messages/en.json +4 -2
- package/i18n/messages/es.json +4 -2
- package/i18n/messages/fr.json +4 -2
- package/i18n/messages/hi.json +4 -2
- package/i18n/messages/id.json +4 -2
- package/i18n/messages/it.json +4 -2
- package/i18n/messages/ja.json +4 -2
- package/i18n/messages/ko.json +4 -2
- package/i18n/messages/nl.json +4 -2
- package/i18n/messages/pl.json +4 -2
- package/i18n/messages/pt.json +4 -2
- package/i18n/messages/ru.json +4 -2
- package/i18n/messages/th.json +4 -2
- package/i18n/messages/tr.json +4 -2
- package/i18n/messages/vi.json +4 -2
- package/i18n/messages/zh-CN.json +4 -2
- package/i18n/messages/zh-TW.json +4 -2
- package/package.json +2 -2
|
@@ -28,11 +28,11 @@ const meta = {
|
|
|
28
28
|
showTime: false,
|
|
29
29
|
disabled: false,
|
|
30
30
|
readonly: false,
|
|
31
|
-
placeholder:
|
|
31
|
+
placeholder: undefined,
|
|
32
32
|
minDate: undefined,
|
|
33
33
|
maxDate: undefined,
|
|
34
|
-
valueFormat:
|
|
35
|
-
autoApply:
|
|
34
|
+
valueFormat: undefined,
|
|
35
|
+
autoApply: true,
|
|
36
36
|
class: '',
|
|
37
37
|
},
|
|
38
38
|
render: args => ({
|
|
@@ -43,7 +43,7 @@ const meta = {
|
|
|
43
43
|
},
|
|
44
44
|
template: `
|
|
45
45
|
<div class="max-w-xs">
|
|
46
|
-
<DatePicker v-
|
|
46
|
+
<DatePicker v-bind="args" v-model="value" />
|
|
47
47
|
<div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
|
|
48
48
|
</div>
|
|
49
49
|
`,
|
|
@@ -1,48 +1,53 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
2
|
-
import type { DateRangePickerValue } from './types'
|
|
3
2
|
import DateRangePicker from './index.vue'
|
|
4
3
|
|
|
5
4
|
const meta = {
|
|
6
5
|
title: 'UI/DateRangePicker',
|
|
7
6
|
component: DateRangePicker,
|
|
8
7
|
argTypes: {
|
|
9
|
-
|
|
8
|
+
start: { control: 'date' },
|
|
9
|
+
end: { control: 'date' },
|
|
10
|
+
minDate: { control: 'date' },
|
|
11
|
+
maxDate: { control: 'date' },
|
|
10
12
|
showTime: { control: 'boolean' },
|
|
11
13
|
disabled: { control: 'boolean' },
|
|
12
14
|
readonly: { control: 'boolean' },
|
|
13
15
|
startPlaceholder: { control: 'text' },
|
|
14
16
|
endPlaceholder: { control: 'text' },
|
|
15
|
-
minDate: { control: 'date' },
|
|
16
|
-
maxDate: { control: 'date' },
|
|
17
17
|
maxSpanDays: { control: 'number' },
|
|
18
18
|
valueFormat: { control: 'text' },
|
|
19
19
|
autoApply: { control: 'boolean' },
|
|
20
20
|
class: { control: 'text' },
|
|
21
21
|
},
|
|
22
22
|
args: {
|
|
23
|
-
|
|
23
|
+
start: null,
|
|
24
|
+
end: null,
|
|
25
|
+
minDate: undefined,
|
|
26
|
+
maxDate: undefined,
|
|
24
27
|
showTime: false,
|
|
25
28
|
disabled: false,
|
|
26
29
|
readonly: false,
|
|
27
|
-
startPlaceholder:
|
|
28
|
-
endPlaceholder:
|
|
29
|
-
minDate: undefined,
|
|
30
|
-
maxDate: undefined,
|
|
30
|
+
startPlaceholder: undefined,
|
|
31
|
+
endPlaceholder: undefined,
|
|
31
32
|
maxSpanDays: undefined,
|
|
32
|
-
valueFormat:
|
|
33
|
-
autoApply:
|
|
33
|
+
valueFormat: undefined,
|
|
34
|
+
autoApply: true,
|
|
34
35
|
class: '',
|
|
35
36
|
},
|
|
36
37
|
render: args => ({
|
|
37
38
|
components: { DateRangePicker },
|
|
38
39
|
setup () {
|
|
39
|
-
const
|
|
40
|
-
|
|
40
|
+
const start = ref<Date | string | null>(args.start ?? null)
|
|
41
|
+
const end = ref<Date | string | null>(args.end ?? null)
|
|
42
|
+
return { args, start, end }
|
|
41
43
|
},
|
|
42
44
|
template: `
|
|
43
45
|
<div class="max-w-lg">
|
|
44
|
-
<DateRangePicker v-model="
|
|
45
|
-
<div class="mt-2 text-sm text-muted-foreground">
|
|
46
|
+
<DateRangePicker v-bind="args" v-model:start="start" v-model:end="end" />
|
|
47
|
+
<div class="mt-2 text-sm text-muted-foreground">
|
|
48
|
+
<div>Start: {{ start }}</div>
|
|
49
|
+
<div>End: {{ end }}</div>
|
|
50
|
+
</div>
|
|
46
51
|
</div>
|
|
47
52
|
`,
|
|
48
53
|
}),
|
|
@@ -60,20 +65,24 @@ export const WithTime: Story = {
|
|
|
60
65
|
...noControls,
|
|
61
66
|
docs: {
|
|
62
67
|
source: {
|
|
63
|
-
code: '<DateRangePicker v-model="
|
|
68
|
+
code: '<DateRangePicker v-model:start="start" v-model:end="end" showTime />',
|
|
64
69
|
},
|
|
65
70
|
},
|
|
66
71
|
},
|
|
67
72
|
render: () => ({
|
|
68
73
|
components: { DateRangePicker },
|
|
69
74
|
setup () {
|
|
70
|
-
const
|
|
71
|
-
|
|
75
|
+
const start = ref<Date | string | null>(null)
|
|
76
|
+
const end = ref<Date | string | null>(null)
|
|
77
|
+
return { start, end }
|
|
72
78
|
},
|
|
73
79
|
template: `
|
|
74
80
|
<div class="max-w-lg">
|
|
75
|
-
<DateRangePicker v-model="
|
|
76
|
-
<div class="mt-2 text-sm text-muted-foreground">
|
|
81
|
+
<DateRangePicker v-model:start="start" v-model:end="end" showTime />
|
|
82
|
+
<div class="mt-2 text-sm text-muted-foreground">
|
|
83
|
+
<div>Start: {{ start }}</div>
|
|
84
|
+
<div>End: {{ end }}</div>
|
|
85
|
+
</div>
|
|
77
86
|
</div>
|
|
78
87
|
`,
|
|
79
88
|
}),
|
|
@@ -84,20 +93,24 @@ export const MaxSpanDays: Story = {
|
|
|
84
93
|
...noControls,
|
|
85
94
|
docs: {
|
|
86
95
|
source: {
|
|
87
|
-
code: '<DateRangePicker v-model="
|
|
96
|
+
code: '<DateRangePicker v-model:start="start" v-model:end="end" :maxSpanDays="7" />',
|
|
88
97
|
},
|
|
89
98
|
},
|
|
90
99
|
},
|
|
91
100
|
render: () => ({
|
|
92
101
|
components: { DateRangePicker },
|
|
93
102
|
setup () {
|
|
94
|
-
const
|
|
95
|
-
|
|
103
|
+
const start = ref<Date | string | null>(null)
|
|
104
|
+
const end = ref<Date | string | null>(null)
|
|
105
|
+
return { start, end }
|
|
96
106
|
},
|
|
97
107
|
template: `
|
|
98
108
|
<div class="max-w-lg">
|
|
99
|
-
<DateRangePicker v-model="
|
|
100
|
-
<div class="mt-2 text-sm text-muted-foreground">
|
|
109
|
+
<DateRangePicker v-model:start="start" v-model:end="end" :maxSpanDays="7" />
|
|
110
|
+
<div class="mt-2 text-sm text-muted-foreground">
|
|
111
|
+
<div>Start: {{ start }}</div>
|
|
112
|
+
<div>End: {{ end }}</div>
|
|
113
|
+
</div>
|
|
101
114
|
</div>
|
|
102
115
|
`,
|
|
103
116
|
}),
|
|
@@ -108,23 +121,24 @@ export const Preselected: Story = {
|
|
|
108
121
|
...noControls,
|
|
109
122
|
docs: {
|
|
110
123
|
source: {
|
|
111
|
-
code: '<DateRangePicker v-model="
|
|
124
|
+
code: '<DateRangePicker v-model:start="start" v-model:end="end" />',
|
|
112
125
|
},
|
|
113
126
|
},
|
|
114
127
|
},
|
|
115
128
|
render: () => ({
|
|
116
129
|
components: { DateRangePicker },
|
|
117
130
|
setup () {
|
|
118
|
-
const
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
])
|
|
122
|
-
return { preselected }
|
|
131
|
+
const start = ref<Date | string | null>(new Date(2025, 5, 1))
|
|
132
|
+
const end = ref<Date | string | null>(new Date(2025, 5, 15))
|
|
133
|
+
return { start, end }
|
|
123
134
|
},
|
|
124
135
|
template: `
|
|
125
136
|
<div class="max-w-lg">
|
|
126
|
-
<DateRangePicker v-model="
|
|
127
|
-
<div class="mt-2 text-sm text-muted-foreground">
|
|
137
|
+
<DateRangePicker v-model:start="start" v-model:end="end" />
|
|
138
|
+
<div class="mt-2 text-sm text-muted-foreground">
|
|
139
|
+
<div>Start: {{ start }}</div>
|
|
140
|
+
<div>End: {{ end }}</div>
|
|
141
|
+
</div>
|
|
128
142
|
</div>
|
|
129
143
|
`,
|
|
130
144
|
}),
|
|
@@ -135,22 +149,20 @@ export const Disabled: Story = {
|
|
|
135
149
|
...noControls,
|
|
136
150
|
docs: {
|
|
137
151
|
source: {
|
|
138
|
-
code: '<DateRangePicker v-model="
|
|
152
|
+
code: '<DateRangePicker v-model:start="start" v-model:end="end" disabled />',
|
|
139
153
|
},
|
|
140
154
|
},
|
|
141
155
|
},
|
|
142
156
|
render: () => ({
|
|
143
157
|
components: { DateRangePicker },
|
|
144
158
|
setup () {
|
|
145
|
-
const
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
])
|
|
149
|
-
return { range }
|
|
159
|
+
const start = ref<Date | string | null>(new Date(2025, 5, 1))
|
|
160
|
+
const end = ref<Date | string | null>(new Date(2025, 5, 15))
|
|
161
|
+
return { start, end }
|
|
150
162
|
},
|
|
151
163
|
template: `
|
|
152
164
|
<div class="max-w-lg">
|
|
153
|
-
<DateRangePicker v-model="
|
|
165
|
+
<DateRangePicker v-model:start="start" v-model:end="end" disabled />
|
|
154
166
|
</div>
|
|
155
167
|
`,
|
|
156
168
|
}),
|
|
@@ -161,22 +173,20 @@ export const Readonly: Story = {
|
|
|
161
173
|
...noControls,
|
|
162
174
|
docs: {
|
|
163
175
|
source: {
|
|
164
|
-
code: '<DateRangePicker v-model="
|
|
176
|
+
code: '<DateRangePicker v-model:start="start" v-model:end="end" readonly />',
|
|
165
177
|
},
|
|
166
178
|
},
|
|
167
179
|
},
|
|
168
180
|
render: () => ({
|
|
169
181
|
components: { DateRangePicker },
|
|
170
182
|
setup () {
|
|
171
|
-
const
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
])
|
|
175
|
-
return { range }
|
|
183
|
+
const start = ref<Date | string | null>(new Date(2025, 5, 1))
|
|
184
|
+
const end = ref<Date | string | null>(new Date(2025, 5, 15))
|
|
185
|
+
return { start, end }
|
|
176
186
|
},
|
|
177
187
|
template: `
|
|
178
188
|
<div class="max-w-lg">
|
|
179
|
-
<DateRangePicker v-model="
|
|
189
|
+
<DateRangePicker v-model:start="start" v-model:end="end" readonly />
|
|
180
190
|
</div>
|
|
181
191
|
`,
|
|
182
192
|
}),
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import type { DateRangePickerProps
|
|
2
|
+
import type { DateRangePickerProps } from './types'
|
|
3
3
|
|
|
4
4
|
defineOptions({ inheritAttrs: false })
|
|
5
5
|
|
|
6
6
|
const props = withDefaults(defineProps<DateRangePickerProps>(), {
|
|
7
|
-
|
|
7
|
+
start: null,
|
|
8
|
+
end: null,
|
|
8
9
|
showTime: false,
|
|
9
10
|
disabled: false,
|
|
10
11
|
readonly: false,
|
|
@@ -19,81 +20,70 @@ const props = withDefaults(defineProps<DateRangePickerProps>(), {
|
|
|
19
20
|
})
|
|
20
21
|
|
|
21
22
|
const emit = defineEmits<{
|
|
22
|
-
'update:
|
|
23
|
+
'update:start': [value: Date | string | null]
|
|
24
|
+
'update:end': [value: Date | string | null]
|
|
23
25
|
}>()
|
|
24
26
|
|
|
27
|
+
const { t } = useI18n()
|
|
25
28
|
const T = useTranslations('components.ui.DateRangePicker')
|
|
26
29
|
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
watch(() => props.modelValue, val => {
|
|
31
|
-
startDate.value = val?.[0] ?? null
|
|
32
|
-
endDate.value = val?.[1] ?? null
|
|
30
|
+
const start = computed({
|
|
31
|
+
get: () => props.start,
|
|
32
|
+
set: value => emit('update:start', value),
|
|
33
33
|
})
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
adjusted.setHours(23, 59, 59, 999)
|
|
49
|
-
endDate.value = adjusted
|
|
50
|
-
} else {
|
|
51
|
-
endDate.value = value
|
|
52
|
-
}
|
|
53
|
-
emitRange()
|
|
54
|
-
}
|
|
35
|
+
const end = computed({
|
|
36
|
+
get: () => props.end,
|
|
37
|
+
set: value => {
|
|
38
|
+
// When time is disabled, normalize end to end of day so range is inclusive
|
|
39
|
+
if (value instanceof Date && !props.showTime) {
|
|
40
|
+
const adjusted = new Date(value)
|
|
41
|
+
adjusted.setHours(23, 59, 59, 999)
|
|
42
|
+
emit('update:end', adjusted)
|
|
43
|
+
} else {
|
|
44
|
+
emit('update:end', value)
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
})
|
|
55
48
|
|
|
56
|
-
// Helper functions for date constraints
|
|
57
49
|
function addDays (date: Date, days: number): Date {
|
|
58
50
|
const result = new Date(date)
|
|
59
51
|
result.setDate(result.getDate() + days)
|
|
60
52
|
return result
|
|
61
53
|
}
|
|
62
54
|
|
|
63
|
-
function toDate (value: Date | string | null): Date | undefined {
|
|
55
|
+
function toDate (value: Date | string | null | undefined): Date | undefined {
|
|
64
56
|
if (!value) return undefined
|
|
65
57
|
return value instanceof Date ? value : new Date(value)
|
|
66
58
|
}
|
|
67
59
|
|
|
68
|
-
// Start picker constraints
|
|
69
60
|
const startMinDate = computed(() => {
|
|
70
61
|
const min = props.minDate
|
|
71
|
-
const spanLimit = props.maxSpanDays &&
|
|
72
|
-
? addDays(toDate(
|
|
62
|
+
const spanLimit = props.maxSpanDays && props.end
|
|
63
|
+
? addDays(toDate(props.end)!, -(props.maxSpanDays - 1))
|
|
73
64
|
: undefined
|
|
74
65
|
if (min && spanLimit) return new Date(Math.max(+new Date(min), +spanLimit))
|
|
75
66
|
return min ?? spanLimit
|
|
76
67
|
})
|
|
77
68
|
|
|
78
69
|
const startMaxDate = computed(() => {
|
|
79
|
-
const
|
|
70
|
+
const endDate = toDate(props.end)
|
|
80
71
|
const max = props.maxDate
|
|
81
|
-
if (
|
|
82
|
-
return
|
|
72
|
+
if (endDate && max) return new Date(Math.min(+endDate, +new Date(max)))
|
|
73
|
+
return endDate ?? max
|
|
83
74
|
})
|
|
84
75
|
|
|
85
|
-
// End picker constraints
|
|
86
76
|
const endMinDate = computed(() => {
|
|
87
|
-
const
|
|
77
|
+
const startDate = toDate(props.start)
|
|
88
78
|
const min = props.minDate
|
|
89
|
-
if (
|
|
90
|
-
return
|
|
79
|
+
if (startDate && min) return new Date(Math.max(+startDate, +new Date(min)))
|
|
80
|
+
return startDate ?? min
|
|
91
81
|
})
|
|
92
82
|
|
|
93
83
|
const endMaxDate = computed(() => {
|
|
94
84
|
const max = props.maxDate
|
|
95
|
-
const spanLimit = props.maxSpanDays &&
|
|
96
|
-
? addDays(toDate(
|
|
85
|
+
const spanLimit = props.maxSpanDays && props.start
|
|
86
|
+
? addDays(toDate(props.start)!, props.maxSpanDays - 1)
|
|
97
87
|
: undefined
|
|
98
88
|
if (max && spanLimit) return new Date(Math.min(+new Date(max), +spanLimit))
|
|
99
89
|
return max ?? spanLimit
|
|
@@ -103,7 +93,7 @@ const endMaxDate = computed(() => {
|
|
|
103
93
|
<template>
|
|
104
94
|
<div :class="cn('gap-2 flex items-center', props.class)">
|
|
105
95
|
<DatePicker
|
|
106
|
-
|
|
96
|
+
v-model="start"
|
|
107
97
|
:showTime="showTime"
|
|
108
98
|
:disabled="disabled"
|
|
109
99
|
:readonly="readonly"
|
|
@@ -113,13 +103,12 @@ const endMaxDate = computed(() => {
|
|
|
113
103
|
:valueFormat="valueFormat"
|
|
114
104
|
:autoApply="autoApply"
|
|
115
105
|
v-bind="$attrs"
|
|
116
|
-
@update:modelValue="handleStartUpdate"
|
|
117
106
|
/>
|
|
118
107
|
<span class="text-muted-foreground shrink-0">
|
|
119
|
-
{{
|
|
108
|
+
{{ t('common.symbols.connector') }}
|
|
120
109
|
</span>
|
|
121
110
|
<DatePicker
|
|
122
|
-
|
|
111
|
+
v-model="end"
|
|
123
112
|
:showTime="showTime"
|
|
124
113
|
:disabled="disabled"
|
|
125
114
|
:readonly="readonly"
|
|
@@ -129,7 +118,6 @@ const endMaxDate = computed(() => {
|
|
|
129
118
|
:valueFormat="valueFormat"
|
|
130
119
|
:autoApply="autoApply"
|
|
131
120
|
v-bind="$attrs"
|
|
132
|
-
@update:modelValue="handleEndUpdate"
|
|
133
121
|
/>
|
|
134
122
|
</div>
|
|
135
123
|
</template>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import type { DatePickerTimeConfig } from '../DatePicker/types'
|
|
2
2
|
|
|
3
|
-
export type DateRangePickerValue = [
|
|
4
|
-
start: Date | string | null,
|
|
5
|
-
end: Date | string | null,
|
|
6
|
-
]
|
|
7
|
-
|
|
8
3
|
export interface DateRangePickerProps {
|
|
9
|
-
|
|
4
|
+
start?: Date | string | null
|
|
5
|
+
end?: Date | string | null
|
|
6
|
+
/** Minimum selectable date */
|
|
7
|
+
minDate?: Date | string
|
|
8
|
+
/** Maximum selectable date */
|
|
9
|
+
maxDate?: Date | string
|
|
10
10
|
/** Enable time selection, or pass DatePickerTimeConfig for fine-grained control */
|
|
11
11
|
showTime?: boolean | DatePickerTimeConfig
|
|
12
12
|
/** Disable the date range picker */
|
|
@@ -17,10 +17,6 @@ export interface DateRangePickerProps {
|
|
|
17
17
|
startPlaceholder?: string
|
|
18
18
|
/** Placeholder for end date input */
|
|
19
19
|
endPlaceholder?: string
|
|
20
|
-
/** Minimum selectable date */
|
|
21
|
-
minDate?: Date | string
|
|
22
|
-
/** Maximum selectable date */
|
|
23
|
-
maxDate?: Date | string
|
|
24
20
|
/** Maximum span in days between start and end date */
|
|
25
21
|
maxSpanDays?: number
|
|
26
22
|
/** v-model output format (e.g. 'yyyy-MM-dd', 'timestamp', 'iso') */
|
|
@@ -57,7 +57,7 @@ const meta = {
|
|
|
57
57
|
template: `
|
|
58
58
|
<div>
|
|
59
59
|
<Button @click="visible = true">Open Drawer</Button>
|
|
60
|
-
<Drawer v-
|
|
60
|
+
<Drawer v-bind="args" v-model:visible="visible">
|
|
61
61
|
<p>This is the drawer content.</p>
|
|
62
62
|
<Input class="mt-4" placeholder="Try interacting with this input" />
|
|
63
63
|
</Drawer>
|
|
@@ -14,7 +14,7 @@ const meta = {
|
|
|
14
14
|
},
|
|
15
15
|
template: `
|
|
16
16
|
<div class="max-w-xs space-y-4">
|
|
17
|
-
<InputPercent v-
|
|
17
|
+
<InputPercent v-bind="args" v-model="percent" />
|
|
18
18
|
<div class="text-sm text-muted-foreground">Value: {{ percent }}</div>
|
|
19
19
|
</div>
|
|
20
20
|
`,
|
|
@@ -28,7 +28,7 @@ const meta = {
|
|
|
28
28
|
},
|
|
29
29
|
template: `
|
|
30
30
|
<div class="max-w-md">
|
|
31
|
-
<InputRange v-model:start="start" v-model:end="end"
|
|
31
|
+
<InputRange v-bind="args" v-model:start="start" v-model:end="end" />
|
|
32
32
|
<div class="mt-2 text-sm text-muted-foreground">Start: {{ start }}, End: {{ end }}</div>
|
|
33
33
|
</div>
|
|
34
34
|
`,
|
|
@@ -7,7 +7,7 @@ const props = withDefaults(defineProps<InputRangeProps>(), {
|
|
|
7
7
|
start: undefined,
|
|
8
8
|
end: undefined,
|
|
9
9
|
min: 0,
|
|
10
|
-
max:
|
|
10
|
+
max: undefined,
|
|
11
11
|
})
|
|
12
12
|
|
|
13
13
|
const emit = defineEmits<{
|
|
@@ -15,6 +15,8 @@ const emit = defineEmits<{
|
|
|
15
15
|
'update:end': [value: number | undefined]
|
|
16
16
|
}>()
|
|
17
17
|
|
|
18
|
+
const { t } = useI18n()
|
|
19
|
+
|
|
18
20
|
const start = computed({
|
|
19
21
|
get: () => props.start,
|
|
20
22
|
set: value => emit('update:start', value),
|
|
@@ -27,7 +29,7 @@ const end = computed({
|
|
|
27
29
|
</script>
|
|
28
30
|
|
|
29
31
|
<template>
|
|
30
|
-
<div class="flex items-center
|
|
32
|
+
<div class="gap-2 flex items-center">
|
|
31
33
|
<InputNumber
|
|
32
34
|
v-model="start"
|
|
33
35
|
v-bind="$attrs"
|
|
@@ -36,7 +38,7 @@ const end = computed({
|
|
|
36
38
|
fluid
|
|
37
39
|
/>
|
|
38
40
|
<span class="leading-0 text-muted-foreground">
|
|
39
|
-
|
|
41
|
+
{{ t('common.symbols.connector') }}
|
|
40
42
|
</span>
|
|
41
43
|
<InputNumber
|
|
42
44
|
v-model="end"
|
|
@@ -51,7 +51,7 @@ const meta = {
|
|
|
51
51
|
template: `
|
|
52
52
|
<div>
|
|
53
53
|
<Button @click="visible = true">Open Modal</Button>
|
|
54
|
-
<Modal v-
|
|
54
|
+
<Modal v-bind="args" v-model:visible="visible">
|
|
55
55
|
<p>This is the modal content.</p>
|
|
56
56
|
<Input class="mt-4" placeholder="Try interacting with this input" />
|
|
57
57
|
</Modal>
|
|
@@ -57,7 +57,7 @@ const meta = {
|
|
|
57
57
|
},
|
|
58
58
|
template: `
|
|
59
59
|
<div class="max-w-sm">
|
|
60
|
-
<Select v-model="value" :options="frameworks"
|
|
60
|
+
<Select v-bind="args" v-model="value" :options="frameworks" />
|
|
61
61
|
<div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
|
|
62
62
|
</div>
|
|
63
63
|
`,
|
package/app/en.json
CHANGED
package/i18n/messages/ar.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "د",
|
|
19
19
|
"seconds": "ث"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "الفاصل"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "تاريخ الانتهاء",
|
|
46
|
-
"startPlaceholder": "تاريخ البداية"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "تاريخ البداية"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "لا توجد عناصر"
|
package/i18n/messages/de.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "Enddatum",
|
|
46
|
-
"startPlaceholder": "Startdatum"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Startdatum"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "Keine Elemente"
|
package/i18n/messages/en.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "End date",
|
|
46
|
-
"startPlaceholder": "Start date"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Start date"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "No items"
|
package/i18n/messages/es.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "Fecha final",
|
|
46
|
-
"startPlaceholder": "Fecha de inicio"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Fecha de inicio"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "Sin elementos"
|
package/i18n/messages/fr.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "Date de fin",
|
|
46
|
-
"startPlaceholder": "Date de début"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Date de début"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "Aucun élément"
|
package/i18n/messages/hi.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "समाप्ति तारीख",
|
|
46
|
-
"startPlaceholder": "प्रारंभ तारीख"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "प्रारंभ तारीख"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "कोई आइटम नहीं"
|
package/i18n/messages/id.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "d"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "Tanggal akhir",
|
|
46
|
-
"startPlaceholder": "Tanggal awal"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Tanggal awal"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "Tidak ada item"
|
package/i18n/messages/it.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "Data di fine",
|
|
46
|
-
"startPlaceholder": "Data di inizio"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Data di inizio"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "Nessun elemento"
|
package/i18n/messages/ja.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "分",
|
|
19
19
|
"seconds": "秒"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "終了日",
|
|
46
|
-
"startPlaceholder": "開始日"
|
|
47
|
-
"to": "〜"
|
|
49
|
+
"startPlaceholder": "開始日"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "アイテムなし"
|
package/i18n/messages/ko.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "종료 날짜",
|
|
46
|
-
"startPlaceholder": "시작 날짜"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "시작 날짜"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "항목 없음"
|
package/i18n/messages/nl.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "tot"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "Einddatum",
|
|
46
|
-
"startPlaceholder": "Startdatum"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Startdatum"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "Geen items"
|
package/i18n/messages/pl.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "min",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "Data końcowa",
|
|
46
|
-
"startPlaceholder": "Data początkowa"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Data początkowa"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "Brak elementów"
|
package/i18n/messages/pt.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "Data final",
|
|
46
|
-
"startPlaceholder": "Data inicial"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Data inicial"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "Sem itens"
|
package/i18n/messages/ru.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "м",
|
|
19
19
|
"seconds": "с"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "Дата окончания",
|
|
46
|
-
"startPlaceholder": "Дата начала"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Дата начала"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "Нет элементов"
|
package/i18n/messages/th.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "ถึง"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "วันที่สิ้นสุด",
|
|
46
|
-
"startPlaceholder": "วันที่เริ่มต้น"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "วันที่เริ่มต้น"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "ไม่มีรายการ"
|
package/i18n/messages/tr.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "d",
|
|
19
19
|
"seconds": "sn"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "Bitiş tarihi",
|
|
46
|
-
"startPlaceholder": "Başlangıç tarihi"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Başlangıç tarihi"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "Öğe yok"
|
package/i18n/messages/vi.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "m",
|
|
19
19
|
"seconds": "s"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "Ngày kết thúc",
|
|
46
|
-
"startPlaceholder": "Ngày bắt đầu"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "Ngày bắt đầu"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "Không có mục"
|
package/i18n/messages/zh-CN.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "分钟",
|
|
19
19
|
"seconds": "秒"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "结束日期",
|
|
46
|
-
"startPlaceholder": "开始日期"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "开始日期"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "无项目"
|
package/i18n/messages/zh-TW.json
CHANGED
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"minutes": "分鐘",
|
|
19
19
|
"seconds": "秒"
|
|
20
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"symbols": {
|
|
23
|
+
"connector": "~"
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
"components": {
|
|
@@ -43,8 +46,7 @@
|
|
|
43
46
|
},
|
|
44
47
|
"DateRangePicker": {
|
|
45
48
|
"endPlaceholder": "結束日期",
|
|
46
|
-
"startPlaceholder": "開始日期"
|
|
47
|
-
"to": "–"
|
|
49
|
+
"startPlaceholder": "開始日期"
|
|
48
50
|
},
|
|
49
51
|
"Dropdown": {
|
|
50
52
|
"empty": "沒有項目"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@polymarbot/nuxt-layer-shadcn-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "Nuxt layer providing shadcn-vue based UI components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./nuxt.config.ts",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"vue-i18n": "^11",
|
|
43
43
|
"vue-router": "^4 || ^5"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "6d666cbb075bfeae008655dcb644bcac99f70ff4"
|
|
46
46
|
}
|