@fy-/fws-vue 0.0.912 → 0.0.913

package/components/fws/FilterData.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import useVuelidate from "@vuelidate/core";
 import { reactive } from "vue";
-import { onMounted } from "vue";
-import { onUnmounted } from "vue";
+import DefaultInput from "../ui/DefaultInput.vue";
 import { useTranslation } from "../../composables/translations";
 import { useEventBus } from "../../composables/event-bus";
+import { onMounted } from "vue";
 import DefaultDateSelection from "../ui/DefaultDateSelection.vue";
-import DefaultInput from "../ui/DefaultInput.vue";
-
+import { onUnmounted, ref } from "vue";
 interface FilterData {
   label: string;
   req: boolean;
@@ -18,14 +17,18 @@ interface FilterData {
   isHidden?: boolean;
   default?: any | undefined;
   formats?: Record<string, (value: any) => any>;
+  autocomplete?: (value: string) => Promise<any[]>;
   formatRestValue?: (value: any) => any;
   onChangeValue?: (form: any, value: any) => void;
+  focused: boolean;
 }
 const emit = defineEmits(["update:modelValue"]);
+const hidden = ref<boolean>(false);
 const state = reactive<any>({ formData: {} });
 const rules: any = { formData: {} };
 const types = reactive<any>({});
 const translate = useTranslation();
+const fDynamicOptions = ref<any[]>([]);
 const props = withDefaults(
   defineProps<{
     data?: Array<Array<FilterData>>;
@@ -110,8 +113,18 @@ const updateForms = () => {
 updateForms();
 const v$ = useVuelidate(rules, state);
 
+const updateFormData = (data: any) => {
+  data.forEach((d: any) => {
+    if (d.uid) {
+      state.formData[d.uid] = d.value;
+    }
+  });
+  submitForm();
+};
 const submitForm = () => {
-  emit("update:modelValue", formatValues({ ...state.formData }));
+  const formData = formatValues({ ...state.formData });
+  emit("update:modelValue", formData);
+  eventBus.emit("forceUpdateFilters", true);
 };
 const resetForm = () => {
   updateForms();
@@ -119,26 +132,44 @@ const resetForm = () => {
 const eventBus = useEventBus();
 onMounted(() => {
   eventBus.on("resetFilters", resetForm);
+  eventBus.on("updateFilters", updateFormData);
 });
 onUnmounted(() => {
   eventBus.off("resetFilters", resetForm);
+  eventBus.off("updateFilters", updateFormData);
 });
 </script>
 <template>
-  <form @submit.prevent="() => submitForm()">
+  <form @submit.prevent="() => submitForm()" v-if="!hidden">
     <div :class="css">
-      <div v-for="(g, i) in data" :key="`index_${i}`">
+      <div v-for="(g, i) in data" :key="`index_${i}`" class="relative">
         <template v-for="f in g" :key="f.uid">
           <template v-if="!f.isHidden">
             <DefaultInput
-              :type="f.type"
+              :type="f.type == 'autocomplete' ? 'text' : f.type"
               :label="f.label"
               :id="f.uid"
-              v-if="['text', 'select', 'date', 'email'].includes(f.type)"
+              v-if="
+                ['text', 'select', 'date', 'email', 'autocomplete'].includes(
+                  f.type,
+                )
+              "
               :options="f.options ? f.options : [[]]"
               v-model="state.formData[f.uid]"
               :errorVuelidate="v$.formData[f.uid].$errors"
               class="mb-2"
+              @focus="
+                () => {
+                  f.focused = true;
+                  $eventBus.emit('focusInput', true);
+                }
+              "
+              @blur="
+                () => {
+                  f.focused = false;
+                  $eventBus.emit('focusInput', false);
+                }
+              "
               @change="
                 (ev: any) => {
                   if (f.onChangeValue) {
@@ -146,7 +177,38 @@ onUnmounted(() => {
                   }
                 }
               "
-            />
+              @update:modelValue="
+                (v) => {
+                  if (f.autocomplete && v.length >= 2) {
+                    fDynamicOptions = [];
+                    f.autocomplete(v).then((r) => {
+                      fDynamicOptions = r;
+                    });
+                  }
+                }
+              "
+            >
+              <div
+                v-if="f.type == 'autocomplete' && f.focused"
+                class="absolute flex flex-col gap-2 p-2 bottom-0 translate-y-full inset-x-0 bg-fv-neutral-200 dark:bg-fv-neutral-800 border border-fv-neutral-700 z-10"
+              >
+                <button
+                  v-for="o in fDynamicOptions"
+                  :key="o[0]"
+                  class="flex items-center justify-between btn defaults neutral"
+                  type="button"
+                  @click.prevent="
+                    () => {
+                      f.focused = false;
+                      state.formData[f.uid] = o[0];
+                    }
+                  "
+                >
+                  {{ o[1] }} <small v-if="o[0] != ''">({{ o[0] }})</small>
+                </button>
+              </div></DefaultInput
+            >
+
             <DefaultDateSelection
               :id="f.uid"
               :label="f.label"
@@ -164,6 +226,9 @@ onUnmounted(() => {
       <button type="submit" class="btn defaults primary">
         {{ $t("filters_search_cta") }}
       </button>
+      <button type="button" class="btn defaults primary" @click="hidden = true">
+        {{ $t("hide_filters_cta") }}
+      </button>
       <button
         type="reset"
         class="btn defaults neutral"
@@ -177,4 +242,13 @@ onUnmounted(() => {
       </button>
     </div>
   </form>
+  <div class="flex justify-between mt-2 gap-x-2" v-else>
+    <button
+      type="button"
+      class="btn defaults primary !w-full flex-1 !text-center !items-center"
+      @click="hidden = false"
+    >
+      {{ $t("show_filters_cta") }}
+    </button>
+  </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.0.912",
+  "version": "0.0.913",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {