@dative-gpi/foundation-shared-components 1.0.159-sankey → 1.0.159-tes

package/components/FSInstantPicker.vue

@@ -97,9 +97,9 @@ 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 +110,7 @@ export default defineComponent({
     FSSlider,
     FSTermField,
     FSBaseField,
-    FSPlayButtons,
+    FSPlayButtons
   },
   props: {
     label: {
@@ -119,7 +119,8 @@ export default defineComponent({
     },
     modelValue: {
       type: Number,
-      required: false
+      required: false,
+      default: 0,
     },
     startDate: {
       type: String,
@@ -230,12 +231,6 @@ export default defineComponent({
       }
     }, { immediate: true });
 
-    watch(() => props.modelValue, (value) => {
-      if(!value) {
-        emit('update:modelValue', endTimestamp.value);
-      }
-    }, { immediate: true });
-
     watch(playing, (value) => {
       if(!value && playingInterval.value) {
         clearInterval(playingInterval.value);

package/components/FSTagGroup.vue

@@ -15,7 +15,7 @@
     <slot />
   </FSWrapGroup>
   <FSSlideGroup
-    v-if="$props.variant === 'slide'"
+    v-else-if="$props.variant === 'slide'"
     v-bind="$attrs"
   >
     <FSTag
@@ -36,12 +36,14 @@ import { defineComponent, type PropType } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSSlideGroup from '@dative-gpi/foundation-shared-components/components/FSSlideGroup.vue';
 import FSWrapGroup from "./FSWrapGroup.vue";
 import FSTag from "./FSTag.vue";
 
 export default defineComponent({
   name: "FSTagGroup",
   components: {
+    FSSlideGroup,
     FSWrapGroup,
     FSTag
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.159-sankey",
+  "version": "1.0.159-tes",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.159-sankey",
-    "@dative-gpi/foundation-shared-services": "1.0.159-sankey"
+    "@dative-gpi/foundation-shared-domain": "1.0.159-tes",
+    "@dative-gpi/foundation-shared-services": "1.0.159-tes"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "2e082499c169cb28d4480d2fb76993f1240d9c87"
+  "gitHead": "57055768c17ce0eac0db91d72cef3992d542e189"
 }

package/components/FSOptionsMenu.vue

@@ -1,165 +0,0 @@
-<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

@@ -1,318 +0,0 @@
-<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
-          width="fill"
-        >
-          <FSRangeSlider
-            minWidth='min(300px, 90vw)'
-            :disabled="$props.disabled"
-            :color="ColorEnum.Dark"
-            :thumbColor="ColorEnum.Primary"
-            :trackFillColor="ColorEnum.Primary"
-            :trackSize="8"
-            thumb-label="always"
-            :step="$props.stepTime"
-            :min="startTimestamp"
-            :max="endTimestamp"
-            :ticks="ticks"
-            showTicks="always"
-            :tick-size="4"
-            :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"
-                >
-                  {{ ticksPrecision === 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 { 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 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';
-
-enum TimePrecision {
-  Hours = 1,
-  Days = 2,
-  Months = 3
-}
-
-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 tickCountToShow = computed(() => {
-      if (isExtraSmall.value) {
-        return 3;
-      }
-      if (isMobileSized.value) {
-        return 4;
-      }
-      return 5;
-    });
-
-    const ticksPrecision = computed(() => {
-      const rangeDuration = endTimestamp.value - startTimestamp.value;
-      if (rangeDuration <= 86400000 * tickCountToShow.value) {
-        return TimePrecision.Hours;
-      }
-      if (rangeDuration <= 2592000000 * tickCountToShow.value) {
-        return TimePrecision.Days;
-      }
-      return TimePrecision.Months;
-    });
-
-    const ticks = computed(() => {
-      const ticks: number[] = [];
-      const count = tickCountToShow.value;
-      const precision = ticksPrecision.value;
-
-      const start = startTimestamp.value;
-      const end = endTimestamp.value;
-      const range = end - start;
-
-      let step: number;
-
-      if (precision === TimePrecision.Hours) {
-        step = Math.ceil(range / count / 3600000) * 3600000;
-        const alignedStart = Math.ceil(start / 3600000) * 3600000;
-
-        for (let i = 0; i < count; i++) {
-          const tick = alignedStart + i * step;
-          if (tick < end) {
-            ticks.push(tick);
-          }
-        }
-
-      } else if (precision === TimePrecision.Days) {
-        step = Math.ceil(range / count / 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 < count; i++) {
-          const tick = alignedStart + i * step;
-          if (tick < end) {
-            ticks.push(tick);
-          }
-        }
-
-      } else {
-        const interval = range / count;
-        for (let i = 0; i < count; i++) {
-          ticks.push(start + i * interval);
-        }
-      }
-
-      return ticks;
-    });
-
-
-    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,
-      startTimestamp,
-      ticksPrecision,
-      epochToISO,
-      onPlayingChange,
-      onClickForward,
-      onClickBackward,
-      epochToShortDateFormat,
-      epochToShortTimeOnlyFormat,
-      epochToDayMonthShortOnly,
-      epochToMonthShortTimeFormat
-    };
-  },
-});
-</script>

package/components/FSRangeSlider.vue

@@ -1,116 +0,0 @@
-<template>
-  <FSBaseField
-    :label="$props.label"
-    :description="$props.description"
-    :required="$props.required"
-    :disabled="$props.disabled"
-    :style="style"
-  >
-    <FSRow>
-      <v-range-slider
-        class="fs-range-slider"
-        hide-details
-        width="100%"
-        :disabled="$props.disabled"
-        :ripple="false"
-        :color="$props.color"
-        :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-range-slider>
-    </FSRow>
-  </FSBaseField>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
-
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-
-import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
-
-export default defineComponent({
-  name: "FSRangeSlider",
-  components: {
-    FSBaseField
-  },
-  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"],
-  setup(props) {
-    const { getColors } = useColors();
-
-    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-range-slider-cursor"     : "default",
-          "--fs-range-slider-track-color": lights.base,
-          "--fs-range-slider-thumb-color": lights.dark,
-          "--fs-range-slider-fill-color" : lights.dark,
-          "--fs-range-slider-color"      : lights.dark
-        };
-      }
-      console.log(colors.value);
-      return {
-        "--fs-range-slider-cursor"     : "pointer",
-        "--fs-range-slider-track-color": colors.value.light,
-        "--fs-range-slider-fill-color" : colors.value.base,
-        "--fs-range-slider-thumb-color": colors.value.base,
-        "--fs-range-slider-color"      : darks.base
-      };
-    });
-
-    return {
-      style
-    };
-  } 
-});
-</script>