refactor: components

resources/js/components/AppAutoComplete.vue

 <script setup>
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
 
 const props = defineProps({
   label: {
     type: String,
-    required: true,
-  },
-  labelClass: {
-    type: String,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    required: true,
+    required: false,
   },
   error: {
     type: String,
     default: null,
   },
-  field: {
-    type: String,
-    required: true,
-  },
   empty: {
     type: Boolean,
     default: false,
     type: String,
     required: true,
   },
-  suggestions: {
-    type: Array,
-    required: true,
-  },
-  modelValue: null,
 })
 
 const emit = defineEmits(['update:modelValue'])
 
 const isError = computed(() => (props.error ? true : false))
 
-const forLabel = computed(() => props.label.toLowerCase().replace(/\s+/g, '-'))
-
 const ariaDescribedbyLabel = computed(
-  () => props.label.toLowerCase().replace(/\s+/g, '-') + '-error'
+  () => props.label?.toLowerCase().replace(/\s+/g, '-') + '-error'
 )
 
+let param = props.refreshData.slice(0, -1).replace('-', '_')
+
+const removeParams = (...params) => {
+  const urlParams = new URLSearchParams(location.search)
+
+  params.forEach((value) => urlParams.delete(value))
+
+  history.replaceState({}, '', `${location.pathname}?${urlParams}`)
+}
+
+const onInput = (event) => {
+  if (event.target.value === '') {
+    removeParams(param)
+  }
+
+  emit('update:modelValue', event.target.value)
+}
+
 const onComplete = (event) => {
   Inertia.reload({
     data: {
-      [props.refreshData.slice(0, -1)]: event.query,
+      [param]: event.query,
     },
     only: [props.refreshData],
   })
 }
-
-const onSelect = (event) => {
-  emit('update:modelValue', event.value)
-}
 </script>
 
 <template>
   <div class="field">
-    <label :for="forLabel" :class="labelClass">{{ label }}</label>
+    <label>{{ label }}</label>
 
     <AutoComplete
       forceSelection
       class="w-full"
       inputClass="w-full"
-      :model-value="modelValue"
-      :id="forLabel"
       :class="{ 'p-invalid': isError }"
-      :field="field"
-      :placeholder="placeholder"
-      :suggestions="suggestions"
-      :auto-highlight="true"
-      :disabled="disabled"
-      @input="$emit('update:modelValue', $event.target.value)"
-      @item-select="onSelect"
+      v-bind="$attrs"
+      @input="onInput"
+      @item-select="$emit('update:modelValue', $event.value)"
       @complete="onComplete"
     >
       <template #item="slotProps">
           'mb-2': empty,
           'p-error': isError,
         }"
-        :id="ariaDescribedbyLabel"
+        :aria-describedby="ariaDescribedbyLabel"
       >
         {{ error }}
       </small>

resources/js/components/AppDateRangeFilter.vue

     class="w-full"
     selection-mode="range"
     date-format="dd/mm/yy"
+    :placeholder="$attrs.placeholder"
     :manual-input="false"
     v-model="dates"
   />

resources/js/components/AppDropdown.vue

     type: String,
     required: false,
   },
-  labelClass: {
-    type: String,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    required: true,
-  },
   error: {
     type: String,
     default: null,
   },
-  optionLabel: {
-    type: String,
-    default: 'label',
-  },
-  optionValue: {
-    type: String,
-    default: 'value',
-  },
-  optionDisabled: {
-    type: String,
-    default: 'disabled',
-  },
-  optionGroupChildren: {
-    type: String,
-    default: null,
-  },
-  optionGroupLabel: {
-    type: String,
-    default: null,
-  },
-  options: {
-    type: Array,
-    required: true,
-  },
-  modelValue: null,
 })
 
 const isError = computed(() => (props.error ? true : false))
 
-const forLabel = computed(() =>
-  props.label ? props.label.toLowerCase().replace(/\s+/g, '-') : null
-)
-
 const ariaDescribedbyLabel = computed(
   () => props.label.toLowerCase().replace(/\s+/g, '-') + '-error'
 )
-
-const selectedDropdownLabel = (value) => {
-  const result = props.options.find((option) => {
-    if (option !== null) {
-      return option[props.optionValue] == value
-    }
-  })
-
-  if (result) {
-    return result[props.optionLabel]
-  }
-}
 </script>
 
 <template>
   <div class="field">
-    <label v-if="label" :for="forLabel" :class="labelClass">{{ label }}</label>
+    <label v-if="label">{{ label }}</label>
 
     <Dropdown
       class="w-full"
+      option-label="label"
+      option-value="value"
+      option-disabled="disabled"
       :class="{ 'p-invalid': isError }"
-      :id="forLabel"
-      :option-disabled="optionDisabled"
-      :option-group-children="optionGroupChildren"
-      :option-group-label="optionGroupLabel"
-      :option-label="optionLabel"
-      :option-value="optionValue"
-      :placeholder="placeholder"
-      :options="options"
-      :model-value="modelValue"
-      :disabled="disabled"
+      v-bind="$attrs"
       @change="$emit('update:modelValue', $event.value)"
     >
-      <template #value="slotProps">
-        <div v-if="slotProps.value">
-          {{ selectedDropdownLabel(slotProps.value) }}
-        </div>
-      </template>
     </Dropdown>
 
     <small
       v-if="error"
-      :id="ariaDescribedbyLabel"
+      :aria-describedby="ariaDescribedbyLabel"
       :class="{ 'p-error': isError }"
     >
       {{ error }}

resources/js/components/AppEditor.vue

     type: String,
     required: true,
   },
-  labelClass: {
-    type: String,
-  },
-  readOnly: {
-    type: Boolean,
-    required: false,
-  },
-  placeholder: {
-    type: String,
-    required: true,
-  },
   error: {
     type: String,
     default: null,
   },
-  editorStyle: null,
-  modelValue: null,
 })
 
 const isError = computed(() => (props.error ? true : false))
 
-const forLabel = computed(() =>
-  props.label ? props.label.toLowerCase().replace(/\s+/g, '-') : null
-)
-
 const ariaDescribedbyLabel = computed(
   () => props.label.toLowerCase().replace(/\s+/g, '-') + '-error'
 )
 
 <template>
   <div class="field">
-    <label v-if="label" :for="forLabel" :class="labelClass">{{ label }}</label>
+    <label v-if="label">{{ label }}</label>
 
     <Editor
-      :read-only="readOnly"
-      :model-value="modelValue"
-      :editor-style="editorStyle"
-      :placeholder="placeholder"
+      v-bind="$attrs"
       @text-change="$emit('update:modelValue', $event.htmlValue)"
     >
       <template #toolbar>
 
     <small
       v-if="error"
-      :id="ariaDescribedbyLabel"
+      :aria-describedby="ariaDescribedbyLabel"
       :class="{ 'p-error': isError }"
     >
       {{ error }}

resources/js/components/AppInputNumber.vue

     type: String,
     required: true,
   },
-  labelClass: {
-    type: String,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    required: true,
-  },
   error: {
     type: String,
     default: null,
   },
-  useGrouping: {
-    type: Boolean,
-    default: true,
-  },
-  mode: {
-    type: String,
-    default: 'decimal',
-  },
-  currency: {
-    type: String,
-    default: undefined,
-  },
-  locale: {
-    type: String,
-    default: undefined,
-  },
-  currencyDisplay: {
-    type: String,
-    default: undefined,
-  },
-  showButtons: {
-    type: Boolean,
-    default: false,
-  },
-  min: {
-    type: Number,
-    default: null,
-  },
-  max: {
-    type: Number,
-    default: null,
-  },
-  step: {
-    type: Number,
-    default: 1,
-  },
-  prefix: {
-    type: String,
-    default: null,
-  },
-  suffix: {
-    type: String,
-    default: null,
-  },
-  modelValue: null,
 })
 
 const isError = computed(() => (props.error ? true : false))
 
-const forLabel = computed(() => props.label.toLowerCase().replace(/\s+/g, '-'))
-
 const ariaDescribedbyLabel = computed(
   () => props.label.toLowerCase().replace(/\s+/g, '-') + '-error'
 )
 
 <template>
   <div class="field">
-    <label :for="forLabel" :class="labelClass">{{ label }}</label>
+    <label>{{ label }}</label>
 
     <InputNumber
       class="w-full"
       input-class="w-full"
-      :currency="currency"
-      :currency-display="currencyDisplay"
-      :locale="locale"
       :class="{ 'p-invalid': isError }"
-      :id="forLabel"
-      :placeholder="placeholder"
-      :model-value="modelValue"
-      :disabled="disabled"
-      :prefix="prefix"
-      :suffix="suffix"
-      :step="step"
-      :min="min"
-      :max="max"
-      :mode="mode"
-      :use-grouping="useGrouping"
-      :show-buttons="showButtons"
+      v-bind="$attrs"
       @input="$emit('update:modelValue', $event.value)"
     />
 
     <small
       v-if="error"
-      :id="ariaDescribedbyLabel"
+      :aria-describedby="ariaDescribedbyLabel"
       :class="{ 'p-error': isError }"
     >
       {{ error }}

resources/js/components/AppInputText.vue

     type: String,
     required: true,
   },
-  labelClass: {
-    type: String,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    required: true,
-  },
-  type: {
-    type: String,
-    default: 'text',
-  },
   error: {
     type: String,
     default: null,
   },
-  modelValue: null,
 })
 
 const isError = computed(() => (props.error ? true : false))
 
-const forLabel = computed(() => props.label.toLowerCase().replace(/\s+/g, '-'))
-
 const ariaDescribedbyLabel = computed(
   () => props.label.toLowerCase().replace(/\s+/g, '-') + '-error'
 )
 
 <template>
   <div class="field">
-    <label :for="forLabel" :class="labelClass">{{ label }}</label>
+    <label>{{ label }}</label>
 
     <InputText
       class="w-full"
-      :type="type"
       :class="{ 'p-invalid': isError }"
-      :id="forLabel"
-      :model-value="modelValue"
-      :placeholder="placeholder"
-      :disabled="disabled"
+      v-bind="$attrs"
       @input="$emit('update:modelValue', $event.target.value)"
     />
 
     <small
       v-if="error"
-      :id="ariaDescribedbyLabel"
+      :aria-describedby="ariaDescribedbyLabel"
       :class="{ 'p-error': isError }"
     >
       {{ error }}

resources/js/components/AppPassword.vue

     type: String,
     required: true,
   },
-  labelClass: {
-    type: String,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    required: true,
-  },
-  promptLabel: {
-    type: String,
-    default: 'Masukan kata sandi',
-  },
-  weakLabel: {
-    type: String,
-    default: 'Ah Lemah',
-  },
-  mediumLabel: {
-    type: String,
-    default: 'Lumayan',
-  },
-  strongLabel: {
-    type: String,
-    default: 'Wow Kuat',
-  },
   error: {
     type: String,
     default: null,
   },
-  modelValue: null,
 })
 
 const isError = computed(() => (props.error ? true : false))
 
-const forLabel = computed(() => props.label.toLowerCase().replace(/\s+/g, '-'))
-
 const ariaDescribedbyLabel = computed(
   () => props.label.toLowerCase().replace(/\s+/g, '-') + '-error'
 )
 
 <template>
   <div class="field">
-    <label :for="forLabel" :class="labelClass">{{ label }}</label>
+    <label>{{ label }}</label>
 
     <Password
       class="w-full"
       input-class="w-full"
       :class="{ 'p-invalid': isError }"
-      :promptLabel="promptLabel"
-      :weakLabel="weakLabel"
-      :mediumLabel="mediumLabel"
-      :strongLabel="strongLabel"
-      :disabled="disabled"
-      :id="forLabel"
-      :placeholder="placeholder"
-      :toggleMask="true"
-      :model-value="modelValue"
+      v-bind="$attrs"
       @input="$emit('update:modelValue', $event.target.value)"
     />
 
     <small
       v-if="error"
-      :id="ariaDescribedbyLabel"
+      :aria-describedby="ariaDescribedbyLabel"
       :class="{ 'p-error': isError }"
     >
       {{ error }}

resources/js/components/AppResetFilter.vue

 </script>
 
 <template>
-  <Button label="reset" class="p-button-link" @click="reset()" />
+  <Button label="reset" class="p-button-link" @click="reset" />
 </template>

resources/js/components/AppTextArea.vue

     type: String,
     required: true,
   },
-  labelClass: {
-    type: String,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    required: true,
-  },
   error: {
     type: String,
     default: null,
   },
-  rows: {
-    type: Number,
-    default: 5,
-  },
-  cols: {
-    type: Number,
-    default: 30,
-  },
-  modelValue: null,
 })
 
 const isError = computed(() => (props.error ? true : false))
 
-const forLabel = computed(() => props.label.toLowerCase().replace(/\s+/g, '-'))
-
 const ariaDescribedbyLabel = computed(
   () => props.label.toLowerCase().replace(/\s+/g, '-') + '-error'
 )
 
 <template>
   <div class="field">
-    <label :for="forLabel" :class="labelClass">{{ label }}</label>
+    <label>{{ label }}</label>
 
     <Textarea
       class="w-full"
       :class="{ 'p-invalid': isError }"
-      :id="forLabel"
-      :model-value="modelValue"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :auto-resize="true"
-      :rows="rows"
-      :cols="cols"
+      v-bind="$attrs"
       @input="$emit('update:modelValue', $event.target.value)"
     />
 
     <small
       v-if="error"
-      :id="ariaDescribedbyLabel"
+      :aria-describedby="ariaDescribedbyLabel"
       :class="{ 'p-error': isError }"
     >
       {{ error }}