@polymarbot/nuxt-layer-shadcn-ui 0.3.6 → 0.3.8

package/app/assets/styles/globals.css

@@ -1 +1,2 @@
-@import './z-index.css';
+@import './z-index.css';
+@import './overlay.css';

package/app/assets/styles/overlay.css

@@ -0,0 +1,19 @@
+/* =========================================================================
+ * Portal-rendered overlays — visual overrides
+ * -------------------------------------------------------------------------
+ * Reka UI portals (Dialog, Sheet) render their overlays OUTSIDE each
+ * component's DOM scope, so styling must use non-scoped selectors. Shared
+ * here so Modal and Drawer keep a consistent translucent blur backdrop.
+ * ========================================================================= */
+
+[data-slot='dialog-overlay'],
+[data-slot='sheet-overlay'] {
+  background-color: rgba(252, 252, 252, 0.3);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
+.dark [data-slot='dialog-overlay'],
+.dark [data-slot='sheet-overlay'] {
+  background-color: rgba(25, 25, 25, 0.3);
+}

package/app/assets/styles/z-index.css

@@ -14,7 +14,8 @@
 [data-slot='dialog-overlay'],
 [data-slot='dialog-content'],
 [data-slot='sheet-overlay'],
-[data-slot='sheet-content'] {
+[data-slot='sheet-content'],
+[data-slot='sidebar'][data-mobile='true'] {
   z-index: 200;
 }
 

package/app/components/ui/Drawer/index.stories.ts

@@ -15,6 +15,7 @@ const meta = {
     confirmDisabled: { control: 'boolean' },
     showCancel: { control: 'boolean' },
     showClose: { control: 'boolean' },
+    closeOnClickOutside: { control: 'boolean' },
     hideHeader: { control: 'boolean' },
     hideFooter: { control: 'boolean' },
     side: { control: 'select', options: sides },
@@ -29,6 +30,7 @@ const meta = {
     confirmDisabled: false,
     showCancel: true,
     showClose: true,
+    closeOnClickOutside: false,
     hideHeader: false,
     hideFooter: false,
     side: 'right',

package/app/components/ui/Drawer/index.vue

@@ -12,6 +12,7 @@ import type { DrawerProps } from './types'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
   showClose: true,
+  closeOnClickOutside: false,
   side: 'right',
   title: undefined,
   description: undefined,
@@ -64,6 +65,10 @@ function onCancel () {
   emit('update:visible', false)
 }
 
+function onPointerDownOutside (event: Event) {
+  if (!props.closeOnClickOutside) event.preventDefault()
+}
+
 const contentClass = computed(() =>
   cn('bg-popover gap-0 p-0 flex flex-col', props.class),
 )
@@ -74,7 +79,7 @@ const contentClass = computed(() =>
     <SheetContent
       :side="side"
       :class="contentClass"
-      @pointerDownOutside.prevent
+      @pointerDownOutside="onPointerDownOutside"
       @closeAutoFocus="emit('closed')"
     >
       <!-- Header -->
@@ -173,17 +178,6 @@ const contentClass = computed(() =>
 </template>
 
 <style>
-/* Translucent blur backdrop. SheetOverlay is rendered inside DialogPortal
-   (outside component scope), so use a non-scoped style. */
-[data-slot='sheet-overlay'] {
-  background-color: rgba(252, 252, 252, 0.3);
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-}
-.dark [data-slot='sheet-overlay'] {
-  background-color: rgba(25, 25, 25, 0.3);
-}
-
 /* Hide SheetContent's hardcoded built-in close button (no data-slot);
    we render our own SheetClose above with loading-aware disable. */
 [data-slot='sheet-content'] > button:not([data-slot]) {

package/app/components/ui/Drawer/types.ts

@@ -9,6 +9,7 @@ export interface DrawerProps {
   confirmDisabled?: boolean
   showCancel?: boolean
   showClose?: boolean
+  closeOnClickOutside?: boolean
   hideHeader?: boolean
   hideFooter?: boolean
   side?: DrawerSide

package/app/components/ui/Modal/index.stories.ts

@@ -15,6 +15,7 @@ const meta = {
     confirmDisabled: { control: 'boolean' },
     showCancel: { control: 'boolean' },
     showClose: { control: 'boolean' },
+    closeOnClickOutside: { control: 'boolean' },
     hideHeader: { control: 'boolean' },
     hideFooter: { control: 'boolean' },
     alignCenter: { control: 'boolean' },
@@ -30,6 +31,7 @@ const meta = {
     confirmDisabled: false,
     showCancel: true,
     showClose: true,
+    closeOnClickOutside: false,
     hideHeader: false,
     hideFooter: false,
     alignCenter: false,

package/app/components/ui/Modal/index.vue

@@ -12,6 +12,7 @@ import type { ModalProps } from './types'
 
 const props = withDefaults(defineProps<ModalProps>(), {
   showClose: true,
+  closeOnClickOutside: false,
   title: undefined,
   description: undefined,
   confirmText: undefined,
@@ -65,6 +66,10 @@ function onCancel () {
   emit('update:visible', false)
 }
 
+function onPointerDownOutside (event: Event) {
+  if (!props.closeOnClickOutside) event.preventDefault()
+}
+
 const contentClass = computed(() =>
   cn(
     'bg-popover gap-0 py-0',
@@ -79,7 +84,7 @@ const contentClass = computed(() =>
     <DialogContent
       :class="contentClass"
       :showCloseButton="false"
-      @pointerDownOutside.prevent
+      @pointerDownOutside="onPointerDownOutside"
       @closeAutoFocus="emit('closed')"
     >
       <!-- Header -->
@@ -183,16 +188,3 @@ const contentClass = computed(() =>
     </DialogContent>
   </Dialog>
 </template>
-
-<style>
-/* Translucent blur backdrop. DialogOverlay is rendered inside DialogPortal
-   (outside component scope), so use a non-scoped style. */
-[data-slot='dialog-overlay'] {
-  background-color: rgba(252, 252, 252, 0.3);
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-}
-.dark [data-slot='dialog-overlay'] {
-  background-color: rgba(25, 25, 25, 0.3);
-}
-</style>

package/app/components/ui/Modal/types.ts

@@ -8,6 +8,7 @@ export interface ModalProps {
   confirmDisabled?: boolean
   showCancel?: boolean
   showClose?: boolean
+  closeOnClickOutside?: boolean
   hideHeader?: boolean
   hideFooter?: boolean
   alignCenter?: boolean

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "1cab3200649169317e33b3677a1ad906b6ba4683"
+  "gitHead": "3377868984c2e309b5be71fa54f5f6f354b4ffa6"
 }