@dative-gpi/foundation-shared-components 1.0.139-widgethiddencode → 1.0.140-selectable

package/components/FSToggleSet.vue

@@ -5,13 +5,13 @@
     :modelValue="$props.modelValue"
   >
     <FSWrapGroup
-      v-if="['wrap'].includes($props.variant)"
+      v-if="$props.variant && ['wrap'].includes($props.variant)"
       ref="toggleSetRef"
       :padding="$props.padding"
       :gap="$props.gap"
     >
       <template
-        v-if="$props.values.length"
+        v-if="$props.values && $props.values.length"
       >
         <template
           v-if="!$slots.item"
@@ -20,7 +20,7 @@
             v-for="(item, index) in $props.values"
             :prependIcon="item.prependIcon"
             :appendIcon="item.appendIcon"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :variant="getVariant(item)"
             :color="getColor(item)"
             :class="getClass(item)"
@@ -54,7 +54,7 @@
       :gap="$props.gap"
     >
       <template
-        v-if="$props.values.length"
+        v-if="$props.values && $props.values.length"
       >
         <template
           v-if="!$slots.item"
@@ -63,7 +63,7 @@
             v-for="(item, index) in $props.values"
             :prependIcon="item.prependIcon"
             :appendIcon="item.appendIcon"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :variant="getVariant(item)"
             :color="getColor(item)"
             :class="getClass(item)"
@@ -197,10 +197,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/buttons/FSButtonCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :prependIcon="prependIcon"
     :load="$props.load"
     :variant="variant"
@@ -40,10 +40,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -57,7 +57,7 @@ export default defineComponent({
     });
 
     const onClick = (): void => {
-      if (props.editable && !props.load) {
+      if (!props.disabled && !props.load) {
         emit("update:modelValue", !props.modelValue);
       }
     };

package/components/fields/FSAutocompleteField.vue

@@ -20,7 +20,7 @@
       :description="$props.description"
       :hideHeader="$props.hideHeader"
       :clearable="$props.clearable"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :required="$props.required"
       :label="$props.label"
       :rules="$props.rules"
@@ -63,7 +63,7 @@
             name="clear"
           >
             <FSButton
-              v-if="$props.clearable && $props.editable && !!$props.modelValue"
+              v-if="$props.clearable && !$props.disabled && !!$props.modelValue"
               icon="mdi-close"
               variant="icon"
               :color="ColorEnum.Dark"
@@ -78,7 +78,7 @@
         <FSButton
           icon="mdi-chevron-down"
           variant="icon"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Dark"
           @click="openMobileOverlay"
         />
@@ -174,14 +174,14 @@
                 />
                 <FSCheckbox
                   v-if="$props.multiple"
-                  :editable="$props.editable"
+                  :disabled="$props.disabled"
                   :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
                   @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
                 />
                 <FSRadio
                   v-else
                   :selected="$props.modelValue === item[$props.itemValue!]"
-                  :editable="$props.editable"
+                  :disabled="$props.disabled"
                   :item="item"
                   :modelValue="item[$props.itemValue!]"
                   @update:modelValue="onRadioChange(item[$props.itemValue!])"
@@ -217,13 +217,13 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
   >
     <FSToggleSet
       v-if="$props.toggleSet"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :multiple="$props.multiple"
       :required="$props.required"
       :values="$props.items"
@@ -248,10 +248,11 @@
       <v-autocomplete
         class="fs-autocomplete-field"
         variant="outlined"
-        :clearable="$props.clearable && $props.editable && !!$props.modelValue"
+        :clearable="$props.clearable && !$props.disabled && !!$props.modelValue"
         :itemTitle="$props.itemTitle"
         :itemValue="$props.itemValue"
-        :readonly="!$props.editable"
+        :disabled="$props.disabled"
+        :readonly="$props.readonly"
         :multiple="$props.multiple"
         :validateOn="validateOn"
         :autoSelectFirst="true"
@@ -366,7 +367,7 @@
               name="clear"
             >
               <FSButton
-                v-if="$props.clearable && $props.editable && !!$props.modelValue"
+                v-if="$props.clearable && !$props.disabled && !!$props.modelValue"
                 icon="mdi-close"
                 variant="icon"
                 :color="ColorEnum.Dark"
@@ -384,7 +385,7 @@
             <FSButton
               icon="mdi-chevron-down"
               variant="icon"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :color="ColorEnum.Dark"
             />
           </slot>
@@ -563,10 +564,15 @@ export default defineComponent({
       required: false,
       default: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false
     },
     loading: {
       type: Boolean,
@@ -604,7 +610,7 @@ export default defineComponent({
     const showExtra = ref(true);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-autocomplete-field-cursor"             : "default",
           "--fs-autocomplete-field-border-color"       : lights.base,
@@ -703,7 +709,7 @@ export default defineComponent({
     });
 
     const openMobileOverlay = () => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       dialog.value = true;

package/components/fields/FSBaseField.vue

@@ -105,10 +105,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     minWidth: {
       type: String,
@@ -128,7 +128,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-base-field-color"    : lights.dark,
           "--fs-base-field-min-width": props.minWidth

package/components/fields/FSColorField.vue

@@ -4,7 +4,7 @@
     class="fs-color-field"
     :description="$props.description"
     :hideHeader="$props.hideHeader"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :required="$props.required"
     :label="$props.label"
     :width="$props.width"
@@ -16,7 +16,7 @@
       :id="activatorId"
       padding="8px"
       width="100%"
-      :class="{ 'fs-color-field-disabled': !$props.editable }"
+      :class="{ 'fs-color-field-disabled': $props.disabled }"
     >
       <FSRow
         align="center-center"
@@ -39,7 +39,7 @@
     min-width="300px"
     :activator="`#${activatorId}`"
     :closeOnContentClick="false"
-    :modelValue="menu && $props.editable"
+    :modelValue="menu && !$props.disabled"
     @update:modelValue="menu = $event"
   >
     <FSCard
@@ -131,10 +131,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     allowOpacity: {
       type: Boolean,
@@ -170,7 +170,7 @@ export default defineComponent({
     const fullColor = ref("#00000000");
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-color-field-cursor"             : "default",
           "--fs-color-field-border-color"       : lights.base,

package/components/fields/FSDateField.vue

@@ -10,7 +10,7 @@
         :color="$props.color"
         :hideHeader="$props.hideHeader"
         :required="$props.required"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :readonly="true"
         :rules="$props.rules"
         :messages="messages"
@@ -29,7 +29,7 @@
             <FSButton
               variant="icon"
               icon="mdi-calendar"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :color="ColorEnum.Dark"
               @click="openMobileOverlay"
             />
@@ -74,7 +74,7 @@
       <v-menu
         min-width="300px"
         :closeOnContentClick="false"
-        :modelValue="menu && $props.editable"
+        :modelValue="menu && !$props.disabled"
         @update:modelValue="menu = $event"
       >
         <template
@@ -87,7 +87,7 @@
             :color="$props.color"
             :hideHeader="$props.hideHeader"
             :required="$props.required"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :readonly="true"
             :rules="$props.rules"
             :messages="messages"
@@ -106,7 +106,7 @@
                 <FSButton
                   variant="icon"
                   icon="mdi-calendar"
-                  :editable="$props.editable"
+                  :disabled="$props.disabled"
                   :color="ColorEnum.Dark"
                 />
               </slot>
@@ -208,10 +208,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -228,7 +228,7 @@ export default defineComponent({
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const openMobileOverlay = () => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       dialog.value = true;

package/components/fields/FSDateRangeField.vue

@@ -6,7 +6,7 @@
     :color="$props.color"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :readonly="true"
     :rules="$props.rules"
     :messages="messages"
@@ -26,7 +26,7 @@
         <FSButton
           variant="icon"
           icon="mdi-calendar"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Dark"
         />
       </slot>
@@ -115,10 +115,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -140,7 +140,7 @@ export default defineComponent({
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules, true));
 
     const onClick = (): void => {
-      if (props.editable) {
+      if (!props.disabled) {
         dialog.value = true;
       }
     };

package/components/fields/FSDateTimeField.vue

@@ -10,7 +10,7 @@
         :color="$props.color"
         :hideHeader="$props.hideHeader"
         :required="$props.required"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :readonly="true"
         :rules="$props.rules"
         :messages="messages"
@@ -29,7 +29,7 @@
             <FSButton
               variant="icon"
               icon="mdi-calendar"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :color="ColorEnum.Dark"
               @click="openMobileOverlay"
             />
@@ -93,7 +93,7 @@
     >
       <v-menu
         :closeOnContentClick="false"
-        :modelValue="menu && $props.editable"
+        :modelValue="menu && !$props.disabled"
         @update:modelValue="menu = $event"
       >
         <template
@@ -106,7 +106,7 @@
             :color="$props.color"
             :hideHeader="$props.hideHeader"
             :required="$props.required"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :readonly="true"
             :rules="$props.rules"
             :messages="messages"
@@ -125,7 +125,7 @@
                 <FSButton
                   variant="icon"
                   icon="mdi-calendar"
-                  :editable="$props.editable"
+                  :disabled="$props.disabled"
                   :color="ColorEnum.Dark"
                 />
               </slot>
@@ -256,10 +256,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -279,7 +279,7 @@ export default defineComponent({
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const openMobileOverlay = () => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       dialog.value = true;

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>