@polymarbot/nuxt-layer-shadcn-ui 0.5.0 → 0.5.2

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 (7) hide show
  1. package/app/components/ui/DatePicker/index.stories.ts +39 -0
  2. package/app/components/ui/DatePicker/index.vue +2 -1
  3. package/app/components/ui/DatePicker/style.css +4 -1
  4. package/app/components/ui/DateRangePicker/index.stories.ts +16 -16
  5. package/app/components/ui/DateRangePicker/index.vue +8 -11
  6. package/app/components/ui/DateRangePicker/types.ts +4 -4
  7. package/package.json +2 -2
package/app/components/ui/DatePicker/index.stories.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/vue3'
2
2
  import type { DatePickerType } from './types'
3
+ import Button from '../Button/index.vue'
4
+ import Modal from '../Modal/index.vue'
3
5
  import DatePicker from './index.vue'
4
6
 
5
7
  const types: DatePickerType[] = [ 'date', 'month', 'year' ]
@@ -220,3 +222,40 @@ export const Readonly: Story = {
220
222
  `,
221
223
  }),
222
224
  }
225
+
226
+ export const InModal: Story = {
227
+ parameters: {
228
+ ...noControls,
229
+ docs: {
230
+ description: {
231
+ story: 'The calendar menu is teleported to `<body>` and overrides `pointer-events: auto` to bypass the body pointer-events lock applied by reka-ui modal layers, so it stays interactive inside Modal / Dialog / Sheet / Drawer.',
232
+ },
233
+ source: {
234
+ code: `
235
+ <template>
236
+ <Modal v-model:visible="visible" title="Pick a date">
237
+ <DatePicker v-model="date" />
238
+ </Modal>
239
+ </template>
240
+ `.trim(),
241
+ },
242
+ },
243
+ },
244
+ render: () => ({
245
+ components: { DatePicker, Modal, Button },
246
+ setup () {
247
+ const visible = ref(false)
248
+ const date = ref<Date | string | null>(null)
249
+ return { visible, date }
250
+ },
251
+ template: `
252
+ <div>
253
+ <Button @click="visible = true">Open Modal</Button>
254
+ <Modal v-model:visible="visible" title="Pick a date" :hideFooter="true">
255
+ <DatePicker v-model="date" />
256
+ <div class="mt-4 text-sm text-muted-foreground">Value: {{ date }}</div>
257
+ </Modal>
258
+ </div>
259
+ `,
260
+ }),
261
+ }
package/app/components/ui/DatePicker/index.vue CHANGED
@@ -79,6 +79,7 @@ const timeConfig = computed(() => {
79
79
  :yearPicker="type === 'year'"
80
80
  :autoApply="autoApply"
81
81
  :inputAttrs="{ clearable: false }"
82
+ :teleport="true"
82
83
  textInput
83
84
  >
84
85
  <template #dp-input="{ value, onInput, onEnter, onTab, onClear, onBlur, onFocus, openMenu }">
@@ -98,7 +99,7 @@ const timeConfig = computed(() => {
98
99
  <template #prefix>
99
100
  <Icon
100
101
  name="calendar-days"
101
- class="cursor-pointer text-muted-foreground"
102
+ class="text-muted-foreground cursor-pointer"
102
103
  @click="openMenu"
103
104
  />
104
105
  </template>
package/app/components/ui/DatePicker/style.css CHANGED
@@ -80,9 +80,12 @@
80
80
  margin: 4px 0;
81
81
  }
82
82
 
83
- /* Menu: shadow-md */
83
+ /* Menu: shadow-md.
84
+ pointer-events override keeps the menu interactive when teleported into
85
+ <body> while a reka-ui modal (Dialog/Sheet/Drawer) locks body pointer-events. */
84
86
  .dp__menu {
85
87
  box-shadow:
86
88
  0 4px 6px -1px rgb(0 0 0 / 0.1),
87
89
  0 2px 4px -2px rgb(0 0 0 / 0.1);
90
+ pointer-events: auto;
88
91
  }
package/app/components/ui/DateRangePicker/index.stories.ts CHANGED
@@ -20,7 +20,7 @@ const meta = {
20
20
  class: { control: 'text' },
21
21
  },
22
22
  args: {
23
- modelValue: { start: null, end: null },
23
+ modelValue: [ null, null ],
24
24
  showTime: false,
25
25
  disabled: false,
26
26
  readonly: false,
@@ -36,7 +36,7 @@ const meta = {
36
36
  render: args => ({
37
37
  components: { DateRangePicker },
38
38
  setup () {
39
- const range = ref<DateRangePickerValue>({ start: null, end: null })
39
+ const range = ref<DateRangePickerValue>([ null, null ])
40
40
  return { args, range }
41
41
  },
42
42
  template: `
@@ -67,7 +67,7 @@ export const WithTime: Story = {
67
67
  render: () => ({
68
68
  components: { DateRangePicker },
69
69
  setup () {
70
- const withTime = ref<DateRangePickerValue>({ start: null, end: null })
70
+ const withTime = ref<DateRangePickerValue>([ null, null ])
71
71
  return { withTime }
72
72
  },
73
73
  template: `
@@ -91,7 +91,7 @@ export const MaxSpanDays: Story = {
91
91
  render: () => ({
92
92
  components: { DateRangePicker },
93
93
  setup () {
94
- const maxSpan = ref<DateRangePickerValue>({ start: null, end: null })
94
+ const maxSpan = ref<DateRangePickerValue>([ null, null ])
95
95
  return { maxSpan }
96
96
  },
97
97
  template: `
@@ -115,10 +115,10 @@ export const Preselected: Story = {
115
115
  render: () => ({
116
116
  components: { DateRangePicker },
117
117
  setup () {
118
- const preselected = ref<DateRangePickerValue>({
119
- start: new Date(2025, 5, 1),
120
- end: new Date(2025, 5, 15),
121
- })
118
+ const preselected = ref<DateRangePickerValue>([
119
+ new Date(2025, 5, 1),
120
+ new Date(2025, 5, 15),
121
+ ])
122
122
  return { preselected }
123
123
  },
124
124
  template: `
@@ -142,10 +142,10 @@ export const Disabled: Story = {
142
142
  render: () => ({
143
143
  components: { DateRangePicker },
144
144
  setup () {
145
- const range = ref<DateRangePickerValue>({
146
- start: new Date(2025, 5, 1),
147
- end: new Date(2025, 5, 15),
148
- })
145
+ const range = ref<DateRangePickerValue>([
146
+ new Date(2025, 5, 1),
147
+ new Date(2025, 5, 15),
148
+ ])
149
149
  return { range }
150
150
  },
151
151
  template: `
@@ -168,10 +168,10 @@ export const Readonly: Story = {
168
168
  render: () => ({
169
169
  components: { DateRangePicker },
170
170
  setup () {
171
- const range = ref<DateRangePickerValue>({
172
- start: new Date(2025, 5, 1),
173
- end: new Date(2025, 5, 15),
174
- })
171
+ const range = ref<DateRangePickerValue>([
172
+ new Date(2025, 5, 1),
173
+ new Date(2025, 5, 15),
174
+ ])
175
175
  return { range }
176
176
  },
177
177
  template: `
package/app/components/ui/DateRangePicker/index.vue CHANGED
@@ -4,7 +4,7 @@ import type { DateRangePickerProps, DateRangePickerValue } from './types'
4
4
  defineOptions({ inheritAttrs: false })
5
5
 
6
6
  const props = withDefaults(defineProps<DateRangePickerProps>(), {
7
- modelValue: () => ({ start: null, end: null }),
7
+ modelValue: () => [ null, null ],
8
8
  showTime: false,
9
9
  disabled: false,
10
10
  readonly: false,
@@ -24,19 +24,16 @@ const emit = defineEmits<{
24
24
 
25
25
  const T = useTranslations('components.ui.DateRangePicker')
26
26
 
27
- const startDate = ref<Date | string | null>(props.modelValue?.start ?? null)
28
- const endDate = ref<Date | string | null>(props.modelValue?.end ?? null)
27
+ const startDate = ref<Date | string | null>(props.modelValue?.[0] ?? null)
28
+ const endDate = ref<Date | string | null>(props.modelValue?.[1] ?? null)
29
29
 
30
30
  watch(() => props.modelValue, val => {
31
- startDate.value = val?.start ?? null
32
- endDate.value = val?.end ?? null
31
+ startDate.value = val?.[0] ?? null
32
+ endDate.value = val?.[1] ?? null
33
33
  })
34
34
 
35
35
  function emitRange () {
36
- emit('update:modelValue', {
37
- start: startDate.value,
38
- end: endDate.value,
39
- })
36
+ emit('update:modelValue', [ startDate.value, endDate.value ])
40
37
  }
41
38
 
42
39
  function handleStartUpdate (value: Date | string | null) {
@@ -104,7 +101,7 @@ const endMaxDate = computed(() => {
104
101
  </script>
105
102
 
106
103
  <template>
107
- <div :class="cn('flex items-center gap-2', props.class)">
104
+ <div :class="cn('gap-2 flex items-center', props.class)">
108
105
  <DatePicker
109
106
  :modelValue="startDate"
110
107
  :showTime="showTime"
@@ -118,7 +115,7 @@ const endMaxDate = computed(() => {
118
115
  v-bind="$attrs"
119
116
  @update:modelValue="handleStartUpdate"
120
117
  />
121
- <span class="shrink-0 text-muted-foreground">
118
+ <span class="text-muted-foreground shrink-0">
122
119
  {{ T('to') }}
123
120
  </span>
124
121
  <DatePicker
package/app/components/ui/DateRangePicker/types.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import type { DatePickerTimeConfig } from '../DatePicker/types'
2
2
 
3
- export interface DateRangePickerValue {
4
- start: Date | string | null
5
- end: Date | string | null
6
- }
3
+ export type DateRangePickerValue = [
4
+ start: Date | string | null,
5
+ end: Date | string | null,
6
+ ]
7
7
 
8
8
  export interface DateRangePickerProps {
9
9
  modelValue?: DateRangePickerValue
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@polymarbot/nuxt-layer-shadcn-ui",
3
- "version": "0.5.0",
3
+ "version": "0.5.2",
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": "b25d6d9d16ad5ba72906936f2c672d65035df9ea"
45
+ "gitHead": "1cee179e4b0678c75dd8293d0274ec2afb8d9143"
46
46
  }