@nuxt/ui 2.18.4 → 3.0.0-alpha.1

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

@@ -1,439 +0,0 @@
-import type { PropType, AriaAttributes } from 'vue';
-import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types/index.js';
-declare const config: {
-    wrapper: string;
-    base: string;
-    divide: string;
-    thead: string;
-    tbody: string;
-    caption: string;
-    tr: {
-        base: string;
-        selected: string;
-        active: string;
-    };
-    th: {
-        base: string;
-        padding: string;
-        color: string;
-        font: string;
-        size: string;
-    };
-    td: {
-        base: string;
-        padding: string;
-        color: string;
-        font: string;
-        size: string;
-    };
-    checkbox: {
-        padding: string;
-    };
-    loadingState: {
-        wrapper: string;
-        label: string;
-        icon: string;
-    };
-    emptyState: {
-        wrapper: string;
-        label: string;
-        icon: string;
-    };
-    expand: {
-        icon: string;
-    };
-    progress: {
-        wrapper: string;
-    };
-    default: {
-        sortAscIcon: string;
-        sortDescIcon: string;
-        sortButton: {
-            icon: string;
-            trailing: boolean;
-            square: boolean;
-            color: "gray";
-            variant: "ghost";
-            class: string;
-        };
-        expandButton: {
-            icon: string;
-            color: "gray";
-            variant: "ghost";
-            size: "xs";
-            class: string;
-        };
-        checkbox: {
-            color: "primary";
-        };
-        progress: {
-            color: "primary";
-            animation: "carousel";
-        };
-        loadingState: {
-            icon: string;
-            label: string;
-        };
-        emptyState: {
-            icon: string;
-            label: string;
-        };
-    };
-};
-declare function defaultComparator<T>(a: T, z: T): boolean;
-interface Column {
-    key: string;
-    sortable?: boolean;
-    sort?: (a: any, b: any, direction: 'asc' | 'desc') => number;
-    direction?: 'asc' | 'desc';
-    class?: string;
-    rowClass?: string;
-    [key: string]: any;
-}
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: ArrayConstructor;
-        default: any;
-    };
-    by: {
-        type: (StringConstructor | FunctionConstructor)[];
-        default: () => typeof defaultComparator;
-    };
-    rows: {
-        type: PropType<{
-            [key: string]: any;
-        }[]>;
-        default: () => any[];
-    };
-    columns: {
-        type: PropType<Column[]>;
-        default: any;
-    };
-    columnAttribute: {
-        type: StringConstructor;
-        default: string;
-    };
-    sort: {
-        type: PropType<{
-            column: string;
-            direction: "asc" | "desc";
-        }>;
-        default: () => {};
-    };
-    sortMode: {
-        type: PropType<"manual" | "auto">;
-        default: string;
-    };
-    sortButton: {
-        type: PropType<Button>;
-        default: () => Button;
-    };
-    sortAscIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    sortDescIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    expandButton: {
-        type: PropType<Button>;
-        default: () => Button;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loadingState: {
-        type: PropType<{
-            icon: string;
-            label: string;
-        }>;
-        default: () => {
-            icon: string;
-            label: string;
-        };
-    };
-    emptyState: {
-        type: PropType<{
-            icon: string;
-            label: string;
-        }>;
-        default: () => {
-            icon: string;
-            label: string;
-        };
-    };
-    caption: {
-        type: StringConstructor;
-        default: any;
-    };
-    progress: {
-        type: PropType<{
-            color: ProgressColor;
-            animation: ProgressAnimation;
-        }>;
-        default: () => {
-            color: "primary";
-            animation: "carousel";
-        };
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        base: string;
-        divide: string;
-        thead: string;
-        tbody: string;
-        caption: string;
-        tr: {
-            base: string;
-            selected: string;
-            active: string;
-        };
-        th: {
-            base: string;
-            padding: string;
-            color: string;
-            font: string;
-            size: string;
-        };
-        td: {
-            base: string;
-            padding: string;
-            color: string;
-            font: string;
-            size: string;
-        };
-        checkbox: {
-            padding: string;
-        };
-        loadingState: {
-            wrapper: string;
-            label: string;
-            icon: string;
-        };
-        emptyState: {
-            wrapper: string;
-            label: string;
-            icon: string;
-        };
-        expand: {
-            icon: string;
-        };
-        progress: {
-            wrapper: string;
-        };
-        default: {
-            sortAscIcon: string;
-            sortDescIcon: string;
-            sortButton: {
-                icon: string;
-                trailing: boolean;
-                square: boolean;
-                color: "gray";
-                variant: "ghost";
-                class: string;
-            };
-            expandButton: {
-                icon: string;
-                color: "gray";
-                variant: "ghost";
-                size: "xs";
-                class: string;
-            };
-            checkbox: {
-                color: "primary";
-            };
-            progress: {
-                color: "primary";
-                animation: "carousel";
-            };
-            loadingState: {
-                icon: string;
-                label: string;
-            };
-            emptyState: {
-                icon: string;
-                label: string;
-            };
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    sort: import("vue").Ref<{
-        column: string;
-        direction: "asc" | "desc";
-    }>;
-    columns: import("vue").ComputedRef<Column[]>;
-    rows: import("vue").ComputedRef<{
-        [key: string]: any;
-    }[]>;
-    selected: import("vue").WritableComputedRef<unknown[]>;
-    indeterminate: import("vue").ComputedRef<boolean>;
-    emptyState: import("vue").ComputedRef<{
-        icon: string;
-        label: string;
-    }>;
-    loadingState: import("vue").ComputedRef<{
-        icon: string;
-        label: string;
-    }>;
-    openedRows: import("vue").Ref<any[]>;
-    isSelected: (row: any) => boolean;
-    onSort: (column: {
-        key: string;
-        direction?: "asc" | "desc";
-    }) => void;
-    onSelect: (row: any) => void;
-    onChange: (checked: boolean) => void;
-    getRowData: (row: Object, rowKey: string | string[], defaultValue?: any) => any;
-    toggleOpened: (index: number) => void;
-    getAriaSort: (column: Column) => AriaAttributes["aria-sort"];
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:sort")[], "update:modelValue" | "update:sort", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: ArrayConstructor;
-        default: any;
-    };
-    by: {
-        type: (StringConstructor | FunctionConstructor)[];
-        default: () => typeof defaultComparator;
-    };
-    rows: {
-        type: PropType<{
-            [key: string]: any;
-        }[]>;
-        default: () => any[];
-    };
-    columns: {
-        type: PropType<Column[]>;
-        default: any;
-    };
-    columnAttribute: {
-        type: StringConstructor;
-        default: string;
-    };
-    sort: {
-        type: PropType<{
-            column: string;
-            direction: "asc" | "desc";
-        }>;
-        default: () => {};
-    };
-    sortMode: {
-        type: PropType<"manual" | "auto">;
-        default: string;
-    };
-    sortButton: {
-        type: PropType<Button>;
-        default: () => Button;
-    };
-    sortAscIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    sortDescIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    expandButton: {
-        type: PropType<Button>;
-        default: () => Button;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loadingState: {
-        type: PropType<{
-            icon: string;
-            label: string;
-        }>;
-        default: () => {
-            icon: string;
-            label: string;
-        };
-    };
-    emptyState: {
-        type: PropType<{
-            icon: string;
-            label: string;
-        }>;
-        default: () => {
-            icon: string;
-            label: string;
-        };
-    };
-    caption: {
-        type: StringConstructor;
-        default: any;
-    };
-    progress: {
-        type: PropType<{
-            color: ProgressColor;
-            animation: ProgressAnimation;
-        }>;
-        default: () => {
-            color: "primary";
-            animation: "carousel";
-        };
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    "onUpdate:sort"?: (...args: any[]) => any;
-}, {
-    sort: {
-        column: string;
-        direction: "asc" | "desc";
-    };
-    class: any;
-    caption: string;
-    columns: Column[];
-    progress: {
-        color: ProgressColor;
-        animation: ProgressAnimation;
-    };
-    ui: {};
-    modelValue: unknown[];
-    loading: boolean;
-    loadingState: {
-        icon: string;
-        label: string;
-    };
-    emptyState: {
-        icon: string;
-        label: string;
-    };
-    by: string | Function;
-    rows: {
-        [key: string]: any;
-    }[];
-    columnAttribute: string;
-    sortMode: "auto" | "manual";
-    sortButton: Button;
-    sortAscIcon: string;
-    sortDescIcon: string;
-    expandButton: Button;
-}, {}>;
-export default _default;

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

@@ -1,185 +0,0 @@
-<template>
-  <div :class="ui.wrapper">
-    <HDisclosure
-      v-for="(item, index) in items"
-      v-slot="{ open, close }"
-      :key="index"
-      as="div"
-      :class="ui.container"
-      :default-open="defaultOpen || item.defaultOpen"
-    >
-      <HDisclosureButton
-        :ref="() => buttonRefs[index] = { open, close }"
-        as="template"
-        :disabled="item.disabled"
-        @click="closeOthers(index, $event)"
-        @keydown.enter="closeOthers(index, $event)"
-        @keydown.space="closeOthers(index, $event)"
-      >
-        <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>
-
-      <Transition
-        v-bind="ui.transition"
-        @enter="onEnter"
-        @after-enter="onAfterEnter"
-        @before-leave="onBeforeLeave"
-        @leave="onLeave"
-      >
-        <HDisclosurePanel
-          v-if="unmount"
-          :class="[ui.item.base, ui.item.size, ui.item.color, ui.item.padding]"
-          unmount
-        >
-          <slot :name="item.slot || 'item'" :item="item" :index="index" :open="open" :close="close">
-            {{ item.content }}
-          </slot>
-        </HDisclosurePanel>
-        <template v-else>
-          <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>
-        </template>
-      </Transition>
-    </HDisclosure>
-  </div>
-</template>
-
-<script>
-import { ref, computed, toRef, defineComponent, watch } from "vue";
-import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel, provideUseId } from "@headlessui/vue";
-import UIcon from "../elements/Icon.vue";
-import UButton from "../elements/Button.vue";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig, omit } from "../../utils";
-import appConfig from "#build/app.config";
-import { accordion, button } from "#ui/ui.config";
-import { useId } from "#imports";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.accordion, accordion);
-const configButton = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
-export default defineComponent({
-  components: {
-    HDisclosure,
-    HDisclosureButton,
-    HDisclosurePanel,
-    UIcon,
-    UButton
-  },
-  inheritAttrs: false,
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    defaultOpen: {
-      type: Boolean,
-      default: false
-    },
-    openIcon: {
-      type: String,
-      default: () => config.default.openIcon
-    },
-    unmount: {
-      type: Boolean,
-      default: false
-    },
-    closeIcon: {
-      type: String,
-      default: () => config.default.closeIcon
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["open"],
-  setup(props, { emit }) {
-    const { ui, attrs } = useUI("accordion", toRef(props, "ui"), config, toRef(props, "class"));
-    const uiButton = computed(() => configButton);
-    const buttonRefs = ref([]);
-    const openedStates = computed(() => buttonRefs.value.map(({ open }) => open));
-    watch(openedStates, (newValue, oldValue) => {
-      for (const index in newValue) {
-        const isOpenBefore = oldValue[index];
-        const isOpenAfter = newValue[index];
-        if (!isOpenBefore && isOpenAfter) {
-          emit("open", index);
-        }
-      }
-    }, { immediate: true });
-    function closeOthers(currentIndex, e) {
-      if (!props.items[currentIndex].closeOthers && props.multiple) {
-        return;
-      }
-      buttonRefs.value.forEach((button2) => {
-        if (button2.open) {
-          button2.close(e.target);
-        }
-      });
-    }
-    function onEnter(_el, done) {
-      const el = _el;
-      el.style.height = "0";
-      el.offsetHeight;
-      el.style.height = el.scrollHeight + "px";
-      el.addEventListener("transitionend", done, { once: true });
-    }
-    function onBeforeLeave(_el) {
-      const el = _el;
-      el.style.height = el.scrollHeight + "px";
-      el.offsetHeight;
-    }
-    function onAfterEnter(_el) {
-      const el = _el;
-      el.style.height = "auto";
-    }
-    function onLeave(_el, done) {
-      const el = _el;
-      el.style.height = "0";
-      el.addEventListener("transitionend", done, { once: true });
-    }
-    provideUseId(() => useId());
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      uiButton,
-      attrs,
-      buttonRefs,
-      closeOthers,
-      omit,
-      onEnter,
-      onBeforeLeave,
-      onAfterEnter,
-      onLeave
-    };
-  }
-});
-</script>