@dative-gpi/foundation-shared-components 0.0.12 → 0.0.14

package/components/FSButton.vue

@@ -106,7 +106,7 @@ export default defineComponent({
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     fullWidth: {
       type: Boolean,

package/components/FSCalendarTwin.vue

@@ -14,6 +14,7 @@
       :style="style"
     >
       <FSCol
+        align="top-center"
         :class="leftClasses"
         :style="style"
       >
@@ -54,6 +55,7 @@
         </v-locale-provider>
       </FSCol>
       <FSCol
+        align="top-center"
         :class="rightClasses"
         :style="style"
       >

package/components/FSCheckbox.vue

@@ -47,16 +47,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: "FSCheckbox",
   components: {
     FSIcon,
     FSSpan,
-    FSRow,
-    FSCol
+    FSCol,
+    FSRow
   },
   props: {
     label: {

package/components/FSClock.vue

@@ -5,42 +5,46 @@
   >
     <FSRow
       align="center-center"
+      :wrap="false"
     >
-      <FSTextField
+      <FSText
         v-if="$props.reminder"
-        :readonly="true"
-        :hideHeader="true"
-        :modelValue="epochToLongDateFormat($props.date)"
-      />
-      <v-text-field
-        class="fs-clock-field"
-        variant="outlined"
-        type="number"
-        hide-details
-        :style="style"
-        :readonly="!$props.editable"
-        :modelValue="innerHours.toString().padStart(2, '0')"
-        @update:modelValue="onChangeHours"
-      />
-      :
-      <v-text-field
-        class="fs-clock-field"
-        variant="outlined"
-        type="number"
-        hide-details
-        :style="style"
-        :readonly="!$props.editable"
-        :modelValue="innerMinutes.toString().padStart(2, '0')"
-        @update:modelValue="onChangeMinutes"
-      />
-    </FSRow>
-    <FSCol>
-      <FSSpan
-        font="text-overline"
       >
-        {{ $tr("ui.clock.hours", "Hours") }}
-      </FSSpan>
+        {{ epochToLongDateFormat($props.date) }}
+      </FSText>
+      <v-spacer v-if="$props.reminder" />
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <v-text-field
+          class="fs-clock-field"
+          variant="outlined"
+          type="number"
+          hide-details
+          :style="style"
+          :readonly="!$props.editable"
+          :modelValue="innerHours.toString().padStart(2, '0')"
+          @update:modelValue="onChangeHours"
+        />
+        :
+        <v-text-field
+          class="fs-clock-field"
+          variant="outlined"
+          type="number"
+          hide-details
+          :style="style"
+          :readonly="!$props.editable"
+          :modelValue="innerMinutes.toString().padStart(2, '0')"
+          @update:modelValue="onChangeMinutes"
+        />
+      </FSRow>
+    </FSRow>
+    <FSCol
+      v-if="$props.slider"
+    >
       <FSSlider
+        :label="$tr('ui.clock.hours', 'Hours')"
         :readonly="!$props.editable"
         :color="$props.color"
         :step="1"
@@ -49,13 +53,11 @@
         v-model="innerHours"
       />
     </FSCol>
-    <FSCol>
-      <FSSpan
-        font="text-overline"
-      >
-        {{ $tr("ui.clock.minutes", "Minutes") }}
-      </FSSpan>
+    <FSCol
+      v-if="$props.slider"
+    >
       <FSSlider
+        :label="$tr('ui.clock.minutes', 'Minutes')"
         :readonly="!$props.editable"
         :color="$props.color"
         :step="1"
@@ -74,16 +76,16 @@ import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/m
 import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSTextField from "./FSTextField.vue";
 import FSSlider from "./FSSlider.vue";
+import FSText from "./FSText.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSClock",
   components: {
-    FSTextField,
     FSSlider,
+    FSText,
     FSCol,
     FSRow
   },
@@ -112,6 +114,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    slider: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   emits: ["update:modelValue"],

package/components/FSCol.vue

@@ -107,8 +107,8 @@ export default defineComponent({
     });
 
     return {
-      style,
-      classes
+      classes,
+      style
     };
   }
 });

package/components/FSDivider.vue

@@ -1,40 +1,79 @@
 <template>
   <div
+    v-if="isEmpty"
     class="fs-divider"
     :style="style"
   />
+  <FSRow
+    v-else
+    align="center-center"
+    gap="24px"
+  >
+    <FSCol
+      class="fs-divider-around"
+      :style="style"
+    />
+    <FSText
+      variant="light"
+      font="text-h4"
+    >
+      <slot>
+        {{ $props.label }}
+      </slot>
+    </FSText>
+    <FSCol
+      class="fs-divider-around"
+      :style="style"
+    />
+  </FSRow>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from "vue";
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useSlots } 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";
 
+import FSText from "./FSText.vue";
+
 export default defineComponent({
   name: "FSDivider",
+  components: {
+    FSText
+  },
   props: {
     width: {
       type: [String, Number],
       required: false,
       default: "100%"
+    },
+    label: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   setup(props) {
     const { getColors } = useColors();
+    const { slots } = useSlots();
 
     const lights = getColors(ColorEnum.Light);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-        return {
-            "--fs-divider-width": sizeToVar(props.width),
-            "--fs-divider-color": lights.dark
-        }
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-divider-width": sizeToVar(props.width),
+        "--fs-divider-color": lights.dark
+      }
+    });
+
+    const isEmpty = computed(() => {
+      return !slots.default && !props.label;
     });
 
     return {
-      style
+      style,
+      isEmpty
     }
   }
 });

package/components/FSForm.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-form
+    ref="formRef"
+    :validateOn="validateOn"
+    @submit="submitted = true"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+    <slot />
+  </v-form>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, provide, ref } from "vue";
+
+export default defineComponent({
+  name: "FSForm",
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    variant: {
+      type: String as PropType<"standard" | "lazy" | "submit">,
+      required: false,
+      default: "standard"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const formRef = ref<HTMLFormElement | null>(null);
+    const submitted = ref(false);
+
+    const validateOn = computed((): "submit" | "blur" | "input"  => {
+      switch (props.variant) {
+        case "standard": return "input";
+        case "lazy":     return "blur";
+        case "submit":   return "submit";
+      }
+    });
+
+    provide("validateOn", validateOn.value);
+    provide("submitted", submitted.value);
+
+    return {
+      formRef,
+      validateOn,
+      submitted
+    };
+  }
+});
+</script>

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/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/FSPagination.vue

@@ -1,7 +1,10 @@
 <template>
   <FSRow
+    class="fs-pagination"
     align="center-center"
-    gap="4px"
+    :width="$props.width"
+    :gap="$props.gap"
+    :style="style"
   >
     <div
       v-for="(_, index) in $props.pages"
@@ -17,6 +20,7 @@ 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";
 
@@ -26,16 +30,26 @@ export default defineComponent({
     FSRow
   },
   props: {
-    modelValue: {
-      type: Number,
+    width: {
+      type: [String, Number],
       required: false,
-      default: 0
+      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,
@@ -53,20 +67,22 @@ export default defineComponent({
       switch (props.color) {
         case ColorEnum.Light:
         case ColorEnum.Dark: return {
-          "--fs-pagination-background-color": lights.dark,
+          "--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-background-color": colors.value.light,
+          "--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"];
-      if (page === props.modelValue) {
-        innerClasses.push("fs-pagination-active");
+      const innerClasses = ["fs-pagination-page"];
+      if (page <= props.modelValue) {
+        innerClasses.push("fs-pagination-active-page");
       }
       return innerClasses;
     };

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: {