@dative-gpi/foundation-shared-components 1.0.55 → 1.0.57

package/components/FSDialogMultiFormBody.vue

@@ -1,60 +1,69 @@
 <template>
-  <FSWindow
-    width="100%"
-    :modelValue="currentStep - 1"
+  <FSCol
+    gap="24px"
   >
-    <FSForm
-      v-for="(step, index) in $props.steps"
-      :variant="$props.variant"
-      :key="index"
-      @submit="onSubmit"
-      v-model="valid"
+    <FSPagination
+      width="calc(100% - 16px)"
+      :pages="$props.steps"
+      :modelValue="currentStep - 1"
+    />
+    <FSWindow
+      width="100%"
+      :modelValue="currentStep - 1"
     >
-      <FSCol
-        gap="24px"
+      <FSForm
+        v-for="(step, index) in $props.steps"
+        :variant="$props.variant"
+        :key="index"
+        @submit="onSubmit"
+        v-model="valid"
       >
-        <FSFadeOut
-          padding="0 8px 0 0"
-          :maxHeight="maxHeight"
+        <FSCol
+          gap="24px"
         >
-          <slot
-            :name="`step-${step}`"
-          />
-        </FSFadeOut>
-        <FSRow
-          padding="0 16px 0 0"
-        >
-          <slot
-            name="left-footer"
-          />
-          <FSRow
-            class="fs-dialog-actions"
-            align="top-right"
-            :wrap="false"
+          <FSFadeOut
+            padding="0 8px 0 0"
+            :maxHeight="maxHeight"
           >
-            <FSButton
-              :prependIcon="$props.cancelButtonPrependIcon"
-              :appendIcon="$props.cancelButtonAppendIcon"
-              :variant="$props.cancelButtonVariant"
-              :color="$props.cancelButtonColor"
-              :label="previousButtonLabel"
-              @click="onPrevious()"
+            <slot
+              :name="`step-${step}`"
             />
-            <FSButton
-              type="submit"
-              :prependIcon="$props.submitButtonPrependIcon"
-              :appendIcon="$props.submitButtonAppendIcon"
-              :color="$props.submitButtonColor"
-              :variant="nextButtonVariant"
-              :editable="$props.editable"
-              :label="nextButtonLabel"
-              :load="$props.load"
+          </FSFadeOut>
+          <FSRow
+            padding="0 16px 0 0"
+          >
+            <slot
+              name="left-footer"
             />
+            <FSRow
+              class="fs-dialog-actions"
+              align="top-right"
+              :wrap="false"
+            >
+              <FSButton
+                :prependIcon="$props.cancelButtonPrependIcon"
+                :appendIcon="$props.cancelButtonAppendIcon"
+                :variant="$props.cancelButtonVariant"
+                :color="$props.cancelButtonColor"
+                :label="previousButtonLabel"
+                @click="onPrevious()"
+              />
+              <FSButton
+                type="submit"
+                :prependIcon="$props.submitButtonPrependIcon"
+                :appendIcon="$props.submitButtonAppendIcon"
+                :color="$props.submitButtonColor"
+                :variant="nextButtonVariant"
+                :editable="$props.editable"
+                :label="nextButtonLabel"
+                :load="$props.load"
+              />
+            </FSRow>
           </FSRow>
-        </FSRow>
-      </FSCol>
-    </FSForm>
-  </FSWindow>
+        </FSCol>
+      </FSForm>
+    </FSWindow>
+  </FSCol>
 </template>
 
 <script lang="ts">
@@ -64,17 +73,21 @@ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSPagination from "./FSPagination.vue";
 import FSFadeOut from "./FSFadeOut.vue";
 import FSButton from "./FSButton.vue";
 import FSForm from "./FSForm.vue";
+import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSDialogMultiFormBody",
   components: {
+    FSPagination,
     FSFadeOut,
     FSButton,
     FSForm,
+    FSCol,
     FSRow
   },
   props: {

package/components/FSImage.vue

@@ -12,7 +12,7 @@ import { computed, defineComponent, type PropType } from "vue";
 
 import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";
 
-import { useImage } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppAuthToken, useImage } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSImageUI from "./FSImageUI.vue";
 
@@ -30,9 +30,10 @@ export default defineComponent({
   },
   setup(props) {
     const { get: getImage, entity: image } = useImage();
+    const { authToken } = useAppAuthToken();
 
     const source = computed(() => {
-      return props.imageId ? IMAGE_RAW_URL(props.imageId) : null;
+      return props.imageId ? IMAGE_RAW_URL(props.imageId, authToken.value) : null;
     });
 
     const onError = (): void => {

package/components/agenda/FSAgenda.vue

@@ -1,13 +1,14 @@
 <template>
   <FSCol
+    v-if="$props.start && $props.end"
     :height="$props.height"
     :width="$props.width"
     gap="24px"
   >
     <FSAgendaHeader
       :mode="$props.mode!"
-      :start="start"
-      :end="end"
+      :start="$props.start"
+      :end="$props.end"
       :now="now"
       @update:start="($event) => $emit('update:start', $event)"
       @update:end="($event) => $emit('update:end', $event)"
@@ -28,8 +29,8 @@
           :value="AgendaMode.Day"
           :events="$props.events"
           :firstColumnWidth="dayColumnWidth"
-          :start="start"
-          :end="end"
+          :start="$props.start"
+          :end="$props.end"
           :now="now"
           :nowIsInSelectedRange="nowIsInSelectedRange"
           :loading="$props.loading"
@@ -44,8 +45,8 @@
           :value="AgendaMode.Week"
           :events="$props.events"
           :firstColumnWidth="dayColumnWidth"
-          :start="start"
-          :end="end"
+          :start="$props.start"
+          :end="$props.end"
           :now="now"
           :nowIsInSelectedRange="nowIsInSelectedRange"
           :loading="$props.loading"
@@ -60,8 +61,8 @@
           :value="AgendaMode.Month"
           :events="$props.events"
           :firstColumnWidth="dayColumnWidth"
-          :start="start"
-          :end="end"
+          :start="$props.start"
+          :end="$props.end"
           :now="now"
           :nowIsInSelectedRange="nowIsInSelectedRange"
           :loading="$props.loading"
@@ -78,7 +79,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, computed, ref, onUnmounted, watch } from 'vue';
+import { defineComponent, type PropType, computed, ref, onUnmounted, watch, onMounted } from 'vue';
 
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
@@ -150,41 +151,36 @@ export default defineComponent({
     const now = ref(todayToEpoch());
     const defaultMode = ref(props.mode);
 
-    const start = computed<number>(() => {
-      if (props.start) {
-        return props.start;
-      }
-      if (props.mode === AgendaMode.Week) {
-        return epochToLocalDayStart(now.value - (new Date(now.value).getDay() - 1) * 24 * 60 * 60 * 1000);
-      }
-      if (props.mode === AgendaMode.Month) {
-        return epochToLocalDayStart(new Date(now.value).setDate(1));
+    const nowIsInSelectedRange = computed(() => {
+      if (!props.start || !props.end) {
+        return false;
       }
-      return epochToLocalDayStart(now.value);
+      return now.value >= props.start && now.value <= props.end;
     });
 
-    const end = computed<number>(() => {
-      if (props.end) {
-        return props.end;
+    const nowInterval = setInterval(() => {
+      now.value = todayToEpoch();
+    }, 10000);
+
+    onMounted(() => {
+      if(props.end && props.start) {
+        return;
       }
       if (props.mode === AgendaMode.Week) {
-        return epochToLocalDayEnd(now.value + (7 - new Date(now.value).getDay()) * 24 * 60 * 60 * 1000);
+        emit("update:start", epochToLocalDayStart(now.value - (new Date(now.value).getDay() - 1) * 24 * 60 * 60 * 1000));
+        emit("update:end", epochToLocalDayEnd(now.value + (7 - new Date(now.value).getDay()) * 24 * 60 * 60 * 1000));
+        return;
       }
       if (props.mode === AgendaMode.Month) {
         const lastDayOfMonth = new Date(new Date(now.value).getFullYear(), new Date(now.value).getMonth() + 1, 0);
-        return epochToLocalDayEnd(lastDayOfMonth.getTime());
+        emit("update:start", epochToLocalDayStart(new Date(now.value).setDate(1)));
+        emit("update:end", lastDayOfMonth.getTime());
+        return;
       }
-      return epochToLocalDayEnd(now.value);
+      emit("update:start", epochToLocalDayStart(now.value));
+      emit("update:end", epochToLocalDayEnd(now.value));
     });
 
-    const nowIsInSelectedRange = computed(() => {
-      return now.value >= start.value && now.value <= end.value;
-    });
-
-    const nowInterval = setInterval(() => {
-      now.value = todayToEpoch();
-    }, 10000);
-
     onUnmounted(() => {
       clearInterval(nowInterval);
     });
@@ -195,13 +191,11 @@ export default defineComponent({
       } else if (!value && defaultMode.value !== AgendaMode.Day) {
         emit('update:mode', defaultMode.value);
       }
-    }, {immediate: true});
+    });
 
     return {
       AgendaMode,
-      start,
       dayColumnWidth,
-      end,
       now,
       nowIsInSelectedRange
     };

package/components/fields/FSRichTextField.vue

@@ -179,8 +179,14 @@
         </FSIcon>
       </template>
     </FSRow>
+    <FSText
+      v-if="readonly && !$props.modelValue && $props.emptyLabel"
+      variant="soft"
+    >
+      {{ $props.emptyLabel }}
+    </FSText>
     <div
-      class="fs-rich-text-field"
+      :class="classes"
       :style="style"
     >
       <div
@@ -237,6 +243,7 @@ import FSAutoCompleteField from "./FSAutocompleteField.vue";
 import FSTextField from "./FSTextField.vue";
 import FSIcon from "../FSIcon.vue";
 import FSCard from "../FSCard.vue";
+import FSText from "../FSText.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
@@ -245,6 +252,7 @@ export default defineComponent({
   components: {
     FSAutoCompleteField,
     FSTextField,
+    FSText,
     FSIcon,
     FSCard,
     FSCol,
@@ -261,6 +269,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    emptyLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     modelValue: {
       type: String as PropType<string | null>,
       required: false,
@@ -350,6 +363,10 @@ export default defineComponent({
       onError: console.error
     }
 
+    const isEmpty = computed((): boolean => {
+      return editor.getEditorState().isEmpty();
+    });
+
     const editor = createEditor(config);
 
     onMounted((): void => {
@@ -423,6 +440,14 @@ export default defineComponent({
       }
     });
 
+    const classes = computed((): string[] => {
+      const innerClasses = ["fs-rich-text-field"];
+      if (!readonly.value) {
+        innerClasses.push("fs-rich-text-field-readonly");
+      }
+      return innerClasses;
+    });
+
     const toolbarColors = computed((): { [code: string]: string } => {
       if (props.editable) {
         return {
@@ -655,8 +680,11 @@ export default defineComponent({
       toolbarColors,
       menuVariable,
       UNDO_COMMAND,
+      ColorEnum,
       readonly,
       linkUrl,
+      classes,
+      isEmpty,
       editor,
       isLink,
       style,

package/components/lists/FSSimpleList.vue

@@ -3,12 +3,6 @@
     v-bind="$props"
     gap="12px"
   >
-    <FSText
-      v-if="$props.label"
-      font="text-button"
-    >
-      {{ $props.label }}
-    </FSText>
     <FSSearchField
       v-if="$props.searchable"
       padding="0 12px 0 0"
@@ -45,8 +39,6 @@
             :width="$props.direction == 'row' ? 'fit-content' : '100%'"
             height="fit-content"
             :editable="false"
-            :singleSelect="$props.clickable"
-            @update:modelValue="$emit('click:item', item.id)"
           >
             <slot
               name="item"
@@ -108,7 +100,6 @@ import { filterItems } from "../../utils";
 
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
-import FSText from "../FSText.vue";
 import FSIcon from "../FSIcon.vue";
 import FSSpan from "../FSSpan.vue";
 import FSImage from "../FSImage.vue";
@@ -125,7 +116,6 @@ export default defineComponent({
   components: {
     FSRow,
     FSCol,
-    FSText,
     FSTile,
     FSIcon,
     FSSpan,
@@ -138,10 +128,6 @@ export default defineComponent({
     FSButtonRemoveIcon,
   },
   props: {
-    label: {
-      type: String,
-      required: false
-    },
     items: {
       type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string, [index: string]: any}[]>,
       required: true
@@ -166,11 +152,6 @@ export default defineComponent({
       required: false,
       default: false
     },
-    clickable: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     searchable: {
       type: Boolean,
       required: false,
@@ -207,7 +188,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ["click:edit", "click:remove", "click:item", "update:search"],
+  emits: ["click:edit", "click:remove", "update:search"],
   setup(props, { emit }) {
     const actualSearch = ref<string | null>(props.search);
     const filteredItems = computed(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.55",
-    "@dative-gpi/foundation-shared-services": "1.0.55"
+    "@dative-gpi/foundation-shared-domain": "1.0.57",
+    "@dative-gpi/foundation-shared-services": "1.0.57"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "1525fd18d7f83f946b100866bc563d6409049586"
+  "gitHead": "4445a164fed7501246674432eba3e8227c8bc827"
 }

package/styles/components/fs_rich_text_field.scss

@@ -25,7 +25,9 @@
     &:focus-within {
         border-color: var(--fs-rich-text-field-active-border-color) !important;
     }
+}
 
+.fs-rich-text-field-readonly {
     @include web {
         padding: 10px 12px !important;
     }
@@ -33,7 +35,6 @@
     @include mobile {
         padding: 6px 16px !important;
     }
-
 }
 
 .fs-rich-text-field-undo {

package/styles/components/fs_tabs.scss

@@ -1,6 +1,7 @@
 .fs-tabs {
     display: flex !important;
     width: 100% !important;
+    flex-shrink: 0;
 
     @include web {
         height: 48px !important;