@dative-gpi/foundation-shared-components 0.0.35 → 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/FSText.vue

@@ -47,7 +47,7 @@ export default defineComponent({
     variant: {
       type: String as PropType<"base" | "light" | "dark">,
       required: false,
-      default: "dark"
+      default: "base"
     }
   },
   setup(props) {

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/components/lists/FSDataTableUI.vue

@@ -662,20 +662,23 @@ export default defineComponent({
       const activeFilters: { key: string, filter: FSDataTableFilter }[] = Object.keys(filters.value).reduce((acc, key) => {
         return acc.concat(filters.value[key].filter((filter) => filter.hidden).map((filter) => ({ key, filter })));
       }, []);
-      return props.items.filter((item) => {
-        if (props.selectedOnly && !innerValue.value.includes(item[props.itemValue])) {
-          return false;
-        }
-        if (innerSearch.value) {
-          if (!JSON.stringify(item).toLowerCase().includes(innerSearch.value.toString().toLowerCase())) {
+      if (props.items && props.items.length) {
+        return props.items.filter((item) => {
+          if (props.selectedOnly && !innerValue.value.includes(item[props.itemValue])) {
             return false;
           }
-        }
-        if (activeFilters.some(af => af.filter.filter(af.filter.value, item[af.key], item))) {
-          return false;
-        }
-        return true;
-      });
+          if (innerSearch.value) {
+            if (!JSON.stringify(item).toLowerCase().includes(innerSearch.value.toString().toLowerCase())) {
+              return false;
+            }
+          }
+          if (activeFilters.some(af => af.filter.filter(af.filter.value, item[af.key], item))) {
+            return false;
+          }
+          return true;
+        });
+      }
+      return [];
     });
 
     const headersSlots = computed((): FSDataTableColumn[] => {
@@ -811,19 +814,21 @@ export default defineComponent({
           }));
         }
         else {
-          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 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;
-            })
-          }));
+          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 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;
+              })
+            }));
+          }
         }
         filterDictionary[key] = value.sort((v1, v2) => {
           return v1.text.localeCompare(v2.text, undefined, { numeric: true });

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/composables/useColors.ts

@@ -50,7 +50,7 @@ export const useColors = () => {
     const getContrasts = (color: ColorBase): ColorVariations => {
         const themed = (Object as any).values(ColorEnum).includes(color);
 
-        const base = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
+        let base = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
 
         if (isGrayScale(base)) {
             switch (color) {
@@ -60,15 +60,15 @@ export const useColors = () => {
                     return getColors(ColorEnum.Light);
                 default:
                     if (base.value() > 50) {
-                        base.value(Math.max(base.value() - 65, 0));
+                        base = base.value(Math.max(base.value() - 65, 0));
                     }
                     else {
-                        base.value(Math.min(base.value() + 65, 100));
+                        base = base.value(Math.min(base.value() + 65, 100));
                     }
                     break;
             }
         }
-        return getColors(color);
+        return getColors(base.hex());
     };
 
     const getGradients = (colors: ColorBase | ColorBase[]): ColorVariations => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.35",
-    "@dative-gpi/foundation-shared-services": "0.0.35",
+    "@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": "91779c855747711392153c2adc6e6b2bbc982e48"
+  "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;
+    }
 }