@dative-gpi/foundation-shared-components 0.0.11 → 0.0.13

package/components/FSImage.vue

@@ -2,6 +2,7 @@
   <v-img
     class="fs-image"
     :src="source"
+    :style="style"
     :cover="$props.cover"
     :width="computedWidth"
     :height="computedHeight"
@@ -9,23 +10,27 @@
   >
     <template #placeholder>
       <v-skeleton-loader
+        class="fs-load-image"
         type="image"
+        :style="style"
       />
     </template>
   </v-img>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted } from "vue";
+import { computed, defineComponent, onMounted, watch } from "vue";
 
-import { useImageRaw, useImageBlurHash } from "@dative-gpi/foundation-shared-services";
+import { useImageRaw, useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
   name: "FSImage",
   props: {
     imageId: {
-      type: String,
-      required: true
+      type: [String, null, undefined],
+      required: false,
+      default: null
     },
     cover: {
       type: Boolean,
@@ -33,12 +38,12 @@ export default defineComponent({
       default: true
     },
     width: {
-      type: Number,
+      type: [String, Number],
       required: false,
       default: null
     },
     height: {
-      type: Number,
+      type: [String, Number],
       required: false,
       default: null
     },
@@ -46,17 +51,31 @@ export default defineComponent({
       type: String,
       required: false,
       default: null
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
     }
   },
   setup(props) {
-    const { fetching: fetchingRaw, fetch: fetchRaw, fetched: image } = useImageRaw();
-    const { fetching: fetchingBlurHash, fetch: fetchBlurHash, fetched: blurHash } = useImageBlurHash();
+    const { getting: fetchingRaw, get: fetchRaw, entity: image } = useImageRaw();
+    const { getting: fetchingBlurHash, get: fetchBlurHash, entity: blurHash } = useImageBlurHash();
 
-    const computedWidth = computed((): number => {
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-image-border-radius": sizeToVar(props.borderRadius)
+      }
+    });
+
+    const computedWidth = computed((): number | string | undefined => {
       if (props.width) {
         return props.width;
       }
       if (props.height) {
+        if (typeof(props.height) === "string") {
+          return undefined;
+        }
         if (props.aspectRatio) {
           const split = props.aspectRatio.split('/');
           if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
@@ -65,14 +84,17 @@ export default defineComponent({
         }
         return props.height;
       }
-      return 0;
+      return undefined;
     });
 
-    const computedHeight = computed((): number => {
+    const computedHeight = computed((): number | string | undefined => {
       if (props.height) {
         return props.height;
       }
       if (props.width) {
+        if (typeof(props.width) === "string") {
+          return undefined;
+        }
         if (props.aspectRatio) {
           const split = props.aspectRatio.split('/');
           if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
@@ -81,7 +103,7 @@ export default defineComponent({
         }
         return props.width;
       }
-      return 0;
+      return undefined;
     });
 
     const source = computed((): string | null => {
@@ -100,32 +122,18 @@ export default defineComponent({
       return null;
     });
 
-    // const pixels = () => {
-    //   if (this.value && this.isValid)
-    //     return decode(this.value, this.width, this.height, this.punch);
-    //   return [];
-    // }
-
-    // const isValid = () => {
-    //   return this.value && isBlurhashValid(this.value).result;
-    // }
-
-    // const reset = () => {
-    //   const ctx = (this.$el as HTMLCanvasElement).getContext("2d");
-    //   this.$nextTick(() => {
-    //     if (this.pixels.length) {
-    //       const imageData = ctx!.createImageData(this.width, this.height);
-    //       imageData.data.set(this.pixels);
-    //       ctx!.putImageData(imageData, 0, 0);
-    //     }
-    //   });
-    // }
-
     onMounted(() => {
       fetch();
     });
 
+    watch(() => props.imageId, () => {
+      fetch();
+    });
+
     const fetch = async () => {
+      if (!props.imageId) {
+        return;
+      }
       await fetchRaw(props.imageId);
       if (!image.value) {
         await fetchBlurHash(props.imageId);
@@ -133,6 +141,7 @@ export default defineComponent({
     }
 
     return {
+      style,
       source,
       computedWidth,
       computedHeight

package/components/FSLabel.vue

@@ -0,0 +1,105 @@
+<template>
+  <span
+    v-if="$props.label"
+    :class="classes"
+    :style="style"
+    v-bind="$attrs"
+  >
+    {{ $props.label }}
+  </span>
+  <v-skeleton-loader
+    v-else
+    type="text"
+    :class="loadClasses"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+export default defineComponent({
+  name: "FSLabel",
+  props: {
+    label: {
+      type: [String, null, undefined],
+      required: false,
+      default: null
+    },
+    font: {
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      required: false,
+      default: "text-body"
+    },
+    lineClamp: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    ellipsis: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    variant: {
+      type: String as PropType<"base" | "light" | "dark">,
+      required: false,
+      default: "dark"
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    const colors = computed(() => getColors(props.color));
+
+    const classes = computed((): string[] => {
+      const classNames = ["fs-label", props.font];
+      if (!slots.default) {
+        classNames.push("fs-span-pre-wrap");
+      }
+      if (props.lineClamp > 1) {
+        classNames.push("fs-span-line-clamp");
+      }
+      else if (props.ellipsis) {
+        classNames.push("fs-span-ellipsis");
+      }
+      return classNames;
+    });
+
+    const loadClasses = computed((): string[] => {
+      return ["fs-load-label", props.font];
+    });
+
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      switch (props.variant) {
+        case "base": return {
+          "--fs-span-line-clamp": props.lineClamp.toString(),
+          "--fs-label-color"     : colors.value.base
+        };
+        case "light": return {
+          "--fs-span-line-clamp": props.lineClamp.toString(),
+          "--fs-label-color"     : colors.value.light
+        };
+        case "dark": return {
+          "--fs-span-line-clamp": props.lineClamp.toString(),
+          "--fs-label-color"     : colors.value.dark
+        };
+      }
+    });
+
+    return {
+      classes,
+      loadClasses,
+      style
+    };
+  }
+});
+</script>

package/components/FSLink.vue

@@ -0,0 +1,95 @@
+<template>
+  <a
+    :href="$props.to"
+    :class="classes"
+    :style="style"
+    v-bind="$attrs"
+  >
+    <slot />
+  </a>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+export default defineComponent({
+  name: "FSLink",
+  props: {
+    to: {
+        type: String,
+        required: false,
+        default: "_blank"
+    },
+    font: {
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      required: false,
+      default: "text-body"
+    },
+    lineClamp: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    ellipsis: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    variant: {
+      type: String as PropType<"base" | "light" | "dark">,
+      required: false,
+      default: "dark"
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    const colors = computed(() => getColors(props.color));
+
+    const classes = computed((): string[] => {
+      const classNames = ["fs-link", props.font];
+      if (!slots.default) {
+        classNames.push("fs-span-pre-wrap");
+      }
+      if (props.lineClamp > 1) {
+        classNames.push("fs-span-line-clamp");
+      }
+      else if (props.ellipsis) {
+        classNames.push("fs-span-ellipsis");
+      }
+      return classNames;
+    });
+
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      switch (props.variant) {
+        case "base": return {
+          "--fs-span-line-clamp": props.lineClamp.toString(),
+          "--fs-link-color"     : colors.value.base
+        };
+        case "light": return {
+          "--fs-span-line-clamp": props.lineClamp.toString(),
+          "--fs-link-color"     : colors.value.light
+        };
+        case "dark": return {
+          "--fs-span-line-clamp": props.lineClamp.toString(),
+          "--fs-link-color"     : colors.value.dark
+        };
+      }
+    });
+
+    return {
+      classes,
+      style
+    };
+  }
+});
+</script>

package/components/FSPagination.vue

@@ -0,0 +1,96 @@
+<template>
+  <FSRow
+    class="fs-pagination"
+    align="center-center"
+    :width="$props.width"
+    :gap="$props.gap"
+    :style="style"
+  >
+    <div
+      v-for="(_, index) in $props.pages"
+      :class="classes(index)"
+      :style="style"
+      :key="index"
+    />
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSPagination",
+  components: {
+    FSRow
+  },
+  props: {
+    width: {
+      type: [String, Number],
+      required: false,
+      default: null
+    },
+    gap: {
+      type: [String, Number],
+      required: false,
+      default: 4
+    },
+    pages: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    modelValue: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      switch (props.color) {
+        case ColorEnum.Light:
+        case ColorEnum.Dark: return {
+          "--fs-pagination-page-width"             : `calc(100% / ${props.pages} - ${sizeToVar(props.gap)}`,
+          "--fs-pagination-background-color"       : lights.dark,
+          "--fs-pagination-active-background-color": darks.base
+        }
+        default: return {
+          "--fs-pagination-page-width"             : `calc(100% / ${props.pages} - ${sizeToVar(props.gap)}`,
+          "--fs-pagination-background-color"       : colors.value.light,
+          "--fs-pagination-active-background-color": colors.value.base
+        }
+      }
+    });
+
+    const classes = (page: number): string[] => {
+      const innerClasses = ["fs-pagination-page"];
+      if (page <= props.modelValue) {
+        innerClasses.push("fs-pagination-active-page");
+      }
+      return innerClasses;
+    };
+
+    return {
+      style,
+      classes
+    };
+  }
+});
+</script>

package/components/FSRadio.vue

@@ -42,16 +42,16 @@ import { useColors } from "@dative-gpi/foundation-shared-components/composables"
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
-import FSRow from "./FSRow.vue";
 import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSRadio",
   components: {
     FSIcon,
     FSSpan,
-    FSRow,
-    FSCol
+    FSCol,
+    FSRow
   },
   props: {
     label: {
@@ -86,9 +86,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const colors = computed(() => useColors().getColors(props.color));
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {

package/components/FSRemoveDialog.vue

@@ -55,7 +55,7 @@
 <script lang="ts">
 import { computed, defineComponent } from "vue";
 
-import { useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 

package/components/FSSlideGroup.vue

@@ -36,8 +36,9 @@ export default defineComponent({
   },
   setup(props) {
     const { getChildren } = useSlots();
+    const { getColors } = useColors();
 
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       return {

package/components/FSSlider.vue

@@ -101,9 +101,11 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const colors = computed(() => useColors().getColors(props.color));
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {

package/components/FSSubmitDialog.vue

@@ -54,8 +54,8 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useTranslationsProvider } from "@dative-gpi/foundation-shared-services";
 
 import FSDialog from "./FSDialog.vue";
 import FSRow from "./FSRow.vue";
@@ -143,7 +143,7 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "click:rightButton"],
   setup(props) {
     const { $tr } = useTranslationsProvider();
 

package/components/FSSwitch.vue

@@ -48,15 +48,15 @@ import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/m
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSpan from "./FSSpan.vue";
-import FSRow from "./FSRow.vue";
 import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSSwitch",
   components: {
     FSSpan,
-    FSRow,
-    FSCol
+    FSCol,
+    FSRow
   },
   props: {
     label: {
@@ -87,10 +87,12 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const colors = computed(() => useColors().getColors(props.color));
-    const backgrounds = useColors().getColors(ColorEnum.Background);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {

package/components/FSTabs.vue

@@ -40,11 +40,12 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { getColors, getContrasts } = useColors();
     const { getChildren } = useSlots();
 
-    const textColors = computed(() => useColors().getContrasts(props.color));
-    const colors = computed(() => useColors().getColors(props.color));
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const textColors = computed(() => getContrasts(props.color));
+    const colors = computed(() => getColors(props.color));
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
       "--fs-group-color"                 : darks.base,

package/components/FSTag.vue

@@ -73,8 +73,10 @@ export default defineComponent({
   },
   emits: ["remove"],
   setup(props) {
-    const textColors = computed(() => useColors().getContrasts(props.color));
-    const colors = computed(() => useColors().getColors(props.color));
+    const { getColors, getContrasts } = useColors();
+
+    const textColors = computed(() => getContrasts(props.color));
+    const colors = computed(() => getColors(props.color));
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       switch (props.variant) {

package/components/FSText.vue

@@ -18,7 +18,7 @@ export default defineComponent({
   name: "FSText",
   props: {
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
       required: false,
       default: "text-body"
     },
@@ -44,9 +44,10 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { getColors } = useColors();
     const { slots } = useSlots();
 
-    const colors = computed(() => useColors().getColors(props.color));
+    const colors = computed(() => getColors(props.color));
 
     const classes = computed((): string[] => {
       const classNames = ["fs-text", props.font];

package/components/FSWrapGroup.vue

@@ -35,8 +35,9 @@ export default defineComponent({
   },
   setup(props) {
     const { getChildren } = useSlots();
+    const { getColors } = useColors();
 
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       return {

package/components/deviceOrganisations/FSConnectivity.vue

@@ -57,9 +57,10 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useTimeZone, useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSColorIcon from "../FSColorIcon.vue";
 import FSCard from "../FSCard.vue";

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -62,8 +62,9 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useTimeZone, useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";