@dative-gpi/foundation-shared-components 0.0.86 → 0.0.88

package/components/FSOptionGroup.vue

@@ -160,6 +160,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
+    singleColor: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -168,7 +173,7 @@ export default defineComponent({
     gap: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "0"
+      default: "8px"
     },
     multiple: {
       type: Boolean,
@@ -193,6 +198,8 @@ export default defineComponent({
 
     const lights = getColors(ColorEnum.Light);
 
+    const colors = getColors(props.optionColor);
+
     const firstChild = getFirstChild("item");
 
     const style = computed((): { [key: string] : string | undefined } => {
@@ -234,12 +241,12 @@ export default defineComponent({
 
     const getColor = (value: FSToggle): ColorBase => {
       if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {
-        return props.activeColor;
+        return props.singleColor ? colors.dark : props.activeColor;
       }
       if (!Array.isArray(props.modelValue) && props.modelValue === value.id) {
-        return props.activeColor;
+        return props.singleColor ? colors.dark : props.activeColor;
       }
-      return props.optionColor;
+      return props.singleColor ? colors.base : props.optionColor;
     };
 
     const getClass = (value: FSToggle): string[] | string => {

package/components/FSOptionItem.vue

@@ -1,6 +1,6 @@
 <template>
   <FSClickable
-    padding="12px 0"
+    padding="4px"
     :editable="$props.editable"
     :height="['32px', '28px']"
     :variant="$props.variant"
@@ -46,6 +46,7 @@
 import { computed, defineComponent, PropType } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSClickable from "./FSClickable.vue";
@@ -87,6 +88,11 @@ export default defineComponent({
       required: false,
       default: "full"
     },
+    ItemWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: ["32px","28px"]
+    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
@@ -113,7 +119,7 @@ export default defineComponent({
       if (props.label) {
         return "fit-content";
       }
-      return "72px";
+      return sizeToVar(varToSize(props.ItemWidth));
     });
 
     const onClick = (event: MouseEvent) => {

package/components/lists/FSDataTableUI.vue

@@ -1,6 +1,8 @@
 <template>
   <FSCol gap="16px">
-    <FSRow align="bottom-center">
+    <FSRow align="bottom-center"
+      :wrap="isExtraSmall ? false : true"
+      width="fill">
       <template v-if="$props.showSearch">
         <FSSearchField prependInnerIcon="mdi-magnify"
           :hideHeader="true"
@@ -10,12 +12,21 @@
           :variant="showFilters ? 'full' : 'standard'"
           @click="showFilters = !showFilters" />
       </template>
-      <slot name="toolbar" />
+      <slot v-if="!isExtraSmall"
+        name="toolbar" />
       <v-spacer />
-      <FSOptionGroup v-if="!$props.disableTable && !$props.disableIterator"
-        :values="modeOptions"
-        :required="true"
-        v-model="innerMode" />
+      <FSRow v-if="!$props.disableTable && !$props.disableIterator"
+        align="center-right">
+        <FSOptionGroup :values="modeOptions"
+          :singleColor="true"
+          :required="true"
+          v-model="innerMode" />
+      </FSRow>
+    </FSRow>
+    <FSRow v-if="isExtraSmall && hasToolbar">
+      <FSWrapGroup>
+        <slot name="toolbar" />
+      </FSWrapGroup>
     </FSRow>
     <FSRow v-if="showFiltersRow">
       <template v-if="showFilters">
@@ -602,6 +613,10 @@ export default defineComponent({
       return (props.showSearch && showFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
     });
 
+    const hasToolbar = computed((): boolean => {
+      return !!useSlots().slots["toolbar"];
+    });
+
     const innerSlots = computed((): { [label: string]: Slot<any> } => {
       const slots = { ...useSlots().slots };
       delete slots["toolbar"];
@@ -1135,6 +1150,7 @@ export default defineComponent({
       innerMode,
       modeOptions,
       innerPage,
+      hasToolbar,
       pageOptions,
       showFilters,
       showFiltersRow,

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -39,7 +39,7 @@
             gap="4px"
           >
             <FSConnectivity
-              v-if="$props.deviceConnectivity"
+              v-if="$props.deviceConnectivity && $props.deviceConnectivity.status != 0"
               :deviceConnectivity="$props.deviceConnectivity"
             />
             <FSWorstAlert

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.86",
+  "version": "0.0.88",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.86",
-    "@dative-gpi/foundation-shared-services": "0.0.86",
+    "@dative-gpi/foundation-shared-domain": "0.0.88",
+    "@dative-gpi/foundation-shared-services": "0.0.88",
     "@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": "ff4a752918cbf77980545c0056db4235bcb23a11"
+  "gitHead": "b45c82081a4df225154d4deabec996a607308966"
 }