design-system-dashboard-devmunity 0.0.0

package/app/components/a/a-card.stories.ts

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ACard from './a-card.vue'
+
+const meta = {
+    title: 'Components/ACard',
+    component: ACard,
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['outline', 'solid', 'soft'],
+        },
+        as: {
+            control: 'text',
+        },
+        hasBodyExpanded: {
+            control: 'boolean',
+        },
+        hasFooterDivider: {
+            control: 'boolean',
+        },
+    },
+    args: {
+        variant: 'outline',
+        as: 'div',
+        hasBodyExpanded: false,
+        hasFooterDivider: true,
+    },
+} satisfies Meta<typeof ACard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: (args) => ({
+        components: { ACard },
+        setup() {
+            return { args }
+        },
+        template: `
+        <UButton>Button</UButton>
+      <ACard v-bind="args">
+        <template #header>
+          <div class="p-4">
+            <h3 class="text-lg font-semibold">Card Header</h3>
+          </div>
+        </template>
+        <div class="p-4">
+          <p>This is the card body content.</p>
+        </div>
+        <template #footer>
+          <div class="p-4">
+            <button class="px-4 py-2 bg-blue-500 text-white rounded">Action</button>
+          </div>
+        </template>
+      </ACard>
+    `,
+    }),
+}
+
+export const WithoutHeader: Story = {
+    render: (args) => ({
+        components: { ACard },
+        setup() {
+            return { args }
+        },
+        template: `
+      <ACard v-bind="args">
+        <div class="p-4">
+          <p>Card without header</p>
+        </div>
+        <template #footer>
+          <div class="p-4">
+            <button class="px-4 py-2 bg-blue-500 text-white rounded">Action</button>
+          </div>
+        </template>
+      </ACard>
+    `,
+    }),
+}
+
+export const ExpandedBody: Story = {
+    args: {
+        hasBodyExpanded: true,
+    },
+    render: (args) => ({
+        components: { ACard },
+        setup() {
+            return { args }
+        },
+        template: `
+      <div style="height: 400px;">
+        <ACard v-bind="args">
+          <template #header>
+            <div class="p-4">
+              <h3 class="text-lg font-semibold">Expanded Card</h3>
+            </div>
+          </template>
+          <div class="p-4">
+            <p>This card has an expanded body that fills available space.</p>
+            <p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          </div>
+          <template #footer>
+            <div class="p-4">
+              <button class="px-4 py-2 bg-blue-500 text-white rounded">Action</button>
+            </div>
+          </template>
+        </ACard>
+      </div>
+    `,
+    }),
+}

package/app/components/a/a-card.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { computed } from 'vue'
+import { twMerge } from 'tailwind-merge'
+
+const props = defineProps({
+    as: {
+        type: String,
+        default: 'div',
+        required: false,
+    },
+    variant: {
+        default: 'outline',
+        type: String,
+        required: false,
+    },
+    hasBodyExpanded: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    hasFooterDivider: {
+        type: Boolean,
+        default: true,
+        required: false,
+    },
+    ui: {
+        type: Object,
+        default: null,
+        required: false,
+    },
+})
+
+// Computed
+
+const uiStyles = computed(() => {
+    const baseStyles = {
+        header: 'p-0 sm:p-0',
+        body: 'p-0 sm:p-0',
+        footer: 'p-0 sm:p-0 sm:px-0',
+    }
+
+    // Apply hasBodyExpanded styles
+    if (props.hasBodyExpanded) {
+        baseStyles.root = 'grid h-full grid-rows-[auto_1fr_auto]'
+        // ! FIXME:
+        baseStyles.body = twMerge(baseStyles.body, 'overflow-y-auto')
+    }
+
+    // Apply hasFooterDivider styles
+    if (!props.hasFooterDivider) {
+        baseStyles.body = twMerge(baseStyles.body, 'border-none')
+    }
+
+    // Apply custom ui prop (overrides previous styles)
+    if (props.ui) {
+        Object.assign(baseStyles, props.ui)
+    }
+
+    return baseStyles
+})
+</script>
+
+<template>
+    <UCard :ui="uiStyles" :variant="variant" :as="as">
+        <template v-if="$slots.header" #header>
+            <slot name="header" />
+        </template>
+        <slot />
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer" />
+        </template>
+    </UCard>
+</template>

package/app/pages/index.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+const isDark = computed({
+    get() {
+        return colorMode.value === 'dark'
+    },
+    set(_isDark) {
+        colorMode.preference = _isDark ? 'dark' : 'light'
+    },
+})
+</script>
+
+<template>
+    <div>
+        <UPageHero
+            title="Nuxt Starter Template"
+            description="A production-ready starter template powered by Nuxt UI. Build beautiful, accessible, and performant applications in minutes, not hours."
+            :links="[
+                {
+                    label: 'Get started',
+                    to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
+                    target: '_blank',
+                    trailingIcon: 'i-lucide-arrow-right',
+                    size: 'xl',
+                },
+                {
+                    label: 'Use this template',
+                    to: 'https://github.com/nuxt-ui-templates/starter',
+                    target: '_blank',
+                    icon: 'i-simple-icons-github',
+                    size: 'xl',
+                    color: 'neutral',
+                    variant: 'subtle',
+                },
+            ]"
+        />
+
+        <UPageSection
+            id="features"
+            title="Everything you need to build modern Nuxt apps"
+            description="Start with a solid foundation. This template includes all the essentials for building production-ready applications with Nuxt UI's powerful component system."
+            :features="[
+                {
+                    icon: 'i-lucide-rocket',
+                    title: 'Production-ready from day one',
+                    description:
+                        'Pre-configured with TypeScript, ESLint, Tailwind CSS, and all the best practices. Focus on building features, not setting up tooling.',
+                },
+                {
+                    icon: 'i-lucide-palette',
+                    title: 'Beautiful by default',
+                    description:
+                        'Leveraging Nuxt UI\'s design system with automatic dark mode, consistent spacing, and polished components that look great out of the box.',
+                },
+                {
+                    icon: 'i-lucide-zap',
+                    title: 'Lightning fast',
+                    description:
+                        'Optimized for performance with SSR/SSG support, automatic code splitting, and edge-ready deployment. Your users will love the speed.',
+                },
+                {
+                    icon: 'i-lucide-blocks',
+                    title: '100+ components included',
+                    description:
+                        'Access Nuxt UI\'s comprehensive component library. From forms to navigation, everything is accessible, responsive, and customizable.',
+                },
+                {
+                    icon: 'i-lucide-code-2',
+                    title: 'Developer experience first',
+                    description:
+                        'Auto-imports, hot module replacement, and TypeScript support. Write less boilerplate and ship more features.',
+                },
+                {
+                    icon: 'i-lucide-shield-check',
+                    title: 'Built for scale',
+                    description:
+                        'Enterprise-ready architecture with proper error handling, SEO optimization, and security best practices built-in.',
+                },
+            ]"
+        />
+
+        <UPageSection>
+            <UPageCTA
+                title="Ready to build your next Nuxt app?"
+                description="Join thousands of developers building with Nuxt and Nuxt UI. Get this template and start shipping today."
+                variant="subtle"
+                :links="[
+                    {
+                        label: 'Start building',
+                        to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
+                        target: '_blank',
+                        trailingIcon: 'i-lucide-arrow-right',
+                        color: 'neutral',
+                    },
+                    {
+                        label: 'View on GitHub',
+                        to: 'https://github.com/nuxt-ui-templates/starter',
+                        target: '_blank',
+                        icon: 'i-simple-icons-github',
+                        color: 'neutral',
+                        variant: 'outline',
+                    },
+                ]"
+            />
+
+            <div class="flex items-center gap-2">
+                <div class="bg-primary-50 size-12 space-x-2" />
+                <div class="bg-primary-100 size-12 space-x-2" />
+                <div class="bg-primary-200 size-12 space-x-2" />
+                <div class="bg-primary-300 size-12 space-x-2" />
+                <div class="bg-primary-400 size-12 space-x-2" />
+                <div class="bg-primary-500 size-12 space-x-2" />
+                <div class="bg-primary-600 size-12 space-x-2" />
+                <div class="bg-primary-700 size-12 space-x-2" />
+                <div class="bg-primary-800 size-12 space-x-2" />
+                <div class="bg-primary-900 size-12 space-x-2" />
+                <div class="bg-primary-950 size-12 space-x-2" />
+                <div class="bg-default text-default border-default size-12 space-x-2">div</div>
+
+                <UButton label="Button" color="test" />
+                <UButton label="Button" color="primary" />
+            </div>
+            <p class="text-brand-blue-500 bg-primary-50">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam nihil corrupti doloremque,
+                natus ipsa voluptatem, eos nobis assumenda nostrum quasi, nesciunt deserunt illum ex magnam
+                animi perferendis optio tempora debitis.
+            </p>
+
+            <ClientOnly v-if="!colorMode?.forced">
+                <UButton
+                    :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
+                    color="neutral"
+                    variant="ghost"
+                    :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
+                    @click="isDark = !isDark"
+                />
+
+                <template #fallback>
+                    <div class="size-8" />
+                </template>
+            </ClientOnly>
+        </UPageSection>
+    </div>
+</template>

package/app/pages/test.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup></script>
+
+<template>
+    <div class="h-screen">
+        <ACardInner class="h-full">
+            <ACard :has-footer-divider="false">
+                <template #header>
+                    <h1>Header</h1>
+                </template>
+                <p>Body</p>
+                <template #footer>
+                    <p>Footer</p>
+                </template>
+            </ACard>
+            <UCard variant="ghost"> oli </UCard>
+        </ACardInner>
+    </div>
+</template>