@dative-gpi/foundation-shared-components 0.0.10 → 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

@@ -1,10 +1,10 @@
 <template>
   <v-btn
-    v-if="!['icon'].includes($props.variant)"
+    v-if="!['icon'].includes(props.variant)"
     :ripple="false"
     :style="style"
     :class="classes"
-    :disabled="!$props.editable"
+    :disabled="!props.editable"
     v-bind="$attrs"
   >
     <FSRow
@@ -12,33 +12,33 @@
       width="hug"
       :wrap="false"
     >
-      <slot name="prepend" v-bind="{ color: $props.color, colors }">
+      <slot name="prepend" v-bind="{ color: props.color, colors }">
         <FSIcon
-          v-if="$props.prependIcon"
+          v-if="props.prependIcon"
           size="l"
         >
-          {{ $props.prependIcon }}
+          {{ props.prependIcon }}
         </FSIcon>
       </slot>
-      <slot v-bind="{ color: $props.color, colors }">
+      <slot v-bind="{ color: props.color, colors }">
         <FSSpan
-          v-if="$props.label"
+          v-if="props.label"
         >
-          {{ $props.label }}
+          {{ props.label }}
         </FSSpan>
       </slot>
-      <slot name="append" v-bind="{ color: $props.color, colors }">
+      <slot name="append" v-bind="{ color: props.color, colors }">
         <FSIcon
-          v-if="$props.appendIcon"
+          v-if="props.appendIcon"
           size="l"
         >
-          {{ $props.appendIcon }}
+          {{ props.appendIcon }}
         </FSIcon>
       </slot>
     </FSRow>
   </v-btn>
   <FSRow
-    v-else-if="$props.icon"
+    v-else-if="props.icon"
     align="center-center"
     width="hug"
     :style="style"
@@ -48,19 +48,20 @@
     <FSIcon
       size="l"
     >
-      {{ $props.icon }}
+      {{ props.icon }}
     </FSIcon>
     <FSSpan
-      v-if="$props.label"
+      v-if="props.label"
       font="text-overline"
     >
-      {{ $props.label }}
+      {{ props.label }}
     </FSSpan>
   </FSRow>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, getCurrentInstance, PropType } from "vue";
+import { useDefaults } from "vuetify";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -83,7 +84,7 @@ export default defineComponent({
       default: null
     },
     label: {
-      type: String,
+      type: [String, Function],
       required: false,
       default: null
     },
@@ -119,12 +120,16 @@ export default defineComponent({
     }
   },
   setup(props) {
-    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;
     });
@@ -170,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,
@@ -202,6 +208,7 @@ export default defineComponent({
     });
 
     return {
+      props,
       colors,
       style,
       classes

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>