@dative-gpi/foundation-shared-components 1.0.128-mountain-alpha → 1.0.128-remove-deprecated-scenario

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.128-mountain-alpha",
+  "version": "1.0.128-remove-deprecated-scenario",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.128-mountain-alpha",
-    "@dative-gpi/foundation-shared-services": "1.0.128-mountain-alpha"
+    "@dative-gpi/foundation-shared-domain": "1.0.128-remove-deprecated-scenario",
+    "@dative-gpi/foundation-shared-services": "1.0.128-remove-deprecated-scenario"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "37cef6036141cc79839c97f8ffc124c024e5486a"
+  "gitHead": "c130943e7cb96800dbd98069299ec689da3c9866"
 }

package/styles/components/index.scss

@@ -47,7 +47,6 @@
 @import "fs_option_group.scss";
 @import "fs_pagination.scss";
 @import "fs_password_field.scss";
-@import "fs_progress_bar.scss";
 @import "fs_radio.scss";
 @import "fs_rich_text_field.scss";
 @import "fs_row.scss";

package/components/FSInstantPicker.vue

@@ -1,266 +0,0 @@
-<template>
-  <FSBaseField
-    :description="$props.description"
-    :hideHeader="$props.hideHeader"
-    :required="$props.required"
-    :editable="$props.editable"
-    :label="$props.label"
-  >
-    <FSRow
-      align="bottom-center"
-      gap="32px"
-    >
-      <FSTermField
-        width="430px"
-        :label="$tr('ui.instant-picker.analyze-period', 'Analyze Period')"
-        :startDate="$props.startDate"
-        :endDate="$props.endDate"
-        @update:startDate="$emit('update:startDate', $event)"
-        @update:endDate="$emit('update:endDate', $event)"
-      />
-      <FSRow
-        padding="0 0 2px 0"
-        align="center-center"
-      >
-        <FSCol
-          width="fill"
-        >
-          <FSSlider
-            minWidth='min(300px, 90vw)'
-            :color="ColorEnum.Light"
-            :thumbColor="ColorEnum.Primary"
-            :thumbSize="18"
-            :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, index }"
-            >
-              <FSRow
-                v-if="index % Math.trunc(ticks.length / maximumTickToShow) === 0 || ticks.length < maximumTickToShow"
-              >
-                <FSText
-                  :color="lightColors.dark"
-                  font="text-overline"
-                >
-                  {{ intervalTime <= 3600000
-                    ?
-                      epochToShortTimeOnlyFormat(tick.value)
-                    :
-                      epochToDayMonthShortOnly(tick.value)
-                  }}
-                </FSText>
-              </FSRow>
-            </template>
-          </FSSlider>
-        </FSCol>
-        <FSPlayButtons
-          v-if="$props.playable"
-          :modelValue="playing"
-          @click:backward="onClickBackward"
-          @click:forward="onClickForward"
-          @update:modelValue="onPlayingChange"
-        />
-      </FSRow>
-    </FSRow>
-  </FSBaseField>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref, watch } from "vue";
-
-import { useDateFormat, useTermFieldDate } 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 FSSlider from '@dative-gpi/foundation-shared-components/components/FSSlider.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",
-  components: {
-    FSCol,
-    FSSpan,
-    FSText,
-    FSSlider,
-    FSTermField,
-    FSBaseField,
-    FSPlayButtons
-  },
-  props: {
-    label: {
-      type: String,
-      required: false,
-    },
-    modelValue: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    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
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    playable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    stepTime: {
-      type: Number,
-      required: false,
-      default: 60000
-    },
-    playingStepDuration: {
-      type: Number,
-      required: false,
-      default: 50
-    }
-  },
-  emits: ['update:modelValue', 'update:startDate', 'update:endDate'],
-  setup(props, { emit }) {
-    const { epochToShortTimeOnlyFormat, epochToShortDateFormat, epochToDayMonthShortOnly, epochToISO, epochToMonthShortTimeFormat } = useDateFormat();
-    const { convert : convertTermToEpoch } = useTermFieldDate();
-    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 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 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;
-    });
-
-    const maximumTickToShow = computed(() => {
-      if (isMobileSized.value) {
-        return 5;
-      }
-      if (isExtraSmall.value) {
-        return 4;
-      }
-      return 6;
-    });
-
-    const onPlayingChange = (value: boolean) => {
-      playing.value = value;
-    };
-
-    const onClickBackward = () => {
-      emit('update:modelValue', startTimestamp.value);
-    };
-
-    const onClickForward = () => {
-      emit('update:modelValue', endTimestamp.value);
-    };
-
-    watch(() => [props.startDate, props.endDate], () => {
-      if(props.modelValue < startTimestamp.value || props.modelValue > endTimestamp.value) {
-        emit('update:modelValue', endTimestamp.value);
-      }
-    }, { immediate: true });
-
-    watch(playing, (value) => {
-      if(!value && playingInterval.value) {
-        clearInterval(playingInterval.value);
-      } else {
-        playingInterval.value = setInterval(() => {
-          if(props.modelValue + props.stepTime <= endTimestamp.value) {
-            emit('update:modelValue', props.modelValue + props.stepTime);
-          } else {
-            emit('update:modelValue', endTimestamp.value);
-            playing.value = false;
-          }
-        }, props.playingStepDuration);
-      }
-    });
-
-    return {
-      ticks,
-      playing,
-      ColorEnum,
-      lightColors,
-      intervalTime,
-      endTimestamp,
-      startTimestamp,
-      maximumTickToShow,
-      epochToISO,
-      onPlayingChange,
-      onClickForward,
-      onClickBackward,
-      epochToShortDateFormat,
-      epochToShortTimeOnlyFormat,
-      epochToDayMonthShortOnly,
-      epochToMonthShortTimeFormat
-    };
-  },
-});
-</script>

package/components/FSPlayButtons.vue

@@ -1,72 +0,0 @@
-<template>
-  <FSRow
-    width="hug"
-    gap="4px"
-  >
-    <FSClickable
-      variant="full"
-      :color="ColorEnum.Light"
-      borderRadius="50%"
-      padding="2px"
-      @click="$emit('click:backward')"
-    >
-      <FSIcon
-        size="18px"
-        icon="mdi-skip-backward"
-      />
-    </FSClickable>
-    <FSClickable
-      variant="full"
-      :color="ColorEnum.Light"
-      borderRadius="50%"
-      padding="2px"
-      @click="$emit('update:modelValue', !$props.modelValue)"
-    >
-      <FSIcon
-        size="18px"
-        :icon="$props.modelValue ? 'mdi-pause' : 'mdi-play'"
-      />
-    </FSClickable>
-    <FSClickable
-      variant="full"
-      :color="ColorEnum.Light"
-      borderRadius="50%"
-      padding="2px"
-      @click="$emit('click:forward')"
-    >
-      <FSIcon
-        size="18px"
-        icon="mdi-skip-forward"
-      />
-    </FSClickable>
-  </FSRow>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
-
-import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
-import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
-
-export default defineComponent({
-  name: "FSPlayButtons",
-  components: {
-    FSClickable,
-    FSIcon
-  },
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: true,
-    }
-  },
-  emits: ['update:modelValue', 'click:backward', 'click:forward'],
-  setup() {
-    return {
-      ColorEnum
-    };
-  },
-});
-</script>

package/components/FSProgressBar.vue

@@ -1,90 +0,0 @@
-<template>
-  <FSRow
-    align="center-center"
-    :style="style"
-    gap="8px"
-  >
-    <div
-      class="fs-progress-bar-gradient"
-    >
-      <div></div>
-    </div>
-    <FSText
-      v-if="$props.showValue"
-      font="text-button"
-    >
-      {{ fixedRate }}%
-    </FSText>
-  </FSRow>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type StyleValue } from "vue";
-
-import { useColors } from '@dative-gpi/foundation-shared-components/composables';
-
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-
-export default defineComponent({
-  name: "FSProgressBar",
-  props: {
-    modelValue: {
-      type: Number,
-      required: true
-    },
-    startColor: {
-      type: String,
-      required: false
-    },
-    endColor: {
-      type: String,
-      required: false
-    },
-    showValue: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  components: {
-  },
-  setup(props) {
-    const { getColors } = useColors();
-
-    const lightColors = getColors(ColorEnum.Light);
-    const successColors = getColors(ColorEnum.Success);
-    const errorColors = getColors(ColorEnum.Error);
- 
-    const fixedRate = computed(() => {
-      return (props.modelValue * 100).toFixed(0);
-    });
-
-    const relativeWidth = computed(() => {
-      return props.modelValue ? 100 / props.modelValue : 0;
-    });
-    
-    const startColor = computed(() => {
-      return props.startColor ?? errorColors.base;
-    });
-
-    const endColor = computed(() => {
-      return props.endColor ?? successColors.base;
-    });
-
-    const style = computed((): StyleValue => {
-      return {
-        '--progress-bar-background-color': lightColors.dark,
-        '--progress-bar-gradient-start-color': startColor.value,
-        '--progress-bar-gradient-end-color': endColor.value,
-        '--progress-bar-gradient-width': `min(100%, ${fixedRate.value}%)`,
-        '--progress-bar-total-relative-width': `${relativeWidth.value}%`
-      };
-    });
-
-    return {
-      style,
-      fixedRate
-    }
-  },
-});
-</script>

package/styles/components/fs_progress_bar.scss

@@ -1,14 +0,0 @@
-.fs-progress-bar-gradient {
-    flex: 1;
-    background-color: var(--progress-bar-background-color);
-    height: 8px;
-    border-radius: 4px;
-
-    div {
-        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-        height: 100%;
-        background: linear-gradient(to right, var(--progress-bar-gradient-start-color) 0%, var(--progress-bar-gradient-end-color) var(--progress-bar-total-relative-width));
-        width: var(--progress-bar-gradient-width);
-        border-radius: 4px;
-    }
-}