@dative-gpi/foundation-shared-components 0.0.20 → 0.0.21

package/components/FSButton.vue

@@ -1,16 +1,19 @@
 <template>
   <FSClickable
     v-if="!['icon'].includes($props.variant)"
-    :height="['40px', '36px']"
     :editable="$props.editable"
+    :height="['40px', '36px']"
+    :variant="$props.variant"
     :color="$props.color"
+    :padding="padding"
     :class="classes"
     :style="style"
+    :width="width"
     v-bind="$attrs"
   >
     <FSRow
       align="center-center"
-      width="hug"
+      width="fill"
       :wrap="false"
     >
       <slot name="prepend" v-bind="{ color: $props.color, colors }">
@@ -129,29 +132,15 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const hasNoText = computed(() => {
-      return !slots.default && !props.label;
-    });
-
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {
         switch (props.variant) {
-          case "standard":
-          case "full": return {
-            "--fs-button-padding": !hasNoText.value ? "0 16px" : "0 7px"
-          };
           case "icon": return {
             "--fs-button-color": lights.dark,
           };
         }
       }
       switch (props.variant) {
-        case "standard": return {
-          "--fs-button-padding": !hasNoText.value ? "0 16px" : "0 7px"
-        };
-        case "full": return {
-          "--fs-button-padding": !hasNoText.value ? "0 16px" : "0 7px"
-        };
         case "icon": switch (props.color) {
           case ColorEnum.Dark:
           case ColorEnum.Light: return {
@@ -182,10 +171,27 @@ export default defineComponent({
       return classNames;
     });
 
+    const padding = computed((): string | number => {
+      switch (props.variant) {
+        case "standard":
+        case "full":     return (!slots.default && !props.label) ? "0 7px" : "0 16px";
+        default:         return "0px";
+      }
+    });
+
+    const width = computed((): string | number => {
+      if (props.fullWidth) {
+        return "100%";
+      }
+      return "fit-content";
+    });
+
     return {
       classes,
+      padding,
       colors,
-      style
+      style,
+      width
     };
   }
 });

package/components/FSClickable.vue

@@ -1,5 +1,6 @@
 <template>
   <FSCard
+    v-if="!href"
     :border="$props.border"
     :class="classes"
     :style="style"
@@ -10,10 +11,26 @@
       <slot :name="name" v-bind="slotData" />
     </template>
   </FSCard>
+  <a
+    v-else
+    :href="href"
+  >
+    <FSCard
+      :border="$props.border"
+      :class="classes"
+      :style="style"
+      v-bind="$attrs"
+    >
+      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </FSCard>
+  </a>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
+import { RouteLocation, useRouter } from "vue-router";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -27,6 +44,11 @@ export default defineComponent({
     FSCard
   },
   props: {
+    to: {
+      type: [String, Object] as PropType<string | RouteLocation>,
+      required: false,
+      default: null
+    },
     border: {
       type: Boolean,
       required: false,
@@ -56,6 +78,7 @@ export default defineComponent({
   emits: ["click"],
   setup(props, { emit }) {
     const { getColors, getContrasts } = useColors();
+    const router = useRouter();
 
     const textColors = computed(() => getContrasts(props.color));
     const colors = computed(() => getColors(props.color));
@@ -68,7 +91,7 @@ export default defineComponent({
           "--fs-clickable-border-radius"   : sizeToVar(props.borderRadius),
           "--fs-clickable-background-color": lights.base,
           "--fs-clickable-border-color"    : lights.dark,
-          "--fs-clickable-color"           : lights.dark,
+          "--fs-clickable-color"           : lights.dark
         };
       }
       switch (props.variant) {
@@ -83,7 +106,7 @@ export default defineComponent({
           "--fs-clickable-hover-color"            : textColors.value.light,
           "--fs-clickable-active-background-color": colors.value.dark,
           "--fs-clickable-active-border-color"    : colors.value.dark,
-          "--fs-clickable-active-color"           : textColors.value.light,
+          "--fs-clickable-active-color"           : textColors.value.light
         };
         case "full": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
@@ -96,7 +119,7 @@ export default defineComponent({
           "--fs-clickable-hover-color"            : textColors.value.light,
           "--fs-clickable-active-background-color": colors.value.dark,
           "--fs-clickable-active-border-color"    : colors.value.dark,
-          "--fs-clickable-active-color"           : textColors.value.light,
+          "--fs-clickable-active-color"           : textColors.value.light
         };
       }
     });
@@ -109,6 +132,18 @@ export default defineComponent({
       return classNames;
     });
 
+    const href = computed((): string | null => {
+      if (!props.to) {
+        return null;
+      }
+      if (typeof props.to === "string") {
+        return props.to;
+      }
+      else {
+        return router.resolve(props.to).href;
+      }
+    });
+
     const onClick = () => {
       if (props.editable) {
         emit("click");
@@ -118,6 +153,7 @@ export default defineComponent({
     return {
       classes,
       style,
+      href,
       onClick
     };
   }

package/components/FSContainer.vue

@@ -12,6 +12,7 @@ import { computed, defineComponent } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
   name: "FSContainer",
@@ -40,7 +41,7 @@ export default defineComponent({
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       return {
-        "--fs-container-padding"         : typeof(props.padding) === "string" ? props.padding : `${props.padding}px`,
+        "--fs-container-padding"         : sizeToVar(props.padding),
         "--fs-container-background-color": backgrounds.base,
         "--fs-container-border-color"    : lights.dark
       };

package/components/FSLink.vue

@@ -1,8 +1,8 @@
 <template>
   <a
-    :href="$props.to"
     :class="classes"
     :style="style"
+    :href="href"
     v-bind="$attrs"
   >
     <slot />
@@ -11,6 +11,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
+import { RouteLocation, useRouter } from "vue-router";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -19,7 +20,7 @@ export default defineComponent({
   name: "FSLink",
   props: {
     to: {
-        type: String,
+        type: [String, Object] as PropType<string | RouteLocation>,
         required: false,
         default: "_blank"
     },
@@ -52,6 +53,7 @@ export default defineComponent({
   setup(props) {
     const { getColors } = useColors();
     const { slots } = useSlots();
+    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
 
@@ -86,9 +88,19 @@ export default defineComponent({
       }
     });
 
+    const href = computed((): string => {
+      if (typeof props.to === "string") {
+        return props.to;
+      }
+      else {
+        return router.resolve(props.to).href;
+      }
+    });
+
     return {
       classes,
-      style
+      style,
+      href
     };
   }
 });

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -38,6 +38,7 @@
             gap="4px"
           >
             <FSConnectivity
+              v-if="$props.deviceConnectivity"
               :deviceConnectivity="$props.deviceConnectivity"
             />
             <FSWorstAlert
@@ -129,7 +130,7 @@ export default defineComponent({
     deviceAlerts: {
       type: Array as PropType<FSDeviceAlert[]>,
       required: false,
-      default: null
+      default: () => []
     },
     modelStatuses: {
       type: Array as PropType<FSModelStatus[]>,

package/composables/useBreakpoints.ts

@@ -1,5 +1,7 @@
 import { computed, onMounted, onUnmounted, ref } from "vue";
 
+let initialized = false;
+
 export const useBreakpoints = () => {
     const windowWidth = ref(window.innerWidth);
 
@@ -7,14 +9,6 @@ export const useBreakpoints = () => {
         windowWidth.value = window.innerWidth;
     };
 
-    onMounted(() => {
-        window.addEventListener("resize", onSizeChange);
-    });
-
-    onUnmounted(() => {
-        window.removeEventListener("resize", onSizeChange);
-    });
-
     const isTouchScreenEnabled = computed((): boolean => {
         return navigator.maxTouchPoints > 0;
     });
@@ -27,6 +21,11 @@ export const useBreakpoints = () => {
         return windowWidth.value < 600;
     });
 
+    if (!initialized) {
+        window.addEventListener("resize", onSizeChange);
+        initialized = true;
+    }
+
     return {
         isTouchScreenEnabled,
         isMobileSized,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.20",
-    "@dative-gpi/foundation-shared-services": "0.0.20",
+    "@dative-gpi/foundation-shared-domain": "0.0.21",
+    "@dative-gpi/foundation-shared-services": "0.0.21",
     "@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": "9e8af5e1e592b3ae7725816cad435a497d2ffe91"
+  "gitHead": "27642f99177d57e7349dd826e922442a6c0720cb"
 }

package/styles/components/fs_button.scss

@@ -1,11 +1,3 @@
-.fs-button {
-    padding: var(--fs-button-padding) !important;
-
-    &.fs-button-full-width {
-        width: 100%;
-    }
-}
-
 .fs-button-icon {
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     color: var(--fs-button-color) !important;

package/styles/components/fs_clickable.scss

@@ -23,4 +23,9 @@
         border-color: var(--fs-clickable-active-border-color) !important;
         color: var(--fs-clickable-active-color) !important;
     }
+}
+
+a:has(.fs-clickable) {
+    text-decoration: none;
+    padding: 0 !important;
 }