@una-ui/nuxt 0.10.1-beta.1 → 0.11.0-beta.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.10.1-beta.1",
+  "version": "0.11.0-beta.1",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -7,7 +7,7 @@ import '@una-ui/preset/prefixes';
 import '@una-ui/extractor-vue-script';
 
 const name = "@una-ui/nuxt";
-const version = "0.10.1-beta.1";
+const version = "0.11.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {
@@ -46,6 +46,12 @@ const module = defineNuxtModule({
       global: options.global,
       watch: nuxt.options.dev
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components/elements", "card"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev
+    });
     addComponentsDir({
       path: resolve(runtimeDir, "components", "forms"),
       prefix: options.prefix,

package/dist/runtime/components/elements/card/Card.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { NCardProps } from '../../../types/card'
+import { cn } from '../../../utils'
+import CardContent from './CardContent.vue'
+import CardHeader from './CardHeader.vue'
+import CardAbout from './CardAbout.vue'
+import CardFooter from './CardFooter.vue'
+import CardTitle from './CardTitle.vue'
+import CardDescription from './CardDescription.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NCardProps>(), {
+  una: () => ({
+    cardDefaultVariant: 'card-default-variant',
+  }),
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const cardVariants = ['soft', 'outline'] as const
+const hasVariant = computed(() => cardVariants.some(cardVariant => props.card?.includes(cardVariant)))
+const isBaseVariant = computed(() => props.card?.includes('~'))
+</script>
+
+<template>
+  <div
+    v-bind="{ ...$attrs, delegatedProps }"
+    :card="card"
+    :class="cn(
+      'card',
+      !hasVariant && !isBaseVariant ? una?.cardDefaultVariant : '',
+      props.class,
+      una?.card,
+    )"
+  >
+    <slot name="root">
+      <CardHeader
+        v-bind="delegatedProps._cardHeader"
+      >
+        <slot name="header" />
+      </CardHeader>
+
+      <CardAbout
+        v-if="$slots.about || title || description || $slots.title || $slots.description"
+        v-bind="delegatedProps._cardAbout"
+      >
+        <slot name="about">
+          <CardTitle
+            v-if="$slots.title || title"
+            v-bind="delegatedProps._cardTitle"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </CardTitle>
+          <CardDescription
+            v-if="$slots.description || description"
+            v-bind="delegatedProps._cardDescription"
+          >
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </CardDescription>
+        </slot>
+      </CardAbout>
+
+      <CardContent
+        v-if="$slots.default"
+        v-bind="delegatedProps._cardContent"
+      >
+        <slot />
+      </CardContent>
+
+      <CardFooter
+        v-if="$slots.footer"
+        v-bind="delegatedProps._cardFooter"
+      >
+        <slot name="footer" />
+      </CardFooter>
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/elements/card/CardAbout.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { NCardAboutProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCardAboutProps>()
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'card-about',
+      props.class,
+      props.una?.cardAbout,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/elements/card/CardContent.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { NCardContentProps } from '../../../types/card'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCardContentProps>()
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'card-content',
+      props.class,
+      props.una?.cardContent,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/elements/card/CardDescription.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { NCardDescriptionProps } from '../../../types/card'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCardDescriptionProps>()
+</script>
+
+<template>
+  <p
+    :class="cn(
+      'card-description',
+      props.class,
+      props.una?.cardSubtitle,
+    )"
+  >
+    <slot />
+  </p>
+</template>

package/dist/runtime/components/elements/card/CardFooter.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { NCardFooterProps } from '../../../types/card'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCardFooterProps>()
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'card-footer',
+      props.class,
+      props.una?.cardFooter,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/elements/card/CardHeader.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { NCardHeaderProps } from '../../../types/card'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCardHeaderProps>()
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'card-header',
+      props.class,
+      props.una?.cardHeader,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/elements/card/CardTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NCardTitleProps } from '../../../types/card'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCardTitleProps>()
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('card-title',
+         props.class,
+         props.una?.cardTitle,
+      )
+    "
+  >
+    <slot />
+  </h3>
+</template>

package/dist/runtime/types/card.d.ts

@@ -0,0 +1,69 @@
+import type { HTMLAttributes } from 'vue';
+interface BaseExtensions {
+    class?: HTMLAttributes['class'];
+}
+export interface NCardProps extends BaseExtensions {
+    /**
+     * Allows you to add `UnaUI` card preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/card.ts
+     * @example
+     * card="outline-green"
+     */
+    card?: string;
+    /**
+     * Add a title to the card.
+     */
+    title?: string;
+    /**
+     * Add a description to the card.
+     */
+    description?: string;
+    _cardContent?: Partial<NCardContentProps>;
+    _cardTitle?: Partial<NCardTitleProps>;
+    _cardDescription?: Partial<NCardDescriptionProps>;
+    _cardHeader?: Partial<NCardHeaderProps>;
+    _cardAbout?: Partial<NCardAboutProps>;
+    _cardFooter?: Partial<NCardFooterProps>;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/card.ts
+     */
+    una?: {
+        cardDefaultVariant: HTMLAttributes['class'];
+        card?: HTMLAttributes['class'];
+    };
+}
+export interface NCardContentProps extends BaseExtensions {
+    una?: {
+        cardContent?: HTMLAttributes['class'];
+    };
+}
+export interface NCardTitleProps extends BaseExtensions {
+    una?: {
+        cardTitle?: HTMLAttributes['class'];
+    };
+}
+export interface NCardDescriptionProps extends BaseExtensions {
+    una?: {
+        cardSubtitle?: HTMLAttributes['class'];
+    };
+}
+export interface NCardHeaderProps extends BaseExtensions {
+    una?: {
+        cardHeader?: HTMLAttributes['class'];
+    };
+}
+export interface NCardAboutProps extends BaseExtensions {
+    una?: {
+        cardAbout?: HTMLAttributes['class'];
+    };
+}
+export interface NCardFooterProps extends BaseExtensions {
+    una?: {
+        cardFooter?: HTMLAttributes['class'];
+    };
+}
+export {};

package/dist/runtime/types/index.d.ts

@@ -21,6 +21,7 @@ export * from './skeleton.js';
 export * from './tabs.js';
 export * from './select.js';
 export * from './separator.js';
+export * from './card.js';
 export interface Colors {
     [key: string]: string;
 }

package/dist/runtime/types/index.js

@@ -21,3 +21,4 @@ export * from "./skeleton.js";
 export * from "./tabs.js";
 export * from "./select.js";
 export * from "./separator.js";
+export * from "./card.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.10.1-beta.1",
+  "version": "0.11.0-beta.1",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -28,33 +28,32 @@
   ],
   "dependencies": {
     "@headlessui/vue": "^1.7.22",
-    "@iconify-json/heroicons": "^1.1.22",
-    "@iconify-json/lucide": "^1.1.200",
-    "@iconify-json/radix-icons": "^1.1.14",
-    "@iconify-json/tabler": "^1.1.117",
-    "@nuxt/kit": "^3.12.3",
+    "@iconify-json/heroicons": "^1.1.24",
+    "@iconify-json/lucide": "^1.1.206",
+    "@iconify-json/radix-icons": "^1.1.15",
+    "@iconify-json/tabler": "^1.1.120",
+    "@nuxt/kit": "^3.12.4",
     "@nuxtjs/color-mode": "^3.4.2",
-    "@unocss/core": "^0.61.5",
-    "@unocss/nuxt": "^0.61.5",
-    "@unocss/preset-attributify": "^0.61.5",
-    "@unocss/preset-icons": "^0.61.5",
-    "@vueuse/core": "^10.11.0",
-    "@vueuse/integrations": "^10.11.0",
-    "@vueuse/nuxt": "^10.11.0",
+    "@unocss/core": "^0.61.9",
+    "@unocss/nuxt": "^0.61.9",
+    "@unocss/preset-attributify": "^0.61.9",
+    "@unocss/preset-icons": "^0.61.9",
+    "@vueuse/core": "^10.11.1",
+    "@vueuse/integrations": "^10.11.1",
+    "@vueuse/nuxt": "^10.11.1",
     "clsx": "^2.1.1",
     "ohash": "^1.1.3",
-    "radix-vue": "^1.9.1",
-    "tailwind-merge": "^2.4.0",
-    "typescript": "^5.5.3",
-    "unocss": "^0.61.5",
+    "radix-vue": "^1.9.3",
+    "tailwind-merge": "^2.5.1",
+    "unocss": "^0.61.9",
     "unocss-preset-animations": "^1.1.0",
-    "@una-ui/preset": "^0.10.1-beta.1",
-    "@una-ui/extractor-vue-script": "^0.10.1-beta.1"
+    "@una-ui/extractor-vue-script": "^0.11.0-beta.1",
+    "@una-ui/preset": "^0.11.0-beta.1"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/schema": "^3.12.3",
-    "nuxt": "^3.12.3"
+    "@nuxt/schema": "^3.12.4",
+    "nuxt": "^3.12.4"
   },
   "publishConfig": {
     "access": "public"