@una-ui/nuxt 0.2.0-beta.6 → 0.4.0-beta.0

package/README.md

@@ -1,6 +1,7 @@
 # ✨ Una UI
 
-> **Warning**: This project is heavily working in progress.
+> [!WARNING]  
+> This project is heavily working in progress.
 
 ## 🏗️ Release Status
 
@@ -13,6 +14,14 @@
 
 Visit https://www.unaui.com for full documentation.
 
+## 🌻 Sponsors
+
+<p align="center">
+  <a href="https://cdn.jsdelivr.net/gh/phojie/static/sponsors.svg">
+    <img src='https://cdn.jsdelivr.net/gh/phojie/static/sponsors.svg'/>
+  </a>
+</p>
+
 ## 🏛️ License
 
 [MIT](./LICENSE) License © 2023 [Phojie](https://github.com/phojie)

package/dist/module.d.mts

@@ -0,0 +1,35 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface UnaOptions {
+    primary?: string;
+    gray?: string;
+}
+declare module '@nuxt/schema' {
+    interface AppConfigInput {
+        una?: UnaOptions;
+    }
+}
+interface ModuleOptions {
+    /**
+     * @default 'N'
+     */
+    prefix?: string;
+    /**
+     * @default true
+     * @description Enable themeable ui
+     *
+     */
+    themeable?: boolean;
+    /**
+     * @default true
+     * @description Register components globally
+     */
+    global?: boolean;
+    /**
+     * @default false
+     */
+    dev: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -1,5 +1,14 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
+interface UnaOptions {
+    primary?: string;
+    gray?: string;
+}
+declare module '@nuxt/schema' {
+    interface AppConfigInput {
+        una?: UnaOptions;
+    }
+}
 interface ModuleOptions {
     /**
      * @default 'N'
@@ -9,18 +18,13 @@ interface ModuleOptions {
      * @default true
      * @description Enable themeable ui
      *
-    */
+     */
     themeable?: boolean;
     /**
      * @default true
      * @description Register components globally
      */
     global?: boolean;
-    /**
-     * @default '@una-ui/preset'
-     * @description Path to preset
-     */
-    preset?: string;
     /**
      * @default false
      */
@@ -28,4 +32,4 @@ interface ModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { ModuleOptions, _default as default };
+export { type ModuleOptions, _default as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -1,45 +1,13 @@
-import { fileURLToPath } from 'node:url';
-import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, installModule } from '@nuxt/kit';
-import { presetUno, presetAttributify, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';
-import presetUna from '@una-ui/preset';
-import prefixes from '@una-ui/preset/prefixes';
-import extratorUna from '@una-ui/extractor-vue-script';
+import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, installModule, addImportsDir } from '@nuxt/kit';
+import extendUnocssOptions from './una.config.mjs';
+import 'unocss';
+import '@una-ui/preset';
+import '@una-ui/preset/prefixes';
+import '@una-ui/extractor-vue-script';
 
 const name = "@una-ui/nuxt";
-const version = "0.2.0-beta.6";
+const version = "0.4.0-beta.0";
 
-function extendUnocssOptions(user = {}) {
-  return {
-    ...user,
-    preflight: false,
-    presets: [
-      presetUno(),
-      presetAttributify(),
-      presetIcons({
-        scale: 1.2,
-        extraProperties: {
-          "display": "inline-block",
-          "vertical-align": "middle"
-        }
-      }),
-      presetUna(),
-      ...user.presets || []
-    ],
-    extractors: [
-      extratorUna({
-        prefixes
-      })
-    ],
-    transformers: [
-      transformerDirectives(),
-      transformerVariantGroup()
-    ]
-  };
-}
-
-function rPath(p) {
-  return fileURLToPath(new URL(p, import.meta.url).toString());
-}
 const module = defineNuxtModule({
   meta: {
     name,
@@ -52,13 +20,16 @@ const module = defineNuxtModule({
   defaults: {
     prefix: "N",
     themeable: true,
-    preset: rPath("./preset"),
     global: true,
     dev: false
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     nuxt.options.css.unshift("@una-ui/preset/una.css");
+    nuxt.options.appConfig.una = {
+      primary: "yellow",
+      gray: "stone"
+    };
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
     nuxt.options.build.transpile.push("@headlessui/vue");
@@ -97,6 +68,7 @@ const module = defineNuxtModule({
       classSuffix: ""
     });
     await installModule("@vueuse/nuxt");
+    addImportsDir(resolve(runtimeDir, "composables"));
   }
 });
 

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

@@ -23,6 +23,15 @@ export default defineComponent({
     inactiveClass: {
       type: String,
       default: void 0
+    },
+    // preset
+    navLinkActive: {
+      type: String,
+      default: void 0
+    },
+    navLinkInactive: {
+      type: String,
+      default: void 0
     }
   },
   setup(props) {
@@ -37,8 +46,30 @@ export default defineComponent({
         return props.activeClass;
       return props.inactiveClass;
     }
+    function resolveNavLinkActive(route, $route, { isActive, isExactActive }) {
+      if (props.exactQuery && !isEqual(route.query, $route.query))
+        return null;
+      if (props.exactHash && !isEqual(route.hash, $route.hash))
+        return null;
+      if (props.exact && isExactActive)
+        return props.navLinkActive;
+      if (!props.exact && isActive)
+        return props.navLinkActive;
+      return null;
+    }
+    function resolveNavLinkInactive(route, $route, { isActive, isExactActive }) {
+      if (props.exactQuery && !isEqual(route.query, $route.query))
+        return props.navLinkInactive;
+      if (props.exactHash && !isEqual(route.hash, $route.hash))
+        return props.navLinkInactive;
+      if (!props.exact && isActive || props.exact && isExactActive)
+        return null;
+      return props.navLinkInactive;
+    }
     return {
-      resolveLinkClass
+      resolveLinkClass,
+      resolveNavLinkActive,
+      resolveNavLinkInactive
     };
   }
 });
@@ -48,16 +79,16 @@ export default defineComponent({
   <NuxtLink
     v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }"
     v-bind="$props"
-    class="link"
     custom
   >
     <a
       v-bind="$attrs"
       :href="href"
       :rel="rel"
-      class="link"
       :target="target"
       :class="resolveLinkClass(route, $route, { isActive, isExactActive })"
+      :nav-link-active="resolveNavLinkActive(route, $route, { isActive, isExactActive })"
+      :nav-link-inactive="resolveNavLinkInactive(route, $route, { isActive, isExactActive })"
       @click="(e) => !isExternal && navigate(e)"
     >
       <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />

package/dist/runtime/components/elements/Link.vue.d.ts

@@ -3,6 +3,14 @@ declare const _default: import("vue").DefineComponent<any, {
         isActive: boolean;
         isExactActive: boolean;
     }) => any;
+    resolveNavLinkActive: (route: any, $route: any, { isActive, isExactActive }: {
+        isActive: boolean;
+        isExactActive: boolean;
+    }) => any;
+    resolveNavLinkInactive: (route: any, $route: any, { isActive, isExactActive }: {
+        isActive: boolean;
+        isExactActive: boolean;
+    }) => any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<any>, {} | {
     [x: string]: any;
 }, {}>;

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/Input.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import NIcon from '../elements/Icon.vue'
 import type { NInputProps } from '../../types'
 import { randomId } from '../../utils'
@@ -11,6 +10,8 @@ defineOptions({
 
 const props = withDefaults(defineProps<NInputProps>(), {
   type: 'text',
+  resize: 'none',
+  rows: 3,
 })
 
 const emit = defineEmits<{ (...args: any): void }>()
@@ -20,8 +21,6 @@ const slots = defineSlots<{
   trailing?: any
 }>()
 
-const inputValue = useVModel(props, 'modelValue', emit, { passive: true })
-
 const id = computed(() => props.id ?? randomId('input'))
 
 const isLeading = computed(() => props.leading || slots.leading)
@@ -75,6 +74,41 @@ const reverseClassVariants = computed(() => {
     trailingWrapper: props.reverse ? 'input-leading-wrapper' : 'input-trailing-wrapper',
   }
 })
+
+// html refs
+const textarea = ref<HTMLTextAreaElement>()
+
+function resizeTextarea() {
+  if (!(props.type === 'textarea' && props.autoresize) || !textarea.value)
+    return
+
+  textarea.value.rows = props.rows
+
+  const styles = window.getComputedStyle(textarea.value)
+  const paddingTop = Number.parseInt(styles.paddingTop)
+  const paddingBottom = Number.parseInt(styles.paddingBottom)
+  const padding = paddingTop + paddingBottom
+  const lineHeight = Number.parseInt(styles.lineHeight)
+  const { scrollHeight } = textarea.value
+  const newRows = (scrollHeight - padding) / lineHeight
+
+  if (newRows > props.rows)
+    textarea.value.rows = newRows
+
+  const maxAutoresizeRows = typeof props.autoresize === 'number' ? props.autoresize : Number.POSITIVE_INFINITY
+  if (textarea.value.rows > maxAutoresizeRows)
+    textarea.value.rows = maxAutoresizeRows
+}
+
+function onInput(event: Event) {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+
+  resizeTextarea()
+}
+
+onMounted(() => {
+  resizeTextarea()
+})
 </script>
 
 <template>
@@ -102,10 +136,12 @@ const reverseClassVariants = computed(() => {
       </slot>
     </div>
 
-    <input
+    <Component
+      :is="props.type !== 'textarea' ? 'input' : 'textarea'"
       :id="id"
-      v-model="inputValue"
-      :type="type"
+      ref="textarea"
+      :value="modelValue"
+      :type="props.type !== 'textarea' ? props.type : undefined"
       class="input"
       :class="[
         statusClassVariants.input,
@@ -113,8 +149,12 @@ const reverseClassVariants = computed(() => {
         una?.input,
       ]"
       :input="input"
+      :resize="type === 'textarea' ? resize : undefined"
+      :rows="type === 'textarea' ? rows : undefined"
+      :cols="type === 'textarea' ? cols : undefined"
       v-bind="$attrs"
-    >
+      @input="onInput"
+    />
 
     <div
       v-if="isTrailing"
@@ -132,7 +172,7 @@ const reverseClassVariants = computed(() => {
       />
 
       <NIcon
-        v-if="status"
+        v-else-if="status"
         input="status-icon-base"
         :name="statusClassVariants.icon"
       />

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/components/misc/ThemeSwitcher.vue

@@ -1,51 +1,42 @@
 <script setup lang="ts">
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import { useStorage, useToggle } from '@vueuse/core'
+import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
-import { grayThemes, primaryThemes } from '../../composables/themes'
+import { useUnaThemes } from '../../composables/useUnaThemes'
+import { useUnaSettings } from '../../composables/useUnaSettings'
+import NButton from '../elements/Button.vue'
 
-// TODO: globalize
-export interface ThemeColors {
-  [key: string]: string
-}
+const { primaryThemes, grayThemes } = useUnaThemes()
 
-// TODO: confingurable in the app.config
-const defaultSettings = {
-  primaryColors: primaryThemes.filter(([colorName, _]) => colorName === 'yellow')[0][1],
-  grayColors: grayThemes.filter(([colorName, _]) => colorName === 'stone')[0][1],
-  fontSize: 16,
-}
+const { settings, reset } = useUnaSettings()
 
-const settings = useStorage('una-settings', defaultSettings)
+const currentPrimaryThemeHex = computed(() => settings.value.primaryColors?.['--una-primary-hex'])
 
-// use yellow primary theme as default
-const currentPrimaryTheme = computed(() => settings.value.primaryColors?.['--una-primary-hex'])
-// get current theme name
 const currentPrimaryThemeName = computed(() => {
-  const theme = primaryThemes.find(([, theme]) => theme['--una-primary-hex'] === currentPrimaryTheme.value)
+  const theme = primaryThemes.find(([, theme]) => theme['--una-primary-hex'] === currentPrimaryThemeHex.value)
   return theme ? theme[0] : ''
 })
 
-// use stone primary theme as default
-const currentGrayTheme = computed(() => settings.value.grayColors?.['--una-gray-hex'])
-// get current theme name
+const currentGrayThemeHex = computed(() => settings.value.grayColors?.['--una-gray-hex'])
+
 const currentGrayThemeName = computed(() => {
-  const theme = grayThemes.find(([, theme]) => theme['--una-gray-hex'] === currentGrayTheme.value)
+  const theme = grayThemes.find(([, theme]) => theme['--una-gray-hex'] === currentGrayThemeHex.value)
   return theme ? theme[0] : ''
 })
 
 // update theme in storage
-function updatePrimaryTheme(theme: ThemeColors) {
-  settings.value.primaryColors = theme
+function updatePrimaryTheme(theme: string) {
+  settings.value.primary = theme
 }
-function updateGrayTheme(theme: ThemeColors) {
-  settings.value.grayColors = theme
+
+function updateGrayTheme(theme: string) {
+  settings.value.gray = theme
 }
 
 const [value, toggle] = useToggle()
 function shuffleTheme() {
-  const randomPrimaryTheme = primaryThemes[Math.floor(Math.random() * primaryThemes.length)][1]
-  const randomGrayTheme = grayThemes[Math.floor(Math.random() * grayThemes.length)][1]
+  const randomPrimaryTheme = primaryThemes[Math.floor(Math.random() * primaryThemes.length)][0]
+  const randomGrayTheme = grayThemes[Math.floor(Math.random() * grayThemes.length)][0]
   updatePrimaryTheme(randomPrimaryTheme)
   updateGrayTheme(randomGrayTheme)
   toggle()
@@ -53,11 +44,12 @@ function shuffleTheme() {
 </script>
 
 <template>
-  <div class="sm:ml-5">
+  <div>
     <Popover class="relative inline-block">
       <PopoverButton
         btn="~ square soft"
         class="rounded-lg"
+        aria-label="Theme"
       >
         <span i-heroicons-swatch-20-solid text-md />
       </PopoverButton>
@@ -72,7 +64,8 @@ function shuffleTheme() {
                 :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"
-                @click="updatePrimaryTheme(theme)"
+                aria-label="Primary Color"
+                @click="updatePrimaryTheme(key)"
               />
             </div>
 
@@ -85,24 +78,34 @@ function shuffleTheme() {
                 :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(theme)"
+                @click="updateGrayTheme(key)"
               />
             </div>
 
             <hr class="my-2 border-$c-divider">
 
-            <button
-              btn="~ solid block"
-              class="rounded-lg transition"
-              @click="shuffleTheme"
-            >
-              Shuffle
-              <span
-                i-heroicons-adjustments-horizontal-20-solid ml-2
-                :class="value ? 'rotate-180 transform' : 'rotate-0'"
+            <div class="flex space-x-3">
+              <NButton
+                btn="~ solid block"
+                class="transition"
+                label="Shuffle"
+                leading="i-heroicons-adjustments-horizontal-solid"
+                :una="{
+                  btnLeading: value ? 'rotate-180 transform' : 'rotate-0',
+                }"
+                @click="shuffleTheme"
               />
-            </button>
+
+              <NButton
+                btn="~ solid-gray"
+                size="xs"
+                icon
+                label="i-heroicons-arrow-uturn-left"
+                @click="reset"
+              />
+            </div>
           </div>
         </PopoverPanel>
       </transition>