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

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.10.0-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.0-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/components/forms/select/Select.vue

@@ -44,12 +44,13 @@ provide('selectModelValue', forwarded.value.modelValue)
 
 <template>
   <SelectRoot
-    v-bind="omitProps(forwarded, ['items', 'multipleGroup', 'itemAttribute', 'placeholder', 'label', 'id'])"
+    v-bind="omitProps(forwarded, ['items', 'multipleGroup', 'itemAttribute', 'placeholder', 'label', 'id', 'select'])"
   >
     <SelectTrigger
-      :id="forwarded.id"
-      :size="forwarded.size"
-      :status="forwarded.status"
+      :id
+      :size
+      :status
+      :select
       v-bind="forwarded._selectTrigger"
     >
       <slot name="trigger" :value="forwarded.modelValue">
@@ -65,7 +66,7 @@ provide('selectModelValue', forwarded.value.modelValue)
     </SelectTrigger>
 
     <SelectContent
-      :size="forwarded.size"
+      :size
       v-bind="{
         ...forwarded._selectContent,
         _selectScrollDownButton: forwarded._selectScrollDownButton,
@@ -91,8 +92,9 @@ provide('selectModelValue', forwarded.value.modelValue)
           >
             <SelectItem
               :value="item"
-              :size="forwarded.size"
-              v-bind="{ ...forwarded._selectItem, ...item._selectItem }"
+              :size
+              :select-item
+              v-bind="{ ...props._selectItem, ...item._selectItem }"
               :is-selected="isEqualObject(item, forwarded.modelValue)"
             >
               <slot name="item" :item="item">

package/dist/runtime/components/forms/select/SelectItem.vue

@@ -35,7 +35,7 @@ const isSelected = computed(() => {
         props.una?.selectItem,
       )
     "
-    :select-item="selectItem"
+    :select-item
     :aria-selected="isSelected"
     :aria-checked="isSelected"
     :is-selected="isSelected"

package/dist/runtime/components/forms/select/SelectTrigger.vue

@@ -22,7 +22,7 @@ const statusClassVariants = computed(() => {
     success: 'btn-outline-success',
     warning: 'btn-outline-warning',
     error: 'btn-outline-error',
-    default: props?.una?.btnDefaultVariant ?? 'btn-outline-white',
+    default: props.select ? `select-${props.select}` : 'select-default-variant',
   }
 
   const text = {
@@ -30,7 +30,7 @@ const statusClassVariants = computed(() => {
     success: 'text-success',
     warning: 'text-warning',
     error: 'text-error',
-    default: 'text-muted',
+    default: '',
   }
 
   const icon = {

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/dist/runtime/types/select.d.ts

@@ -16,7 +16,7 @@ type ItemTextExtensions = SelectItemTextProps & BaseExtensions;
 type GroupExtensions = SelectGroupProps & BaseExtensions;
 type LabelExtensions = SelectLabelProps & BaseExtensions;
 type SeparatorExtensions = SelectSeparatorProps & BaseExtensions;
-type SelectExtensions = NSelectRootProps & BaseExtensions & Pick<NSelectItemProps, 'selectItem'> & Pick<NSelectTriggerProps, 'status'>;
+type SelectExtensions = NSelectRootProps & BaseExtensions & Pick<NSelectItemProps, 'selectItem'> & Pick<NSelectTriggerProps, 'status' | 'select'>;
 export interface NSelectProps extends SelectExtensions {
     /**
      * The unique id of the select.
@@ -71,7 +71,24 @@ export interface NSelectRootProps extends RootExtensions {
     };
 }
 export interface NSelectTriggerProps extends TriggerExtensions {
+    /**
+     * Allows you to add `UnaUI` button 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/select.ts
+     * @example
+     * select="solid-green"
+     */
+    select?: string;
+    /**
+     * The status of the select input.
+     */
     status?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/select.ts
+     */
     una?: {
         selectTrigger?: HTMLAttributes['class'];
         selectTriggerTrailing?: HTMLAttributes['class'];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.10.0-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/extractor-vue-script": "^0.10.0-beta.1",
-    "@una-ui/preset": "^0.10.0-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"