feat: floating input label

components/collections/graphql/Add.vue

@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlAdd" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelGqlAdd"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="$t('collection.name')"
           @keyup.enter="addNewCollection"
         />
+        <label for="selectLabelGqlAdd">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>

components/collections/graphql/AddFolder.vue

@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlAddFolder" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelGqlAddFolder"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="$t('folder.new')"
           @keyup.enter="addFolder"
         />
+        <label for="selectLabelGqlAddFolder">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>

components/collections/graphql/Edit.vue

@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlEdit" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelGqlEdit"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="editingCollection.name"
           @keyup.enter="saveCollection"
         />
+        <label for="selectLabelGqlEdit">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>

components/collections/graphql/EditFolder.vue

@@ -6,17 +6,16 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlEditFolder" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelGqlEditFolder"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="folder.name"
-          @keyup.enter="editFolder"
         />
+        <label for="selectLabelGqlEditFolder">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>

components/collections/graphql/EditRequest.vue

@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlEditReq" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelGqlEditReq"
           v-model="requestUpdateData.name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="request.name"
           @keyup.enter="saveRequest"
         />
+        <label for="selectLabelGqlEditReq">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>

components/collections/graphql/ImportExport.vue

@@ -59,7 +59,6 @@
           ref="inputChooseFileToReplaceWith"
           class="input"
           type="file"
-          style="display: none"
           accept="application/json"
           @change="replaceWithJSON"
         />
@@ -74,7 +73,6 @@
           ref="inputChooseFileToImportFrom"
           class="input"
           type="file"
-          style="display: none"
           accept="application/json"
           @change="importFromJSON"
         />