@dative-gpi/foundation-shared-components 1.0.56 → 1.0.58-groupings

package/components/fields/FSSelectField.vue

@@ -20,7 +20,7 @@
       :description="$props.description"
       :hideHeader="$props.hideHeader"
       :clearable="$props.clearable"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :required="$props.required"
       :validateOn="validateOn"
       :label="$props.label"
@@ -64,7 +64,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"
@@ -79,7 +79,7 @@
         <FSButton
           icon="mdi-chevron-down"
           variant="icon"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Dark"
           @click="openMobileOverlay"
         />
@@ -122,6 +122,7 @@
       </FSCard>
     </FSSlideGroup>
     <FSDialogMenu
+      padding="16px"
       v-model="dialog"
     >
       <template
@@ -135,69 +136,52 @@
           >
             <FSRow
               v-for="(item, index) in $props.items"
+              align="center-left"
+              height="36px"
+              :wrap="false"
               :key="index"
+              @click="$props.multiple ?
+                onCheckboxChange(item[$props.itemValue!]) :
+                onRadioChange(item[$props.itemValue!])
+              "
             >
-              <FSCheckbox
-                v-if="$props.multiple"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
-                @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
-              >
-                <template
-                  #label="{ font }"
-                >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSCheckbox>
-              <FSRadio
-                v-else
-                :selected="$props.modelValue === item[$props.itemValue!]"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :item="item"
-                :modelValue="item[$props.itemValue!]"
-                @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
+              <FSRow
+                style="min-width: 0;"
+                :wrap="false"
               >
-                <template
-                  #label="{ font }"
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item }"
+                />
+                <FSSpan
+                  :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
                 >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSRadio>
+                  {{ item[$props.itemTitle!] }}
+                </FSSpan>
+              </FSRow>
               <FSRow
                 align="center-right"
+                width="hug"
+                :wrap="false"
               >
                 <slot
                   name="item-append"
                   v-bind="{ item }"
                 />
+                <FSCheckbox
+                  v-if="$props.multiple"
+                  :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!]"
+                  :disabled="$props.disabled"
+                  :item="item"
+                  :modelValue="item[$props.itemValue!]"
+                  @update:modelValue="onRadioChange(item[$props.itemValue!])"
+                />
               </FSRow>
             </FSRow>
           </FSCol>
@@ -207,7 +191,7 @@
           padding="4px 3px"
         >
           <FSSpan>
-            {{ $tr("ui.select-field.no-data", "No data") }}
+            {{ $tr("ui.common.no-data", "No data") }}
           </FSSpan>
         </FSRow>
       </template>
@@ -215,16 +199,17 @@
   </FSCol>
   <FSBaseField
     v-else
+    :style="style"
     :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"
@@ -249,10 +234,11 @@
       <v-select
         class="fs-select-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"
         :persistentClear="true"
@@ -262,7 +248,6 @@
         :rules="$props.rules"
         :hideDetails="true"
         :menuIcon="null"
-        :style="style"
         :modelValue="$props.modelValue"
         @update:modelValue="onSingleChange"
         v-bind="$attrs"
@@ -363,7 +348,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"
@@ -381,7 +366,7 @@
             <FSButton
               icon="mdi-chevron-down"
               variant="icon"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :color="ColorEnum.Dark"
             />
           </slot>
@@ -394,13 +379,14 @@
             padding="15px"
           >
             <FSSpan>
-              {{ $tr("ui.select-field.no-data", "No data") }}
+              {{ $tr("ui.common.no-data", "No data") }}
             </FSSpan>
           </FSRow>
         </template>
       </v-select>
       <FSSlideGroup
         v-if="$props.multiple && Array.isArray($props.modelValue)"
+        class="fs-select-field-multiple-slide-group"
       >
         <FSCard
           v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
@@ -428,6 +414,7 @@
             <FSButton
               icon="mdi-close"
               variant="icon"
+              :disabled="$props.disabled"
               :color="ColorEnum.Dark"
               @click="() => onCheckboxChange(item[$props.itemValue!])"
             />
@@ -542,10 +529,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,
@@ -560,8 +552,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { fontStyles, isExtraSmall, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
-    const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -576,12 +568,15 @@ export default defineComponent({
     const dialog = ref(false);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-select-field-cursor"             : "default",
           "--fs-select-field-border-color"       : lights.base,
           "--fs-select-field-color"              : lights.dark,
-          "--fs-select-field-active-border-color": lights.base
+          "--fs-select-field-active-border-color": lights.base,
+          "--fs-select-field-multiple-opacity"   : "var(--v-disabled-opacity)",
+          "--fs-base-field-input-height"         : isMobileSized.value ? "34px" : "38px",
+          ...fontStyles.value
         };
       }
       return {
@@ -590,7 +585,10 @@ export default defineComponent({
         "--fs-select-field-border-color"       : lights.dark,
         "--fs-select-field-color"              : darks.base,
         "--fs-select-field-active-border-color": darks.dark,
-        "--fs-select-field-error-border-color" : errors.base
+        "--fs-select-field-error-border-color" : errors.base,
+        "--fs-select-field-multiple-opacity"   : "1",
+        "--fs-base-field-input-height"         : isMobileSized.value ? "34px" : "38px",
+        ...fontStyles.value
       };
     });
 
@@ -658,7 +656,7 @@ export default defineComponent({
     });
 
     const openMobileOverlay = () => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       dialog.value = true;

package/components/fields/FSTagField.vue

@@ -5,7 +5,7 @@
       :description="$props.description"
       :hideHeader="$props.hideHeader"
       :required="$props.required"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :rules="$props.rules"
       :messages="messages"
       :validateOn="validateOn"
@@ -29,7 +29,7 @@
         <FSButton
           variant="icon"
           icon="mdi-tag-outline"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Dark"
           @click="onAdd"
         />
@@ -40,7 +40,7 @@
     </FSTextField>
     <FSTagGroup
       :tagVariant="$props.tagVariant"
-      :editable="$props.editable"
+      :showRemove="!$props.disabled"
       :tags="$props.modelValue"
       :color="$props.tagColor"
       @remove="onRemove"
@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
 
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -91,7 +91,7 @@ export default defineComponent({
     tagColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     hideHeader: {
       type: Boolean,
@@ -108,10 +108,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -129,7 +129,7 @@ export default defineComponent({
     const innerValue = ref("");
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-tag-field-color": lights.dark
         };
@@ -145,7 +145,7 @@ export default defineComponent({
     const onAdd = (event: Event): void => {
       event.stopImmediatePropagation();
       event.preventDefault();
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       const tags = props.modelValue ?? [];
@@ -157,7 +157,7 @@ export default defineComponent({
     }
 
     const onRemove = (label: string): void => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       const tags = props.modelValue ?? [];

package/components/fields/FSTermField.vue

@@ -3,7 +3,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
   >
@@ -14,18 +14,21 @@
         :wrap="false"
       >
         <FSSelectDateSetting
+          minWidth="180px"
           :lastPeriod="$props.lastPeriod"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :variant="$props.variant"
           :hideHeader="true"
           :modelValue="innerDateSetting"
           @update:modelValue="innerDateSettingChange"
         />
         <FSNumberField
+          minWidth="60px"
           v-if="pastSettings.includes(innerDateSetting)"
           :rules="[NumberRules.required(), NumberRules.min(0)]"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :hideHeader="true"
+          :clearable="false"
           :modelValue="innerDateValue"
           @update:modelValue="innerDateValueChange"
         />
@@ -41,8 +44,9 @@
             </FSIcon>
             <FSTextField
               :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :hideHeader="true"
+              :clearable="false"
               :modelValue="innerStartDate"
               @update:modelValue="innerStartDateChange"
             />
@@ -56,28 +60,38 @@
             </FSIcon>
             <FSTextField
               :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :hideHeader="true"
+              :clearable="false"
               :modelValue="innerEndDate"
               @update:modelValue="innerEndDateChange"
             />
           </FSRow>
         </template>
-        <FSDateTimeRangeField
+        <template
           v-else-if="innerDateSetting === DateSetting.Pick"
-          :rules="[DateRules.required()]"
-          :editable="$props.editable"
-          :hideHeader="true"
-          :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>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
 import _ from "lodash";
 
 import { DateRules, NumberRules, TextRules } from "@dative-gpi/foundation-shared-components/models";
@@ -86,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";
@@ -97,6 +112,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSTermField",
   components: {
+    FSDateTimeRangeDialog,
     FSDateTimeRangeField,
     FSSelectDateSetting,
     FSNumberField,
@@ -155,21 +171,22 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
-  emits: ["update:startDate", "update:endDate"],
+  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);
 
@@ -182,8 +199,8 @@ export default defineComponent({
     });
 
     const actualValue = computed(() => {
-      const dates = [parseForPicker(innerStartDate.value), parseForPicker(innerEndDate.value)]
-      if(dates.some(d => d == null)) {
+      const dates = [parseForPicker(innerStartDate.value), parseForPicker(innerEndDate.value)];
+      if (dates.some(d => d == null)) {
         return null;
       }
       return dates as [number, number];
@@ -202,6 +219,7 @@ export default defineComponent({
       innerStartDate.value = value;
       if (valid.value) {
         emit("update:startDate", value);
+        emit("update", { startDate: innerStartDate.value, endDate: props.endDate });
       }
     };
 
@@ -215,6 +233,7 @@ export default defineComponent({
       innerEndDate.value = value;
       if (valid.value) {
         emit("update:endDate", value);
+        emit("update", { startDate: props.startDate, endDate: innerEndDate.value });
       }
     };
 
@@ -344,12 +363,12 @@ 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);
+      emit("update", { startDate: innerStartDate.value, endDate: innerEndDate.value });
     };
 
     const innerDateValueChange = (value: number) => {
@@ -413,34 +432,35 @@ export default defineComponent({
       }
       emit("update:startDate", innerStartDate.value);
       emit("update:endDate", innerEndDate.value);
+      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);
-        }
+    const onPickDates = (value: number[]) => {
+      dateTimeRangeDialog.value = false;
+
+      if(value.length < 2) {
+        return;
       }
-      else {
-        console.log(value[0], value[1]);
-        if (value && value[0] != null && epochToISO(value[0]) !== innerStartDate.value) {
-          innerStartDate.value = epochToISO(value[0]);
-          if (valid.value) {
-            emit("update:startDate", innerStartDate.value);
-          }
+
+      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);
-          }
+        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;
@@ -637,16 +657,20 @@ export default defineComponent({
       innerDateValue.value = 1;
     };
 
+    // This watcher is called once even if both value are set at the same time
     watch([() => props.startDate, () => props.endDate], () => {
-      if (
-        innerStartDate.value !== props.startDate ||
-        innerEndDate.value !== props.endDate
-      ) {
+      // Having one of those different from the inner value means something up the chain is updating
+      if (props.startDate !== innerStartDate.value || props.endDate !== innerEndDate.value) {
         reset();
       }
-    }, { immediate: true });
+    });
+
+    onMounted((): void => {
+      reset();
+    });
 
     return {
+      dateTimeRangeDialog,
       innerDateSetting,
       innerDateValue,
       innerStartDate,
@@ -663,6 +687,7 @@ export default defineComponent({
       innerDateValueChange,
       innerStartDateChange,
       innerEndDateChange,
+      onCancelPickDates,
       parseForPicker,
       onPickDates
     };