@nuxt/ui 2.18.3 → 3.0.0-alpha.0

package/dist/runtime/components/Collapsible.vue.d.ts

@@ -0,0 +1,159 @@
+import type { CollapsibleRootProps, CollapsibleRootEmits } from 'radix-vue';
+declare const collapsible: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    content: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>>;
+export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    ui?: Partial<typeof collapsible.slots>;
+}
+export interface CollapsibleEmits extends CollapsibleRootEmits {
+}
+export interface CollapsibleSlots {
+    default(props: {
+        open: boolean;
+    }): any;
+    content(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<CollapsibleProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<CollapsibleProps>>> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<CollapsibleSlots> & CollapsibleSlots>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/CommandPalette.vue

@@ -0,0 +1,210 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/command-palette";
+const appConfig = _appConfig;
+const commandPalette = tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} });
+</script>
+
+<script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
+import { computed } from 'vue'
+import { ComboboxRoot, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxViewport, ComboboxGroup, ComboboxLabel, ComboboxItem, ComboboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'radix-vue'
+import { defu } from 'defu'
+import { reactivePick } from '@vueuse/core'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import { useAppConfig } from '#imports'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import UChip from './Chip.vue'
+import UKbd from './Kbd.vue'
+import UInput from './Input.vue'
+import { omit } from '../utils'
+import { highlight } from '../utils/fuse'
+
+const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
+  modelValue: '',
+  placeholder: 'Type a command or search...'
+})
+const emits = defineEmits<CommandPaletteEmits<T>>()
+const slots = defineSlots<CommandPaletteSlots<G, T>>()
+
+const searchTerm = defineModel<string>('searchTerm', { default: '' })
+
+const appConfig = useAppConfig()
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'selectedValue', 'resetSearchTermOnBlur'), emits)
+const inputProps = useForwardProps(reactivePick(props, 'loading', 'loadingIcon', 'placeholder'))
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = commandPalette()
+
+const fuse = computed(() => defu({}, props.fuse, {
+  fuseOptions: {
+    ignoreLocation: true,
+    threshold: 0.1,
+    keys: ['label', 'suffix']
+  },
+  resultLimit: 12,
+  matchAllWhenSearchEmpty: true
+}))
+
+const items = computed(() => props.groups?.filter((group) => {
+  if (!group.id) {
+    console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`)
+    return false
+  }
+
+  if (group.filter === false) {
+    return false
+  }
+
+  return true
+}).flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
+
+const { results: fuseResults } = useFuse<typeof items.value[number]>(searchTerm, items, fuse)
+
+function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matches'] })[]) {
+  if (group?.postFilter && typeof group.postFilter === 'function') {
+    items = group.postFilter(searchTerm.value, items)
+  }
+
+  return {
+    ...group,
+    items: items.slice(0, fuse.value.resultLimit).map((item) => {
+      return {
+        ...item,
+        labelHtml: highlight<T>(item, searchTerm.value, 'label'),
+        suffixHtml: highlight<T>(item, searchTerm.value, undefined, ['label'])
+      }
+    })
+  }
+}
+
+const groups = computed(() => {
+  const groupsById = fuseResults.value.reduce((acc, result) => {
+    const { item, matches } = result
+    if (!item.group) {
+      return acc
+    }
+
+    acc[item.group] ||= []
+    acc[item.group].push({ ...item, matches })
+
+    return acc
+  }, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)
+
+  const fuseGroups = Object.entries(groupsById).map(([id, items]) => {
+    const group = props.groups?.find(group => group.id === id)
+    if (!group) {
+      return
+    }
+
+    return getGroupWithItems(group, items)
+  }).filter(group => !!group)
+
+  const nonFuseGroups = props.groups?.filter(group => group.filter === false && group.items?.length).map((group) => {
+    return getGroupWithItems(group, group.items || [])
+  }) || []
+
+  return [
+    ...fuseGroups,
+    ...nonFuseGroups
+  ]
+})
+</script>
+
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <ComboboxRoot v-bind="rootProps" v-model:search-term="searchTerm" open :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <ComboboxInput as-child>
+      <UInput
+        variant="none"
+        autofocus
+        size="lg"
+        v-bind="inputProps"
+        :icon="icon || appConfig.ui.icons.search"
+        :class="ui.input({ class: props.ui?.input })"
+      >
+        <template v-if="close || !!slots.close" #trailing>
+          <slot name="close" :ui="ui">
+            <UButton
+              v-if="close"
+              :icon="closeIcon || appConfig.ui.icons.close"
+              size="md"
+              color="gray"
+              variant="ghost"
+              aria-label="Close"
+              v-bind="typeof close === 'object' ? close : undefined"
+              :class="ui.close({ class: props.ui?.close })"
+              @click="emits('update:open', false)"
+            />
+          </slot>
+        </template>
+      </UInput>
+    </ComboboxInput>
+
+    <ComboboxPortal disabled>
+      <ComboboxContent :class="ui.content({ class: props.ui?.content })" :dismissable="false">
+        <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
+          <slot name="empty" :search-term="searchTerm">
+            {{ searchTerm ? `No results for ${searchTerm}` : 'No results' }}
+          </slot>
+        </ComboboxEmpty>
+
+        <ComboboxViewport :class="ui.viewport({ class: props.ui?.viewport })">
+          <ComboboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
+            <ComboboxLabel v-if="group.label" :class="ui.label({ class: props.ui?.label })">
+              {{ group.label }}
+            </ComboboxLabel>
+
+            <ComboboxItem
+              v-for="(item, index) in group.items"
+              :key="`group-${groupIndex}-${index}`"
+              :value="omit(item, ['matches' as any, 'group' as any, 'select', 'labelHtml', 'suffixHtml'])"
+              :disabled="item.disabled"
+              :class="ui.item({ class: props.ui?.item })"
+              @select="item.select"
+            >
+              <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
+                <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
+                  <UAvatar v-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+                  <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
+                  <UChip
+                    v-else-if="item.chip"
+                    :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+                    inset
+                    standalone
+                    v-bind="item.chip"
+                    :class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip })"
+                  />
+                </slot>
+
+                <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
+                  <slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
+                    <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: props.ui?.itemLabelPrefix })">{{ item.prefix }}</span>
+
+                    <span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase })" v-html="item.labelHtml || item.label" />
+
+                    <span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix })" v-html="item.suffixHtml || item.suffix" />
+                  </slot>
+                </span>
+
+                <span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
+                  <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
+                    <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
+                      <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+                    </span>
+                    <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: props.ui?.itemTrailingHighlightedIcon })" />
+                  </slot>
+
+                  <ComboboxItemIndicator as-child>
+                    <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
+                  </ComboboxItemIndicator>
+                </span>
+              </slot>
+            </ComboboxItem>
+          </ComboboxGroup>
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
+</template>