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

package/components/fields/FSDateField.vue

@@ -152,7 +152,7 @@ import _ from "lodash";
 
 import { useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSDialogMenu from "../FSDialogMenu.vue";
 import FSTextField from "./FSTextField.vue";
@@ -215,7 +215,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongDateFormat } = useAppTimeZone();
+    const { epochToLongDateFormat } = useDateFormat();
     const { validateOn, getMessages} = useRules();
     const { isExtraSmall } = useBreakpoints();
 

package/components/fields/FSDateRangeField.vue

@@ -62,7 +62,7 @@ import { computed, defineComponent, type PropType, ref, watch } from "vue";
 import _ from "lodash";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSDialogSubmit from "../FSDialogSubmit.vue";
@@ -123,7 +123,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { validateOn, getMessages } = useRules();
-    const { epochToShortDateFormat } = useAppTimeZone();
+    const { epochToShortDateFormat } = useDateFormat();
 
     const dialog = ref(false);
     

package/components/fields/FSDateTimeField.vue

@@ -197,7 +197,7 @@ import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSDialogMenu from "../FSDialogMenu.vue";
 import FSTextField from "./FSTextField.vue";
@@ -264,7 +264,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongTimeFormat, getOffsetUser } = useAppTimeZone();
+    const { getUserOffset } = useAppTimeZone();
+    const { epochToLongTimeFormat } = useDateFormat();
     const { validateOn, getMessages } = useRules();
     const { isExtraSmall } = useBreakpoints();
 
@@ -300,7 +301,7 @@ export default defineComponent({
       if (props.modelValue) {
         // FSClock just gives two numbers without consideration for the time zone
         // We must adjust the time to the user's time zone
-        innerTime.value = Math.floor((props.modelValue + getOffsetUser()) % (24 * 60 * 60 * 1000));
+        innerTime.value = Math.floor((props.modelValue + getUserOffset()) % (24 * 60 * 60 * 1000));
         innerDate.value = props.modelValue - innerTime.value;
       }
       else {

package/components/fields/FSDateTimeRangeField.vue

@@ -79,7 +79,7 @@
 import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSDialogSubmit from "../FSDialogSubmit.vue";
@@ -115,7 +115,7 @@ export default defineComponent({
     modelValue: {
       type: Array as PropType<number[] | null>,
       required: false,
-      default: null
+      default: () => null
     },
     color: {
       type: String as PropType<ColorBase>,
@@ -145,7 +145,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToShortTimeFormat, getOffsetUser } = useAppTimeZone();
+    const { getUserOffset } = useAppTimeZone();
+    const { epochToShortTimeFormat } = useDateFormat();
     const { validateOn, getMessages } = useRules();
 
     const dialog = ref(false);
@@ -206,13 +207,13 @@ export default defineComponent({
             break;
           }
           case 1: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getOffsetUser()) % (24 * 60 * 60 * 1000));
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset()) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
             break;
           }
           default: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getOffsetUser()) % (24 * 60 * 60 * 1000));
-            innerTimeRight.value = Math.floor((props.modelValue[1] + getOffsetUser()) % (24 * 60 * 60 * 1000));
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset()) % (24 * 60 * 60 * 1000));
+            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffset()) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
             break;
           }

package/components/fields/FSGradientField.vue

@@ -21,44 +21,25 @@
         />
       </FSRow>
       <FSSelectField
-        class="fs-gradient-select-field"
-        :clearable="false"
+        class="fs-gradient-field-select"
         :editable="$props.editable"
+        :clearable="false"
         :items="items"
-        :modelValue="JSON.stringify($props.modelValue)"
-        @update:modelValue="$emit('update:modelValue', presetGradients[$event])"
+        modelValue="custom"
+        @update:modelValue="$emit('update:modelValue', allGradients[$event])"
       >
         <template
-          v-slot:selection="{ item }"
+          #item-prepend="{ item }"
         >
           <FSRow
             class="fs-gradient-field-preview"
-            height="fill"
+            align="center-center"
+            height="12px"
             width="100%"
-            :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(JSON.parse(item.value))})` }"
-          >
-            <span />
-          </FSRow>
-        </template>
-        <template
-          v-slot:item="{ item, props }"
-        >
-          <v-list-item
-            v-bind="props"
-          >
-            <template
-              #title
-            >
-              <FSRow
-                class="fs-gradient-field-preview"
-                height="fill"
-                width="100%"
-                :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(presetGradients[item.value])})` }"
-              >
-                <span />
-              </FSRow>
-            </template>
-          </v-list-item>
+            :style="{
+              '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(allGradients[item.id])})`
+            }"
+          />
         </template>
       </FSSelectField>
     </FSBaseField>
@@ -66,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import { type PropType, defineComponent } from "vue";
+import { type PropType, defineComponent, computed } from "vue";
 
 import { groupedGradients } from "../../utils";
 import { useColors } from "../../composables";
@@ -127,14 +108,27 @@ export default defineComponent({
     const { getColors } = useColors();
 
     const presetGradients = groupedGradients[props.colorCount];
-    const items = Object.keys(presetGradients)
+
+    const allGradients = computed<Record<string, string[]>>(() => {
+      return {
+        'custom': [
+          ...props.modelValue
+        ],
+        ...presetGradients
+      }
+    });
+
+    const items = Object.keys(allGradients.value).map((key) => ({
+      id: key,
+      label: null
+    }));
 
     const encodeGradientCssColors = (colors: string[]) => {
       return colors.map((color) => getColors(color).base).join(", ");
     };
 
     return {
-      presetGradients,
+      allGradients,
       items,
       encodeGradientCssColors
     };

package/components/fields/FSMagicField.vue

@@ -62,7 +62,7 @@ import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import { useMagicFieldProvider } from "../../composables";
 import { MagicFieldType } from "../../models/magicFields";
@@ -105,7 +105,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToShortTimeFormat } = useAppTimeZone();
+    const { epochToShortTimeFormat } = useDateFormat();
     const { $tr } = useTranslationsProvider();
     const { get } = useMagicFieldProvider();