@dative-gpi/foundation-shared-components 1.0.140 → 1.0.142

package/components/FSCalendarTwin.vue

@@ -1,7 +1,5 @@
 <template>
-  <FSCol
-    width="hug"
-  >
+  <FSCol>
     <FSRow>
       <FSSelectField
         :hideHeader="true"
@@ -22,8 +20,6 @@
     <FSRow
       class="fs-calendar-twin"
       align="top-center"
-      width="hug"
-      :height="['380px', '375px']"
       :style="style"
     >
       <FSCol

package/components/FSInstantPicker.vue

@@ -88,7 +88,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from "vue";
 
-import { useDateFormat, useTermFieldDate } from "@dative-gpi/foundation-shared-services/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';
@@ -169,7 +169,7 @@ export default defineComponent({
   emits: ['update:modelValue', 'update:startDate', 'update:endDate'],
   setup(props, { emit }) {
     const { epochToShortTimeOnlyFormat, epochToShortDateFormat, epochToDayMonthShortOnly, epochToISO, epochToMonthShortTimeFormat } = useDateFormat();
-    const { convert : convertTermToEpoch } = useTermFieldDate();
+    const { convert : convertTermToEpoch } = useDateExpression();
     const { isMobileSized, isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
 

package/components/fields/FSDateTimeRangeDialog.vue

@@ -0,0 +1,160 @@
+<template>
+  <FSDialogSubmit
+    :title="$props.label"
+    :submitButtonColor="$props.color"
+    :modelValue="$props.dialog"
+    :disabled="!valid"
+    @update:modelValue="$emit('cancel')"
+    @click:submitButton="onSubmit"
+  >
+    <template
+      #body
+    >
+      <FSCol>
+        <FSCalendarTwin
+          :color="$props.color"
+          v-model="innerDateRange"
+        />
+        <FSRow>
+          <FSCol>
+            <FSClock
+              :color="$props.color"
+              :date="innerDateLeft"
+              v-model="innerTimeLeft"
+            />
+          </FSCol>
+          <FSCol>
+            <FSClock
+              :color="$props.color"
+              :date="innerDateRight"
+              v-model="innerTimeRight"
+            />
+          </FSCol>
+        </FSRow>
+      </FSCol>
+    </template>
+  </FSDialogSubmit>
+</template>
+
+<script lang="ts">
+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 FSDialogSubmit from "../FSDialogSubmit.vue";
+import FSCalendarTwin from "../FSCalendarTwin.vue";
+import FSClock from "../FSClock.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSDateTimeRangeDialog",
+  components: {
+    FSDialogSubmit,
+    FSCalendarTwin,
+    FSClock,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<number[] | null>,
+      required: false,
+      default: () => null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    dialog: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "cancel"],
+  setup(props, { emit }) {
+    const { getUserOffset } = useAppTimeZone();
+
+    const innerDateRange = ref<number[] | null>(null);
+    const innerTimeRight = ref(0);
+    const innerTimeLeft = ref(0);
+
+    const innerDateLeft = computed((): number | null => {
+      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length) {
+        return innerDateRange.value[0];
+      }
+      return null;
+    });
+
+    const innerDateRight= computed((): number | null => {
+      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length > 1) {
+        return innerDateRange.value[1];
+      }
+      return null;
+    });
+
+    const valid = computed((): boolean => {
+      return !!innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length > 1 &&
+        innerDateRange.value[0] + innerTimeLeft.value < innerDateRange.value[1] + innerTimeRight.value;
+    });
+
+    const reset = (): void => {
+      if (props.modelValue && Array.isArray(props.modelValue)) {
+        // FSClock just gives two numbers without consideration for the time zone
+        // We must adjust the time to the user's time zone
+        switch (props.modelValue.length) {
+          case 0: {
+            break;
+          }
+          case 1: {
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset(props.modelValue[0])) % (24 * 60 * 60 * 1000));
+            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
+            break;
+          }
+          default: {
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset(props.modelValue[0])) % (24 * 60 * 60 * 1000));
+            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffset(props.modelValue[1])) % (24 * 60 * 60 * 1000));
+            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
+            break;
+          }
+        }
+      }
+      else {
+        innerDateRange.value = null;
+        innerTimeLeft.value = 0;
+        innerTimeRight.value = 0;
+      }
+    };
+
+    watch(() => props.modelValue, () => {
+      reset();
+    }, { immediate: true });
+
+    const onSubmit = (): void => {
+      if (valid.value) {
+        emit("update:modelValue", [innerDateRange.value![0] + innerTimeLeft.value, innerDateRange.value![1] + innerTimeRight.value]);
+        return;
+      }
+    };
+
+    return {
+      valid,
+      innerDateLeft,
+      innerTimeLeft,
+      innerDateRight,
+      innerTimeRight,
+      innerDateRange,
+      ColorEnum,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/fields/FSDateTimeRangeField.vue

@@ -41,66 +41,34 @@
       />
     </template>
   </FSTextField>
-  <FSDialogSubmit
+  <FSDateTimeRangeDialog
     :title="$props.label"
     :submitButtonColor="$props.color"
-    @click:submitButton="onSubmit"
-    v-model="dialog"
-  >
-    <template
-      #body
-    >
-      <FSCol>
-        <FSCalendarTwin
-          :color="$props.color"
-          v-model="innerDateRange"
-        />
-        <FSRow>
-          <FSCol>
-            <FSClock
-              :color="$props.color"
-              :date="innerDateLeft"
-              v-model="innerTimeLeft"
-            />
-          </FSCol>
-          <FSCol>
-            <FSClock
-              :color="$props.color"
-              :date="innerDateRight"
-              v-model="innerTimeRight"
-            />
-          </FSCol>
-        </FSRow>
-      </FSCol>
-    </template>
-  </FSDialogSubmit>
+    :dialog="dialog"
+    :modelValue="$props.modelValue"
+    :color="$props.color"
+    @cancel="dialog = false"
+    @update:modelValue="onSubmit($event)"
+  />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone, useDateFormat } 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";
-import FSCalendarTwin from "../FSCalendarTwin.vue";
+import FSDateTimeRangeDialog from "./FSDateTimeRangeDialog.vue";
 import FSTextField from "./FSTextField.vue";
 import FSButton from "../FSButton.vue";
-import FSClock from "../FSClock.vue";
-import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSDateTimeRangeField",
   components: {
-    FSDialogSubmit,
-    FSCalendarTwin,
+    FSDateTimeRangeDialog,
     FSTextField,
-    FSButton,
-    FSClock,
-    FSCol,
-    FSRow
+    FSButton
   },
   props: {
     label: {
@@ -146,16 +114,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { getUserOffset } = useAppTimeZone();
     const { epochToShortTimeFormat } = useDateFormat();
     const { validateOn, getMessages } = useRules();
 
     const dialog = ref(false);
 
-    const innerDateRange = ref<number[] | null>(null);
-    const innerTimeRight = ref(0);
-    const innerTimeLeft = ref(0);
-
     const toShortTimeFormat = computed((): string => {
       if (!props.modelValue || !Array.isArray(props.modelValue) || !props.modelValue.length) {
         return "";
@@ -163,20 +126,6 @@ export default defineComponent({
       return props.modelValue.map((epoch) => epochToShortTimeFormat(epoch)).join(" - ");
     });
 
-    const innerDateLeft = computed((): number | null => {
-      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length) {
-        return innerDateRange.value[0];
-      }
-      return null;
-    });
-
-    const innerDateRight= computed((): number | null => {
-      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length > 1) {
-        return innerDateRange.value[1];
-      }
-      return null;
-    });
-
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules, true));
 
     const onClick = (): void => {
@@ -185,66 +134,24 @@ export default defineComponent({
       }
     };
 
-    const onClear = (): void => {
-      emit("update:modelValue", null);
-      innerTimeLeft.value = 0;
-      innerTimeRight.value = 0;
-      innerDateRange.value = null;
-    };
-
-    const onSubmit = (): void => {
-      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length > 1) {
-        emit("update:modelValue", [innerDateRange.value[0] + innerTimeLeft.value, innerDateRange.value[1] + innerTimeRight.value]);
-      }
+    const onSubmit = (value: number[]): void => {
+      emit("update:modelValue", value);
       dialog.value = false;
     };
 
-    const reset = (): void => {
-      if (props.modelValue && Array.isArray(props.modelValue)) {
-        // FSClock just gives two numbers without consideration for the time zone
-        // We must adjust the time to the user's time zone
-        switch (props.modelValue.length) {
-          case 0: {
-            break;
-          }
-          case 1: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset(props.modelValue[0])) % (24 * 60 * 60 * 1000));
-            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
-            break;
-          }
-          default: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset(props.modelValue[0])) % (24 * 60 * 60 * 1000));
-            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffset(props.modelValue[1])) % (24 * 60 * 60 * 1000));
-            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
-            break;
-          }
-        }
-      }
-      else {
-        innerDateRange.value = null;
-        innerTimeLeft.value = 0;
-        innerTimeRight.value = 0;
-      }
+    const onClear = (): void => {
+      emit("update:modelValue", null);
     };
 
-    watch(() => props.modelValue, () => {
-      reset();
-    }, { immediate: true });
-
     return {
       toShortTimeFormat,
-      innerDateLeft,
-      innerTimeLeft,
-      innerDateRight,
-      innerTimeRight,
-      innerDateRange,
       validateOn,
       ColorEnum,
       messages,
       dialog,
       onSubmit,
       onClear,
-      onClick
+      onClick,
     };
   }
 });

package/components/fields/FSTermField.vue

@@ -68,16 +68,23 @@
             />
           </FSRow>
         </template>
-        <FSDateTimeRangeField
+        <template
           v-else-if="innerDateSetting === DateSetting.Pick"
-          :width="['350px', '310px']"
-          :rules="[DateRules.required()]"
-          :disabled="$props.disabled"
-          :hideHeader="true"
-          :clearable="false"
-          :modelValue="actualValue"
-          @update:modelValue="onPickDates"
-        />
+        >
+          <FSDateTimeRangeField
+            :width="['350px', '310px']"
+            :disabled="$props.disabled"
+            :hideHeader="true"
+            :clearable="false"
+            :modelValue="actualValue"
+            @update:modelValue="onPickDates"
+          />
+          <FSDateTimeRangeDialog
+            :dialog="dateTimeRangeDialog"
+            @cancel="onCancelPickDates"
+            @update:modelValue="onPickDates"
+          />
+        </template>
       </FSRow>
     </FSForm>
   </FSBaseField>
@@ -93,6 +100,7 @@ import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { DateSetting } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectDateSetting from "../selects/FSSelectDateSetting.vue";
+import FSDateTimeRangeDialog from './FSDateTimeRangeDialog.vue';
 import FSDateTimeRangeField from "./FSDateTimeRangeField.vue";
 import FSNumberField from "./FSNumberField.vue";
 import FSBaseField from "./FSBaseField.vue";
@@ -104,6 +112,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSTermField",
   components: {
+    FSDateTimeRangeDialog,
     FSDateTimeRangeField,
     FSSelectDateSetting,
     FSNumberField,
@@ -170,13 +179,14 @@ export default defineComponent({
   },
   emits: ["update", "update:startDate", "update:endDate"],
   setup(props, { emit }) {
-    const { parseForPicker, epochToISO, todayToPicker, yesterdayToPicker } = useDateFormat();
+    const { parseForPicker, epochToISO } = useDateFormat();
     const { getMessages } = useRules();
 
     const innerDateSetting = ref<DateSetting>(DateSetting.PastDays);
     const innerDateValue = ref<number>(1);
     const innerStartDate = ref<string>("now - 1d");
     const innerEndDate = ref<string>("now");
+    const dateTimeRangeDialog = ref(false);
 
     const valid = ref<boolean>(false);
 
@@ -353,9 +363,8 @@ export default defineComponent({
           }
           break;
         case DateSetting.Pick:
-          innerEndDate.value = todayToPicker();
-          innerStartDate.value = yesterdayToPicker();
-          break;
+          dateTimeRangeDialog.value = true;
+          return;
       }
       emit("update:startDate", innerStartDate.value);
       emit("update:endDate", innerEndDate.value);
@@ -426,34 +435,32 @@ export default defineComponent({
       emit("update", { startDate: innerStartDate.value, endDate: innerEndDate.value });
     };
 
-    const onPickDates = (value: number[] | null) => {
-      if (!value) {
-        innerEndDate.value = todayToPicker();
-        innerStartDate.value = yesterdayToPicker();
-        if (valid.value) {
-          emit("update:startDate", innerStartDate.value);
-          emit("update:endDate", innerEndDate.value);
-          emit("update", { startDate: innerStartDate.value, endDate: innerEndDate.value });
-        }
+    const onPickDates = (value: number[]) => {
+      dateTimeRangeDialog.value = false;
+
+      if(value.length < 2) {
+        return;
       }
-      else {
-        if (value && value[0] != null && epochToISO(value[0]) !== innerStartDate.value) {
-          innerStartDate.value = epochToISO(value[0]);
-          if (valid.value) {
-            emit("update:startDate", innerStartDate.value);
-            emit("update", { startDate: innerStartDate.value, endDate: props.endDate });
-          }
+
+      innerStartDate.value = epochToISO(value[0]);
+      innerEndDate.value = epochToISO(value[1]);
+
+      if (valid.value !== false) {
+        if(props.startDate !== innerStartDate.value) {
+          emit("update:startDate", innerStartDate.value);
         }
-        if (value && value[1] != null && epochToISO(value[1]) !== innerEndDate.value) {
-          innerEndDate.value = epochToISO(value[1]);
-          if (valid.value) {
-            emit("update:endDate", innerEndDate.value);
-            emit("update", { startDate: props.startDate, endDate: innerEndDate.value });
-          }
+        if (props.endDate !== innerEndDate.value) {
+          emit("update:endDate", innerEndDate.value);
         }
+        emit("update", { startDate: innerStartDate.value, endDate: innerEndDate.value });
       }
     };
 
+    const onCancelPickDates = () => {
+      dateTimeRangeDialog.value = false;
+      reset();
+    };
+
     const reset = (): void => {
       innerStartDate.value = props.startDate;
       innerEndDate.value = props.endDate;
@@ -663,6 +670,7 @@ export default defineComponent({
     });
 
     return {
+      dateTimeRangeDialog,
       innerDateSetting,
       innerDateValue,
       innerStartDate,
@@ -679,6 +687,7 @@ export default defineComponent({
       innerDateValueChange,
       innerStartDateChange,
       innerEndDateChange,
+      onCancelPickDates,
       parseForPicker,
       onPickDates
     };

package/components/lists/FSDataTableUI.vue

@@ -135,7 +135,7 @@
         :headers="extraHeaders.concat(innerHeaders)"
         :sortBy="innerSortBy ? [innerSortBy] : []"
         :itemsPerPage="innerRowsPerPage"
-        :showSelect="$props.showSelect"
+        :selectable="$props.selectable"
         :hover="!$props.sortDraggable"
         :itemValue="$props.itemValue"
         :loading="$props.loading"
@@ -258,7 +258,7 @@
                     width="hug"
                   >
                     <FSCheckbox
-                      v-if="$props.showSelect"
+                      v-if="$props.selectable"
                       :modelValue="props.item.items.every((item) => $props.modelValue.includes(item.key))"
                       :indeterminate="$props.modelValue.some((id) => props.item.items.some((item) => item.key === id)) && !props.item.items.every((item) => $props.modelValue.includes(item.key))"
                       @update:modelValue="toggleSelectGroup(props.item)"
@@ -480,7 +480,7 @@
                   v-if="item.type === 'item'"
                   :leftColor="$props.rowColor ? $props.rowColor(item.raw) : null"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :selectable="$props.showSelect"
+                  :selectable="$props.selectable"
                   :singleSelect="$props.singleSelect"
                   :to="$props.itemTo"
                   :bottomColor="$props.color"
@@ -653,7 +653,7 @@
                 <FSDataIteratorItem
                   :leftColor="$props.rowColor ? $props.rowColor(item.raw) : null"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :selectable="$props.showSelect"
+                  :selectable="$props.selectable"
                   :singleSelect="$props.singleSelect"
                   :to="$props.itemTo"
                   :bottomColor="$props.color"
@@ -833,7 +833,7 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    showSelect: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true
@@ -1035,7 +1035,7 @@ export default defineComponent({
           width: "0%"
         });
       }
-      if (props.showSelect) {
+      if (props.selectable) {
         extra.push({
           key: "data-table-select",
           width: "0%"

package/components/lists/FSSimpleList.vue

@@ -50,6 +50,7 @@
     >
       <FSRow
         v-if="$props.loading"
+        :wrap="false"
       >
         <FSLoader
           v-for="i in 4"
@@ -60,6 +61,7 @@
       </FSRow>
       <FSRow
         v-else
+        :wrap="false"
       >
         <FSSimpleListItem 
           v-for="item in filteredItems"

package/components/lists/FSSimpleListItem.vue

@@ -3,7 +3,6 @@
     v-bind="$props.tileProps"
     :width="$props.width"
     height="fit-content"
-    :selectable="false"
   >
     <slot
       name="item"

package/components/tiles/FSTile.vue

@@ -136,7 +136,7 @@ export default defineComponent({
     selectable: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     singleSelect: {
       type: Boolean,

package/package.json

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

package/styles/components/fs_calendar.scss

@@ -32,6 +32,7 @@
     border: 1px solid var(--fs-calendar-border-color) !important;
     border-radius: 4px !important;
     padding: 8px !important;
+    min-height: 380px;
 }
 
 .fs-calendar-header {