@una-ui/nuxt 0.2.0-beta.6 → 0.3.0-beta.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.2.0-beta.6",
+  "version": "0.3.0-beta.1",
   "compatibility": {
     "nuxt": "^3.0.0-rc.8"
   }

package/dist/module.mjs

@@ -6,7 +6,7 @@ import prefixes from '@una-ui/preset/prefixes';
 import extratorUna from '@una-ui/extractor-vue-script';
 
 const name = "@una-ui/nuxt";
-const version = "0.2.0-beta.6";
+const version = "0.3.0-beta.1";
 
 function extendUnocssOptions(user = {}) {
   return {

package/dist/runtime/components/forms/Checkbox.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed } from 'vue'
+import NIcon from '../elements/Icon.vue'
+import { randomId } from '../../utils'
+import type { NCheckboxProps } from '../../types/checkbox'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<NCheckboxProps>(),
+  {
+    modelValue: false,
+    disabled: false,
+    una: () => ({
+      checkboxIcon: 'checkbox-icon',
+    }),
+  },
+)
+const emit = defineEmits<{ (...args: any): void }>()
+
+const slots = defineSlots<{
+  default?: void
+  icon?: any
+}>()
+
+const id = computed(() => props.id ?? randomId('checkbox'))
+
+const checked = useVModel(props, 'modelValue', emit, { passive: true })
+</script>
+
+<template>
+  <label
+    checkbox="wrapper"
+    :for="props.for ?? id"
+    :class="[
+      una?.checkboxWrapper,
+      {
+        'checkbox-reverse': reverse,
+        'checkbox-disabled': disabled,
+      },
+    ]"
+    :checked="checked || null"
+    :disabled="disabled || null"
+  >
+    <input
+      :id="id"
+      v-model="checked"
+      type="checkbox"
+      class="peer"
+      checkbox="input"
+      :disabled="disabled"
+      :name="name"
+      @keypress.enter="checked = !checked"
+    >
+    <span
+      :checkbox="checkbox"
+      :size="size"
+      class="checkbox checkbox-peer-focus"
+      v-bind="$attrs"
+    >
+      <slot name="icon">
+        <NIcon
+          checkbox="icon-base icon-checked"
+          :name="una.checkboxIcon!"
+          :class="[
+            una.checkboxIconBase,
+          ]"
+        />
+      </slot>
+    </span>
+    <div
+      v-if="slots.default || label"
+      checkbox="label"
+      :class="una?.checkboxLabel"
+    >
+      <slot>
+        {{ label }}
+      </slot>
+    </div>
+  </label>
+</template>

package/dist/runtime/components/forms/Radio.vue

@@ -57,27 +57,22 @@ const model = useVModel(props, 'modelValue', emit, { passive: true })
       :value="value"
       @keypress.enter="model = value!"
     >
-    <div
+    <span
       :radio="radio"
       :size="size"
-      class="radio radio-(peer-focus)"
-      :class="[
-        una?.radioPeerFocus,
-      ]"
+      class="radio radio-peer-focus"
       v-bind="$attrs"
     >
-      <div radio="icon-wrapper">
-        <slot name="icon">
-          <NIcon
-            :class="[
-              una.radioIconBase,
-            ]"
-            radio="icon-base icon-checked"
-            :name="una.radioIcon!"
-          />
-        </slot>
-      </div>
-    </div>
+      <slot name="icon">
+        <NIcon
+          :class="[
+            una.radioIconBase,
+          ]"
+          radio="icon-base icon-checked"
+          :name="una.radioIcon!"
+        />
+      </slot>
+    </span>
     <div
       v-if="slots.default || label"
       radio="label"

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

@@ -0,0 +1,69 @@
+export interface NCheckboxProps {
+    /**
+     * v-model binding value if the checkbox is checked.
+    */
+    modelValue?: boolean | null;
+    /**
+     * Disable the checkbox.
+    */
+    disabled?: boolean;
+    /**
+     * Switch the position of label and checkbox.
+    */
+    reverse?: boolean;
+    /**
+     * Allows you to add `UnaUI` checkbox preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
+    */
+    checkbox?: string;
+    /**
+     * Add name attribute to the checkbox.
+     *
+     * @default null
+    */
+    name?: string;
+    /**
+     * Manually set the id attribute.
+     * By default, the id attribute is generated randomly for accessibility reasons.
+     *
+     * @default randomId
+    */
+    id?: string;
+    /**
+     * Manually set the for attribute.
+     *
+     * By default, the for attribute is synced with the id attribute for accessibility reasons.
+     *
+     * @default randomId
+     * @example
+     * for="options"
+    */
+    for?: string;
+    /**
+     * Display label text.
+     *
+     * @default null
+    */
+    label?: string;
+    /**
+     * Allows you to change the size of the checkbox.
+     *
+     * @default size="sm"
+     *
+     * @example
+     * size="sm" | size="2cm" | size="2rem" | size="2px"
+    */
+    size?: string;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/checkbox.ts
+     */
+    una?: {
+        checkbox?: string;
+        checkboxWrapper?: string;
+        checkboxLabel?: string;
+        checkboxIconBase?: string;
+        checkboxIcon?: string;
+    };
+}

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

@@ -14,3 +14,4 @@ export * from './nav-link';
 export * from './nav-link-group';
 export * from './link';
 export * from './radio';
+export * from './checkbox';

package/dist/runtime/types/index.mjs

@@ -14,3 +14,4 @@ export * from "./nav-link.mjs";
 export * from "./nav-link-group.mjs";
 export * from "./link.mjs";
 export * from "./radio.mjs";
+export * from "./checkbox.mjs";

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

@@ -83,7 +83,6 @@ export interface NRadioProps {
         radio?: string;
         radioWrapper?: string;
         radioLabel?: string;
-        radioPeerFocus?: string;
         radioIconBase?: string;
         radioIcon?: string;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.2.0-beta.6",
+  "version": "0.3.0-beta.1",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -24,9 +24,9 @@
   ],
   "dependencies": {
     "@headlessui/vue": "^1.7.16",
-    "@iconify-json/heroicons": "^1.1.12",
-    "@iconify-json/tabler": "^1.1.94",
-    "@nuxt/kit": "^3.7.4",
+    "@iconify-json/heroicons": "^1.1.13",
+    "@iconify-json/tabler": "^1.1.95",
+    "@nuxt/kit": "^3.8.0",
     "@nuxtjs/color-mode": "^3.3.0",
     "@unocss/core": "^0.55.7",
     "@unocss/nuxt": "^0.55.7",
@@ -37,12 +37,12 @@
     "@vueuse/nuxt": "^10.5.0",
     "ohash": "^1.1.3",
     "unocss": "^0.55.7",
-    "@una-ui/extractor-vue-script": "^0.2.0-beta.6",
-    "@una-ui/preset": "^0.2.0-beta.6"
+    "@una-ui/preset": "^0.3.0-beta.1",
+    "@una-ui/extractor-vue-script": "^0.3.0-beta.1"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.4.0",
-    "@nuxt/schema": "^3.7.4",
+    "@nuxt/schema": "^3.8.0",
     "nuxt": "3.7.3"
   },
   "publishConfig": {