@nuxt/ui 3.0.2 → 3.1.0

package/dist/runtime/components/Checkbox.vue

@@ -1,101 +1,60 @@
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { CheckboxRootProps } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/checkbox'
-import { tv } from '../utils/tv'
-
-const appConfigCheckbox = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
-
-const checkbox = tv({ extend: tv(theme), ...(appConfigCheckbox.ui?.checkbox || {}) })
-
-type CheckboxVariants = VariantProps<typeof checkbox>
-
-export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  label?: string
-  description?: string
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: CheckboxVariants['color']
-  /**
-   * @defaultValue 'md'
-   */
-  size?: CheckboxVariants['size']
-  /**
-   * The icon displayed when checked.
-   * @defaultValue appConfig.ui.icons.check
-   * @IconifyIcon
-   */
-  icon?: string
-  /**
-   * The icon displayed when the checkbox is indeterminate.
-   * @defaultValue appConfig.ui.icons.minus
-   * @IconifyIcon
-   */
-  indeterminateIcon?: string
-  class?: any
-  ui?: Partial<typeof checkbox.slots>
-}
-
-export type CheckboxEmits = {
-  change: [payload: Event]
-}
-
-export interface CheckboxSlots {
-  label(props: { label?: string }): any
-  description(props: { description?: string }): any
-}
+<script>
+import theme from "#build/ui/checkbox";
 </script>
 
-<script setup lang="ts">
-import { computed, useId } from 'vue'
-import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useAppConfig } from '#imports'
-import { useFormField } from '../composables/useFormField'
-import UIcon from './Icon.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps<CheckboxProps>()
-const slots = defineSlots<CheckboxSlots>()
-const emits = defineEmits<CheckboxEmits>()
-
-const modelValue = defineModel<boolean | 'indeterminate'>({ default: undefined })
-
-const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
-
-const appConfig = useAppConfig()
-const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<CheckboxProps>(props)
-const id = _id.value ?? useId()
-
-const ui = computed(() => checkbox({
+<script setup>
+import { computed, useId } from "vue";
+import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  indicator: { type: null, required: false },
+  icon: { type: String, required: false },
+  indeterminateIcon: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  value: { type: [String, Number, Object, null], required: false },
+  id: { type: String, required: false },
+  defaultValue: { type: [Boolean, String], required: false }
+});
+const slots = defineSlots();
+const emits = defineEmits(["change"]);
+const modelValue = defineModel({ type: [Boolean, String], ...{ default: void 0 } });
+const appConfig = useAppConfig();
+const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
+const id = _id.value ?? useId();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.checkbox || {} })({
   size: size.value,
   color: color.value,
+  variant: props.variant,
+  indicator: props.indicator,
   required: props.required,
-  disabled: disabled.value,
-  checked: Boolean(modelValue.value ?? props.defaultValue)
-}))
-
-function onUpdate(value: any) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
-  emits('change', event)
-  emitFormChange()
-  emitFormInput()
+  disabled: disabled.value
+}));
+function onUpdate(value) {
+  const event = new Event("change", { target: { value } });
+  emits("change", event);
+  emitFormChange();
+  emitFormInput();
 }
 </script>
 
-<!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
@@ -107,7 +66,7 @@ function onUpdate(value: any) {
         @update:model-value="onUpdate"
       >
         <template #default="{ modelValue }">
-          <CheckboxIndicator as-child>
+          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })">
             <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
             <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
           </CheckboxIndicator>
@@ -115,12 +74,12 @@ function onUpdate(value: any) {
       </CheckboxRoot>
     </div>
 
-    <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+    <div v-if="label || !!slots.label || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
-      </Label>
+      </component>
       <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="description">
           {{ description }}

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

@@ -0,0 +1,76 @@
+import type { CheckboxRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/checkbox';
+import type { ComponentConfig } from '../types/utils';
+type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>;
+export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    label?: string;
+    description?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Checkbox['variants']['color'];
+    /**
+     * @defaultValue 'list'
+     */
+    variant?: Checkbox['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Checkbox['variants']['size'];
+    /**
+     * Position of the indicator.
+     * @defaultValue 'start'
+     */
+    indicator?: Checkbox['variants']['indicator'];
+    /**
+     * The icon displayed when checked.
+     * @defaultValue appConfig.ui.icons.check
+     * @IconifyIcon
+     */
+    icon?: string;
+    /**
+     * The icon displayed when the checkbox is indeterminate.
+     * @defaultValue appConfig.ui.icons.minus
+     * @IconifyIcon
+     */
+    indeterminateIcon?: string;
+    class?: any;
+    ui?: Checkbox['slots'];
+}
+export type CheckboxEmits = {
+    change: [payload: Event];
+};
+export interface CheckboxSlots {
+    label(props: {
+        label?: string;
+    }): any;
+    description(props: {
+        description?: string;
+    }): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    modelValue?: boolean | "indeterminate";
+} & CheckboxProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    modelValue?: boolean | "indeterminate";
+} & CheckboxProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<CheckboxSlots> & CheckboxSlots>;
+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/CheckboxGroup.vue

@@ -0,0 +1,121 @@
+<script>
+import theme from "#build/ui/checkbox-group";
+</script>
+
+<script setup>
+import { computed, useId } from "vue";
+import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { get, omit } from "../utils";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  legend: { type: String, required: false },
+  valueKey: { type: String, required: false, default: "value" },
+  labelKey: { type: String, required: false, default: "label" },
+  descriptionKey: { type: String, required: false, default: "description" },
+  items: { type: Array, required: false },
+  size: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  class: { type: null, required: false },
+  ui: { type: void 0, required: false },
+  defaultValue: { type: Array, required: false },
+  disabled: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  modelValue: { type: Array, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  indicator: { type: null, required: false },
+  icon: { type: String, required: false }
+});
+const emits = defineEmits(["update:modelValue", "change"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emits);
+const checkboxProps = useForwardProps(reactivePick(props, "variant", "indicator", "icon"));
+const proxySlots = omit(slots, ["legend"]);
+const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField(props, { bind: false });
+const id = _id.value ?? useId();
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.checkboxGroup || {} })({
+  size: size.value,
+  required: props.required,
+  orientation: props.orientation
+}));
+function normalizeItem(item) {
+  if (item === null) {
+    return {
+      id: `${id}:null`,
+      value: void 0,
+      label: void 0
+    };
+  }
+  if (typeof item === "string" || typeof item === "number") {
+    return {
+      id: `${id}:${item}`,
+      value: String(item),
+      label: String(item)
+    };
+  }
+  const value = get(item, props.valueKey);
+  const label = get(item, props.labelKey);
+  const description = get(item, props.descriptionKey);
+  return {
+    ...item,
+    value,
+    label,
+    description,
+    id: `${id}:${value}`
+  };
+}
+const normalizedItems = computed(() => {
+  if (!props.items) {
+    return [];
+  }
+  return props.items.map(normalizeItem);
+});
+function onUpdate(value) {
+  const event = new Event("change", { target: { value } });
+  emits("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+</script>
+
+<template>
+  <CheckboxGroupRoot
+    :id="id"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    @update:model-value="onUpdate"
+  >
+    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
+        <slot name="legend">
+          {{ legend }}
+        </slot>
+      </legend>
+
+      <UCheckbox
+        v-for="item in normalizedItems"
+        :key="item.value"
+        v-bind="{ ...item, ...checkboxProps }"
+        :color="color"
+        :size="size"
+        :name="name"
+        :disabled="item.disabled || disabled"
+        :ui="props.ui ? omit(props.ui, ['root']) : void 0"
+        :class="ui.item({ class: props.ui?.item })"
+      >
+        <template v-for="(_, name) in proxySlots" #[name]>
+          <slot :name="name" :item="item" />
+        </template>
+      </UCheckbox>
+    </fieldset>
+  </CheckboxGroupRoot>
+</template>

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

@@ -0,0 +1,75 @@
+import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/checkbox-group';
+import type { CheckboxProps } from '../types';
+import type { AcceptableValue, ComponentConfig } from '../types/utils';
+type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
+export type CheckboxGroupValue = AcceptableValue;
+export type CheckboxGroupItem = {
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    value?: string;
+    [key: string]: any;
+} | CheckboxGroupValue;
+export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupItem> extends Pick<CheckboxGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'variant' | 'indicator' | 'icon'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    legend?: string;
+    /**
+     * When `items` is an array of objects, select the field to use as the value.
+     * @defaultValue 'value'
+     */
+    valueKey?: string;
+    /**
+     * When `items` is an array of objects, select the field to use as the label.
+     * @defaultValue 'label'
+     */
+    labelKey?: string;
+    /**
+     * When `items` is an array of objects, select the field to use as the description.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: string;
+    items?: T[];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: CheckboxGroup['variants']['size'];
+    /**
+     * The orientation the checkbox buttons are laid out.
+     * @defaultValue 'vertical'
+     */
+    orientation?: CheckboxGroupRootProps['orientation'];
+    class?: any;
+    ui?: CheckboxGroup['slots'] & CheckboxProps['ui'];
+}
+export type CheckboxGroupEmits = CheckboxGroupRootEmits & {
+    change: [payload: Event];
+};
+type SlotProps<T extends CheckboxGroupItem> = (props: {
+    item: T & {
+        id: string;
+    };
+}) => any;
+export interface CheckboxGroupSlots<T extends CheckboxGroupItem = CheckboxGroupItem> {
+    legend(props?: {}): any;
+    label: SlotProps<T>;
+    description: SlotProps<T>;
+}
+declare const _default: <T extends CheckboxGroupItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<any & CheckboxGroupProps<T> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<CheckboxGroupSlots<T>> & CheckboxGroupSlots<T>;
+    emit: ((evt: "change", payload: Event) => void) & ((evt: "update:modelValue", value: import("reka-ui").AcceptableValue[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Chip.vue

@@ -1,79 +1,36 @@
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/chip'
-import { tv } from '../utils/tv'
-
-const appConfigChip = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
-
-const chip = tv({ extend: tv(theme), ...(appConfigChip.ui?.chip || {}) })
-
-type ChipVariants = VariantProps<typeof chip>
-
-export interface ChipProps {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  /** Display some text inside the chip. */
-  text?: string | number
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: ChipVariants['color']
-  /**
-   * @defaultValue 'md'
-   */
-  size?: ChipVariants['size']
-  /**
-   * The position of the chip.
-   * @defaultValue 'top-right'
-   */
-  position?: ChipVariants['position']
-  /** When `true`, keep the chip inside the component for rounded elements. */
-  inset?: boolean
-  /** When `true`, render the chip relatively to the parent. */
-  standalone?: boolean
-  class?: any
-  ui?: Partial<typeof chip.slots>
-}
-
-export interface ChipEmits {
-  (e: 'update:show', payload: boolean): void
-}
-
-export interface ChipSlots {
-  default(props?: {}): any
-  content(props?: {}): any
-}
+<script>
+import theme from "#build/ui/chip";
 </script>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Primitive, Slot } from 'reka-ui'
-import { useAvatarGroup } from '../composables/useAvatarGroup'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<ChipProps>(), {
-  inset: false,
-  standalone: false
-})
-defineSlots<ChipSlots>()
-
-const show = defineModel<boolean>('show', { default: true })
-
-const { size } = useAvatarGroup(props)
-
-const ui = computed(() => chip({
+<script setup>
+import { computed } from "vue";
+import { Primitive, Slot } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useAvatarGroup } from "../composables/useAvatarGroup";
+import { tv } from "../utils/tv";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  text: { type: [String, Number], required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  position: { type: null, required: false },
+  inset: { type: Boolean, required: false, default: false },
+  standalone: { type: Boolean, required: false, default: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const show = defineModel("show", { type: Boolean, ...{ default: true } });
+const { size } = useAvatarGroup(props);
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chip || {} })({
   color: props.color,
   size: size.value,
   position: props.position,
   inset: props.inset,
   standalone: props.standalone
-}))
+}));
 </script>
 
 <template>

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

@@ -0,0 +1,71 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chip';
+import type { ComponentConfig } from '../types/utils';
+type Chip = ComponentConfig<typeof theme, AppConfig, 'chip'>;
+export interface ChipProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /** Display some text inside the chip. */
+    text?: string | number;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Chip['variants']['color'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Chip['variants']['size'];
+    /**
+     * The position of the chip.
+     * @defaultValue 'top-right'
+     */
+    position?: Chip['variants']['position'];
+    /** When `true`, keep the chip inside the component for rounded elements. */
+    inset?: boolean;
+    /** When `true`, render the chip relatively to the parent. */
+    standalone?: boolean;
+    class?: any;
+    ui?: Chip['slots'];
+}
+export interface ChipEmits {
+    (e: 'update:show', payload: boolean): void;
+}
+export interface ChipSlots {
+    default(props?: {}): any;
+    content(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    show?: boolean;
+} & ChipProps>, {
+    inset: boolean;
+    standalone: boolean;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    inset: boolean;
+    standalone: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<ChipSlots> & ChipSlots>;
+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];
+} & {};