@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.
Files changed (37) hide show
  1. package/app/components/ui/DatePicker/index.stories.ts +4 -4
  2. package/app/components/ui/DateRangePicker/en.json +2 -3
  3. package/app/components/ui/DateRangePicker/index.stories.ts +57 -47
  4. package/app/components/ui/DateRangePicker/index.vue +36 -48
  5. package/app/components/ui/DateRangePicker/types.ts +6 -10
  6. package/app/components/ui/Drawer/index.stories.ts +1 -1
  7. package/app/components/ui/InputCurrency/index.stories.ts +1 -1
  8. package/app/components/ui/InputNumber/index.stories.ts +1 -1
  9. package/app/components/ui/InputOtp/index.stories.ts +1 -1
  10. package/app/components/ui/InputPercent/index.stories.ts +1 -1
  11. package/app/components/ui/InputRange/index.stories.ts +1 -1
  12. package/app/components/ui/InputRange/index.vue +5 -3
  13. package/app/components/ui/Modal/index.stories.ts +1 -1
  14. package/app/components/ui/Select/index.stories.ts +1 -1
  15. package/app/components/ui/Slider/index.stories.ts +1 -1
  16. package/app/components/ui/Switch/index.stories.ts +1 -1
  17. package/app/en.json +3 -0
  18. package/i18n/messages/ar.json +4 -2
  19. package/i18n/messages/de.json +4 -2
  20. package/i18n/messages/en.json +4 -2
  21. package/i18n/messages/es.json +4 -2
  22. package/i18n/messages/fr.json +4 -2
  23. package/i18n/messages/hi.json +4 -2
  24. package/i18n/messages/id.json +4 -2
  25. package/i18n/messages/it.json +4 -2
  26. package/i18n/messages/ja.json +4 -2
  27. package/i18n/messages/ko.json +4 -2
  28. package/i18n/messages/nl.json +4 -2
  29. package/i18n/messages/pl.json +4 -2
  30. package/i18n/messages/pt.json +4 -2
  31. package/i18n/messages/ru.json +4 -2
  32. package/i18n/messages/th.json +4 -2
  33. package/i18n/messages/tr.json +4 -2
  34. package/i18n/messages/vi.json +4 -2
  35. package/i18n/messages/zh-CN.json +4 -2
  36. package/i18n/messages/zh-TW.json +4 -2
  37. 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: false,
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-model="value" v-bind="args" />
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,5 +1,4 @@
1
1
  {
2
2
  "endPlaceholder": "End date",
3
- "startPlaceholder": "Start date",
4
- "to": "–"
5
- }
3
+ "startPlaceholder": "Start date"
4
+ }
@@ -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
- modelValue: { control: 'object' },
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
- modelValue: [ null, null ],
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: false,
33
+ valueFormat: undefined,
34
+ autoApply: true,
34
35
  class: '',
35
36
  },
36
37
  render: args => ({
37
38
  components: { DateRangePicker },
38
39
  setup () {
39
- const range = ref<DateRangePickerValue>([ null, null ])
40
- return { args, range }
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="range" v-bind="args" />
45
- <div class="mt-2 text-sm text-muted-foreground">Value: {{ range }}</div>
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="withTime" showTime />',
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 withTime = ref<DateRangePickerValue>([ null, null ])
71
- return { withTime }
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="withTime" showTime />
76
- <div class="mt-2 text-sm text-muted-foreground">Value: {{ withTime }}</div>
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="maxSpan" :maxSpanDays="7" />',
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 maxSpan = ref<DateRangePickerValue>([ null, null ])
95
- return { maxSpan }
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="maxSpan" :maxSpanDays="7" />
100
- <div class="mt-2 text-sm text-muted-foreground">Value: {{ maxSpan }}</div>
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="preselected" />',
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 preselected = ref<DateRangePickerValue>([
119
- new Date(2025, 5, 1),
120
- new Date(2025, 5, 15),
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="preselected" />
127
- <div class="mt-2 text-sm text-muted-foreground">Value: {{ preselected }}</div>
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="range" disabled />',
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 range = ref<DateRangePickerValue>([
146
- new Date(2025, 5, 1),
147
- new Date(2025, 5, 15),
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="range" disabled />
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="range" readonly />',
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 range = ref<DateRangePickerValue>([
172
- new Date(2025, 5, 1),
173
- new Date(2025, 5, 15),
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="range" readonly />
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, DateRangePickerValue } from './types'
2
+ import type { DateRangePickerProps } from './types'
3
3
 
4
4
  defineOptions({ inheritAttrs: false })
5
5
 
6
6
  const props = withDefaults(defineProps<DateRangePickerProps>(), {
7
- modelValue: () => [ null, null ],
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:modelValue': [value: DateRangePickerValue]
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 startDate = ref<Date | string | null>(props.modelValue?.[0] ?? null)
28
- const endDate = ref<Date | string | null>(props.modelValue?.[1] ?? null)
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
- function emitRange () {
36
- emit('update:modelValue', [ startDate.value, endDate.value ])
37
- }
38
-
39
- function handleStartUpdate (value: Date | string | null) {
40
- startDate.value = value
41
- emitRange()
42
- }
43
-
44
- function handleEndUpdate (value: Date | string | null) {
45
- // If time is disabled, set end time to end of day
46
- if (value instanceof Date && !props.showTime) {
47
- const adjusted = new Date(value)
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 && endDate.value
72
- ? addDays(toDate(endDate.value)!, -(props.maxSpanDays - 1))
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 end = toDate(endDate.value)
70
+ const endDate = toDate(props.end)
80
71
  const max = props.maxDate
81
- if (end && max) return new Date(Math.min(+end, +new Date(max)))
82
- return end ?? max
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 start = toDate(startDate.value)
77
+ const startDate = toDate(props.start)
88
78
  const min = props.minDate
89
- if (start && min) return new Date(Math.max(+start, +new Date(min)))
90
- return start ?? min
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 && startDate.value
96
- ? addDays(toDate(startDate.value)!, props.maxSpanDays - 1)
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
- :modelValue="startDate"
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
- {{ T('to') }}
108
+ {{ t('common.symbols.connector') }}
120
109
  </span>
121
110
  <DatePicker
122
- :modelValue="endDate"
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
- modelValue?: DateRangePickerValue
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-model:visible="visible" v-bind="args">
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>
@@ -22,7 +22,7 @@ const meta = {
22
22
  },
23
23
  template: `
24
24
  <div class="max-w-xs">
25
- <InputCurrency v-model="value" v-bind="args" />
25
+ <InputCurrency v-bind="args" v-model="value" />
26
26
  <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
27
27
  </div>
28
28
  `,
@@ -31,7 +31,7 @@ const meta = {
31
31
  },
32
32
  template: `
33
33
  <div class="max-w-xs">
34
- <InputNumber v-model="value" v-bind="args" />
34
+ <InputNumber v-bind="args" v-model="value" />
35
35
  <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
36
36
  </div>
37
37
  `,
@@ -23,7 +23,7 @@ const meta = {
23
23
  },
24
24
  template: `
25
25
  <div class="space-y-4">
26
- <InputOtp v-model="otp" v-bind="args" />
26
+ <InputOtp v-bind="args" v-model="otp" />
27
27
  <div class="text-sm text-muted-foreground">Value: {{ otp }}</div>
28
28
  </div>
29
29
  `,
@@ -14,7 +14,7 @@ const meta = {
14
14
  },
15
15
  template: `
16
16
  <div class="max-w-xs space-y-4">
17
- <InputPercent v-model="percent" v-bind="args" />
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" v-bind="args" />
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: 100,
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 gap-2">
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-model:visible="visible" v-bind="args">
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" v-bind="args" />
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
  `,
@@ -27,7 +27,7 @@ const meta = {
27
27
  },
28
28
  template: `
29
29
  <div class="max-w-sm">
30
- <Slider v-model="value" v-bind="args" />
30
+ <Slider v-bind="args" v-model="value" />
31
31
  <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
32
32
  </div>
33
33
  `,
@@ -19,7 +19,7 @@ const meta = {
19
19
  },
20
20
  template: `
21
21
  <div class="flex items-center gap-4">
22
- <Switch v-model="on" v-bind="args" />
22
+ <Switch v-bind="args" v-model="on" />
23
23
  <div class="text-sm text-muted-foreground">Value: {{ on }}</div>
24
24
  </div>
25
25
  `,
package/app/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
  }
@@ -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": "لا توجد عناصر"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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": "कोई आइटम नहीं"
@@ -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"
@@ -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"
@@ -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": "アイテムなし"
@@ -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": "항목 없음"
@@ -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"
@@ -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"
@@ -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"
@@ -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": "Нет элементов"
@@ -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": "ไม่มีรายการ"
@@ -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"
@@ -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"
@@ -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": "无项目"
@@ -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.5.4",
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": "fc48f5b21d76aa2ff0badd6ac6d9ccc5be906f26"
45
+ "gitHead": "6d666cbb075bfeae008655dcb644bcac99f70ff4"
46
46
  }