@dative-gpi/foundation-shared-components 1.0.63 → 1.0.65

package/components/FSButton.vue

@@ -230,7 +230,7 @@ export default defineComponent({
     iconSize: {
       type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
       required: false,
-      default: () => ["24", "20"]
+      default: () => ["24px", "20px"]
     },
     variant: {
       type: String as PropType<"standard" | "full" | "icon">,
@@ -310,7 +310,7 @@ export default defineComponent({
     });
 
     const padding = computed(() => {
-      if(props.padding !== DEFAULT_PADDING){
+      if (props.padding !== DEFAULT_PADDING) {
         return props.padding;
       }
 
@@ -319,16 +319,14 @@ export default defineComponent({
       
       const hasLabel = props.label || !!slots.default;
 
-      if(!hasLabel && hasIcon){
+      if (!hasLabel && hasIcon) {
         return PADDING_ICON_ONLY;
       }
-      else if(hasLabel && !hasIcon)
-      {
+      else if (hasLabel && !hasIcon) {
         return PADDING_LABEL_ONLY;
       }
-
       return DEFAULT_PADDING;
-    })
+    });
 
     const onClick = (event: MouseEvent) => {
       if (!props.to && !props.href && props.editable && !props.load) {

package/components/FSColorIcon.vue

@@ -3,8 +3,8 @@
     class="fs-color-icon"
     :color="$props.color"
     :border="false"
-    :height="size"
-    :width="size"
+    :height="actualSize"
+    :width="actualSize"
   >
     <FSRow
       align="center-center"
@@ -52,13 +52,13 @@ export default defineComponent({
     padding: {
       type: [String, Number] as PropType<string | number>,
       required: false,
-      default: "0px"
+      default: "8px"
     }
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
 
-    const size = computed((): string[] | number[] | string | number | null => {
+    const actualSize = computed((): string[] | number[] | string | number | null => {
       switch(props.size) {
         case "s": return isMobileSized.value ? "18px" : "20px";
         case "m": return isMobileSized.value ? "20px" : "26px";
@@ -67,16 +67,19 @@ export default defineComponent({
       }
     });
 
-    const iconSize = computed(() => {
-      if (!props.padding) {
-        return size.value;
+    const iconSize = computed((): string => {
+      switch(props.size) {
+        case "s": 
+        case "m": 
+        case "l":
+          return props.size;
+        default: return `calc(${sizeToVar(props.size)} - ${sizeToVar(props.padding)})`;
       }
-      return `calc(${sizeToVar(size.value)} - ${sizeToVar(props.padding)})`;
     });
 
     return {
-      iconSize,
-      size
+      actualSize,
+      iconSize
     };
   }
 });

package/components/FSIcon.vue

@@ -14,7 +14,8 @@ import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase } from "@dative-gpi/foundation-shared-components/models";
-import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+
+import { sizeToVar } from "../utils";
 
 export default defineComponent({
   name: "FSIcon",

package/components/FSOptionGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <FSWrapGroup
-    v-if="['wrap'].includes(props.variant)"
+    v-if="props.variant === 'wrap'"
     class="fs-option-group"
     :padding="props.padding"
     :gap="props.gap"
@@ -46,7 +46,7 @@
     />
   </FSWrapGroup>
   <FSSlideGroup
-    v-else
+    v-else-if="props.variant === 'slide'"
     class="fs-option-group"
     :padding="props.padding"
     :gap="props.gap"
@@ -91,6 +91,54 @@
       v-bind="{ toggle, getVariant, getColor, getClass }"
     />
   </FSSlideGroup>
+  <FSRow
+    v-else
+    class="fs-option-group-full-width"
+    width="100%"
+    :padding="props.padding"
+    :gap="props.gap"
+    :style="style"
+    :wrap="false"
+  >
+    <template
+      v-if="props.values.length"
+    >
+      <template
+        v-if="!$slots.item"
+      >
+        <FSOptionItem
+          v-for="(item, index) in props.values"
+          :padding="props.optionPadding"
+          :editable="props.editable"
+          :prependIcon="item.prependIcon"
+          :appendIcon="item.appendIcon"
+          :variant="getVariant(item)"
+          :color="getColor(item)"
+          :class="getClass(item)"
+          :label="item.label"
+          :icon="item.icon"
+          :key="index"
+          @click="toggle(item)"
+        />
+      </template>
+      <template
+        v-else
+      >
+        <template
+          v-for="item in props.values"
+        >
+          <slot
+            name="item"
+            v-bind="{ item, toggle, getVariant, getColor, getClass }"
+          />
+        </template>
+      </template>
+    </template>
+    <slot
+      v-else
+      v-bind="{ toggle, getVariant, getColor, getClass }"
+    />
+  </FSRow>
 </template>
 
 <script lang="ts">
@@ -128,7 +176,7 @@ export default defineComponent({
       default: "4px"
     },
     variant: {
-      type: String as PropType<"wrap" | "slide">,
+      type: String as PropType<"wrap" | "slide" | "fullwidth">,
       required: false,
       default: "wrap"
     },

package/components/deviceOrganisations/FSStatusesCarousel.vue

@@ -1,6 +1,7 @@
 <template>
   <FSRow
     :wrap="false"
+    align="center-center"
   >
     <FSButton
       v-if="$props.modelStatuses.length > 1"

package/components/fields/FSColorField.vue

@@ -1,47 +1,47 @@
 <template>
+
+  <FSBaseField
+    class="fs-color-field"
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :editable="$props.editable"
+    :required="$props.required"
+    :label="$props.label"
+    :width="$props.width"
+    :style="style"
+    :modelValue="innerColor"
+    v-bind="$attrs"
+  >
+    <FSCard
+      :id="activatorId"
+      padding="8px"
+      width="100%"
+      :class="{ 'fs-color-field-disabled': !$props.editable }"
+    >
+      <FSRow
+        align="center-center"
+      >
+        <FSIcon
+          icon="mdi-circle-half"
+          size="20px"
+          :color="innerColor"
+        />
+        <FSText
+          font="text-overline"
+        >
+          {{ innerColor }}
+        </FSText>
+      </FSRow>
+    </FSCard>
+  </FSBaseField>
   <v-menu
+    origin="top left"
+    min-width="300px"
+    :activator="`#${activatorId}`"
     :closeOnContentClick="false"
     :modelValue="menu && $props.editable"
     @update:modelValue="menu = $event"
   >
-    <template
-      #activator="{ props }"
-    >
-      <FSBaseField
-        class="fs-color-field"
-        :description="$props.description"
-        :hideHeader="$props.hideHeader"
-        :editable="$props.editable"
-        :required="$props.required"
-        :label="$props.label"
-        :width="$props.width"
-        :style="style"
-        :modelValue="innerColor"
-        v-bind="$attrs"
-      >
-        <FSCard
-          padding="8px"
-          width="100%"
-          :class="{ 'fs-color-field-disabled': !$props.editable }"
-          v-bind="props"
-        >
-          <FSRow
-            align="center-center"
-          >
-            <FSIcon
-              icon="mdi-circle-half"
-              size="20px"
-              :color="innerColor"
-            />
-            <FSText
-              font="text-overline"
-            >
-              {{ innerColor }}
-            </FSText>
-          </FSRow>
-        </FSCard>
-      </FSBaseField>
-    </template>
     <FSCard
       :elevation="true"
       :border="false"
@@ -156,6 +156,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const { getColors, getBasePaletteColors } = useColors();
     const { slots } = useSlots();
+    const activatorId = `activator-${Math.random().toString(36).substring(7)}`;
 
     delete slots.description;
 
@@ -214,6 +215,7 @@ export default defineComponent({
       getPercentageFromHex,
       getBasePaletteColors,
       innerOpacity,
+      activatorId,
       innerColor,
       fullColor,
       ColorEnum,

package/components/fields/FSTermField.vue

@@ -428,7 +428,6 @@ export default defineComponent({
         }
       }
       else {
-        console.log(value[0], value[1]);
         if (value && value[0] != null && epochToISO(value[0]) !== innerStartDate.value) {
           innerStartDate.value = epochToISO(value[0]);
           if (valid.value) {

package/components/lists/FSDataTableUI.vue

@@ -1212,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) {
@@ -1219,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/FSSimpleList.vue

@@ -71,11 +71,12 @@
                   <FSSpan
                     font="text-overline"
                   >
-                    {{ item[itemLabel] }}
+                    {{ item[$props.itemLabel || 'label'] }}
                   </FSSpan>
                 </slot>
                 <FSRow
                   align="center-right"
+                  :wrap="false"
                 >
                   <FSButtonEditIcon
                     v-if="showEdit"

package/models/rules.ts

@@ -76,6 +76,6 @@ export const ToggleRules = {
 
 export const TreeViewRules = {
     required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string | undefined = undefined) => (value: string[]) => { console.log(value); return (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.tree-view-min", "Must select at least {0} elements", min.toString())); },
+    min: (min: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.tree-view-min", "Must select at least {0} elements", min.toString())),
     max: (max: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.tree-view-max", "Must select at most {0} elements", max.toString()))
 };

package/models/tables.ts

@@ -8,10 +8,12 @@ export interface FSDataTableColumn {
 
   sortable?: boolean | null;
   sort?: ((a: any, b: any) => number) | null;
+  sortRaw?: ((a: any, b: any) => number) | null;
 
   filterable?: boolean | null;
   fixedFilters?: { value: any, text: string }[] | null;
-  methodFilter?: ((value: any, item: any) => boolean) | null;
+  methodFilter?: ((value: any, property: any) => boolean) | null;
+  methodFilterRaw?: ((value: any, item: any) => boolean) | null;
   filter?: ((value: any, search: string, item: any) => boolean) | null;
 
   innerValue?: ((value: any) => any) | null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.63",
-    "@dative-gpi/foundation-shared-services": "1.0.63"
+    "@dative-gpi/foundation-shared-domain": "1.0.65",
+    "@dative-gpi/foundation-shared-services": "1.0.65"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "b2fbfec30ab5c2f3edeaddbc7eed0d3c98fe71c4"
+  "gitHead": "942a36ea827fcf856d357a4ad826a6d4e3acf53c"
 }

package/styles/components/fs_option_group.scss

@@ -1,8 +1,18 @@
 .fs-option-group {
-    border-radius: var(--fs-option-group-border-radius) !important;
-    border: var(--fs-option-group-border-size) solid !important;
-    background-color: var(--fs-option-group-background-color) !important;
-    width: fit-content;
+  border-radius: var(--fs-option-group-border-radius) !important;
+  border: var(--fs-option-group-border-size) solid !important;
+  background-color: var(--fs-option-group-background-color) !important;
+  border-color: var(--fs-option-group-border-color) !important;
+  width: fit-content;
+}
 
-    border-color: var(--fs-option-group-border-color) !important;
+.fs-option-group-full-width {
+  border-radius: var(--fs-option-group-border-radius) !important;
+  border: var(--fs-option-group-border-size) solid !important;
+  background-color: var(--fs-option-group-background-color) !important;
+  border-color: var(--fs-option-group-border-color) !important;
+
+  & > * {
+    width: 100% !important;
+  }
 }

package/utils/filter.ts

@@ -1,11 +1,11 @@
 export const containsSearchTerm = (obj: any, searchTerm: string): boolean => {
-  if (typeof obj !== 'object' || obj === null) {
-    return String(obj).toLowerCase().includes(searchTerm);
+  if (typeof obj === 'object') {
+    return Object.values(obj).some(value => containsSearchTerm(value, searchTerm));
   }
   if (Array.isArray(obj)) {
     return obj.some(element => containsSearchTerm(element, searchTerm));
   }
-  return Object.values(obj).some(value => containsSearchTerm(value, searchTerm));
+  return String(obj).toLowerCase().includes(searchTerm);
 };
 
 export const filterItems = <T>(items: T[], filter: string): T[] => {