@una-ui/nuxt 0.53.0 → 0.54.0

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

@@ -1,45 +1,45 @@
-<script setup>
-import { computed } from "vue";
-import { cn, omitProps } from "../../../utils";
-import TableCell from "./TableCell.vue";
-import TableRow from "./TableRow.vue";
-const props = defineProps({
-  class: { type: null, required: false },
-  colspan: { type: Number, required: false, default: 1 },
-  _tableCell: { type: Object, required: false },
-  _tableRow: { type: Object, required: false },
-  una: { type: Object, required: false }
-});
+<script setup lang="ts">
+import type { NTableEmptyProps } from '../../../types'
+import { computed } from 'vue'
+import { cn, omitProps } from '../../../utils'
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps<NTableEmptyProps>(), {
+  colspan: 1,
+})
+
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TableRow
     :class="cn(
-  'table-empty-row',
-  props.una?.tableRow
-)"
+      'table-empty-row',
+      props.una?.tableRow,
+    )"
     v-bind="delegatedProps._tableRow"
   >
     <TableCell
       :class="
-  cn(
-    'table-empty-cell',
-    props.una?.tableCell
-  )
-"
+        cn(
+          'table-empty-cell',
+          props.una?.tableCell,
+        )
+      "
       :colspan="props.colspan"
       v-bind="delegatedProps._tableCell"
     >
       <div
         :class="cn(
-  'table-empty',
-  props.una?.tableEmpty,
-  props.class
-)"
+          'table-empty',
+          props.una?.tableEmpty,
+          props.class,
+        )"
         v-bind="omitProps(delegatedProps, ['_tableRow', '_tableCell', 'colspan'])"
       >
         <slot>

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

@@ -1,23 +1,23 @@
-<script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { Primitive } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  class: { type: null, required: false },
-  una: { type: Object, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "tfoot" }
-});
-const rootProps = reactiveOmit(props, ["una", "class"]);
+<script setup lang="ts">
+import type { NTableFooterProps } from '../../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = withDefaults(defineProps<NTableFooterProps>(), {
+  as: 'tfoot',
+})
+
+const rootProps = reactiveOmit(props, ['una', 'class'])
 </script>
 
 <template>
   <Primitive
     :class="cn(
-  'table-footer',
-  props.una?.tableFooter,
-  props.class
-)"
+      'table-footer',
+      props.una?.tableFooter,
+      props.class,
+    )"
     v-bind="{ ...rootProps, ...$attrs }"
   >
     <slot />

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

@@ -1,26 +1,25 @@
-<script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { Primitive } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  class: { type: null, required: false },
-  dataPinned: { type: [String, Boolean], required: false },
-  una: { type: Object, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "th" }
-});
-const rootProps = reactiveOmit(props, ["una", "class"]);
+<script setup lang="ts">
+import type { NTableHeadProps } from '../../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = withDefaults(defineProps<NTableHeadProps>(), {
+  as: 'th',
+})
+
+const rootProps = reactiveOmit(props, ['una', 'class'])
 </script>
 
 <template>
   <Primitive
     :class="cn(
-  'table-head',
-  props.una?.tableHead,
-  props.class,
-  { 'table-head-pinned': props.dataPinned },
-  props.dataPinned === 'left' ? 'table-head-pinned-left' : 'table-head-pinned-right'
-)"
+      'table-head',
+      props.una?.tableHead,
+      props.class,
+      { 'table-head-pinned': props.dataPinned },
+      props.dataPinned === 'left' ? 'table-head-pinned-left' : 'table-head-pinned-right',
+    )"
     v-bind="{ ...rootProps, ...$attrs }"
   >
     <slot />

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

@@ -1,23 +1,23 @@
-<script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { Primitive } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  class: { type: null, required: false },
-  una: { type: Object, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "thead" }
-});
-const rootProps = reactiveOmit(props, ["una", "class"]);
+<script setup lang="ts">
+import type { NTableHeaderProps } from '../../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = withDefaults(defineProps<NTableHeaderProps>(), {
+  as: 'thead',
+})
+
+const rootProps = reactiveOmit(props, ['una', 'class'])
 </script>
 
 <template>
   <Primitive
     :class="cn(
-  'table-header',
-  props?.una?.tableHeader,
-  props.class
-)"
+      'table-header',
+      props?.una?.tableHeader,
+      props.class,
+    )"
     v-bind="{ ...rootProps, ...$attrs }"
   >
     <slot />

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

@@ -1,57 +1,54 @@
-<script setup>
-import { computed } from "vue";
-import { cn } from "../../../utils";
-import Progress from "../../elements/Progress.vue";
-import TableRow from "./TableRow.vue";
-const props = defineProps({
-  size: { type: null, required: false, default: "2.5px" },
-  enabled: { type: Boolean, required: false },
-  class: { type: null, required: false },
-  colspan: { type: Number, required: false },
-  _tableCell: { type: Object, required: false },
-  _tableRow: { type: Object, required: false },
-  _tableProgress: { type: Object, required: false },
-  una: { type: Object, required: false }
-});
+<script setup lang="ts">
+import type { NTableLoadingProps } from '../../../types'
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+import Progress from '../../elements/Progress.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps<NTableLoadingProps>(), {
+  size: '2.5px',
+})
+
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <TableRow
     :class="cn(
-  'table-loading-row',
-  props.una?.tableLoadingRow
-)"
+      'table-loading-row',
+      props.una?.tableLoadingRow,
+    )"
     data-loading="true"
     v-bind="delegatedProps._tableRow"
   >
     <td
       :class="
-  cn(
-    'table-loading-cell',
-    props.una?.tableLoadingCell
-  )
-"
+        cn(
+          'table-loading-cell',
+          props.una?.tableLoadingCell,
+        )
+      "
       :colspan="0"
       v-bind="delegatedProps._tableCell"
     >
       <div
         v-if="enabled"
         :class="cn(
-  'table-loading',
-  props.una?.tableLoading
-)"
+          'table-loading',
+          props.una?.tableLoading,
+        )"
       >
         <slot>
           <Progress
             :size
             v-bind="props._tableProgress"
             :class="cn(
-  props._tableProgress?.class
-)"
+              props._tableProgress?.class,
+            )"
           />
         </slot>
       </div>

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

@@ -1,24 +1,24 @@
-<script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { Primitive } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  class: { type: null, required: false },
-  una: { type: Object, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "tr" }
-});
-const rootProps = reactiveOmit(props, ["una", "class"]);
+<script setup lang="ts">
+import type { NTableRowProps } from '../../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = withDefaults(defineProps<NTableRowProps>(), {
+  as: 'tr',
+})
+
+const rootProps = reactiveOmit(props, ['una', 'class'])
 </script>
 
 <template>
   <Primitive
     role="row"
     :class="cn(
-  'table-row',
-  props.una?.tableRow,
-  props.class
-)"
+      'table-row',
+      props.una?.tableRow,
+      props.class,
+    )"
     v-bind="{ ...rootProps, ...$attrs }"
   >
     <slot />

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

@@ -1,84 +1,75 @@
-<script setup>
+<script setup lang="ts">
+import type { NAccordionItemProps, NAccordionProps } from '../../types'
+
 import {
   Disclosure,
   DisclosureButton,
-  DisclosurePanel
-} from "@headlessui/vue";
-import { createReusableTemplate } from "@vueuse/core";
-import { computed, ref } from "vue";
-import { pickProps } from "../../utils";
-import NButton from "./Button.vue";
-import NIcon from "./Icon.vue";
-const props = defineProps({
-  accordion: { type: String, required: false },
-  trailingOpen: { type: String, required: false, default: "accordion-trailing-icon" },
-  trailingClose: { type: String, required: false },
-  multiple: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false },
-  unstyle: { type: Boolean, required: false },
-  mounted: { type: Boolean, required: false },
-  items: { type: Array, required: true },
-  una: { type: Object, required: false },
-  type: { type: String, required: false },
-  loadingPlacement: { type: String, required: false, default: "trailing" },
-  icon: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  reverse: { type: Boolean, required: false },
-  loading: { type: Boolean, required: false },
-  block: { type: Boolean, required: false },
-  to: { type: null, required: false },
-  label: { type: String, required: false },
-  btn: { type: String, required: false },
-  leading: { type: String, required: false },
-  trailing: { type: String, required: false },
-  size: { type: String, required: false },
-  square: { type: null, required: false },
-  rounded: { type: null, required: false },
-  class: { type: null, required: false },
-  breadcrumbActive: { type: String, required: false },
-  breadcrumbInactive: { type: String, required: false },
-  paginationSelected: { type: String, required: false },
-  paginationUnselected: { type: String, required: false },
-  dropdownMenu: { type: String, required: false },
-  toggleOn: { type: String, required: false },
-  toggleOff: { type: String, required: false },
-  navigationMenu: { type: String, required: false },
-  navigationMenuLink: { type: String, required: false },
-  ariaLabel: { type: String, required: false }
-});
-const buttonRefs = ref([]);
-function closeOthers(index) {
+  DisclosurePanel,
+} from '@headlessui/vue'
+import { createReusableTemplate } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import { pickProps } from '../../utils'
+import NButton from './Button.vue'
+import NIcon from './Icon.vue'
+
+const props = withDefaults(defineProps<NAccordionProps>(), {
+  trailingOpen: 'accordion-trailing-icon',
+  loadingPlacement: 'trailing',
+})
+
+const buttonRefs = ref<(() => void)[]>([])
+
+function closeOthers(index: number): void {
   if (props.multiple && props.items[index] && !props.items[index].closeOthers)
-    return;
-  buttonRefs.value.filter((_, i) => i !== index).forEach((close) => close());
+    return
+
+  buttonRefs.value
+    .filter((_, i) => i !== index)
+    .forEach(close => close())
 }
-function onEnter(element, done) {
-  const el = element;
-  el.style.height = "0";
-  el.style.height = `${element.scrollHeight}px`;
-  el.addEventListener("transitionend", done, { once: true });
+
+function onEnter(element: Element, done: () => void): 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) {
-  const el = element;
-  el.style.height = "auto";
+
+function onAfterEnter(element: Element): void {
+  const el = element as HTMLElement
+  el.style.height = 'auto'
 }
-function onBeforeLeave(element) {
-  const el = element;
-  el.style.height = `${el.scrollHeight}px`;
+
+function onBeforeLeave(element: Element): void {
+  const el = element as HTMLElement
+  el.style.height = `${el.scrollHeight}px`
 }
-function onLeave(element, done) {
-  const el = element;
-  el.style.height = "0";
-  el.addEventListener("transitionend", done, { once: true });
+
+function onLeave(element: Element, done: () => void): void {
+  const el = element as HTMLElement
+  el.style.height = '0'
+
+  el.addEventListener('transitionend', done, { once: true })
 }
-const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
-const pickedProps = pickProps(props, ["reverse", "icon", "btn", "label", "leading", "loading", "loadingPlacement", "una", "trailing", "leading", "to", "type", "disabled"]);
-function mergedProps(itemProps) {
-  return Object.assign(pickedProps, itemProps);
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
+  item: NAccordionItemProps
+  index: number
+  open: boolean
+  close: () => void
+}>()
+
+const pickedProps = pickProps(props, ['reverse', 'icon', 'btn', 'label', 'leading', 'loading', 'loadingPlacement', 'una', 'trailing', 'leading', 'to', 'type', 'disabled'])
+
+function mergedProps(itemProps: NAccordionItemProps): NAccordionItemProps {
+  return Object.assign(pickedProps, itemProps)
 }
-const btnVariants = ["solid", "outline", "soft", "ghost", "link", "text"];
-const hasVariant = computed(() => btnVariants.some((btnVariants2) => props.btn?.includes(btnVariants2)));
-const isBaseVariant = computed(() => props.btn?.includes("~"));
+
+// 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>
@@ -86,11 +77,11 @@ const isBaseVariant = computed(() => props.btn?.includes("~"));
     :accordion="accordion"
     class="accordion"
     :class="[
-  unstyle ? 'space-y-3' : 'accordion-(border divider)',
-  una?.accordion
-]"
+      unstyle ? 'space-y-3' : 'accordion-(border divider)',
+      una?.accordion,
+    ]"
   >
-    <DefineTemplate v-slot="{ item, close, index, open }">
+    <DefineTemplate v-slot="{ item, close, index, open }: any">
       <slot
         :name="item.content ? 'content' : index"
         :item="item" :index="index" :open="open" :close="close"
@@ -98,9 +89,9 @@ const isBaseVariant = computed(() => props.btn?.includes("~"));
         <div
           accordion="panel"
           :class="[
-  una?.accordionPanel,
-  { 'border-t-0': unstyle }
-]"
+            una?.accordionPanel,
+            { 'border-t-0': unstyle },
+          ]"
         >
           {{ item.content }}
         </div>
@@ -117,7 +108,7 @@ const isBaseVariant = computed(() => props.btn?.includes("~"));
       :class="una?.accordionItem"
     >
       <DisclosureButton
-        :ref="() => buttonRefs[i] = close"
+        :ref="() => (buttonRefs[i] = close)"
         as="template"
         :disabled="item.disabled || disabled"
         @click="closeOthers(i)"
@@ -127,14 +118,14 @@ const isBaseVariant = computed(() => props.btn?.includes("~"));
             v-bind="mergedProps(item)"
             :btn="`~ block ${btn || ''}`"
             :class="[
-  { 'accordion-button-default-variant': !hasVariant && !isBaseVariant },
-  { 'accordion-button-padding': !unstyle },
-  una?.accordionButton
-]"
+              { 'accordion-button-default-variant': !hasVariant && !isBaseVariant },
+              { 'accordion-button-padding': !unstyle },
+              una?.accordionButton,
+            ]"
             :una="{
-  btn: 'h-auto accordion-button',
-  btnLabel: 'accordion-label'
-}"
+              btn: 'h-auto accordion-button',
+              btnLabel: 'accordion-label',
+            }"
           >
             <template #leading>
               <!-- TODO: fix conditional statement -->
@@ -152,9 +143,11 @@ const isBaseVariant = computed(() => props.btn?.includes("~"));
                 v-if="trailingOpen || trailingClose"
                 accordion="trailing"
                 :class="[
-  trailingClose || !trailingClose && open ? una?.accordionTrailingClose || 'accordion-trailing-close' : una?.accordionTrailingOpen || 'accordion-trailing-open',
-  una?.accordionTrailing
-]"
+                  trailingClose || (!trailingClose && open)
+                    ? una?.accordionTrailingClose || 'accordion-trailing-close'
+                    : una?.accordionTrailingOpen || 'accordion-trailing-open',
+                  una?.accordionTrailing,
+                ]"
               >
                 <NIcon
                   v-if="(open || !trailingClose) && trailingOpen"
@@ -183,11 +176,11 @@ const isBaseVariant = computed(() => props.btn?.includes("~"));
         <DisclosurePanel v-if="!item.mounted || !mounted">
           <ReuseTemplate
             v-bind="{
-  item,
-  index: i,
-  open,
-  close
-}"
+              item,
+              index: i,
+              open,
+              close,
+            }"
           />
         </DisclosurePanel>
         <DisclosurePanel
@@ -197,11 +190,11 @@ const isBaseVariant = computed(() => props.btn?.includes("~"));
         >
           <ReuseTemplate
             v-bind="{
-  item,
-  index: i,
-  open,
-  close
-}"
+              item,
+              index: i,
+              open,
+              close,
+            }"
           />
         </DisclosurePanel>
       </Transition>