refactor(Inputs): Use v-bind for Attributed to passthrouh the maximum of all available attributes for PrimeVue components - however, some attributes has to be defined to work ...

Author: sfxcode

src/formkit/PrimeAutoComplete.vue

@@ -24,16 +24,10 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <AutoComplete
       :id="context.id"
       v-model="context._value"
+      v-bind="attrs"
       :disabled="attrs._disabled ?? !!context?.disabled"
-      :tabindex="attrs.tabindex"
-      :aria-label="attrs.ariaLabel"
-      :aria-labelledby="attrs.ariaLabelledby"
+      :class="styleClass"
       :suggestions="suggestions"
-      :dropdown="attrs?.dropdown ?? false"
-      :multiple="attrs.multiple ?? false"
-      :pt="attrs.pt"
-      :pt-options="attrs.ptOptions"
-      :unstyled="attrs.unstyled ?? false"
       @complete="search"
       @change="handleInput"
     />

src/formkit/PrimeCalendar.vue

@@ -31,58 +31,13 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
   <div class="p-formkit">
     <Calendar
       v-model="context._value"
+      v-bind="attrs"
       :input-id="props.context.id"
       :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"
-      :tabindex="attrs.tabindex"
-      :aria-label="attrs.ariaLabel"
-      :aria-labelledby="attrs.ariaLabelledby"
-      :date-format="attrs.dateFormat"
-      :placeholder="attrs.placeholder"
-      :selection-mode="attrs.selectionMode ?? 'single'"
-      :inline="attrs.inline ?? false"
-      :show-other-months="attrs.showOtherMonths ?? true"
-      :select-other-months="attrs.selectOtherMonths ?? false"
-      :icon="attrs.icon"
       :show-icon="context.showIcon"
-      :previous-icon="attrs.previousIcon ?? 'pi pi-chevron-left'"
-      :next-icon="attrs.nextIcon ?? 'pi pi-chevron-right'"
-      :increment-icon="attrs.incrementIcon ?? 'pi pi-chevron-up'"
-      :decrement-icon="attrs.decrementIcon ?? 'pi pi-chevron-down'"
-      :number-of-months="attrs.numberOfMonths ?? 1"
-      :responsive-options="attrs.responsiveOptions"
-      :view="attrs.view ?? 'date'"
-      :touch-u-i="attrs.touchUI ?? false"
-      :min-date="attrs.minDate"
-      :max-date="attrs.maxDate"
-      :disabled-dates="attrs.disabledDates"
-      :disabled-days="attrs.disabledDays"
-      :max-date-count="attrs.maxDateCount"
-      :show-on-focus="attrs.showOnFocus ?? true"
-      :auto-z-index="attrs.autoZIndex ?? true"
-      :base-z-index="attrs.baseZIndex ?? 0"
-      :show-button-bar="attrs.showButtonBar ?? false"
-      :show-time="attrs.showTime ?? false"
-      :time-only="attrs.timeOnly ?? false"
-      :short-year-cutoff="attrs.shortYearCutoff ?? '+10'"
-      :hour-format="attrs.hourFormat ?? '24'"
-      :step-hour="attrs.stepHour ?? 1"
-      :step-minute="attrs.stepMinute ?? 1"
-      :step-second="attrs.stepSecond ?? 1"
-      :show-seconds="attrs.showSeconds ?? false"
-      :hide-on-date-time-select="attrs.hideOnDateTimeSelect ?? false"
-      :hide-on-range-selection="attrs.hideOnRangeSelection ?? false"
-      :time-separator="attrs.timeSeparator ?? ':'"
-      :show-week="attrs.showWeek ?? false"
-      :manual-input="attrs.manualInput ?? true"
-      :append-to="attrs.appendTo ?? 'body'"
-      :panel-style="attrs.panelStyle"
-      :panel-class="attrs.panelClass"
-      :pt="attrs.pt"
-      :pt-options="attrs.ptOptions"
-      :unstyled="attrs.unstyled ?? false"
       @date-select="handleSelect"
       @input="handleInput"
       @blur="handleBlur"

src/formkit/PrimeCascadeSelect.vue

@@ -18,22 +18,10 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <CascadeSelect
       :id="context.id"
       v-model="context._value"
+      v-bind="attrs"
       :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
-      :list-style="attrs.style"
       :class="styleClass"
-      :tabindex="attrs.tabindex"
-      :aria-label="attrs.ariaLabel"
-      :aria-labelledby="attrs.ariaLabelledby"
-      :options="attrs?.options"
-      :option-label="attrs.optionLabel"
-      :option-value="attrs.optionValue"
-      :option-group-label="attrs.optionGroupLabel"
-      :option-group-children="attrs.optionGroupChildren"
-      :placeholder="attrs.placeholder"
-      :pt="attrs.pt"
-      :pt-options="attrs.ptOptions"
-      :unstyled="attrs.unstyled ?? false"
       @change="handleInput"
     />
   </div>

src/formkit/PrimeCheckbox.vue

@@ -18,20 +18,13 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.attrs.labelLeft }}</span>
     <Checkbox
       v-model="context._value"
+      v-bind="attrs"
       :input-id="context.id"
       :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"
-      :tabindex="attrs.tabindex"
-      :aria-label="attrs.ariaLabel"
-      :aria-labelledby="attrs.ariaLabelledby"
       :binary="attrs.binary ?? true"
-      :true-value="attrs.trueValue ?? undefined"
-      :false-value="attrs.falseValue ?? undefined"
-      :pt="attrs.pt"
-      :pt-options="attrs.ptOptions"
-      :unstyled="attrs.unstyled ?? false"
       @change="handleInput"
     />
     <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>

src/formkit/PrimeChips.vue

@@ -16,22 +16,12 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
   <div class="p-formkit">
     <Chips
       v-model="context._value"
+      v-bind="attrs"
       :input-id="context.id"
       :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"
-      :tabindex="attrs.tabindex"
-      :aria-label="attrs.ariaLabel"
-      :aria-labelledby="attrs.ariaLabelledby"
-      :allow-duplicate="attrs.allowDuplicate ?? true"
-      :add-on-blur="attrs.addOnBlur ?? false"
-      :max="attrs.max ?? undefined"
-      :placeholder="attrs.placeholder"
-      :separator="attrs.separator"
-      :pt="attrs.pt"
-      :pt-options="attrs.ptOptions"
-      :unstyled="attrs.unstyled ?? false"
       @add="handleInput"
       @remove="handleInput"
     />

src/formkit/PrimeColorPicker.vue

@@ -15,19 +15,11 @@ function handleChange(e: any) {
   <div class="p-formkit">
     <ColorPicker
       v-model="context._value"
+      v-bind="attrs"
       :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :style="attrs.style"
       :panel-class="attrs.class"
-      :tabindex="attrs.tabindex"
-      :aria-label="attrs.ariaLabel"
-      :aria-labelledby="attrs.ariaLabelledby"
-      :default-color="attrs.defaultColor ?? 'ff0000'"
-      :inline="attrs.inline ?? false"
-      :format="attrs.format"
-      :pt="attrs.pt"
-      :pt-options="attrs.ptOptions"
-      :unstyled="attrs.unstyled ?? false"
       @change="handleChange"
     />
   </div>

src/formkit/PrimeDropdown.vue

@@ -19,6 +19,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
   <div class="p-formkit">
     <Dropdown
       v-model="context._value"
+      v-bind="attrs"
       :input-id="context.id"
       :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
@@ -27,42 +28,6 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :input-style="attrs.style"
       :input-class="styleClass"
       :input-props="attrs.inputProps"
-      :tabindex="attrs.tabindex"
-      :aria-label="attrs.ariaLabel"
-      :aria-labelledby="attrs.ariaLabelledby"
-      :options="attrs.options"
-      :option-label="attrs.optionLabel"
-      :option-value="attrs.optionValue"
-      :option-disabled="attrs.optionDisabled"
-      :option-group-label="attrs.optionGroupLabel"
-      :option-group-children="attrs.optionGroupChildren"
-      :scroll-height="attrs.scrollHeight"
-      :filter="attrs.filter ?? false"
-      :filter-placeholder="attrs.filterPlaceholder"
-      :filter-locale="attrs.filterLocale"
-      :filter-match-mode="attrs.filterMatchMode"
-      :fitler-fields="attrs.filterFields"
-      :filter-input-props="attrs.filterInputProps"
-      :editable="attrs.editable"
-      :placeholder="attrs.placeholder"
-      :data-key="attrs.dataKey"
-      :show-clear="attrs.showClear ?? false"
-      :panel-style="attrs.panelStyle"
-      :panel-class="attrs.panelClass"
-      :panel-props="attrs.panelProps"
-      :append-to="attrs.appendTo"
-      :reset-filter-on-hide="attrs.resetFilterOnHide"
-      :virtual-scroller-options="attrs.virtualScrollerOptions"
-      :auto-option-focus="attrs.autoOptionFocus"
-      :select-on-focus="attrs.selectOnFocus"
-      :filter-message="attrs.filterMessage"
-      :selection-message="attrs.selectionMessage"
-      :empty-selection-message="attrs.emptySelectionMessage"
-      :empty-filter-message="attrs.emptyFilterMessage"
-      :empty-message="attrs.emptyMessage"
-      :pt="attrs.pt"
-      :pt-options="attrs.ptOptions"
-      :unstyled="attrs.unstyled ?? false"
       @change="handleInput"
       @blur="handleBlur"
     />

src/formkit/PrimeEditor.vue

@@ -25,19 +25,11 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Editor
       :id="context.id"
       v-model="context._value"
+      v-bind="attrs"
       :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :editor-style="attrs.style"
       :class="styleClass"
-      :tabindex="attrs.tabindex"
-      :aria-label="attrs.ariaLabel"
-      :aria-labelledby="attrs.ariaLabelledby"
-      :placeholder="attrs.placeholder"
-      :formats="attrs.formats"
-      :modules="attrs.modules"
-      :pt="attrs.pt"
-      :pt-options="attrs.ptOptions"
-      :unstyled="attrs.unstyled ?? false"
       @text-change="handleInput"
       @selection-change="handleSelection"
     />

src/formkit/PrimeInputMask.vue

@@ -18,21 +18,11 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <InputMask
       :id="context.id"
       v-model="context._value"
+      v-bind="attrs"
       :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :editor-style="attrs.style"
       :class="styleClass"
-      :tabindex="attrs.tabindex"
-      :aria-label="attrs.ariaLabel"
-      :aria-labelledby="attrs.ariaLabelledby"
-      :placeholder="attrs.placeholder"
-      :mask="attrs.mask ?? undefined"
-      :slot-char="attrs.slotChar ?? '_'"
-      :auto-clear="attrs.autoClear ?? true"
-      :unmask="attrs.unmask ?? false"
-      :pt="attrs.pt"
-      :pt-options="attrs.ptOptions"
-      :unstyled="attrs.unstyled ?? false"
       @blur="handleInput"
     />
   </div>

src/formkit/PrimeInputNumber.vue

@@ -20,31 +20,12 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
   <div class="p-formkit">
     <InputNumber
       v-model="context._value"
+      v-bind="attrs"
       :input-id="context.id"
       :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"
-      :tabindex="attrs.tabindex"
-      :aria-label="attrs.ariaLabel"
-      :aria-labelledby="attrs.ariaLabelledby"
-      :placeholder="attrs.placeholder"
-      :use-grouping="attrs.useGrouping ?? true"
-      :min="attrs.min ?? undefined"
-      :max="attrs.max ?? undefined"
-      :min-fraction-digits="attrs.minFractionDigits ?? undefined"
-      :max-fraction-digits="attrs.maxFractionDigits ?? undefined"
-      :locale="attrs.locale ?? undefined"
-      :mode="attrs.mode ?? undefined"
-      :currency="attrs.currency ?? undefined"
-      :prefix="attrs.prefix ?? undefined"
-      :suffix="attrs.suffix ?? undefined"
-      :show-buttons="attrs.showButtons ?? undefined"
-      :button-layout="attrs.buttonLayout ?? 'stacked'"
-      :step="attrs.step ?? undefined"
-      :pt="attrs.pt"
-      :pt-options="attrs.ptOptions"
-      :unstyled="attrs.unstyled ?? false"
       @input="handleInput"
       @blur="handleBlur"
     />