@nuxt/ui 0.4.1 → 2.8.1

package/dist/runtime/components/data/Table.vue

@@ -0,0 +1,251 @@
+<template>
+  <div :class="wrapperClass" v-bind="attrs">
+    <table :class="[ui.base, ui.divide]">
+      <thead :class="ui.thead">
+        <tr :class="ui.tr.base">
+          <th v-if="modelValue" scope="col" class="ps-4">
+            <UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" @change="onChange" />
+          </th>
+
+          <th v-for="(column, index) in columns" :key="index" scope="col" :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]">
+            <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
+              <UButton
+                v-if="column.sortable"
+                v-bind="{ ...ui.default.sortButton, ...sortButton }"
+                :icon="(!sort.column || sort.column !== column.key) ? (sortButton.icon || ui.default.sortButton.icon) : sort.direction === 'asc' ? sortAscIcon : sortDescIcon"
+                :label="column[columnAttribute]"
+                @click="onSort(column)"
+              />
+              <span v-else>{{ column[columnAttribute] }}</span>
+            </slot>
+          </th>
+        </tr>
+      </thead>
+      <tbody :class="ui.tbody">
+        <tr v-if="loadingState && loading">
+          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+            <slot name="loading-state">
+              <div :class="ui.loadingState.wrapper">
+                <UIcon v-if="loadingState.icon" :name="loadingState.icon" :class="ui.loadingState.icon" aria-hidden="true" />
+                <p :class="ui.loadingState.label">
+                  {{ loadingState.label }}
+                </p>
+              </div>
+            </slot>
+          </td>
+        </tr>
+
+        <tr v-else-if="emptyState && !rows.length">
+          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+            <slot name="empty-state">
+              <div :class="ui.emptyState.wrapper">
+                <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
+                <p :class="ui.emptyState.label">
+                  {{ emptyState.label }}
+                </p>
+              </div>
+            </slot>
+          </td>
+        </tr>
+
+        <template v-else>
+          <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active]" @click="() => onSelect(row)">
+            <td v-if="modelValue" class="ps-4">
+              <UCheckbox v-model="selected" :value="row" @click.stop />
+            </td>
+
+            <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]">
+              <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
+                {{ getRowData(row, column.key) }}
+              </slot>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { ref, computed, defineComponent, toRaw } from "vue";
+import { omit, capitalize, orderBy, get } from "lodash-es";
+import { defu } from "defu";
+import { twMerge } from "tailwind-merge";
+import { defuTwMerge } from "../../utils";
+import UButton from "../elements/Button.vue";
+import UIcon from "../elements/Icon.vue";
+import UCheckbox from "../forms/Checkbox.vue";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+function defaultComparator(a, z) {
+  return a === z;
+}
+export default defineComponent({
+  components: {
+    UButton,
+    UIcon,
+    UCheckbox
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: Array,
+      default: null
+    },
+    by: {
+      type: [String, Function],
+      default: () => defaultComparator
+    },
+    rows: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: null
+    },
+    columnAttribute: {
+      type: String,
+      default: "label"
+    },
+    sort: {
+      type: Object,
+      default: () => ({})
+    },
+    sortButton: {
+      type: Object,
+      default: () => appConfig.ui.table.default.sortButton
+    },
+    sortAscIcon: {
+      type: String,
+      default: () => appConfig.ui.table.default.sortAscIcon
+    },
+    sortDescIcon: {
+      type: String,
+      default: () => appConfig.ui.table.default.sortDescIcon
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingState: {
+      type: Object,
+      default: () => appConfig.ui.table.default.loadingState
+    },
+    emptyState: {
+      type: Object,
+      default: () => appConfig.ui.table.default.emptyState
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.table));
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ["click"])).map((key) => ({ key, label: capitalize(key), sortable: false })));
+    const sort = ref(defu({}, props.sort, { column: null, direction: "asc" }));
+    const rows = computed(() => {
+      if (!sort.value?.column) {
+        return props.rows;
+      }
+      const { column, direction } = sort.value;
+      return orderBy(props.rows, column, direction);
+    });
+    const selected = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+      }
+    });
+    const indeterminate = computed(() => selected.value && selected.value.length > 0 && selected.value.length < props.rows.length);
+    const emptyState = computed(() => {
+      if (props.emptyState === null)
+        return null;
+      return { ...ui.value.default.emptyState, ...props.emptyState };
+    });
+    const loadingState = computed(() => {
+      if (props.loadingState === null)
+        return null;
+      return { ...ui.value.default.loadingState, ...props.loadingState };
+    });
+    function compare(a, z) {
+      if (typeof props.by === "string") {
+        const property = props.by;
+        return a?.[property] === z?.[property];
+      }
+      return props.by(a, z);
+    }
+    function isSelected(row) {
+      if (!props.modelValue) {
+        return false;
+      }
+      return selected.value.some((item) => compare(toRaw(item), toRaw(row)));
+    }
+    function onSort(column) {
+      if (sort.value.column === column.key) {
+        const direction = !column.direction || column.direction === "asc" ? "desc" : "asc";
+        if (sort.value.direction === direction) {
+          sort.value = defu({}, props.sort, { column: null, direction: "asc" });
+        } else {
+          sort.value.direction = sort.value.direction === "asc" ? "desc" : "asc";
+        }
+      } else {
+        sort.value = { column: column.key, direction: column.direction || "asc" };
+      }
+    }
+    function onSelect(row) {
+      if (!attrs.onSelect) {
+        return;
+      }
+      attrs.onSelect(row);
+    }
+    function selectAllRows() {
+      props.rows.forEach((row) => {
+        if (selected.value.some((item) => compare(toRaw(item), toRaw(row)))) {
+          return;
+        }
+        onSelect(row);
+      });
+    }
+    function onChange(event) {
+      if (event.target.checked) {
+        selectAllRows();
+      } else {
+        selected.value = [];
+      }
+    }
+    function getRowData(row, rowKey, defaultValue = "Failed to get cell value") {
+      return get(row, rowKey, defaultValue);
+    }
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      wrapperClass,
+      // eslint-disable-next-line vue/no-dupe-keys
+      sort,
+      // eslint-disable-next-line vue/no-dupe-keys
+      columns,
+      // eslint-disable-next-line vue/no-dupe-keys
+      rows,
+      selected,
+      indeterminate,
+      // eslint-disable-next-line vue/no-dupe-keys
+      emptyState,
+      // eslint-disable-next-line vue/no-dupe-keys
+      loadingState,
+      isSelected,
+      onSort,
+      onSelect,
+      onChange,
+      getRowData
+    };
+  }
+});
+</script>

package/dist/runtime/components/data/Table.vue.d.ts

@@ -0,0 +1,215 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+import type { Button } from '../../types/button';
+declare function defaultComparator<T>(a: T, z: T): boolean;
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    by: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: () => typeof defaultComparator;
+    };
+    rows: {
+        type: PropType<{
+            [key: string]: any;
+            click?: Function | undefined;
+        }[]>;
+        default: () => never[];
+    };
+    columns: {
+        type: PropType<{
+            [key: string]: any;
+            key: string;
+            sortable?: boolean | undefined;
+            direction?: "asc" | "desc" | undefined;
+            class?: string | undefined;
+        }[]>;
+        default: null;
+    };
+    columnAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    sort: {
+        type: PropType<{
+            column: string;
+            direction: 'asc' | 'desc';
+        }>;
+        default: () => {};
+    };
+    sortButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    sortAscIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    sortDescIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loadingState: {
+        type: PropType<{
+            icon: string;
+            label: string;
+        }>;
+        default: () => any;
+    };
+    emptyState: {
+        type: PropType<{
+            icon: string;
+            label: string;
+        }>;
+        default: () => any;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    sort: import("vue").Ref<{
+        direction: string;
+        column: string;
+    }>;
+    columns: import("vue").ComputedRef<{
+        [key: string]: any;
+        key: string;
+        sortable?: boolean | undefined;
+        direction?: "asc" | "desc" | undefined;
+        class?: string | undefined;
+    }[]>;
+    rows: import("vue").ComputedRef<{
+        [key: string]: any;
+        click?: Function | undefined;
+    }[]>;
+    selected: import("vue").WritableComputedRef<unknown[]>;
+    indeterminate: import("vue").ComputedRef<boolean>;
+    emptyState: import("vue").ComputedRef<any>;
+    loadingState: import("vue").ComputedRef<any>;
+    isSelected: (row: any) => boolean;
+    onSort: (column: {
+        key: string;
+        direction?: 'asc' | 'desc';
+    }) => void;
+    onSelect: (row: any) => void;
+    onChange: (event: any) => void;
+    getRowData: (row: Object, rowKey: string | string[], defaultValue?: any) => any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    by: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: () => typeof defaultComparator;
+    };
+    rows: {
+        type: PropType<{
+            [key: string]: any;
+            click?: Function | undefined;
+        }[]>;
+        default: () => never[];
+    };
+    columns: {
+        type: PropType<{
+            [key: string]: any;
+            key: string;
+            sortable?: boolean | undefined;
+            direction?: "asc" | "desc" | undefined;
+            class?: string | undefined;
+        }[]>;
+        default: null;
+    };
+    columnAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    sort: {
+        type: PropType<{
+            column: string;
+            direction: 'asc' | 'desc';
+        }>;
+        default: () => {};
+    };
+    sortButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    sortAscIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    sortDescIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loadingState: {
+        type: PropType<{
+            icon: string;
+            label: string;
+        }>;
+        default: () => any;
+    };
+    emptyState: {
+        type: PropType<{
+            icon: string;
+            label: string;
+        }>;
+        default: () => any;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    sort: {
+        column: string;
+        direction: 'asc' | 'desc';
+    };
+    ui: any;
+    modelValue: unknown[];
+    by: string | Function;
+    rows: {
+        [key: string]: any;
+        click?: Function | undefined;
+    }[];
+    columns: {
+        [key: string]: any;
+        key: string;
+        sortable?: boolean | undefined;
+        direction?: "asc" | "desc" | undefined;
+        class?: string | undefined;
+    }[];
+    columnAttribute: string;
+    sortButton: Button;
+    sortAscIcon: string;
+    sortDescIcon: string;
+    loading: boolean;
+    loadingState: {
+        icon: string;
+        label: string;
+    };
+    emptyState: {
+        icon: string;
+        label: string;
+    };
+}, {}>;
+export default _default;

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

@@ -0,0 +1,138 @@
+<template>
+  <div :class="wrapperClass">
+    <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
+      <HDisclosureButton :ref="() => buttonRefs[index] = close" as="template" :disabled="item.disabled">
+        <slot :item="item" :index="index" :open="open" :close="close">
+          <UButton v-bind="{ ...omit(ui.default, ['openIcon', 'closeIcon']), ...attrs, ...omit(item, ['slot', 'disabled', 'content', 'defaultOpen']) }">
+            <template #trailing>
+              <UIcon
+                :name="!open ? openIcon : closeIcon ? closeIcon : openIcon"
+                :class="[
+                  open && !closeIcon ? '-rotate-180' : '',
+                  uiButton.icon.size[item.size || uiButton.default.size],
+                  ui.item.icon
+                ]"
+              />
+            </template>
+          </UButton>
+        </slot>
+      </HDisclosureButton>
+
+      <StateEmitter :open="open" @open="closeOthers(index)" />
+
+      <Transition
+        v-bind="ui.transition"
+        @enter="onEnter"
+        @after-enter="onAfterEnter"
+        @before-leave="onBeforeLeave"
+        @leave="onLeave"
+      >
+        <div v-show="open">
+          <HDisclosurePanel :class="[ui.item.base, ui.item.size, ui.item.color, ui.item.padding]" static>
+            <slot :name="item.slot || 'item'" :item="item" :index="index" :open="open" :close="close">
+              {{ item.content }}
+            </slot>
+          </HDisclosurePanel>
+        </div>
+      </Transition>
+    </HDisclosure>
+  </div>
+</template>
+
+<script>
+import { ref, computed, defineComponent } from "vue";
+import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from "@headlessui/vue";
+import { omit } from "lodash-es";
+import { twMerge } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import UButton from "../elements/Button.vue";
+import { defuTwMerge } from "../../utils";
+import StateEmitter from "../../utils/StateEmitter";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  components: {
+    HDisclosure,
+    HDisclosureButton,
+    HDisclosurePanel,
+    UIcon,
+    UButton,
+    StateEmitter
+  },
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    defaultOpen: {
+      type: Boolean,
+      default: false
+    },
+    openIcon: {
+      type: String,
+      default: () => appConfig.ui.accordion.default.openIcon
+    },
+    closeIcon: {
+      type: String,
+      default: () => appConfig.ui.accordion.default.closeIcon
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.accordion));
+    const uiButton = computed(() => appConfig2.ui.button);
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    const buttonRefs = ref([]);
+    function closeOthers(itemIndex) {
+      if (!props.items[itemIndex].closeOthers && props.multiple) {
+        return;
+      }
+      buttonRefs.value.forEach((close, index) => {
+        if (index === itemIndex)
+          return;
+        close();
+      });
+    }
+    function onEnter(el, done) {
+      el.style.height = "0";
+      el.offsetHeight;
+      el.style.height = el.scrollHeight + "px";
+      el.addEventListener("transitionend", done, { once: true });
+    }
+    function onBeforeLeave(el) {
+      el.style.height = el.scrollHeight + "px";
+      el.offsetHeight;
+    }
+    function onAfterEnter(el) {
+      el.style.height = "auto";
+    }
+    function onLeave(el, done) {
+      el.style.height = "0";
+      el.addEventListener("transitionend", done, { once: true });
+    }
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      uiButton,
+      wrapperClass,
+      buttonRefs,
+      closeOthers,
+      omit,
+      onEnter,
+      onBeforeLeave,
+      onAfterEnter,
+      onLeave
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,80 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+import type { AccordionItem } from '../../types/accordion';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: PropType<AccordionItem[]>;
+        default: () => never[];
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    openIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    closeIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    uiButton: import("vue").ComputedRef<any>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    buttonRefs: import("vue").Ref<Function[]>;
+    closeOthers: (itemIndex: number) => void;
+    omit: {
+        <T extends object, K extends import("lodash").PropertyName[]>(object: T | null | undefined, ...paths: K): Pick<T, Exclude<keyof T, K[number]>>;
+        <T_1 extends object, K_1 extends keyof T_1>(object: T_1 | null | undefined, ...paths: import("lodash").Many<K_1>[]): import("lodash").Omit<T_1, K_1>;
+        <T_2 extends object>(object: T_2 | null | undefined, ...paths: import("lodash").Many<import("lodash").PropertyName>[]): Partial<T_2>;
+    };
+    onEnter: (el: HTMLElement, done: any) => void;
+    onBeforeLeave: (el: HTMLElement) => void;
+    onAfterEnter: (el: HTMLElement) => void;
+    onLeave: (el: HTMLElement, done: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<AccordionItem[]>;
+        default: () => never[];
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    openIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    closeIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    defaultOpen: boolean;
+    items: AccordionItem[];
+    openIcon: string;
+    closeIcon: string;
+    multiple: boolean;
+}, {}>;
+export default _default;