@dative-gpi/foundation-shared-components 0.0.90 → 0.0.91

package/components/lists/FSDataTableUI.vue

@@ -50,41 +50,58 @@
     </FSRow>
     <FSRow
       v-if="showFiltersRow"
+      gap="16px"
     >
-      <template
-        v-if="showFilters"
+      <FSCol
+        v-if="showFilters && hasVisibleFilters"
+        width="hug"
       >
-        <FSFilterButton
-          v-for="(header, index) in filterableHeaders"
-          :key="index"
-          :header="header"
-          :filters="filters[header.value]"
-          @update:filter="(value) => toggleFilter(header.value, value)"
+        <FSRow
+          gap="8px"
         >
-          <template
-            #default="{ filter }"
+          <FSFilterButton
+            v-for="(header, index) in filterableHeaders"
+            :key="index"
+            :header="header"
+            :filters="filters[header.value]"
+            @update:filter="(value) => toggleFilter(header.value, value)"
           >
-            <slot
-              :name="filterSlot(header)"
-              v-bind="{ filter }"
-            />
-          </template>
-        </FSFilterButton>
-        <FSChip
-          v-if="resetable"
-          variant="standard"
-          :label="$tr('ui.data-table.reset-filters', 'Reset')"
-          :color="ColorEnum.Error"
-          :editable="true"
-          @click="resetFilter"
-        />
-      </template>
-      <FSHiddenButton
-        v-if="innerMode === 'table' && hiddenHeaders.length > 0"
-        :headers="hiddenHeaders"
-        :color="$props.color"
-        @update:show="(value) => updateHeader(value, 'hidden', false)"
+            <template
+              #default="{ filter }"
+            >
+              <slot
+                :name="filterSlot(header)"
+                v-bind="{ filter }"
+              />
+            </template>
+          </FSFilterButton>
+        </FSRow>
+      </FSCol>
+      <FSDivider
+        v-if="showFiltersDivider"
+        :vertical="true"
       />
+      <FSCol>
+        <FSRow
+          gap="8px"
+        >
+          <FSChip
+            v-if="showFilters && resetable"
+            variant="standard"
+            :label="$tr('ui.data-table.reset-filters', 'Reset')"
+            :height="[30, 24]"
+            :color="ColorEnum.Error"
+            :editable="true"
+            @click="resetFilter"
+          />
+          <FSHiddenButton
+            v-if="innerMode === 'table' && hiddenHeaders.length > 0"
+            :headers="hiddenHeaders"
+            :color="$props.color"
+            @update:show="(value) => updateHeader(value, 'hidden', false)"
+          />
+        </FSRow>
+      </FSCol>
     </FSRow>
     <template
       v-if="innerMode === 'table'"
@@ -218,7 +235,7 @@
                     width="hug"
                   >
                     <FSCheckbox
-                      v-if="showSelect"
+                      v-if="$props.showSelect"
                       :modelValue="props.item.items.every((item) => innerValue.includes(item.key))"
                       :indeterminate="innerValue.some((id) => props.item.items.some((item) => item.key === id)) && !props.item.items.every((item) => innerValue.includes(item.key))"
                       @update:modelValue="toggleSelectGroup(props.item)"
@@ -279,6 +296,7 @@
                   variant="icon"
                   :color="sortColor(header, props)"
                   :icon="sortIcon(header, props)"
+                  @click="toggleSort(header)"
                 />
               </slot>
             </FSRow>
@@ -639,6 +657,7 @@ import FSOptionGroup from "../FSOptionGroup.vue";
 import FSToggleSet from "../FSToggleSet.vue";
 import FSDraggable from "./FSDraggable.vue";
 import FSCheckbox from "../FSCheckbox.vue";
+import FSDivider from "../FSDivider.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSIcon from "../FSIcon.vue";
@@ -660,6 +679,7 @@ export default defineComponent({
     FSDraggable,
     FSToggleSet,
     FSCheckbox,
+    FSDivider,
     FSCard,
     FSChip,
     FSIcon,
@@ -713,7 +733,7 @@ export default defineComponent({
       default: null
     },
     sortBy: {
-      type: Object as PropType<FSDataTableOrder>,
+      type: Object as PropType<FSDataTableOrder | null>,
       required: false,
       default: null
     },
@@ -837,6 +857,14 @@ export default defineComponent({
       return (props.showSearch && showFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
     });
 
+    const hasVisibleFilters = computed((): boolean => {
+      return filterableHeaders.value.some((header) => !hiddenHeaders.value.includes(header));
+    });
+
+    const showFiltersDivider = computed((): boolean => {
+      return resetable.value || (hiddenHeaders.value.length > 0 && hasVisibleFilters.value);
+    });
+
     const hasToolbar = computed((): boolean => {
       return !!useSlots().slots["toolbar"];
     });
@@ -1053,7 +1081,7 @@ 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 reset button will be shown
+      // 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));
     };
@@ -1077,6 +1105,12 @@ export default defineComponent({
         switch (property) {
           case "hidden":
             innerColumn.hidden = value as boolean;
+            if (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;
           case "index":
             switch (value) {
@@ -1177,6 +1211,18 @@ export default defineComponent({
       return "mdi-sort-variant-off";
     };
 
+    const toggleSort = (header: FSDataTableColumn) => {
+      if (header.value == null) {return}
+
+      if (innerSortBy.value?.key !== header.value) {
+        innerSortBy.value = { key: header.value, order: 'asc' };
+      } else if (innerSortBy.value.order === 'asc') {
+        innerSortBy.value.order = 'desc' ;
+      } else {
+        innerSortBy.value = null;
+      }
+    }
+
     const observeIntersection = (): void => {
       switch (innerMode.value) {
         case "table":
@@ -1389,6 +1435,8 @@ export default defineComponent({
       pageOptions,
       showFilters,
       showFiltersRow,
+      showFiltersDivider,
+      hasVisibleFilters,
       extraHeaders,
       innerHeaders,
       hiddenHeaders,
@@ -1409,6 +1457,7 @@ export default defineComponent({
       toggleSelectAll,
       toggleSelectGroup,
       toggleSelect,
+      toggleSort,
       updateHeader,
       toggleFilter,
       resetFilter,

package/components/lists/FSFilterButton.vue

@@ -10,6 +10,7 @@
         class="fs-filter-button"
         variant="standard"
         prependIcon="mdi-filter-variant"
+        :height="[30, 24]"
         :color="ColorEnum.Dark"
         :editable="true"
         :label="label"
@@ -22,36 +23,47 @@
       :border="false"
     >
       <FSCol
-        gap="16px"
-        padding="6px 16px"
+        gap="12px"
+        padding="16px 0 24px 16px"
       >
-        <FSSpan
-          font="text-overline"
+        <FSCol
+          gap="12px"
+          padding="0 16px 0 0"
         >
-          {{ $tr("ui.data-table.filter", "Filter") }}
-        </FSSpan>
-        <FSChip
-          class="fs-filter-button-all"
-          :editable="true"
-          :color="$props.color"
-          :variant="getAllVariant()"
-          :label="$tr('ui.data-table.all-values', 'All values')"
-          @click="onToggleAll"
-        />
-        <FSSearchField
-          class="fs-filter-button-all"
-          prependInnerIcon="mdi-magnify"
-          v-model="search"
-        />
-        <v-divider />
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $tr("ui.data-table.filter", "Filter") }}
+          </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')"
+            @click="onToggleAll"
+          />
+          <FSDivider
+            padding="0 8px 0 0"
+          />
+          <FSSearchField
+            class="fs-filter-button-search"
+            prependInnerIcon="mdi-magnify"
+            v-model="search"
+          />
+        </FSCol>
         <FSFadeOut
           padding="0 8px 0 0"
           height="360px"
         >
-          <FSCol>
+          <FSCol
+            gap="6px"
+          >
             <FSChip
               v-for="(filter, index) in searchedFilters"
               class="fs-filter-button-chip"
+              :height="[30, 24]"
               :key="index"
               :editable="true"
               :label="filter.text"
@@ -82,6 +94,7 @@ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui
 
 import FSSearchField from "../fields/FSSearchField.vue";
 import FSFadeOut from "../FSFadeOut.vue";
+import FSDivider from "../FSDivider.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSSpan from "../FSSpan.vue";
@@ -92,6 +105,7 @@ export default defineComponent({
   components: {
     FSSearchField,
     FSFadeOut,
+    FSDivider,
     FSCard,
     FSChip,
     FSSpan,
@@ -141,14 +155,14 @@ export default defineComponent({
       return props.filters;
     });
 
-    const getVariant = (filter: FSDataTableFilter): "standard" | "full" => {
+    const getVariant = (filter: FSDataTableFilter): "standard" | "full" | "borderless" => {
       if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
         if (filter.hidden) {
-          return "standard";
+          return "borderless";
         }
         return "full";
       }
-      return "standard";
+      return "borderless";
     };
 
     const getAllVariant = (): "standard" | "full" => {

package/components/lists/FSHeaderButton.vue

@@ -27,29 +27,35 @@
           {{ $tr("ui.data-table.column-options", "Options for this column") }}
         </FSSpan>
         <FSCol
-          padding="16px"
+          padding="6px"
         >
-          <FSButton
-            variant="icon"
-            icon="mdi-eye-off-outline"
+          <FSChip
+            prependIcon="mdi-eye-off-outline"
+            class="fs-header-button-chip"
+            variant="borderless"
             :label="$tr('ui.data-table.hide-column', 'Hide column')"
-            :color="ColorEnum.Dark"
+            :height="[30, 24]"
+            :editable="true"
             @click="$emit('update:hide')"
           />
-          <FSButton
+          <FSChip
             v-if="!$props.first"
-            variant="icon"
-            icon="mdi-chevron-left"
+            class="fs-header-button-chip"
+            variant="borderless"
+            prependIcon="mdi-chevron-left"
             :label="$tr('ui.data-table.move-left', 'Move to the left')"
-            :color="ColorEnum.Dark"
+            :height="[30, 24]"
+            :editable="true"
             @click="$emit('update:left')"
           />
-          <FSButton
+          <FSChip
             v-if="!$props.last"
-            variant="icon"
-            icon="mdi-chevron-right"
+            class="fs-header-button-chip"
+            variant="borderless"
+            prependIcon="mdi-chevron-right"
             :label="$tr('ui.data-table.move-right', 'Move to the right')"
-            :color="ColorEnum.Dark"
+            :height="[30, 24]"
+            :editable="true"
             @click="$emit('update:right')"
           />
         </FSCol>
@@ -66,6 +72,7 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSSpan from "../FSSpan.vue";
+import FSChip from "../FSChip.vue";
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -73,6 +80,7 @@ export default defineComponent({
   components: {
     FSButton,
     FSCard,
+    FSChip,
     FSSpan,
     FSCol
   },

package/components/lists/FSHiddenButton.vue

@@ -8,6 +8,7 @@
     >
       <FSChip
         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())"
@@ -20,23 +21,40 @@
       :border="false"
     >
       <FSCol
-        gap="16px"
-        padding="6px 16px"
+        gap="12px"
+        padding="16px 0px 24px 16px"
       >
-        <FSSpan
-          font="text-overline"
+        <FSCol
+          gap="12px"
+          padding="0 16px 0 0"
         >
-          {{ $tr("ui.data-table.show-columns", "Show columns") }}
-        </FSSpan>
-        <FSChip
-          v-for="(header, index) in $props.headers"
-          class="fs-hidden-button-chip"
-          :color="$props.color"
-          :label="header.text"
-          :editable="true"
-          :key="index"
-          @click="$emit('update:show', header)"
-        />
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $tr("ui.data-table.show-columns", "Show columns") }}
+          </FSSpan>
+        </FSCol>
+        <FSFadeOut
+          padding="0 8px 0 0"
+          height="360px"
+        >
+          <FSCol
+            gap="6px"
+          >
+            <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"
+              @click="$emit('update:show', header)"
+            >
+            </FSChip>
+          </FSCol>
+        </FSFadeOut>
       </FSCol>
     </FSCard>
   </v-menu>

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -59,7 +59,9 @@
           :width="imageSize"
         />
       </FSRow>
-      <template v-if="carouselModelStatuses.length">
+      <template
+        v-if="carouselModelStatuses.length"
+      >
         <FSDivider />
         <FSStatusesCarousel
           :modelStatuses="carouselModelStatuses"

package/components/tiles/FSFolderTileUI.vue

@@ -20,7 +20,7 @@ export default defineComponent({
     bottomColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
       required: false,
-      default: [ColorEnum.Light, ColorEnum.Primary]
+      default: () => [ColorEnum.Light, ColorEnum.Primary]
     },
     icon: {
       type: String,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.90",
+  "version": "0.0.91",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.90",
-    "@dative-gpi/foundation-shared-services": "0.0.90",
+    "@dative-gpi/foundation-shared-domain": "0.0.91",
+    "@dative-gpi/foundation-shared-services": "0.0.91",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "a9e61e5e740657f46604e90282f71fc058a81acd"
+  "gitHead": "5470b07f299ab5d02f4240807304335501bdaf07"
 }

package/styles/components/fs_autocomplete_field.scss

@@ -37,16 +37,21 @@
 
 .v-overlay-container > .v-overlay > .v-autocomplete__content {
     box-shadow: 0px 5px 8px 0px #00000029;
+    max-width: none !important;
     border-radius: 4px;
 
     & .v-list {
+        @extend .fs-hide-y-scrollbar;
+
         background-color: var(--fs-autocomplete-field-background-color);
+        padding: 2px 8px 2px 16px;
         border-radius: 4px;
         margin-top: 4px;
-        padding: 2px;
+        gap: 2px;
 
         & .v-list-item {
-            border-radius: 4px;
+            border-radius: 4px !important;
+            margin-top: 2px !important;
         }
     }
 }

package/styles/components/fs_chip.scss

@@ -3,17 +3,10 @@
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     background-color: var(--fs-chip-background-color) !important;
     border: 1px solid var(--fs-chip-border-color) !important;
+    height: var(--fs-chip-height) !important;
     color: var(--fs-chip-color) !important;
     border-radius: 50px !important;
     padding: 2px 20px !important;
-
-    @include web {
-        height: 24px !important;
-    }
-
-    @include mobile {
-        height: 20px !important;
-    }
 }
 
 .fs-chip-editable {

package/styles/components/fs_dialog.scss

@@ -6,34 +6,22 @@
     justify-content: flex-end;
     align-self: flex-end;
     margin-top: 20vh !important;
-    max-width: 100% !important;
-    width: 100% !important;
+    width: 100vw !important;
     margin: 0px !important;
 }
 
 .v-overlay__content:has(.fs-dialog) {
-    min-width: 35vw !important;
-    max-width: 90vw !important;
+    width: fit-content !important;
     max-height: 90vh !important;
-
-    &.v-overlay__content:has(.fs-dialog-mobile) {
-        max-width: 100vw !important;
-    }
+    min-width: 35vw !important;
 }
 
 .fs-dialog {
-    position: relative;
-    min-width: 35vw !important;
-    max-width: 90vw !important;
+    width: fit-content !important;
     max-height: 90vh !important;
+    min-width: 35vw !important;
 
     &.fs-dialog-mobile {
-        max-width: 100vw !important;
+        width: 100vw !important;
     }
-}
-
-.fs-dialog-close-button {
-    position: absolute;
-    top: 6px;
-    right: 6px;
 }

package/styles/components/fs_divider.scss

@@ -1,9 +1,15 @@
-.fs-divider {
-    width: var(--fs-divider-width);
+.fs-divider-horizontal {
+    width: var(--fs-divider-size);
     border-bottom: 1.3px solid var(--fs-divider-color);
     border-radius: 3px;
 }
 
+.fs-divider-vertical {
+    height: var(--fs-divider-size);
+    border-right: 1.3px solid var(--fs-divider-color);
+    border-radius: 3px;
+}
+
 .fs-divider-around {
     border-bottom: 1.3px solid var(--fs-divider-color);
     border-radius: 3px;

package/styles/components/fs_fade_out.scss

@@ -1,33 +1,18 @@
 .fs-fade-out {
     @extend .fs-hide-y-scrollbar;
     
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     max-height: var(--fs-fade-out-height);
-
     padding: var(--fs-fade-out-padding);
     width: var(--fs-fade-out-width);
     flex-direction: column;
     position: relative;
     display: flex;
-}
-// TODO
-.fs-fade-out-top {
-    pointer-events: none;
-    position: sticky;
-    z-index: 10;
-    min-height: var(--fs-fade-out-top-mask-height);
-    width: 100%;
-    top: 0;
-    transition: all 0.14s cubic-bezier(0.4, 0, 0.2, 1);
-    background: linear-gradient(to top, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-top-mask-height));
-}
-
-.fs-fade-out-bottom {
-    pointer-events: none;
-    position: sticky;
-    z-index: 10;
-    min-height: var(--fs-fade-out-bottom-mask-height);
-    width: 100%;
-    bottom: 0;
-    transition: all 0.14s cubic-bezier(0.4, 0, 0.2, 1);
-    background: linear-gradient(to bottom, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-bottom-mask-height));
+    
+    mask:
+        linear-gradient(to top, transparent 0, var(--fs-fade-out-mask-color)) 0 (0 / calc(100% - 8px)) var(--fs-fade-out-top-mask-height), 
+        linear-gradient(to bottom, transparent 0, var(--fs-fade-out-mask-color)) 0 (100% / calc(100% - 8px)) var(--fs-fade-out-bottom-mask-height),
+        linear-gradient(var(--fs-fade-out-mask-color) 0 0);
+    mask-composite:exclude;
+    mask-repeat: no-repeat;
 }

package/styles/components/fs_filter_button.scss

@@ -7,10 +7,10 @@
     }
 }
 
-.fs-filter-button-all {
-    width: calc(100% - 16px) !important;
-}
-
 .fs-filter-button-chip {
     width: 100%;
+}
+
+.fs-filter-button-search > .v-input > .v-input__control > .v-field {
+    border-radius: 44px !important;
 }

package/styles/components/fs_header_button.scss

@@ -1,4 +1,8 @@
 .fs-header-button {
     transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     opacity: 0;
+}
+
+.fs-header-button-chip {
+    width: 100% !important;
 }