@polymarbot/nuxt-layer-shadcn-ui 0.1.9 → 0.2.0-w

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

@@ -1,8 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { ModalContentType } from '../ModalContent/types'
 import Button from '../Button/index.vue'
 import Input from '../Input/index.vue'
 import Modal from './index.vue'
 
+const types: ModalContentType[] = [ 'default', 'success', 'info', 'help', 'warn', 'danger', 'error' ]
+
 const meta = {
   title: 'UI/Modal',
   component: Modal,
@@ -15,109 +18,161 @@ const meta = {
     hideHeader: { control: 'boolean' },
     hideFooter: { control: 'boolean' },
     alignCenter: { control: 'boolean' },
+    type: { control: 'select', options: types },
+    title: { control: 'text' },
+    description: { control: 'text' },
+    confirmText: { control: 'text' },
+    cancelText: { control: 'text' },
   },
   args: {
     loading: false,
     disabled: false,
     confirmDisabled: false,
-    showCancel: false,
+    showCancel: true,
     showClose: true,
     hideHeader: false,
     hideFooter: false,
     alignCenter: false,
+    type: 'default',
+    title: 'Modal Title',
+    description: '',
+    confirmText: 'OK',
+    cancelText: 'Cancel',
   },
-} satisfies Meta
+  render: args => ({
+    components: { Modal, Button, Input },
+    setup () {
+      const visible = ref(false)
+      return { args, visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Modal</Button>
+        <Modal v-model:visible="visible" v-bind="args">
+          <p>This is the modal content.</p>
+          <Input class="mt-4" placeholder="Try interacting with this input" />
+        </Modal>
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof Modal>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
-    components: { Modal, Button, Input },
+export const Default: Story = {}
+
+export const WithDescription: Story = {
+  render: () => ({
+    components: { Modal, Button },
+    setup () {
+      const visible = ref(false)
+      return { visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Modal</Button>
+        <Modal
+          v-model:visible="visible"
+          title="Delete Project"
+          description="This will permanently remove the project and all its data. This action cannot be undone."
+          showCancel
+          confirmVariant="destructive"
+          confirmText="Delete"
+        >
+          <p>Are you sure you want to continue?</p>
+        </Modal>
+      </div>
+    `,
+  }),
+}
+
+export const ScrollableContent: Story = {
+  render: () => ({
+    components: { Modal, Button },
+    setup () {
+      const visible = ref(false)
+      return { visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Modal</Button>
+        <Modal v-model:visible="visible" title="Terms of Service" showCancel confirmText="Accept">
+          <div class="space-y-4">
+            <p v-for="i in 20" :key="i">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+            </p>
+          </div>
+        </Modal>
+      </div>
+    `,
+  }),
+}
+
+export const Types: Story = {
+  render: () => ({
+    components: { Modal, Button },
     setup () {
-      const controlled = ref(false)
-      const withDescription = ref(false)
       const typeInfo = ref(false)
       const typeSuccess = ref(false)
       const typeHelp = ref(false)
       const typeWarn = ref(false)
       const typeDanger = ref(false)
-      const scrollable = ref(false)
-      return { args, controlled, withDescription, typeInfo, typeSuccess, typeHelp, typeWarn, typeDanger, scrollable }
+      return { typeInfo, typeSuccess, typeHelp, typeWarn, typeDanger }
     },
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Button @click="controlled = true">Open Modal</Button>
-          <Modal
-            v-model:visible="controlled"
-            v-bind="args"
-            title="Modal Title"
-            confirmText="OK"
-            cancelText="Cancel"
-          >
-            <p>This is the modal content.</p>
-            <Input class="mt-4" placeholder="Try interacting with this input" />
-          </Modal>
-        </section>
-
-        <!-- With Description -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Description</h3>
-          <Button @click="withDescription = true">Open Modal</Button>
-          <Modal
-            v-model:visible="withDescription"
-            title="Delete Project"
-            description="This will permanently remove the project and all its data. This action cannot be undone."
-            showCancel
-            confirmVariant="destructive"
-            confirmText="Delete"
-          >
-            <p>Are you sure you want to continue?</p>
-          </Modal>
-        </section>
-
-        <!-- Scrollable Content -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Scrollable Content</h3>
-          <Button @click="scrollable = true">Open Modal</Button>
-          <Modal v-model:visible="scrollable" title="Terms of Service" showCancel confirmText="Accept">
-            <div class="space-y-4">
-              <p v-for="i in 20" :key="i">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
-              </p>
-            </div>
-          </Modal>
-        </section>
+      <div>
+        <div class="flex gap-2">
+          <Button variant="outline" @click="typeInfo = true">Info</Button>
+          <Button variant="outline" @click="typeSuccess = true">Success</Button>
+          <Button variant="outline" @click="typeHelp = true">Help</Button>
+          <Button variant="outline" @click="typeWarn = true">Warn</Button>
+          <Button variant="outline" @click="typeDanger = true">Danger</Button>
+        </div>
+        <Modal v-model:visible="typeInfo" title="Information" type="info" showCancel>
+          <p>Your session will expire in 5 minutes.</p>
+        </Modal>
+        <Modal v-model:visible="typeSuccess" title="Success" type="success">
+          <p>Your payment has been processed successfully.</p>
+        </Modal>
+        <Modal v-model:visible="typeHelp" title="Help" type="help" showCancel>
+          <p>Need assistance? Check our documentation or contact support.</p>
+        </Modal>
+        <Modal v-model:visible="typeWarn" title="Warning" type="warn" showCancel confirmVariant="destructive">
+          <p>This operation may affect your existing data.</p>
+        </Modal>
+        <Modal v-model:visible="typeDanger" title="Delete Account" type="danger" showCancel confirmVariant="destructive" confirmText="Delete">
+          <p>All data will be permanently removed. This action cannot be undone.</p>
+        </Modal>
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Type -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Type</h3>
-          <div class="flex gap-2">
-            <Button variant="outline" @click="typeInfo = true">Info</Button>
-            <Button variant="outline" @click="typeSuccess = true">Success</Button>
-            <Button variant="outline" @click="typeHelp = true">Help</Button>
-            <Button variant="outline" @click="typeWarn = true">Warn</Button>
-            <Button variant="outline" @click="typeDanger = true">Danger</Button>
-          </div>
-          <Modal v-model:visible="typeInfo" title="Information" type="info" showCancel>
-            <p>Your session will expire in 5 minutes.</p>
-          </Modal>
-          <Modal v-model:visible="typeSuccess" title="Success" type="success">
-            <p>Your payment has been processed successfully.</p>
-          </Modal>
-          <Modal v-model:visible="typeHelp" title="Help" type="help" showCancel>
-            <p>Need assistance? Check our documentation or contact support.</p>
-          </Modal>
-          <Modal v-model:visible="typeWarn" title="Warning" type="warn" showCancel confirmVariant="destructive">
-            <p>This operation may affect your existing data.</p>
-          </Modal>
-          <Modal v-model:visible="typeDanger" title="Delete Account" type="danger" showCancel confirmVariant="destructive" confirmText="Delete">
-            <p>All data will be permanently removed. This action cannot be undone.</p>
-          </Modal>
-        </section>
+export const EventHandling: Story = {
+  render: () => ({
+    components: { Modal, Button },
+    setup () {
+      const visible = ref(false)
+      return { visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Modal</Button>
+        <Modal
+          v-model:visible="visible"
+          title="Event Demo"
+          description="Open the Actions panel to see emitted events."
+          showCancel
+          confirmText="Confirm"
+          @open="() => {}"
+          @close="() => {}"
+          @closed="() => {}"
+          @confirm="() => {}"
+          @cancel="() => {}"
+        >
+          <p>Click Confirm, Cancel, or the close button to see events fire.</p>
+        </Modal>
       </div>
     `,
   }),

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

@@ -7,7 +7,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/dialog'
+} from '../../shadcn/dialog'
 import type { ModalProps } from './types'
 
 const props = withDefaults(defineProps<ModalProps>(), {
@@ -187,7 +187,6 @@ const contentClass = computed(() =>
 /* Translucent blur backdrop. DialogOverlay is rendered inside DialogPortal
    (outside component scope), so use a non-scoped style. */
 [data-slot='dialog-overlay'] {
-  z-index: 200;
   background-color: rgba(252, 252, 252, 0.3);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
@@ -195,8 +194,4 @@ const contentClass = computed(() =>
 .dark [data-slot='dialog-overlay'] {
   background-color: rgba(25, 25, 25, 0.3);
 }
-/* Raise above layout header (z-100) so the dialog covers it. */
-[data-slot='dialog-content'] {
-  z-index: 200;
-}
 </style>

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

@@ -1,4 +1,4 @@
-import type { ButtonVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import type { ButtonVariants } from '../../shadcn/button'
 import type { ModalContentProps } from '../ModalContent/types'
 
 export interface ModalProps {

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

@@ -1,46 +1,74 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { ModalContentType } from './types'
 import ModalContent from './index.vue'
 
+const types: ModalContentType[] = [ 'default', 'success', 'info', 'help', 'warn', 'danger', 'error' ]
+
 const meta = {
   title: 'UI/ModalContent',
   component: ModalContent,
+  argTypes: {
+    type: { control: 'select', options: types },
+    icon: { control: 'text' },
+    content: { control: 'text' },
+  },
+  args: {
+    type: 'default',
+    icon: '',
+    content: 'This is a message.',
+  },
+  render: args => ({
+    components: { ModalContent },
+    setup: () => ({ args }),
+    template: `
+      <div class="max-w-md">
+        <ModalContent v-bind="args" />
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof ModalContent>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const Types: Story = {
   render: () => ({
     components: { ModalContent },
+    setup: () => ({ types }),
     template: `
       <div class="space-y-4 max-w-md">
-        <!-- Types -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Types</h3>
-          <div class="space-y-4">
-            <ModalContent type="default" content="This is a default message." />
-            <ModalContent type="success" content="Operation completed successfully." />
-            <ModalContent type="info" content="Your changes have been saved." />
-            <ModalContent type="help" content="Need help? Check the documentation." />
-            <ModalContent type="warn" content="This operation will affect all users." />
-            <ModalContent type="danger" content="Are you sure you want to delete this item? This action cannot be undone." />
-          </div>
-        </section>
+        <ModalContent type="default" content="This is a default message." />
+        <ModalContent type="success" content="Operation completed successfully." />
+        <ModalContent type="info" content="Your changes have been saved." />
+        <ModalContent type="help" content="Need help? Check the documentation." />
+        <ModalContent type="warn" content="This operation will affect all users." />
+        <ModalContent type="danger" content="Are you sure you want to delete this item? This action cannot be undone." />
+        <ModalContent type="error" content="An error occurred while processing your request." />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Custom Icon -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Custom Icon</h3>
-          <div class="space-y-4">
-            <ModalContent icon="shield-alert" content="Your session is about to expire." />
-            <ModalContent type="warn" icon="shield-alert" content="Security warning: unusual login detected." />
-          </div>
-        </section>
+export const WithCustomIcon: Story = {
+  render: () => ({
+    components: { ModalContent },
+    template: `
+      <div class="space-y-4 max-w-md">
+        <ModalContent icon="shield-alert" content="Your session is about to expire." />
+        <ModalContent type="warn" icon="shield-alert" content="Security warning: unusual login detected." />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Multiline Text -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Multiline Text</h3>
-          <ModalContent type="warn" content="Warning: This operation will affect all users.\nPlease review the changes before proceeding." />
-        </section>
+export const MultilineText: Story = {
+  render: () => ({
+    components: { ModalContent },
+    template: `
+      <div class="max-w-md">
+        <ModalContent type="warn" content="Warning: This operation will affect all users.\nPlease review the changes before proceeding." />
       </div>
     `,
   }),

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

@@ -12,12 +12,12 @@ const typeIconNameMap: Partial<Record<ModalContentType, string>> = {
 }
 
 const typeIconClasses: Record<ModalContentType, string> = {
-  default: 'text-primary',
+  default: 'text-secondary-foreground',
   success: 'text-success',
   info: 'text-info',
   help: 'text-help',
   warn: 'text-warn',
-  danger: 'text-destructive',
+  danger: 'text-danger',
   error: 'text-destructive',
 }