@dative-gpi/foundation-shared-components 0.0.200 → 0.0.202

package/components/fields/FSColorField.vue

@@ -7,96 +7,40 @@
     <template
       #activator="{ props }"
     >
-      <FSCol>
-        <FSRow
-          height="fill"
+      <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 }"
         >
-          <FSTextField
-            class="fs-color-field"
-            :hideHeader="$props.hideHeader"
-            :required="$props.required"
-            :editable="$props.editable"
-            :clearable="false"
-            :readonly="true"
-            :modelValue="innerColor"
-            v-bind="$attrs"
+          <FSRow
+            align="center-center"
           >
-            <template
-              #prepend-inner
-            >
-              <slot
-                name="prepend-inner"
-              >
-                <FSIcon
-                  :color="innerColor"
-                >
-                  mdi-circle
-                </FSIcon>
-              </slot>
-            </template>
-            <template
-              #append
-            >
-              <FSButton
-                prependIcon="mdi-pencil"
-                variant="full"
-                :editable="$props.editable"
-                v-bind="props"
-              />
-            </template>
-          </FSTextField>
-          <FSTextField
-            v-if="$props.allowOpacity && !$props.onlyBaseColors"
-            class="fs-color-field-opacity"
-            :label="$tr('ui.color-field.opacity', 'Opacity')"
-            :hideHeader="$props.hideHeader"
-            :required="$props.required"
-            :editable="$props.editable"
-            :clearable="false"
-            :readonly="true"
-            :modelValue="(Math.round(getPercentageFromHex(innerOpacity) * 100)) + ' %'"
-          >
-            <template
-              #prepend-inner
-            >
-              <slot
-                name="prepend-inner"
-              >
-                <FSIcon
-                  :color="ColorEnum.Dark"
-                  :editable="$props.editable"
-                  :style="{ opacity: getPercentageFromHex(innerOpacity) }"
-                >
-                  mdi-circle
-                </FSIcon>
-              </slot>
-            </template>
-            <template
-              #append
+            <FSIcon
+              :color="innerColor"
+              size="20px"
+              icon="mdi-circle-half"
+            />
+            <FSText
+              font="text-overline"
             >
-              <FSButton
-                prependIcon="mdi-pencil"
-                variant="full"
-                :editable="$props.editable"
-                v-bind="props"
-              />
-            </template>
-          </FSTextField>
-        </FSRow>
-        <slot
-          name="description"
-        >
-          <FSSpan
-            v-if="$props.description"
-            class="fs-color-field-description"
-            font="text-underline"
-            :style="style"
-          >
-            {{ $props.description }}
-          </FSSpan>
-        </slot>
-      </FSCol>
+              {{ innerColor }}
+            </FSText>
+          </FSRow>
+        </FSCard>
+      </FSBaseField>
     </template>
     <FSCard
       :elevation="true"
@@ -133,31 +77,36 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent, onMounted, ref, watch } from "vue";
 
 import { getPercentageFromHex, getHexFromPercentage } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSTextField from "./FSTextField.vue";
-import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSIcon.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSText from "../FSText.vue";
 
 export default defineComponent({
   name: "FSColorField",
   components: {
-    FSTextField,
-    FSButton,
+    FSBaseField,
+    FSText,
     FSCard,
     FSIcon,
     FSCol,
-    FSRow
+    FSRow,
   },
   props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     description: {
       type: String as PropType<string | null>,
       required: false,
@@ -197,6 +146,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fill"
     }
   },
   emits: ["update:modelValue", "update:opacity"],
@@ -217,11 +171,17 @@ export default defineComponent({
     const style = computed((): { [key: string]: string | undefined } => {
       if (!props.editable) {
         return {
-          "--fs-color-field-color": lights.dark
+          "--fs-color-field-cursor"             : "default",
+          "--fs-color-field-border-color"       : lights.base,
+          "--fs-color-field-color"              : lights.dark,
+          "--fs-color-field-colorvalue": fullColor.value,
         };
       }
       return {
-        "--fs-color-field-color": darks.base
+        "--fs-color-field-cursor"             : "pointer",
+        "--fs-color-field-border-color"       : lights.dark,
+        "--fs-color-field-color"              : darks.base,
+        "--fs-color-field-colorvalue": fullColor.value,
       };
     });
 
@@ -234,6 +194,18 @@ export default defineComponent({
       emit("update:opacity", getPercentageFromHex(innerOpacity.value));
     };
 
+    onMounted(() => {
+      innerColor.value = getColors(props.modelValue)['base'];
+      innerOpacity.value = getHexFromPercentage(props.opacityValue);
+      fullColor.value = innerColor.value + innerOpacity.value;
+    });
+
+    watch(() => props.modelValue, (value) => {
+      innerColor.value = getColors(value)['base'];
+      innerOpacity.value = getHexFromPercentage(props.opacityValue);
+      fullColor.value = innerColor.value + innerOpacity.value;
+    });
+
     return {
       getPercentageFromHex,
       getBasePaletteColors,

package/components/fields/FSGradientField.vue

@@ -0,0 +1,126 @@
+<template>
+  <FSCol
+    class="fs-gradient-field"
+  >
+    <FSBaseField
+      :label="$props.label"
+      :description="$props.description"
+      :required="$props.required"
+      :editable="$props.editable"
+      v-bind="$attrs"
+    >
+      <FSRow>
+        <FSColorField
+          v-for="colorIndex in $props.colorCount"
+          :key="colorIndex"
+          :modelValue="$props.modelValue[colorIndex-1]"
+          :required="$props.required"
+          :editable="$props.editable"
+          @update:modelValue="($event, index) => $emit('update:modelValue', $props.modelValue.map((color, i) => colorIndex === i + 1 ? $event : color))"
+        />
+      </FSRow>
+      <FSSelectField
+        class="fs-gradient-select-field"
+        :items="items"
+        @update:modelValue="$emit('update:modelValue', JSON.parse($event))"
+        :clearable="false"
+        :editable="$props.editable"
+        :modelValue="JSON.stringify($props.modelValue)"
+      >
+        <template
+          v-slot:selection="{ item }"
+        >
+          <FSRow
+            height="fill"
+            width="100%"
+            class="fs-gradient-field-preview"
+            :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${JSON.parse(item.value).join(', ')})` }"
+          >
+            <span />
+          </FSRow>
+        </template>
+        <template
+          v-slot:item="{ item, props }"
+        >
+          <v-list-item
+            v-bind="props"
+          >
+            <template
+              #title
+            >
+              <FSRow
+                height="fill"
+                width="100%"
+                class="fs-gradient-field-preview"
+                :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${JSON.parse(item.value).join(', ')})` }"
+              >
+                <span />
+              </FSRow>
+            </template>
+          </v-list-item>
+        </template>
+      </FSSelectField>
+    </FSBaseField>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { type PropType, defineComponent } from "vue";
+
+import FSColorField from "./FSColorField.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSSelectField from "./FSSelectField.vue";
+import { groupedGradients } from "../../utils";
+
+export default defineComponent({
+  name: "FSGradientField",
+  components: {
+    FSBaseField,
+    FSColorField,
+    FSCol,
+    FSRow,
+    FSSelectField
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: true
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    colorCount: {
+      type: Number,
+      required: false,
+      default: 2
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const items = groupedGradients[props.colorCount] ?? [];
+
+    return {
+      items
+    };
+  }
+});
+</script>

package/components/map/FSMap.vue

@@ -4,6 +4,7 @@
     v-bind="$attrs"
   >
     <FSCol
+      v-if="L"
       class="fs-map"
       width="fill"
     >
@@ -96,7 +97,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
 
-import type * as L from "leaflet";
+import * as L from "leaflet";
 import "leaflet.markercluster";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
@@ -350,7 +351,7 @@ export default defineComponent({
         return;
       }
       modifyLocationAddress(props.selectedLocationId, address);
-      map?.flyTo([address.latitude, address.longitude], map?.getZoom() ?? defaultZoom);
+      map?.panTo([address.latitude, address.longitude]);
     };
 
     const onNewCoordEntered = async (lat: number, lng: number) => {
@@ -374,7 +375,7 @@ export default defineComponent({
     const locate = () => {
       map?.locate();
       map?.on('locationfound', (e: L.LocationEvent) => {
-        map?.flyTo(e.latlng, map?.getZoom() ?? defaultZoom);
+        map?.panTo(e.latlng);
         const iconHtml = `<div class="fs-map-mylocation-pin"></div>`;
         const icon = LL.divIcon({
           html: iconHtml,
@@ -395,7 +396,7 @@ export default defineComponent({
         map?.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
       }
       else {
-        map?.flyTo([props.center[0], props.center[1]], map?.getZoom() ?? defaultZoom);
+        map?.panTo([props.center[0], props.center[1]]);
       }
       if (props.modelValue.length > 1) {
         emit('update:selectedLocationId', null);
@@ -409,7 +410,7 @@ export default defineComponent({
         map?.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
       }
       else {
-        map?.flyTo([props.center[0], props.center[1]], map?.getZoom() ?? defaultZoom);
+        map?.flyTo([props.center[0], props.center[1]], map?.getZoom() ?? defaultZoom, { animate: false });
       }
       if (props.modelValue.length > 1) {
         emit('update:selectedLocationId', null);
@@ -434,7 +435,7 @@ export default defineComponent({
       }
       const marker = markers[props.selectedLocationId];
       marker.getElement()?.classList.add('fs-map-location-selected');
-      map?.flyTo(marker.getLatLng(), 17);
+      map?.flyTo(marker.getLatLng(), 17, { animate: false });
     })
 
     watch(() => props.selectedSiteId, () => {
@@ -448,6 +449,7 @@ export default defineComponent({
     });
 
     return {
+      L,
       innerSelectedLayer,
       editingLocation,
       innerModelValue,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.200",
+  "version": "0.0.202",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,10 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.200",
-    "@dative-gpi/foundation-shared-services": "0.0.200",
-    "leaflet": "1.9.4",
-    "leaflet.markercluster": "1.5.3"
+    "@dative-gpi/foundation-shared-domain": "0.0.202",
+    "@dative-gpi/foundation-shared-services": "0.0.202"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -28,12 +26,14 @@
     "@lexical/utils": "0.12.5",
     "@mdi/font": "^7.4.47",
     "blurhash": "2.0.5",
-    "color": "^4.2.3"
+    "color": "^4.2.3",
+    "leaflet": "1.9.4",
+    "leaflet.markercluster": "1.5.3"
   },
   "devDependencies": {
     "@types/color": "3.0.6",
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "555bbbadca9a08f0b0dc897d94bb1275f20a087a"
+  "gitHead": "7ea892245b4d8ea67ae8e7c5d1797993b8e96531"
 }

package/styles/components/fs_color_field.scss

@@ -1,4 +1,14 @@
-.fs-color-field .v-field__prepend-inner > .v-icon {
+.fs-color-field .fs-card {
+  cursor: var(--fs-color-field-cursor) !important;
+  border-color: var(--fs-color-field-border-color) !important;
+  .fs-text {
+    color: var(--fs-color-field-color) !important;
+  }
+}
+
+.fs-color-field .v-icon {
+  background-color: var(--fs-color-field-colorvalue) !important;
+  border-radius: 100%;
   opacity: 1 !important;
 }
 
@@ -9,5 +19,5 @@
 }
 
 .fs-color-field-description {
-    color: var(--fs-color-field-color);
+  color: var(--fs-color-field-color);
 }

package/styles/components/fs_gradient_field.scss

@@ -0,0 +1,16 @@
+
+.fs-gradient-select-field .v-select__selection {
+  width: 100%;
+
+  
+}
+
+.fs-gradient-field-preview {
+  padding: 13px 20px;
+  > span {
+    height: 12px;
+    background: var(--fs-gradient-field-background) !important;
+    width: 100%;
+  }
+}
+

package/styles/components/index.scss

@@ -24,6 +24,7 @@
 @import "fs_fade_out.scss";
 @import "fs_filter_button.scss";
 @import "fs_form.scss";
+@import "fs_gradient_field.scss";
 @import "fs_grid.scss";
 @import "fs_header_button.scss";
 @import "fs_hidden_button.scss";