nuxt-ui-elements 0.1.33 → 0.1.35

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.33",
+  "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, addImports } 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) {
@@ -251,14 +282,12 @@ const module$1 = defineNuxtModule({
     addTemplates(optionsWithTheme);
     nuxt.options.css.push(resolver.resolve("./runtime/index.css"));
     addImportsDir(resolver.resolve("./runtime/composables"));
-    addImports([
-      {
-        name: "useUploadManager",
-        from: resolver.resolve("./runtime/composables/useUploadManager")
-      }
-    ]);
     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,6 +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 "../composables/useUploadManager/types.js";
-export * from "../composables/useUploadManager/plugins/index.js";
-export * from "../composables/useUploadManager/validators/index.js";
+export * from "./utils.js";

package/dist/runtime/types/index.js

@@ -1,6 +1,5 @@
 export * from "../components/DialogConfirm.vue";
 export * from "../components/DialogAlert.vue";
+export * from "../components/ToggleGroup.vue";
 export * from "./tv.js";
-export * from "../composables/useUploadManager/types.js";
-export * from "../composables/useUploadManager/plugins/index.js";
-export * from "../composables/useUploadManager/validators/index.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.33",
+  "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",
@@ -28,15 +28,11 @@
     "@internationalized/date": "^3.10.1",
     "@nuxt/kit": "^4.2.2",
     "@sindresorhus/slugify": "^3.0.0",
-    "mitt": "^3.0.1",
     "plur": "^6.0.0",
     "scule": "^1.3.0",
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
-    "@azure/storage-file-datalake": "^12.28.1",
-    "@ffmpeg/ffmpeg": "0.12.15",
-    "@ffmpeg/util": "0.12.2",
     "@nuxt/devtools": "^3.1.1",
     "@nuxt/eslint-config": "^1.12.1",
     "@nuxt/module-builder": "^1.0.2",
@@ -49,7 +45,7 @@
     "changelogen": "^0.6.2",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-prettier": "5.5.4",
+    "eslint-plugin-prettier": "5.5.5",
     "nuxt": "^4.2.2",
     "prettier": "^3.7.4",
     "typescript": "~5.9.3",
@@ -59,17 +55,6 @@
   "peerDependencies": {
     "@nuxt/ui": "^4.0.0"
   },
-  "peerDependenciesMeta": {
-    "@azure/storage-file-datalake": {
-      "optional": true
-    },
-    "@ffmpeg/ffmpeg": {
-      "optional": true
-    },
-    "@ffmpeg/util": {
-      "optional": true
-    }
-  },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",

package/dist/runtime/composables/useFFMpeg.d.ts

@@ -1,14 +0,0 @@
-interface FFMPegOptions {
-    inputUrl: string;
-    convertOptions?: string[];
-}
-export declare const useFFMpeg: (options: FFMPegOptions) => {
-    status: import("vue").Ref<"success" | "error" | "paused" | "converting", "success" | "error" | "paused" | "converting">;
-    progress: import("vue").Ref<number, number>;
-    convertedFile: import("vue").Ref<File | undefined, File | undefined>;
-    load: () => Promise<void>;
-    unload: () => void;
-    convert: (convertOptions: string[]) => Promise<File | undefined>;
-    onConvertSuccess: (callback: (updatedVideo: File) => void) => (updatedVideo: File) => void;
-};
-export {};

package/dist/runtime/composables/useFFMpeg.js

@@ -1,66 +0,0 @@
-import { FFmpeg } from "@ffmpeg/ffmpeg";
-import { fetchFile, toBlobURL } from "@ffmpeg/util";
-import { ref } from "vue";
-const defaultOptions = {
-  convertOptions: []
-};
-const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm";
-export const useFFMpeg = (options) => {
-  options = { ...defaultOptions, ...options };
-  const ffmpeg = new FFmpeg();
-  const status = ref("paused");
-  const progress = ref(0);
-  const originalFile = ref();
-  const convertedFile = ref();
-  let _onConvertSuccess;
-  ffmpeg.on("progress", ({ time }) => {
-    progress.value = time / 1e6;
-  });
-  const load = async () => {
-    await ffmpeg.load({
-      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
-      wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm")
-    });
-  };
-  const unload = () => ffmpeg.terminate();
-  const convert = async (convertOptions) => {
-    status.value = "converting";
-    const command = ["-i", "input.avi", ...options.convertOptions, ...convertOptions, "-c", "copy", "output.mp4"];
-    try {
-      originalFile.value = await fetchFile(options.inputUrl);
-      await ffmpeg.writeFile("input.avi", originalFile.value);
-      await ffmpeg.exec(command);
-      convertedFile.value = await getModifiedVideo();
-      await ffmpeg.deleteFile("input.avi");
-      status.value = "success";
-      if (_onConvertSuccess) _onConvertSuccess(convertedFile.value);
-      return convertedFile.value;
-    } catch (error) {
-      if (import.meta.env.DEV) console.error(error);
-      status.value = "error";
-    }
-  };
-  const getModifiedVideo = async () => {
-    const data = await ffmpeg.readFile("output.mp4");
-    let bytes;
-    if (typeof data === "string") {
-      bytes = new TextEncoder().encode(data);
-    } else {
-      const buffer = new ArrayBuffer(data.byteLength);
-      new Uint8Array(buffer).set(data);
-      bytes = new Uint8Array(buffer);
-    }
-    const updatedFile = new File([bytes], "output.mp4", { type: "video/mp4" });
-    return updatedFile;
-  };
-  const onConvertSuccess = (callback) => _onConvertSuccess = callback;
-  return {
-    status,
-    progress,
-    convertedFile,
-    load,
-    unload,
-    convert,
-    onConvertSuccess
-  };
-};