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

package/components/FSButton.vue

@@ -1,7 +1,7 @@
 <template>
   <FSClickable
     v-if="$props.variant !== 'icon'"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :padding="padding"
     :variant="$props.variant"
     :color="$props.color"
@@ -254,10 +254,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["click"],
@@ -270,7 +270,7 @@ export default defineComponent({
     const slots = useSlots();
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         switch (props.variant) {
           case "icon": return {
             "--fs-button-color": lights.dark,
@@ -295,7 +295,7 @@ export default defineComponent({
 
     const iconClasses = computed((): string[] => {
       const classNames = ["fs-button-icon"];
-      if (!props.editable) {
+      if (props.disabled) {
         classNames.push("fs-button-disabled");
       }
       return classNames;
@@ -331,7 +331,7 @@ export default defineComponent({
     });
 
     const onClick = (event: MouseEvent) => {
-      if (!props.to && !props.href && props.editable && !props.load) {
+      if (!props.to && !props.href && !props.disabled && !props.load) {
         emit("click", event);
       }
     };

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/FSCheckbox.vue

@@ -114,10 +114,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 darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-checkbox-cursor"        : "default",
           "--fs-checkbox-checkbox-color": (props.modelValue || props.indeterminate) ? colors.value.light : lights.base,
@@ -159,7 +159,7 @@ export default defineComponent({
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     const onToggle = (): void => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       emit("update:modelValue", !props.modelValue);

package/components/FSChip.vue

@@ -97,7 +97,7 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    editable: {
+    clickable: {
       type: Boolean,
       required: false,
       default: false
@@ -158,8 +158,8 @@ export default defineComponent({
 
     const classes = computed((): string[] => {
       const classNames: string[] = ["fs-chip"];
-      if (props.editable) {
-        classNames.push("fs-chip-editable");
+      if (props.clickable) {
+        classNames.push("fs-chip-clickable");
       }
       return classNames;
     });

package/components/FSClickable.vue

@@ -86,7 +86,7 @@
     :type="$props.type"
     :style="style"
     :class="$props.class"
-    :disabled="$props.load || !$props.editable"
+    :disabled="$props.load || $props.disabled"
     @click.stop="onClick"
     @mouseover="hover = true"
     @mouseleave="hover = false"
@@ -209,10 +209,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["click"],
@@ -228,7 +228,7 @@ export default defineComponent({
     const active = ref(false);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-clickable-border-size"     : props.border ? "1px" : "0",
           "--fs-clickable-border-style"    : props.borderStyle,
@@ -328,7 +328,7 @@ export default defineComponent({
 
     const classes = computed((): string[] => {
       const classNames: string[] = ["fs-clickable"];
-      if (!props.editable) {
+      if (props.disabled) {
         classNames.push("fs-clickable-disabled");
       }
       return classNames;
@@ -345,7 +345,7 @@ export default defineComponent({
     });
 
     const onClick = (event: MouseEvent) => {
-      if (!props.to && !props.href && props.editable && !props.load) {
+      if (!props.to && !props.href && !props.disabled && !props.load) {
         emit("click", event);
       }
     };

package/components/FSClock.vue

@@ -10,7 +10,8 @@
         type="number"
         hide-details
         :style="style"
-        :readonly="!$props.editable"
+        :disabled="$props.disabled"
+        :readonly="$props.readonly"
         :modelValue="innerHours.toString().padStart(2, '0')"
         @update:modelValue="onChangeHours"
       />
@@ -21,7 +22,8 @@
         type="number"
         hide-details
         :style="style"
-        :readonly="!$props.editable"
+        :disabled="$props.disabled"
+        :readonly="$props.readonly"
         :modelValue="innerMinutes.toString().padStart(2, '0')"
         @update:modelValue="onChangeMinutes"
       />
@@ -31,7 +33,8 @@
     >
       <FSSlider
         :label="$tr('ui.common.hours', 'Hours')"
-        :readonly="!$props.editable"
+        :disabled="$props.disabled"
+        :readonly="$props.readonly"
         :color="$props.color"
         :step="1"
         :max="23"
@@ -40,7 +43,8 @@
       />
       <FSSlider
         :label="$tr('ui.common.minutes', 'Minutes')"
-        :readonly="!$props.editable"
+        :disabled="$props.disabled"
+        :readonly="$props.readonly"
         :color="$props.color"
         :step="1"
         :max="59"
@@ -85,10 +89,15 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false
     },
     slider: {
       type: Boolean,
@@ -111,7 +120,7 @@ export default defineComponent({
     const innerMinutes = ref(0);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-clock-field-cursor"             : "default",
           "--fs-clock-field-background-color"   : backgrounds.base,

package/components/FSDialogFormBody.vue

@@ -43,7 +43,7 @@
               :appendIcon="$props.submitButtonAppendIcon"
               :variant="$props.submitButtonVariant"
               :color="$props.submitButtonColor"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :label="submitLabel"
               :load="$props.load"
             />
@@ -214,10 +214,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["click:cancelButton", "click:submitButton", "click:validateButton", "update:isValidForm"],

package/components/FSDialogMultiFormBody.vue

@@ -53,7 +53,7 @@
                 :appendIcon="$props.submitButtonAppendIcon"
                 :color="$props.submitButtonColor"
                 :variant="nextButtonVariant"
-                :editable="$props.editable"
+                :disabled="$props.disabled"
                 :label="nextButtonLabel"
                 :load="$props.load"
               />
@@ -174,10 +174,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["click:cancelButton", "click:submitButton"],

package/components/FSDialogSubmit.vue

@@ -47,7 +47,7 @@
               :appendIcon="$props.submitButtonAppendIcon"
               :variant="$props.submitButtonVariant"
               :color="$props.submitButtonColor"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :label="submitLabel"
               :load="$props.load"
               @click="$emit('click:submitButton')"
@@ -165,10 +165,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue", "click:submitButton"],

package/components/FSInstantPicker.vue

@@ -3,7 +3,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :label="$props.label"
   >
     <FSRow
@@ -15,6 +15,7 @@
         :label="$tr('ui.instant-picker.analyze-period', 'Analyze Period')"
         :startDate="$props.startDate"
         :endDate="$props.endDate"
+        :disabled="$props.disabled"
         @update:startDate="$emit('update:startDate', $event)"
         @update:endDate="$emit('update:endDate', $event)"
       />
@@ -27,6 +28,7 @@
         >
           <FSSlider
             minWidth='min(300px, 90vw)'
+            :disabled="$props.disabled"
             :color="ColorEnum.Light"
             :thumbColor="ColorEnum.Primary"
             :thumbSize="18"
@@ -72,6 +74,7 @@
         </FSCol>
         <FSPlayButtons
           v-if="$props.playable"
+          :disabled="$props.disabled"
           :modelValue="playing"
           @click:backward="onClickBackward"
           @click:forward="onClickForward"
@@ -85,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';
@@ -142,10 +145,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     playable: {
       type: Boolean,
@@ -166,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/FSOptionGroup.vue

@@ -7,7 +7,7 @@
     :style="style"
   >
     <template
-      v-if="props.values.length"
+      v-if="props.values && props.values.length"
     >
       <template
         v-if="!$slots.item"
@@ -15,7 +15,7 @@
         <FSOptionItem
           v-for="(item, index) in props.values"
           :padding="props.optionPadding"
-          :editable="props.editable"
+          :disabled="props.disabled"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
           :variant="getVariant(item)"
@@ -53,7 +53,7 @@
     :style="style"
   >
     <template
-      v-if="props.values.length"
+      v-if="props.values && props.values.length"
     >
       <template
         v-if="!$slots.item"
@@ -61,7 +61,7 @@
         <FSOptionItem
           v-for="(item, index) in props.values"
           :padding="props.optionPadding"
-          :editable="props.editable"
+          :disabled="props.disabled"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
           :variant="getVariant(item)"
@@ -101,7 +101,7 @@
     :wrap="false"
   >
     <template
-      v-if="props.values.length"
+      v-if="props.values && props.values.length"
     >
       <template
         v-if="!$slots.item"
@@ -109,7 +109,7 @@
         <FSOptionItem
           v-for="(item, index) in props.values"
           :padding="props.optionPadding"
-          :editable="props.editable"
+          :disabled="props.disabled"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
           :variant="getVariant(item)"
@@ -245,10 +245,10 @@ export default defineComponent({
       required: false,
       default: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/FSOptionItem.vue

@@ -1,6 +1,6 @@
 <template>
   <FSClickable
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :height="['32px', '28px']"
     :padding="$props.padding"
     :variant="$props.variant"
@@ -110,10 +110,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["click"],
@@ -123,7 +123,7 @@ export default defineComponent({
     const colors = computed(() => getColors(props.color));
 
     const onClick = (event: MouseEvent) => {
-      if (props.editable && !props.load) {
+      if (!props.disabled && !props.load) {
         emit("click", event);
       }
     };

package/components/FSPagination.vue

@@ -32,7 +32,7 @@ export default defineComponent({
   props: {
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
+      required: true,
       default: null
     },
     gap: {

package/components/FSRadio.vue

@@ -118,10 +118,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -135,7 +135,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-radio-cursor"     : "default",
           "--fs-radio-radio-color": props.selected ? colors.value.light : lights.base,
@@ -163,7 +163,7 @@ export default defineComponent({
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     const onToggle = (): void => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       if (!props.selected) {

package/components/FSRadioGroup.vue

@@ -7,7 +7,7 @@
       v-for="(item, index) in $props.values"
       :selected="isSelected(item.value)"
       :description="item.description"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :color="$props.color"
       :label="item.label"
       :item="item.item"
@@ -63,10 +63,10 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
   },
   emits: ["update:modelValue"],

package/components/FSSlider.vue

@@ -29,7 +29,7 @@
     <v-slider
       class="fs-slider"
       hide-details
-      :disabled="!$props.editable"
+      :disabled="$props.disabled"
       :ripple="false"
       :style="style"
       :elevation="0"
@@ -107,10 +107,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   setup(props) {
@@ -121,7 +121,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-slider-cursor"     : "default",
           "--fs-slider-track-color": lights.base,

package/components/FSSwitch.vue

@@ -15,6 +15,7 @@
         :rules="$props.rules"
         :ripple="false"
         :style="style"
+        :disabled="$props.disabled"
         :modelValue="$props.modelValue"
         @update:modelValue="onToggle"
         v-bind="$attrs"
@@ -51,6 +52,7 @@
           class="fs-switch"
           hide-details
           inset
+          :disabled="$props.disabled"
           :validateOn="validateOn"
           :rules="$props.rules"
           :ripple="false"
@@ -117,10 +119,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -135,7 +137,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
           "--fs-switch-cursor"     : "default",
@@ -167,7 +169,7 @@ export default defineComponent({
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     const onToggle = (): void => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       emit("update:modelValue", !props.modelValue);

package/components/FSTag.vue

@@ -23,7 +23,7 @@
       v-bind="{ color: $props.color, colors }"
     >
       <v-btn
-        v-if="$props.editable"
+        v-if="$props.showRemove"
         class="fs-tag-button"
         :ripple="false"
         @click="$emit('remove')"
@@ -81,7 +81,7 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
-    editable: {
+    showRemove: {
       type: Boolean,
       required: false,
       default: true

package/components/FSTagGroup.vue

@@ -6,7 +6,7 @@
     <FSTag
       v-for="(tag, index) in $props.tags"
       :variant="$props.tagVariant"
-      :editable="$props.editable"
+      :showRemove="$props.showRemove"
       :color="$props.color"
       :label="tag"
       :key="index"
@@ -21,7 +21,7 @@
     <FSTag
       v-for="(tag, index) in $props.tags"
       :variant="$props.tagVariant"
-      :editable="$props.editable"
+      :showRemove="$props.showRemove"
       :color="$props.color"
       :label="tag"
       :key="index"
@@ -66,7 +66,7 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
-    editable: {
+    showRemove: {
       type: Boolean,
       required: false,
       default: true