@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/components/lists/FSDataIteratorItem.vue

@@ -5,6 +5,7 @@
     width="100%"
     :color="$props.itemColor"
     :variant="variant"
+    :style="style"
   >
     <FSCol>
       <slot
@@ -66,9 +67,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorEnum, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
+import type { FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSCheckbox from "../FSCheckbox.vue";
 import FSCard from "../FSCard.vue";
@@ -112,6 +115,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
+    clickable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     showSelect: {
       type: Boolean,
       required: false,
@@ -127,8 +135,15 @@ export default defineComponent({
       }
     });
 
+    const style = computed((): { [key: string]: string | null | undefined } => {
+      return {
+        "--fs-data-iterator-item-cursor": props.clickable ? "pointer" : "default"
+      }
+    });
+
     return {
-      variant
+      variant,
+      style
     };
   }
 });

package/components/lists/FSDataTableUI.vue

@@ -7,6 +7,10 @@
       :wrap="isExtraSmall ? false : true"
       width="fill"
     >
+      <slot
+        v-if="!isExtraSmall"
+        name="prepend-toolbar"
+      />
       <template
         v-if="$props.showSearch"
       >
@@ -26,18 +30,21 @@
         v-if="!isExtraSmall"
         name="toolbar"
       />
-      <v-spacer />
-      <FSRow
+      <template
         v-if="!$props.disableTable && !$props.disableIterator"
-        align="center-right"
       >
-        <FSOptionGroup
-          :values="modeOptions"
-          :singleColor="true"
-          :required="true"
-          v-model="innerMode"
-        />
-      </FSRow>
+        <v-spacer />
+        <FSRow
+          align="center-right"
+        >
+          <FSOptionGroup
+            :values="modeOptions"
+            :singleColor="true"
+            :required="true"
+            v-model="innerMode"
+          />
+        </FSRow>
+      </template>
     </FSRow>
     <FSRow
       v-if="isExtraSmall && hasToolbar"
@@ -109,24 +116,26 @@
     >
       <v-data-table
         v-if="!isExtraSmall"
+        loadingText=""
         :selectStrategy="$props.singleSelect ? 'single' : 'all'"
-        :itemValue="$props.itemValue"
-        :showSelect="$props.showSelect"
-        :headers="extraHeaders.concat(innerHeaders)"
         :groupBy="$props.groupBy ? [$props.groupBy] : []"
+        :headers="extraHeaders.concat(innerHeaders)"
         :sortBy="innerSortBy ? [innerSortBy] : []"
-        :items="innerItems"
+        :itemsPerPage="innerRowsPerPage"
+        :showSelect="$props.showSelect"
+        :hover="!$props.sortDraggable"
+        :itemValue="$props.itemValue"
+        :loading="$props.loading"
+        :rowProps="rowProps"
         :fixedHeader="true"
+        :items="innerItems"
         :multiSort="false"
-        :hover="!$props.sortDraggable"
-        :style="style"
-        :row-props="rowProps"
-        :class="classes"
         :page="innerPage"
-        :itemsPerPage="innerRowsPerPage"
+        :class="classes"
+        :style="style"
         :modelValue="$props.modelValue"
-        @auxclick:row="onClickRow"
-        @click:row="onClickRow"
+        @auxclick:row="onClickLibrary.row"
+        @click:row="onClickLibrary.row"
         @update:sortBy="innerSortBy = $event ? $event[0] : null"
         @dragover.prevent
         @drop:row="(event, row) => onDrop(event, row, 'tr.v-data-table__tr')"
@@ -404,10 +413,28 @@
       <v-data-iterator
         v-else
         class="fs-data-table-iterator"
+        :itemsPerPage="innerRowsPerPage"
+        :loading="$props.loading"
         :items="innerItems"
         :page="innerPage"
-        :itemsPerPage="innerRowsPerPage"
       >
+        <template
+          #loader
+        >
+          <v-progress-linear
+            height="2"
+            :indeterminate="true"
+          />
+        </template>
+        <template
+          #no-data
+        >
+          <FSText
+            font="text-overline"
+          >
+            {{ $tr("ui.data-table.empty", "No data") }}
+          </FSText>
+        </template>
         <template
           #default="{ items }"
         >
@@ -435,6 +462,7 @@
                   v-if="item.type === 'item'"
                   :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
+                  :clickable="onClickLibrary.clickable"
                   :showSelect="$props.showSelect"
                   :itemTo="$props.itemTo"
                   :color="$props.color"
@@ -442,6 +470,8 @@
                   :key="index"
                   :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
                   @update:modelValue="toggleSelect"
+                  @auxclick="() => onClickLibrary.mobile($event, item)"
+                  @click="() => onClickLibrary.mobile($event, item)"
                 >
                   <template
                     #item.top="props"
@@ -554,9 +584,27 @@
     >
       <v-data-iterator
         class="fs-data-table-iterator"
-        :items="innerItems"
+        :loading="$props.loading"
         :itemsPerPage="size"
+        :items="innerItems"
       >
+        <template
+          #loader
+        >
+          <v-progress-linear
+            height="2"
+            :indeterminate="true"
+          />
+        </template>
+        <template
+          #no-data
+        >
+          <FSText
+            font="text-overline"
+          >
+            {{ $tr("ui.data-table.empty", "No data") }}
+          </FSText>
+        </template>
         <template
           #default="{ items }"
         >
@@ -584,6 +632,7 @@
                 <FSDataIteratorItem
                   :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
+                  :clickable="onClickLibrary.clickable"
                   :showSelect="$props.showSelect"
                   :itemTo="$props.itemTo"
                   :color="$props.color"
@@ -591,6 +640,8 @@
                   :key="index"
                   :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
                   @update:modelValue="toggleSelect"
+                  @auxclick="() => onClickLibrary.mobile($event, item)"
+                  @click="() => onClickLibrary.mobile($event, item)"
                 >
                   <template
                     #item.top="props"
@@ -638,10 +689,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, onMounted, onUnmounted, PropType, ref, Ref, Slot, watch } from "vue";
+import type { PropType, Ref, Slot} from "vue";
+import { computed, defineComponent, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 
-import { ColorEnum, FSDataTableColumn, FSDataTableFilter, FSDataTableOrder, FSToggle } from "@dative-gpi/foundation-shared-components/models";
+import type { FSDataTableColumn, FSDataTableFilter, FSDataTableOrder, FSToggle } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } 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"
@@ -718,6 +771,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    ["onClick:row"]: {
+      type: Function,
+      required: false,
+      default: null
+    },
     rowsPerPage: {
       type: Number,
       required: false,
@@ -768,6 +826,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     mode: {
       type: String as PropType<"table" | "iterator">,
       required: false,
@@ -1018,25 +1081,38 @@ export default defineComponent({
       }
     });
 
-    const onClickRow = computed(() => {
-      if (!!getCurrentInstance()?.vnode.props?.["onClick:row"] || props.itemTo) {
-        return (event: PointerEvent, row: any) => {
-          if (props.itemTo && router) {
-            if (event.metaKey || event.ctrlKey || event.button === 1) {
-              window.open(router.resolve(props.itemTo(row.item)).href, "_blank");
+    const onClickLibrary = computed((): { [key: string]: Function | boolean } => {
+      if (props["onClick:row"] || props.itemTo) {
+        return {
+          clickable: true,
+          row: (event: PointerEvent, row: any) => {
+            if (props.itemTo && router) {
+              if (event.metaKey || event.ctrlKey || event.button === 1) {
+                window.open(router.resolve(props.itemTo(row.item)).href, "_blank");
+              }
+              else {
+                router.push(props.itemTo(row.item));
+              }
             }
             else {
-              router.push(props.itemTo(row.item));
+              emit("click:row", row.item);
+            }
+          },
+          mobile: (event: any, item: any) => {
+            if (props.itemTo && router) {
+              router.push(props.itemTo(item));
+            }
+            else {
+              emit("click:row", item);
             }
           }
-          else {
-            emit("click:row", row.item);
-          }
-        };
-      }
-      else {
-        return null;
+        }
       }
+      return {
+        clickable: false,
+        row: null,
+        mobile: () => null
+      };
     });
 
     const draggableDisabled = computed(() => {
@@ -1081,9 +1157,6 @@ export default defineComponent({
     const toggleFilter = (header: string, value: FSDataTableFilter[]): void => {
       filters.value[header] = value;
       emit("update:filters", filters.value);
-      // If a filter is hidden, the associated filter is reseted
-      resetable.value = Object.keys(filters.value)
-        .some((key) => filters.value[key].some((filter) => filter.hidden));
     };
 
     const resetFilter = (): void => {
@@ -1091,7 +1164,6 @@ export default defineComponent({
         filters.value[key] = filters.value[key].map((filter) => ({ ...filter, hidden: false }));
       }
       emit("update:filters", filters.value);
-      resetable.value = false;
     };
 
     const filterSlot = (header: FSDataTableColumn): string => {
@@ -1105,10 +1177,8 @@ export default defineComponent({
         switch (property) {
           case "hidden":
             innerColumn.hidden = value as boolean;
-            if (value) {
+            if (value && filters.value[header.value!]) {
               filters.value[header.value!] = filters.value[header.value!].map((filter) => ({ ...filter, hidden: false }));
-              resetable.value = Object.keys(filters.value)
-                .some((key) => filters.value[key].some((filter) => filter.hidden));
               emit("update:filters", filters.value);
             }
             break;
@@ -1314,10 +1384,12 @@ export default defineComponent({
                 target.insertAdjacentElement("beforebegin", dragged);
                 target.classList.remove("fs-dropzone-include");
               }
-              else if (dragged?.getAttribute("data-initial-index") !== null) {
+              else if (dragged!.getAttribute("data-initial-index") !== null) {
                 target.classList.add("fs-dropzone-include");
-                const tbodyElement = (event.target as HTMLElement)?.closest(elementContainerSelector) as HTMLElement;
-                resetRowIndex(+dragged?.getAttribute('data-initial-index')!, Array.from(tbodyElement.children).indexOf(dragged), dragged, tbodyElement);
+                const tbodyElement = (event.target as HTMLElement)?.closest(elementContainerSelector) as HTMLElement ?? null;
+                if (tbodyElement !== null) {
+                  resetRowIndex(+dragged!.getAttribute('data-initial-index')!, Array.from(tbodyElement.children).indexOf(dragged), dragged, tbodyElement);
+                }
               }
             }
           }
@@ -1403,6 +1475,11 @@ export default defineComponent({
       innerPage.value = 1;
     });
 
+    watch(filters, () => {
+      resetable.value = Object.keys(filters.value)
+        .some((key) => filters.value[key].some((filter) => filter.hidden));
+    }, { deep: true });
+
     watch(innerMode, () => {
       emit("update:mode", innerMode.value);
       size.value = props.sizeIterator;
@@ -1421,10 +1498,20 @@ export default defineComponent({
       emit("update:rowsPerPage", innerRowsPerPage.value);
     });
 
-    watch([() => props.headers, () => props.items], () => {
+    watch(() => props.headers, () => {
       computeFilters();
     });
 
+    watch(() => props.items, async () => {
+      computeFilters();
+      if (innerPage.value !== 1) {
+        const formerPage = innerPage.value;
+        innerPage.value = 1;
+        await nextTick();
+        innerPage.value = formerPage;
+      }
+    });
+
     return {
       ColorEnum,
       innerSlots,
@@ -1453,10 +1540,10 @@ export default defineComponent({
       classes,
       style,
       size,
-      onClickRow,
       isExtraSmall,
       draggableDisabled,
       elementId,
+      onClickLibrary,
       toggleSelectAll,
       toggleSelectGroup,
       toggleSelect,

package/components/lists/FSFilterButton.vue

@@ -87,9 +87,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, ref } from "vue";
 
-import { ColorBase, ColorEnum, FSDataTableColumn, FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase, FSDataTableColumn, FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import FSSearchField from "../fields/FSSearchField.vue";

package/components/lists/FSHiddenButton.vue

@@ -61,9 +61,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { defineComponent, ref } from "vue";
 
-import { ColorBase, ColorEnum, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";