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

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";
@@ -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"
   >
@@ -16,7 +16,7 @@
         <FSSelectDateSetting
           minWidth="180px"
           :lastPeriod="$props.lastPeriod"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :variant="$props.variant"
           :hideHeader="true"
           :modelValue="innerDateSetting"
@@ -26,7 +26,7 @@
           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"
@@ -44,7 +44,7 @@
             </FSIcon>
             <FSTextField
               :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :hideHeader="true"
               :clearable="false"
               :modelValue="innerStartDate"
@@ -60,7 +60,7 @@
             </FSIcon>
             <FSTextField
               :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :hideHeader="true"
               :clearable="false"
               :modelValue="innerEndDate"
@@ -68,16 +68,23 @@
             />
           </FSRow>
         </template>
-        <FSDateTimeRangeField
+        <template
           v-else-if="innerDateSetting === DateSetting.Pick"
-          :width="['350px', '310px']"
-          :rules="[DateRules.required()]"
-          :editable="$props.editable"
-          :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,
@@ -162,21 +171,22 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   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/fields/FSTextArea.vue

@@ -4,7 +4,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :messages="messages"
   >
     <template
@@ -26,8 +26,8 @@
       :hideDetails="true"
       :noResize="true"
       :autoGrow="$props.autoGrow"
-      :readonly="!$props.editable"
-      :clearable="$props.clearable && $props.editable && !!$props.modelValue"
+      :disabled="$props.disabled"
+      :clearable="$props.clearable && !$props.disabled && !!$props.modelValue"
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
@@ -50,7 +50,7 @@
           align="center-center"
         >
           <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"
@@ -128,10 +128,10 @@ export default defineComponent({
       required: false,
       default: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -161,7 +161,7 @@ export default defineComponent({
         }
         fieldHeight = `${props.rows * row}px`;
       }
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-text-area-cursor"             : "default",
           "--fs-text-area-border-color"       : lights.base,

package/components/fields/FSTextField.vue

@@ -4,7 +4,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :messages="messages"
   >
     <template
@@ -32,8 +32,8 @@
       :type="$props.type"
       :persistentClear="true"
       :hideDetails="true"
-      :readonly="!$props.editable"
-      :clearable="$props.clearable && $props.editable && !!$props.modelValue"
+      :disabled="$props.disabled"
+      :clearable="$props.clearable && !$props.disabled && !!$props.modelValue"
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
@@ -56,7 +56,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"
@@ -129,10 +129,10 @@ export default defineComponent({
       required: false,
       default: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -150,7 +150,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-text-field-cursor"             : "default",
           "--fs-text-field-border-color"       : lights.base,

package/components/fields/FSTimeField.vue

@@ -3,14 +3,14 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
   >
     <FSRow>
       <FSNumberField
         :validationValue="$props.modelValue"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :validateOn="validateOn"
         :rules="$props.rules"
         :hideHeader="true"
@@ -31,7 +31,7 @@
       </FSNumberField>
       <FSSelectField
         class="fs-time-field-select"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :hideHeader="true"
         :clearable="false"
         :items="timeScale"
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, watch, type StyleValue } from "vue";
 
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { getTimeScaleIndex, timeScale } from "@dative-gpi/foundation-shared-components/utils";
@@ -108,10 +108,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -131,7 +131,7 @@ export default defineComponent({
     const selectedUnit = ref(timeScale[0]);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-time-field-cursor"             : "default",
           "--fs-time-field-border-color"       : lights.base,
@@ -153,14 +153,14 @@ export default defineComponent({
       return Object.keys(slots).filter(k => k.startsWith("number-")).reduce((acc, key) => {
         acc[key.substring("number-".length)] = slots[key];
         return acc;
-      }, {});
+      }, {} as Record<string, any>);
     });
 
     const selectSlots = computed((): any => {
       return Object.keys(slots).filter(k => k.startsWith("select-")).reduce((acc, key) => {
         acc[key.substring("select-".length)] = slots[key];
         return acc;
-      }, {});
+      }, {} as Record<string, any>);
     });
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
@@ -171,7 +171,11 @@ export default defineComponent({
     };
 
     const onSubmitTimeScale = (value: number): void => {
-      selectedUnit.value = timeScale.find((item) => item.id === value);
+      const newUnit = timeScale.find((item) => item.id === value);
+      if(!newUnit) {
+        return;
+      }
+      selectedUnit.value = newUnit;
       emit("update:modelValue", innerTime.value * selectedUnit.value.id);
     };
 

package/components/fields/FSTimeRangeField.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"
   >
@@ -13,7 +13,7 @@
       >
         <FSSelectField
           :validationValue="$props.modelValue"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :validateOn="validateOn"
           :rules="$props.rules"
           :items="daysItems"
@@ -23,7 +23,7 @@
           @update:modelValue="onChangeDayStart"
         />
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :slider="false"
           :modelValue="startTime"
@@ -34,7 +34,7 @@
         :wrap="false"
       >
         <FSSelectField
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :items="daysItems"
           :hideHeader="true"
           :clearable="false"
@@ -42,7 +42,7 @@
           @update:modelValue="onChangeDayEnd"
         />
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :slider="false"
           :modelValue="endTime"
@@ -123,10 +123,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     showVariant: {
       type: Boolean,

package/components/fields/FSTimeStepField.vue

@@ -3,14 +3,14 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
   >
     <FSRow>
       <FSNumberField
         :validationValue="$props.modelValue"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :validateOn="validateOn"
         :rules="$props.rules"
         :hideHeader="true"
@@ -31,7 +31,7 @@
       </FSNumberField>
       <FSSelectField
         class="fs-time-field-select"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :hideHeader="true"
         :clearable="false"
         :items="units"
@@ -113,10 +113,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/fields/FSTranslateField.vue

@@ -1,6 +1,6 @@
 <template>
   <FSTextField
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -44,7 +44,7 @@
       >
         <FSTextField
           :label="$tr('ui.common.default-value', 'Default value')"
-          :editable="false"
+          :disabled="$props.disabled"
           :modelValue="$props.modelValue"
         />
         <FSCol
@@ -52,7 +52,7 @@
         >
           <FSTextField
             v-for="(language, index) in languages"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :key="index"
             :modelValue="getTranslation(language.code)"
             @update:modelValue="setTranslation(language.code, $event)"
@@ -149,10 +149,10 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue", "update:translations"],
@@ -171,7 +171,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-translate-field-color": lights.dark
         };
@@ -214,7 +214,7 @@ export default defineComponent({
 
     const onSubmit = (): void => {
       dialog.value = false;
-      if (props.editable) {
+      if (!props.disabled) {
         emit("update:translations", innerTranslations.value);
       }
     };

package/components/fields/FSTranslateRichTextField.vue

@@ -6,14 +6,14 @@
       gap="16px"
     >
       <FSRichTextField
-        :editable="false"
+        :disabled="true"
         :label="$tr('ui.common.default-value', 'Default value')"
         :modelValue="$props.modelValue"
         v-bind="$attrs"
       />
       <FSRichTextField
         v-for="(language, index) in languages"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :key="index"
         :modelValue="getTranslation(language.code)"
         @update:modelValue="setTranslation(language.code, $event)"
@@ -48,7 +48,7 @@
         @click="onCancelTranslations"
       />
       <FSButton
-        v-if="$props.editable"
+        v-if="!$props.disabled"
         prependIcon="mdi-check"
         color="primary"
         width="100%"
@@ -59,7 +59,7 @@
   </FSCol>
   <FSRichTextField
     v-else
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -109,9 +109,9 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    editable: {
+    disabled: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     modelValue: {
       type: [Object, String] as PropType<{ [key: string]: any } | string | null>,
@@ -173,7 +173,7 @@ export default defineComponent({
     };
 
     const onSubmitTranslations = (): void => {
-      if (props.editable) {
+      if (!props.disabled) {
         emit("update:translations", innerTranslations.value);
       }
       emit('update:translationsExpanded', false);