@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/fields/FSAutocompleteTag.vue

@@ -0,0 +1,100 @@
+<template>
+  <FSAutocompleteField
+    :placeholder="innerPlaceholder"
+    :items="innerItems"
+    :showSearch="true"
+    :multiple="true"
+    :modelValue="modelValue?.map(m => m.id)"
+    @update:modelValue="onUpdateModelValue"
+    @add:item="onAddItem"
+    @keydown="onKeydown"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSAutocompleteField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
+
+import { useTranslations as useTranslationsProvider, uuidv4 } from "@dative-gpi/bones-ui";
+
+import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props:{
+    placeholder: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    items: {
+      type: Array as PropType<{id: string, label: string, isCustom: boolean}[]>,
+      required: false,
+      default: () => []
+    },
+    modelValue: {
+      type: Array as PropType<{id: string, label: string, isCustom: boolean}[] | null>,
+      required: false,
+      default: () => []
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, {emit}) {
+    const { $tr } = useTranslationsProvider();
+
+    const tagValues = ref<{id : string, label : string, isCustom : boolean}[]>([]);
+
+    const innerItems = computed(() => props.items.concat(tagValues.value));
+
+    const innerPlaceholder = computed((): string | null => {
+      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);
+    });
+
+    const onUpdateModelValue = (value: string[] | null): void => {
+      emit("update:modelValue", value?.map((v) => innerItems.value.find((i) => i.id === v)));
+    };
+
+    const onAddItem = (value: string): void => {
+      emit("update:modelValue", [
+        ...props.modelValue ?? [],
+        { id: uuidv4(), label: value, isCustom: true }
+      ]);
+    };
+
+    const onKeydown = (event: KeyboardEvent): void => {
+      if (event.key === "Backspace") {
+        emit("update:modelValue", [...props.modelValue ?? []]);
+      }
+    };
+
+    watch(() => props.modelValue, (newValue) => {
+      if (newValue) {
+        tagValues.value = props.modelValue?.filter(m=>m.isCustom) ?? [];
+      }
+    }, {immediate: true});
+
+    return {
+      innerPlaceholder,
+      innerItems,
+      onUpdateModelValue,
+      onAddItem,
+      onKeydown
+    };
+  }
+});
+</script>

package/components/fields/FSBaseField.vue

@@ -1,5 +1,7 @@
 <template>
-  <FSCol>
+  <FSCol
+    :style="style"
+  >
     <slot
       v-if="!$props.hideHeader"
       name="label"
@@ -10,7 +12,6 @@
         <FSSpan
           class="fs-base-field-label"
           font="text-overline"
-          :style="style"
         >
           {{ $props.label }}
         </FSSpan>
@@ -27,14 +28,18 @@
         <v-spacer
           style="min-width: 40px;"
         />
-        <FSSpan
-          v-if="$props.messages.length > 0"
-          class="fs-base-field-messages"
-          font="text-overline"
-          :style="style"
+        <template
+          v-if="$props.messages"
         >
-          {{ $props.messages.join(", ") }}
-        </FSSpan>
+          <FSSpan
+            v-if="$props.messages.length > 0"
+            class="fs-base-field-messages"
+            font="text-overline"
+            :style="style"
+          >
+            {{ $props.messages.join(", ") }}
+          </FSSpan>
+        </template>
       </FSRow>
     </slot>
     <slot />
@@ -44,8 +49,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-base-field-description"
-        font="text-underline"
-        :style="style"
+        font="text-overline"
       >
         {{ $props.description }}
       </FSSpan>
@@ -54,8 +58,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -101,6 +104,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    minWidth: {
+      type: String,
+      required: false,
+      default: "120px"
     }
   },
   setup(props) {
@@ -114,15 +122,17 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    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
       };
     });
 

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"
-        :hideHeader="$props.hideHeader"
-        :required="$props.required"
-        :editable="$props.editable"
-        :modelValue="innerColor"
-        :description="$props.description"
-        :label="$props.label"
-        :style="style"
-        :width="$props.width"
-        v-bind="$attrs"
-      >
-        <FSCard
-          width="100%"
-          padding="8px"
-          v-bind="props"
-          :class="{ 'fs-color-field-disabled': !$props.editable }"
-        >
-          <FSRow
-            align="center-center"
-          >
-            <FSIcon
-              :color="innerColor"
-              size="20px"
-              icon="mdi-circle-half"
-            />
-            <FSText
-              font="text-overline"
-            >
-              {{ innerColor }}
-            </FSText>
-          </FSRow>
-        </FSCard>
-      </FSBaseField>
-    </template>
     <FSCard
       :elevation="true"
       :border="false"
@@ -53,23 +53,23 @@
           v-if="!$props.onlyBaseColors"
           class="fs-color-field-picker"
           mode="hexa"
-          :elevation="0"
           :modes="allowOpacity ? ['hexa', 'rgba'] : ['hex', 'rgb']"
+          :elevation="0"
           :modelValue="fullColor"
           @update:modelValue="onSubmit"
         />
         <v-color-picker
           v-else
           class="fs-color-field-picker"
-          :elevation="0"
-          :modelValue="fullColor"
-          @update:modelValue="onSubmit"
           swatches-max-height="400px"
           show-swatches
-          hide-inputs
-          hide-canvas
           hide-sliders
+          hide-canvas
+          hide-inputs
           :swatches="getBasePaletteColors()"
+          :elevation="0"
+          :modelValue="fullColor"
+          @update:modelValue="onSubmit"
         />
       </FSCol>
     </FSCard>
@@ -77,7 +77,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { getPercentageFromHex, getHexFromPercentage } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
@@ -112,7 +112,7 @@ export default defineComponent({
       default: null
     },
     modelValue: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: "#000000"
     },
@@ -156,6 +156,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const { getColors, getBasePaletteColors } = useColors();
     const { slots } = useSlots();
+    const activatorId = `activator-${Math.random().toString(36).substring(7)}`;
 
     delete slots.description;
 
@@ -164,11 +165,11 @@ export default defineComponent({
 
     const menu = ref(false);
 
-    const innerColor = ref(getColors(props.modelValue).base);
-    const innerOpacity = ref(getHexFromPercentage(props.opacityValue));
-    const fullColor = ref(innerColor.value + innerOpacity.value);
+    const innerColor = ref("#000000");
+    const innerOpacity = ref("00");
+    const fullColor = ref("#00000000");
 
-    const style = computed((): { [key: string]: string | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-color-field-cursor"             : "default",
@@ -185,7 +186,6 @@ export default defineComponent({
       };
     });
 
-
     const onSubmit = (value: string) => {
       innerColor.value = value.substring(0, 7);
       innerOpacity.value = value.length === 9 ? value.substring(7, 9) : "FF";
@@ -195,19 +195,27 @@ export default defineComponent({
     };
 
     const reset = (): void => {
-      innerColor.value = getColors(props.modelValue)['base'];
-      innerOpacity.value = getHexFromPercentage(props.opacityValue);
-      fullColor.value = innerColor.value + innerOpacity.value;
+      if (props.modelValue) {
+        innerColor.value = getColors(props.modelValue)['base'];
+        innerOpacity.value = getHexFromPercentage(props.opacityValue);
+        fullColor.value = innerColor.value + innerOpacity.value;
+      }
+      else {
+        innerColor.value = "#000000";
+        innerOpacity.value = "00";
+        fullColor.value = "#00000000";
+      }
     };
 
     watch(() => props.modelValue, () => {
       reset();
-    });
+    }, { immediate: true });
 
     return {
       getPercentageFromHex,
       getBasePaletteColors,
       innerOpacity,
+      activatorId,
       innerColor,
       fullColor,
       ColorEnum,

package/components/fields/FSCommentField.vue

@@ -0,0 +1,93 @@
+<template>
+  <FSCol>
+    <FSRow
+      align="top-left"
+    >
+      <FSImage
+        :imageId="userImageId"
+        :width="32"
+        :height="32"
+        rounded="circle"
+      />
+      <FSTextArea
+        :rows="5"
+        :hideHeader="true"
+        :placeholder="$tr('ui.common.write-comment', 'Write a comment...')"
+        v-model="innertext"
+      />
+    </FSRow>
+    <FSRow>
+      <v-spacer></v-spacer>
+      <FSButtonCancel
+        v-if="showCancelButton"
+        @click="$emit('cancel')"
+      />
+      <FSButton
+        :color="ColorEnum.Primary"
+        :loading="creating"
+        prependIcon="mdi-send-outline"
+        :label="buttonLabel ?? $tr('ui.common.publish','Publish')"
+        @click="() => $emit('submit', innertext)"
+      />
+    </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) {
+
+    const innertext = ref<string | undefined>(props.text);
+    
+    return {
+      innertext,
+      ColorEnum
+    };
+  },
+})
+</script>

package/components/fields/FSDateField.vue

@@ -152,7 +152,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 +215,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

@@ -62,7 +62,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 +123,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 { getUserOffsetMillis, epochToLongTimeFormat } = 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 + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+        innerTime.value = Math.floor((props.modelValue + getUserOffset()) % (24 * 60 * 60 * 1000));
         innerDate.value = props.modelValue - innerTime.value;
       }
       else {

package/components/fields/FSDateTimeRangeField.vue

@@ -79,7 +79,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 +115,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 +145,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { getUserOffsetMillis, epochToShortTimeFormat } = useAppTimeZone();
+    const { getUserOffset } = useAppTimeZone();
+    const { epochToShortTimeFormat } = useDateFormat();
     const { validateOn, getMessages } = useRules();
 
     const dialog = ref(false);
@@ -206,13 +207,13 @@ export default defineComponent({
             break;
           }
           case 1: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset()) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
             break;
           }
           default: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
-            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset()) % (24 * 60 * 60 * 1000));
+            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffset()) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
             break;
           }