@nuxt/ui 0.4.1 → 2.8.1

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

@@ -0,0 +1,304 @@
+<template>
+  <HCombobox
+    :by="by"
+    :model-value="modelValue"
+    :multiple="multiple"
+    :nullable="nullable"
+    :class="wrapperClass"
+    v-bind="attrs"
+    as="div"
+    @update:model-value="onSelect"
+  >
+    <div v-show="searchable" :class="ui.input.wrapper">
+      <UIcon v-if="iconName" :name="iconName" :class="iconClass" aria-hidden="true" />
+      <HComboboxInput
+        ref="comboboxInput"
+        :value="query"
+        :class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding]"
+        :placeholder="placeholder"
+        autocomplete="off"
+        @change="query = $event.target.value"
+      />
+
+      <UButton
+        v-if="closeButton"
+        v-bind="{ ...ui.default.closeButton, ...closeButton }"
+        :class="ui.input.closeButton"
+        aria-label="Close"
+        @click="onClear"
+      />
+    </div>
+
+    <HComboboxOptions
+      v-if="groups.length"
+      static
+      hold
+      as="div"
+      aria-label="Commands"
+      :class="ui.container"
+    >
+      <CommandPaletteGroup
+        v-for="group of groups"
+        :key="group.key"
+        :query="query"
+        :group="group"
+        :group-attribute="groupAttribute"
+        :command-attribute="commandAttribute"
+        :selected-icon="selectedIcon"
+        :ui="ui"
+      >
+        <template v-for="(_, name) in $slots" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+      </CommandPaletteGroup>
+    </HComboboxOptions>
+
+    <template v-else-if="emptyState">
+      <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="query ? ui.emptyState.queryLabel : ui.emptyState.label">
+            {{ query ? emptyState.queryLabel : emptyState.label }}
+          </p>
+        </div>
+      </slot>
+    </template>
+  </HCombobox>
+</template>
+
+<script>
+import { ref, computed, watch, onMounted, defineComponent } from "vue";
+import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions as HComboboxOptions } from "@headlessui/vue";
+import { useDebounceFn } from "@vueuse/core";
+import { useFuse } from "@vueuse/integrations/useFuse";
+import { twMerge, twJoin } from "tailwind-merge";
+import { groupBy, map, omit } from "lodash-es";
+import { defu } from "defu";
+import UIcon from "../elements/Icon.vue";
+import UButton from "../elements/Button.vue";
+import CommandPaletteGroup from "./CommandPaletteGroup.vue";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  components: {
+    HCombobox,
+    HComboboxInput,
+    HComboboxOptions,
+    UIcon,
+    UButton,
+    CommandPaletteGroup
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [String, Number, Object, Array],
+      default: null
+    },
+    by: {
+      type: String,
+      default: "id"
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    nullable: {
+      type: Boolean,
+      default: false
+    },
+    searchable: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    groups: {
+      type: Array,
+      default: () => []
+    },
+    icon: {
+      type: String,
+      default: () => appConfig.ui.commandPalette.default.icon
+    },
+    loadingIcon: {
+      type: String,
+      default: () => appConfig.ui.commandPalette.default.loadingIcon
+    },
+    selectedIcon: {
+      type: String,
+      default: () => appConfig.ui.commandPalette.default.selectedIcon
+    },
+    closeButton: {
+      type: Object,
+      default: () => appConfig.ui.commandPalette.default.closeButton
+    },
+    emptyState: {
+      type: Object,
+      default: () => appConfig.ui.commandPalette.default.emptyState
+    },
+    placeholder: {
+      type: String,
+      default: "Search..."
+    },
+    groupAttribute: {
+      type: String,
+      default: "label"
+    },
+    commandAttribute: {
+      type: String,
+      default: "label"
+    },
+    autoselect: {
+      type: Boolean,
+      default: true
+    },
+    autoclear: {
+      type: Boolean,
+      default: true
+    },
+    debounce: {
+      type: Number,
+      default: 200
+    },
+    fuse: {
+      type: Object,
+      default: () => ({})
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(props, { emit, attrs, expose }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.commandPalette));
+    const query = ref("");
+    const comboboxInput = ref();
+    const comboboxApi = ref(null);
+    const isLoading = ref(false);
+    onMounted(() => {
+      if (props.autoselect) {
+        activateFirstOption();
+      }
+    });
+    onMounted(() => {
+      setTimeout(() => {
+        const popoverProvides = comboboxInput.value?.$.provides;
+        if (!popoverProvides) {
+          return;
+        }
+        const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides);
+        comboboxApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]];
+      }, 200);
+    });
+    const options = computed(() => defu({}, props.fuse, {
+      fuseOptions: {
+        keys: [props.commandAttribute]
+      },
+      resultLimit: 12,
+      matchAllWhenSearchEmpty: true
+    }));
+    const commands = computed(() => props.groups.filter((group) => !group.search).reduce((acc, group) => {
+      return acc.concat(group.commands.map((command) => ({ ...command, group: group.key })));
+    }, []));
+    const searchResults = ref({});
+    const { results } = useFuse(query, commands, options);
+    const groups = computed(() => [
+      ...map(groupBy(results.value, (command) => command.item.group), (results2, key) => {
+        const commands2 = results2.map((result) => {
+          const { item, ...data } = result;
+          return {
+            ...item,
+            ...data
+          };
+        });
+        return {
+          ...props.groups.find((group) => group.key === key),
+          commands: commands2.slice(0, options.value.resultLimit)
+        };
+      }),
+      ...props.groups.filter((group) => !!group.search).map((group) => ({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })).filter((group) => group.commands.length)
+    ]);
+    const debouncedSearch = useDebounceFn(async () => {
+      const searchableGroups = props.groups.filter((group) => !!group.search);
+      if (!searchableGroups.length) {
+        return;
+      }
+      isLoading.value = true;
+      await Promise.all(searchableGroups.map(async (group) => {
+        searchResults.value[group.key] = await group.search(query.value);
+      }));
+      isLoading.value = false;
+    }, props.debounce);
+    watch(query, () => {
+      debouncedSearch();
+      setTimeout(() => {
+        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" }));
+      }, 0);
+    });
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    const iconName = computed(() => {
+      if ((props.loading || isLoading.value) && props.loadingIcon) {
+        return props.loadingIcon;
+      }
+      return props.icon;
+    });
+    const iconClass = computed(() => {
+      return twJoin(
+        ui.value.input.icon.base,
+        ui.value.input.icon.size,
+        (props.loading || isLoading.value) && props.loadingIcon && "animate-spin"
+      );
+    });
+    const emptyState = computed(() => ({ ...ui.value.default.emptyState, ...props.emptyState }));
+    function activateFirstOption() {
+      setTimeout(() => {
+        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown" }));
+      }, 0);
+    }
+    function onSelect(option) {
+      emit("update:modelValue", option, { query: query.value });
+      if (props.autoclear) {
+        setTimeout(() => {
+          query.value = "";
+        }, 0);
+      }
+    }
+    function onClear() {
+      if (query.value) {
+        query.value = "";
+      } else {
+        emit("close");
+      }
+    }
+    expose({
+      query,
+      updateQuery: (q) => {
+        query.value = q;
+      },
+      comboboxApi,
+      results
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      // eslint-disable-next-line vue/no-dupe-keys
+      groups,
+      comboboxInput,
+      query,
+      wrapperClass,
+      iconName,
+      iconClass,
+      // eslint-disable-next-line vue/no-dupe-keys
+      emptyState,
+      onSelect,
+      onClear
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,224 @@
+/// <reference types="lodash" />
+import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue';
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
+import type { Group, Command } from '../../types/command-palette';
+import type { Button } from '../../types/button';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    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: () => never[];
+    };
+    icon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    selectedIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    closeButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    emptyState: {
+        type: PropType<{
+            icon: string;
+            label: string;
+            queryLabel: string;
+        }>;
+        default: () => any;
+    };
+    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: () => {};
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: ComputedRef<any>;
+    groups: ComputedRef<{
+        commands: any;
+        key: string;
+        active?: string | undefined;
+        inactive?: string | undefined;
+    }[]>;
+    comboboxInput: import("vue").Ref<ComponentPublicInstance<HTMLInputElement> | undefined>;
+    query: import("vue").Ref<string>;
+    wrapperClass: ComputedRef<string>;
+    iconName: ComputedRef<string | undefined>;
+    iconClass: ComputedRef<string>;
+    emptyState: ComputedRef<any>;
+    onSelect: (option: Command | Command[]) => void;
+    onClear: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    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: () => never[];
+    };
+    icon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    selectedIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    closeButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    emptyState: {
+        type: PropType<{
+            icon: string;
+            label: string;
+            queryLabel: string;
+        }>;
+        default: () => any;
+    };
+    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: () => {};
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    icon: string;
+    closeButton: Button;
+    ui: any;
+    modelValue: string | number | unknown[] | Record<string, any>;
+    by: string;
+    loading: boolean;
+    emptyState: {
+        icon: string;
+        label: string;
+        queryLabel: string;
+    };
+    multiple: boolean;
+    placeholder: string;
+    loadingIcon: string;
+    nullable: boolean;
+    selectedIcon: string;
+    searchable: boolean;
+    debounce: number;
+    groups: Group[];
+    groupAttribute: string;
+    commandAttribute: string;
+    autoselect: boolean;
+    autoclear: boolean;
+    fuse: UseFuseOptions<Command>;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,152 @@
+<template>
+  <div :class="ui.group.wrapper" role="option">
+    <h2 v-if="label" :class="ui.group.label">
+      {{ label }}
+    </h2>
+
+    <div :class="ui.group.container" role="listbox" :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 } from "@headlessui/vue";
+import UIcon from "../elements/Icon.vue";
+import UAvatar from "../elements/Avatar.vue";
+import UKbd from "../elements/Kbd.vue";
+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,
+      default: () => ({})
+    }
+  },
+  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;
+    }
+    return {
+      label,
+      highlight
+    };
+  }
+});
+</script>
+
+<style>
+mark {
+  @apply bg-primary-400;
+}
+</style>