@dative-gpi/foundation-shared-components 1.0.139-editablerefacto-2 → 1.0.139-reportV1

package/components/FSButton.vue

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

package/components/FSCheckbox.vue

@@ -114,10 +114,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update:modelValue"],
@@ -131,7 +131,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         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.disabled) {
+      if (!props.editable) {
         return;
       }
       emit("update:modelValue", !props.modelValue);

package/components/FSChip.vue

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

package/components/FSClickable.vue

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

package/components/FSClock.vue

@@ -10,8 +10,7 @@
         type="number"
         hide-details
         :style="style"
-        :disabled="$props.disabled"
-        :readonly="$props.readonly"
+        :readonly="!$props.editable"
         :modelValue="innerHours.toString().padStart(2, '0')"
         @update:modelValue="onChangeHours"
       />
@@ -22,8 +21,7 @@
         type="number"
         hide-details
         :style="style"
-        :disabled="$props.disabled"
-        :readonly="$props.readonly"
+        :readonly="!$props.editable"
         :modelValue="innerMinutes.toString().padStart(2, '0')"
         @update:modelValue="onChangeMinutes"
       />
@@ -33,8 +31,7 @@
     >
       <FSSlider
         :label="$tr('ui.common.hours', 'Hours')"
-        :disabled="$props.disabled"
-        :readonly="$props.readonly"
+        :readonly="!$props.editable"
         :color="$props.color"
         :step="1"
         :max="23"
@@ -43,8 +40,7 @@
       />
       <FSSlider
         :label="$tr('ui.common.minutes', 'Minutes')"
-        :disabled="$props.disabled"
-        :readonly="$props.readonly"
+        :readonly="!$props.editable"
         :color="$props.color"
         :step="1"
         :max="59"
@@ -89,15 +85,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      required: false,
-      default: false
+      default: true
     },
     slider: {
       type: Boolean,
@@ -120,7 +111,7 @@ export default defineComponent({
     const innerMinutes = ref(0);
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         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"
-              :disabled="$props.disabled"
+              :editable="$props.editable"
               :label="submitLabel"
               :load="$props.load"
             />
@@ -214,10 +214,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   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"
-                :disabled="$props.disabled"
+                :editable="$props.editable"
                 :label="nextButtonLabel"
                 :load="$props.load"
               />
@@ -174,10 +174,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["click:cancelButton", "click:submitButton"],

package/components/FSDialogSubmit.vue

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

package/components/FSInstantPicker.vue

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

package/components/FSOptionGroup.vue

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

package/components/FSOptionItem.vue

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

package/components/FSRadio.vue

@@ -118,10 +118,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update:modelValue"],
@@ -135,7 +135,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         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.disabled) {
+      if (!props.editable) {
         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"
-      :disabled="$props.disabled"
+      :editable="$props.editable"
       :color="$props.color"
       :label="item.label"
       :item="item.item"
@@ -63,10 +63,10 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
   },
   emits: ["update:modelValue"],

package/components/FSSlider.vue

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

package/components/FSSwitch.vue

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

package/components/FSTagGroup.vue

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

package/components/FSToggleSet.vue

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