@dative-gpi/foundation-shared-components 1.0.165 → 1.0.167

package/components/FSInstantPicker.vue

@@ -35,6 +35,8 @@
             :step="$props.stepTime"
             :min="startTimestamp"
             :max="endTimestamp"
+            :hideHeader="true"
+            :maxWidth="null"
             :ticks="ticks"
             showTicks="always"
             :modelValue="$props.modelValue"
@@ -78,7 +80,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from "vue";
+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";
@@ -164,7 +166,7 @@ export default defineComponent({
     }
   },
   emits: ['update:modelValue', 'update:startDate', 'update:endDate'],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     const { epochToShortTimeOnlyFormat, epochToShortDateFormat, epochToDayMonthShortOnly, epochToISO, epochToMonthShortTimeFormat } = useDateFormat();
     const { convert : convertTermToEpoch } = useDateExpression();
     const { isMobileSized, isExtraSmall } = useBreakpoints();
@@ -173,9 +175,8 @@ export default defineComponent({
     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 startTimestamp = ref(convertTermToEpoch(props.startDate));
+    const endTimestamp = ref(convertTermToEpoch(props.endDate));
 
     const tickCount = computed(() => {
       if (isExtraSmall.value) { return 3; }
@@ -198,6 +199,11 @@ export default defineComponent({
       precision: tickPrecision.value
     }));
 
+    const refresh = () => {
+      startTimestamp.value = convertTermToEpoch(props.startDate);
+      endTimestamp.value = convertTermToEpoch(props.endDate);
+    };
+
     const onPlayingChange = (value: boolean) => {
       playing.value = value;
     };
@@ -216,6 +222,10 @@ export default defineComponent({
       }
     }, { immediate: true });
 
+    watch([() => props.startDate, () => props.endDate], () => {
+      refresh();
+    }, { immediate: true });
+
     watch(playing, (value) => {
       if(!value && playingInterval.value) {
         clearInterval(playingInterval.value);
@@ -231,6 +241,10 @@ export default defineComponent({
       }
     });
 
+    expose({
+      refresh,
+    });
+
     return {
       ticks,
       playing,

package/components/FSRangePicker.vue

@@ -36,6 +36,8 @@
             :step="$props.stepTime"
             :min="startTimestamp"
             :max="endTimestamp"
+            :hideHeader="true"
+            :maxWidth="null"
             :ticks="ticks"
             showTicks="always"
             :modelValue="$props.modelValue"
@@ -169,7 +171,7 @@ export default defineComponent({
     }
   },
   emits: ['update:modelValue', 'update:startDate', 'update:endDate'],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     const { epochToShortTimeOnlyFormat, epochToShortDateFormat, epochToDayMonthShortOnly, epochToISO, epochToMonthShortTimeFormat } = useDateFormat();
     const { convert : convertTermToEpoch } = useDateExpression();
     const { isMobileSized, isExtraSmall } = useBreakpoints();
@@ -178,9 +180,8 @@ export default defineComponent({
     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 startTimestamp = ref(convertTermToEpoch(props.startDate));
+    const endTimestamp = ref(convertTermToEpoch(props.endDate));
 
     const tickCount = computed(() => {
       if (isExtraSmall.value) { return 3; }
@@ -203,6 +204,11 @@ export default defineComponent({
       precision: tickPrecision.value
     }));
 
+    const refresh = () => {
+      startTimestamp.value = convertTermToEpoch(props.startDate);
+      endTimestamp.value = convertTermToEpoch(props.endDate);
+    };
+
     const onPlayingChange = (value: boolean) => {
       playing.value = value;
     };
@@ -223,6 +229,10 @@ export default defineComponent({
       }
     }, { immediate: true });
 
+    watch([() => props.startDate, () => props.endDate], () => {
+      refresh();
+    }, { immediate: true });
+
     watch(playing, (value) => {
       if(!value && playingInterval.value) {
         clearInterval(playingInterval.value);
@@ -238,6 +248,10 @@ export default defineComponent({
       }, props.playingStepDuration);
     });
 
+    expose({
+      refresh,
+    });
+
     return {
       ticks,
       playing,

package/components/tiles/FSUserTileUI.vue

@@ -6,12 +6,13 @@
   >
     <FSRow
       :wrap="false"
-      :width="infoWidth"
       gap="24px"
       height="fill"
       align="center-left"
     >
-      <FSCol>
+      <FSCol
+        :width="infoWidth"
+      >
         <FSSpan
           font="text-button"
         >

package/package.json

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