@dative-gpi/foundation-shared-components 0.0.36 → 0.0.37

package/components/FSButton.vue

@@ -8,9 +8,10 @@
     :color="$props.color"
     :load="$props.load"
     :padding="padding"
+    :to="$props.to"
     :style="style"
     :width="width"
-    @click="$emit('click')"
+    @click.stop="onClick"
     v-bind="$attrs"
   >
     <FSRow
@@ -61,6 +62,24 @@
         :color="loadColor"
       />
     </template>
+    <template v-else-if="$props.to">
+      <router-link
+        :to="$props.to"
+      >
+        <FSIcon
+          v-if="$props.icon"
+          size="l"
+        >
+          {{ $props.icon }}
+        </FSIcon>
+        <FSSpan
+          v-if="$props.label"
+          font="text-overline"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </router-link>
+    </template>
     <template v-else>
       <FSIcon
         v-if="$props.icon"
@@ -80,6 +99,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";
@@ -98,6 +118,11 @@ export default defineComponent({
     FSRow
   },
   props: {
+    to: {
+      type: [String, Object] as PropType<string | RouteLocation>,
+      required: false,
+      default: null
+    },
     prependIcon: {
       type: String,
       required: false,
@@ -148,6 +173,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const { getColors } = useColors();
     const { slots } = useSlots();
+    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
@@ -209,9 +235,21 @@ export default defineComponent({
       return "fit-content";
     });
 
-    const onClick = () => {
-      if (props.editable && !props.load) {
-        emit("click");
+    const href = computed((): string | null => {
+      if (!props.to || !props.editable || props.load) {
+        return null;
+      }
+      if (typeof props.to === "string") {
+        return props.to;
+      }
+      else {
+        return router.resolve(props.to).href;
+      }
+    });
+
+    const onClick = (event: MouseEvent) => {
+      if (!props.to && props.editable && !props.load) {
+        emit("click", event);
       }
     };
 

package/components/FSClickable.vue

@@ -202,9 +202,9 @@ export default defineComponent({
       }
     });
 
-    const onClick = () => {
+    const onClick = (event: MouseEvent) => {
       if (!props.to && props.editable && !props.load) {
-        emit("click");
+        emit("click", event);
       }
     };
 

package/components/FSColorIcon.vue

@@ -24,7 +24,7 @@ export default defineComponent({
       default: "m"
     },
     variant: {
-      type: String as PropType<"standard" | "fill">,
+      type: String as PropType<"standard" | "full">,
       required: false,
       default: "standard"
     },
@@ -41,7 +41,7 @@ export default defineComponent({
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       switch (props.variant) {
-        case "fill": return {
+        case "full": return {
           "--fs-icon-background-color": colors.value.light
         };
         default: return {
@@ -53,7 +53,7 @@ export default defineComponent({
     const classes = computed((): string[] => {
       const classNames = [`fs-icon-${props.size}`];
       switch (props.variant) {
-        case "fill":
+        case "full":
           classNames.push("fs-color-icon");
           break;
       }

package/components/FSDialog.vue

@@ -93,8 +93,8 @@ export default defineComponent({
     });
 
     return {
-      ColorEnum,
       isExtraSmall,
+      ColorEnum,
       classes,
       width
     };

package/components/deviceOrganisations/FSConnectivity.vue

@@ -6,7 +6,7 @@
     <template #activator="{ props }">
       <FSColorIcon
         size="m"
-        variant="fill"
+        variant="full"
         :color="$props.deviceConnectivity.color"
         v-bind="props"
       >

package/components/deviceOrganisations/FSStatus.vue

@@ -6,7 +6,7 @@
     <template #activator="{ props }">
       <FSColorIcon
         size="m"
-        variant="fill"
+        variant="full"
         :color="$props.statusGroup.color"
         v-bind="props"
       >

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -10,7 +10,7 @@
       >
         <FSColorIcon
           size="m"
-          variant="fill"
+          variant="full"
           :color="criticityColor"
           v-bind="props"
         >

package/composables/useBreakpoints.ts

@@ -2,10 +2,10 @@ import { computed, ref } from "vue";
 
 let initialized = false;
 
-export const useBreakpoints = () => {
-    const windowHeight = ref(window.innerHeight);
-    const windowWidth = ref(window.innerWidth);
+const windowHeight = ref(window.innerHeight);
+const windowWidth = ref(window.innerWidth);
 
+export const useBreakpoints = () => {
     const onSizeChange = (): void => {
         windowHeight.value = window.innerHeight;
         windowWidth.value = window.innerWidth;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.36",
+  "version": "0.0.37",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.36",
-    "@dative-gpi/foundation-shared-services": "0.0.36",
+    "@dative-gpi/foundation-shared-domain": "0.0.37",
+    "@dative-gpi/foundation-shared-services": "0.0.37",
     "@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": "6480f8ebb0980b81c6eaf46112647148d808afc3"
+  "gitHead": "60d7b514ce598dccaef07b4696e957ea2165a7a3"
 }

package/styles/components/fs_button.scss

@@ -6,4 +6,9 @@
         color: var(--fs-button-hover-color) !important;
         cursor: pointer !important;
     }
+
+    &.fs-button-disabled,
+    &:has(.fs-button-load) {
+        cursor: default !important;
+    }
 }