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

package/components/buttons/FSButtonCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :prependIcon="prependIcon"
     :load="$props.load"
     :variant="variant"
@@ -40,10 +40,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update:modelValue"],
@@ -57,7 +57,7 @@ export default defineComponent({
     });
 
     const onClick = (): void => {
-      if (!props.disabled && !props.load) {
+      if (props.editable && !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"
-      :disabled="$props.disabled"
+      :editable="$props.editable"
       :required="$props.required"
       :label="$props.label"
       :rules="$props.rules"
@@ -63,7 +63,7 @@
             name="clear"
           >
             <FSButton
-              v-if="$props.clearable && !$props.disabled && !!$props.modelValue"
+              v-if="$props.clearable && $props.editable && !!$props.modelValue"
               icon="mdi-close"
               variant="icon"
               :color="ColorEnum.Dark"
@@ -78,7 +78,7 @@
         <FSButton
           icon="mdi-chevron-down"
           variant="icon"
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :color="ColorEnum.Dark"
           @click="openMobileOverlay"
         />
@@ -174,14 +174,14 @@
                 />
                 <FSCheckbox
                   v-if="$props.multiple"
-                  :disabled="$props.disabled"
+                  :editable="$props.editable"
                   :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"
+                  :editable="$props.editable"
                   :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"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :label="$props.label"
     :messages="messages"
   >
     <FSToggleSet
       v-if="$props.toggleSet"
-      :disabled="$props.disabled"
+      :editable="$props.editable"
       :multiple="$props.multiple"
       :required="$props.required"
       :values="$props.items"
@@ -248,11 +248,10 @@
       <v-autocomplete
         class="fs-autocomplete-field"
         variant="outlined"
-        :clearable="$props.clearable && !$props.disabled && !!$props.modelValue"
+        :clearable="$props.clearable && $props.editable && !!$props.modelValue"
         :itemTitle="$props.itemTitle"
         :itemValue="$props.itemValue"
-        :disabled="$props.disabled"
-        :readonly="$props.readonly"
+        :readonly="!$props.editable"
         :multiple="$props.multiple"
         :validateOn="validateOn"
         :autoSelectFirst="true"
@@ -367,7 +366,7 @@
               name="clear"
             >
               <FSButton
-                v-if="$props.clearable && !$props.disabled && !!$props.modelValue"
+                v-if="$props.clearable && $props.editable && !!$props.modelValue"
                 icon="mdi-close"
                 variant="icon"
                 :color="ColorEnum.Dark"
@@ -385,7 +384,7 @@
             <FSButton
               icon="mdi-chevron-down"
               variant="icon"
-              :disabled="$props.disabled"
+              :editable="$props.editable"
               :color="ColorEnum.Dark"
             />
           </slot>
@@ -564,15 +563,10 @@ export default defineComponent({
       required: false,
       default: true
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      required: false,
-      default: false
+      default: true
     },
     loading: {
       type: Boolean,
@@ -610,7 +604,7 @@ export default defineComponent({
     const showExtra = ref(true);
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         return {
           "--fs-autocomplete-field-cursor"             : "default",
           "--fs-autocomplete-field-border-color"       : lights.base,
@@ -709,7 +703,7 @@ export default defineComponent({
     });
 
     const openMobileOverlay = () => {
-      if (props.disabled) {
+      if (!props.editable) {
         return;
       }
       dialog.value = true;

package/components/fields/FSBaseField.vue

@@ -105,10 +105,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     minWidth: {
       type: String,
@@ -128,7 +128,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         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"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :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.disabled }"
+      :class="{ 'fs-color-field-disabled': !$props.editable }"
     >
       <FSRow
         align="center-center"
@@ -39,7 +39,7 @@
     min-width="300px"
     :activator="`#${activatorId}`"
     :closeOnContentClick="false"
-    :modelValue="menu && !$props.disabled"
+    :modelValue="menu && $props.editable"
     @update:modelValue="menu = $event"
   >
     <FSCard
@@ -131,10 +131,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     allowOpacity: {
       type: Boolean,
@@ -170,7 +170,7 @@ export default defineComponent({
     const fullColor = ref("#00000000");
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         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"
-        :disabled="$props.disabled"
+        :editable="$props.editable"
         :readonly="true"
         :rules="$props.rules"
         :messages="messages"
@@ -29,7 +29,7 @@
             <FSButton
               variant="icon"
               icon="mdi-calendar"
-              :disabled="$props.disabled"
+              :editable="$props.editable"
               :color="ColorEnum.Dark"
               @click="openMobileOverlay"
             />
@@ -74,7 +74,7 @@
       <v-menu
         min-width="300px"
         :closeOnContentClick="false"
-        :modelValue="menu && $props.disabled"
+        :modelValue="menu && $props.editable"
         @update:modelValue="menu = $event"
       >
         <template
@@ -87,7 +87,7 @@
             :color="$props.color"
             :hideHeader="$props.hideHeader"
             :required="$props.required"
-            :disabled="$props.disabled"
+            :editable="$props.editable"
             :readonly="true"
             :rules="$props.rules"
             :messages="messages"
@@ -106,7 +106,7 @@
                 <FSButton
                   variant="icon"
                   icon="mdi-calendar"
-                  :disabled="$props.disabled"
+                  :editable="$props.editable"
                   :color="ColorEnum.Dark"
                 />
               </slot>
@@ -208,10 +208,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update:modelValue"],
@@ -228,7 +228,7 @@ export default defineComponent({
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const openMobileOverlay = () => {
-      if (props.disabled) {
+      if (!props.editable) {
         return;
       }
       dialog.value = true;

package/components/fields/FSDateRangeField.vue

@@ -6,7 +6,7 @@
     :color="$props.color"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :readonly="true"
     :rules="$props.rules"
     :messages="messages"
@@ -26,7 +26,7 @@
         <FSButton
           variant="icon"
           icon="mdi-calendar"
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :color="ColorEnum.Dark"
         />
       </slot>
@@ -115,10 +115,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   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.disabled) {
+      if (props.editable) {
         dialog.value = true;
       }
     };

package/components/fields/FSDateTimeField.vue

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

package/components/fields/FSDateTimeRangeField.vue

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

package/components/fields/FSEntityFieldUI.vue

@@ -3,7 +3,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :label="$props.label"
     :messages="messages"
   >
@@ -14,7 +14,7 @@
         :wrap="false"
       >
         <FSSelectField
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :items="actualEntityTypes"
           :hideHeader="true"
           :clearable="false"
@@ -27,7 +27,7 @@
           <FSButton
             icon="mdi-pencil"
             :label="$tr('ui.common.edit', 'Edit')"
-            :disabled="$props.disabled"
+            :editable="$props.editable"
             @click="$emit('click:select')"
           />
         </template>
@@ -37,7 +37,7 @@
           <FSButton
             icon="mdi-plus-circle-multiple-outline"
             :label="$tr('ui.common.select', 'Select')"
-            :disabled="$props.disabled"
+            :editable="$props.editable"
             @click="$emit('click:select')"
           />
         </template>
@@ -170,10 +170,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     entityType: {
       type: Number as PropType<EntityType>,

package/components/fields/FSGradientField.vue

@@ -6,7 +6,7 @@
       :label="$props.label"
       :description="$props.description"
       :required="$props.required"
-      :disabled="$props.disabled"
+      :editable="$props.editable"
       v-bind="$attrs"
     >
       <FSRow>
@@ -15,14 +15,14 @@
           :allowOpacity="$props.allowOpacity"
           :modelValue="$props.modelValue[colorIndex - 1]"
           :required="$props.required"
-          :disabled="$props.disabled"
+          :editable="$props.editable"
           :key="colorIndex"
           @update:modelValue="$emit('update:modelValue', $props.modelValue.map((color, i) => colorIndex === i + 1 ? $event : color))"
         />
       </FSRow>
       <FSSelectField
         class="fs-gradient-field-select"
-        :disabled="$props.disabled"
+        :editable="$props.editable"
         :clearable="false"
         :items="items"
         modelValue="custom"
@@ -92,10 +92,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     allowOpacity: {
       type: Boolean,

package/components/fields/FSIconField.vue

@@ -5,7 +5,7 @@
       :description="$props.description"
       :hideHeader="$props.hideHeader"
       :required="$props.required"
-      :disabled="$props.disabled"
+      :editable="$props.editable"
       :rules="$props.rules"
       :messages="messages"
       :validateOn="validateOn"
@@ -34,7 +34,7 @@
       :activeColor="$props.activeColor"
       :modelValue="$props.modelValue"
       :required="$props.required"
-      :disabled="$props.disabled"
+      :editable="$props.editable"
       :values="icons"
       @update:modelValue="$emit('update:modelValue', $event)"
     />
@@ -42,7 +42,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType, StyleValue } from "vue";
+import type { PropType} from "vue";
 import { computed, defineComponent, ref, watch } from "vue";
 
 import { Icons, sortByLevenshteinDistance } from "@dative-gpi/foundation-shared-components/utils";
@@ -119,10 +119,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["update:modelValue"],
@@ -138,7 +138,7 @@ export default defineComponent({
     const innerValue = ref<string | null>(null);
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         return {
           "--fs-icon-field-color": lights.dark
         };

package/components/fields/FSMagicConfigField.vue

@@ -3,11 +3,10 @@
     class="fs-magic-config-field"
   >
     <component
-      v-if="$props.type"
       class="fs-magic-config-field-value"
       :is="get($props.type)"
       :label="$tr('ui.common.value', 'Value')"
-      :disabled="$props.disabled"
+      :editable="$props.editable"
       :required="true"
       :rules="rules"
       :modelValue="valueToInput"
@@ -18,7 +17,7 @@
     >
       <FSTranslateField
         :label="$tr('ui.common.label', 'Label')"
-        :disabled="$props.disabled"
+        :editable="$props.editable"
         :modelValue="$props.labelDefault"
         :translations="$props.translations"
         @update:modelValue="$emit('update:labelDefault', $event)"
@@ -81,10 +80,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   emits: ["click:remove", "click:add", "update:modelValue", "update:labelDefault", "update:translations"],

package/components/fields/FSNumberField.vue

@@ -2,7 +2,7 @@
   <FSTextField
     class="fs-number-field"
     minWidth="80px"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :modelValue="$props.modelValue?.toString()"
     @update:modelValue="onUpdate"
     v-bind="$attrs"
@@ -35,7 +35,7 @@ export default defineComponent({
       required: false,
       default: null
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
       default: true

package/components/fields/FSPasswordField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSTextField
     :type="type"
-    :disabled="$props.disabled"
+    :editable="$props.editable"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -20,7 +20,7 @@
     >
       <FSButton
         variant="icon"
-        :disabled="$props.disabled"
+        :editable="$props.editable"
         :color="ColorEnum.Dark"
         :icon="icon"
         @click="onToggle"
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, type PropType, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -53,7 +53,7 @@ export default defineComponent({
       required: false,
       default: null
     },
-    disabled: {
+    editable: {
       type: Boolean,
       required: false,
       default: true
@@ -69,7 +69,7 @@ export default defineComponent({
     const stars = ref(true);
 
     const style = computed((): StyleValue => {
-      if (props.disabled) {
+      if (!props.editable) {
         return {
           "--fs-password-field-cursor"   : "default",
           "--fs-password-field-color": lights.dark,
@@ -88,7 +88,7 @@ export default defineComponent({
     const icon = computed((): string => stars.value ? "mdi-eye-off-outline" : "mdi-eye-outline");
 
     const onToggle = (): void => {
-      if (props.disabled) {
+      if (!props.editable) {
         return;
       }
       stars.value = !stars.value;