@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/lists/FSDataTableUI.vue

@@ -3,7 +3,7 @@
     gap="16px"
   >
     <FSRow
-      align="bottom-center"
+      align="bottom-left"
       :wrap="isExtraSmall ? false : true"
       width="fill"
     >
@@ -689,17 +689,15 @@
 </template>
 
 <script lang="ts">
-import type { PropType, Ref, Slot} from "vue";
-import { computed, defineComponent, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, defineComponent, nextTick, onMounted, onUnmounted, type PropType, type Ref, ref, type Slot, type StyleValue, watch } from "vue";
 import { useRouter } from "vue-router";
 
-import type { FSDataTableColumn, FSDataTableFilter, FSDataTableOrder, FSToggle } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type FSDataTableColumn, type FSDataTableFilter, type FSDataTableOrder, type FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 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";
@@ -834,7 +832,7 @@ export default defineComponent({
     mode: {
       type: String as PropType<"table" | "iterator">,
       required: false,
-      default: "table"
+      default: "iterator"
     },
     disableTable: {
       type: Boolean,
@@ -898,7 +896,7 @@ export default defineComponent({
     const innerSortBy = ref(props.sortBy);
     const innerMode = ref(props.mode);
     const innerPage = ref(props.page);
-    const showFilters = ref(true);
+    const showFilters = ref(false);
     const resetable = ref(false);
 
     const intersectionObserver = ref<IntersectionObserver | null>(null);
@@ -907,8 +905,8 @@ export default defineComponent({
     const elementId = `id${uuidv4()}`;
 
     const modeOptions: FSToggle[] = [
-      { id: "table", prependIcon: "mdi-table" },
-      { id: "iterator", prependIcon: "mdi-apps" }
+      { id: "iterator", prependIcon: "mdi-view-grid-outline" },
+      { id: "table", prependIcon: "mdi-format-list-bulleted" }
     ];
 
     const rowsPerPageOptions: { id: number, label: string }[] = [
@@ -963,13 +961,11 @@ export default defineComponent({
       return slots;
     });
 
-    const style = computed((): { [key: string]: string | undefined } => {
-      return {
-        "--fs-data-table-background-color": backgrounds.base,
-        "--fs-data-table-border-color": lights.base,
-        "--fs-data-table-row-gap": sizeToVar(props.rowGap)
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-data-table-background-color": backgrounds.base,
+      "--fs-data-table-border-color": lights.base,
+      "--fs-data-table-row-gap": sizeToVar(props.rowGap)
+    }));
 
     const classes = computed((): string[] => {
       const classNames = ["fs-data-table"];
@@ -1028,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;
@@ -1100,10 +1095,10 @@ export default defineComponent({
           },
           mobile: (event: any, item: any) => {
             if (props.itemTo && router) {
-              router.push(props.itemTo(item));
+              router.push(props.itemTo(item.raw));
             }
             else {
-              emit("click:row", item);
+              emit("click:row", item.raw);
             }
           }
         }
@@ -1217,6 +1212,8 @@ export default defineComponent({
         const key = header.value!;
         const currentFilters = filters.value[key];
 
+        const getPath = (object: any, keys: string[]) => keys.reduce((acc, key) => acc[key] ?? null, object);
+
         let value: FSDataTableFilter[] = [];
 
         if (header.fixedFilters) {
@@ -1224,32 +1221,43 @@ export default defineComponent({
             hidden: currentFilters?.find((cf) => cf.value == (ff.value || null))?.hidden ?? false,
             text: ff.text?.toString() ?? "—",
             value: ff.value || null,
-            filter: header.methodFilter ?? ((value, property) => {
-              property = [property].flat();
-              return Array.isArray(property) ? property.includes(value) || (!value && property.length == 0) : (!value && !property) || value == property;
+            filter: header.methodFilter ?? ((_, property, item) => {
+              if (header.methodFilterRaw) {
+                return header.methodFilterRaw(ff.value, item);
+              }
+              const flat = property = [property].flat();
+              return Array.isArray(flat) ? flat.includes(ff.value) || (!ff.value && flat.length == 0) : (!ff.value && !flat) || ff.value == flat;
             })
           }));
+          filterDictionary[key] = value;
         }
         else {
           if (props.items && props.items.length) {
             const mapToInnerValue = header.innerValue ? header.innerValue : (i: any) => i;
-            const itemValues = props.items.flatMap((item) => Array.isArray(item[key]) && item[key].length == 0 ? undefined : item[key]).map(mapToInnerValue);
+            const itemValues = props.items.flatMap((item) => {
+              return Array.isArray(getPath(item, key.split("."))) && getPath(item, key.split(".")).length == 0 ? undefined : getPath(item, key.split("."))
+            }).map(mapToInnerValue);
             const distinctValues = [...new Set(itemValues)];
 
-            value = distinctValues.map((dv): FSDataTableFilter => ({
-              hidden: currentFilters?.find((cf) => cf.value == (dv || null))?.hidden ?? false,
-              text: dv?.toString() ?? "—",
-              value: dv || null,
-              filter: header.methodFilter ?? ((_, property) => {
-                property = [property].flat().map(mapToInnerValue);
-                return Array.isArray(property) ? property.includes(dv) || (!dv && property.length == 0) : (!dv && !property) || dv == property;
-              })
-            }));
+            value = distinctValues.map((dv): FSDataTableFilter => {
+              return {
+                hidden: currentFilters?.find((cf) => cf.value == (dv || null))?.hidden ?? false,
+                text: dv?.toString() ?? "—",
+                value: dv || null,
+                filter: header.methodFilter ?? ((_, property, item) => {
+                  if (header.methodFilterRaw) {
+                    return header.methodFilterRaw(dv, item);
+                  }
+                  const flat = [property].flat().map(mapToInnerValue);
+                  return Array.isArray(flat) ? flat.includes(dv) || (!dv && flat.length == 0) : (!dv && !flat) || dv == flat;
+                })
+              }
+            });
           }
+          filterDictionary[key] = value.sort((v1, v2) => {
+            return v1.text.localeCompare(v2.text, undefined, { numeric: true });
+          });
         }
-        filterDictionary[key] = value.sort((v1, v2) => {
-          return v1.text.localeCompare(v2.text, undefined, { numeric: true });
-        });
       }
       for (const [key, filters] of Object.entries(props.filters)) {
         for (const filter of filters) {

package/components/lists/FSFilterButton.vue

@@ -7,10 +7,10 @@
       #activator="{ props }"
     >
       <FSChip
+        prependIcon="mdi-filter-variant"
         class="fs-filter-button"
         variant="standard"
-        prependIcon="mdi-filter-variant"
-        :height="[30, 24]"
+        :height="['30px', '24px']"
         :color="ColorEnum.Dark"
         :editable="true"
         :label="label"
@@ -23,12 +23,12 @@
       :border="false"
     >
       <FSCol
-        gap="12px"
         padding="16px 0 24px 16px"
+        gap="12px"
       >
         <FSCol
-          gap="12px"
           padding="0 16px 0 0"
+          gap="12px"
         >
           <FSSpan
             font="text-overline"
@@ -37,11 +37,11 @@
           </FSSpan>
           <FSChip
             class="fs-filter-button-chip"
-            :height="[30, 24]"
-            :editable="true"
-            :color="$props.color"
-            :variant="getAllVariant()"
             :label="$tr('ui.data-table.all-values', 'All values')"
+            :height="['30px', '24px']"
+            :variant="getAllVariant()"
+            :color="$props.color"
+            :editable="true"
             @click="onToggleAll"
           />
           <FSDivider
@@ -55,7 +55,7 @@
         </FSCol>
         <FSFadeOut
           padding="0 8px 0 0"
-          height="360px"
+          maxHeight="360px"
         >
           <FSCol
             gap="6px"
@@ -63,12 +63,12 @@
             <FSChip
               v-for="(filter, index) in searchedFilters"
               class="fs-filter-button-chip"
-              :height="[30, 24]"
-              :key="index"
-              :editable="true"
-              :label="filter.text"
-              :color="$props.color"
               :variant="getVariant(filter)"
+              :height="['30px', '24px']"
+              :color="$props.color"
+              :label="filter.text"
+              :editable="true"
+              :key="index"
               @click="() => onToggle(filter)"
             >
               <template
@@ -87,11 +87,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref } from "vue";
 
-import type { ColorBase, FSDataTableColumn, FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -196,15 +194,15 @@ export default defineComponent({
 
     return {
       searchedFilters,
+      singlePick,
       ColorEnum,
       expanded,
       search,
       label,
-      singlePick,
-      getVariant,
       getAllVariant,
-      onToggle,
-      onToggleAll
+      onToggleAll,
+      getVariant,
+      onToggle
     };
   }
 });

package/components/lists/FSHiddenButton.vue

@@ -21,12 +21,12 @@
       :border="false"
     >
       <FSCol
-        gap="12px"
         padding="16px 0px 24px 16px"
+        gap="12px"
       >
         <FSCol
-          gap="12px"
           padding="0 16px 0 0"
+          gap="12px"
         >
           <FSSpan
             font="text-overline"
@@ -36,7 +36,7 @@
         </FSCol>
         <FSFadeOut
           padding="0 8px 0 0"
-          height="360px"
+          maxHeight="360px"
         >
           <FSCol
             gap="6px"
@@ -44,12 +44,12 @@
             <FSChip
               v-for="(header, index) in $props.headers"
               class="fs-hidden-button-chip"
-              :height="[30, 24]"
-              :key="index"
-              :editable="true"
-              :label="header.text"
-              :color="$props.color"
               variant="full"
+              :height="['30px', '24px']"
+              :color="$props.color"
+              :label="header.text"
+              :editable="true"
+              :key="index"
               @click="$emit('update:show', header)"
             >
             </FSChip>
@@ -61,11 +61,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { defineComponent, ref } from "vue";
+import { defineComponent, type PropType, ref } from "vue";
 
-import type { ColorBase, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";

package/components/lists/FSLoadDataTable.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type StyleValue } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -81,11 +81,9 @@ export default defineComponent({
 
     const backgroundColors = getColors(ColorEnum.Background);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-load-data-table-background-color": backgroundColors.base
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-load-data-table-background-color": backgroundColors.base
+    }));
 
     return {
       style

package/components/lists/FSSimpleList.vue

@@ -0,0 +1,229 @@
+<template>
+  <FSCol
+    v-bind="$props"
+    gap="12px"
+  >
+    <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"
+      >
+        <template
+          v-if="$props.loading"
+        >
+          <FSLoader
+            v-for="i in 4"
+            :key="i"
+            :width="$props.direction == 'row' ? '220px' : '100%'"
+            height="50px"
+          />
+        </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"
+          >
+            <slot
+              name="item"
+              :item="item"
+            >
+              <FSRow
+                align="center-left"
+                height="24px"
+                :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
+                    font="text-overline"
+                  >
+                    {{ item[$props.itemLabel || 'label'] }}
+                  </FSSpan>
+                </slot>
+                <FSRow
+                  align="center-right"
+                  :wrap="false"
+                >
+                  <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 { 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 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 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,
+    FSTile,
+    FSIcon,
+    FSSpan,
+    FSImage,
+    FSLoader,
+    FSFadeOut,
+    FSSearchField,
+    FSButtonEditIcon,
+    FSButtonDragIcon,
+    FSButtonRemoveIcon,
+  },
+  props: {
+    items: {
+      type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string, [index: string]: any}[]>,
+      required: true
+    },
+    tileProps: {
+      type: Function as PropType<(item: any) => Record<string, any>>,
+      required: false,
+      default: () => () => ({})
+    },
+    showEdit: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showRemove: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showDraggable: {
+      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,
+      default: "column"
+    },
+    itemLabel: {
+      type: String,
+      required: false,
+      default: "label"
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["click:edit", "click:remove", "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,
+    }
+  }
+});
+</script>