nuxt-ui-elements 0.1.34 → 0.1.35

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { addTemplate, defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
+import { addTemplate, defineNuxtModule, createResolver, addImportsDir, addComponentsDir } from '@nuxt/kit';
 import { kebabCase } from 'scule';
 
 const dialogConfirm = (options) => ({
@@ -136,10 +136,41 @@ const dialogAlert = (options) => ({
   }
 });
 
+const toggleGroup = (_options) => ({
+  slots: {
+    root: "flex flex-wrap gap-2",
+    item: [
+      "relative inline-flex items-center justify-center cursor-pointer select-none",
+      "transition-all duration-200",
+      "focus:outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-primary",
+      "disabled:cursor-not-allowed disabled:opacity-50"
+    ]
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex-row"
+      },
+      vertical: {
+        root: "flex-col"
+      }
+    },
+    disabled: {
+      true: {
+        item: "cursor-not-allowed opacity-50"
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+
 const theme = {
   __proto__: null,
   dialogAlert: dialogAlert,
-  dialogConfirm: dialogConfirm
+  dialogConfirm: dialogConfirm,
+  toggleGroup: toggleGroup
 };
 
 function addTemplates(options, _nuxt) {
@@ -253,6 +284,10 @@ const module$1 = defineNuxtModule({
     addImportsDir(resolver.resolve("./runtime/composables"));
     nuxt.options.alias["#std"] = resolver.resolve("./runtime/utils/std");
     nuxt.options.alias["#ui-elements"] = resolver.resolve("./runtime");
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: options.prefix
+    });
   }
 });
 

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

@@ -0,0 +1,72 @@
+import type { ToggleGroupRootProps } from "reka-ui";
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/toggle-group";
+import type { ComponentConfig, GetItemKeys, GetModelValue, NestedItem } from "../types/index.js";
+type ToggleGroup = ComponentConfig<typeof theme, AppConfig, "toggleGroup">;
+/**
+ * Base type for toggle group items. Can be a primitive or an object.
+ */
+export type ToggleGroupItem = string | number | Record<string, any>;
+export interface ToggleGroupProps<T extends ToggleGroupItem[] = ToggleGroupItem[], VK extends GetItemKeys<T> | undefined = "value", M extends boolean = true> extends Pick<ToggleGroupRootProps, "loop" | "disabled" | "name" | "required"> {
+    /**
+     * The items to display
+     */
+    items?: T;
+    /**
+     * When `items` is an array of objects, select the field to use as the value.
+     * When undefined, the whole object is used as the value.
+     * @defaultValue 'value'
+     */
+    valueKey?: VK;
+    /**
+     * The controlled value of the ToggleGroup. Can be bound with `v-model`.
+     * When `multiple` is true, this is an array. Otherwise, it's a single value.
+     */
+    modelValue?: GetModelValue<T, VK, M>;
+    /**
+     * The value when initially rendered. Use when you do not need to control state.
+     */
+    defaultValue?: GetModelValue<T, VK, M>;
+    /**
+     * Allow multiple items to be selected.
+     * @defaultValue true
+     */
+    multiple?: M;
+    /**
+     * The orientation the toggle items are laid out.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical";
+    ui?: ToggleGroup["slots"];
+}
+export interface ToggleGroupEmits<T extends ToggleGroupItem[] = ToggleGroupItem[], VK extends GetItemKeys<T> | undefined = "value", M extends boolean = true> {
+    "update:modelValue": [value: GetModelValue<T, VK, M>];
+    change: [event: Event];
+}
+export interface ToggleGroupSlots<T extends ToggleGroupItem[] = ToggleGroupItem[], I extends NestedItem<T> = NestedItem<T>> {
+    default(props: {
+        item: I;
+        selected: boolean;
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ToggleGroupItem[], VK extends GetItemKeys<T> | undefined = "value", M extends boolean = true>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ToggleGroupProps<T, VK, M> & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ToggleGroupSlots<T, NestedItem<T>>;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/ToggleGroup.vue

@@ -0,0 +1,130 @@
+<script>
+import theme from "#build/ui-elements/toggle-group";
+import { computed } from "vue";
+import { ToggleGroupRoot, ToggleGroupItem as RekaToggleGroupItem } from "reka-ui";
+import { tv } from "../utils/tv";
+import { useFormField } from "@nuxt/ui/composables/useFormField";
+</script>
+
+<script setup>
+const {
+  multiple = true,
+  valueKey = "value",
+  orientation = "horizontal",
+  loop = true,
+  disabled = false,
+  required = false,
+  ui: propUi,
+  ...props
+} = defineProps({
+  items: { type: null, required: false },
+  valueKey: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  multiple: { type: null, required: false },
+  orientation: { type: String, required: false },
+  ui: { type: null, required: false },
+  loop: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+defineSlots();
+const {
+  emitFormChange,
+  emitFormInput,
+  name: formFieldName,
+  disabled: formDisabled
+} = useFormField({ name: props.name, disabled }, { bind: false });
+const ui = computed(
+  () => tv({
+    extend: tv(theme)
+  })({
+    orientation,
+    disabled: formDisabled.value
+  })
+);
+function get(obj, key) {
+  if (obj === void 0 || obj === null) return void 0;
+  return obj[key];
+}
+function getItemValue(item, index) {
+  if (item === null || item === void 0) return index;
+  if (typeof item === "string" || typeof item === "number") return item;
+  if (valueKey === void 0) return item;
+  const val = get(item, valueKey);
+  return val !== void 0 ? val : index;
+}
+function getKeyValue(item, index) {
+  if (item === null || item === void 0) return index;
+  if (typeof item === "string" || typeof item === "number") return item;
+  if (valueKey !== void 0) {
+    const val = get(item, valueKey);
+    return val !== void 0 ? val : index;
+  }
+  return index;
+}
+const internalValue = computed(() => {
+  if (valueKey !== void 0) {
+    return props.modelValue;
+  }
+  if (props.modelValue === void 0 || props.modelValue === null) {
+    return multiple ? [] : void 0;
+  }
+  if (!multiple) {
+    const idx = props.items?.findIndex((item) => item === props.modelValue);
+    return idx !== void 0 && idx >= 0 ? idx : void 0;
+  }
+  const values = props.modelValue;
+  return values.map((val) => {
+    const idx = props.items?.findIndex((item) => item === val);
+    return idx !== void 0 && idx >= 0 ? idx : -1;
+  }).filter((idx) => idx >= 0);
+});
+function onUpdate(value) {
+  if (value === null || value === void 0) return;
+  if (valueKey !== void 0) {
+    emit("update:modelValue", value);
+  } else {
+    if (!multiple) {
+      const item = props.items?.[value];
+      emit("update:modelValue", item);
+    } else {
+      const indices = value;
+      const objects = indices.map((idx) => props.items?.[idx]).filter(Boolean);
+      emit("update:modelValue", objects);
+    }
+  }
+  const event = new Event("change", { target: { value } });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+</script>
+
+<template>
+  <ToggleGroupRoot
+    :type="multiple ? 'multiple' : 'single'"
+    :model-value="internalValue"
+    :default-value="defaultValue"
+    :orientation="orientation"
+    :loop="loop"
+    :disabled="formDisabled"
+    :name="formFieldName"
+    :required="required"
+    data-slot="root"
+    :class="ui.root({ class: [propUi?.root] })"
+    @update:model-value="onUpdate">
+    <RekaToggleGroupItem
+      v-for="(item, index) in items"
+      :key="getKeyValue(item, index)"
+      :value="valueKey === void 0 ? index : getItemValue(item, index)"
+      :disabled="formDisabled"
+      data-slot="item"
+      :class="ui.item({ class: propUi?.item })"
+      #="{ pressed }">
+      <slot v-if="item" :item="item" :selected="pressed" />
+    </RekaToggleGroupItem>
+  </ToggleGroupRoot>
+</template>

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

@@ -0,0 +1,72 @@
+import type { ToggleGroupRootProps } from "reka-ui";
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/toggle-group";
+import type { ComponentConfig, GetItemKeys, GetModelValue, NestedItem } from "../types/index.js";
+type ToggleGroup = ComponentConfig<typeof theme, AppConfig, "toggleGroup">;
+/**
+ * Base type for toggle group items. Can be a primitive or an object.
+ */
+export type ToggleGroupItem = string | number | Record<string, any>;
+export interface ToggleGroupProps<T extends ToggleGroupItem[] = ToggleGroupItem[], VK extends GetItemKeys<T> | undefined = "value", M extends boolean = true> extends Pick<ToggleGroupRootProps, "loop" | "disabled" | "name" | "required"> {
+    /**
+     * The items to display
+     */
+    items?: T;
+    /**
+     * When `items` is an array of objects, select the field to use as the value.
+     * When undefined, the whole object is used as the value.
+     * @defaultValue 'value'
+     */
+    valueKey?: VK;
+    /**
+     * The controlled value of the ToggleGroup. Can be bound with `v-model`.
+     * When `multiple` is true, this is an array. Otherwise, it's a single value.
+     */
+    modelValue?: GetModelValue<T, VK, M>;
+    /**
+     * The value when initially rendered. Use when you do not need to control state.
+     */
+    defaultValue?: GetModelValue<T, VK, M>;
+    /**
+     * Allow multiple items to be selected.
+     * @defaultValue true
+     */
+    multiple?: M;
+    /**
+     * The orientation the toggle items are laid out.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical";
+    ui?: ToggleGroup["slots"];
+}
+export interface ToggleGroupEmits<T extends ToggleGroupItem[] = ToggleGroupItem[], VK extends GetItemKeys<T> | undefined = "value", M extends boolean = true> {
+    "update:modelValue": [value: GetModelValue<T, VK, M>];
+    change: [event: Event];
+}
+export interface ToggleGroupSlots<T extends ToggleGroupItem[] = ToggleGroupItem[], I extends NestedItem<T> = NestedItem<T>> {
+    default(props: {
+        item: I;
+        selected: boolean;
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ToggleGroupItem[], VK extends GetItemKeys<T> | undefined = "value", M extends boolean = true>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ToggleGroupProps<T, VK, M> & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ToggleGroupSlots<T, NestedItem<T>>;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/types/index.d.ts

@@ -1,3 +1,5 @@
 export * from "../components/DialogConfirm.vue.js";
 export * from "../components/DialogAlert.vue.js";
+export * from "../components/ToggleGroup.vue.js";
 export * from "./tv.js";
+export * from "./utils.js";

package/dist/runtime/types/index.js

@@ -1,3 +1,5 @@
 export * from "../components/DialogConfirm.vue";
 export * from "../components/DialogAlert.vue";
+export * from "../components/ToggleGroup.vue";
 export * from "./tv.js";
+export * from "./utils.js";

package/dist/runtime/types/utils.d.ts

@@ -0,0 +1,50 @@
+import type { AcceptableValue as _AcceptableValue } from "reka-ui";
+/**
+ * Excludes plain objects from reka-ui's AcceptableValue to keep primitives separate.
+ * Boolean is added as it's commonly used as a value type.
+ */
+export type AcceptableValue = Exclude<_AcceptableValue, Record<string, any>> | boolean;
+/**
+ * Represents either a flat array or a nested array (for grouped items).
+ */
+export type ArrayOrNested<T> = T[] | T[][];
+/**
+ * Extracts the inner item type from an array, handling nested arrays.
+ */
+export type NestedItem<T> = T extends Array<infer I> ? NestedItem<I> : T;
+/**
+ * Gets all possible keys from an item type, including nested object keys.
+ * Works with arrays of objects to extract the keys of the inner object type.
+ */
+export type GetItemKeys<I> = keyof Extract<NestedItem<I>, object>;
+/**
+ * Determines the value type based on the item type and valueKey.
+ * - When VK is undefined, returns the whole object type T
+ * - When VK is a key of T, returns the type of that property
+ *
+ * @template I The items array type
+ * @template VK The valueKey (keyof item or undefined)
+ * @template T The nested item type (extracted from I)
+ */
+export type GetItemValue<I, VK extends GetItemKeys<I> | undefined, T extends NestedItem<I> = NestedItem<I>> = T extends object ? VK extends undefined ? T : VK extends keyof T ? T[VK] : never : T;
+/**
+ * Determines the modelValue type based on item type, valueKey, and selection mode.
+ * - For single selection (M = false): returns GetItemValue<T, VK>
+ * - For multiple selection (M = true): returns GetItemValue<T, VK>[]
+ *
+ * @template T The items array type
+ * @template VK The valueKey (keyof item or undefined)
+ * @template M Whether multiple selection is enabled
+ */
+export type GetModelValue<T, VK extends GetItemKeys<T> | undefined, M extends boolean> = M extends true ? GetItemValue<T, VK>[] : GetItemValue<T, VK>;
+/**
+ * Defines the emit type for modelValue updates.
+ *
+ * @template T The items array type
+ * @template VK The valueKey (keyof item or undefined)
+ * @template M Whether multiple selection is enabled
+ */
+export type GetModelValueEmits<T, VK extends GetItemKeys<T> | undefined, M extends boolean> = {
+    /** Event handler called when the value changes. */
+    "update:modelValue": [value: GetModelValue<T, VK, M>];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",