@una-ui/nuxt 0.3.0-beta.1 → 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.3.0-beta.1",
+  "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.3.0-beta.1";
+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/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/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>

package/dist/runtime/components/navigation/NavLink.vue

@@ -1,24 +1,52 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { NNavLinkProps } from '../../types'
 import { omitProps } from '../../utils'
+import NButton from '../elements/Button.vue'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<NNavLinkProps>()
+const props = withDefaults(
+  defineProps<NNavLinkProps>(),
+  {
+    navLinkActive: 'text-primary',
+    navLinkInactive: 'text-primary',
+    una: () => ({
+      btnDefaultVariant: '~',
+      navLinkDefaultVariant: 'nav-link-default-variant',
+    }),
+  },
+)
+
+const btnProps = omitProps(props.una, [
+  'navLinkDefaultVariant',
+  'navLink',
+  'navLinkActive',
+  'navLinkInactive',
+])
+
+const navLinkVariants = ['text', 'solid'] as const
+const hasVariant = computed(() => navLinkVariants.some(navLinkVariants => props.navLink?.includes(navLinkVariants)))
+const isBaseVariant = computed(() => props.navLink?.includes('~') || props.una.navLink?.includes('~'))
 </script>
 
 <template>
   <NButton
-    nav-link="~ variant"
-    active-class="nav-link-active"
-    inactive-class="nav-link-inactive"
-    :una="{
-      btnDefaultVariant: '~',
-      ...props.una,
+    :nav-link="navLink"
+    :nav-link-active="navLinkActive"
+    :nav-link-inactive="navLinkInactive"
+    :una="btnProps"
+    class="nav-link"
+    :class="[
+      !hasVariant && !isBaseVariant ? una?.navLinkDefaultVariant : null,
+      { 'btn-reverse': reverse },
+    ]"
+    v-bind="{
+      ...omitProps(props, ['badge', 'una']),
+      ...$attrs,
     }"
-    v-bind="{ ...omitProps(props, ['badge', 'una']), ...$attrs }"
   >
     <template #leading>
       <NIcon

package/dist/runtime/composables/useUnaSettings.d.ts

@@ -0,0 +1 @@
+export declare function useUnaSettings(): any;

package/dist/runtime/composables/useUnaSettings.mjs

@@ -0,0 +1,30 @@
+import { useStorage } from "@vueuse/core";
+import { watchEffect } from "vue";
+import { useUnaThemes } from "./useUnaThemes.mjs";
+import { useAppConfig } from "#imports";
+export function useUnaSettings() {
+  const { una } = useAppConfig();
+  const { getPrimaryColors, getGrayColors } = useUnaThemes();
+  const defaultSettings = {
+    primaryColors: getPrimaryColors(una.primary),
+    grayColors: getGrayColors(una.gray),
+    primary: una.primary,
+    gray: una.gray,
+    fontSize: 16
+  };
+  const settings = useStorage("una-settings", defaultSettings);
+  watchEffect(() => {
+    settings.value.primaryColors = getPrimaryColors(settings.value.primary);
+    settings.value.grayColors = getGrayColors(settings.value.gray);
+  });
+  function reset() {
+    settings.value.primary = defaultSettings.primary;
+    settings.value.gray = defaultSettings.gray;
+    settings.value.fontSize = defaultSettings.fontSize;
+  }
+  return {
+    defaultSettings,
+    settings,
+    reset
+  };
+}

package/dist/runtime/composables/useUnaThemes.d.ts

@@ -0,0 +1,7 @@
+import type { Colors } from '../types';
+export declare function useUnaThemes(): {
+    primaryThemes: [string, Colors][];
+    grayThemes: [string, Colors][];
+    getPrimaryColors: (color: string) => Colors;
+    getGrayColors: (color: string) => Colors;
+};

package/dist/runtime/composables/{themes.mjs → useUnaThemes.mjs}

@@ -99,21 +99,35 @@ const filteredColors = {
   ...filteredPrimaryColors,
   ...filteredGrayColors
 };
-export function getColors(color, prefix) {
-  const colorPalette = filteredColors[color];
-  if (!colorPalette)
-    throw new Error(`Invalid primary color: ${color}`);
-  const colors2 = {};
-  colors2[`--una-${prefix}-hex`] = colorPalette[600];
-  for (const shade of Object.keys(colorPalette))
-    colors2[`--una-${prefix}-${shade}`] = hexToRgb(colorPalette[shade]).join(", ");
-  return colors2;
+export function useUnaThemes() {
+  const primaryThemes = Object.entries(filteredPrimaryColors).map(([color]) => [
+    color,
+    getColors(color, "primary")
+  ]);
+  const grayThemes = Object.entries(filteredGrayColors).map(([color]) => [
+    color,
+    getColors(color, "gray")
+  ]);
+  function getColors(color, prefix) {
+    const colorPalette = filteredColors[color];
+    if (!colorPalette)
+      throw new Error(`Invalid primary color: ${color}`);
+    const colors2 = {};
+    colors2[`--una-${prefix}-hex`] = colorPalette[600];
+    for (const shade of Object.keys(colorPalette))
+      colors2[`--una-${prefix}-${shade}`] = hexToRgb(colorPalette[shade]).join(", ");
+    return colors2;
+  }
+  function getPrimaryColors(color) {
+    return primaryThemes.filter(([colorName, _]) => colorName === color)[0][1];
+  }
+  function getGrayColors(color) {
+    return grayThemes.filter(([colorName, _]) => colorName === color)[0][1];
+  }
+  return {
+    primaryThemes,
+    grayThemes,
+    getPrimaryColors,
+    getGrayColors
+  };
 }
-export const primaryThemes = Object.entries(filteredPrimaryColors).map(([color]) => [
-  color,
-  getColors(color, "primary")
-]);
-export const grayThemes = Object.entries(filteredGrayColors).map(([color]) => [
-  color,
-  getColors(color, "gray")
-]);

package/dist/runtime/plugins/theme.client.d.ts

@@ -1,5 +1,2 @@
-export interface ThemeColors {
-    [key: string]: string;
-}
 declare const _default: any;
 export default _default;