@dative-gpi/foundation-shared-components 1.0.161 → 1.0.162

package/components/FSInstantPicker.vue

@@ -5,6 +5,7 @@
     :required="$props.required"
     :disabled="$props.disabled"
     :label="$props.label"
+    :maxWidth="$props.maxWidth"
   >
     <FSRow
       align="bottom-center"
@@ -23,15 +24,12 @@
         padding="0 0 2px 0"
         align="center-center"
       >
-        <FSCol
-          width="fill"
-        >
+        <FSCol>
           <FSSlider
             minWidth='min(300px, 90vw)'
             :disabled="$props.disabled"
             :color="ColorEnum.Light"
             :thumbColor="ColorEnum.Primary"
-            :thumbSize="18"
             :trackSize="8"
             thumb-label="always"
             :step="$props.stepTime"
@@ -52,20 +50,14 @@
               </FSSpan>
             </template>
             <template
-              #tick-label="{ tick, index }"
+              #tick-label="{ tick }"
             >
-              <FSRow
-                v-if="index % Math.trunc(ticks.length / maximumTickToShow) === 0 || ticks.length < maximumTickToShow"
-              >
+              <FSRow>
                 <FSText
                   :color="lightColors.dark"
                   font="text-overline"
                 >
-                  {{ intervalTime <= 3600000
-                    ?
-                      epochToShortTimeOnlyFormat(tick.value)
-                    :
-                      epochToDayMonthShortOnly(tick.value)
+                  {{ tickPrecision === TimePrecision.Hours ? epochToShortTimeOnlyFormat(tick.value) : epochToDayMonthShortOnly(tick.value)
                   }}
                 </FSText>
               </FSRow>
@@ -88,18 +80,19 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from "vue";
 
+import { useBreakpoints, useColors } from '@dative-gpi/foundation-shared-components/composables';
 import { useDateFormat, useDateExpression } from "@dative-gpi/foundation-shared-services/composables";
 
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints, useColors } from '@dative-gpi/foundation-shared-components/composables';
+import { computeTicks, TimePrecision } from '@dative-gpi/foundation-shared-components/utils';
 
 import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
 import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
 import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 import FSSlider from '@dative-gpi/foundation-shared-components/components/FSSlider.vue';
+import FSPlayButtons from '@dative-gpi/foundation-shared-components/components/FSPlayButtons.vue';
 import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
 import FSTermField from '@dative-gpi/foundation-shared-components/components/fields/FSTermField.vue';
-import FSPlayButtons from '@dative-gpi/foundation-shared-components/components/FSPlayButtons.vue';
 
 export default defineComponent({
   name: "FSInstantPicker",
@@ -110,7 +103,7 @@ export default defineComponent({
     FSSlider,
     FSTermField,
     FSBaseField,
-    FSPlayButtons
+    FSPlayButtons,
   },
   props: {
     label: {
@@ -119,8 +112,7 @@ export default defineComponent({
     },
     modelValue: {
       type: Number,
-      required: false,
-      default: 0,
+      required: false
     },
     startDate: {
       type: String,
@@ -164,6 +156,11 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 50
+    },
+    maxWidth: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ['update:modelValue', 'update:startDate', 'update:endDate'],
@@ -180,38 +177,26 @@ export default defineComponent({
     const startTimestamp = computed(() => convertTermToEpoch(props.startDate));
     const endTimestamp = computed(() => convertTermToEpoch(props.endDate));
 
-    const intervalTime = computed(() => {
-      const possibleIntervals = [60000, 3600000, 86400000];
-
-      const interval = possibleIntervals.find(interval => {
-        return (endTimestamp.value - startTimestamp.value) / interval < 100;
-      });
-
-      if (interval) {
-        return interval;
-      }
-      return 86400000;
+    const tickCount = computed(() => {
+      if (isExtraSmall.value) { return 3; }
+      if (isMobileSized.value) { return 4; }
+      return 5;
     });
 
-    const ticks = computed(() => {
-      const ticks: number[] = [];
-
-      const firstTick = Math.ceil(startTimestamp.value / intervalTime.value) * intervalTime.value;
-      for (let i = firstTick; i <= endTimestamp.value; i += intervalTime.value) {
-        ticks.push(i);
-      }
-      return ticks;
+    // Pour la précision, on peut rester sur l'heure ou le jour selon la plage
+    const tickPrecision = computed(() => {
+      const rangeDuration = endTimestamp.value - startTimestamp.value;
+      if (rangeDuration <= 86400000 * tickCount.value) { return TimePrecision.Hours; }
+      if (rangeDuration <= 2592000000 * tickCount.value) { return TimePrecision.Days; }
+      return TimePrecision.Months;
     });
 
-    const maximumTickToShow = computed(() => {
-      if (isMobileSized.value) {
-        return 5;
-      }
-      if (isExtraSmall.value) {
-        return 4;
-      }
-      return 6;
-    });
+    const ticks = computed(() => computeTicks({
+      start: startTimestamp.value,
+      end: endTimestamp.value,
+      tickCount: tickCount.value,
+      precision: tickPrecision.value
+    }));
 
     const onPlayingChange = (value: boolean) => {
       playing.value = value;
@@ -225,8 +210,8 @@ export default defineComponent({
       emit('update:modelValue', endTimestamp.value);
     };
 
-    watch(() => [props.startDate, props.endDate], () => {
-      if(props.modelValue < startTimestamp.value || props.modelValue > endTimestamp.value) {
+    watch([() => props.startDate, () => props.endDate, () => props.modelValue], () => {
+      if(!props.modelValue || props.modelValue < startTimestamp.value || props.modelValue > endTimestamp.value) {
         emit('update:modelValue', endTimestamp.value);
       }
     }, { immediate: true });
@@ -236,7 +221,7 @@ export default defineComponent({
         clearInterval(playingInterval.value);
       } else {
         playingInterval.value = setInterval(() => {
-          if(props.modelValue + props.stepTime <= endTimestamp.value) {
+          if(props.modelValue && props.modelValue + props.stepTime <= endTimestamp.value) {
             emit('update:modelValue', props.modelValue + props.stepTime);
           } else {
             emit('update:modelValue', endTimestamp.value);
@@ -251,10 +236,10 @@ export default defineComponent({
       playing,
       ColorEnum,
       lightColors,
-      intervalTime,
       endTimestamp,
+      TimePrecision,
+      tickPrecision,
       startTimestamp,
-      maximumTickToShow,
       epochToISO,
       onPlayingChange,
       onClickForward,

package/components/FSOptionsMenu.vue

@@ -0,0 +1,165 @@
+<template>
+  <FSMenu
+    :location="$props.location"
+    :closeOnContentClick="true"
+    :contained="false"
+    minWidth="0"
+    v-model="modelValue"
+    v-bind="$attrs"
+  >
+    <template
+      #activator="{ props }"
+    >
+      <slot
+        name="activator"
+        v-bind="props"
+      >
+        <FSButton
+          v-bind="props"
+          :icon="$props.icon"
+          :iconSize="$props.iconSize"
+          :color="$props.buttonColor"
+          :variant="$props.buttonVariant"
+        />
+      </slot>
+    </template>
+    <FSCard
+      :maxWidth="$props.maxWidth"
+      :width="$props.width"
+      padding="2px"
+      :border="false"
+      :elevation="true"
+      align="center-center"
+    >
+      <slot
+        name="content"
+      >
+        <FSCol
+          gap="0px"
+        >
+          <FSFadeOut
+            :scrollOutside="false"
+            maxHeight="80dvh"
+          >
+            <FSClickable
+              v-for="(item, index) in $props.items"
+              width="100%"
+              padding="8px"
+              height="40px"
+              :key="index"
+              :border="false"
+              @click="onClickItem(item)"
+            >
+              <slot
+                name="item"
+                v-bind="{ item, index }"
+              >
+                <FSRow
+                  align="center-left"
+                >
+                  <FSIcon
+                    v-if="item.icon"
+                    :icon="item.icon"
+                  />
+                  <FSText
+                    font="text-body"
+                  >
+                    {{ item.label }}
+                  </FSText>
+                </FSRow>
+              </slot>
+            </FSClickable>
+          </FSFadeOut>
+        </FSCol>
+      </slot>
+    </FSCard>
+  </FSMenu>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, type PropType } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import { ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
+
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
+import FSMenu from '@dative-gpi/foundation-shared-components/components/FSMenu.vue';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+import FSButton from '@dative-gpi/foundation-shared-components/components/FSButton.vue';
+import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
+
+export default defineComponent({
+  name: "FSInformationsMenu",
+  components: {
+    FSMenu,
+    FSCard,
+    FSRow,
+    FSText,
+    FSButton,
+    FSCol,
+    FSIcon,
+    FSClickable
+  },
+  props: {
+    items: {
+      type: Array as PropType<{label: string, icon?: string, onClick: () => void, closeOnContentClick?: boolean}[]>,
+      default: () => []
+    },
+    location: {
+      type: String,
+      default: "bottom"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: null
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: "90dvw"
+    },
+    icon: {
+      type: String,
+      default: "mdi-dots-horizontal"
+    },
+    iconSize: {
+      type: String,
+      default: "18px"
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      default: ColorEnum.Light
+    },
+    buttonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "icon"
+    },
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const modelValue = ref(false);
+
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+
+    const onClickItem = (item: { onClick: () => void, closeOnContentClick?: boolean }) => {
+      item.onClick();
+      if (item.closeOnContentClick !== false) {
+        modelValue.value = false;
+      }
+    };
+
+    return {
+      ColorEnum,
+      modelValue,
+      lightColors,
+      onClickItem
+    };
+  }
+});
+</script>

package/components/FSRangePicker.vue

@@ -0,0 +1,261 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :disabled="$props.disabled"
+    :label="$props.label"
+    :maxWidth="$props.maxWidth"
+  >
+    <FSRow
+      align="bottom-center"
+      gap="32px"
+    >
+      <FSTermField
+        width="430px"
+        :label="$tr('ui.instant-picker.analyze-period', 'Analyze Period')"
+        :startDate="$props.startDate"
+        :endDate="$props.endDate"
+        :disabled="$props.disabled"
+        @update:startDate="$emit('update:startDate', $event)"
+        @update:endDate="$emit('update:endDate', $event)"
+      />
+      <FSRow
+        padding="0 0 2px 0"
+        align="center-center"
+      >
+        <FSCol>
+          <FSRangeSlider
+            minWidth='min(300px, 90vw)'
+            :disabled="$props.disabled"
+            :color="ColorEnum.Light"
+            :thumbColor="ColorEnum.Primary"
+            :trackFillColor="ColorEnum.Primary"
+            :trackSize="8"
+            thumb-label="always"
+            :step="$props.stepTime"
+            :min="startTimestamp"
+            :max="endTimestamp"
+            :ticks="ticks"
+            showTicks="always"
+            :modelValue="$props.modelValue"
+            @update:modelValue="$emit('update:modelValue', $event)"
+          >
+            <template
+              #thumb-label="{ modelValue }"
+            >
+              <FSSpan
+                font="text-overline"
+              >
+                {{ epochToMonthShortTimeFormat(modelValue) }}
+              </FSSpan>
+            </template>
+            <template
+              #tick-label="{ tick }"
+            >
+              <FSRow>
+                <FSText
+                  :color="lightColors.dark"
+                  font="text-overline"
+                >
+                  {{ tickPrecision === TimePrecision.Hours ? epochToShortTimeOnlyFormat(tick.value) : epochToDayMonthShortOnly(tick.value) }}
+                </FSText>
+              </FSRow>
+            </template>
+          </FSRangeSlider>
+        </FSCol>
+        <FSPlayButtons
+          v-if="$props.playable"
+          :disabled="$props.disabled"
+          :modelValue="playing"
+          @click:backward="onClickBackward"
+          @click:forward="onClickForward"
+          @update:modelValue="onPlayingChange"
+        />
+      </FSRow>
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
+
+import { useBreakpoints, useColors } from '@dative-gpi/foundation-shared-components/composables';
+import { useDateFormat, useDateExpression } from "@dative-gpi/foundation-shared-services/composables";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { computeTicks, TimePrecision } from '@dative-gpi/foundation-shared-components/utils';
+
+import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+import FSPlayButtons from '@dative-gpi/foundation-shared-components/components/FSPlayButtons.vue';
+import FSRangeSlider from '@dative-gpi/foundation-shared-components/components/FSRangeSlider.vue';
+import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
+import FSTermField from '@dative-gpi/foundation-shared-components/components/fields/FSTermField.vue';
+
+export default defineComponent({
+  name: "FSRangePicker",
+  components: {
+    FSCol,
+    FSSpan,
+    FSText,
+    FSTermField,
+    FSBaseField,
+    FSRangeSlider,
+    FSPlayButtons,
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+    },
+    mode: {
+      type: String as () => 'single' | 'range',
+      required: false,
+      default: 'single'
+    },
+    modelValue: {
+      type: Object as () => [number, number],
+      required: true
+    },
+    startDate: {
+      type: String,
+      required: true
+    },
+    endDate: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    playable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    stepTime: {
+      type: Number,
+      required: false,
+      default: 60000
+    },
+    playingStepDuration: {
+      type: Number,
+      required: false,
+      default: 50
+    },
+    maxWidth: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    }
+  },
+  emits: ['update:modelValue', 'update:startDate', 'update:endDate'],
+  setup(props, { emit }) {
+    const { epochToShortTimeOnlyFormat, epochToShortDateFormat, epochToDayMonthShortOnly, epochToISO, epochToMonthShortTimeFormat } = useDateFormat();
+    const { convert : convertTermToEpoch } = useDateExpression();
+    const { isMobileSized, isExtraSmall } = useBreakpoints();
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+    const playing = ref(false);
+    const playingInterval = ref();
+
+    const startTimestamp = computed(() => convertTermToEpoch(props.startDate));
+    const endTimestamp = computed(() => convertTermToEpoch(props.endDate));
+
+    const tickCount = computed(() => {
+      if (isExtraSmall.value) { return 3; }
+      if (isMobileSized.value) { return 4; }
+      return 5;
+    });
+
+    const tickPrecision = computed(() => {
+      const rangeDuration = endTimestamp.value - startTimestamp.value;
+      if (rangeDuration <= 86400000 * tickCount.value) { return TimePrecision.Hours; }
+      if (rangeDuration <= 2592000000 * tickCount.value) { return TimePrecision.Days; }
+      return TimePrecision.Months;
+    });
+
+    // Génération des ticks via la fonction utilitaire
+    const ticks = computed(() => computeTicks({
+      start: startTimestamp.value,
+      end: endTimestamp.value,
+      tickCount: tickCount.value,
+      precision: tickPrecision.value
+    }));
+
+    const onPlayingChange = (value: boolean) => {
+      playing.value = value;
+    };
+
+    const onClickBackward = () => {
+      const modelValueDuration = props.modelValue[1] - props.modelValue[0];
+      emit('update:modelValue', [startTimestamp.value, startTimestamp.value + modelValueDuration]);
+    };
+
+    const onClickForward = () => {
+      const modelValueDuration = props.modelValue[1] - props.modelValue[0];
+      emit('update:modelValue', [endTimestamp.value - modelValueDuration, endTimestamp.value]);
+    };
+
+    watch([() => props.startDate, () => props.endDate, () => props.modelValue], () => {
+      if((props.modelValue[0] < startTimestamp.value || props.modelValue[1] > endTimestamp.value)) {
+        emit('update:modelValue', [startTimestamp.value, endTimestamp.value]);
+      }
+    }, { immediate: true });
+
+    watch(playing, (value) => {
+      if(!value && playingInterval.value) {
+        clearInterval(playingInterval.value);
+        return;
+      }
+
+      playingInterval.value = setInterval(() => {
+        if(props.modelValue[0] + props.stepTime <= endTimestamp.value && props.modelValue[1] + props.stepTime <= endTimestamp.value) {
+          emit('update:modelValue', [props.modelValue[0] + props.stepTime, props.modelValue[1] + props.stepTime]);
+        } else {
+          playing.value = false;
+        }
+      }, props.playingStepDuration);
+    });
+
+    return {
+      ticks,
+      playing,
+      ColorEnum,
+      lightColors,
+      endTimestamp,
+      TimePrecision,
+      tickPrecision,
+      startTimestamp,
+      epochToISO,
+      onPlayingChange,
+      onClickForward,
+      onClickBackward,
+      epochToShortDateFormat,
+      epochToShortTimeOnlyFormat,
+      epochToDayMonthShortOnly,
+      epochToMonthShortTimeFormat
+    };
+  },
+});
+</script>

package/components/FSRangeSlider.vue

@@ -0,0 +1,84 @@
+<template>
+  <FSBaseField
+    :label="$props.label"
+    :description="$props.description"
+    :required="$props.required"
+    :disabled="$props.disabled"
+  >
+    <FSRow>
+      <v-range-slider
+        hide-details
+        width="100%"
+        :disabled="$props.disabled"
+        :ripple="false"
+        :color="$props.color"
+        :trackSize="6"
+        :elevation="0"
+        :tickSize="4"
+        :modelValue="$props.modelValue ?? undefined"
+        @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>
+      </v-range-slider>
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
+
+export default defineComponent({
+  name: "FSRangeSlider",
+  components: {
+    FSBaseField,
+    FSRow
+  },
+  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: Object as PropType<[number, number] | null>,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"]
+});
+</script>

package/components/FSSlider.vue

@@ -1,85 +1,55 @@
 <template>
-  <FSCol>
-    <slot
-      name="label"
-    >
-      <FSRow
-        :wrap="false"
+  <FSBaseField
+    :label="$props.label"
+    :description="$props.description"
+    :required="$props.required"
+    :disabled="$props.disabled"
+    :style="style"
+  >
+    <FSRow>
+      <v-slider
+        hide-details
+        class="fs-slider"
+        width="100%"
+        :color="$props.color"
+        :disabled="$props.disabled"
+        :ripple="false"
+        :trackSize="6"
+        :elevation="0"
+        :tickSize="4"
+        :modelValue="$props.modelValue ?? undefined"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        v-bind="$attrs"
       >
-        <FSSpan
-          v-if="$props.label"
-          class="fs-slider-label"
-          font="text-overline"
-          :style="style"
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
         >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          style="margin-left: -8px;"
-          class="fs-slider-label"
-          font="text-overline"
-          :ellipsis="false"
-          :style="style"
-        >
-          *
-        </FSSpan>
-      </FSRow>
-    </slot>
-    <v-slider
-      class="fs-slider"
-      hide-details
-      :disabled="$props.disabled"
-      :ripple="false"
-      :style="style"
-      :elevation="0"
-      :tickSize="4"
-      :modelValue="$props.modelValue ?? undefined"
-      @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>
-    </v-slider>
-    <slot
-      name="description"
-    >
-      <FSSpan
-        v-if="$props.description"
-        class="fs-slider-description"
-        font="text-overline"
-        :lineClamp="2"
-        :style="style"
-      >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </v-slider>
+    </FSRow>
+  </FSBaseField>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { useColors } from '@dative-gpi/foundation-shared-components/composables';
+
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSSpan from "./FSSpan.vue";
-import FSCol from "./FSCol.vue";
-import FSRow from "./FSRow.vue";
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
 
 export default defineComponent({
   name: "FSSlider",
   components: {
-    FSSpan,
-    FSCol,
-    FSRow
+    FSRow,
+    FSBaseField
   },
   props: {
     label: {
@@ -118,26 +88,20 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
       if (props.disabled) {
         return {
-          "--fs-slider-cursor"     : "default",
-          "--fs-slider-track-color": lights.base,
-          "--fs-slider-thumb-color": lights.base,
-          "--fs-slider-color"      : lights.dark
+          "--fs-slider-thumb-color": lights.base
         };
       }
       return {
-        "--fs-slider-cursor"     : "pointer",
-        "--fs-slider-track-color": colors.value.light,
-        "--fs-slider-thumb-color": colors.value.base,
-        "--fs-slider-color"      : darks.base
+        "--fs-slider-thumb-color": colors.value.base
       };
     });
 
     return {
+      colors,
       style
     };
   } 

package/components/lists/FSDataTableUI.vue

@@ -17,19 +17,24 @@
         align="top-left"
       >
         <FSRow
-          v-if="$props.showSearch || filterableHeaders.length > 0 || $slots['append-toolbar']"
+          v-if="$props.showSearch || $slots['toolbar']"
           align="bottom-left"
         >
-          <FSSearchField
-            :hideHeader="true"
-            v-model="innerSearch"
-          />
-          <FSButton
-            v-if="filterableHeaders.length > 0"
-            prependIcon="mdi-filter-variant"
-            :variant="innerShowFilters ? 'full' : 'standard'"
-            @click="innerShowFilters = !innerShowFilters"
-          />
+          <template
+            v-if="$props.showSearch"
+          >
+            <FSSearchField
+              v-if="$props.showSearch"
+              :hideHeader="true"
+              v-model="innerSearch"
+            />
+            <FSButton
+              v-if="filterableHeaders.length > 0"
+              prependIcon="mdi-filter-variant"
+              :variant="innerShowFilters ? 'full' : 'standard'"
+              @click="innerShowFilters = !innerShowFilters"
+            />
+          </template>
           <slot
             v-if="!isMobileSized"
             name="toolbar"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.161",
+  "version": "1.0.162",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.161",
-    "@dative-gpi/foundation-shared-services": "1.0.161"
+    "@dative-gpi/foundation-shared-domain": "1.0.162",
+    "@dative-gpi/foundation-shared-services": "1.0.162"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "1e826f1ef83221e21bfb2da0688ff3cf4b1ed94b"
+  "gitHead": "3b098f1cccbf68b3917a8f7d2f627e3e29cde9b4"
 }

package/styles/components/fs_slider.scss

@@ -1,50 +1,10 @@
 .fs-slider {
-    padding: 0px !important;
-    width: calc(100% - 16px);
-
-    & .v-slider__container {
-        cursor: var(--fs-slider-cursor);
-        margin-left: 8px;
-        margin-right: 8px;
-        opacity: 1 !important;
-    }
-
-    & .v-slider-track__background {
-        background-color: var(--fs-slider-track-color);
-        height: 6px !important;
-        opacity: 1;
-    }
-
     & .v-slider-track__fill {
         display: none;
     }
 
     & .v-slider-track__tick {
         background-color: var(--fs-slider-thumb-color);
-        border-radius: 50%;
     }
 
-    & .v-slider-thumb {
-        color: var(--fs-slider-thumb-color);
-
-        &__surface:before {
-            display: none !important;
-        }
-
-        &__surface:after {
-            display: none !important;
-        }
-
-        &__ripple {
-            display: none !important;
-        }
-    }
-}
-
-.fs-slider-label {
-    color: var(--fs-slider-color);
-}
-
-.fs-slider-description {
-    color: var(--fs-slider-color);
 }

package/utils/index.ts

@@ -9,6 +9,7 @@ export * from "./leafletMarkers"
 export * from "./levenshtein";
 export * from "./lexical";
 export * from "./operations";
+export * from "./picker";
 export * from "./sort";
 export * from "./statuses";
 export * from "./time";

package/utils/picker.ts

@@ -0,0 +1,40 @@
+export enum TimePrecision {
+  Hours = 1,
+  Days = 2,
+  Months = 3
+}
+
+/**
+ *  Compute ticks for a time range based on the specified precision.
+ */
+export const computeTicks = ({ start, end, tickCount, precision }: { start: number, end: number, tickCount: number, precision: TimePrecision }): number[] => {
+  const ticks: number[] = [];
+  const range = end - start;
+
+  if (precision === TimePrecision.Hours) {
+    // Tick toutes les X heures, aligné sur l'heure pleine
+    const step = Math.ceil(range / tickCount / 3600000) * 3600000;
+    const alignedStart = Math.ceil(start / 3600000) * 3600000;
+    for (let i = 0; i < tickCount; i++) {
+      const tick = alignedStart + i * step;
+      if (tick < end) { ticks.push(tick); }
+    }
+  } else if (precision === TimePrecision.Days) {
+    // Tick tous les X jours, aligné sur minuit
+    const step = Math.ceil(range / tickCount / 86400000) * 86400000;
+    const date = new Date(start);
+    date.setHours(0, 0, 0, 0);
+    const alignedStart = date.getTime() + (date.getTime() < start ? step : 0);
+    for (let i = 0; i < tickCount; i++) {
+      const tick = alignedStart + i * step;
+      if (tick < end) { ticks.push(tick); }
+    }
+  } else {
+    // Tick tous les X mois (approximation linéaire)
+    const interval = range / tickCount;
+    for (let i = 0; i < tickCount; i++) {
+      ticks.push(start + i * interval);
+    }
+  }
+  return ticks;
+}