@dative-gpi/foundation-shared-components 1.0.54 → 1.0.55

package/components/fields/FSSearchField.vue

@@ -1,5 +1,6 @@
 <template>
   <FSTextField
+    class="fs-search-field"
     :editable="$props.editable"
     :placeholder="placeholder"
     @keydown.enter="onSearch"

package/components/lists/FSDataTableUI.vue

@@ -697,7 +697,7 @@ import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shar
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid"
 
-import { alphanumericSort, sizeToVar } from "../../utils";
+import { alphanumericSort, containsSearchTerm, sizeToVar } from "../../utils";
 
 import FSDataIteratorItem from "./FSDataIteratorItem.vue";
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -1024,14 +1024,13 @@ export default defineComponent({
         return acc.concat(filters.value[key].filter((filter) => filter.hidden).map((filter) => ({ key, filter })));
       }, [] as { key: string, filter: FSDataTableFilter }[]);
       if (props.items && props.items.length) {
+        const innerSearchFormatted = innerSearch.value ? innerSearch.value.toLowerCase() : null;
         return props.items.filter((item) => {
           if (props.selectedOnly && !props.modelValue.includes(item[props.itemValue])) {
             return false;
           }
-          if (innerSearch.value) {
-            if (!JSON.stringify(item).toLowerCase().includes(innerSearch.value.toString().toLowerCase())) {
-              return false;
-            }
+          if (innerSearchFormatted) {
+            return containsSearchTerm(item, innerSearchFormatted);
           }
           if (activeFilters.some(af => af.filter.filter && af.filter.filter(af.filter.value, item[af.key], item))) {
             return false;

package/components/lists/FSSimpleList.vue

@@ -1,91 +1,147 @@
 <template>
-  <component
-    :is="$props.direction == 'row' ? FSRow : FSCol"
-    v-bind="$attrs"
+  <FSCol
+    v-bind="$props"
+    gap="12px"
   >
-    <FSTile
-      v-for="item in items"
-      :key="item.id"
-      v-bind="tileProps(item)"
-      :width="$props.direction == 'row' ? 'fit-content' : '100%'"
-      height="fit-content"
+    <FSText
+      v-if="$props.label"
+      font="text-button"
     >
-      <slot
-        name="item"
-        :item="item"
+      {{ $props.label }}
+    </FSText>
+    <FSSearchField
+      v-if="$props.searchable"
+      padding="0 12px 0 0"
+      :hideHeader="true"
+      :modelValue="actualSearch"
+      placeholder="Search"
+      @update:modelValue="onSearch"
+    />
+    <FSFadeOut
+      padding="0 4px 0 0"
+      :maxHeight="$props.maxHeight"
+      :maskHeight="0"
+    >
+      <component
+        :is="$props.direction == 'row' ? FSRow : FSCol"
       >
-        <FSRow
-          align="center-left"
+        <template
+          v-if="$props.loading"
         >
-          <FSButtonDragIcon
-            v-if="showDraggable"
+          <FSLoader
+            v-for="i in 4"
+            :key="i"
+            :width="$props.direction == 'row' ? '220px' : '100%'"
+            height="50px"
           />
-          <slot
-            name="itemContent"
-            :item="item"
-          >
-            <!-- TODO : add draggable option -->
-            <FSImage
-              v-if="item.imageId"
-              :imageId="item.imageId"
-              width="24px"
-              height="24px"
-            />
-            <FSIcon
-              size="24px"
-              v-else-if="item.icon"
-              :icon="item.icon"
-            />
-            <FSSpan>{{ item[itemLabel] }}</FSSpan>
-          </slot>
-          <FSRow
-            align="center-right"
+        </template>
+        <template
+          v-else
+        >
+          <FSTile
+            v-for="item in filteredItems"
+            :key="item.id"
+            v-bind="tileProps(item)"
+            :width="$props.direction == 'row' ? 'fit-content' : '100%'"
+            height="fit-content"
+            :editable="false"
+            :singleSelect="$props.clickable"
+            @update:modelValue="$emit('click:item', item.id)"
           >
-            <FSButtonEditIcon
-              v-if="showEdit"
-              @click="$emit('click:edit', item.id)"
-            />
-            <FSButtonRemoveIcon
-              v-if="showRemove"
-              @click="$emit('click:remove', item.id)"
-            />
-          </FSRow>
-        </FSRow>
-      </slot>
-    </FSTile>
-  </component>
+            <slot
+              name="item"
+              :item="item"
+            >
+              <FSRow
+                align="center-left"
+                :wrap="false"
+              >
+                <FSButtonDragIcon
+                  v-if="showDraggable"
+                />
+                <slot
+                  name="itemContent"
+                  :item="item"
+                >
+                  <!-- TODO : add draggable option -->
+                  <FSImage
+                    v-if="item.imageId"
+                    :imageId="item.imageId"
+                    width="24px"
+                    height="24px"
+                  />
+                  <FSIcon
+                    size="24px"
+                    v-else-if="item.icon"
+                    :icon="item.icon"
+                  />
+                  <FSSpan>{{ item[itemLabel] }}</FSSpan>
+                </slot>
+                <FSRow
+                  align="center-right"
+                >
+                  <FSButtonEditIcon
+                    v-if="showEdit"
+                    @click="$emit('click:edit', item.id)"
+                  />
+                  <FSButtonRemoveIcon
+                    v-if="showRemove"
+                    @click="$emit('click:remove', item.id)"
+                  />
+                </FSRow>
+              </FSRow>
+            </slot>
+          </FSTile>
+        </template>
+      </component>
+    </FSFadeOut>
+  </FSCol>
 </template>
 
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { computed } from "vue";
+import { defineComponent, type PropType, ref, watch } from "vue";
 
 import { ColorEnum } from "../../models"
+import { filterItems } from "../../utils";
 
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
-import FSImage from "../FSImage.vue";
+import FSText from "../FSText.vue";
 import FSIcon from "../FSIcon.vue";
 import FSSpan from "../FSSpan.vue";
+import FSImage from "../FSImage.vue";
+import FSLoader from "../FSLoader.vue";
 import FSTile from "../tiles/FSTile.vue";
-import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.vue";
+import FSFadeOut from "../FSFadeOut.vue";
+import FSSearchField from "../fields/FSSearchField.vue";
 import FSButtonEditIcon from "../buttons/FSButtonEditIcon.vue";
 import FSButtonDragIcon from "../buttons/FSButtonDragIcon.vue";
+import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.vue";
 
 export default defineComponent({
   name: "FSSimpleList",
   components: {
     FSRow,
     FSCol,
+    FSText,
     FSTile,
-    FSImage,
     FSIcon,
     FSSpan,
-    FSButtonRemoveIcon,
+    FSImage,
+    FSLoader,
+    FSFadeOut,
+    FSSearchField,
     FSButtonEditIcon,
     FSButtonDragIcon,
+    FSButtonRemoveIcon,
   },
   props: {
+    label: {
+      type: String,
+      required: false
+    },
     items: {
       type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string, [index: string]: any}[]>,
       required: true
@@ -110,6 +166,31 @@ export default defineComponent({
       required: false,
       default: false
     },
+    clickable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    searchable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    search: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    noFilter: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    maxHeight: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
+    },
     direction: {
       type: String as PropType<"row" | "column">,
       required: false,
@@ -119,14 +200,42 @@ export default defineComponent({
       type: String,
       required: false,
       default: "label"
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  emits: ["click:edit", "click:remove"],
-  setup(){
+  emits: ["click:edit", "click:remove", "click:item", "update:search"],
+  setup(props, { emit }) {
+    const actualSearch = ref<string | null>(props.search);
+    const filteredItems = computed(() => {
+      if(!actualSearch.value) {
+        return props.items;
+      }
+      return filterItems(props.items, actualSearch.value);
+    });
+
+    const onSearch = (value: string) => {
+      if(props.noFilter) {
+        emit("update:search", value);
+      } else {
+        actualSearch.value = value;
+      }
+    }
+
+    watch(() => props.search, (value) => {
+      actualSearch.value = value;
+    });
+
     return {
+      actualSearch,
+      filteredItems,
       ColorEnum,
+      onSearch,
       FSRow,
-      FSCol
+      FSCol,
     }
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.54",
+  "version": "1.0.55",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.54",
-    "@dative-gpi/foundation-shared-services": "1.0.54"
+    "@dative-gpi/foundation-shared-domain": "1.0.55",
+    "@dative-gpi/foundation-shared-services": "1.0.55"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "332546e736d95d481dc97c06af935200d8344b2c"
+  "gitHead": "1525fd18d7f83f946b100866bc563d6409049586"
 }

package/styles/components/fs_search_field.scss

@@ -0,0 +1,3 @@
+.fs-search-field {
+  max-width: 500px;
+}

package/styles/components/index.scss

@@ -51,6 +51,7 @@
 @import "fs_radio.scss";
 @import "fs_rich_text_field.scss";
 @import "fs_row.scss";
+@import "fs_search_field.scss";
 @import "fs_select_field.scss";
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";

package/utils/filter.ts

@@ -0,0 +1,15 @@
+export const containsSearchTerm = (obj: any, searchTerm: string): boolean => {
+  if (typeof obj !== 'object' || obj === null) {
+    return String(obj).toLowerCase().includes(searchTerm);
+  }
+  if (Array.isArray(obj)) {
+    return obj.some(element => containsSearchTerm(element, searchTerm));
+  }
+  return Object.values(obj).some(value => containsSearchTerm(value, searchTerm));
+};
+
+export const filterItems = <T>(items: T[], filter: string): T[] => {
+  const searchTerm = filter.toLowerCase();
+
+  return items.filter(item => containsSearchTerm(item, searchTerm));
+};

package/utils/index.ts

@@ -2,6 +2,7 @@ export * from "./badge";
 export * from "./color";
 export * from "./css";
 export * from "./error";
+export * from "./filter";
 export * from "./gradient";
 export * from "./icons";
 export * from "./leafletMarkers"