@dative-gpi/foundation-shared-components 1.0.62 → 1.0.64

package/components/FSColorIcon.vue

@@ -11,7 +11,7 @@
     >
       <FSIcon
         :color="$props.color"
-        :size="$props.size"
+        :size="iconSize"
       >
         <slot />
       </FSIcon>
@@ -25,6 +25,8 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
+import { sizeToVar } from "../utils";
+
 import FSColor from "./FSColor.vue";
 import FSIcon from "./FSIcon.vue";
 import FSRow from "./FSRow.vue";
@@ -46,6 +48,11 @@ export default defineComponent({
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Dark
+    },
+    padding: {
+      type: [String, Number] as PropType<string | number>,
+      required: false,
+      default: "0px"
     }
   },
   setup(props) {
@@ -60,7 +67,15 @@ export default defineComponent({
       }
     });
 
+    const iconSize = computed(() => {
+      if (!props.padding) {
+        return size.value;
+      }
+      return `calc(${sizeToVar(size.value)} - ${sizeToVar(props.padding)})`;
+    });
+
     return {
+      iconSize,
       size
     };
   }

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/FSSwitch.vue

@@ -1,10 +1,58 @@
 <template>
-  <FSCol
+  <FSRow
     width="hug"
+    align="top-left"
+    gap="16px"
+    padding="8px 0px"
+    :wrap="false"
   >
+    <v-switch
+      v-if="variant == 'left'"
+      class="fs-switch"
+      hide-details
+      inset
+      :validateOn="validateOn"
+      :rules="$props.rules"
+      :ripple="false"
+      :style="style"
+      :modelValue="$props.modelValue"
+      @update:modelValue="onToggle"
+      v-bind="$attrs"
+    />
+    <slot>
+      <FSCol
+        width="hug"
+        v-if="$props.label || $props.description || $slots.description"
+      >
+        <FSSpan
+          v-if="$props.label"
+          class="fs-switch-label"
+          :style="style"
+          :font="font"
+          @click.stop="onToggle"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <slot
+          name="description"
+        >
+          <FSSpan
+            v-if="$props.description"
+            class="fs-switch-description"
+            font="text-overline"
+            :style="style"
+          >
+            {{ $props.description }}
+          </FSSpan>
+        </slot>
+        <slot
+          name="footer"
+        />
+      </FSCol>
+    </slot>
     <FSRow
-      width="hug"
-      align="center-left"
+      v-if="variant == 'right'"
+      align="center-right"
     >
       <v-switch
         class="fs-switch"
@@ -18,31 +66,8 @@
         @update:modelValue="onToggle"
         v-bind="$attrs"
       />
-      <slot>
-        <FSSpan
-          v-if="$props.label"
-          class="fs-switch-label"
-          :style="style"
-          :font="font"
-          @click.stop="onToggle"
-        >
-          {{ $props.label }}
-        </FSSpan>
-      </slot>
     </FSRow>
-    <slot
-      name="description"
-    >
-      <FSSpan
-        v-if="$props.description"
-        class="fs-switch-description"
-        font="text-overline"
-        :style="style"
-      >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+  </FSRow>
 </template>
 
 <script lang="ts">
@@ -78,6 +103,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    variant: {
+      type: String as PropType<"left" | "right">,
+      required: false,
+      default: "left"
+    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,

package/components/deviceOrganisations/FSConnectivity.vue

@@ -9,7 +9,8 @@
     >
       <FSColorIcon
         class="fs-stopclick"
-        size="m"
+        :size="$props.size"
+        :padding="$props.padding"
         :color="$props.deviceConnectivity.color"
         @click.prevent.stop
         v-bind="props"
@@ -43,6 +44,14 @@ export default defineComponent({
     deviceConnectivity: {
       type: Object as PropType<FSDeviceConnectivity>,
       required: true
+    },
+    size: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      default: "m"
+    },
+    padding: {
+      type: [String, Number] as PropType<string | number>,
+      default: "8px"
     }
   },
   setup() {

package/components/deviceOrganisations/FSStatus.vue

@@ -11,6 +11,7 @@
         class="fs-stopclick"
         :size="$props.size"
         :color="$props.statusGroup.color"
+        :padding="$props.padding"
         @click.prevent.stop
         v-bind="props"
       >
@@ -52,6 +53,10 @@ export default defineComponent({
     size: {
       type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
       default: "m"
+    },
+    padding: {
+      type: [String, Number] as PropType<string | number>,
+      default: "8px"
     }
   },
   setup() {

package/components/lists/FSDataTableUI.vue

@@ -1224,6 +1224,7 @@ export default defineComponent({
               return Array.isArray(property) ? property.includes(value) || (!value && property.length == 0) : (!value && !property) || value == property;
             })
           }));
+          filterDictionary[key] = value;
         }
         else {
           if (props.items && props.items.length) {
@@ -1241,10 +1242,10 @@ export default defineComponent({
               })
             }));
           }
+          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

@@ -68,7 +68,11 @@
                     v-else-if="item.icon"
                     :icon="item.icon"
                   />
-                  <FSSpan>{{ item[itemLabel] }}</FSSpan>
+                  <FSSpan
+                    font="text-overline"
+                  >
+                    {{ item[itemLabel] }}
+                  </FSSpan>
                 </slot>
                 <FSRow
                   align="center-right"

package/components/map/FSMap.vue

@@ -47,8 +47,8 @@
             v-for="location in $props.locations"
             :selected="location.id === $props.selectedLocationId"
             :key="location.id"
-            :color="location.color"
-            :icon="location.icon"
+            :color="location.color ?? ColorEnum.Primary"
+            :icon="location.icon ?? 'mdi-map-marker'"
             :latlng="{lat: location.address.latitude, lng: location.address.longitude}"
             @click="$emit('update:selectedLocationId', location.id)"
           />

package/models/map.ts

@@ -12,7 +12,7 @@ export interface MapLayer {
 export interface FSLocation {
   id: string;
   label: string;
-  icon: string;
+  icon: string | null;
   address: Address;
-  color: string;
+  color: string | null;
 }

package/package.json

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

package/styles/components/fs_filter_button.scss

@@ -1,10 +1,5 @@
 .fs-filter-button-menu {
-    @include web {
-        min-width: 200px !important;
-    }
-    @include mobile {
-        min-width: 180px !important;
-    }
+    min-width: 300px !important;
 }
 
 .fs-filter-button-chip {

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/styles/components/fs_switch.scss

@@ -31,6 +31,7 @@
 .fs-switch-label {
     cursor: var(--fs-switch-cursor) !important;
     color: var(--fs-switch-color) !important;
+    padding-top: 2px;
     user-select: none;
 }
 

package/styles/components/fs_tabs.scss

@@ -1,16 +1,17 @@
 .fs-tabs {
     display: flex !important;
     width: 100% !important;
-    flex-shrink: 0;
 
     @include web {
         height: 48px !important;
         max-height: 48px;
+        min-height: 48px;
     }
 
     @include mobile {
         height: 40px !important;
         max-height: 40px;
+        min-height: 40px;
     }
 }
 
@@ -34,11 +35,13 @@
     @include web {
         height: 48px !important;
         max-height: 48px;
+        min-height: 48px;
     }
 
     @include mobile {
         height: 40px !important;
         max-height: 40px;
+        min-height: 40px;
     }
 }