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

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);

package/components/fields/FSTranslateTextArea.vue

@@ -1,6 +1,6 @@
 <template>
   <FSTextArea
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -45,7 +45,7 @@
       >
         <FSTextArea
           :label="$tr('ui.common.default-value', 'Default value')"
-          :editable="false"
+          :disabled="true"
           :rows="($attrs.rows as number)"
           :modelValue="$props.modelValue"
         />
@@ -54,7 +54,7 @@
         >
           <FSTextArea
             v-for="(language, index) in languages"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :key="index"
             :modelValue="getTranslation(language.code)"
             :rows="($attrs.rows as number)"
@@ -151,10 +151,10 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue", "update:translations"],
@@ -170,7 +170,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
         };
@@ -213,7 +213,7 @@ export default defineComponent({
 
     const onSubmit = (): void => {
       dialog.value = false;
-      if (props.editable) {
+      if (!props.disabled) {
         emit("update:translations", innerTranslations.value);
       }
     };

package/components/fields/FSTreeViewField.vue

@@ -27,7 +27,7 @@
           :description="$props.description"
           :hideHeader="$props.hideHeader"
           :clearable="$props.clearable"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :required="$props.required"
           :validateOn="validateOn"
           :label="$props.label"
@@ -79,7 +79,7 @@
                   <FSCheckbox
                     v-if="$props.multiple"
                     :class="listItemClass(item[$props.itemValue])"
-                    :editable="$props.editable"
+                    :disabled="$props.disabled"
                     :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
                     @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
                   >
@@ -101,7 +101,7 @@
                     v-if="!$props.multiple"
                     :selected="$props.modelValue === item[$props.itemValue]"
                     :class="listItemClass(item[$props.itemValue])"
-                    :editable="$props.editable"
+                    :disabled="$props.disabled"
                     :modelValue="item[$props.itemValue]"
                     @update:modelValue="onRadioChange"
                   >
@@ -133,7 +133,7 @@
       >
         <v-menu
           :closeOnContentClick="false"
-          :modelValue="menu && $props.editable"
+          :modelValue="menu && !$props.disabled"
           @update:modelValue="menu = $event"
         >
           <template
@@ -145,7 +145,7 @@
               :description="$props.description"
               :hideHeader="$props.hideHeader"
               :clearable="$props.clearable"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :required="$props.required"
               :validateOn="validateOn"
               :label="$props.label"
@@ -188,7 +188,7 @@
               <FSCheckbox
                 v-if="$props.multiple"
                 :class="listItemClass(item[$props.itemValue])"
-                :editable="$props.editable"
+                :disabled="$props.disabled"
                 :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
                 @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
               >
@@ -210,7 +210,7 @@
                 v-if="!$props.multiple"
                 :selected="$props.modelValue === item[$props.itemValue]"
                 :class="listItemClass(item[$props.itemValue])"
-                :editable="$props.editable"
+                :disabled="$props.disabled"
                 :modelValue="item[$props.itemValue]"
                 @update:modelValue="onRadioChange"
               >
@@ -338,10 +338,10 @@ export default defineComponent({
       required: false,
       default: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     loading: {
       type: Boolean,
@@ -366,7 +366,7 @@ export default defineComponent({
     const menu = ref(false);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-tree-view-field-cursor": "default"
         };
@@ -462,7 +462,7 @@ export default defineComponent({
     };
 
     const openMobileOverlay = () => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       dialog.value = true;

package/components/fields/periodicField/FSPeriodicDailyField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSRadioGroup
     :values="availableConfigurations"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     v-model="selectedConfiguration"
   >
     <template
@@ -17,7 +17,7 @@
           {{ $tr('ui.common.every', 'Every') }}
         </FSSpan>
         <FSNumberField
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :modelValue="days"
           :hideHeader="true"
           :clearable="false"
@@ -29,7 +29,7 @@
           {{ $tr('periodic-field.daysat', 'day(s) at') }}
         </FSSpan>
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :modelValue="time"
           :hideHeader="true"
@@ -66,10 +66,10 @@ export default defineComponent({
       type: Array<string>,
       required: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/fields/periodicField/FSPeriodicField.vue

@@ -5,7 +5,7 @@
   >
     <FSRadioGroup
       :values="availablePeriod"
-      :editable="editable"
+      :disabled="disabled"
       v-model="selectedPeriod"
     />
     <FSRow
@@ -19,25 +19,25 @@
       />
       <FSPeriodicDailyField
         v-if="selectedPeriod === 'daily'"
-        :editable="editable"
+        :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicWeeklyField
         v-else-if="selectedPeriod === 'weekly'"
-        :editable="editable"
+        :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicMonthlyField
         v-else-if="selectedPeriod === 'monthly'"
-        :editable="editable"
+        :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicYearlyField
         v-else-if="selectedPeriod === 'yearly'"
-        :editable="editable"
+        :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
@@ -74,10 +74,10 @@ export default defineComponent({
       type: String as PropType<string>,
       required: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/fields/periodicField/FSPeriodicMonthlyField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSRadioGroup
     :values="availableConfigurations"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     v-model="selectedConfiguration"
   >
     <template
@@ -17,7 +17,7 @@
           {{ $tr("ui.common.day", "Day") }}
         </FSSpan>
         <FSSelectField
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :items="dayNumbers"
           :hideHeader="true"
           :clearable="false"
@@ -30,7 +30,7 @@
           {{ $tr("periodic-monthly-field.every-month-at", "every month at") }}
         </FSSpan>
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :hideHeader="true"
           :slider="false"
@@ -48,7 +48,7 @@
           {{ $tr("ui.common.every", "Every") }}
         </FSSpan>
         <FSSelectField
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :items="dayWeekNumbers"
           :hideHeader="true"
           :clearable="false"
@@ -56,7 +56,7 @@
           @update:modelValue="onUpdateDayWeekNumber($event)"
         />
         <FSSelectDays
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :useAllDays="false"
           :hideHeader="true"
           :modelValue="dayWeek"
@@ -68,7 +68,7 @@
           {{ $tr("ui.common.at", "at") }}
         </FSSpan>
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :hideHeader="true"
           :slider="false"
@@ -108,10 +108,10 @@ export default defineComponent({
       type: Array<string>,
       required: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/fields/periodicField/FSPeriodicWeeklyField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSRadioGroup
     :values="availableConfigurations"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     v-model="selectedConfiguration"
   >
     <template
@@ -19,7 +19,7 @@
         <FSSelectDays
           width="200px"
           :placeholder="$tr('ui.common.selected-days', '{0} selected day(s)', days.length)"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :multiple="true"
           :useAllDays="false"
           :hideHeader="true"
@@ -32,7 +32,7 @@
           {{ $tr("ui.common.at", "at") }}
         </FSSpan>
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :hideHeader="true"
           :slider="false"
@@ -69,10 +69,10 @@ export default defineComponent({
       type: Array<string>,
       required: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/fields/periodicField/FSPeriodicYearlyField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSRadioGroup
     :values="availableConfigurations"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     v-model="selectedConfiguration"
   >
     <template
@@ -17,14 +17,14 @@
           {{ $tr("ui.common.every-year", "Every year") }}
         </FSSpan>
         <FSSelectMonths
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :useAllMonths="false"
           :hideHeader="true"
           :modelValue="month"
           @update:modelValue="onUpdateMonth($event)"
         />
         <FSNumberField
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :hideHeader="true"
           :clearable="false"
           :modelValue="day"
@@ -36,7 +36,7 @@
           {{ $tr("ui.common.at", "at") }}
         </FSSpan>
         <FSClock
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Light"
           :hideHeader="true"
           :slider="false"
@@ -75,10 +75,10 @@ export default defineComponent({
       type: Array<string>,
       required: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/lists/FSDataIteratorItem.vue

@@ -1,13 +1,15 @@
 <template>
-  <FSCard
-    class="fs-data-iterator-item"
-    padding="12px"
-    width="100%"
-    :color="$props.itemColor"
-    :variant="variant"
-    :style="style"
+  <FSTile
+    :width="$props.width"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
   >
-    <FSCol>
+    <FSCol
+      height="fill"
+      style="overflow: hidden;"
+      align="top-left"
+    >
       <slot
         name="item.top"
         v-bind="{ item: $props.item }"
@@ -52,37 +54,22 @@
         v-bind="{ item: $props.item }"
       />
     </FSCol>
-    <FSCard
-      v-if="$props.showSelect"
-      class="fs-data-iterator-item-checkbox"
-      :color="$props.itemColor"
-      :variant="variant"
-      :border="false"
-    >
-      <FSCheckbox
-        :color="$props.color"
-        :modelValue="$props.modelValue"
-        @update:modelValue="() => $emit('update:modelValue', $props.item)"
-      />
-    </FSCard>
-  </FSCard>
+  </FSTile>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { ColorEnum, type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
+import { type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
-import FSCheckbox from "../FSCheckbox.vue";
-import FSCard from "../FSCard.vue";
-import FSText from "../FSText.vue";
 import FSRow from "../FSRow.vue";
+import FSText from "../FSText.vue";
+import FSTile from '../tiles/FSTile.vue';
 
 export default defineComponent({
   name: "FSDataIteratorItem",
   components: {
-    FSCheckbox,
-    FSCard,
+    FSTile,
     FSText,
     FSRow
   },
@@ -95,53 +82,22 @@ export default defineComponent({
       type: Object,
       required: true
     },
-    itemTo: {
-      type: Function,
-      required: false,
-      default: null
-    },
     modelValue: {
       type: Boolean,
       required: false,
       default: false
     },
-    itemColor: {
-      type: String as PropType<ColorEnum>,
-      required: false,
-      default: ColorEnum.Background
-    },
-    color: {
-      type: String as PropType<ColorEnum>,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: ColorEnum.Primary
+      default: () => [352, 336]
     },
-    clickable: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    showSelect: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
   },
-  setup(props) {
-    const variant = computed((): "standard" | "background" => {
-      switch (props.itemColor) {
-        case ColorEnum.Background:
-        case null: return "background";
-        default:   return "standard";
-      }
-    });
-
-    const style = computed((): StyleValue => ({
-      "--fs-data-iterator-item-cursor": props.clickable ? "pointer" : "default"
-    }));
-
+  emits: [
+    "update:modelValue"
+  ],
+  setup() {
     return {
-      variant,
-      style
     };
   }
 });