@dative-gpi/foundation-shared-components 1.0.35 → 1.0.37-report-v1

package/components/fields/FSAutocompleteTag.vue

@@ -62,7 +62,7 @@ export default defineComponent({
       if (!props.modelValue || props.modelValue.length === 0) {
         return null;
       }
-      return props.placeholder ?? $tr("ui.autocomplete-tag.items-selected", "{0} item(s) selected", props.modelValue?.length ?? 0);
+      return props.placeholder ?? $tr("autocomplete.tag.selecteds", "{0} item(s) selected", props.modelValue?.length ?? 0);
     });
 
     const onUpdateModelValue = (value: string[] | null): void => {

package/components/fields/FSBaseField.vue

@@ -1,44 +1,49 @@
 <template>
-  <FSCol>
+  <FSCol
+    :style="style"
+  >
     <slot
       v-if="!$props.hideHeader"
       name="label"
     >
       <FSRow
+        gap="40px"
         :wrap="false"
       >
-        <FSSpan
-          class="fs-base-field-label"
-          font="text-overline"
-          :style="style"
+        <FSRow
+          gap="2px"
+          :width="widths.label"
+          :wrap="false"
         >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          class="fs-base-field-label"
-          style="margin-left: -8px;"
-          font="text-overline"
-          :ellipsis="false"
-          :style="style"
-        >
-          *
-        </FSSpan>
-        <v-spacer
-          style="min-width: 40px;"
-        />
-        <template
-          v-if="$props.messages"
+          <FSSpan
+            class="fs-base-field-label"
+            font="text-overline"
+          >
+            {{ $props.label }}
+          </FSSpan>
+          <FSSpan
+            v-if="$props.label && $props.required"
+            class="fs-base-field-label"
+            font="text-overline"
+            :ellipsis="false"
+            :style="style"
+          >
+            *
+          </FSSpan>
+        </FSRow>
+        <FSRow
+          align="center-right"
+          :width="widths.messages"
         >
           <FSSpan
-            v-if="$props.messages.length > 0"
+            v-if="$props.messages && $props.messages.length > 0"
             class="fs-base-field-messages"
             font="text-overline"
             :style="style"
           >
             {{ $props.messages.join(", ") }}
           </FSSpan>
-        </template>
+        </FSRow>
       </FSRow>
     </slot>
     <slot />
@@ -49,7 +54,6 @@
         v-if="$props.description"
         class="fs-base-field-description"
         font="text-overline"
-        :style="style"
       >
         {{ $props.description }}
       </FSSpan>
@@ -104,6 +108,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    minWidth: {
+      type: String,
+      required: false,
+      default: "120px"
     }
   },
   setup(props) {
@@ -120,16 +129,24 @@ export default defineComponent({
     const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
-          "--fs-base-field-color": lights.dark
+          "--fs-base-field-color"    : lights.dark,
+          "--fs-base-field-min-width": props.minWidth
         };
       }
       return {
         "--fs-base-field-color"      : darks.base,
-        "--fs-base-field-error-color": errors.base
+        "--fs-base-field-error-color": errors.base,
+        "--fs-base-field-min-width"  : props.minWidth
       };
     });
 
+    const widths = computed(() => ({
+      label: props.messages && props.messages.length ? "calc(50% - 40px)" : "100%",
+      messages: props.messages && props.messages.length ? "50%" : "0"
+    }));
+
     return {
+      widths,
       style,
       slots
     };

package/components/fields/FSColorField.vue

@@ -1,47 +1,47 @@
 <template>
+
+  <FSBaseField
+    class="fs-color-field"
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :editable="$props.editable"
+    :required="$props.required"
+    :label="$props.label"
+    :width="$props.width"
+    :style="style"
+    :modelValue="innerColor"
+    v-bind="$attrs"
+  >
+    <FSCard
+      :id="activatorId"
+      padding="8px"
+      width="100%"
+      :class="{ 'fs-color-field-disabled': !$props.editable }"
+    >
+      <FSRow
+        align="center-center"
+      >
+        <FSIcon
+          icon="mdi-circle-half"
+          size="20px"
+          :color="innerColor"
+        />
+        <FSText
+          font="text-overline"
+        >
+          {{ innerColor }}
+        </FSText>
+      </FSRow>
+    </FSCard>
+  </FSBaseField>
   <v-menu
+    origin="top left"
+    min-width="300px"
+    :activator="`#${activatorId}`"
     :closeOnContentClick="false"
     :modelValue="menu && $props.editable"
     @update:modelValue="menu = $event"
   >
-    <template
-      #activator="{ props }"
-    >
-      <FSBaseField
-        class="fs-color-field"
-        :description="$props.description"
-        :hideHeader="$props.hideHeader"
-        :editable="$props.editable"
-        :required="$props.required"
-        :label="$props.label"
-        :width="$props.width"
-        :style="style"
-        :modelValue="innerColor"
-        v-bind="$attrs"
-      >
-        <FSCard
-          padding="8px"
-          width="100%"
-          :class="{ 'fs-color-field-disabled': !$props.editable }"
-          v-bind="props"
-        >
-          <FSRow
-            align="center-center"
-          >
-            <FSIcon
-              icon="mdi-circle-half"
-              size="20px"
-              :color="innerColor"
-            />
-            <FSText
-              font="text-overline"
-            >
-              {{ innerColor }}
-            </FSText>
-          </FSRow>
-        </FSCard>
-      </FSBaseField>
-    </template>
     <FSCard
       :elevation="true"
       :border="false"
@@ -152,10 +152,11 @@ export default defineComponent({
       default: "fill"
     }
   },
-  emits: ["update:modelValue", "update:opacity"],
+  emits: ["update", "update:modelValue", "update:opacity"],
   setup(props, { emit }) {
     const { getColors, getBasePaletteColors } = useColors();
     const { slots } = useSlots();
+    const activatorId = `activator-${Math.random().toString(36).substring(7)}`;
 
     delete slots.description;
 
@@ -191,6 +192,7 @@ export default defineComponent({
       fullColor.value = innerColor.value + innerOpacity.value;
       emit("update:modelValue", innerColor.value);
       emit("update:opacity", getPercentageFromHex(innerOpacity.value));
+      emit("update", { modelValue: innerColor.value, opacity: getPercentageFromHex(innerOpacity.value) });
     };
 
     const reset = (): void => {
@@ -214,6 +216,7 @@ export default defineComponent({
       getPercentageFromHex,
       getBasePaletteColors,
       innerOpacity,
+      activatorId,
       innerColor,
       fullColor,
       ColorEnum,

package/components/fields/FSCommentField.vue

@@ -0,0 +1,105 @@
+<template>
+  <FSCol>
+    <FSRow
+      align="top-left"
+    >
+      <FSImage
+        :imageId="userImageId"
+        width="32px"
+        height="32px"
+        rounded="circle"
+        :thumbnail="true"
+      />
+      <FSTextArea
+        :rows="5"
+        :hideHeader="true"
+        :placeholder="$tr('ui.common.write-comment', 'Write a comment...')"
+        v-model="innertext"
+      />
+    </FSRow>
+    <FSRow>
+      <FSRow 
+        align="center-right"
+      >
+        <FSButtonCancel
+          v-if="showCancelButton"
+          @click="$emit('cancel')"
+        />
+        <FSButton
+          prependIcon="mdi-send-outline"
+          :color="ColorEnum.Primary"
+          :loading="creating"
+          :label="buttonLabel ?? $tr('ui.common.publish','Publish')"
+          @click="onSubmit"
+        />
+      </FSRow>
+    </FSRow>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent, ref } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButtonCancel from "../buttons/FSButtonCancel.vue";
+import FSTextArea from "./FSTextArea.vue";
+import FSButton from "../FSButton.vue";
+import FSImage from "../FSImage.vue";
+import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSCommentField",
+  components: {
+    FSButton,
+    FSButtonCancel,
+    FSImage,
+    FSTextArea,
+    FSRow,
+    FSCol,
+  },
+  props: {
+    buttonLabel: {
+      type: String,
+      required: false,
+    },
+    creating: {
+      type: Boolean,
+      required: false,
+    },
+    userImageId: {
+      type: String as PropType<string | null>,
+      required: false,
+    },
+    text: {
+      type: String,
+      required: false,
+    },
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: ["submit","cancel"],
+  setup(props, { emit }) {
+
+    const innertext = ref<string | undefined>(props.text);
+
+    const onSubmit = () => {
+      if (innertext.value) {
+        emit('submit', innertext.value);
+        innertext.value = '';
+      }
+    };
+    
+    return {
+      innertext,
+      ColorEnum,
+      onSubmit,
+    };
+  },
+})
+</script>

package/components/fields/FSDateField.vue

@@ -72,6 +72,7 @@
       v-else
     >
       <v-menu
+        min-width="300px"
         :closeOnContentClick="false"
         :modelValue="menu && $props.editable"
         @update:modelValue="menu = $event"
@@ -152,7 +153,7 @@ import _ from "lodash";
 
 import { useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSDialogMenu from "../FSDialogMenu.vue";
 import FSTextField from "./FSTextField.vue";
@@ -215,7 +216,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongDateFormat } = useAppTimeZone();
+    const { epochToLongDateFormat } = useDateFormat();
     const { validateOn, getMessages} = useRules();
     const { isExtraSmall } = useBreakpoints();
 

package/components/fields/FSDateRangeField.vue

@@ -15,6 +15,7 @@
     :modelValue="toShortDateFormat"
     @click="onClick"
     @update:modelValue="onClear"
+    v-bind="$attrs"
   >
     <template
       #prepend-inner
@@ -62,7 +63,7 @@ import { computed, defineComponent, type PropType, ref, watch } from "vue";
 import _ from "lodash";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSDialogSubmit from "../FSDialogSubmit.vue";
@@ -123,7 +124,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { validateOn, getMessages } = useRules();
-    const { epochToShortDateFormat } = useAppTimeZone();
+    const { epochToShortDateFormat } = useDateFormat();
 
     const dialog = ref(false);
     

package/components/fields/FSDateTimeField.vue

@@ -197,7 +197,7 @@ import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSDialogMenu from "../FSDialogMenu.vue";
 import FSTextField from "./FSTextField.vue";
@@ -264,7 +264,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongTimeFormat, getOffsetUser } = useAppTimeZone();
+    const { getUserOffset } = useAppTimeZone();
+    const { epochToLongTimeFormat } = useDateFormat();
     const { validateOn, getMessages } = useRules();
     const { isExtraSmall } = useBreakpoints();
 
@@ -300,7 +301,7 @@ export default defineComponent({
       if (props.modelValue) {
         // FSClock just gives two numbers without consideration for the time zone
         // We must adjust the time to the user's time zone
-        innerTime.value = Math.floor((props.modelValue + getOffsetUser()) % (24 * 60 * 60 * 1000));
+        innerTime.value = Math.floor((props.modelValue + getUserOffset(props.modelValue)) % (24 * 60 * 60 * 1000));
         innerDate.value = props.modelValue - innerTime.value;
       }
       else {

package/components/fields/FSDateTimeRangeField.vue

@@ -15,6 +15,7 @@
     :modelValue="toShortTimeFormat"
     @click="onClick"
     @update:modelValue="onClear"
+    v-bind="$attrs"
   >
     <template
       #prepend-inner
@@ -79,7 +80,7 @@
 import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSDialogSubmit from "../FSDialogSubmit.vue";
@@ -115,7 +116,7 @@ export default defineComponent({
     modelValue: {
       type: Array as PropType<number[] | null>,
       required: false,
-      default: null
+      default: () => null
     },
     color: {
       type: String as PropType<ColorBase>,
@@ -145,7 +146,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToShortTimeFormat, getOffsetUser } = useAppTimeZone();
+    const { getUserOffset } = useAppTimeZone();
+    const { epochToShortTimeFormat } = useDateFormat();
     const { validateOn, getMessages } = useRules();
 
     const dialog = ref(false);
@@ -206,13 +208,13 @@ export default defineComponent({
             break;
           }
           case 1: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getOffsetUser()) % (24 * 60 * 60 * 1000));
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset(props.modelValue[0])) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
             break;
           }
           default: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getOffsetUser()) % (24 * 60 * 60 * 1000));
-            innerTimeRight.value = Math.floor((props.modelValue[1] + getOffsetUser()) % (24 * 60 * 60 * 1000));
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset(props.modelValue[0])) % (24 * 60 * 60 * 1000));
+            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffset(props.modelValue[1])) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
             break;
           }