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

package/aliases/FSButton.ts

@@ -1,10 +1,12 @@
-import { useTranslationsProvider } from "@dative-gpi/foundation-shared-services";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
 
 const { $tr } = useTranslationsProvider();
 
+import { computed } from "vue";
+
 export const FSButtonsAliases = {
     FSButtonSearch: FSButton,
     FSButtonSearchMini: FSButton,
@@ -23,7 +25,7 @@ export const FSButtonsAliases = {
 export const FSButtonsProps = {
     FSButtonSearch: {
         prependIcon: "mdi-magnify",
-        label: $tr("ui.button.search", "Search"),
+        get label() { return $tr("ui.button.search", "Search") },
         variant: "standard",
         color: ColorEnum.Primary
     },
@@ -41,7 +43,7 @@ export const FSButtonsProps = {
     },
     FSButtonRemove: {
         prependIcon: "mdi-delete-outline",
-        label: $tr("ui.button.remove", "Remove"),
+        get label() { return $tr("ui.button.remove", "Remove") },
         variant: "standard",
         color: ColorEnum.Error
     },
@@ -59,7 +61,7 @@ export const FSButtonsProps = {
     },
     FSButtonSave: {
         prependIcon: "mdi-content-save-outline",
-        label: $tr("ui.button.save", "Save"),
+        get label() { return $tr("ui.button.save", "Save") },
         variant: "standard",
         color: ColorEnum.Primary
     },
@@ -77,7 +79,7 @@ export const FSButtonsProps = {
     },
     FSButtonCancel: {
         prependIcon: "mdi-cancel",
-        label: $tr("ui.button.cancel", "Cancel"),
+        get label() { return $tr("ui.button.cancel", "Cancel") },
         variant: "standard",
         color: ColorEnum.Light
     },
@@ -95,7 +97,7 @@ export const FSButtonsProps = {
     },
     FSButtonDocumentation: {
         prependIcon: "mdi-file-document-outline",
-        label: $tr("ui.button.documentation", "Documentation"),
+        get label() { return $tr("ui.button.documentation", "Documentation") },
         variant: "standard",
         color: ColorEnum.Light
     },

package/components/FSAutocompleteField.vue

@@ -142,16 +142,18 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue", "update:search"],
-  setup: (props, { emit }) => {    
+  setup: (props, { emit }) => {
+    const { getColors } = useColors();
     const { slots } = useSlots();
+
     delete slots.label;
     delete slots.description;
 
-    const innerSearch = ref("");
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const innerSearch = ref("");
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {

package/components/FSBreadcrumbs.vue

@@ -38,7 +38,9 @@ export default defineComponent({
     }
   },
   setup() {
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const { getColors } = useColors();
+
+    const darks = getColors(ColorEnum.Dark);
 
     const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
       "--fs-breadcrumbs-color": darks.dark,

package/components/FSButton.vue

@@ -84,7 +84,7 @@ export default defineComponent({
       default: null
     },
     label: {
-      type: String,
+      type: [String, Function],
       required: false,
       default: null
     },
@@ -120,14 +120,16 @@ export default defineComponent({
     }
   },
   setup(props) {
-    props = useDefaults(props, getCurrentInstance().type.name)
-
-    const textColors = computed(() => useColors().getContrasts(props.color));
-    const colors = computed(() => useColors().getColors(props.color));
-    const lights = useColors().getColors(ColorEnum.Light);
+    props = useDefaults(props, getCurrentInstance()?.type?.name ?? "FSButton");
 
+    const { getColors, getContrasts } = useColors();
     const { slots } = useSlots();
 
+    const textColors = computed(() => getContrasts(props.color));
+    const colors = computed(() => getColors(props.color));
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
     const isEmpty = computed(() => {
       return !slots.default && !props.label;
     });
@@ -173,9 +175,10 @@ export default defineComponent({
           "--fs-button-active-color"           : textColors.value.light,
         };
         case "icon": switch (props.color) {
-          case ColorEnum.Dark: return {
-            "--fs-button-color"      : colors.value.light,
-            "--fs-button-hover-color": colors.value.dark,
+          case ColorEnum.Dark:
+          case ColorEnum.Light: return {
+            "--fs-button-color"      : darks.base,
+            "--fs-button-hover-color": darks.dark,
           };
           default: return {
             "--fs-button-color"      : colors.value.base,

package/components/FSCalendar.vue

@@ -105,10 +105,11 @@ export default defineComponent({
   setup(props) {
     const { epochToPicker, pickerToEpoch, todayToEpoch } = useTimeZone();
     const { languageCode } = useLanguageCode();
+    const { getColors } = useColors();
 
-    const colors = computed(() => useColors().getColors(props.color));
-    const backgrounds = useColors().getColors(ColorEnum.Background);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
+    const darks = getColors(ColorEnum.Dark);
     
     const innerMonth = ref(props.modelValue ? epochToPicker(props.modelValue).getMonth() : new Date().getMonth());
     const innerYear = ref(props.modelValue ? epochToPicker(props.modelValue).getFullYear() : new Date().getFullYear());

package/components/FSCalendarTwin.vue

@@ -143,10 +143,11 @@ export default defineComponent({
   setup(props, { emit }) {
     const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useTimeZone();
     const { languageCode } = useLanguageCode();
+    const { getColors } = useColors();
 
-    const colors = computed(() => useColors().getColors(props.color));
-    const backgrounds = useColors().getColors(ColorEnum.Background);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
+    const darks = getColors(ColorEnum.Dark);
     
     const innerLeftMonth = ref(new Date().getMonth());
     const innerLeftYear = ref(new Date().getFullYear());

package/components/FSCarousel.vue

@@ -37,9 +37,11 @@ export default defineComponent({
   },
   setup(props) {
     const { slots, getChildren } = useSlots();
+    const { getColors } = useColors();
+    
     delete slots.default;
 
-    const backgrounds = useColors().getColors(ColorEnum.Background);
+    const backgrounds = getColors(ColorEnum.Background);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       return {

package/components/FSCheckbox.vue

@@ -92,9 +92,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/FSChip.vue

@@ -85,13 +85,15 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const colors = computed(() => useColors().getColors(props.color));
-    const backgrounds = useColors().getColors(ColorEnum.Background);
+    const { getColors, getContrasts } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
 
     const textColors = computed(() => {
       switch (props.variant) {
         case "standard": return colors.value;
-        case "full": return useColors().getContrasts(props.color);
+        case "full": return getContrasts(props.color);
       }
     });
 

package/components/FSClock.vue

@@ -117,11 +117,12 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { epochToLongDateFormat } = useTimeZone();
+    const { getColors } = useColors();
 
-    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 colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const innerHours = ref(props.modelValue ? Math.floor(props.modelValue / (60 * 60 * 1000)) : 0);
     const innerMinutes = ref(props.modelValue ? Math.floor((props.modelValue % (60 * 60 * 1000)) / (60 * 1000)) : 0);

package/components/FSColor.vue

@@ -58,7 +58,9 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const colors = computed(() => useColors().getColors(props.color));
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
 
     const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
       "--fs-color-background-color": colors.value.light,

package/components/FSColorIcon.vue

@@ -35,7 +35,9 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const colors = computed(() => useColors().getColors(props.color));
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       switch (props.variant) {

package/components/FSContainer.vue

@@ -33,8 +33,10 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const backgrounds = useColors().getColors(ColorEnum.Background);
-    const lights = useColors().getColors(ColorEnum.Light);
+    const { getColors } = useColors();
+
+    const backgrounds = getColors(ColorEnum.Background);
+    const lights = getColors(ColorEnum.Light);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       return {

package/components/FSDateField.vue

@@ -155,10 +155,11 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { epochToLongDateFormat } = useTimeZone();
+    const { getColors } = useColors();
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const menu = ref(false);
     const innerDate = ref(props.modelValue);

package/components/FSDateRangeField.vue

@@ -144,10 +144,11 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { epochToShortDateFormat } = useTimeZone();
+    const { getColors } = useColors();
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const dialog = ref(false);
     const innerDateRange = ref(props.modelValue);

package/components/FSDateTimeField.vue

@@ -183,10 +183,11 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getUserOffsetMillis, epochToLongTimeFormat } = useTimeZone();
+    const { getColors } = useColors();
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const menu = ref(false);
     const tabs = ref(0);

package/components/FSDateTimeRangeField.vue

@@ -162,10 +162,11 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getUserOffsetMillis, epochToShortTimeFormat } = useTimeZone();
+    const { getColors } = useColors();
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const dialog = ref(false);
 

package/components/FSDivider.vue

@@ -22,7 +22,9 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const lights = useColors().getColors(ColorEnum.Light);
+    const { getColors } = useColors();
+
+    const lights = getColors(ColorEnum.Light);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
         return {

package/components/FSFadeOut.vue

@@ -31,7 +31,9 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const backgrounds = useColors().getColors(ColorEnum.Background);
+    const { getColors } = useColors();
+
+    const backgrounds = getColors(ColorEnum.Background);
 
     const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
       "--fs-fade-out-mask-color"        : backgrounds.base,

package/components/FSFileButton.vue

@@ -130,11 +130,12 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { getColors, getContrasts } = useColors();
     const { slots } = useSlots();
 
-    const textColors = computed(() => useColors().getContrasts(props.color));
-    const colors = computed(() => useColors().getColors(props.color));
-    const lights = useColors().getColors(ColorEnum.Light);
+    const textColors = computed(() => getContrasts(props.color));
+    const colors = computed(() => getColors(props.color));
+    const lights = getColors(ColorEnum.Light);
     
     const input = ref(null);
 

package/components/FSIconField.vue

@@ -151,9 +151,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const { getColors } = useColors();
+
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const innerValue = ref(null);
 

package/components/FSImage.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted } from "vue";
 
-import { useImageRaw, useImageBlurHash } from "@dative-gpi/foundation-shared-services";
+import { useImageRaw, useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
 
 export default defineComponent({
   name: "FSImage",

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,80 @@
+<template>
+  <FSRow
+    align="center-center"
+    gap="4px"
+  >
+    <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 FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSPagination",
+  components: {
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    pages: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    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-background-color": lights.dark,
+          "--fs-pagination-active-background-color": darks.base
+        }
+        default: return {
+          "--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");
+      }
+      return innerClasses;
+    };
+
+    return {
+      style,
+      classes
+    };
+  }
+});
+</script>

package/components/FSPasswordField.vue

@@ -76,8 +76,10 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const { getColors } = useColors();
+
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const stars = ref(true);
 

package/components/FSRadio.vue

@@ -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/FSRichTextField.vue

@@ -141,10 +141,10 @@
       :contenteditable="!readonly && $props.editable"
     />
     <FSTextField
-      v-if="isLink && $props.editable"
-      v-model="linkUrl"
+      v-if="isLink && !readonly && $props.editable"
       :hideHeader="true"
       @keypress.enter.stop="toggleLink"
+      v-model="linkUrl"
     />
     <slot name="description">
       <FSSpan
@@ -229,10 +229,11 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { isMobileSized } = useBreakpoints();
+    const { getColors } = useColors();
 
-    const linkColors = computed(()=> useColors().getColors(props.linkColor));
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const linkColors = computed(()=> getColors(props.linkColor));
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const canUndo = ref(false);
     const isLink = ref(false);
@@ -287,7 +288,7 @@ export default defineComponent({
     });
 
     const readonly = computed((): boolean => {
-      return props.variant === "readonly";
+      return ["readonly"].includes(props.variant);
     });
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {