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

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

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

@@ -5,36 +5,44 @@
   >
     <FSRow
       align="center-center"
+      padding="0 16px"
     >
-      <FSTextField
+      <FSSpan
         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"
-      />
+      >
+        {{ epochToLongDateFormat($props.date) }}
+      </FSSpan>
+      <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>
+    <FSCol
+      v-if="$props.slider"
+    >
       <FSSpan
         font="text-overline"
       >
@@ -49,7 +57,9 @@
         v-model="innerHours"
       />
     </FSCol>
-    <FSCol>
+    <FSCol
+      v-if="$props.slider"
+    >
       <FSSpan
         font="text-overline"
       >
@@ -74,16 +84,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 FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSClock",
   components: {
-    FSTextField,
     FSSlider,
+    FSSpan,
     FSCol,
     FSRow
   },
@@ -112,16 +122,22 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    slider: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   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/FSDivider.vue

@@ -1,38 +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 lights = useColors().getColors(ColorEnum.Light);
+    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/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/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>