@polymarbot/nuxt-layer-shadcn-ui 0.3.5 → 0.3.7

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 (10) hide show
  1. package/app/components/ui/AdminLayout/index.vue +42 -48
  2. package/app/components/ui/Drawer/index.stories.ts +2 -0
  3. package/app/components/ui/Drawer/index.vue +6 -1
  4. package/app/components/ui/Drawer/types.ts +1 -0
  5. package/app/components/ui/FormItem/index.vue +2 -2
  6. package/app/components/ui/Modal/index.stories.ts +2 -0
  7. package/app/components/ui/Modal/index.vue +6 -1
  8. package/app/components/ui/Modal/types.ts +1 -0
  9. package/app/components/ui/Pagination/index.vue +10 -4
  10. package/package.json +2 -2
package/app/components/ui/AdminLayout/index.vue CHANGED
@@ -22,57 +22,51 @@ withDefaults(defineProps<AdminLayoutProps>(), {
22
22
  </script>
23
23
 
24
24
  <template>
25
- <!-- Wrap with a real DOM element to avoid Vue <Transition> warning.
26
- SidebarProvider's root is reka-ui TooltipProvider (renderless), which
27
- Nuxt's layoutTransition cannot animate. `display: contents` keeps
28
- layout unaffected. -->
29
- <div class="contents">
30
- <SidebarProvider>
31
- <Sidebar
32
- :variant="variant"
33
- :collapsible="collapsible"
34
- >
35
- <SidebarHeader>
36
- <slot name="header">
37
- <SidebarDropdown
38
- v-if="headerDropdown"
39
- :profile="headerDropdown.profile"
40
- :menuItems="headerDropdown.menuItems"
41
- />
42
- </slot>
43
- </SidebarHeader>
25
+ <SidebarProvider>
26
+ <Sidebar
27
+ :variant="variant"
28
+ :collapsible="collapsible"
29
+ >
30
+ <SidebarHeader>
31
+ <slot name="header">
32
+ <SidebarDropdown
33
+ v-if="headerDropdown"
34
+ :profile="headerDropdown.profile"
35
+ :menuItems="headerDropdown.menuItems"
36
+ />
37
+ </slot>
38
+ </SidebarHeader>
44
39
 
45
- <SidebarContent>
46
- <SidebarMenus :menus="menus" />
47
- </SidebarContent>
40
+ <SidebarContent>
41
+ <SidebarMenus :menus="menus" />
42
+ </SidebarContent>
48
43
 
49
- <SidebarFooter>
50
- <slot name="footer">
51
- <SidebarDropdown
52
- v-if="footerDropdown"
53
- :profile="footerDropdown.profile"
54
- :menuItems="footerDropdown.menuItems"
55
- />
56
- </slot>
57
- </SidebarFooter>
44
+ <SidebarFooter>
45
+ <slot name="footer">
46
+ <SidebarDropdown
47
+ v-if="footerDropdown"
48
+ :profile="footerDropdown.profile"
49
+ :menuItems="footerDropdown.menuItems"
50
+ />
51
+ </slot>
52
+ </SidebarFooter>
58
53
 
59
- <SidebarRail />
60
- </Sidebar>
54
+ <SidebarRail />
55
+ </Sidebar>
61
56
 
62
- <SidebarInset class="min-w-0">
63
- <Navbar>
64
- <div class="flex flex-1 items-center gap-3">
65
- <slot name="navbar-left" />
66
- </div>
67
- <div class="flex items-center gap-3">
68
- <slot name="navbar-right" />
69
- </div>
70
- </Navbar>
71
-
72
- <div class="flex-1 overflow-auto">
73
- <slot />
57
+ <SidebarInset class="min-w-0">
58
+ <Navbar>
59
+ <div class="gap-3 flex flex-1 items-center">
60
+ <slot name="navbar-left" />
61
+ </div>
62
+ <div class="gap-3 flex items-center">
63
+ <slot name="navbar-right" />
74
64
  </div>
75
- </SidebarInset>
76
- </SidebarProvider>
77
- </div>
65
+ </Navbar>
66
+
67
+ <div class="flex-1 overflow-auto">
68
+ <slot />
69
+ </div>
70
+ </SidebarInset>
71
+ </SidebarProvider>
78
72
  </template>
package/app/components/ui/Drawer/index.stories.ts CHANGED
@@ -15,6 +15,7 @@ const meta = {
15
15
  confirmDisabled: { control: 'boolean' },
16
16
  showCancel: { control: 'boolean' },
17
17
  showClose: { control: 'boolean' },
18
+ closeOnClickOutside: { control: 'boolean' },
18
19
  hideHeader: { control: 'boolean' },
19
20
  hideFooter: { control: 'boolean' },
20
21
  side: { control: 'select', options: sides },
@@ -29,6 +30,7 @@ const meta = {
29
30
  confirmDisabled: false,
30
31
  showCancel: true,
31
32
  showClose: true,
33
+ closeOnClickOutside: false,
32
34
  hideHeader: false,
33
35
  hideFooter: false,
34
36
  side: 'right',
package/app/components/ui/Drawer/index.vue CHANGED
@@ -12,6 +12,7 @@ import type { DrawerProps } from './types'
12
12
 
13
13
  const props = withDefaults(defineProps<DrawerProps>(), {
14
14
  showClose: true,
15
+ closeOnClickOutside: false,
15
16
  side: 'right',
16
17
  title: undefined,
17
18
  description: undefined,
@@ -64,6 +65,10 @@ function onCancel () {
64
65
  emit('update:visible', false)
65
66
  }
66
67
 
68
+ function onPointerDownOutside (event: Event) {
69
+ if (!props.closeOnClickOutside) event.preventDefault()
70
+ }
71
+
67
72
  const contentClass = computed(() =>
68
73
  cn('bg-popover gap-0 p-0 flex flex-col', props.class),
69
74
  )
@@ -74,7 +79,7 @@ const contentClass = computed(() =>
74
79
  <SheetContent
75
80
  :side="side"
76
81
  :class="contentClass"
77
- @pointerDownOutside.prevent
82
+ @pointerDownOutside="onPointerDownOutside"
78
83
  @closeAutoFocus="emit('closed')"
79
84
  >
80
85
  <!-- Header -->
package/app/components/ui/Drawer/types.ts CHANGED
@@ -9,6 +9,7 @@ export interface DrawerProps {
9
9
  confirmDisabled?: boolean
10
10
  showCancel?: boolean
11
11
  showClose?: boolean
12
+ closeOnClickOutside?: boolean
12
13
  hideHeader?: boolean
13
14
  hideFooter?: boolean
14
15
  side?: DrawerSide
package/app/components/ui/FormItem/index.vue CHANGED
@@ -16,8 +16,8 @@ const errorArray = computed(() => {
16
16
  })
17
17
 
18
18
  const labelClass = computed(() => {
19
- if (props.orientation === 'horizontal') return '!flex-initial mt-2'
20
- if (props.orientation === 'responsive') return '@md/field-group:!flex-initial @md/field-group:mt-2'
19
+ if (props.orientation === 'horizontal') return 'justify-end text-right mt-2'
20
+ if (props.orientation === 'responsive') return '@md/field-group:justify-end @md/field-group:text-right @md/field-group:mt-2'
21
21
  return undefined
22
22
  })
23
23
  </script>
package/app/components/ui/Modal/index.stories.ts CHANGED
@@ -15,6 +15,7 @@ const meta = {
15
15
  confirmDisabled: { control: 'boolean' },
16
16
  showCancel: { control: 'boolean' },
17
17
  showClose: { control: 'boolean' },
18
+ closeOnClickOutside: { control: 'boolean' },
18
19
  hideHeader: { control: 'boolean' },
19
20
  hideFooter: { control: 'boolean' },
20
21
  alignCenter: { control: 'boolean' },
@@ -30,6 +31,7 @@ const meta = {
30
31
  confirmDisabled: false,
31
32
  showCancel: true,
32
33
  showClose: true,
34
+ closeOnClickOutside: false,
33
35
  hideHeader: false,
34
36
  hideFooter: false,
35
37
  alignCenter: false,
package/app/components/ui/Modal/index.vue CHANGED
@@ -12,6 +12,7 @@ import type { ModalProps } from './types'
12
12
 
13
13
  const props = withDefaults(defineProps<ModalProps>(), {
14
14
  showClose: true,
15
+ closeOnClickOutside: false,
15
16
  title: undefined,
16
17
  description: undefined,
17
18
  confirmText: undefined,
@@ -65,6 +66,10 @@ function onCancel () {
65
66
  emit('update:visible', false)
66
67
  }
67
68
 
69
+ function onPointerDownOutside (event: Event) {
70
+ if (!props.closeOnClickOutside) event.preventDefault()
71
+ }
72
+
68
73
  const contentClass = computed(() =>
69
74
  cn(
70
75
  'bg-popover gap-0 py-0',
@@ -79,7 +84,7 @@ const contentClass = computed(() =>
79
84
  <DialogContent
80
85
  :class="contentClass"
81
86
  :showCloseButton="false"
82
- @pointerDownOutside.prevent
87
+ @pointerDownOutside="onPointerDownOutside"
83
88
  @closeAutoFocus="emit('closed')"
84
89
  >
85
90
  <!-- Header -->
package/app/components/ui/Modal/types.ts CHANGED
@@ -8,6 +8,7 @@ export interface ModalProps {
8
8
  confirmDisabled?: boolean
9
9
  showCancel?: boolean
10
10
  showClose?: boolean
11
+ closeOnClickOutside?: boolean
11
12
  hideHeader?: boolean
12
13
  hideFooter?: boolean
13
14
  alignCenter?: boolean
package/app/components/ui/Pagination/index.vue CHANGED
@@ -43,8 +43,14 @@ const pageReport = computed(() => {
43
43
  return T('pageReport', { first, last, total: props.total })
44
44
  })
45
45
 
46
+ const pageItemClass = computed(() => props.size === 'sm'
47
+ ? 'min-w-8 w-auto! px-1.5'
48
+ : 'min-w-9 w-auto! px-2',
49
+ )
50
+
46
51
  const activePageClass = computed(() => cn(
47
52
  buttonVariants({ variant: 'default', size: iconButtonSize.value }),
53
+ pageItemClass.value,
48
54
  `
49
55
  hover:text-primary-foreground
50
56
  dark:hover:bg-primary/90
@@ -65,7 +71,7 @@ const pageSizeMenuItems = computed<DropdownItem[]>(() =>
65
71
  <template>
66
72
  <div
67
73
  v-if="hasData"
68
- class="flex items-center gap-2"
74
+ class="gap-2 flex items-center"
69
75
  >
70
76
  <!-- Simple mode: ‹ 1/9 › -->
71
77
  <template v-if="simple">
@@ -86,7 +92,7 @@ const pageSizeMenuItems = computed<DropdownItem[]>(() =>
86
92
  <Icon name="chevron-left" />
87
93
  </Button>
88
94
  <span
89
- class="min-w-12 text-center text-sm text-muted-foreground tabular-nums"
95
+ class="min-w-12 text-sm text-muted-foreground text-center tabular-nums"
90
96
  >
91
97
  {{ page }} / {{ totalPages }}
92
98
  </span>
@@ -110,7 +116,7 @@ const pageSizeMenuItems = computed<DropdownItem[]>(() =>
110
116
 
111
117
  <!-- Full mode -->
112
118
  <template v-else>
113
- <span class="text-sm whitespace-nowrap text-muted-foreground">
119
+ <span class="text-sm text-muted-foreground whitespace-nowrap">
114
120
  {{ pageReport }}
115
121
  </span>
116
122
  <ShadcnPagination
@@ -135,7 +141,7 @@ const pageSizeMenuItems = computed<DropdownItem[]>(() =>
135
141
  :key="index"
136
142
  :value="item.value"
137
143
  :size="iconButtonSize"
138
- :class="item.value === page ? activePageClass : ''"
144
+ :class="item.value === page ? activePageClass : pageItemClass"
139
145
  >
140
146
  {{ item.value }}
141
147
  </PaginationItem>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@polymarbot/nuxt-layer-shadcn-ui",
3
- "version": "0.3.5",
3
+ "version": "0.3.7",
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": "444c57a6e8f2aa5d82eda42f687546c2154e0603"
45
+ "gitHead": "bad2455b71daf4612a416d92f6875e93b20f3ce6"
46
46
  }