@resee-movies/nuxt-ux 0.9.0 → 0.10.0

package/dist/module.json

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

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

@@ -4,10 +4,20 @@
     :as       = "props.is"
     :name     = "props.name"
     :resolver = "validatorFunction"
-    :class    = "['input-field', props.class, { disabled: isDisabled, readonly: isReadonly, required: props.required }]"
+    :class    = "[
+  props.class,
+  {
+    'input-field': props.is !== 'fieldset',
+    'input-fieldset': props.is === 'fieldset',
+    disabled: isDisabled,
+    readonly: isReadonly,
+    required: props.required
+  }
+]"
   >
     <FormLabelInputPair
       :input-id       = "inputId"
+      :label-is       = "props.is === 'fieldset' ? 'legend' : void 0"
       :label-id       = "labelId"
       :label-text     = "labelText"
       :label-position = "props.labelPosition"

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

@@ -1,12 +1,12 @@
 <template>
   <div class="@container">
-    <div class="grid grid-cols-1 gap-x-4 gap-y-6 @lg:grid-cols-2 @lg:gap-y-7">
+    <div class="grid grid-cols-1 gap-x-4 gap-y-6 sm:@lg:grid-cols-2 sm:@lg:gap-y-7">
       <template v-for="(field, index) of props.fields" :key="field.name ?? index">
         <Component
           :is    = "getComponent(field)"
           v-bind = "field"
           :class = "{
-  '@lg:col-span-2': field.width !== 'half'
+  'sm:@lg:col-span-2': field.width !== 'half'
 }"
         />
       </template>
@@ -25,6 +25,7 @@ import CheckboxField from "./FormFieldCheckbox.vue";
 import SelectField from "./FormFieldSelect.vue";
 import SelectButtonField from "./FormFieldSelectButton.vue";
 import SubmitButton from "./FormSubmitButton.vue";
+import RadioGroup from "./FormFieldRadioGroup.vue";
 import TextField from "./FormFieldText.vue";
 import TextareaField from "./FormFieldTextarea.vue";
 import ToggleSwitchField from "./FormFieldToggleSwitch.vue";
@@ -40,6 +41,8 @@ function getComponent(field) {
       return SelectField;
     case "select-button":
       return SelectButtonField;
+    case "radio":
+      return RadioGroup;
     case "text":
       return TextField;
     case "textarea":

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

@@ -1,4 +1,5 @@
 import type { FormFieldCheckboxProps } from './FormFieldCheckbox.vue.js';
+import type { FormFieldRadioGroupProps } from './FormFieldRadioGroup.vue.js';
 import type { FormFieldSelectProps } from './FormFieldSelect.vue.js';
 import type { FormFieldSelectButtonProps } from './FormFieldSelectButton.vue.js';
 import type { FormFieldTextProps } from './FormFieldText.vue.js';
@@ -18,6 +19,9 @@ export interface SelectField extends FormFieldSelectProps, CommonOptions {
 export interface SelectButtonField extends FormFieldSelectButtonProps, CommonOptions {
     fieldType: 'select-button';
 }
+export interface RadioGroup extends FormFieldRadioGroupProps, CommonOptions {
+    fieldType: 'radio';
+}
 export interface TextField extends FormFieldTextProps, CommonOptions {
     fieldType: 'text';
 }
@@ -33,7 +37,7 @@ export interface TurnstileField extends FormFieldTurnstileProps, CommonOptions {
 export interface SubmitButton extends FormSubmitButtonProps, CommonOptions {
     fieldType: 'submit';
 }
-export type FormFieldBuilderOption = CheckboxField | SelectField | SelectButtonField | TextField | TextareaField | ToggleSwitchField | TurnstileField | SubmitButton;
+export type FormFieldBuilderOption = CheckboxField | SelectField | SelectButtonField | RadioGroup | TextField | TextareaField | ToggleSwitchField | TurnstileField | SubmitButton;
 export interface FormFieldBuilderProps {
     fields: undefined | FormFieldBuilderOption[];
 }

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

@@ -0,0 +1,65 @@
+<template>
+  <FormField v-bind="props" is="fieldset" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputId, messageId, disabled, readonly, invalid }">
+      <template v-for="(option, index) of options" :key="`${inputId}_${index}`">
+        <FormLabelInputPair
+          :label-position = "props.optionLabelPosition"
+          :disabled       = "disabled"
+          :readonly       = "readonly"
+          :input-id       = "`${inputId}_${index}`"
+          :label-text     = "utils.getOptionLabel(option)"
+        >
+          <template #input>
+            <PrimeRadioButton
+              :value                     = "utils.getOptionValue(option)"
+              :input-id                  = "`${inputId}_${index}`"
+              :disabled                  = "disabled || utils.getOptionDisabled(option) || readonly"
+              :invalid                   = "invalid"
+              :pt:input:readonly         = "readonly"
+              :pt:input:aria-describedby = "messageId"
+              class                      = "input-group"
+            />
+          </template>
+        </FormLabelInputPair>
+      </template>
+    </template>
+  </FormField>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import PrimeRadioButton from "primevue/radiobutton";
+import { computed } from "vue";
+import { useOptionListMethods } from "../../utils/form";
+import { createBooleanValidator } from "../../utils/validation";
+import FormField from "./FormField.vue";
+import FormLabelInputPair from "./FormLabelInputPair.vue";
+const props = defineProps({
+  options: { type: Array, required: true },
+  optionLabel: { type: String, required: false, default: void 0 },
+  optionValue: { type: String, required: false, default: void 0 },
+  optionDisabled: { type: String, required: false, default: void 0 },
+  optionLabelPosition: { type: String, required: false, default: "after" },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  class: { type: null, required: false }
+});
+const utils = useOptionListMethods(props);
+const validatorFunction = computed(() => {
+  return () => createBooleanValidator({ required: props.required });
+});
+</script>

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

@@ -0,0 +1,19 @@
+import type { FormFieldProps } from './FormField.vue.js';
+import type { FormLabelInputPairProps } from './FormLabelInputPair.vue.js';
+export interface FormFieldRadioGroupProps extends Omit<FormFieldProps, 'validator'> {
+    options: unknown[];
+    optionLabel?: string;
+    optionValue?: string;
+    optionDisabled?: string;
+    optionLabelPosition?: FormLabelInputPairProps['labelPosition'];
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldRadioGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldRadioGroupProps> & 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/FormLabelInputPair.vue

@@ -1,9 +1,9 @@
 <template>
   <div :class="['input-label-pair', `label-${props.labelPosition}`]">
     <Component
-      :is    = "props.fauxLabel ? 'span' : 'label'"
+      :is    = "labelTagName"
       :id    = "props.labelId"
-      :for   = "props.fauxLabel ? void 0 : props.inputId"
+      :for   = "labelTagName === 'label' ? props.inputId : void 0"
       :class = "[
   'input-label',
   {
@@ -29,14 +29,19 @@
 </script>
 
 <script setup>
+import { computed } from "vue";
 const props = defineProps({
   inputId: { type: String, required: false },
   labelId: { type: String, required: false },
   labelText: { type: String, required: false },
   labelPosition: { type: String, required: false, default: "above" },
   labelSrOnly: { type: Boolean, required: false, default: false },
+  labelIs: { type: String, required: false, default: void 0 },
   required: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false, default: false },
   fauxLabel: { type: Boolean, required: false, default: false }
 });
+const labelTagName = computed(
+  () => props.labelIs ?? (props.fauxLabel ? "span" : "label")
+);
 </script>

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

@@ -1,9 +1,11 @@
+import type { HintedString } from '../../types/index.js';
 export interface FormLabelInputPairProps {
     inputId?: string;
     labelId?: string;
     labelText?: string;
     labelPosition?: 'above' | 'below' | 'before' | 'after';
     labelSrOnly?: boolean;
+    labelIs?: HintedString<'label' | 'legend' | 'span'>;
     required?: boolean;
     disabled?: boolean;
     fauxLabel?: boolean;

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

@@ -5,16 +5,16 @@
     :aria-labelledby  = "props.ariaLabelledby"
     :aria-describedby = "props.ariaDescribedby"
   >
-    <template v-for="(option, index) of props.options" :key="getOptionRenderKey(option) ?? index">
+    <template v-for="(option, index) of props.options" :key="utils.getOptionRenderKey(option) ?? index">
       <ToggleButton
         class       = "input-button"
         severity    = "unset"
-        :pressed    = "getSelectedOptionIndex(option) !== -1"
-        :text       = "props.iconOnly ? void 0 : getOptionLabel(option)"
-        :icon       = "getOptionIcon(option)"
+        :pressed    = "utils.getOptionIndex(option, value) !== -1"
+        :text       = "props.iconOnly ? void 0 : utils.getOptionLabel(option)"
+        :icon       = "utils.getOptionIcon(option)"
         :disabled   = "getOptionDisabled(option)"
-        :aria-label = "props.iconOnly ? getOptionLabel(option) : void 0"
-        :tooltip    = "props.iconOnly ? getOptionLabel(option) : void 0"
+        :aria-label = "props.iconOnly ? utils.getOptionLabel(option) : void 0"
+        :tooltip    = "props.iconOnly ? utils.getOptionLabel(option) : void 0"
         @click      = "(pressed) => handleToggleChange(option, pressed)"
       />
     </template>
@@ -32,9 +32,7 @@ export class ChangeEvent extends Event {
 </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 { useOptionListMethods } from "../../../utils/form";
 import ToggleButton from "../../ToggleButton.vue";
 const props = defineProps({
   options: { type: Array, required: true },
@@ -53,58 +51,32 @@ const props = defineProps({
 });
 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;
-}
+const utils = useOptionListMethods(props);
 function getOptionDisabled(option) {
-  if (props.disabled || props.readonly) {
-    return true;
-  }
-  if (props.optionDisabled && resolveFieldData(option, props.optionDisabled)) {
+  if (props.disabled || props.readonly || utils.value.getOptionDisabled(option)) {
     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) {
+    if (limit <= length && utils.value.getOptionIndex(option, value) === -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(entry, optionValue, equalityKey));
-  }
-  return equals(value.value, optionValue, equalityKey) ? 0 : -1;
-}
 function handleToggleChange(option, pressed) {
   if (props.multiple) {
-    const selectedIndex = getSelectedOptionIndex(option);
+    const selectedIndex = utils.value.getOptionIndex(option, value);
     const selectedItems = Array.isArray(value.value) ? [...value.value] : [];
     if (selectedIndex === -1) {
-      selectedItems.push(getOptionValue(option));
+      selectedItems.push(utils.value.getOptionValue(option));
     } else {
       selectedItems.splice(selectedIndex, 1);
     }
     value.value = selectedItems.length === 0 ? null : selectedItems;
   } else {
-    value.value = pressed ? getOptionValue(option) : null;
+    value.value = pressed ? utils.value.getOptionValue(option) : null;
   }
   emits("change", new ChangeEvent(value.value));
 }

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

@@ -14,7 +14,7 @@
     :show-clear         = "props.showClear"
     :show-toggle-all    = "showSelectAllCheckbox"
     :filter             = "showFilter"
-    :filter-placeholder = "props.filterPlaceholder ?? locale.form.filterPlaceholder"
+    :filter-placeholder = "props.filterPlaceholder ?? reseeUx.locale.form.filterPlaceholder"
     :loading            = "props.loading"
     :pt                 = "props.multiple ? multiSelectPassthroughProps : selectPassthroughProps"
     :append-to          = "TeleportId"
@@ -58,11 +58,11 @@
     </template>
 
     <template #emptyfilter>
-      <span>{{ locale.form.filterNoResults }}</span>
+      <span>{{ reseeUx.locale.form.filterNoResults }}</span>
     </template>
 
     <template #empty>
-      <span>{{ locale.form.noOptionsAvailable }}</span>
+      <span>{{ reseeUx.locale.form.noOptionsAvailable }}</span>
     </template>
 
     <template #option="{ option, selected, index }" v-if="slots.option">
@@ -76,14 +76,14 @@ import {} from "primevue/select";
 </script>
 
 <script setup>
-import { equals, resolveFieldData } from "@primeuix/utils/object";
-import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import PrimeMultiSelect from "primevue/multiselect";
 import PrimeSelect from "primevue/select";
 import { computed, useSlots } from "vue";
 import { useReseeUx } from "../../../composables/use-resee-ux";
 import { TeleportId } from "../../../constants";
 import { blockBodyScroll } from "../../../utils/dom";
+import { useOptionListMethods } from "../../../utils/form";
 import { swapStringPlaceholders } from "../../../utils/string";
 import Button from "../../Button.vue";
 import Icon from "../../Icon.vue";
@@ -156,7 +156,8 @@ const props = defineProps({
   unstyled: { type: Boolean, required: false }
 });
 const slots = useSlots();
-const { locale } = useReseeUx();
+const utils = useOptionListMethods(props);
+const reseeUx = useReseeUx();
 const isSmall = useBreakpoints(breakpointsTailwind).smallerOrEqual("sm");
 const showFilter = computed(() => {
   return props.showOptionFilter ?? (props.options?.length ?? 0) > 20;
@@ -219,7 +220,7 @@ const multiSelectPassthroughProps = computed(() => {
       },
       input: {
         "id": `${props.inputId}_select_all`,
-        "aria-label": locale.form.selectAllOptions
+        "aria-label": reseeUx.locale.form.selectAllOptions
       }
     },
     pcOptionCheckbox: {
@@ -229,30 +230,19 @@ const multiSelectPassthroughProps = computed(() => {
     }
   };
 });
-function getOptionValue(option) {
-  return props.optionValue ? resolveFieldData(option, props.optionValue) : option;
-}
-function getOptionLabel(option) {
-  return props.optionLabel ? resolveFieldData(option, props.optionLabel) : option;
-}
-function findOptionByValue(value) {
-  return props.options?.find(
-    (option) => equals(getOptionValue(option), value, props.optionValue ? void 0 : props.dataKey)
-  );
-}
 function toLabel(value) {
   if (!value) {
     return void 0;
   }
   if (!Array.isArray(value)) {
-    return getOptionLabel(findOptionByValue(value));
+    return utils.value.getOptionLabel(utils.value.getOptionByValue(value, props.options));
   }
   if (value.length === 0) {
     return void 0;
   }
   if (value.length === 1) {
-    return getOptionLabel(findOptionByValue(value[0]));
+    return utils.value.getOptionLabel(utils.value.getOptionByValue(value[0], props.options));
   }
-  return swapStringPlaceholders(locale.form.numOptionsSelected, { count: value.length });
+  return swapStringPlaceholders(reseeUx.locale.form.numOptionsSelected, { count: value.length });
 }
 </script>

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

@@ -1,3 +1 @@
-@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:--spacing(1.5) --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{cursor:pointer;padding:--spacing(1.5) --spacing(2);transition:background-color var(--default-transition-duration) var(--default-transition-timing-function)}.input-button[aria-pressed=true]{background-color:var(--color-background-scale-f)}.input-button:where(.readonly .input-button){cursor:default}.input-button:where(:disabled,.disabled .input-button):not(:where(.readonly .input-button)){cursor:not-allowed;opacity:.6}.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):focus-visible,.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):hover{background-color:var(--color-background-scale-b)}.input-button-bar{gap:--spacing(.5);padding:--spacing(.5);width:-moz-fit-content;width:fit-content}.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)}}
+@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:not(fieldset .input-label,.label-before .input-label,.label-after .input-label),.input-label:where(fieldset legend.input-label){font-size:var(--text-lg);font-variant:small-caps;letter-spacing:.11rem}.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:--spacing(1.5) --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(input[type=text],textarea),.input-group:where(input[type=text],textarea){cursor:text}.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])),.input-group:where(:has(input[type=radio])){flex-shrink:0;height:1.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio]),.input-group:where(:has(input[type=radio])):has(input[type=radio]){border-radius:var(--radius-full);height:1.2rem;width:1.2rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio])>div,.input-group:where(:has(input[type=radio])):has(input[type=radio])>div{border-radius:var(--radius-full);height:.7rem;left:.25rem;position:absolute;top:.25rem;transition:box-shadow,background-color;transition-duration:var(--default-transition-duration);width:.7rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio]):has(:checked)>div,.input-group:where(:has(input[type=radio])):has(input[type=radio]):has(:checked)>div{background-color:var(--color-global-foreground);box-shadow:var(--shadow-md)}.input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-group:where(:has(input[type=checkbox])) svg,.input-group:where(:has(input[type=radio])) span[class^=i-],.input-group:where(:has(input[type=radio])) 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,.input-group:where(:has(input[type=radio])) 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]),.input-group:where(:has(input[type=radio])) input:not(:disabled,[readonly]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch,.input-group:where(:has(input[type=radio])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).toggle-switch:has(:checked) .slider:before,.input-group:where(:has(input[type=radio])).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,.input-group:where(:has(input[type=radio])).toggle-switch .slider{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider:before,.input-group:where(:has(input[type=radio])).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{cursor:pointer;padding:--spacing(1.5) --spacing(2);transition:background-color var(--default-transition-duration) var(--default-transition-timing-function)}.input-button[aria-pressed=true]{background-color:var(--color-background-scale-f)}.input-button:where(.readonly .input-button){cursor:default}.input-button:where(:disabled,.disabled .input-button):not(:where(.readonly .input-button)){cursor:not-allowed;opacity:.6}.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):focus-visible,.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):hover{background-color:var(--color-background-scale-b)}.input-button-bar{gap:--spacing(.5);padding:--spacing(.5);width:-moz-fit-content;width:fit-content}.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/dist/runtime/utils/form.d.ts

@@ -1,5 +1,5 @@
 import type { FormFieldState } from '@primevue/forms';
-import { type InjectionKey } from 'vue';
+import { type InjectionKey, type MaybeRefOrGetter } from 'vue';
 import type { FormInstance, FormValues } from '../types/form.js';
 /**
  * The injection key for acquiring a {@link FormInstance} object within the
@@ -24,11 +24,40 @@ export declare function provideFormInstance(): FormInstance;
 /**
  * Injects the stateful object provided by an ancestor Form instance. If not
  * available, a dummy state object is generated.
+ *
+ * @private
  */
 export declare function injectFormInstance(): FormInstance;
 /**
  * Takes a Primevue Form's `states` object, and extracts the current values
  * of each named property. In doing so, it will deref proxies, and create
  * shallow clones of any arrays/objects it encounters.
+ *
+ * @private
  */
 export declare function getValuesFromFormState<T extends FormValues = FormValues>(state: Record<string, FormFieldState>): T;
+/**
+ * @private
+ */
+export type UseOptionListMethodsConfig = {
+    optionLabel?: string | ((data: unknown) => string);
+    optionValue?: string | ((data: unknown) => string);
+    optionIcon?: string | ((data: unknown) => string);
+    optionDisabled?: string | ((data: unknown) => boolean);
+    optionDataKey?: string;
+};
+/**
+ * Creates a set of common methods for interacting with an array of "options" like what
+ * gets provided to a Select or RadioGroup.
+ *
+ * @private
+ */
+export declare function useOptionListMethods(config: MaybeRefOrGetter<UseOptionListMethodsConfig>): import("vue").ComputedRef<{
+    getOptionLabel: (option: unknown) => string;
+    getOptionValue: (option: unknown) => unknown;
+    getOptionIcon: (option: unknown) => string | undefined;
+    getOptionDisabled: (option: unknown) => boolean;
+    getOptionRenderKey: (option: unknown) => string | number | undefined;
+    getOptionIndex: (needle: unknown, haystack: unknown) => number;
+    getOptionByValue: <T>(needle: unknown, haystack: MaybeRefOrGetter<T[] | undefined>) => T | undefined;
+}>;

package/dist/runtime/utils/form.js

@@ -1,5 +1,8 @@
+import { equals, resolveFieldData } from "@primeuix/utils/object";
+import { isNumber } from "@resee-movies/utilities/numbers/is-number";
 import { isObjectLike } from "@resee-movies/utilities/objects/is-object-like";
-import { inject, provide, ref, toRaw, toValue } from "vue";
+import { isString } from "@resee-movies/utilities/strings/is-string";
+import { computed, inject, provide, ref, toRaw, toValue } from "vue";
 export const FormSymbol = Symbol("form");
 export function createFormInstance() {
   return {
@@ -32,3 +35,54 @@ export function getValuesFromFormState(state) {
   }
   return result;
 }
+export function useOptionListMethods(config) {
+  return computed(() => {
+    const {
+      optionLabel,
+      optionValue,
+      optionIcon,
+      optionDisabled,
+      optionDataKey
+    } = toValue(config);
+    const getOptionLabel = (option) => {
+      return String(optionLabel ? resolveFieldData(option, optionLabel) : option);
+    };
+    const getOptionValue = (option) => {
+      return optionValue ? resolveFieldData(option, optionValue) : option;
+    };
+    const getOptionIcon = (option) => {
+      return optionIcon ? String(resolveFieldData(option, optionIcon)) : void 0;
+    };
+    const getOptionDisabled = (option) => {
+      return Boolean(optionDisabled ? resolveFieldData(option, optionDisabled) : false);
+    };
+    const getOptionRenderKey = (option) => {
+      const result = optionDataKey ? resolveFieldData(option, optionDataKey) : getOptionLabel(option);
+      return isString(result) || isNumber(result) ? result : void 0;
+    };
+    const getOptionIndex = (needle, haystack) => {
+      const rawHaystack = toValue(haystack);
+      const optionValue2 = getOptionValue(needle);
+      const equalityKey = optionValue2 ? void 0 : optionDataKey;
+      if (Array.isArray(rawHaystack)) {
+        return rawHaystack.findIndex((entry) => equals(entry, optionValue2, equalityKey));
+      }
+      return equals(rawHaystack, optionValue2, equalityKey) ? 0 : -1;
+    };
+    const getOptionByValue = (needle, haystack) => {
+      const equalityKey = optionValue ? void 0 : optionDataKey;
+      return toValue(haystack)?.find(
+        (option) => equals(getOptionValue(option), needle, equalityKey)
+      );
+    };
+    return {
+      getOptionLabel,
+      getOptionValue,
+      getOptionIcon,
+      getOptionDisabled,
+      getOptionRenderKey,
+      getOptionIndex,
+      getOptionByValue
+    };
+  });
+}

package/package.json

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