@dative-gpi/foundation-shared-components 1.0.186 → 1.0.188

package/components/lists/FSDataTableUI.vue

@@ -493,7 +493,7 @@
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
                   :selectable="$props.selectable"
                   :singleSelect="$props.singleSelect"
-                  :to="$props.itemTo"
+                  :to="$props.itemTo && $props.itemTo(item.raw)"
                   :bottomColor="$props.color"
                   :item="item.raw"
                   :key="index"
@@ -666,7 +666,7 @@
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
                   :selectable="$props.selectable"
                   :singleSelect="$props.singleSelect"
-                  :to="$props.itemTo"
+                  :to="$props.itemTo && $props.itemTo(item.raw)"
                   :bottomColor="$props.color"
                   :item="item.raw"
                   :key="index"
@@ -724,7 +724,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, nextTick, onMounted, onUnmounted, type PropType, type Ref, ref, type Slot, type StyleValue, watch } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, type RouteLocation } from "vue-router";
 
 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";
@@ -805,7 +805,7 @@ export default defineComponent({
       default: "id"
     },
     itemTo: {
-      type: Function,
+      type: Function as PropType<(item: any) => Partial<RouteLocation>>,
       required: false,
       default: null
     },
@@ -1141,7 +1141,6 @@ export default defineComponent({
     });
 
     const onClickLibrary = computed((): { [key: string]: Function | boolean } => {
-      console.log(props["onClick:row"]);
       if (props["onClick:row"] || props.itemTo) {
         return {
           clickable: true,
@@ -1154,10 +1153,7 @@ export default defineComponent({
             }
           },
           mobile: (event: any, item: any) => {
-            if (props.itemTo && router) {
-              router.push(props.itemTo(item.raw));
-            }
-            else {
+            if (!props.itemTo) {
               emit("click:row", item.raw);
             }
           }

package/components/lists/FSTileList.vue

@@ -0,0 +1,236 @@
+<template>
+  <FSCol
+    gap="12px"
+  >
+    <FSSearchField
+      v-if="$props.searchable"
+      :hideHeader="true"
+      :modelValue="actualSearch"
+      @update:modelValue="onSearch"
+    />
+    <FSFadeOut
+      v-if="$props.direction == ListDirections.Column"
+      :maxHeight="$props.maxHeight"
+      :maskHeight="0"
+    >
+      <FSCol>
+        <template
+          v-if="$props.loading"
+        >
+          <FSLoader
+            v-for="i in 4"
+            :key="i"
+            width="100%"
+            height="50px"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <template
+            v-for="(item, index) in filteredItems"
+            :key="index"
+          >
+            <slot
+              name="item.tile"
+              v-bind="{ index, item, direction: $props.direction, toggleSelect }"
+            >
+              <FSSimpleTileUI
+                :key="index"
+                :id="item.id"
+                :label="item.label"
+                :code="item.code"
+                :icon="item.icon"
+                :imageId="item.imageId"
+                :selectable="$props.selectable"
+                width="fill"
+                v-bind="$props.tileProps ? $props.tileProps(item) : undefined"
+                :modelValue="isSelected(item.id)"
+                @update:modelValue="toggleSelect(item)"
+              />
+            </slot>
+          </template>
+        </template>
+      </FSCol>
+    </FSFadeOut>
+    <FSSlideGroup
+      v-else
+    >
+      <template
+        v-if="$props.loading"
+      >
+        <FSLoader
+          v-for="i in 4"
+          :key="i"
+          width="100%"
+          height="50px"
+        />
+      </template>
+      <template
+        v-else
+      >
+        <template
+          v-for="(item, index) in filteredItems"
+          :key="index"
+        >
+          <slot
+            name="item.tile"
+            v-bind="{ index, item, direction: $props.direction, toggleSelect }"
+          >
+            <FSSimpleTileUI
+              :key="index"
+              :id="item.id"
+              :label="item.label"
+              :code="item.code"
+              :icon="item.icon"
+              :imageId="item.imageId"
+              :selectable="$props.selectable"
+              v-bind="$props.tileProps ? $props.tileProps(item) : undefined"
+              :modelValue="isSelected(item.id)"
+              @update:modelValue="toggleSelect(item)"
+            />
+          </slot>
+        </template>
+      </template>
+    </FSSlideGroup>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed } from "vue";
+import { defineComponent, type PropType, ref, watch } from "vue";
+import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { filterItems } from "../../utils";
+
+import FSCol from "../FSCol.vue";
+import FSLoader from '../FSLoader.vue';
+import FSFadeOut from "../FSFadeOut.vue";
+import FSSlideGroup from "../FSSlideGroup.vue"
+import FSSearchField from "../fields/FSSearchField.vue";
+import FSSimpleTileUI from "../tiles/FSSimpleTileUI.vue";
+
+export default defineComponent({
+  name: "FSTileList",
+  components: {
+    FSCol,
+    FSFadeOut,
+    FSLoader,
+    FSSlideGroup,
+    FSSearchField,
+    FSSimpleTileUI
+  },
+  props: {
+    items: {
+      type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string | null, [index: string]: any}[]>,
+      required: true
+    },
+    tileProps: {
+      type: Function as PropType<(item: any) => Record<string, any>>,
+      required: false
+    },
+    searchable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    search: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    disableFilter: {
+      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<ListDirections | undefined>,
+      required: false,
+      default: ListDirections.Column
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    itemValue: {
+      type: String,
+      required: false,
+      default: "id"
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    }
+  },
+  emits: ["update:search","update:modelValue"],
+  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.disableFilter) {
+        emit("update:search", value);
+      } else {
+        actualSearch.value = value;
+      }
+    }
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    const toggleSelect = (item: any): void => {
+      let values = props.modelValue.slice();
+      const index = values.indexOf(item[props.itemValue]);
+      if (index > -1) {
+        values.splice(index, 1);
+      }
+      else {
+        if (props.singleSelect) {
+          values = [item[props.itemValue]];
+        }
+        else {
+          values.push(item[props.itemValue]);
+        }
+      }
+      emit("update:modelValue", values);
+    };
+
+    watch(() => props.search, (value) => {
+      actualSearch.value = value;
+    });
+
+    return {
+      actualSearch,
+      filteredItems,
+      ListDirections,
+      onSearch,
+      isSelected,
+      toggleSelect
+    }
+  }
+});
+</script>

package/components/tiles/FSSimpleTileUI.vue

@@ -4,6 +4,7 @@
     :bottomColor="$props.bottomColor"
     :width="$props.width"
     :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
     <FSCol
@@ -143,6 +144,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['update:modelValue'],
   setup(props) {
     const { isMobileSized } = useBreakpoints();
 

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
+  "repository": {
+    "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
+  },
   "sideEffects": false,
-  "version": "1.0.186",
+  "version": "1.0.188",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.186",
-    "@dative-gpi/foundation-shared-services": "1.0.186"
+    "@dative-gpi/foundation-shared-domain": "1.0.188",
+    "@dative-gpi/foundation-shared-services": "1.0.188"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "b49ee379a910e074e213e7d9b27eb5dcc3489ff9"
+  "gitHead": "5d77493228261fb2a57c5a2e233152715b9322e3"
 }