@una-ui/nuxt 0.1.0-beta.1

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { createReusableTemplate } from '@vueuse/core'
+import NIcon from '../elements/Icon.vue'
+import type { NButtonProps } from '../../types'
+
+// @ts-expect-error tsconfig
+import { NuxtLink } from '#components'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NButtonProps>(), {
+  type: 'button',
+  loadingPlacement: 'leading',
+})
+
+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('~'))
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <Component
+    :is="to ? NuxtLink : 'button'"
+    :to="to"
+    :type="to ? null : type"
+    class="btn"
+    :class="[
+      { 'btn-default-variant': !hasVariant && !isBaseVariant },
+      { 'btn-reverse': reverse },
+      una?.btn,
+    ]"
+    :disabled="to ? null : disabled || loading"
+    :btn="btn"
+    v-bind="$attrs"
+  >
+    <DefineTemplate v-if="loading">
+      <slot name="loading">
+        <NIcon
+          :name="una?.btnLoadingIcon ?? 'btn-loading-icon'"
+          :class="una?.btnLoading"
+          btn="loading"
+        />
+      </slot>
+    </DefineTemplate>
+
+    <ReuseTemplate v-if="loading && loadingPlacement === 'leading'" />
+    <slot
+      v-else
+      name="leading"
+    >
+      <NIcon
+        v-if="leading"
+        :name="leading"
+        :class="una?.btnLeading"
+        btn="leading"
+      />
+    </slot>
+
+    <ReuseTemplate v-if="loading && loadingPlacement === 'label'" />
+    <slot v-else>
+      <NIcon
+        v-if="label && icon"
+        :name="label"
+        btn="icon-label"
+        :class="una?.btnIconLabel"
+      />
+      <span
+        v-if="!icon"
+        btn="label"
+        :class="una?.btnLabel"
+      >
+        {{ label }}
+      </span>
+    </slot>
+
+    <ReuseTemplate v-if="loading && loadingPlacement === 'trailing'" />
+    <slot
+      v-else
+      name="trailing"
+    >
+      <NIcon
+        v-if="trailing"
+        :name="trailing"
+        :class="una?.btnLeading"
+        btn="trailing"
+      />
+    </slot>
+  </Component>
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { NIconProps } from '../../types'
+
+defineProps<NIconProps>()
+</script>
+
+<template>
+  <span icon-base :class="name" />
+</template>

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { createReusableTemplate } from '@vueuse/core'
+import type { NIndicatorProps } from '../../types'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NIndicatorProps>(), {
+  visible: true,
+})
+
+const indicatorPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const
+const hasPlacement = computed(() => indicatorPlacements.some(indicatorPlacements => props.indicator?.includes(indicatorPlacements)))
+
+const indicatorVariants = ['solid'] as const
+const hasVariant = computed(() => indicatorVariants.some(indicatorVariants => props.indicator?.includes(indicatorVariants)))
+
+const isBaseVariant = computed(() => props.indicator?.includes('~'))
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
+  ping?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    indicator="wrapper"
+    :class="una?.indicatorWrapper"
+  >
+    <slot />
+
+    <span v-if="visible" :size="size">
+      <DefineTemplate v-slot="{ ping }">
+        <slot name="indicator">
+          <span
+            v-bind="$attrs"
+            :indicator="indicator"
+            class="indicator whitespace-nowrap"
+            :class="[
+              { 'indicator-default-placement': !hasPlacement },
+              { 'indicator-default-variant': !hasVariant && !isBaseVariant },
+              { 'animate-ping ring-none': ping },
+              !label ? 'indicator-dot' : 'indicator-label',
+              una?.indicator,
+            ]"
+          >
+            <slot name="label">
+              {{ label }}
+            </slot>
+          </span>
+        </slot>
+      </DefineTemplate>
+
+      <ReuseTemplate :ping="ping" />
+      <ReuseTemplate />
+    </span>
+  </div>
+</template>

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

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { NFormGroupProps } from '../../types'
+import NFormGroupDefaultSlot from '../slots/FormGroupDefault'
+import { randomId } from '../../utils'
+
+const props = defineProps<NFormGroupProps>()
+
+const id = randomId('form-group')
+
+const statusClassVariants = computed(() => {
+  const text = {
+    info: 'text-info',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error',
+    default: 'text-$c-gray-500',
+  }
+
+  return text[props.status ?? 'default']
+})
+</script>
+
+<template>
+  <div
+    form-group
+  >
+    <slot name="top">
+      <div
+        form-group="message-wrapper"
+        :class="una?.formGroupMessageWrapper"
+      >
+        <div
+          v-if="label || hint || description"
+          form-group="top-wrapper"
+          :class="una?.formGroupTopWrapper"
+        >
+          <div
+            v-if="label || hint"
+            form-group="top-wrapper-inner"
+            :class="una?.formGroupTopWrapperInner"
+          >
+            <slot name="label">
+              <label
+                v-if="label"
+                :for="name ?? id"
+                form-group="label-wrapper"
+                :class="una?.formGroupLabelWrapper"
+              >
+                <span
+                  form-group="label"
+                  :class="una?.formGroupLabel"
+                >
+                  {{ label }}
+                </span>
+                <span
+                  v-if="required"
+                  form-group="label-required"
+                  :class="una?.formGroupLabelRequired"
+                />
+              </label>
+            </slot>
+
+            <slot name="hint">
+              <span
+                v-if="hint" form-group="hint"
+                :class="una?.formGroupHint"
+              >
+                {{ hint }}
+              </span>
+            </slot>
+          </div>
+
+          <slot name="description">
+            <span
+              v-if="description"
+              form-group="description"
+              :class="una?.formGroupDescription"
+            >
+              {{ description }}
+            </span>
+          </slot>
+        </div>
+      </div>
+    </slot>
+
+    <NFormGroupDefaultSlot
+      :id="name ?? id"
+      :status="status"
+    >
+      <slot />
+    </NFormGroupDefaultSlot>
+
+    <slot name="bottom">
+      <div
+        v-if="message || counter"
+        form-group="bottom-wrapper"
+        :class="[
+          { 'justify-end': !message && counter },
+          una?.formGroupBottomWrapper,
+        ]"
+      >
+        <slot name="message">
+          <div
+            v-if="message"
+            form-group="message-wrapper"
+            :class="una?.formGroupMessageWrapper"
+          >
+            <p
+              form-group="message"
+              :class="[
+                una?.formGroupMessage,
+                statusClassVariants,
+              ]"
+            >
+              {{ message }}
+            </p>
+          </div>
+        </slot>
+
+        <slot name="counter">
+          <div
+            v-if="counter"
+            form-group="counter-wrapper"
+            :class="una?.formGroupCounterWrapper"
+          >
+            <span
+              :class="`${counter?.value >= (counter?.max || 0) && counter?.max
+                ? 'form-group-counter-error'
+                : 'form-group-counter-current'}`"
+            >
+              {{ counter?.value }}
+            </span>
+            <span v-if="counter?.max" form-group="counter-separator">/</span>
+            <span v-if="counter?.max" form-group="counter-max">{{ counter?.max }}</span>
+          </div>
+        </slot>
+      </div>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed } from 'vue'
+import NIcon from '../elements/Icon.vue'
+import type { NInputProps } from '../../types'
+import { randomId } from '../../utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NInputProps>(), {
+  type: 'text',
+})
+
+const emit = defineEmits<{ (...args: any): void }>()
+
+const slots = defineSlots<{
+  leading?: any
+  trailing?: any
+}>()
+
+const inputValue = useVModel(props, 'modelValue', emit, { passive: true })
+
+const id = computed(() => props.id ?? randomId('input'))
+
+const isLeading = computed(() => props.leading || slots.leading)
+const isTrailing = computed(() => props.trailing || slots.trailing || props.status || props.loading)
+
+const inputVariants = ['outline', 'solid'] as const
+const hasVariant = computed(() => inputVariants.some(inputVariants => props.input?.includes(inputVariants)))
+const isBaseVariant = computed(() => props.input?.includes('~'))
+
+const statusClassVariants = computed(() => {
+  const input = {
+    info: 'input-status-info input-solid-info input-status-ring',
+    success: 'input-status-success input-solid-success input-status-ring',
+    warning: 'input-status-warning input-solid-warning input-status-ring',
+    error: 'input-status-error input-solid-error input-status-ring',
+    default: !hasVariant.value && !isBaseVariant.value ? 'input-default-variant' : '',
+  }
+
+  const text = {
+    info: 'text-info',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error',
+    default: '',
+  }
+
+  const icon = {
+    info: props.una?.inputWarningIcon ?? 'input-info-icon',
+    success: props.una?.inputSuccessIcon ?? 'input-success-icon',
+    warning: props.una?.inputWarningIcon ?? 'input-warning-icon',
+    error: props.una?.inputErrorIcon ?? 'input-error-icon',
+    default: '',
+  }
+
+  return {
+    input: input[props.status ?? 'default'],
+    text: text[props.status ?? 'default'],
+    icon: icon[props.status ?? 'default'],
+  }
+})
+
+const reverseClassVariants = computed(() => {
+  const input = {
+    false: [{ 'input-leading-padding': isLeading.value }, { 'input-trailing-padding': isTrailing.value }],
+    true: [{ 'input-trailing-padding': isLeading.value }, { 'input-leading-padding': isTrailing.value }],
+  }
+
+  return {
+    input: input[props.reverse ? 'true' : 'false'],
+    leadingWrapper: props.reverse ? 'input-trailing-wrapper' : 'input-leading-wrapper',
+    trailingWrapper: props.reverse ? 'input-leading-wrapper' : 'input-trailing-wrapper',
+  }
+})
+</script>
+
+<template>
+  <div
+    input="wrapper"
+    :size="size"
+    :class="una?.inputWrapper"
+  >
+    <div
+      v-if="isLeading"
+      :class="[
+        una?.inputLeadingWrapper,
+        reverseClassVariants.leadingWrapper,
+        statusClassVariants.text,
+      ]"
+    >
+      <slot name="leading">
+        <NIcon
+          v-if="leading"
+          :name="leading"
+          input="leading"
+          :class="una?.inputLeading"
+          @click="emit('leading')"
+        />
+      </slot>
+    </div>
+
+    <input
+      :id="id"
+      v-model="inputValue"
+      :type="type"
+      class="input"
+      :class="[
+        statusClassVariants.input,
+        reverseClassVariants.input,
+        una?.input,
+      ]"
+      :input="input"
+      v-bind="$attrs"
+    >
+
+    <div
+      v-if="isTrailing"
+      :class="[
+        una?.inputTrailingWrapper,
+        reverseClassVariants.trailingWrapper,
+        statusClassVariants.text,
+      ]"
+    >
+      <NIcon
+        v-if="loading"
+        input="loading"
+        :name="una?.inputLoadingIcon ?? 'input-loading-icon'"
+        :class="una?.inputLoading"
+      />
+
+      <NIcon
+        v-if="status"
+        input="status-icon-base"
+        :name="statusClassVariants.icon"
+      />
+
+      <slot v-else name="trailing">
+        <NIcon
+          v-if="trailing"
+          input="trailing"
+          :class="una?.inputTrailing"
+          :name="trailing"
+          @click="emit('trailing')"
+        />
+      </slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { Switch } from '@headlessui/vue'
+import { computed } from 'vue'
+import { useVModel } from '@vueuse/core'
+import type { NSwitchProps } from '../../types'
+import NIcon from '../elements/Icon.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<NSwitchProps>()
+
+const emit = defineEmits<{ (...args: any): void }>()
+
+const on = useVModel(props, 'modelValue', emit, { passive: true })
+
+const _switch = computed(() => props.switch)
+
+const outsetClassVariants = computed(() => {
+  const switchWrapper = {
+    false: 'switch-inset',
+    true: 'switch-outset',
+  }
+
+  const switchTrack = {
+    false: 'switch-track-inset',
+    true: 'switch-track-outset',
+  }
+
+  const switchThumb = {
+    false: 'left-0.125em',
+    true: 'left-0 border-base border',
+  }
+
+  return {
+    switchWrapper: switchWrapper[!props.outset ? 'false' : 'true'],
+    switchTrack: switchTrack[!props.outset ? 'false' : 'true'],
+    switchThumb: switchThumb[!props.outset ? 'false' : 'true'],
+  }
+})
+
+const onClassVariants = computed(() => {
+  const switchTrack = {
+    true: `${props.una?.switchTrackOn ?? ''} switch-track-on`,
+    false: `${props.una?.switchTrackOff ?? ''} switch-track-off`,
+  }
+
+  const switchThumb = {
+    true: `${props.una?.switchThumbOn ?? ''} switch-thumb-on`,
+    false: `${props.una?.switchThumbOff ?? ''} switch-thumb-off`,
+  }
+
+  const switchIcon = {
+    true: `${props.onIcon ?? ''} switch-icon-on`,
+    false: `${props.offIcon ?? ''} switch-icon-off`,
+  }
+
+  return {
+    switchTrack: switchTrack[on.value ? 'true' : 'false'],
+    switchThumb: switchThumb[on.value ? 'true' : 'false'],
+    switchIcon: switchIcon[on.value ? 'true' : 'false'],
+  }
+})
+</script>
+
+<template>
+  <Switch
+    v-model="on"
+    class="switch"
+    :class="[
+      { 'switch-disabled': disabled || loading },
+      outsetClassVariants?.switchWrapper,
+    ]"
+    :switch="_switch"
+    v-bind="$attrs"
+    :disabled="disabled"
+  >
+    <span class="sr-only">Track</span>
+    <span
+      aria-hidden="true"
+      switch="track"
+      :class="[
+        una?.switchTrack,
+        onClassVariants?.switchTrack,
+        outsetClassVariants?.switchTrack,
+      ]"
+    />
+
+    <span class="sr-only">Thumb</span>
+    <span
+      aria-hidden="true"
+      switch="thumb"
+      :class="[
+        una?.switchThumb,
+        onClassVariants?.switchThumb,
+        outsetClassVariants?.switchThumb,
+      ]"
+    >
+      <span class="sr-only">Icon</span>
+      <slot v-if="!loading" name="icon" :on="on">
+        <NIcon
+          switch="icon-base"
+          :name="onClassVariants?.switchIcon"
+          :class="una?.switchIconBase"
+        />
+      </slot>
+      <slot v-else name="loading-icon" :on="on">
+        <NIcon
+          switch="loading"
+          :class="una?.switchLoading"
+          :name="una?.switchloadingicon ?? 'switch-loading-icon'"
+        />
+      </slot>
+    </span>
+  </Switch>
+</template>

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

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { useStorage, useToggle } from '@vueuse/core'
+import { computed } from 'vue'
+import { grayThemes, primaryThemes } from '../../composables/themes'
+
+// TODO: globalize
+export interface ThemeColors {
+  [key: string]: string
+}
+
+// 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 = useStorage('una-settings', defaultSettings)
+
+// 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)
+  return theme ? theme[0] : ''
+})
+
+// use stone primary theme as default
+const currentGrayTheme = computed(() => settings.value.grayColors?.['--una-gray-hex'])
+// get current theme name
+const currentGrayThemeName = computed(() => {
+  const theme = grayThemes.find(([, theme]) => theme['--una-gray-hex'] === currentGrayTheme.value)
+  return theme ? theme[0] : ''
+})
+
+// update theme in storage
+function updatePrimaryTheme(theme: ThemeColors) {
+  settings.value.primaryColors = theme
+}
+function updateGrayTheme(theme: ThemeColors) {
+  settings.value.grayColors = 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]
+  updatePrimaryTheme(randomPrimaryTheme)
+  updateGrayTheme(randomGrayTheme)
+  toggle()
+}
+</script>
+
+<template>
+  <div class="sm:ml-5">
+    <Popover class="relative inline-block">
+      <PopoverButton
+        btn="~ square soft"
+        class="rounded-lg"
+      >
+        <span i-heroicons-swatch-20-solid 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"
+                @click="updatePrimaryTheme(theme)"
+              />
+            </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"
+                ring="gray offset-4 offset-base"
+                @click="updateGrayTheme(theme)"
+              />
+            </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'"
+              />
+            </button>
+          </div>
+        </PopoverPanel>
+      </transition>
+    </Popover>
+  </div>
+</template>