@dative-gpi/foundation-shared-components 1.0.57 → 1.0.58-groupings

package/components/fields/FSTranslateRichTextField.vue

@@ -6,14 +6,14 @@
       gap="16px"
     >
       <FSRichTextField
-        :editable="false"
-        :label="$tr('ui.translateRichTextField.defaultValue', 'Default value')"
+        :disabled="true"
+        :label="$tr('ui.common.default-value', 'Default value')"
         :modelValue="$props.modelValue"
         v-bind="$attrs"
       />
       <FSRichTextField
         v-for="(language, index) in languages"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :key="index"
         :modelValue="getTranslation(language.code)"
         @update:modelValue="setTranslation(language.code, $event)"
@@ -30,9 +30,11 @@
               class="fs-translate-field-label"
               font="text-overline"
             >
-              {{ $tr('ui.translateRichTextField.translateIn', 'Translate in {0}', language.label) }}
+              {{ $tr('translate-rich-text-field.translate-in', 'Translate in {0}', language.label) }}
             </FSSpan>
-            <FSIcon>{{ language.icon }}</FSIcon>
+            <FSIcon>
+              {{ language.icon }}
+            </FSIcon>
           </FSRow>
         </template>
       </FSRichTextField>
@@ -40,25 +42,24 @@
     <FSRow
       :wrap="false"
     >
-      <FSButton
+      <FSButtonCancelLabel
         prependIcon="mdi-cancel"
         width="100%"
-        :label="$tr('ui.translateRichTextField.cancelButton.label', 'Cancel')"
         @click="onCancelTranslations"
       />
       <FSButton
-        v-if="$props.editable"
+        v-if="!$props.disabled"
         prependIcon="mdi-check"
         color="primary"
         width="100%"
-        :label="$tr('ui.translateRichTextField.validateButton.label', 'Validate translations')"
+        :label="$tr('translate-rich-text-field.validate', 'Validate translations')"
         @click="onSubmitTranslations"
       />
     </FSRow>
   </FSCol>
   <FSRichTextField
     v-else
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -70,7 +71,7 @@
         prependIcon="mdi-translate"
         color="primary"
         width="100%"
-        :label="$tr('ui.translateRichTextField.translateButton.label', 'Manage translations')"
+        :label="$tr('translate-rich-text-field.manage-translations', 'Manage translations')"
         @click="() => $emit('update:translationsExpanded', true)"
       />
     </template>
@@ -78,12 +79,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref } from 'vue';
+import { defineComponent, type PropType, ref, watch } from 'vue';
 
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
 
 import { emptyLexicalState } from '../../utils';
 
+import FSButtonCancelLabel from '../buttons/FSButtonCancelLabel.vue';
 import FSRichTextField from './FSRichTextField.vue';
 import FSButton from '../FSButton.vue';
 import FSIcon from '../FSIcon.vue';
@@ -94,6 +96,7 @@ import FSRow from '../FSRow.vue';
 export default defineComponent({
   name: 'FSTranslateRichTextField',
   components: {
+    FSButtonCancelLabel,
     FSRichTextField,
     FSButton,
     FSIcon,
@@ -106,17 +109,20 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    editable: {
+    disabled: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     modelValue: {
-      type: String as PropType<string | null>,
+      type: [Object, String] as PropType<{ [key: string]: any } | string | null>,
       required: false,
       default: null
     },
     translations: {
-      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
+      type: Array as PropType<{
+        languageCode: string;
+        [key: string]: string | object | null;
+      }[]>,
       required: false,
       default: () => []
     },
@@ -130,9 +136,12 @@ export default defineComponent({
   setup(props, { emit }) {
     const { languages } = useAppLanguages();
 
-    const innerTranslations = ref(props.translations);
+    const innerTranslations = ref<{
+      languageCode: string;
+      [key: string]: string | object | null;
+    }[]>([]);
 
-    const getTranslation = (languageCode: string): string => {
+    const getTranslation = (languageCode: string): string | object => {
       if (!innerTranslations.value) {
         return emptyLexicalState;
       }
@@ -140,7 +149,7 @@ export default defineComponent({
       if (!translation || !translation[props.property]) {
         return emptyLexicalState;
       }
-      return translation[props.property].toString();
+      return translation[props.property]!;
     };
 
     const setTranslation = (languageCode: string, value: string): void => {
@@ -164,7 +173,7 @@ export default defineComponent({
     };
 
     const onSubmitTranslations = (): void => {
-      if (props.editable) {
+      if (!props.disabled) {
         emit("update:translations", innerTranslations.value);
       }
       emit('update:translationsExpanded', false);
@@ -174,6 +183,18 @@ export default defineComponent({
       emit('update:translationsExpanded', false);
     };
 
+    watch(() => props.translations, (newTranslations) => {
+      innerTranslations.value = newTranslations.map((translation) => {
+        if(typeof translation[props.property] === 'string'){
+          return translation;
+        }
+        return {
+          ...translation,
+          [props.property]: JSON.stringify(translation[props.property])
+        }
+      });
+    }, { immediate: true, deep: true });
+
     return {
       languages,
       onCancelTranslations,

package/components/fields/FSTranslateTextArea.vue

@@ -1,6 +1,6 @@
 <template>
   <FSTextArea
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -32,7 +32,7 @@
     </template>
   </FSTextArea>
   <FSDialogSubmit
-    :title="$tr('ui.translate-text-area.title', 'Handle translations')"
+    :title="$tr('translate-text-area.title', 'Handle translations')"
     :submitButtonColor="$props.buttonColor"
     @click:submitButton="onSubmit"
     v-model="dialog"
@@ -44,8 +44,8 @@
         gap="32px"
       >
         <FSTextArea
-          :label="$tr('ui.translate-text-area.default-value', 'Default value')"
-          :editable="false"
+          :label="$tr('ui.common.default-value', 'Default value')"
+          :disabled="true"
           :rows="($attrs.rows as number)"
           :modelValue="$props.modelValue"
         />
@@ -54,7 +54,7 @@
         >
           <FSTextArea
             v-for="(language, index) in languages"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :key="index"
             :modelValue="getTranslation(language.code)"
             :rows="($attrs.rows as number)"
@@ -71,7 +71,7 @@
                   font="text-overline"
                   :style="style"
                 >
-                  {{ $tr("ui.translate-field.translate-in", "Translate in {0}", language.label) }}
+                  {{ $tr("translate-field.translate-in", "Translate in {0}", language.label) }}
                 </FSSpan>
                 <FSIcon>
                   {{ language.icon }}
@@ -151,10 +151,10 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue", "update:translations"],
@@ -170,7 +170,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-translate-field-color": lights.dark
         };
@@ -213,7 +213,7 @@ export default defineComponent({
 
     const onSubmit = (): void => {
       dialog.value = false;
-      if (props.editable) {
+      if (!props.disabled) {
         emit("update:translations", innerTranslations.value);
       }
     };

package/components/fields/FSTreeViewField.vue

@@ -27,7 +27,7 @@
           :description="$props.description"
           :hideHeader="$props.hideHeader"
           :clearable="$props.clearable"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :required="$props.required"
           :validateOn="validateOn"
           :label="$props.label"
@@ -79,7 +79,7 @@
                   <FSCheckbox
                     v-if="$props.multiple"
                     :class="listItemClass(item[$props.itemValue])"
-                    :editable="$props.editable"
+                    :disabled="$props.disabled"
                     :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
                     @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
                   >
@@ -101,7 +101,7 @@
                     v-if="!$props.multiple"
                     :selected="$props.modelValue === item[$props.itemValue]"
                     :class="listItemClass(item[$props.itemValue])"
-                    :editable="$props.editable"
+                    :disabled="$props.disabled"
                     :modelValue="item[$props.itemValue]"
                     @update:modelValue="onRadioChange"
                   >
@@ -131,9 +131,9 @@
       <template
         v-else
       >
-        <v-menu
+        <FSMenu
           :closeOnContentClick="false"
-          :modelValue="menu && $props.editable"
+          :modelValue="menu && !$props.disabled"
           @update:modelValue="menu = $event"
         >
           <template
@@ -145,7 +145,7 @@
               :description="$props.description"
               :hideHeader="$props.hideHeader"
               :clearable="$props.clearable"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :required="$props.required"
               :validateOn="validateOn"
               :label="$props.label"
@@ -188,7 +188,7 @@
               <FSCheckbox
                 v-if="$props.multiple"
                 :class="listItemClass(item[$props.itemValue])"
-                :editable="$props.editable"
+                :disabled="$props.disabled"
                 :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
                 @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
               >
@@ -210,7 +210,7 @@
                 v-if="!$props.multiple"
                 :selected="$props.modelValue === item[$props.itemValue]"
                 :class="listItemClass(item[$props.itemValue])"
-                :editable="$props.editable"
+                :disabled="$props.disabled"
                 :modelValue="item[$props.itemValue]"
                 @update:modelValue="onRadioChange"
               >
@@ -233,7 +233,7 @@
               #title
             />
           </v-treeview>
-        </v-menu>
+        </FSMenu>
       </template>
     </FSCol>
   </template>
@@ -253,6 +253,7 @@ import FSFadeOut from "../FSFadeOut.vue";
 import FSLoader from "../FSLoader.vue";
 import FSRadio from "../FSRadio.vue";
 import FSSpan from "../FSSpan.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -266,6 +267,7 @@ export default defineComponent({
     FSLoader,
     FSRadio,
     FSSpan,
+    FSMenu,
     FSCol,
   },
   props: {
@@ -338,10 +340,10 @@ export default defineComponent({
       required: false,
       default: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     loading: {
       type: Boolean,
@@ -366,7 +368,7 @@ export default defineComponent({
     const menu = ref(false);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-tree-view-field-cursor": "default"
         };
@@ -462,7 +464,7 @@ export default defineComponent({
     };
 
     const openMobileOverlay = () => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       dialog.value = true;

package/components/fields/periodicField/FSPeriodicDailyField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSRadioGroup
     :values="availableConfigurations"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     v-model="selectedConfiguration"
   >
     <template
@@ -14,10 +14,10 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr('ui.periodicfield.daily.every', 'Every') }}
+          {{ $tr('ui.common.every', 'Every') }}
         </FSSpan>
         <FSNumberField
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :modelValue="days"
           :hideHeader="true"
           :clearable="false"
@@ -26,10 +26,10 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr('ui.periodicfield.daily.daysat', 'day(s) at') }}
+          {{ $tr('periodic-field.daysat', 'day(s) at') }}
         </FSSpan>
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :modelValue="time"
           :hideHeader="true"
@@ -66,10 +66,10 @@ export default defineComponent({
       type: Array<string>,
       required: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/fields/periodicField/FSPeriodicField.vue

@@ -5,7 +5,7 @@
   >
     <FSRadioGroup
       :values="availablePeriod"
-      :editable="editable"
+      :disabled="disabled"
       v-model="selectedPeriod"
     />
     <FSRow
@@ -19,25 +19,25 @@
       />
       <FSPeriodicDailyField
         v-if="selectedPeriod === 'daily'"
-        :editable="editable"
+        :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicWeeklyField
         v-else-if="selectedPeriod === 'weekly'"
-        :editable="editable"
+        :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicMonthlyField
         v-else-if="selectedPeriod === 'monthly'"
-        :editable="editable"
+        :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicYearlyField
         v-else-if="selectedPeriod === 'yearly'"
-        :editable="editable"
+        :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, onMounted, type PropType, watch } from "vue";
+import { ref, defineComponent, type PropType, watch } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 
@@ -71,13 +71,13 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: String as PropType<"daily" | "weekly" | "monthly" | "yearly">,
+      type: String as PropType<string>,
       required: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -85,10 +85,10 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
 
     const availablePeriod = [
-      { label: $tr("ui.periodicField.daily", "Daily")    , value: "daily"  , item: { default : "0 12 */1 * *"} },
-      { label: $tr("ui.periodicField.weekly", "Weekly")  , value: "weekly" , item: { default : "0 12 * * 1"} },
-      { label: $tr("ui.periodicField.monthly", "Monthly"), value: "monthly", item: { default : "0 12 1 * *"} },
-      { label: $tr("ui.periodicField.yearly", "Yearly")  , value: "yearly" , item: { default : "0 12 1 1 *"} }
+      { label: $tr("ui.common.daily", "Daily")    , value: "daily"  , item: { default : "0 12 */1 * *"} },
+      { label: $tr("ui.common.weekly", "Weekly")  , value: "weekly" , item: { default : "0 12 * * 1"} },
+      { label: $tr("ui.common.monthly", "Monthly"), value: "monthly", item: { default : "0 12 1 * *"} },
+      { label: $tr("ui.common.yearly", "Yearly")  , value: "yearly" , item: { default : "0 12 1 1 *"} }
     ];
     
     const selectedPeriod = ref("daily");
@@ -118,9 +118,9 @@ export default defineComponent({
       emit('update:modelValue', period.item.default);
     });
 
-    onMounted(() => {
+    watch(() => props.modelValue, () => {
       selectedPeriod.value = getPeriod(props.modelValue);
-    });
+    }, { immediate: true });
 
     return {
       availablePeriod,

package/components/fields/periodicField/FSPeriodicMonthlyField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSRadioGroup
     :values="availableConfigurations"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     v-model="selectedConfiguration"
   >
     <template
@@ -14,10 +14,10 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.monthly.day", "Day") }}
+          {{ $tr("ui.common.day", "Day") }}
         </FSSpan>
         <FSSelectField
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :items="dayNumbers"
           :hideHeader="true"
           :clearable="false"
@@ -27,10 +27,10 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.monthly.every-month-at", "every month at") }}
+          {{ $tr("periodic-monthly-field.every-month-at", "every month at") }}
         </FSSpan>
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :hideHeader="true"
           :slider="false"
@@ -45,10 +45,10 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.monthly.every", "Every") }}
+          {{ $tr("ui.common.every", "Every") }}
         </FSSpan>
         <FSSelectField
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :items="dayWeekNumbers"
           :hideHeader="true"
           :clearable="false"
@@ -56,7 +56,7 @@
           @update:modelValue="onUpdateDayWeekNumber($event)"
         />
         <FSSelectDays
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :useAllDays="false"
           :hideHeader="true"
           :modelValue="dayWeek"
@@ -65,10 +65,10 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.monthly.at", "at") }}
+          {{ $tr("ui.common.at", "at") }}
         </FSSpan>
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :hideHeader="true"
           :slider="false"
@@ -108,10 +108,10 @@ export default defineComponent({
       type: Array<string>,
       required: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -119,10 +119,10 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
 
     const dayWeekNumbers = [
-      { id: 1, label: $tr("ui.periodicfield.monthly.first" , "First") },
-      { id: 2, label: $tr("ui.periodicfield.monthly.second", "Second") },
-      { id: 3, label: $tr("ui.periodicfield.monthly.third" , "Third") },
-      { id: 4, label: $tr("ui.periodicfield.monthly.fourth", "Fourth") },
+      { id: 1, label: $tr("ui.common.first" , "First") },
+      { id: 2, label: $tr("ui.common.second", "Second") },
+      { id: 3, label: $tr("ui.common.third" , "Third") },
+      { id: 4, label: $tr("ui.common.fourth", "Fourth") },
     ];
 
     const availableConfigurations = [