@dative-gpi/foundation-shared-components 1.0.43 → 1.0.45

package/components/fields/FSAutocompleteField.vue

@@ -472,7 +472,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type Slot, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref, type Slot, type StyleValue, watch } from "vue";
 
 import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -768,6 +768,10 @@ export default defineComponent({
       showExtra.value = true;
     };
 
+    watch(search, () => {
+      emit("update:search", search.value);
+    });
+
     return {
       autocompleteSlots,
       toggleSetSlots,

package/components/fields/FSTextArea.vue

@@ -7,6 +7,15 @@
     :editable="$props.editable"
     :messages="messages"
   >
+    <template
+      v-if="$slots.label"
+      v-slot:label="slotData"
+    >
+      <slot
+        name="label"
+        v-bind="slotData"
+      />
+    </template>
     <v-textarea
       class="fs-text-area"
       variant="outlined"
@@ -26,7 +35,7 @@
       v-bind="$attrs"
     >
       <template
-        v-for="(_, name) in $slots"
+        v-for="(_, name) in slots"
         v-slot:[name]="slotData"
       >
         <slot
@@ -56,7 +65,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import { useColors, useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useBreakpoints, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSBaseField from "./FSBaseField.vue";
@@ -130,6 +139,9 @@ export default defineComponent({
     const { validateOn, getMessages } = useRules();
     const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -185,7 +197,8 @@ export default defineComponent({
       ColorEnum,
       messages,
       classes,
-      style
+      style,
+      slots
     };
   }
 });

package/components/fields/FSTranslateField.vue

@@ -62,6 +62,7 @@
             >
               <FSRow
                 :wrap="false"
+                align="center-left"
               >
                 <FSSpan
                   class="fs-translate-field-label"

package/components/fields/FSTranslateRichTextField.vue

@@ -24,6 +24,7 @@
         >
           <FSRow
             :wrap="false"
+            align="center-left"
           >
             <FSSpan
               class="fs-translate-field-label"

package/components/fields/FSTranslateTextArea.vue

@@ -0,0 +1,233 @@
+<template>
+  <FSTextArea
+    :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
+    >
+      <FSButton
+        height="100%"
+        style=""
+        :prependIcon="$props.buttonPrependIcon"
+        :appendIcon="$props.buttonAppendIcon"
+        :variant="$props.buttonVariant"
+        :color="$props.buttonColor"
+        @click="dialog = true"
+      /> 
+      <slot
+        name="append"
+      />
+    </template>
+  </FSTextArea>
+  <FSDialogSubmit
+    :title="$tr('ui.translate-text-area.title', 'Handle translations')"
+    :submitButtonColor="$props.buttonColor"
+    @click:submitButton="onSubmit"
+    v-model="dialog"
+  >
+    <template
+      #body
+    >
+      <FSCol
+        gap="32px"
+      >
+        <FSTextArea
+          :label="$tr('ui.translate-text-area.default-value', 'Default value')"
+          :editable="false"
+          :rows="($attrs.rows as number)"
+          :modelValue="$props.modelValue"
+        />
+        <FSCol
+          gap="20px"
+        >
+          <FSTextArea
+            v-for="(language, index) in languages"
+            :editable="$props.editable"
+            :key="index"
+            :modelValue="getTranslation(language.code)"
+            :rows="($attrs.rows as number)"
+            @update:modelValue="setTranslation(language.code, $event)"
+          >
+            <template
+              #label
+            >
+              <FSRow
+                :wrap="false"
+                align="center-left"
+              >
+                <FSSpan
+                  font="text-overline"
+                  :style="style"
+                >
+                  {{ $tr("ui.translate-field.translate-in", "Translate in {0}", language.label) }}
+                </FSSpan>
+                <FSIcon>
+                  {{ language.icon }}
+                </FSIcon>
+              </FSRow> 
+            </template>
+          </FSTextArea>
+        </FSCol>
+      </FSCol>
+    </template>
+  </FSDialogSubmit>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useColors } from "../../composables";
+
+import FSDialogSubmit from "../FSDialogSubmit.vue";
+import FSTextArea from "./FSTextArea.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: "FSTranslateTextArea",
+  components: {
+    FSDialogSubmit,
+    FSTextArea,
+    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
+    },
+    property: {
+      type: String as PropType<string>,
+      required: false,
+      default: "label"
+    },
+    translations: {
+      type: Array as PropType<{ languageCode: string; [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 { languages } = useAppLanguages();
+    const { getColors } = useColors();
+    
+    const dialog = ref(false);
+
+    const innerTranslations = ref(props.translations);
+
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): StyleValue => {
+      if (!props.editable) {
+        return {
+          "--fs-translate-field-color": lights.dark
+        };
+      }
+      return {
+        "--fs-translate-field-color": darks.base
+      };
+    });
+
+    const getTranslation = (languageCode: string): string => {
+      if (!innerTranslations.value) {
+        return "";
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (!translation || !translation[props.property]) {
+        return "";
+      }
+      return translation[props.property];
+    };
+
+    const setTranslation = (languageCode: string, value: string): void => {
+      if (!innerTranslations.value) {
+        innerTranslations.value = [{
+          languageCode,
+          [props.property]: value
+        }]
+        return;
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (translation) {
+        translation[props.property] = value;
+      }
+      else {
+        innerTranslations.value.push({
+          languageCode,
+          [props.property]: value
+        });
+      }
+    };
+
+    const onSubmit = (): void => {
+      dialog.value = false;
+      if (props.editable) {
+        emit("update:translations", innerTranslations.value);
+      }
+    };
+
+    return {
+      innerTranslations,
+      ColorEnum,
+      languages,
+      dialog,
+      style,
+      getTranslation,
+      setTranslation,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/lists/FSDataTableUI.vue

@@ -22,7 +22,6 @@
         <FSButton
           v-if="filterableHeaders.length > 0"
           prependIcon="mdi-filter-variant"
-          padding="0 7px"
           :variant="showFilters ? 'full' : 'standard'"
           @click="showFilters = !showFilters"
         />
@@ -906,8 +905,8 @@ export default defineComponent({
     const elementId = `id${uuidv4()}`;
 
     const modeOptions: FSToggle[] = [
-      { id: "table", prependIcon: "mdi-table" },
-      { id: "iterator", prependIcon: "mdi-apps" }
+      { id: "iterator", prependIcon: "mdi-view-grid-outline" },
+      { id: "table", prependIcon: "mdi-format-list-bulleted" }
     ];
 
     const rowsPerPageOptions: { id: number, label: string }[] = [

package/components/map/FSMap.vue

@@ -117,7 +117,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch, onUnmounted } from "vue";
+import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch, onUnmounted, markRaw } from "vue";
 
 import type {} from "leaflet.markercluster";
 import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, LatLngBounds, type FitBoundsOptions } from "leaflet";
@@ -361,7 +361,7 @@ export default defineComponent({
         maxBoundsViscosity: 1.0
       };
 
-      map.value = createMap(leafletContainer.value, mapOptions);
+      map.value = markRaw(createMap(leafletContainer.value, mapOptions));
       setView(props.center[0], props.center[1], defaultZoom);
       
       map.value.on('click', (e: L.LeafletMouseEvent) => {

package/components/selects/FSSelectListMode.vue

@@ -0,0 +1,51 @@
+<template>
+  <FSSelectField
+    :clearable="false"
+    :items="items"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <v-icon>{{ item.icon }}</v-icon>
+    </template>
+  </FSSelectField>
+</template>
+  
+  <script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent } from "vue";
+  
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { ListModes } from "@dative-gpi/foundation-shared-domain/models";
+  
+import FSSelectField from "../fields/FSSelectField.vue";
+  
+export default defineComponent({
+  name: "FSSelectViewMode",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: String as PropType<ListModes>,
+      required: true
+    },
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const { $tr } = useTranslationsProvider();
+  
+    const items = [
+      { id: ListModes.Table, label: $tr("ui.common.table-mode", "Table"), icon: "mdi-format-list-bulleted" },
+      { id: ListModes.Iterator, label: $tr("ui.common.tile-mode", "Tuile"), icon: "mdi-view-grid-outline" },
+    ];
+  
+    return {
+      items
+    };
+  }
+});
+  </script>

package/composables/useColors.ts

@@ -53,7 +53,8 @@ export const useColors = () => {
         if(color.darken(0.15).isLight()){
             return color.darken(0.8);
         }
-        return color.lighten(color.value() / 50);
+
+        return color.lightness(color.lightness() < 30 ? 100 : Math.min(color.lightness() + 60, 100));
     }
 
     const parseColor = (color: ColorBase): Color => {
@@ -105,7 +106,7 @@ export const useColors = () => {
         const colors: string[][] = [];
         for (let saturation = baseMinSaturation; saturation <= 100; saturation += (100 - baseMinSaturation) / (columnCount - 1)) {
             const colorsRow = [];
-            for (let hue = 0; hue < 360; hue += 15) {
+            for (let hue = 0; hue < 360; hue += 5) {
                 const color = new Color({ h: hue, s: saturation, v: baseFixedBrightness });
                 colorsRow.push(color.hex());
             }

package/package.json

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

package/styles/components/fs_span.scss

@@ -1,5 +1,5 @@
 .fs-span {
-    padding-inline-end: 2px;
+    // padding-inline-end: 2px;
     max-width: 100%;
 }
 

package/styles/components/fs_text_area.scss

@@ -1,7 +1,6 @@
 .fs-text-area:not(.fs-text-area-auto-grow) {
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-area-border-color) !important;
-        height: var(--fs-text-area-height);
 
         &--error {
             border-color: var(--fs-text-area-error-border-color) !important;
@@ -25,6 +24,10 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
+
+        & > .v-field__clearable {
+            align-items: flex-start;
+        }
         
         @include web {
             padding: 11px 16px !important;
@@ -33,6 +36,10 @@
         @include mobile {
             padding: 10px 16px !important;
         }
+    } 
+
+    & > .v-input__append  {
+        padding-top: 0px;
     }
 }
 
@@ -61,6 +68,10 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
+
+        & > .v-field__clearable {
+            align-items: flex-start;
+        }
         
         @include web {
             padding: 11px 16px !important;
@@ -70,4 +81,8 @@
             padding: 10px 16px !important;
         }
     }
+
+    & > .v-input__append  {
+        padding-top: 0px;
+    }
 }