@dative-gpi/foundation-shared-components 0.0.135 → 0.0.136

package/components/fields/FSSearchField.vue

@@ -1,16 +1,20 @@
 <template>
   <FSTextField
-    :label="$props.label"
-    :description="$props.description"
-    :color="$props.color"
-    :hideHeader="$props.hideHeader"
-    :required="$props.required"
     :editable="$props.editable"
     :placeholder="placeholder"
     @keydown.enter="onSearch"
     v-model="innerValue"
     v-bind="$attrs"
   >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
     <template
       v-if="$props.prependInnerIcon"
       #prepend-inner
@@ -45,15 +49,6 @@
         />
       </slot>
     </template>
-    <template
-      v-for="(_, name) in $slots"
-      v-slot:[name]="slotData"
-    >
-      <slot
-        :name="name"
-        v-bind="slotData"
-      />
-    </template>
   </FSTextField>
 </template>
 
@@ -73,16 +68,6 @@ export default defineComponent({
     FSButton
   },
   props: {
-    label: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     placeholder: {
       type: String as PropType<string | null>,
       required: false,
@@ -123,26 +108,11 @@ export default defineComponent({
       required: false,
       default: null
     },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Dark
-    },
     buttonColor: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
     },
-    hideHeader: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     editable: {
       type: Boolean,
       required: false,

package/components/fields/FSTextField.vue

@@ -7,6 +7,24 @@
     :editable="$props.editable"
     :messages="messages"
   >
+    <template
+      v-if="$slots.label"
+      v-slot:label="slotData"
+    >
+      <slot
+        name="label"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      v-if="$slots.description"
+      v-slot:label="slotData"
+    >
+      <slot
+        name="description"
+        v-bind="slotData"
+      />
+    </template>
     <v-text-field
       class="fs-text-field"
       variant="outlined"
@@ -23,7 +41,7 @@
       v-bind="$attrs"
     >
       <template
-        v-for="(_, name) in $slots"
+        v-for="(_, name) in slots"
         v-slot:[name]="slotData"
       >
         <slot
@@ -49,7 +67,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSBaseField from "./FSBaseField.vue";
@@ -117,6 +135,10 @@ export default defineComponent({
   setup(props) {
     const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -146,6 +168,7 @@ export default defineComponent({
       validateOn,
       ColorEnum,
       messages,
+      slots,
       style
     };
   }

package/components/fields/FSTranslateField.vue

@@ -0,0 +1,197 @@
+<template>
+  <FSTextField
+    :editable="$props.editable"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #append
+    >
+      <slot
+        name="append"
+      >
+        <FSButton
+          :prependIcon="$props.buttonPrependIcon"
+          :label="$props.buttonLabel"
+          :appendIcon="$props.buttonAppendIcon"
+          :variant="$props.buttonVariant"
+          :color="$props.buttonColor"
+          :load="fetchingLanguages"
+          @click="dialog = true"
+        />
+      </slot>
+    </template>
+  </FSTextField>
+  <FSDialogSubmit
+    :title="$tr('ui.translate-field.title', 'Handle translations')"
+    :submitButtonColor="$props.buttonColor"
+    @click:submitButton="onSubmit"
+    v-model="dialog"
+  >
+    <template
+      #body
+    >
+      <FSCol
+        gap="32px"
+      >
+        <FSTextField
+          :label="$tr('ui.translate-field.default-value', 'Default value')"
+          :editable="false"
+          :modelValue="$props.modelValue"
+        />
+        <FSCol
+          gap="16px"
+        >
+          <FSTextField
+            v-for="(language, index) in languages"
+            :editable="$props.editable"
+            :key="index"
+            v-model="innerTranslations[language.code]"
+          >
+            <template
+              #label
+            >
+              <FSRow
+                :wrap="false"
+              >
+                <FSSpan
+                  class="fs-translate-field-label"
+                  font="text-overline"
+                  :style="style"
+                >
+                  {{ $tr("ui.translate-field.translate-in", "Translate in {0}", language.label) }}
+                </FSSpan>
+                <FSIcon>
+                  {{ language.icon }}
+                </FSIcon>
+              </FSRow>
+            </template>
+          </FSTextField>
+        </FSCol>
+      </FSCol>
+    </template>
+  </FSDialogSubmit>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, PropType, ref } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useLanguages } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useColors } from "../../composables";
+
+import FSDialogSubmit from "../FSDialogSubmit.vue";
+import FSTextField from "./FSTextField.vue";
+import FSButton from "../FSButton.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSTranslateField",
+  components: {
+    FSDialogSubmit,
+    FSTextField,
+    FSButton,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    buttonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: "mdi-translate"
+    },
+    buttonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    buttonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    buttonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    translations: {
+      type: Object as PropType<{ [key: string]: string }>,
+      required: false,
+      default: () => ({})
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue", "update:translations"],
+  setup(props, { emit }) {
+    const { getMany: getManyLanguages, fetching: fetchingLanguages, entities: languages } = useLanguages();
+    const { getColors } = useColors();
+
+    const innerTranslations = ref(props.translations ?? {});
+    const dialog = ref(false);
+
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): { [key: string] : string | null | undefined } => {
+      if (!props.editable) {
+        return {
+          "--fs-translate-field-color": lights.dark
+        };
+      }
+      return {
+        "--fs-translate-field-color": darks.base
+      };
+    });
+
+    const onSubmit = (): void => {
+      dialog.value = false;
+      if (props.editable) {
+        emit("update:translations", innerTranslations.value);
+      }
+    };
+
+    onMounted(() => {
+      getManyLanguages();
+    });
+
+    return {
+      fetchingLanguages,
+      innerTranslations,
+      ColorEnum,
+      languages,
+      dialog,
+      style,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/lists/FSDataTableUI.vue

@@ -26,18 +26,21 @@
         v-if="!isExtraSmall"
         name="toolbar"
       />
-      <v-spacer />
-      <FSRow
+      <template
         v-if="!$props.disableTable && !$props.disableIterator"
-        align="center-right"
       >
-        <FSOptionGroup
-          :values="modeOptions"
-          :singleColor="true"
-          :required="true"
-          v-model="innerMode"
-        />
-      </FSRow>
+        <v-spacer />
+        <FSRow
+          align="center-right"
+        >
+          <FSOptionGroup
+            :values="modeOptions"
+            :singleColor="true"
+            :required="true"
+            v-model="innerMode"
+          />
+        </FSRow>
+      </template>
     </FSRow>
     <FSRow
       v-if="isExtraSmall && hasToolbar"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.135",
+  "version": "0.0.136",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.135",
-    "@dative-gpi/foundation-shared-services": "0.0.135",
+    "@dative-gpi/foundation-shared-domain": "0.0.136",
+    "@dative-gpi/foundation-shared-services": "0.0.136",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "96e5e31c3bf2de7421798f572b09102bb32d1e18"
+  "gitHead": "07ed80382fe8c568e70e165a75f4e6feff0829fa"
 }

package/styles/components/fs_translate_field.scss

@@ -0,0 +1,3 @@
+.fs-translate-field-label {
+    color: var(--fs-translate-field-color);
+}

package/styles/components/index.scss

@@ -57,5 +57,6 @@
 @import "fs_time_field.scss";
 @import "fs_timeslot_field.scss";
 @import "fs_tooltip.scss";
+@import "fs_translate_field.scss";
 @import "fs_window.scss";
 @import "fs_wrap_group.scss";

package/styles/globals/overrides.scss

@@ -49,14 +49,22 @@
         }
     }
 
-    & .v-input__prepend {
-        margin-inline-end: 0 !important;
+    &:has(.v-input__control):has(.v-input__append) > .v-input__append {
+        margin-inline-start: 8px !important;
     }
 
-    & .v-input__append {
+    &:not(:has(.v-input__control)):has(.v-input__append) > .v-input__append {
         margin-inline-start: 0 !important;
     }
 
+    &:has(.v-input__control):has(.v-input__prepend) > .v-input__prepend {
+        margin-inline-end: 8px !important;
+    }
+
+    &:not(:has(.v-input__control)):has(.v-input__prepend) > .v-input__prepend {
+        margin-inline-end: 0 !important;
+    }
+
     & > .v-input__control > .v-field {
         border-radius: 4px !important;