@una-ui/nuxt 0.15.1-beta.2 → 0.16.1-beta.1

package/dist/module.d.mts

@@ -1,12 +1,9 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { UnaSettings } from '../dist/runtime/types/index.js';
 
-interface UnaOptions {
-    primary?: string;
-    gray?: string;
-}
 declare module '@nuxt/schema' {
     interface AppConfigInput {
-        una?: UnaOptions;
+        una?: UnaSettings;
     }
 }
 interface ModuleOptions {

package/dist/module.d.ts

@@ -1,12 +1,9 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { UnaSettings } from '../dist/runtime/types/index.js';
 
-interface UnaOptions {
-    primary?: string;
-    gray?: string;
-}
 declare module '@nuxt/schema' {
     interface AppConfigInput {
-        una?: UnaOptions;
+        una?: UnaSettings;
     }
 }
 interface ModuleOptions {

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.15.1-beta.2",
+  "version": "0.16.1-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.15.1-beta.2";
+const version = "0.16.1-beta.1";
 
 const module = defineNuxtModule({
   meta: {
@@ -29,7 +29,9 @@ const module = defineNuxtModule({
     nuxt.options.css.unshift("@una-ui/preset/una.css");
     nuxt.options.appConfig.una = {
       primary: "yellow",
-      gray: "stone"
+      gray: "stone",
+      radius: 0.5,
+      fontSize: 16
     };
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
@@ -62,6 +64,13 @@ const module = defineNuxtModule({
       watch: nuxt.options.dev,
       priority: 10
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components/elements", "popover"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev,
+      priority: 10
+    });
     addComponentsDir({
       path: resolve(runtimeDir, "components", "forms"),
       prefix: options.prefix,

package/dist/runtime/components/data/table/Table.vue

@@ -73,8 +73,8 @@ const columnsWithMisc = computed(() => {
           accessorKey: 'selection',
           header: props.enableMultiRowSelection
             ? ({ table }: any) => h(Checkbox, {
-                'modelValue': table.getIsAllPageRowsSelected() ?? false,
-                'onUpdate:modelValue': (value: boolean) => {
+                'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+                'onUpdate:checked': (value: boolean) => {
                   table.toggleAllPageRowsSelected(!!value)
                   emit('selectAll', table.getRowModel().rows)
                 },
@@ -82,8 +82,8 @@ const columnsWithMisc = computed(() => {
               })
             : '',
           cell: ({ row }: any) => h(Checkbox, {
-            'modelValue': row.getIsSelected() ?? false,
-            'onUpdate:modelValue': (value: boolean) => {
+            'checked': row.getIsSelected() ?? false,
+            'onUpdate:checked': (value: boolean) => {
               row.toggleSelected(!!value)
               emit('select', row)
             },

package/dist/runtime/components/elements/Label.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Label } from 'radix-vue'
+import { cn } from '../../utils'
+import type { NLabelProps } from '../../types'
+
+const props = defineProps<NLabelProps>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'label-base',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

package/dist/runtime/components/elements/popover/Popover.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+import type { PopoverRootEmits } from 'radix-vue'
+import type { NPopoverProps } from '../../../types'
+
+const props = defineProps<NPopoverProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>

package/dist/runtime/components/elements/popover/PopoverContent.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NPopoverContentProps } from '../../../types'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<NPopoverContentProps>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'popover',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

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

@@ -1,86 +1,75 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue'
-import { useVModel } from '@vueuse/core'
-import NIcon from '../elements/Icon.vue'
-import { randomId } from '../../utils'
-import type { NCheckboxProps } from '../../types/checkbox'
+import { computed } from 'vue'
+import type { CheckboxRootEmits } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { cn, randomId } from '../../utils'
+import Icon from '../elements/Icon.vue'
+import type { NCheckboxProps } from '../../types'
+import Label from '../elements/Label.vue'
 
-defineOptions({
-  inheritAttrs: false,
+const props = withDefaults(defineProps<NCheckboxProps>(), {
+  forceMount: true,
 })
+const emits = defineEmits<CheckboxRootEmits>()
 
-const props = withDefaults(
-  defineProps<NCheckboxProps>(),
-  {
-    modelValue: false,
-    disabled: false,
-  },
-)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
 
-const emit = defineEmits<{ (...args: any): void }>()
+  return delegated
+})
 
-const slots = defineSlots<{
-  default?: void
-  icon?: any
-}>()
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 const id = computed(() => props.id ?? randomId('checkbox'))
-const checked = useVModel(props, 'modelValue', emit, { passive: true })
-
-watch(checked, (value) => {
-  emit('onUpdate', value)
-})
 </script>
 
 <template>
-  <label
+  <div
     checkbox="wrapper"
-    role="checkbox"
-    :for="props.for ?? id"
     :class="[
       una?.checkboxWrapper,
       {
         'checkbox-reverse': reverse,
-        'checkbox-disabled': disabled,
       },
     ]"
-    :checked="checked || null"
-    :disabled="disabled || null"
   >
-    <input
+    <CheckboxRoot
+      v-bind="forwarded"
       :id="id"
-      :value="checked"
-      :checked="!!checked"
-      type="checkbox"
-      class="peer"
-      checkbox="input"
-      :disabled="disabled"
-      :name="name"
-      @keypress.enter="checked = !checked"
-      @click="checked = !checked"
+      :class="
+        cn(
+          'peer checkbox',
+          props.class,
+        )"
     >
-    <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 ?? 'checkbox-icon'"
-          :class="una?.checkboxIconBase"
-        />
-      </slot>
-    </span>
-    <div
-      v-if="slots.default || label"
-      checkbox="label"
-      :class="una?.checkboxLabel"
+      <CheckboxIndicator
+        :force-mount
+        :size
+        :class="cn('checkbox-indicator', una?.checkboxIndicator)"
+        v-bind="props._checkboxIndicator"
+      >
+        <slot name="icon">
+          <Icon
+            :name="props.checked === 'indeterminate'
+              ? props.una?.checkboxIndeterminateIcon ?? 'checkbox-indeterminate-icon'
+              : props.checked
+                ? props.una?.checkboxCheckedIcon ?? 'checkbox-checked-icon'
+                : props.una?.checkboxUncheckedIcon ?? 'checkbox-unchecked-icon'"
+            :class="cn('checkbox-icon-base', una?.checkboxIconBase)"
+          />
+        </slot>
+      </CheckboxIndicator>
+    </CheckboxRoot>
+
+    <Label
+      v-if="$slots.default || label"
+      :for="props.for || id"
+      :class="cn('checkbox-label', una?.checkboxLabel)"
+      v-bind="props._label"
     >
       <slot>
         {{ label }}
       </slot>
-    </div>
-  </label>
+    </Label>
+  </div>
 </template>

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

@@ -2,12 +2,10 @@
 import { computed } from 'vue'
 import type { NFormGroupProps } from '../../types'
 import NFormGroupDefaultSlot from '../slots/FormGroupDefault'
-import FormGroupLabel from '../slots/FormGroupLabel'
 import { randomId } from '../../utils'
+import Label from '../elements/Label.vue'
 
-const props = withDefaults(defineProps<NFormGroupProps>(), {
-  for: undefined,
-})
+const props = defineProps<NFormGroupProps>()
 
 const id = computed(() => props.id ?? randomId('form-group'))
 
@@ -17,7 +15,7 @@ const statusClassVariants = computed(() => {
     success: 'text-success',
     warning: 'text-warning',
     error: 'text-error',
-    default: 'text-$c-gray-500',
+    default: 'text-muted',
   }
 
   return text[props.status ?? 'default']
@@ -42,24 +40,26 @@ const statusClassVariants = computed(() => {
             :class="una?.formGroupTopWrapperInner"
           >
             <slot name="label">
-              <FormGroupLabel
-                :id="id"
-                :for="props.for"
-                form-group="label-wrapper"
-                :class="una?.formGroupLabelWrapper"
+              <Label
+                :for="props.for ?? id"
               >
-                <span
-                  form-group="label"
-                  :class="una?.formGroupLabel"
+                <div
+                  form-group="label-wrapper"
+                  :class="una?.formGroupLabelWrapper"
                 >
-                  {{ label }}
-                </span>
-                <span
-                  v-if="required"
-                  form-group="label-required"
-                  :class="una?.formGroupLabelRequired"
-                />
-              </FormGroupLabel>
+                  <span
+                    form-group="label"
+                    :class="una?.formGroupLabel"
+                  >
+                    {{ label }}
+                  </span>
+                  <span
+                    v-if="required"
+                    form-group="label-required"
+                    :class="una?.formGroupLabelRequired"
+                  />
+                </div>
+              </Label>
             </slot>
 
             <slot name="hint">

package/dist/runtime/components/misc/ThemeSwitcher.vue

@@ -1,24 +1,31 @@
 <script setup lang="ts">
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
+import { PopoverTrigger } from 'radix-vue'
 import { useUnaThemes } from '../../composables/useUnaThemes'
 import { useUnaSettings } from '../../composables/useUnaSettings'
-import NButton from '../elements/Button.vue'
+import Popover from '../elements/popover/Popover.vue'
+import PopoverContent from '../elements/popover/PopoverContent.vue'
+import Button from '../elements/Button.vue'
+import { RADIUS } from '../../constants'
+import Label from '../elements/Label.vue'
+import Separator from '../elements/Separator.vue'
 
-const { primaryThemes, grayThemes } = useUnaThemes()
+// @ts-expect-error tsconfig
+import { useColorMode } from '#imports'
+
+const colorMode = useColorMode()
 
+const [value, toggle] = useToggle()
+const { primaryThemes, grayThemes } = useUnaThemes()
 const { settings, reset } = useUnaSettings()
 
 const currentPrimaryThemeHex = computed(() => settings.value.primaryColors?.['--una-primary-hex'])
-
 const currentPrimaryThemeName = computed(() => {
   const theme = primaryThemes.find(([, theme]) => theme['--una-primary-hex'] === currentPrimaryThemeHex.value)
   return theme ? theme[0] : ''
 })
-
 const currentGrayThemeHex = computed(() => settings.value.grayColors?.['--una-gray-hex'])
-
 const currentGrayThemeName = computed(() => {
   const theme = grayThemes.find(([, theme]) => theme['--una-gray-hex'] === currentGrayThemeHex.value)
   return theme ? theme[0] : ''
@@ -33,82 +40,161 @@ function updateGrayTheme(theme: string) {
   settings.value.gray = theme
 }
 
-const [value, toggle] = useToggle()
 function shuffleTheme() {
   const randomPrimaryTheme = primaryThemes[Math.floor(Math.random() * primaryThemes.length)][0]
   const randomGrayTheme = grayThemes[Math.floor(Math.random() * grayThemes.length)][0]
+  const randomRadius = RADIUS[Math.floor(Math.random() * RADIUS.length)]
   updatePrimaryTheme(randomPrimaryTheme)
   updateGrayTheme(randomGrayTheme)
+  settings.value.radius = randomRadius
   toggle()
 }
 </script>
 
 <template>
-  <div>
-    <Popover class="relative inline-block">
-      <PopoverButton
-        btn="~ square soft"
-        class="rounded-lg"
-        aria-label="Theme"
-      >
-        <span i-lucide-paintbrush text-md />
-      </PopoverButton>
-
-      <transition enter-active-class="transition ease-out duration-200" enter-from-class="opacity-0 translate-y-1" enter-to-class="opacity-100 translate-y-0" leave-active-class="transition ease-in duration-150" leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 translate-y-1">
-        <PopoverPanel class="absolute right-0 z-100 mt-2 w-54 border-1 border-base rounded-xl bg-muted px-4 py-5 shadow-lg">
-          <div class="flex flex-col space-y-5">
-            <div class="grid grid-cols-5 gap-3">
-              <button
-                v-for="[key, theme] in primaryThemes"
-                :key="key"
-                :style="{ background: theme['--una-primary-hex'] }"
-                class="h-6.5 w-6.5 rounded-full transition-all" :class="[currentPrimaryThemeName === key ? 'ring-2' : 'scale-93']"
-                ring="primary offset-4 offset-base"
-                aria-label="Primary Color"
-                @click="updatePrimaryTheme(key)"
-              />
-            </div>
-
-            <hr class="my-2 border-$c-divider">
-
-            <div class="grid grid-cols-5 gap-3">
-              <button
-                v-for="[key, theme] in grayThemes"
-                :key="key"
-                :style="{ background: theme['--una-gray-hex'] }"
-                :class="currentGrayThemeName === key ? 'ring-2' : 'scale-93'"
-                class="h-6.5 w-6.5 rounded-full transition-all"
-                aria-label="Gray Color"
-                ring="gray offset-4 offset-base"
-                @click="updateGrayTheme(key)"
-              />
-            </div>
-
-            <hr class="my-2 border-$c-divider">
-
-            <div class="flex space-x-3">
-              <NButton
-                btn="~ solid block"
-                class="transition"
-                label="Shuffle"
-                leading="i-lucide-paintbrush-vertical"
-                :una="{
-                  btnLeading: value ? 'rotate-180 transform' : 'rotate-0',
-                }"
-                @click="shuffleTheme"
-              />
-
-              <NButton
-                btn="~ solid-gray"
-                size="xs"
-                icon
-                label="i-lucide-delete"
-                @click="reset"
-              />
-            </div>
+  <Popover>
+    <PopoverTrigger
+      as-child
+    >
+      <Button
+        btn="soft square"
+        icon
+        label="i-lucide-paintbrush"
+      />
+    </PopoverTrigger>
+
+    <PopoverContent
+      align="end"
+      class="z-100 w-73 bg-muted"
+    >
+      <div class="flex flex-col">
+        <div class="grid space-y-1">
+          <h1 class="text-md text-base font-semibold">
+            Customize
+          </h1>
+          <p class="text-xs text-muted">
+            Pick a style and color for your components.
+          </p>
+        </div>
+
+        <Separator />
+
+        <div class="space-y-3">
+          <Label for="color" class="text-xs"> Primary Color</Label>
+          <div class="grid grid-cols-7 gap-3">
+            <button
+              v-for="[key, theme] in primaryThemes"
+              :key="key"
+              :style="{ background: theme['--una-primary-hex'] }"
+              class="h-6.5 w-6.5 rounded-full transition-all"
+              :class="[currentPrimaryThemeName === key ? 'ring-2' : 'scale-93']"
+              ring="primary offset-4 offset-base"
+              aria-label="Primary Color"
+              @click="updatePrimaryTheme(key)"
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        <div class="space-y-3">
+          <Label for="color" class="text-xs"> Gray Color </Label>
+          <div class="grid grid-cols-7 gap-3">
+            <button
+              v-for="[key, theme] in grayThemes"
+              :key="key"
+              :style="{ background: theme['--una-gray-hex'] }"
+              :class="currentGrayThemeName === key ? 'ring-2' : 'scale-93'"
+              class="h-6.5 w-6.5 rounded-full transition-all"
+              aria-label="Gray Color"
+              ring="gray offset-4 offset-base"
+              @click="updateGrayTheme(key)"
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        <div class="space-y-3">
+          <Label for="radius" class="text-xs"> Radius </Label>
+          <div class="grid grid-cols-5 gap-2 py-1.5">
+            <Button
+              v-for="r in RADIUS"
+              :key="r"
+              btn="solid-gray"
+              size="xs"
+              :class="
+                r === settings.radius
+                  ? 'ring-2 ring-primary'
+                  : ''
+              "
+              @click="settings.radius = r"
+            >
+              {{ r }}
+            </Button>
+          </div>
+        </div>
+
+        <Separator />
+
+        <div class="space-y-3">
+          <Label for="theme" class="text-xs">Mode</Label>
+
+          <div class="flex justify-around py-1.5 space-x-2">
+            <Button
+              btn="solid-gray block"
+              :class="{ 'ring-2 ring-primary': colorMode.preference === 'system' }"
+              leading="i-radix-icons-desktop"
+              class="px-3"
+              size="xs"
+              label="System"
+              @click="colorMode.preference = 'system'"
+            />
+
+            <Button
+              btn="solid-gray block"
+              :class="{ 'ring-2 ring-primary': colorMode.preference === 'light' }"
+              leading="i-radix-icons-sun"
+              class="px-3"
+              size="xs"
+              label="Light"
+              @click="colorMode.preference = 'light'"
+            />
+
+            <Button
+              btn="solid-gray block"
+              :class="{ 'ring-2 ring-primary': colorMode.preference === 'dark' }"
+              leading="i-radix-icons-moon"
+              class="px-3"
+              size="xs"
+              label="Dark"
+              @click="colorMode.preference = 'dark'"
+            />
           </div>
-        </PopoverPanel>
-      </transition>
-    </Popover>
-  </div>
+        </div>
+
+        <Separator />
+
+        <div class="flex space-x-3">
+          <Button
+            btn="solid-gray block"
+            size="xs"
+            label="Reset"
+            leading="i-radix-icons-reload"
+            @click="reset"
+          />
+          <Button
+            btn="solid block"
+            class="transition"
+            label="Shuffle"
+            leading="i-lucide-paintbrush"
+            :una="{
+              btnLeading: value ? 'rotate-6 transform' : '-rotate-6',
+            }"
+            @click="shuffleTheme"
+          />
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
 </template>