@nuxt/ui 2.18.4 → 3.0.0-alpha.0

package/dist/runtime/components/navigation/CommandPalette.vue.d.ts

@@ -1,390 +0,0 @@
-import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue';
-import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
-import type { Group, Command, Button, Strategy } from '../../types/index.js';
-declare const config: {
-    wrapper: string;
-    container: string;
-    input: {
-        wrapper: string;
-        base: string;
-        padding: string;
-        height: string;
-        size: string;
-        icon: {
-            base: string;
-            loading: string;
-            size: string;
-            padding: string;
-        };
-        closeButton: {
-            base: string;
-            padding: string;
-        };
-    };
-    emptyState: {
-        wrapper: string;
-        label: string;
-        queryLabel: string;
-        icon: string;
-    };
-    group: {
-        wrapper: string;
-        label: string;
-        container: string;
-        command: {
-            base: string;
-            active: string;
-            inactive: string;
-            label: string;
-            prefix: string;
-            suffix: string;
-            container: string;
-            icon: {
-                base: string;
-                active: string;
-                inactive: string;
-            };
-            selectedIcon: {
-                base: string;
-            };
-            avatar: {
-                base: string;
-                size: "2xs";
-            };
-            chip: {
-                base: string;
-            };
-            disabled: string;
-            shortcuts: string;
-        };
-        active: string;
-        inactive: string;
-    };
-    default: {
-        icon: string;
-        loadingIcon: string;
-        emptyState: {
-            icon: string;
-            label: string;
-            queryLabel: string;
-        };
-        closeButton: any;
-        selectedIcon: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: any;
-    };
-    by: {
-        type: StringConstructor;
-        default: string;
-    };
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    nullable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    searchable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    groups: {
-        type: PropType<Group[]>;
-        default: () => any[];
-    };
-    icon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    loadingIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    selectedIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    closeButton: {
-        type: PropType<Button>;
-        default: () => Button;
-    };
-    emptyState: {
-        type: PropType<{
-            icon: string;
-            label: string;
-            queryLabel: string;
-        }>;
-        default: () => {
-            icon: string;
-            label: string;
-            queryLabel: string;
-        };
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    groupAttribute: {
-        type: StringConstructor;
-        default: string;
-    };
-    commandAttribute: {
-        type: StringConstructor;
-        default: string;
-    };
-    autoselect: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autoclear: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    debounce: {
-        type: NumberConstructor;
-        default: number;
-    };
-    fuse: {
-        type: PropType<UseFuseOptions<Command>>;
-        default: () => {};
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: ComputedRef<{
-        wrapper: string;
-        container: string;
-        input: {
-            wrapper: string;
-            base: string;
-            padding: string;
-            height: string;
-            size: string;
-            icon: {
-                base: string;
-                loading: string;
-                size: string;
-                padding: string;
-            };
-            closeButton: {
-                base: string;
-                padding: string;
-            };
-        };
-        emptyState: {
-            wrapper: string;
-            label: string;
-            queryLabel: string;
-            icon: string;
-        };
-        group: {
-            wrapper: string;
-            label: string;
-            container: string;
-            command: {
-                base: string;
-                active: string;
-                inactive: string;
-                label: string;
-                prefix: string;
-                suffix: string;
-                container: string;
-                icon: {
-                    base: string;
-                    active: string;
-                    inactive: string;
-                };
-                selectedIcon: {
-                    base: string;
-                };
-                avatar: {
-                    base: string;
-                    size: "2xs";
-                };
-                chip: {
-                    base: string;
-                };
-                disabled: string;
-                shortcuts: string;
-            };
-            active: string;
-            inactive: string;
-        };
-        default: {
-            icon: string;
-            loadingIcon: string;
-            emptyState: {
-                icon: string;
-                label: string;
-                queryLabel: string;
-            };
-            closeButton: any;
-            selectedIcon: string;
-        };
-    }>;
-    attrs: ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    groups: ComputedRef<(Group | {
-        commands: Command[];
-        key: string;
-        active?: string;
-        inactive?: string;
-        search?: (...args: any[]) => any[] | Promise<any[]>;
-        filter?: (...args: any[]) => Command[];
-        static?: Boolean;
-    })[]>;
-    comboboxInput: import("vue").Ref<ComponentPublicInstance<HTMLInputElement>>;
-    query: import("vue").Ref<string>;
-    iconName: ComputedRef<string>;
-    iconClass: ComputedRef<string>;
-    emptyState: ComputedRef<{
-        icon: string;
-        label: string;
-        queryLabel: string;
-    }>;
-    onSelect: (option: Command | Command[]) => void;
-    onClear: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: any;
-    };
-    by: {
-        type: StringConstructor;
-        default: string;
-    };
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    nullable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    searchable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    groups: {
-        type: PropType<Group[]>;
-        default: () => any[];
-    };
-    icon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    loadingIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    selectedIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    closeButton: {
-        type: PropType<Button>;
-        default: () => Button;
-    };
-    emptyState: {
-        type: PropType<{
-            icon: string;
-            label: string;
-            queryLabel: string;
-        }>;
-        default: () => {
-            icon: string;
-            label: string;
-            queryLabel: string;
-        };
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    groupAttribute: {
-        type: StringConstructor;
-        default: string;
-    };
-    commandAttribute: {
-        type: StringConstructor;
-        default: string;
-    };
-    autoselect: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autoclear: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    debounce: {
-        type: NumberConstructor;
-        default: number;
-    };
-    fuse: {
-        type: PropType<UseFuseOptions<Command>>;
-        default: () => {};
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onClose?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-}, {
-    class: any;
-    ui: {};
-    icon: string;
-    closeButton: Button;
-    modelValue: string | number | Record<string, any> | unknown[];
-    loading: boolean;
-    loadingIcon: string;
-    emptyState: {
-        icon: string;
-        label: string;
-        queryLabel: string;
-    };
-    by: string;
-    multiple: boolean;
-    placeholder: string;
-    nullable: boolean;
-    selectedIcon: string;
-    debounce: number;
-    searchable: boolean;
-    groupAttribute: string;
-    commandAttribute: string;
-    groups: Group[];
-    autoselect: boolean;
-    autoclear: boolean;
-    fuse: {};
-}, {}>;
-export default _default;

package/dist/runtime/components/navigation/CommandPaletteGroup.vue

@@ -1,152 +0,0 @@
-<template>
-  <div :class="ui.group.wrapper">
-    <h2 v-if="label" :class="ui.group.label">
-      {{ label }}
-    </h2>
-
-    <div :class="ui.group.container" :aria-label="group[groupAttribute]">
-      <HComboboxOption
-        v-for="(command, index) of group.commands"
-        :key="`${group.key}-${index}`"
-        v-slot="{ active, selected }"
-        :value="command"
-        :disabled="command.disabled"
-        as="template"
-      >
-        <div :class="[ui.group.command.base, active ? ui.group.command.active : ui.group.command.inactive, command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
-          <div :class="ui.group.command.container">
-            <slot :name="`${group.key}-icon`" :group="group" :command="command" :active="active" :selected="selected">
-              <UIcon v-if="command.icon" :name="command.icon" :class="[ui.group.command.icon.base, active ? ui.group.command.icon.active : ui.group.command.icon.inactive, command.iconClass]" aria-hidden="true" />
-              <UAvatar
-                v-else-if="command.avatar"
-                v-bind="{ size: ui.group.command.avatar.size, ...command.avatar }"
-                :class="ui.group.command.avatar.base"
-                aria-hidden="true"
-              />
-              <span v-else-if="command.chip" :class="ui.group.command.chip.base" :style="{ background: `#${command.chip}` }" />
-            </slot>
-
-            <div :class="[ui.group.command.label, command.disabled && ui.group.command.disabled]">
-              <slot :name="`${group.key}-command`" :group="group" :command="command" :active="active" :selected="selected">
-                <span v-if="command.prefix" class="flex-shrink-0" :class="command.prefixClass || ui.group.command.prefix">{{ command.prefix }}</span>
-
-                <span class="truncate" :class="{ 'flex-none': command.suffix || command.matches?.length }">{{ command[commandAttribute] }}</span>
-
-                <!-- eslint-disable-next-line vue/no-v-html -->
-                <span v-if="command.matches?.length" class="truncate" :class="command.suffixClass || ui.group.command.suffix" v-html="highlight(command[commandAttribute], command.matches[0])" />
-                <span v-else-if="command.suffix" class="truncate" :class="command.suffixClass || ui.group.command.suffix">{{ command.suffix }}</span>
-              </slot>
-            </div>
-          </div>
-
-          <UIcon v-if="selected" :name="selectedIcon" :class="ui.group.command.selectedIcon.base" aria-hidden="true" />
-          <slot
-            v-else-if="active && (group.active || $slots[`${group.key}-active`])"
-            :name="`${group.key}-active`"
-            :group="group"
-            :command="command"
-            :active="active"
-            :selected="selected"
-          >
-            <span v-if="group.active" :class="ui.group.active">{{ group.active }}</span>
-          </slot>
-          <slot
-            v-else
-            :name="`${group.key}-inactive`"
-            :group="group"
-            :command="command"
-            :active="active"
-            :selected="selected"
-          >
-            <span v-if="command.shortcuts?.length" :class="ui.group.command.shortcuts">
-              <UKbd v-for="shortcut of command.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
-            </span>
-            <span v-else-if="!command.disabled && group.inactive" :class="ui.group.inactive">{{ group.inactive }}</span>
-          </slot>
-        </div>
-      </HComboboxOption>
-    </div>
-  </div>
-</template>
-
-<script>
-import { computed, defineComponent } from "vue";
-import { ComboboxOption as HComboboxOption, provideUseId } from "@headlessui/vue";
-import UIcon from "../elements/Icon.vue";
-import UAvatar from "../elements/Avatar.vue";
-import UKbd from "../elements/Kbd.vue";
-import { useId } from "#imports";
-export default defineComponent({
-  components: {
-    HComboboxOption,
-    UIcon,
-    UAvatar,
-    UKbd
-  },
-  props: {
-    group: {
-      type: Object,
-      required: true
-    },
-    query: {
-      type: String,
-      default: ""
-    },
-    groupAttribute: {
-      type: String,
-      required: true
-    },
-    commandAttribute: {
-      type: String,
-      required: true
-    },
-    selectedIcon: {
-      type: String,
-      required: true
-    },
-    ui: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props) {
-    const label = computed(() => {
-      const label2 = props.group[props.groupAttribute];
-      return typeof label2 === "function" ? label2(props.query) : label2;
-    });
-    function highlight(text, { indices, value }) {
-      if (text === value) {
-        return "";
-      }
-      let content = "";
-      let nextUnhighlightedIndiceStartingIndex = 0;
-      indices.forEach((indice) => {
-        const lastIndiceNextIndex = indice[1] + 1;
-        const isMatched = lastIndiceNextIndex - indice[0] >= props.query.length;
-        content += [
-          value.substring(nextUnhighlightedIndiceStartingIndex, indice[0]),
-          isMatched && "<mark>",
-          value.substring(indice[0], lastIndiceNextIndex),
-          isMatched && "</mark>"
-        ].filter(Boolean).join("");
-        nextUnhighlightedIndiceStartingIndex = lastIndiceNextIndex;
-      });
-      content += value.substring(nextUnhighlightedIndiceStartingIndex);
-      const index = content.indexOf("<mark>");
-      if (index > 60) {
-        content = `...${content.substring(index - 60)}`;
-      }
-      return content;
-    }
-    provideUseId(() => useId());
-    return {
-      label,
-      highlight
-    };
-  }
-});
-</script>
-
-<style>
-mark{@apply bg-primary-400}
-</style>

package/dist/runtime/components/navigation/CommandPaletteGroup.vue.d.ts

@@ -1,60 +0,0 @@
-import type { PropType } from 'vue';
-import type { Command, Group } from '../../types/index.js';
-import { commandPalette } from '#ui/ui.config';
-declare const _default: import("vue").DefineComponent<{
-    group: {
-        type: PropType<Group>;
-        required: true;
-    };
-    query: {
-        type: StringConstructor;
-        default: string;
-    };
-    groupAttribute: {
-        type: StringConstructor;
-        required: true;
-    };
-    commandAttribute: {
-        type: StringConstructor;
-        required: true;
-    };
-    selectedIcon: {
-        type: StringConstructor;
-        required: true;
-    };
-    ui: {
-        type: PropType<typeof commandPalette>;
-        required: true;
-    };
-}, {
-    label: import("vue").ComputedRef<any>;
-    highlight: (text: string, { indices, value }: Command["matches"][number]) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    group: {
-        type: PropType<Group>;
-        required: true;
-    };
-    query: {
-        type: StringConstructor;
-        default: string;
-    };
-    groupAttribute: {
-        type: StringConstructor;
-        required: true;
-    };
-    commandAttribute: {
-        type: StringConstructor;
-        required: true;
-    };
-    selectedIcon: {
-        type: StringConstructor;
-        required: true;
-    };
-    ui: {
-        type: PropType<typeof commandPalette>;
-        required: true;
-    };
-}>>, {
-    query: string;
-}, {}>;
-export default _default;

package/dist/runtime/components/navigation/HorizontalNavigation.vue

@@ -1,102 +0,0 @@
-<template>
-  <nav :class="ui.wrapper" v-bind="attrs">
-    <ul v-for="(section, sectionIndex) of sections" :key="`section${sectionIndex}`" :class="ui.container">
-      <li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`" :class="ui.inner">
-        <ULink
-          v-slot="{ isActive }"
-          v-bind="getULinkProps(link)"
-          :class="[ui.base, ui.before, ui.after]"
-          :active-class="ui.active"
-          :inactive-class="ui.inactive"
-          @click="link.click"
-          @keyup.enter="$event.target.blur()"
-        >
-          <slot name="avatar" :link="link" :is-active="isActive">
-            <UAvatar
-              v-if="link.avatar"
-              v-bind="{ size: ui.avatar.size, ...link.avatar }"
-              :class="[ui.avatar.base]"
-            />
-          </slot>
-          <slot name="icon" :link="link" :is-active="isActive">
-            <UIcon
-              v-if="link.icon"
-              :name="link.icon"
-              :class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)"
-            />
-          </slot>
-          <slot :link="link" :is-active="isActive">
-            <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">
-              <span v-if="isActive" class="sr-only">
-                Current page:
-              </span>
-              {{ link.label }}
-            </span>
-          </slot>
-          <slot name="badge" :link="link" :is-active="isActive">
-            <UBadge
-              v-if="link.badge"
-              v-bind="{
-                size: ui.badge.size,
-                color: ui.badge.color,
-                variant: ui.badge.variant,
-                ...((typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge)
-              }"
-              :class="ui.badge.base"
-            />
-          </slot>
-        </ULink>
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<script>
-import { toRef, defineComponent, computed } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import UAvatar from "../elements/Avatar.vue";
-import UBadge from "../elements/Badge.vue";
-import ULink from "../elements/Link.vue";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig, getULinkProps } from "../../utils";
-import appConfig from "#build/app.config";
-import { horizontalNavigation } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.horizontalNavigation, horizontalNavigation);
-export default defineComponent({
-  components: {
-    UIcon,
-    UAvatar,
-    UBadge,
-    ULink
-  },
-  inheritAttrs: false,
-  props: {
-    links: {
-      type: Array,
-      default: () => []
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("horizontalNavigation", toRef(props, "ui"), config, toRef(props, "class"));
-    const sections = computed(() => Array.isArray(props.links[0]) ? props.links : [props.links]);
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      sections,
-      getULinkProps,
-      twMerge,
-      twJoin
-    };
-  }
-});
-</script>