fix(front): fix TagInput display

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

src/assets/oruga-tailwindcss.css

@@ -146,6 +146,9 @@ body {
 .taginput-item {
   @apply bg-primary mr-2;
 }
+.taginput-autocomplete {
+  @apply flex-1 !drop-shadow-none;
+}
 
 .taginput-item:first-child {
   @apply ml-2;
@@ -343,8 +346,8 @@ button.menubar__button {
 .o-drop__menu--active {
   @apply z-50;
 }
-.o-dpck__box {
-  @apply px-4 py-1;
+.datepicker-box {
+  @apply block px-4 py-1;
 }
 .o-dpck__header {
   @apply pb-2 mb-2;
@@ -352,7 +355,7 @@ button.menubar__button {
 }
 .o-dpck__header__next,
 .o-dpck__header__previous {
-  @apply justify-center text-center no-underline cursor-pointer items-center shadow-none inline-flex relative select-none leading-6 border rounded h-10 p-2 m-1 dark:text-white;
+  @apply justify-center text-center no-underline cursor-pointer items-center shadow-none inline-flex relative select-none leading-6 border rounded h-10 p-2 m-1 dark:text-white hover:px-2;
   min-width: 2.25em;
 }
 .o-dpck__header__list {

src/components/Event/TagInput.vue

@@ -1,15 +1,17 @@
 <template>
-  <o-field :label-for="id">
+  <o-field :label-for="id" class="taginput-field">
     <template #label>
-      {{ $t("Add some tags") }}
-      <o-tooltip
-        variant="dark"
-        :label="
-          $t('You can add tags by hitting the Enter key or by adding a comma')
-        "
-      >
-        <HelpCircleOutline :size="16" />
-      </o-tooltip>
+      <p class="inline-flex items-center gap-0.5">
+        {{ t("Add some tags") }}
+        <o-tooltip
+          variant="dark"
+          :label="
+            t('You can add tags by hitting the Enter key or by adding a comma')
+          "
+        >
+          <HelpCircleOutline :size="16" />
+        </o-tooltip>
+      </p>
     </template>
     <o-taginput
       v-model="tagsStrings"
@@ -20,8 +22,8 @@
       icon="label"
       :maxlength="20"
       :maxitems="10"
-      :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
-      @input="debouncedGetFilteredTags"
+      :placeholder="t('Eg: Stockholm, Dance, Chess…')"
+      @input="getFilteredTags"
       :id="id"
       dir="auto"
     >
@@ -31,11 +33,11 @@
 <script lang="ts" setup>
 import differenceBy from "lodash/differenceBy";
 import { ITag } from "../../types/tag.model";
-import debounce from "lodash/debounce";
 import { computed, onBeforeMount, ref } from "vue";
 import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
 import { useFetchTags } from "@/composition/apollo/tags";
 import { FILTER_TAGS } from "@/graphql/tags";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
   modelValue: ITag[];
@@ -47,6 +49,8 @@ const text = ref("");
 
 const tags = ref<ITag[]>([]);
 
+const { t } = useI18n({ useScope: "global" });
+
 let componentId = 0;
 
 onBeforeMount(() => {
@@ -61,14 +65,16 @@ const { load: fetchTags } = useFetchTags();
 
 const getFilteredTags = async (newText: string): Promise<void> => {
   text.value = newText;
-  const res = await fetchTags(FILTER_TAGS, { filter: newText });
+  const res = await fetchTags(
+    FILTER_TAGS,
+    { filter: newText },
+    { debounce: 200 }
+  );
   if (res) {
     tags.value = res.tags;
   }
 };
 
-const debouncedGetFilteredTags = debounce(getFilteredTags, 200);
-
 const filteredTags = computed((): ITag[] => {
   return differenceBy(tags.value, props.modelValue, "id").filter(
     (option) =>
@@ -95,3 +101,8 @@ const tagsStrings = computed({
   },
 });
 </script>
+<style lang="scss" scoped>
+:deep(.o-input__wrapper) {
+  display: initial;
+}
+</style>

src/oruga-config.ts

@@ -27,6 +27,12 @@ export const orugaConfig = {
   taginput: {
     itemClass: "taginput-item",
     rootClass: "taginput",
+    autocompleteClasses: {
+      rootClass: "taginput-autocomplete",
+      inputClasses: {
+        inputClass: "taginput-input",
+      },
+    },
   },
   autocomplete: {
     rootClass: "autocomplete",
@@ -57,6 +63,7 @@ export const orugaConfig = {
   datepicker: {
     iconNext: "ChevronRight",
     iconPrev: "ChevronLeft",
+    boxClass: "datepicker-box",
   },
   modal: {
     rootClass: "modal",