@nuxt/ui 2.18.4 → 3.0.0-alpha.0

package/dist/runtime/components/Separator.vue

@@ -0,0 +1,47 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/separator";
+const appConfig = _appConfig;
+const separator = tv({ extend: tv(theme), ...appConfig.ui?.separator || {} });
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Separator, useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+
+const props = withDefaults(defineProps<SeparatorProps>(), {
+  orientation: 'horizontal'
+})
+const slots = defineSlots<SeparatorSlots>()
+
+const rootProps = useForwardProps(reactivePick(props, 'as', 'decorative', 'orientation'))
+
+const ui = computed(() => separator({
+  color: props.color,
+  orientation: props.orientation,
+  size: props.size,
+  type: props.type
+}))
+</script>
+
+<template>
+  <Separator v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <div :class="ui.border({ class: props.ui?.border })" />
+
+    <template v-if="label || icon || avatar || !!slots.default">
+      <div :class="ui.container({ class: props.ui?.container })">
+        <slot>
+          <span v-if="label" :class="ui.label({ class: props.ui?.label })">{{ label }}</span>
+          <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <UAvatar v-else-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+        </slot>
+      </div>
+
+      <div :class="ui.border({ class: props.ui?.border })" />
+    </template>
+  </Separator>
+</template>

package/dist/runtime/components/Skeleton.vue

@@ -0,0 +1,19 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/skeleton";
+const appConfig = _appConfig;
+const skeleton = tv({ extend: tv(theme), ...appConfig.ui?.skeleton || {} });
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'radix-vue'
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <Primitive :as="as" :class="skeleton({ class: props.class })">
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,26 @@
+export interface SkeletonProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<SkeletonProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<SkeletonProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+}>;
+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/Slideover.vue

@@ -0,0 +1,101 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/slideover";
+const appConfig = _appConfig;
+const slideover = tv({ extend: tv(theme), ...appConfig.ui?.slideover || {} });
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import UButton from './Button.vue'
+
+const props = withDefaults(defineProps<SlideoverProps>(), {
+  close: true,
+  portal: true,
+  overlay: true,
+  transition: true,
+  modal: true,
+  side: 'right'
+})
+const emits = defineEmits<SlideoverEmits>()
+const slots = defineSlots<SlideoverSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const contentProps = toRef(() => props.content)
+const contentEvents = computed(() => {
+  if (props.preventClose) {
+    return {
+      pointerDownOutside: (e: Event) => e.preventDefault(),
+      interactOutside: (e: Event) => e.preventDefault()
+    }
+  }
+
+  return {}
+})
+
+const appConfig = useAppConfig()
+
+const ui = computed(() => slideover({
+  transition: props.transition,
+  side: props.side
+}))
+</script>
+
+<template>
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child>
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <DialogPortal :disabled="!portal">
+      <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+
+      <DialogContent :data-side="side" :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <slot name="content">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+            <slot name="header">
+              <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                <slot name="title">
+                  {{ title }}
+                </slot>
+              </DialogTitle>
+
+              <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                <slot name="description">
+                  {{ description }}
+                </slot>
+              </DialogDescription>
+
+              <DialogClose as-child>
+                <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 })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div :class="ui.body({ class: props.ui?.body })">
+            <slot name="body" />
+          </div>
+
+          <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+            <slot name="footer" />
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

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

@@ -0,0 +1,375 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix-vue';
+import type { ButtonProps } from '../types.js';
+declare const slideover: import("tailwind-variants").TVReturnType<{
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    body: string;
+    footer: string;
+    title: string;
+    description: string;
+    close: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+    };
+}, {
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+    };
+}>, {
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    body: string;
+    footer: string;
+    title: string;
+    description: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    body: string;
+    footer: string;
+    title: string;
+    description: string;
+    close: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+    };
+}, {
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+    };
+}>, {
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    body: string;
+    footer: string;
+    title: string;
+    description: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    body: string;
+    footer: string;
+    title: string;
+    description: string;
+    close: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+    };
+}, {
+    side: {
+        top: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+    };
+}>, unknown, unknown, undefined>>>;
+type SlideoverVariants = VariantProps<typeof slideover>;
+export interface SlideoverProps extends DialogRootProps {
+    title?: string;
+    description?: string;
+    /** The content of the slideover. */
+    content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>;
+    /**
+     * Render an overlay behind the slideover.
+     * @defaultValue true
+     */
+    overlay?: boolean;
+    /**
+     * Animate the slideover when opening or closing.
+     * @defaultValue true
+     */
+    transition?: boolean;
+    side?: SlideoverVariants['side'];
+    /**
+     * Render the slideover in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean;
+    /**
+     * Display a close button to dismiss the slideover.
+     * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    close?: ButtonProps | boolean;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     */
+    closeIcon?: string;
+    /**
+     * When `true`, the slideover will not close when clicking outside.
+     * @defaultValue false
+     */
+    preventClose?: boolean;
+    class?: any;
+    ui?: Partial<typeof slideover.slots>;
+}
+export interface SlideoverEmits extends DialogRootEmits {
+}
+export interface SlideoverSlots {
+    default(props: {
+        open: boolean;
+    }): any;
+    content(props?: {}): any;
+    header(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    close(props: {
+        ui: any;
+    }): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<SlideoverProps>, {
+    close: boolean;
+    portal: boolean;
+    overlay: boolean;
+    transition: boolean;
+    modal: boolean;
+    side: string;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<SlideoverProps>, {
+    close: boolean;
+    portal: boolean;
+    overlay: boolean;
+    transition: boolean;
+    modal: boolean;
+    side: string;
+}>>> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    close: ButtonProps | boolean;
+    transition: boolean;
+    overlay: boolean;
+    portal: boolean;
+    modal: boolean;
+    side: "left" | "right" | "top" | "bottom";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<SlideoverSlots> & SlideoverSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+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;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/SlideoverProvider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { slideoverInjectionKey, useSlideover } from '../composables/useSlideover'
+
+const slideoverState = inject(slideoverInjectionKey)
+
+const { isOpen } = useSlideover()
+</script>
+
+<template>
+  <component :is="slideoverState.component" v-if="slideoverState" v-bind="slideoverState.props" v-model:open="isOpen" />
+</template>

package/dist/runtime/components/Slider.vue

@@ -0,0 +1,83 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/slider";
+const appConfig = _appConfig;
+const slider = tv({ extend: tv(theme), ...appConfig.ui?.slider || {} });
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  orientation: 'horizontal'
+})
+const emits = defineEmits<SliderEmits>()
+
+const modelValue = defineModel<number | number[]>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
+
+const { id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SliderProps>(props)
+
+const defaultSliderValue = computed(() => {
+  if (typeof props.defaultValue === 'number') {
+    return [props.defaultValue]
+  }
+  return props.defaultValue
+})
+
+const sliderValue = computed({
+  get() {
+    if (typeof modelValue.value === 'number') {
+      return [modelValue.value]
+    }
+    return modelValue.value ?? defaultSliderValue.value
+  },
+  set(value) {
+    modelValue.value = value?.length !== 1 ? value : value[0]
+  }
+})
+
+const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
+
+const ui = computed(() => slider({
+  disabled: disabled.value,
+  size: size.value,
+  color: color.value,
+  orientation: props.orientation
+}))
+
+function onChange(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+}
+</script>
+
+<template>
+  <SliderRoot
+    v-bind="rootProps"
+    :id="id"
+    v-model="sliderValue"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :default-value="defaultSliderValue"
+    @update:model-value="emitFormInput()"
+    @value-commit="onChange"
+  >
+    <SliderTrack :class="ui.track({ class: props.ui?.track })">
+      <SliderRange :class="ui.range({ class: props.ui?.range })" />
+    </SliderTrack>
+
+    <SliderThumb v-for="count in thumbsCount" :key="count" :class="ui.thumb({ class: props.ui?.thumb })" />
+  </SliderRoot>
+</template>