fixup! refactor(ui): migrate TextInput to @perd-ui package

Author: Perdolique

app/components/ComboBox/ComboBox.vue

@@ -3,7 +3,7 @@
     ref="rootRef"
     :class="$style.component"
   >
-    <TextInput
+    <PerdInput
       :required="required"
       :model-value="inputValue"
       :label="label"
@@ -43,7 +43,7 @@
 <script lang="ts" setup>
   import { onClickOutside } from '@vueuse/core';
   import FidgetSpinner from '../FidgetSpinner.vue';
-  import TextInput from '../inputs/TextInput.vue';
+  import PerdInput from '../inputs/PerdInput.vue';
 
   interface Option {
     readonly label: string;

app/components/PerdInput.vue

@@ -5,7 +5,7 @@
     @submit.prevent="onSubmit"
   >
     <div :class="$style.inputs">
-      <TextInput
+      <PerdInput
         label="Name"
         placeholder="The West Pace"
         v-model.trim="name"
@@ -14,7 +14,7 @@
         autofocus
       />
 
-      <TextInput
+      <PerdInput
         label="Website URL"
         placeholder="https://perd.dev"
         type="url"
@@ -44,7 +44,7 @@
 
 <script lang="ts" setup>
   import PerdButton from '~/components/PerdButton.vue'
-  import TextInput from '../inputs/TextInput.vue';
+  import PerdInput from '../inputs/PerdInput.vue';
 
   interface Props {
     readonly submitting: boolean;

app/components/brands/EditBrandForm.vue

@@ -9,8 +9,8 @@
         {{ headerText }}
       </div>
 
-      <TextInput
-        label="Equipment type"
+      <PerdInput
+        :label="inputLabel"
         required
         autofocus
         ref="textInputRef"
@@ -38,10 +38,11 @@
 
 <script lang="ts" setup>
   import PerdButton from '~/components/PerdButton.vue'
-  import TextInput from '~/components/inputs/TextInput.vue';
+  import PerdInput from '~/components/inputs/PerdInput.vue';
   import ModalDialog from './ModalDialog.vue'
 
   interface Props {
+    readonly inputLabel: string;
     readonly headerText: string;
     readonly placeholder: string;
     readonly addButtonText: string;

app/components/dialogs/InputDialog.vue

@@ -51,7 +51,7 @@
 
     &[open] {
       opacity: 1;
-        translate: 0 0;
+      translate: 0 0;
 
       @starting-style {
         opacity: 0;

app/components/dialogs/ModalDialog.vue

@@ -19,7 +19,7 @@
         @search="onBrandSearch"
       />
 
-      <TextInput
+      <PerdInput
         required
         autocomplete="off"
         label="Name"
@@ -35,7 +35,7 @@
         :class="$style.description"
       />
 
-      <TextInput
+      <PerdInput
         required
         autocomplete="off"
         label="Weight"
@@ -92,7 +92,7 @@
   import PerdSelect, { type SelectOption } from '~/components/PerdSelect.vue';
   import PerdTextArea from '~/components/PerdTextArea.vue';
   import ComboBox from '~/components/ComboBox/ComboBox.vue';
-  import TextInput from '../inputs/TextInput.vue';
+  import PerdInput from '../inputs/PerdInput.vue';
 
   export interface Brand {
     readonly value: string;

app/components/equipment/EditEquipmentForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <TextInput
+  <PerdInput
     clearable
     v-model.trim="model"
     label="Search"
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-  import TextInput from '../inputs/TextInput.vue';
+  import PerdInput from '../inputs/PerdInput.vue';
 
   interface Props {
     readonly loading?: boolean;

app/components/equipment/SearchInput.vue

@@ -1,10 +1,10 @@
 <template>
-  <TextInput v-bind="props" />
+  <PerdInput v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-  import TextInput, { type TextInputProps } from '@perd-ui/text-input'
+  import PerdInput, { type TextInputProps as PerdInputProps } from '@perd-ui/text-input'
   import '@perd-ui/text-input/style.css'
 
-  const props = defineProps<TextInputProps>()
+  const props = defineProps<PerdInputProps>()
 </script>

app/components/inputs/PerdInput.vue

@@ -11,8 +11,9 @@
 
     <InputDialog
       v-model="isDialogOpened"
+      input-label="Checklist name"
       header-text="Create checklist"
-      placeholder="Checklist name"
+      placeholder="My checklist"
       add-button-text="Create"
       :maxlength="limits.maxChecklistNameLength"
       @submit="createChecklist"

app/pages/checklists/index.vue

@@ -40,6 +40,7 @@
     <InputDialog
       v-model="isAddDialogOpen"
       header-text="Add equipment group"
+      input-label="Group name"
       placeholder="Essentials"
       add-button-text="Add group"
       :maxlength="limits.maxEquipmentGroupNameLength"