@dative-gpi/foundation-shared-components 1.0.57 → 1.0.58-groupings

package/components/lists/FSDraggable.vue

@@ -74,7 +74,7 @@ export default defineComponent({
           const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
           dragged.classList.add("fs-draggable-dragging");
           dragged.classList.add("fs-draggable-dragging-grabbegin");
-          dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+          dragged.dataset.initialIndex = props.item.index;
           event.preventDefault();
         }
       }, mobileGrabThreshold);
@@ -171,7 +171,7 @@ export default defineComponent({
         return;
       }
       const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
-      dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+      dragged.dataset.initialIndex = props.item.index;
       event.dataTransfer?.setDragImage(dragged, 25, 25);
       
       if (event.dataTransfer) {

package/components/lists/FSFilterButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="expanded"
   >
@@ -12,7 +12,7 @@
         variant="standard"
         :height="['30px', '24px']"
         :color="ColorEnum.Dark"
-        :editable="true"
+        :clickable="true"
         :label="label"
         v-bind="props"
       />
@@ -23,38 +23,34 @@
       :border="false"
     >
       <FSCol
-        padding="16px 0 24px 16px"
+        padding="20px"
         gap="12px"
       >
         <FSCol
-          padding="0 16px 0 0"
           gap="12px"
         >
           <FSSpan
             font="text-overline"
           >
-            {{ $tr("ui.data-table.filter", "Filter") }}
+            {{ $tr("ui.common.filter", "Filter") }}
           </FSSpan>
           <FSChip
             class="fs-filter-button-chip"
-            :label="$tr('ui.data-table.all-values', 'All values')"
+            :label="$tr('ui.common.all-values', 'All values')"
             :height="['30px', '24px']"
             :variant="getAllVariant()"
             :color="$props.color"
-            :editable="true"
+            :clickable="true"
             @click="onToggleAll"
           />
-          <FSDivider
-            padding="0 8px 0 0"
-          />
+          <FSDivider />
           <FSSearchField
+            :hideHeader="true"
             class="fs-filter-button-search"
-            prependInnerIcon="mdi-magnify"
             v-model="search"
           />
         </FSCol>
         <FSFadeOut
-          padding="0 8px 0 0"
           maxHeight="360px"
         >
           <FSCol
@@ -67,7 +63,7 @@
               :height="['30px', '24px']"
               :color="$props.color"
               :label="filter.text"
-              :editable="true"
+              :clickable="true"
               :key="index"
               @click="() => onToggle(filter)"
             >
@@ -83,7 +79,7 @@
         </FSFadeOut>
       </FSCol>
     </FSCard>
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -98,6 +94,7 @@ import FSDivider from "../FSDivider.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSSpan from "../FSSpan.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -109,6 +106,7 @@ export default defineComponent({
     FSCard,
     FSChip,
     FSSpan,
+    FSMenu,
     FSCol
   },
   props: {
@@ -140,10 +138,10 @@ export default defineComponent({
         if (props.filters) {
           const hidden = props.filters.filter(f => f.hidden).length;
           if (hidden > 0) {
-            return $tr("ui.data-table.some-filters-visible", "{0}: {1} visible", props.header.text, (props.filters.length - hidden).toString());
+            return $tr("filter-button.some-filters-visible", "{0}: {1} visible", props.header.text, (props.filters.length - hidden).toString());
           }
         }
-        return $tr("ui.data-table.all-filters-visible", "{0}: All visible", props.header.text);
+        return $tr("filter-button.all-filters-visible", "{0}: All visible", props.header.text);
       }
       return null;
     });

package/components/lists/FSHeaderButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     v-model="expanded"
   >
     <template
@@ -24,7 +24,7 @@
         <FSSpan
           font="text-overline"
         >
-          {{ $tr("ui.data-table.column-options", "Options for this column") }}
+          {{ $tr("data-table.column-options", "Options for this column") }}
         </FSSpan>
         <FSCol
           padding="6px"
@@ -33,9 +33,9 @@
             prependIcon="mdi-eye-off-outline"
             class="fs-header-button-chip"
             variant="borderless"
-            :label="$tr('ui.data-table.hide-column', 'Hide column')"
+            :label="$tr('data-table.hide-column', 'Hide column')"
             :height="[30, 24]"
-            :editable="true"
+            :clickable="true"
             @click="$emit('update:hide')"
           />
           <FSChip
@@ -43,9 +43,9 @@
             class="fs-header-button-chip"
             variant="borderless"
             prependIcon="mdi-chevron-left"
-            :label="$tr('ui.data-table.move-left', 'Move to the left')"
+            :label="$tr('data-table.move-left', 'Move to the left')"
             :height="[30, 24]"
-            :editable="true"
+            :clickable="true"
             @click="$emit('update:left')"
           />
           <FSChip
@@ -53,15 +53,15 @@
             class="fs-header-button-chip"
             variant="borderless"
             prependIcon="mdi-chevron-right"
-            :label="$tr('ui.data-table.move-right', 'Move to the right')"
+            :label="$tr('data-table.move-right', 'Move to the right')"
             :height="[30, 24]"
-            :editable="true"
+            :clickable="true"
             @click="$emit('update:right')"
           />
         </FSCol>
       </FSCol>
     </FSCard>
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -73,6 +73,7 @@ import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSSpan from "../FSSpan.vue";
 import FSChip from "../FSChip.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -82,6 +83,7 @@ export default defineComponent({
     FSCard,
     FSChip,
     FSSpan,
+    FSMenu,
     FSCol
   },
   props: {

package/components/lists/FSHiddenButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="expanded"
   >
@@ -10,8 +10,8 @@
         prependIcon="mdi-eye-off-outline"
         :height="[30, 24]"
         :color="ColorEnum.Light"
-        :editable="true"
-        :label="$tr('ui.data-table.hidden-columns', '{0} hidden column(s)', $props.headers.length.toString())"
+        :clickable="true"
+        :label="$tr('data-table.hidden-columns', '{0} hidden column(s)', $props.headers.length.toString())"
         v-bind="props"
       />
     </template>
@@ -21,21 +21,19 @@
       :border="false"
     >
       <FSCol
-        padding="16px 0px 24px 16px"
+        padding="24px"
         gap="12px"
       >
         <FSCol
-          padding="0 16px 0 0"
           gap="12px"
         >
           <FSSpan
             font="text-overline"
           >
-            {{ $tr("ui.data-table.show-columns", "Show columns") }}
+            {{ $tr("data-table.show-columns", "Show columns") }}
           </FSSpan>
         </FSCol>
         <FSFadeOut
-          padding="0 8px 0 0"
           maxHeight="360px"
         >
           <FSCol
@@ -48,7 +46,7 @@
               :height="['30px', '24px']"
               :color="$props.color"
               :label="header.text"
-              :editable="true"
+              :clickable="true"
               :key="index"
               @click="$emit('update:show', header)"
             >
@@ -57,7 +55,7 @@
         </FSFadeOut>
       </FSCol>
     </FSCard>
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -68,6 +66,7 @@ import { type ColorBase, ColorEnum, type FSDataTableColumn } from "@dative-gpi/f
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSSpan from "../FSSpan.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -76,6 +75,7 @@ export default defineComponent({
     FSCard,
     FSChip,
     FSSpan,
+    FSMenu,
     FSCol
   },
   props: {

package/components/lists/FSLoadDataTable.vue

@@ -13,13 +13,16 @@
       <FSLoader
         variant="button"
       />
-      <v-spacer />
-      <FSLoader
-        variant="button"
-      />
-      <FSLoader
-        variant="button"
-      />
+      <FSRow
+        align="center-right"
+      >
+        <FSLoader
+          variant="button"
+        />
+        <FSLoader
+          variant="button"
+        />
+      </FSRow>
     </FSRow>
     <FSRow>
       <FSLoader

package/components/lists/FSSimpleList.vue

@@ -1,92 +1,118 @@
 <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"
+      v-if="$props.direction == 'column'"
       :maxHeight="$props.maxHeight"
       :maskHeight="0"
     >
-      <component
-        :is="$props.direction == 'row' ? FSRow : FSCol"
-      >
+      <FSCol>
         <template
           v-if="$props.loading"
         >
           <FSLoader
             v-for="i in 4"
             :key="i"
-            :width="$props.direction == 'row' ? '220px' : '100%'"
+            width="100%"
             height="50px"
           />
         </template>
         <template
           v-else
         >
-          <FSTile
+          <FSSimpleListItem
             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"
-                :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>
+            :id="item.id"
+            :label="item[$props.itemLabel ?? 'label']"
+            :icon="item.icon"
+            :imageId="item.imageId"
+            :showEdit="$props.showEdit"
+            :showRemove="$props.showRemove"
+            :showDraggable="$props.showDraggable"
+            :tileProps="$props.tileProps ? $props.tileProps(item) : undefined"
+            width="100%"
+            @click:edit="$emit('click:edit', $event)"
+            @click:remove="$emit('click:remove', $event)"
+          />
         </template>
-      </component>
+      </FSCol>
     </FSFadeOut>
+    <template
+      v-else-if="$props.direction == 'row'"
+    >
+      <FSRow
+        v-if="$props.loading"
+        :wrap="false"
+      >
+        <FSLoader
+          v-for="i in 4"
+          :key="i"
+          width="100px"
+          height="50px"
+        />
+      </FSRow>
+      <FSRow
+        v-else
+        :wrap="false"
+      >
+        <FSSimpleListItem 
+          v-for="item in filteredItems"
+          :key="item.id"
+          :id="item.id"
+          :label="item[$props.itemLabel ?? 'label']"
+          :icon="item.icon"
+          :imageId="item.imageId"
+          :showEdit="$props.showEdit"
+          :showRemove="$props.showRemove"
+          :showDraggable="$props.showDraggable"
+          :tileProps="$props.tileProps ? $props.tileProps(item) : undefined"
+          width="fit-content"
+          @click:edit="$emit('click:edit', $event)"
+          @click:remove="$emit('click:remove', $event)"
+        />
+      </FSRow>
+    </template>
+    <FSSlideGroup
+      v-else
+    >
+      <template
+        v-if="$props.loading"
+      >
+        <FSLoader
+          v-for="i in 4"
+          :key="i"
+          width="100%"
+          height="50px"
+        />
+      </template>
+      <template
+        v-else
+      >
+        <FSSimpleListItem
+          v-for="item in filteredItems"
+          :key="item.id"
+          :id="item.id"
+          :label="item[$props.itemLabel ?? 'label']"
+          :icon="item.icon"
+          :imageId="item.imageId"
+          :showEdit="$props.showEdit"
+          :showRemove="$props.showRemove"
+          :showDraggable="$props.showDraggable"
+          :tileProps="$props.tileProps ? $props.tileProps(item) : undefined"
+          width="fit-content"
+          @click:edit="$emit('click:edit', $event)"
+          @click:remove="$emit('click:remove', $event)"
+        />
+      </template>
+    </FSSlideGroup>
   </FSCol>
 </template>
 
@@ -100,42 +126,31 @@ 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 FSLoader from '../FSLoader.vue';
 import FSFadeOut from "../FSFadeOut.vue";
+import FSSlideGroup from "../FSSlideGroup.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";
+import FSSimpleListItem from "./FSSimpleListItem.vue";
 
 export default defineComponent({
   name: "FSSimpleList",
   components: {
     FSRow,
     FSCol,
-    FSTile,
-    FSIcon,
-    FSSpan,
-    FSImage,
-    FSLoader,
     FSFadeOut,
+    FSLoader,
+    FSSlideGroup,
     FSSearchField,
-    FSButtonEditIcon,
-    FSButtonDragIcon,
-    FSButtonRemoveIcon,
+    FSSimpleListItem
   },
   props: {
     items: {
-      type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string, [index: string]: any}[]>,
+      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,
-      default: () => () => ({})
+      required: false
     },
     showEdit: {
       type: Boolean,
@@ -173,12 +188,12 @@ export default defineComponent({
       default: undefined
     },
     direction: {
-      type: String as PropType<"row" | "column">,
+      type: String as PropType<"row" | "column" | "slided">,
       required: false,
       default: "column"
     },
     itemLabel: {
-      type: String,
+      type: String as PropType<string>,
       required: false,
       default: "label"
     },
@@ -215,8 +230,6 @@ export default defineComponent({
       filteredItems,
       ColorEnum,
       onSearch,
-      FSRow,
-      FSCol,
     }
   }
 });

package/components/lists/FSSimpleListItem.vue

@@ -0,0 +1,131 @@
+<template>
+  <FSTile
+    v-bind="$props.tileProps"
+    :width="$props.width"
+    height="fit-content"
+  >
+    <slot
+      name="item"
+      :item="{ label, icon, imageId, id }"
+    >
+      <FSRow
+        align="center-left"
+        height="24px"
+        :wrap="false"
+      >
+        <FSButtonDragIcon
+          v-if="showDraggable"
+        />
+        <slot
+          name="itemContent"
+          :item="{ label, icon, imageId, id }"
+        >
+          <!-- TODO : add draggable option -->
+          <FSImage
+            v-if="$props.imageId"
+            width="24px"
+            height="24px"
+            :imageId="$props.imageId"
+            :thumbnail="true"
+          />
+          <FSIcon
+            size="24px"
+            v-else-if="$props.icon"
+            :icon="$props.icon"
+          />
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $props.label }}
+          </FSSpan>
+        </slot>
+        <FSRow
+          v-if="showEdit || showRemove"
+          align="center-right"
+          :wrap="false"
+        >
+          <FSButtonEditIcon
+            v-if="showEdit"
+            @click="$emit('click:edit', $props.id)"
+          />
+          <FSButtonRemoveIcon
+            v-if="showRemove"
+            @click="$emit('click:remove', $props.id)"
+          />
+        </FSRow>
+      </FSRow>
+    </slot>
+  </FSTile>
+</template>
+
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FSRow from "../FSRow.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSImage from "../FSImage.vue";
+import FSTile from "../tiles/FSTile.vue";
+import FSButtonEditIcon from "../buttons/FSButtonEditIcon.vue";
+import FSButtonDragIcon from "../buttons/FSButtonDragIcon.vue";
+import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.vue";
+
+export default defineComponent({
+  name: "FSSimpleListItem",
+  components: {
+    FSRow,
+    FSTile,
+    FSIcon,
+    FSSpan,
+    FSImage,
+    FSButtonEditIcon,
+    FSButtonDragIcon,
+    FSButtonRemoveIcon,
+  },
+  props: {
+    tileProps: {
+      type: Object as PropType<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
+    },
+    width:{
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: false
+    },
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false
+    }
+  },
+  emits: ["click:edit", "click:remove"]
+});
+</script>