@resee-movies/nuxt-ux 0.5.0 → 0.6.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/runtime/components/IconTextPair.vue

@@ -50,5 +50,5 @@ const slots = useSlots();
 </script>
 
 <style scoped>
-@reference "tailwindcss";.pair{--element-spacing:--spacing(1);align-items:baseline;display:inline}.pair.spacing-none{--element-spacing:0}.pair.spacing-wide{--element-spacing:--spacing(2)}.pair :deep(.leading-icon)>*{margin-inline-end:var(--element-spacing)}.pair :deep(.trailing-icon)>*{margin-inline-start:var(--element-spacing)}@variant max-md{.pair:is(.responsive-shrink .pair) :deep(.leading-icon)>*{margin-inline-end:0}.pair:is(.responsive-shrink .pair) :deep(.trailing-icon)>*{margin-inline-start:0}}
+@reference "tailwindcss";.pair{--element-spacing:--spacing(1);align-items:baseline;display:inline}.pair.spacing-none{--element-spacing:0}.pair.spacing-wide{--element-spacing:--spacing(2)}.pair :deep(.leading-icon)>*{margin-inline-end:var(--element-spacing)}.pair :deep(.trailing-icon)>*{margin-inline-start:var(--element-spacing)}@variant max-md{.pair:is(.responsive-shrink .pair):deep(.leading-icon)>*{margin-inline-end:0}.pair:is(.responsive-shrink .pair):deep(.trailing-icon)>*{margin-inline-start:0}}
 </style>

package/dist/runtime/components/ToggleButton.vue

@@ -0,0 +1,45 @@
+<template>
+  <Button
+    :text         = "currentText"
+    :icon         = "currentIcon"
+    :aria-pressed = "pressed"
+    @click        = "handleClick"
+  >
+    <template #default v-if="slots.default">
+      <slot />
+    </template>
+  </Button>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { computed, useSlots, watch } from "vue";
+import Button from "./Button.vue";
+const props = defineProps({
+  onIcon: { type: String, required: false, default: void 0 },
+  offIcon: { type: String, required: false, default: void 0 },
+  onText: { type: String, required: false, default: void 0 },
+  offText: { type: String, required: false, default: void 0 }
+});
+const emits = defineEmits(["click", "change"]);
+const pressed = defineModel("pressed", { type: Boolean, ...{ default: false } });
+const slots = useSlots();
+const currentText = computed(() => {
+  return pressed.value ? props.onText ?? props.text : props.offText ?? props.text;
+});
+const currentIcon = computed(() => {
+  return pressed.value ? props.onIcon ?? props.icon : props.offIcon ?? props.icon;
+});
+watch(pressed, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    emits("change", newVal);
+  }
+});
+function handleClick() {
+  pressed.value = !pressed.value;
+  emits("click", pressed.value);
+}
+</script>

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

@@ -0,0 +1,30 @@
+import type { ButtonProps } from './Button.vue.js';
+export interface ToggleButtonProps extends /* @vue-ignore */ Omit<ButtonProps, 'onClick' | 'trailingIcon' | 'trailingIconSize'> {
+    onIcon?: string;
+    offIcon?: string;
+    onText?: string;
+    offText?: string;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToggleButtonProps & {
+    pressed?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:pressed": (value: boolean) => any;
+} & {
+    change: (pressed: boolean) => any;
+    click: (pressed: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ToggleButtonProps & {
+    pressed?: boolean;
+}> & Readonly<{
+    onChange?: ((pressed: boolean) => any) | undefined;
+    onClick?: ((pressed: boolean) => any) | undefined;
+    "onUpdate:pressed"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/Form.vue

@@ -1,6 +1,7 @@
 <template>
   <PrimeForm
     v-slot                    = "$form"
+    ref                       = "form"
     novalidate                = "true"
     :validate-on-mount        = "true"
     :validate-on-submit       = "true"
@@ -19,20 +20,46 @@ export * from "../../types/form";
 </script>
 
 <script setup>
-import PrimeForm from "@primevue/forms/form";
+import PrimeForm, {} from "@primevue/forms/form";
 import { toNonNullableArray } from "@resee-movies/utilities/arrays/to-non-nullable-array";
 import { isPromiseLike } from "@resee-movies/utilities/objects/is-promise-like";
-import { syncRefs } from "@vueuse/core";
+import { syncRefs, watchDebounced } from "@vueuse/core";
+import { useTemplateRef, watchEffect } from "vue";
 import { provideFormInstance, getValuesFromFormState } from "../../utils/form";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   initialValues: { type: Object, required: false },
-  onSubmit: { type: [Function, Array], required: false }
+  onSubmit: { type: [Function, Array], required: false },
+  onChange: { type: Function, required: false },
+  onChangeDebounce: { type: Number, required: false, default: 32 }
 });
-defineEmits(["submit"]);
+defineEmits(["submit", "change"]);
 const formInstance = provideFormInstance();
 syncRefs(() => props.disabled, formInstance.isDisabled);
+const form = useTemplateRef("form");
+let oldValues = void 0;
+const changeHandles = watchDebounced(
+  () => form.value?.states,
+  (newState) => {
+    const newValues = newState ? getValuesFromFormState(newState) : null;
+    const stringify = JSON.stringify(newValues);
+    if (stringify !== oldValues) {
+      props.onChange?.(newValues);
+      oldValues = stringify;
+    }
+  },
+  {
+    debounce: props.onChangeDebounce,
+    deep: 2
+  }
+);
+watchEffect(() => {
+  changeHandles[props.onChange ? "resume" : "pause"]();
+});
 async function handleFormSubmit(event) {
+  if (props.disabled) {
+    return;
+  }
   formInstance.hasSubmitted.value = true;
   if (!event.valid) {
     return;

package/dist/runtime/components/form/Form.vue.d.ts

@@ -4,9 +4,14 @@ export interface FormProps<T extends FormValues = FormValues> {
     disabled?: boolean;
     initialValues?: Record<string, unknown>;
     onSubmit?: FormSubmitHandler<T> | FormSubmitHandler<T>[];
+    onChange?: (values: T | null) => void;
+    onChangeDebounce?: number;
 }
 declare const __VLS_export: <T extends FormValues>(__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<FormProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(e: "submit", evt: FormSubmitEvent<T>) => (void | Promise<void>)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    props: __VLS_PrettifyLocal<FormProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<{
+        (e: "submit", evt: FormSubmitEvent<T>): (void | Promise<void>);
+        (e: "change", values: T): void;
+    }>>> & import("vue").PublicProps & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -16,7 +21,10 @@ declare const __VLS_export: <T extends FormValues>(__VLS_props: NonNullable<Awai
             state: any;
         }) => any;
     };
-    emit: (e: "submit", evt: FormSubmitEvent<T>) => (void | Promise<void>);
+    emit: {
+        (e: "submit", evt: FormSubmitEvent<T>): (void | Promise<void>);
+        (e: "change", values: T): void;
+    };
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/form/FormField.vue

@@ -13,7 +13,7 @@
       :label-text     = "labelText"
       :label-position = "props.labelPosition"
       :label-sr-only  = "props.labelSrOnly"
-      :disabled       = "props.disabled"
+      :disabled       = "isDisabled && !isReadonly"
       :required       = "props.required"
       :faux-label     = "props.fauxLabel"
     >
@@ -31,6 +31,11 @@
           :message-id = "$field.error ? messageId : void 0"
           :disabled   = "isDisabled"
           :readonly   = "isReadonly"
+          :invalid    = "$field.invalid"
+          :on-blur    = "$field.props.onBlur"
+          :on-change  = "$field.props.onChange"
+          :on-input   = "$field.props.onInput"
+          :on-invalid = "$field.props.onInvalid"
         />
       </template>
     </FormLabelInputPair>

package/dist/runtime/components/form/FormField.vue.d.ts

@@ -26,6 +26,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFi
         messageId: any;
         disabled: any;
         readonly: any;
+        invalid: any;
+        onBlur: any;
+        onChange: any;
+        onInput: any;
+        onInvalid: any;
     }) => any;
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/FormFieldCheckbox.vue

@@ -15,7 +15,11 @@
         :disabled         = "disabled || readonly"
         :readonly         = "readonly"
         class             = "input-group"
-      />
+      >
+        <template #icon="{ checked }">
+          <Icon v-if="checked" name="i-ph-check-bold" />
+        </template>
+      </PrimeCheckbox>
     </template>
   </FormField>
 </template>
@@ -28,6 +32,7 @@ import { computed } from "vue";
 import PrimeCheckbox from "primevue/checkbox";
 import { createBooleanValidator } from "../../utils/validation";
 import FormField from "./FormField.vue";
+import Icon from "../Icon.vue";
 const props = defineProps({
   value: { type: null, required: false, default: void 0 },
   trueValue: { type: null, required: false, default: () => true },

package/dist/runtime/components/form/FormFieldSelect.vue

@@ -24,7 +24,16 @@
         :filter-placeholder    = "props.filterPlaceholder"
         :loading               = "props.loading"
         :selection-limit       = "props.maxRequired"
-      />
+      >
+        <template #option="{ option, selected, index }" v-if="slots.option">
+          <slot
+            name      = "option"
+            :option   = "option"
+            :selected = "selected"
+            :index    = "index"
+          />
+        </template>
+      </FormElementSelectOptions>
     </template>
   </FormField>
 </template>
@@ -34,7 +43,7 @@ import {} from "./FormField.vue";
 </script>
 
 <script setup>
-import { computed } from "vue";
+import { computed, useSlots } from "vue";
 import { createBooleanValidator, createListValidator } from "../../utils/validation";
 import FormField from "./FormField.vue";
 import FormElementSelectOptions from "./element/FormElementSelectOptions.vue";
@@ -64,6 +73,7 @@ const props = defineProps({
   labelPosition: { type: String, required: false },
   class: { type: null, required: false }
 });
+const slots = useSlots();
 const validatorFunction = computed(() => {
   return props.multiple ? () => createListValidator({
     required: props.required,

package/dist/runtime/components/form/FormFieldSelect.vue.d.ts

@@ -1,6 +1,6 @@
 import { type FormFieldProps } from './FormField.vue.js';
-export interface FormFieldSelectProps extends Omit<FormFieldProps, 'validator'> {
-    options?: unknown[];
+export interface FormFieldSelectProps<T = unknown> extends Omit<FormFieldProps, 'validator'> {
+    options?: T[];
     optionLabel?: string;
     optionValue?: string;
     optionDisabled?: string;
@@ -14,13 +14,27 @@ export interface FormFieldSelectProps extends Omit<FormFieldProps, 'validator'>
     minRequired?: string | number;
     maxRequired?: string | number;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    label?: (props: {}) => any;
-}>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+declare const __VLS_export: <T>(__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<FormFieldSelectProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        label?: (props: {}) => any;
+    } & {
+        option?: (props: {
+            option: T;
+            selected: any;
+            index: any;
+        }) => any;
     };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/form/FormFieldSelectButton.vue

@@ -0,0 +1,76 @@
+<template>
+  <FormField v-bind="props" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ labelId, messageId, invalid, disabled, readonly, onChange, onBlur }">
+      <FormElementSelectButton
+        :aria-labelledby  = "labelId"
+        :aria-describedby = "messageId"
+        :aria-invalid     = "invalid"
+        :disabled         = "disabled"
+        :readonly         = "readonly"
+        :options          = "props.options"
+        :option-label     = "props.optionLabel"
+        :option-icon      = "props.optionIcon"
+        :option-value     = "props.optionValue"
+        :option-disabled  = "props.optionDisabled"
+        :option-data-key  = "props.optionDataKey"
+        :icon-only        = "props.iconOnly"
+        :multiple         = "props.multiple"
+        :selection-limit  = "props.maxRequired ? toInteger(props.maxRequired) : void 0"
+        @change           = "onChange"
+        @focusout         = "onBlur"
+      />
+    </template>
+  </FormField>
+</template>
+
+<script>
+import {} from "./element/FormElementSelectButton.vue";
+import {} from "./FormField.vue";
+</script>
+
+<script setup>
+import { toInteger } from "@resee-movies/utilities/numbers/to-integer";
+import { computed } from "vue";
+import { createBooleanValidator, createListValidator } from "../../utils/validation";
+import FormField from "./FormField.vue";
+import FormElementSelectButton from "./element/FormElementSelectButton.vue";
+const props = defineProps({
+  minRequired: { type: [String, Number], required: false },
+  maxRequired: { type: [String, Number], required: false },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  initialValue: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false, default: true },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  class: { type: null, required: false },
+  options: { type: Array, required: true },
+  optionLabel: { type: String, required: false },
+  optionIcon: { type: String, required: false },
+  optionValue: { type: String, required: false },
+  optionDisabled: { type: String, required: false },
+  optionDataKey: { type: String, required: false },
+  iconOnly: { type: Boolean, required: false, default: false },
+  multiple: { type: Boolean, required: false, default: false },
+  ariaLabelledby: { type: String, required: false },
+  ariaDescribedby: { type: String, required: false },
+  selectionLimit: { type: Number, required: false }
+});
+const validatorFunction = computed(() => {
+  return props.multiple ? () => createListValidator({
+    required: props.required,
+    minRequired: props.minRequired,
+    maxRequired: props.maxRequired
+  }) : () => createBooleanValidator({
+    required: props.required
+  });
+});
+</script>

package/dist/runtime/components/form/FormFieldSelectButton.vue.d.ts

@@ -0,0 +1,16 @@
+import { type FormElementSelectButtonProps } from './element/FormElementSelectButton.vue.js';
+import { type FormFieldProps } from './FormField.vue.js';
+export interface FormFieldSelectButtonProps extends Omit<FormFieldProps, 'validator'>, FormElementSelectButtonProps {
+    minRequired?: string | number;
+    maxRequired?: string | number;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldSelectButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldSelectButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/FormSubmitButton.vue

@@ -1,8 +1,10 @@
 <template>
   <Button
-    v-bind               = "props"
     type                 = "submit"
+    :text                = "props.text ?? locale.form.submitButtonLabel"
     :loading             = "formState.isSubmitting.value"
+    :disabled            = "formState.isDisabled.value"
+    :bordered            = "props.bordered"
     icon-transition-name = "grow-x"
   />
 </template>
@@ -12,28 +14,13 @@
 </script>
 
 <script setup>
+import { useReseeUx } from "../../composables/use-resee-ux";
 import { injectFormInstance } from "../../utils/form";
 import Button from "../Button.vue";
 const props = defineProps({
-  is: { type: null, required: false },
-  severity: { type: String, required: false },
-  bordered: { type: Boolean, required: false, default: true },
-  responsive: { type: [Boolean, String], required: false },
-  variant: { type: String, required: false },
-  size: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  tooltip: { type: String, required: false },
-  disabledTooltip: { type: String, required: false },
-  type: { type: String, required: false },
-  text: { type: String, required: false, default: "Submit" },
-  icon: { type: String, required: false },
-  trailingIcon: { type: String, required: false },
-  iconSize: { type: String, required: false },
-  trailingIconSize: { type: String, required: false },
-  spacing: { type: String, required: false },
-  iconTransitionName: { type: String, required: false },
-  iconTransitionMode: { type: String, required: false },
-  iconTransitionOnAppear: { type: Boolean, required: false }
+  text: { type: String, required: false, default: void 0 },
+  bordered: { type: Boolean, required: false, default: true }
 });
 const formState = injectFormInstance();
+const { locale } = useReseeUx();
 </script>

package/dist/runtime/components/form/FormSubmitButton.vue.d.ts

@@ -1,5 +1,7 @@
 import type { ButtonProps } from '../Button.vue.js';
-export interface FormSubmitButtonProps extends Omit<ButtonProps, 'onClick' | 'loading'> {
+export interface FormSubmitButtonProps extends /* @vue-ignore */ Omit<ButtonProps, 'onClick' | 'loading'> {
+    text?: string;
+    bordered?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<FormSubmitButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormSubmitButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/element/FormElementSelectButton.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    role              = "group"
+    class             = "input-group input-button-bar"
+    :aria-labelledby  = "props.ariaLabelledby"
+    :aria-describedby = "props.ariaDescribedby"
+  >
+    <template v-for="(option, index) of props.options" :key="getOptionRenderKey(option) ?? index">
+      <ToggleButton
+        severity    = "unset"
+        :pressed    = "getSelectedOptionIndex(option) !== -1"
+        :text       = "props.iconOnly ? void 0 : getOptionLabel(option)"
+        :icon       = "getOptionIcon(option)"
+        :disabled   = "getOptionDisabled(option)"
+        :aria-label = "props.iconOnly ? getOptionLabel(option) : void 0"
+        :tooltip    = "props.iconOnly ? getOptionLabel(option) : void 0"
+        @click      = "(pressed) => handleToggleChange(option, pressed)"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+export class ChangeEvent extends Event {
+  value;
+  constructor(value) {
+    super("change");
+    this.value = value;
+  }
+}
+</script>
+
+<script setup>
+import { equals, resolveFieldData } from "@primeuix/utils/object";
+import { isNumber } from "@resee-movies/utilities/numbers/is-number";
+import { isString } from "@resee-movies/utilities/strings/is-string";
+import ToggleButton from "../../ToggleButton.vue";
+const props = defineProps({
+  options: { type: Array, required: true },
+  optionLabel: { type: String, required: false },
+  optionIcon: { type: String, required: false },
+  optionValue: { type: String, required: false },
+  optionDisabled: { type: String, required: false },
+  optionDataKey: { type: String, required: false },
+  iconOnly: { type: Boolean, required: false, default: false },
+  multiple: { type: Boolean, required: false, default: false },
+  ariaLabelledby: { type: String, required: false },
+  ariaDescribedby: { type: String, required: false },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  selectionLimit: { type: Number, required: false }
+});
+const emits = defineEmits(["change"]);
+const value = defineModel("value", { type: null, ...{ default: null } });
+function getOptionLabel(option) {
+  return String(props.optionLabel ? resolveFieldData(option, props.optionLabel) : option);
+}
+function getOptionValue(option) {
+  return props.optionValue ? resolveFieldData(option, props.optionValue) : option;
+}
+function getOptionIcon(option) {
+  return props.optionIcon ? String(resolveFieldData(option, props.optionIcon)) : void 0;
+}
+function getOptionDisabled(option) {
+  if (props.disabled || props.readonly) {
+    return true;
+  }
+  if (props.optionDisabled && resolveFieldData(option, props.optionDisabled)) {
+    return true;
+  }
+  if (props.multiple) {
+    const limit = props.selectionLimit ?? Number.POSITIVE_INFINITY;
+    const length = Array.isArray(value.value) ? value.value.length : 0;
+    if (limit <= length && getSelectedOptionIndex(option) === -1) {
+      return true;
+    }
+  }
+  return false;
+}
+function getOptionRenderKey(option) {
+  const result = props.optionDataKey ? resolveFieldData(option, props.optionDataKey) : getOptionLabel(option);
+  return isString(result) || isNumber(result) ? result : void 0;
+}
+function getSelectedOptionIndex(option) {
+  if (!value.value) {
+    return -1;
+  }
+  const equalityKey = props.optionValue ? void 0 : props.optionDataKey;
+  const optionValue = getOptionValue(option);
+  if (Array.isArray(value.value)) {
+    return value.value.findIndex((entry) => equals(getOptionValue(entry), optionValue, equalityKey));
+  }
+  return equals(getOptionValue(value.value), optionValue, equalityKey) ? 0 : -1;
+}
+function handleToggleChange(option, pressed) {
+  if (props.multiple) {
+    const selectedIndex = getSelectedOptionIndex(option);
+    const selectedItems = Array.isArray(value.value) ? [...value.value] : [];
+    if (selectedIndex === -1) {
+      selectedItems.push(getOptionValue(option));
+    } else {
+      selectedItems.splice(selectedIndex, 1);
+    }
+    value.value = selectedItems.length === 0 ? null : selectedItems;
+  } else {
+    value.value = pressed ? getOptionValue(option) : null;
+  }
+  emits("change", new ChangeEvent(value.value));
+}
+</script>

package/dist/runtime/components/form/element/FormElementSelectButton.vue.d.ts

@@ -0,0 +1,33 @@
+export interface FormElementSelectButtonProps {
+    options: unknown[];
+    optionLabel?: string;
+    optionIcon?: string;
+    optionValue?: string;
+    optionDisabled?: string;
+    optionDataKey?: string;
+    iconOnly?: boolean;
+    multiple?: boolean;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    selectionLimit?: number;
+}
+export declare class ChangeEvent extends Event {
+    readonly value: unknown;
+    constructor(value: unknown);
+}
+declare const __VLS_export: import("vue").DefineComponent<FormElementSelectButtonProps & {
+    value?: unknown | unknown[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: unknown) => any;
+} & {
+    change: (event: ChangeEvent) => any;
+}, string, import("vue").PublicProps, Readonly<FormElementSelectButtonProps & {
+    value?: unknown | unknown[];
+}> & Readonly<{
+    onChange?: ((event: ChangeEvent) => any) | undefined;
+    "onUpdate:value"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/element/FormElementSelectOptions.vue

@@ -18,6 +18,7 @@
     :loading            = "props.loading"
     :pt                 = "props.multiple ? multiSelectPassthroughProps : selectPassthroughProps"
     :append-to          = "TeleportId"
+    checkbox-icon       = "i-ph-check-bold"
   >
     <template #value="{ value, placeholder }">
       <template v-if="value">
@@ -61,6 +62,10 @@
     <template #empty>
       <span>{{ locale.form.noOptionsAvailable }}</span>
     </template>
+
+    <template #option="{ option, selected, index }" v-if="slots.option">
+      <slot name="option" :option="option" :selected="selected" :index="index" />
+    </template>
   </Component>
 </template>
 
@@ -73,10 +78,10 @@ import { equals, resolveFieldData } from "@primeuix/utils/object";
 import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
 import PrimeMultiSelect from "primevue/multiselect";
 import PrimeSelect from "primevue/select";
-import { computed } from "vue";
+import { computed, useSlots } from "vue";
 import { useReseeUx } from "../../../composables/use-resee-ux";
 import { TeleportId } from "../../../constants";
-import { blockBodyScroll, unblockBodyScroll } from "../../../utils/dom";
+import { blockBodyScroll } from "../../../utils/dom";
 import { swapStringPlaceholders } from "../../../utils/string";
 import Button from "../../Button.vue";
 import Icon from "../../Icon.vue";
@@ -148,6 +153,7 @@ const props = defineProps({
   ptOptions: { type: Object, required: false },
   unstyled: { type: Boolean, required: false }
 });
+const slots = useSlots();
 const { locale } = useReseeUx();
 const isSmall = useBreakpoints(breakpointsTailwind).smallerOrEqual("sm");
 const showFilter = computed(() => {

package/dist/runtime/components/form/element/FormElementSelectOptions.vue.d.ts

@@ -8,6 +8,17 @@ export interface FormElementSelectOptionsProps extends Omit<PrimeSelectProps, 'i
     ariaDescribedby?: string;
     selectionLimit?: string | number;
 }
-declare const __VLS_export: import("vue").DefineComponent<FormElementSelectOptionsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormElementSelectOptionsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormElementSelectOptionsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormElementSelectOptionsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    option?: (props: {
+        option: any;
+        selected: any;
+        index: any;
+    }) => any;
+}>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/use-resee-ux.d.ts

@@ -14,6 +14,7 @@ export declare function useReseeUx(): {
             tooManyOptions: string;
         };
         form: {
+            submitButtonLabel: string;
             filterPlaceholder: string;
             filterNoResults: string;
             noOptionsAvailable: string;

package/dist/runtime/composables/use-resee-ux.js

@@ -10,6 +10,7 @@ const Localization = reactive({
     tooManyOptions: "Cannot select more than {count} option(s)"
   },
   form: {
+    submitButtonLabel: "Submit",
     filterPlaceholder: "Search",
     filterNoResults: "No Results Found",
     noOptionsAvailable: "No Options Available",

package/dist/runtime/theme/css/brand/form.css

@@ -1 +1,3 @@
-@layer components{.input-label{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-label.required:after{color:var(--color-danger);content:"*";display:inline-block;margin-inline-start:--spacing(1)}.input-label.disabled{cursor:not-allowed;opacity:.6}.input-label-pair{display:flex;flex-direction:column;gap:--spacing(1);margin-block-end:--spacing(1)}.input-label-pair.label-after,.input-label-pair.label-before{align-items:center;flex-direction:row;gap:--spacing(3)}.input-label-pair.label-after .input-label,.input-label-pair.label-below .input-label{order:2}.input-validation{color:var(--color-danger);font-size:var(--text-sm);height:0;line-clamp:2}.input-field{display:flex;flex-direction:column}.input-control{flex-grow:1;padding:--spacing(2) --spacing(3)}.input-control::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-control .placeholder,.input-control::placeholder{color:var(--color-global-foreground-accent)}.input-group{align-items:center;display:flex}.input-group.input-group-loading{cursor:wait}.input-group .input-group-addon{color:var(--color-global-foreground-accent);padding:0 --spacing(2)}.input-group button.input-group-addon{cursor:pointer}.input-group .input-control{outline:none}.input-control:where(:not(.input-group .input-control)),.input-group{background-color:var(--color-global-background);border-radius:--spacing(1);cursor:pointer;outline:solid 2px var(--color-background-scale-e);overflow:clip;transition:color,background-color,outline-color,box-shadow;transition-duration:calc(var(--default-transition-duration)*2);width:100%}.input-control:where(:not(.input-group .input-control)):has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true]),.input-control:where(:not(.input-group .input-control)):is(input[readonly]),.input-group:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true]),.input-group:is(input[readonly]){cursor:default}.input-control:where(:not(.input-group .input-control)):not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):is(:disabled,:has(:disabled,[aria-disabled=true])),.input-group:not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):is(:disabled,:has(:disabled,[aria-disabled=true])){cursor:not-allowed;opacity:.6}.input-control:where(:not(.input-group .input-control)):not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):focus-within,.input-control:where(:not(.input-group .input-control)):not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):hover,.input-group:not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):focus-within,.input-group:not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):hover{outline-color:var(--color-global-foreground-accent)}.input-control:where(:not(.input-group .input-control)):not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):not(:has(>input[type=checkbox])):focus-within,.input-group:not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):not(:has(>input[type=checkbox])):focus-within{background-color:var(--color-background-scale-b);box-shadow:var(--shadow-heavy)}.input-group:where(:has(input[type=checkbox])){flex-shrink:0;height:1.5rem;position:relative;transform:translateY(-1px);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}.input-group:where(:has(input[type=checkbox])) svg{font-size:1rem;height:1rem;line-height:1;margin-left:.25rem;width:1rem}.input-group:where(:has(input[type=checkbox])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;inset:0;opacity:0;position:absolute;z-index:10}.input-group:where(:has(input[type=checkbox])) input:not(:disabled,[readonly]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).toggle-switch:has(:checked) .slider:before{background-color:var(--color-global-foreground);transform:translateX(1rem)}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider:before{background-color:var(--color-background-scale-d);border-radius:var(--radius-full);box-shadow:var(--shadow-md);content:"";height:1rem;left:.25rem;position:absolute;top:.25rem;transition:transform,background-color;transition-duration:var(--default-transition-duration);width:1rem}.input-menu .input-control,.input-menu .input-group{background-color:transparent}.input-menu .input-group:where(:has(input[type=checkbox])){height:1.2rem;width:1.2rem}.input-menu .input-group:where(:has(input[type=checkbox])) svg{margin-left:.125rem}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover{outline-color:var(--color-background-scale-e)!important}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within input,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover input{cursor:not-allowed!important}.input-menu-header{align-items:center;display:flex;gap:--spacing(2)}.input-menu-header .input-menu-filter{align-items:center;color:var(--color-global-foreground-accent);display:flex;flex-grow:1;transition:color var(--default-transition-duration) var(--default-transition-timing-function)}.input-menu-header .input-menu-filter input{flex-grow:1;outline:none;padding:--spacing(.5) 0}.input-menu-header .input-menu-filter input::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter input::placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter:focus-within{color:var(--color-global-foreground)}}
+@layer components{.input-label{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-label.required:after{color:var(--color-danger);content:"*";display:inline-block;margin-inline-start:--spacing(1)}.input-label.disabled{cursor:not-allowed;opacity:.6}.input-label-pair{display:flex;flex-direction:column;gap:--spacing(1);margin-block-end:--spacing(1)}.input-label-pair.label-after,.input-label-pair.label-before{align-items:center;flex-direction:row;gap:--spacing(3)}.input-label-pair.label-after .input-label,.input-label-pair.label-below .input-label{order:2}.input-validation{color:var(--color-danger);font-size:var(--text-sm);height:0;line-clamp:2}.input-field{display:flex;flex-direction:column}.input-control{flex-grow:1;padding:--spacing(2) --spacing(3)}.input-control::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-control .placeholder,.input-control::placeholder{color:var(--color-global-foreground-accent)}.input-group{align-items:center;display:flex}.input-group.input-group-loading{cursor:wait}.input-group .input-group-addon{color:var(--color-global-foreground-accent);padding:0 --spacing(2)}.input-group button.input-group-addon{cursor:pointer}.input-group .input-control{outline:none}.input-control:where(:not(.input-group .input-control)),.input-group{background-color:var(--color-global-background);border-radius:--spacing(1);cursor:pointer;outline:solid 2px var(--color-background-scale-e);overflow:clip;transition:color,background-color,outline-color,box-shadow;transition-duration:calc(var(--default-transition-duration)*2);width:100%}.input-control:where(:not(.input-group .input-control)):where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))),.input-group:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)){cursor:default}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))))),.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))))){cursor:not-allowed;opacity:.6}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):hover,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):hover{outline-color:var(--color-global-foreground-accent)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within{box-shadow:var(--shadow-heavy)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within{background-color:var(--color-background-scale-b)}.input-group:where(:has(input[type=checkbox])){flex-shrink:0;height:1.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}
+
+    /* !important is to overwrite what gets attached to i-* icons in the utility layer */.input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-group:where(:has(input[type=checkbox])) svg{display:block!important;font-size:1rem;height:1rem!important;line-height:1;margin-left:.25rem;width:1rem!important}.input-group:where(:has(input[type=checkbox])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;inset:0;opacity:0;position:absolute;z-index:10}.input-group:where(:has(input[type=checkbox])) input:not(:disabled,[readonly]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).toggle-switch:has(:checked) .slider:before{background-color:var(--color-global-foreground);transform:translateX(1rem)}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider:before{background-color:var(--color-background-scale-d);border-radius:var(--radius-full);box-shadow:var(--shadow-md);content:"";height:1rem;left:.25rem;position:absolute;top:.25rem;transition:transform,background-color;transition-duration:var(--default-transition-duration);width:1rem}.input-menu .input-control,.input-menu .input-group{background-color:transparent}.input-menu .input-group:where(:has(input[type=checkbox])){height:1.2rem;width:1.2rem}.input-menu .input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-menu .input-group:where(:has(input[type=checkbox])) svg{margin-left:.1rem;margin-top:-.1rem}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover{outline-color:var(--color-background-scale-e)!important}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within input,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover input{cursor:not-allowed!important}.input-menu-header{align-items:center;display:flex;gap:--spacing(2)}.input-menu-header .input-menu-filter{align-items:center;color:var(--color-global-foreground-accent);display:flex;flex-grow:1;transition:color var(--default-transition-duration) var(--default-transition-timing-function)}.input-menu-header .input-menu-filter input{flex-grow:1;outline:none;padding:--spacing(.5) 0}.input-menu-header .input-menu-filter input::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter input::placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter:focus-within{color:var(--color-global-foreground)}.input-button-bar{gap:--spacing(.5);padding:--spacing(.5);width:-moz-fit-content;width:fit-content}.input-button-bar button{cursor:pointer;padding:--spacing(1.5) --spacing(2);transition:background-color var(--default-transition-duration) var(--default-transition-timing-function)}.input-button-bar button[aria-pressed=true]{background-color:var(--color-background-scale-f)}.input-button-bar button:where(.readonly button){cursor:default}.input-button-bar button:disabled:not(:where(.readonly button)){cursor:not-allowed;opacity:.6}.input-button-bar button:not(:disabled,:where(.readonly button),[aria-pressed=true]):focus-visible,.input-button-bar button:not(:disabled,:where(.readonly button),[aria-pressed=true]):hover{background-color:var(--color-background-scale-b)}.input-button-bar button:first-child{border-bottom-left-radius:var(--radius-sm);border-top-left-radius:var(--radius-sm)}.input-button-bar button:last-child{border-bottom-right-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"