@una-ui/nuxt 0.1.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 <https://github.com/phojie>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# 🌼 Una-UI
+
+ > **Warning**: This project is heavily working in progress.
+
+## 📌 Todo
+
+- [ ] Playground
+- [ ] Docs
+- [ ] Style Presets
+- [ ] UI-Components
+- [ ] Nuxt 3 modules
+
+<!-- [![NPM version](https://img.shields.io/npm/v/jieui?color=a1b858&label=)](https://www.npmjs.com/package/@una-ui) -->
+
+<!-- ## Sponsors -->
+
+<!-- <p align="center">
+</p> -->
+
+## 🏛️ License
+
+[MIT](./LICENSE) License © 2023 [Phojie](https://github.com/phojie)

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -0,0 +1,31 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * @default 'N'
+     */
+    prefix?: string;
+    /**
+     * @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
+     */
+    dev: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { ModuleOptions, _default as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -0,0 +1,93 @@
+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';
+
+const name = "@una-ui/nuxt";
+const version = "0.1.0-beta.1";
+
+function extendUnocssOptions(user = {}) {
+  return {
+    ...user,
+    preflight: false,
+    presets: [
+      presetUno({
+        // attributifyPseudo: true,
+      }),
+      presetAttributify(),
+      presetIcons({
+        scale: 1.2,
+        extraProperties: {
+          "display": "inline-block",
+          "vertical-align": "middle"
+        }
+      }),
+      presetUna(),
+      ...user.presets || []
+    ],
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup()
+    ]
+  };
+}
+
+function rPath(p) {
+  return fileURLToPath(new URL(p, import.meta.url).toString());
+}
+const module = defineNuxtModule({
+  meta: {
+    name,
+    configKey: "una",
+    version,
+    compatibility: {
+      nuxt: "^3.0.0-rc.8"
+    }
+  },
+  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("@unocss/reset/tailwind-compat.css");
+    nuxt.options.css.unshift("@una-ui/preset/una.css");
+    const runtimeDir = resolve("./runtime");
+    nuxt.options.build.transpile.push(runtimeDir);
+    nuxt.options.build.transpile.push("@headlessui/vue");
+    addComponentsDir({
+      path: resolve(runtimeDir, "components", "elements"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev
+    });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components", "forms"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev
+    });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components", "misc"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev
+    });
+    if (options.themeable) {
+      addPlugin(resolve(runtimeDir, "plugins", "theme.client"));
+      addPlugin(resolve(runtimeDir, "plugins", "theme.server"));
+    }
+    if (!options.dev)
+      nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss);
+    await installModule("@unocss/nuxt");
+    await installModule("@nuxtjs/color-mode", {
+      classSuffix: ""
+    });
+    await installModule("@vueuse/nuxt");
+  }
+});
+
+export { module as default };

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

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@headlessui/vue'
+import { createReusableTemplate } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import type { NAccordionItemProps, NAccordionProps } from '../../types'
+import { pickProps } from '../../utils'
+import NIcon from './Icon.vue'
+import NButton from './Button.vue'
+
+const props = withDefaults(defineProps<NAccordionProps>(), {
+  trailingOpen: 'accordion-trailing-icon',
+  loadingPlacement: 'trailing',
+})
+
+const buttonRefs = ref<(() => void)[]>([])
+
+function closeOthers(index: number) {
+  if (props.multiple && !props.items[index].closeOthers)
+    return
+
+  buttonRefs.value
+    .filter((_, i) => i !== index)
+    .forEach(close => close())
+}
+
+function onEnter(element: Element, done: () => void) {
+  const el = element as HTMLElement
+  el.style.height = '0'
+  el.style.height = `${element.scrollHeight}px`
+  el.addEventListener('transitionend', done, { once: true })
+}
+
+function onAfterEnter(element: Element) {
+  const el = element as HTMLElement
+  el.style.height = 'auto'
+}
+
+function onBeforeLeave(element: Element) {
+  const el = element as HTMLElement
+  el.style.height = `${el.scrollHeight}px`
+}
+
+function onLeave(element: Element, done: () => void) {
+  const el = element as HTMLElement
+  el.style.height = '0'
+
+  el.addEventListener('transitionend', done, { once: true })
+}
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
+  item: NAccordionItemProps
+  index: number
+  open: boolean
+  close: () => void
+}>()
+
+// TODO: optimized this one
+function mergedProps(itemProps: NAccordionItemProps) {
+  return Object.assign(pickProps(props, ['reverse', 'icon', 'btn', 'label', 'leading', 'loading', 'loadingPlacement', 'una', 'trailing', 'leading', 'to', 'type', 'disabled']), itemProps)
+}
+
+// TODO: refactor this to sync with NButton variants
+const btnVariants = ['solid', 'outline', 'soft', 'ghost', 'link', 'text'] as const
+const hasVariant = computed(() => btnVariants.some(btnVariants => props.btn?.includes(btnVariants)))
+const isBaseVariant = computed(() => props.btn?.includes('~'))
+</script>
+
+<template>
+  <div
+    :accordion="accordion"
+    class="accordion"
+    :class="[
+      unstyle ? 'space-y-3' : 'accordion-(border divider)',
+      una?.accordion,
+    ]"
+  >
+    <DefineTemplate v-slot="{ item, close, index, open }">
+      <slot
+        :name="item.content ? 'content' : index"
+        :item="item" :index="index" :open="open" :close="close"
+      >
+        <div
+          accordion="panel"
+          :class="[
+            una?.accordionPanel,
+            { 'border-t-0': unstyle },
+          ]"
+        >
+          {{ item.content }}
+        </div>
+      </slot>
+    </DefineTemplate>
+
+    <Disclosure
+      v-for="(item, i) in items"
+      :key="i"
+      v-slot="{ open, close }"
+      as="div"
+      accordion="item"
+      :default-open="item.defaultOpen ?? defaultOpen"
+      :class="una?.accordionItem"
+    >
+      <DisclosureButton
+        :ref="() => (buttonRefs[i] = close)"
+        as="template"
+        :disabled="item.disabled ?? disabled"
+        @click="closeOthers(i)"
+      >
+        <slot name="label" :item="item" :index="i" :open="open" :close="close">
+          <NButton
+            v-bind="mergedProps(item)"
+            :btn="`~ block ${btn ?? ''}`"
+            :class="[
+              { 'accordion-button-default-variant': !hasVariant && !isBaseVariant },
+              { 'accordion-button-padding': !unstyle },
+              una?.accordionButton,
+            ]"
+            accordion="button"
+            :una="{
+              btnLabel: 'accordion-label',
+            }"
+          >
+            <template #leading>
+              <!-- TODO: fix conditional statement -->
+              <NIcon
+                v-if="leading || item.leading"
+                accordion="leading"
+                :class="una?.accordionLeading"
+                :name="item.leading ?? leading ?? ''"
+                aria-hidden="true"
+              />
+            </template>
+
+            <template #trailing>
+              <span
+                v-if="trailingOpen || trailingClose"
+                accordion="trailing"
+                :class="[
+                  trailingClose || (!trailingClose && open)
+                    ? una?.accordionTrailingClose ?? 'accordion-trailing-close'
+                    : una?.accordionTrailingOpen ?? 'accordion-trailing-open',
+                  una?.accordionTrailing,
+                ]"
+              >
+                <NIcon
+                  v-if="(open || !trailingClose) && trailingOpen"
+                  :name="trailingOpen"
+                  aria-hidden="true"
+                />
+                <NIcon
+                  v-else-if="!open && trailingClose"
+                  :name="trailingClose"
+                  aria-hidden="true"
+                />
+              </span>
+            </template>
+          </NButton>
+        </slot>
+      </DisclosureButton>
+
+      <Transition
+        :enter-active-class="una?.accordionLeaveActive ?? 'accordion-leave-active'"
+        :leave-active-class="una?.accordionEnterActive ?? 'accordion-enter-active'"
+        @enter="onEnter"
+        @after-enter="onAfterEnter"
+        @before-leave="onBeforeLeave"
+        @leave="onLeave"
+      >
+        <DisclosurePanel v-if="!item.mounted ?? !mounted">
+          <ReuseTemplate
+            v-bind="{
+              item,
+              index: i,
+              open,
+              close,
+            }"
+          />
+        </DisclosurePanel>
+        <DisclosurePanel
+          v-else
+          v-show="open"
+          static
+        >
+          <ReuseTemplate
+            v-bind="{
+              item,
+              index: i,
+              open,
+              close,
+            }"
+          />
+        </DisclosurePanel>
+      </Transition>
+    </Disclosure>
+  </div>
+</template>

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

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { NAlertProps } from '../../types'
+import NIcon from '../elements/Icon.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NAlertProps>(), {
+  icon: false,
+})
+
+const emit = defineEmits<{ (...args: any): void }>()
+
+const slots = defineSlots<{
+  default?: any
+  title?: any
+  description?: any
+  icon?: any
+  closeIcon?: any
+}>()
+
+const alertVariants = ['soft', 'outline', 'border'] as const
+const hasVariant = computed(() => alertVariants.some(alertVariants => props.alert?.includes(alertVariants)))
+const isBaseVariant = computed(() => props.alert?.includes('~'))
+
+const alertClassVariants = computed(() => {
+  const icon = {
+    info: 'alert-info-icon',
+    success: 'alert-success-icon',
+    warning: 'alert-warning-icon',
+    error: 'alert-error-icon',
+    default: '',
+  }
+
+  // TODO: simplify and optimize this
+  const alertType = props.alert ? (props.alert.includes('info') ? 'info' : (props.alert.includes('success') ? 'success' : (props.alert.includes('warning') ? 'warning' : (props.alert.includes('error') ? 'error' : 'default')))) : 'default'
+
+  return {
+    icon: icon[alertType],
+  }
+})
+
+const icon = computed(() => {
+  if (props.icon === '' || props.icon === undefined || props.icon === true)
+    return alertClassVariants.value.icon
+
+  return props.icon.toString()
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :alert="alert"
+    class="alert"
+    :class="[
+      { 'alert-default-variant': !hasVariant && !isBaseVariant },
+      una?.alert,
+    ]"
+  >
+    <div
+      alert="inner-wrapper"
+      :class="una?.alertInnerWrapper"
+    >
+      <div
+        v-if="props.icon !== false"
+        alert="icon-wrapper"
+        :class="una?.alertIconWrapper"
+      >
+        <slot name="icon">
+          <NIcon
+            alert="icon-base"
+            :name="icon"
+            aria-hidden="true"
+          />
+        </slot>
+      </div>
+
+      <slot>
+        <div
+          alert="content-wrapper"
+          :class="una?.alertContentWrapper"
+        >
+          <div
+            v-if="slots.title || title"
+            alert="title"
+            :class="una?.alertTitle"
+          >
+            <slot name="title">
+              <h3>
+                {{ title }}
+              </h3>
+            </slot>
+          </div>
+          <div
+            v-if="slots.description || description"
+            alert="description"
+            :class="una?.alertDescription"
+          >
+            <slot name="description">
+              <p>
+                {{ description }}
+              </p>
+            </slot>
+          </div>
+        </div>
+      </slot>
+
+      <div
+        v-if="slots.closeIcon || closable"
+        alert="close-wrapper"
+        :class="una?.alertCloseWrapper"
+      >
+        <div
+          alert="close-inner-wrapper"
+          :class="una?.alertCloseInnerWrapper"
+        >
+          <NButton
+            alert="close"
+            :class="una?.alertClose"
+            btn="~ square"
+            @click="emit('close')"
+          >
+            <slot name="closeIcon">
+              <NIcon
+                :class="`${una?.alertCloseIconBase} alert-close-icon-base`"
+                :name="una?.alertCloseIcon ?? 'alert-close-icon'"
+                aria-hidden="true"
+              />
+            </slot>
+          </NButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { useImage } from '@vueuse/core'
+import { computed } from 'vue'
+import type { NAvatarProps } from '../../types'
+
+const props = withDefaults(defineProps<NAvatarProps>(), {
+  delay: 0,
+})
+
+const { isLoading, error, isReady } = useImage({ src: props?.src ?? '' }, { delay: props.delay })
+
+const avatarVariants = ['solid', 'soft', 'outline'] as const
+const hasVariant = computed(() => avatarVariants.some(avatarVariants => props.avatar?.includes(avatarVariants)))
+const isBaseVariant = computed(() => props.avatar?.includes('~'))
+
+const placeholder = computed(() => {
+  if (props.label)
+    return props.label
+
+  return props.alt?.split(' ').map(word => word[0]).join('').slice(0, 2)
+})
+</script>
+
+<template>
+  <span
+    :avatar="avatar"
+    class="avatar"
+    :class="[
+      { 'avatar-default-variant': !hasVariant && !isBaseVariant },
+      { 'animate-pulse': isLoading && skeleton && src },
+      una?.avatar,
+    ]"
+  >
+    <template v-if="!icon">
+      <slot
+        v-if="!skeleton"
+        v-bind="{ isLoading, error, isReady, ...props }"
+      >
+        <img
+          v-if="isReady && !error"
+          avatar="src"
+          :src="src"
+          :alt="alt"
+          :class="una?.avatarSrc"
+        >
+
+        <img
+          v-else-if="fallback"
+          avatar="src"
+          :src="fallback"
+          :alt="alt ?? 'avatar'"
+          :class="una?.avatarFallback"
+        >
+
+        <span
+          v-else-if="placeholder"
+          avatar="label"
+          :class="una?.avatarLabel"
+        >
+          {{ placeholder }}
+        </span>
+
+        <NIcon
+          v-else
+          avatar="fallback-icon-base"
+          :name="una?.avatarFallbackIcon ?? 'avatar-fallback-icon'"
+          :class="una?.avatarFallbackIcon"
+        />
+      </slot>
+    </template>
+
+    <template v-else>
+      <NIcon
+        avatar="icon-base"
+        :class="una?.avatarIconBase"
+        :name="icon"
+      />
+    </template>
+  </span>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { NAvatarGroupProps } from '../../types'
+import NAvatarGroupDefaultSlot from '../slots/AvatarGroupDefault'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NAvatarGroupProps>(), {
+  max: 3,
+})
+</script>
+
+<template>
+  <div
+    avatar-group
+    v-bind="$attrs"
+    :class="una?.avatarGroup"
+  >
+    <NAvatarGroupDefaultSlot
+      :max="max"
+      :avatar="props"
+    >
+      <slot />
+    </NAvatarGroupDefaultSlot>
+  </div>
+</template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { NBadgeProps } from '../../types'
+import NIcon from './Icon.vue'
+
+const props = defineProps<NBadgeProps>()
+
+const emit = defineEmits<{ (...args: any): void }>()
+
+const badgeVariants = ['solid', 'soft', 'outline'] as const
+const hasVariant = computed(() => badgeVariants.some(badgeVariants => props.badge?.includes(badgeVariants)))
+const isBaseVariant = computed(() => props.badge?.includes('~'))
+</script>
+
+<template>
+  <span
+    :badge="badge"
+    class="badge"
+    :class="[
+      { 'badge-default-variant': !hasVariant && !isBaseVariant },
+      una?.badge,
+    ]"
+  >
+    <NIcon
+      v-if="icon"
+      badge="icon-base"
+      :class="una?.badgeIconBase"
+      :name="icon"
+    />
+
+    <slot>
+      {{ label }}
+    </slot>
+
+    <button
+      v-if="closable"
+      badge="close"
+      :class="una?.badgeClose"
+      group
+      @click="emit('close')"
+    >
+      <NIcon
+        :name="una?.badgeCloseIcon ?? 'badge-close-icon'"
+        :class="una?.badgeCloseIconBase"
+        badge="close-icon-base"
+      />
+      <span class="absolute -inset-0.25em" />
+    </button>
+  </span>
+</template>