@resee-movies/nuxt-ux 0.4.1 → 0.6.0

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

@@ -0,0 +1,56 @@
+<template>
+  <FormField v-bind="props" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputId, messageId, disabled, readonly }">
+      <PrimeInputText
+        :id               = "inputId"
+        :aria-describedby = "messageId"
+        :disabled         = "disabled"
+        :readonly         = "readonly"
+        :type             = "props.type"
+        :required         = "props.required"
+        :minlength        = "props.minLength"
+        :maxlength        = "props.maxLength"
+        class             = "input-control"
+      />
+    </template>
+  </FormField>
+</template>
+
+<script>
+import {} from "./FormField.vue";
+</script>
+
+<script setup>
+import PrimeInputText from "primevue/inputtext";
+import { computed } from "vue";
+import FormField from "./FormField.vue";
+import { createTextValidator } from "../../utils/validation";
+const props = defineProps({
+  type: { type: String, required: false, default: "text" },
+  minLength: { type: [String, Number], required: false, default: void 0 },
+  maxLength: { type: [String, Number], required: false, default: void 0 },
+  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 },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  class: { type: null, required: false }
+});
+const validatorFunction = computed(() => {
+  return () => createTextValidator({
+    required: props.required,
+    type: props.type,
+    minLength: props.minLength,
+    maxLength: props.maxLength
+  });
+});
+</script>

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

@@ -0,0 +1,16 @@
+import { type FormFieldProps } from './FormField.vue.js';
+export interface FormFieldTextProps extends Omit<FormFieldProps, 'validator'> {
+    type?: 'text' | 'url' | 'email';
+    minLength?: string | number;
+    maxLength?: string | number;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldTextProps> & 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/FormFieldToggleSwitch.vue

@@ -0,0 +1,47 @@
+<template>
+  <FormField v-bind="props" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputId, messageId, disabled, readonly }">
+      <PrimeToggleSwitch
+        :input-id         = "inputId"
+        :aria-describedby = "messageId"
+        :disabled         = "disabled || readonly"
+        :readonly         = "readonly"
+        class             = "input-group toggle-switch"
+        pt:slider:class   = "slider"
+      />
+    </template>
+  </FormField>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import PrimeToggleSwitch from "primevue/toggleswitch";
+import { computed } from "vue";
+import FormField from "./FormField.vue";
+import { createBooleanValidator } from "../../utils/validation";
+const props = defineProps({
+  trueValue: { type: null, required: false, default: () => true },
+  falseValue: { type: null, required: false, default: () => false },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  initialValue: { type: null, required: false, default: () => 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, default: "after" },
+  class: { type: null, required: false }
+});
+const validatorFunction = computed(() => {
+  return () => createBooleanValidator({ required: props.required });
+});
+</script>

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

@@ -0,0 +1,15 @@
+import type { FormFieldProps } from './FormField.vue.js';
+export interface FormFieldToggleSwitchProps extends Omit<FormFieldProps, 'validator'> {
+    trueValue?: unknown;
+    falseValue?: unknown;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldToggleSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldToggleSwitchProps> & 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

@@ -0,0 +1,42 @@
+<template>
+  <div :class="['input-label-pair', `label-${props.labelPosition}`]">
+    <Component
+      :is    = "props.fauxLabel ? 'span' : 'label'"
+      :id    = "props.labelId"
+      :for   = "props.fauxLabel ? void 0 : props.inputId"
+      :class = "[
+  'input-label',
+  {
+    'sr-only': props.labelSrOnly,
+    disabled: props.disabled,
+    required: props.required
+  }
+]"
+    >
+      <slot name="label">
+        {{ props.labelText }}
+      </slot>
+    </Component>
+
+    <div>
+      <slot name="input" />
+    </div>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+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 },
+  required: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  fauxLabel: { type: Boolean, required: false, default: false }
+});
+</script>

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

@@ -0,0 +1,22 @@
+export interface FormLabelInputPairProps {
+    inputId?: string;
+    labelId?: string;
+    labelText?: string;
+    labelPosition?: 'above' | 'below' | 'before' | 'after';
+    labelSrOnly?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    fauxLabel?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormLabelInputPairProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormLabelInputPairProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+} & {
+    input?: (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

@@ -0,0 +1,26 @@
+<template>
+  <Button
+    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>
+
+<script>
+
+</script>
+
+<script setup>
+import { useReseeUx } from "../../composables/use-resee-ux";
+import { injectFormInstance } from "../../utils/form";
+import Button from "../Button.vue";
+const props = defineProps({
+  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

@@ -0,0 +1,8 @@
+import type { ButtonProps } from '../Button.vue.js';
+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;
+export default _default;

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

@@ -0,0 +1,24 @@
+<template>
+  <div
+    :id         = "props.id"
+    aria-atomic = "true"
+    aria-live   = "polite"
+    :class      = "['input-validation', props.visible ? 'visible' : 'invisible']"
+  >
+    <slot name="default">
+      {{ props.message }}
+    </slot>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  visible: { type: Boolean, required: false, default: false },
+  message: { type: String, required: false, default: void 0 }
+});
+</script>

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

@@ -0,0 +1,15 @@
+export interface FormValidationMessageProps {
+    id?: string;
+    visible?: boolean;
+    message?: string;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormValidationMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormValidationMessageProps> & Readonly<{}>, {}, {}, {}, {}, 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/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

@@ -0,0 +1,256 @@
+<template>
+  <Component
+    :is                 = "props.multiple ? PrimeMultiSelect : PrimeSelect"
+    :name               = "props.name"
+    :input-id           = "props.inputId"
+    :disabled           = "props.disabled || props.readonly"
+    :class              = "['input-group']"
+    :options            = "props.options"
+    :option-label       = "props.optionLabel"
+    :option-value       = "props.optionValue"
+    :option-disabled    = "props.optionDisabled"
+    :placeholder        = "props.placeholder"
+    :selection-limit    = "props.multiple ? props.selectionLimit : void 0"
+    :show-clear         = "props.showClear"
+    :show-toggle-all    = "showSelectAllCheckbox"
+    :filter             = "showFilter"
+    :filter-placeholder = "props.filterPlaceholder ?? locale.form.filterPlaceholder"
+    :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">
+        {{ toLabel(value) }}
+      </template>
+
+      <span v-else class="placeholder">
+        {{ placeholder || "\u200B" }}
+      </span>
+    </template>
+
+    <template #loadingicon>
+      <ProgressSpinner />
+    </template>
+
+    <template #dropdownicon>
+      <Icon name="i-ph-caret-down-bold" />
+    </template>
+
+    <template #clearicon="{ clearCallback }">
+      <Button
+        severity         = "unset"
+        icon             = "i-ph-x"
+        class            = "input-group-addon"
+        @click           = "clearCallback"
+        :data-pc-section = "
+  'clearicon'
+  /* used internally by Primevue. No idea why they offer the slot like this. */
+"
+      />
+    </template>
+
+    <template #filtericon>
+      <Icon name="i-ph-magnifying-glass" />
+    </template>
+
+    <template #emptyfilter>
+      <span>{{ locale.form.filterNoResults }}</span>
+    </template>
+
+    <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>
+
+<script>
+import {} from "primevue/select";
+</script>
+
+<script setup>
+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, useSlots } from "vue";
+import { useReseeUx } from "../../../composables/use-resee-ux";
+import { TeleportId } from "../../../constants";
+import { blockBodyScroll } from "../../../utils/dom";
+import { swapStringPlaceholders } from "../../../utils/string";
+import Button from "../../Button.vue";
+import Icon from "../../Icon.vue";
+import ProgressSpinner from "../../ProgressSpinner.vue";
+const props = defineProps({
+  inputId: { type: String, required: false },
+  labelId: { type: String, required: false },
+  multiple: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  showOptionFilter: { type: Boolean, required: false, default: void 0 },
+  ariaDescribedby: { type: String, required: false },
+  selectionLimit: { type: [String, Number], required: false, default: void 0 },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  name: { type: null, required: false },
+  options: { type: Array, required: false },
+  optionLabel: { type: [String, Function], required: false, skipCheck: true },
+  optionValue: { type: [String, Function], required: false, skipCheck: true },
+  optionDisabled: { type: [String, Function], required: false, skipCheck: true },
+  scrollHeight: { type: null, required: false },
+  filter: { type: Boolean, required: false, skipCheck: true },
+  filterPlaceholder: { type: null, required: false },
+  filterLocale: { type: null, required: false },
+  filterMatchMode: { type: null, required: false },
+  filterFields: { type: null, required: false },
+  editable: { type: Boolean, required: false, skipCheck: true },
+  placeholder: { type: null, required: false },
+  size: { type: null, required: false },
+  invalid: { type: Boolean, required: false, skipCheck: true },
+  disabled: { type: Boolean, required: false, skipCheck: true },
+  variant: { type: null, required: false },
+  dataKey: { type: null, required: false },
+  showClear: { type: Boolean, required: false, skipCheck: true, default: true },
+  fluid: { type: Boolean, required: false, skipCheck: true },
+  inputStyle: { type: null, required: false },
+  inputClass: { type: null, required: false },
+  labelStyle: { type: null, required: false },
+  labelClass: { type: null, required: false },
+  panelStyle: { type: null, required: false },
+  panelClass: { type: null, required: false },
+  overlayStyle: { type: null, required: false },
+  overlayClass: { type: null, required: false },
+  appendTo: { type: null, required: false },
+  loading: { type: Boolean, required: false, skipCheck: true },
+  clearIcon: { type: null, required: false },
+  dropdownIcon: { type: null, required: false },
+  filterIcon: { type: null, required: false },
+  loadingIcon: { type: null, required: false },
+  resetFilterOnHide: { type: Boolean, required: false },
+  resetFilterOnClear: { type: Boolean, required: false },
+  virtualScrollerOptions: { type: Object, required: false },
+  autoOptionFocus: { type: Boolean, required: false, skipCheck: true },
+  autoFilterFocus: { type: Boolean, required: false, skipCheck: true },
+  selectOnFocus: { type: Boolean, required: false, skipCheck: true },
+  focusOnHover: { type: Boolean, required: false, skipCheck: true },
+  highlightOnSelect: { type: Boolean, required: false, skipCheck: true },
+  checkmark: { type: Boolean, required: false, skipCheck: true },
+  filterMessage: { type: null, required: false },
+  selectionMessage: { type: null, required: false },
+  emptySelectionMessage: { type: null, required: false },
+  emptyFilterMessage: { type: null, required: false },
+  emptyMessage: { type: null, required: false },
+  tabindex: { type: null, required: false },
+  ariaLabel: { type: null, required: false },
+  ariaLabelledby: { type: null, required: false },
+  formControl: { type: null, required: false },
+  dt: { type: null, required: false },
+  pt: { type: null, required: false },
+  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(() => {
+  return props.showOptionFilter ?? (props.options?.length ?? 0) > 20;
+});
+const showSelectAllCheckbox = computed(() => {
+  return props.multiple ? showFilter.value : void 0;
+});
+let unblockScroll = void 0;
+const sharedPassthroughProps = computed(() => {
+  return {
+    header: { class: "menu-prefix input-menu-header" },
+    overlay: { class: "menu input-menu" },
+    dropdown: { class: "input-group-addon" },
+    listContainer: { class: "menu-list" },
+    pcFilterContainer: { root: { class: "input-menu-filter" } },
+    pcFilterIconContainer: { root: { class: "input-group-addon" } },
+    emptyMessage: { "aria-disabled": "true" },
+    transition: {
+      name: isSmall.value ? "slide-in-bottom" : "fade",
+      onBeforeEnter() {
+        if (isSmall.value) {
+          unblockScroll = blockBodyScroll();
+        }
+      },
+      onAfterLeave() {
+        unblockScroll?.();
+        unblockScroll = void 0;
+      }
+    }
+  };
+});
+const selectPassthroughProps = computed(() => {
+  return {
+    ...sharedPassthroughProps.value,
+    label: {
+      "class": "input-control min-w-0 select-none truncate",
+      "aria-describedby": props.ariaDescribedby,
+      "aria-labelledby": props.labelId,
+      "aria-readonly": props.readonly
+    }
+  };
+});
+const multiSelectPassthroughProps = computed(() => {
+  return {
+    ...sharedPassthroughProps.value,
+    labelContainer: {
+      class: "input-control min-w-0"
+    },
+    label: {
+      class: "select-none truncate"
+    },
+    hiddenInput: {
+      "aria-describedby": props.ariaDescribedby,
+      "aria-labelledby": props.labelId,
+      "aria-readonly": props.readonly
+    },
+    pcHeaderCheckbox: {
+      root: {
+        class: "input-group"
+      },
+      input: {
+        "id": `${props.inputId}_select_all`,
+        "aria-label": locale.form.selectAllOptions
+      }
+    },
+    pcOptionCheckbox: {
+      root: {
+        class: "input-group"
+      }
+    }
+  };
+});
+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));
+  }
+  if (value.length === 0) {
+    return void 0;
+  }
+  if (value.length === 1) {
+    return getOptionLabel(findOptionByValue(value[0]));
+  }
+  return swapStringPlaceholders(locale.form.numOptionsSelected, { count: value.length });
+}
+</script>