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

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

package/components/lists/FSDataTableUI.vue

@@ -112,7 +112,7 @@
             :label="$tr('data-table.reset-filters', 'Reset')"
             :height="['30px', '24px']"
             :color="ColorEnum.Error"
-            :editable="true"
+            :clickable="true"
             @click="resetFilter"
           />
           <FSHiddenButton
@@ -478,18 +478,20 @@
               >
                 <FSDataIteratorItem
                   v-if="item.type === 'item'"
-                  :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
+                  :leftColor="$props.rowColor ? $props.rowColor(item.raw) : null"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :clickable="onClickLibrary.clickable"
-                  :showSelect="$props.showSelect"
-                  :itemTo="$props.itemTo"
-                  :color="$props.color"
+                  :selectable="$props.showSelect"
+                  :singleSelect="$props.singleSelect"
+                  :to="$props.itemTo"
+                  :bottomColor="$props.color"
                   :item="item.raw"
                   :key="index"
-                  :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
-                  @update:modelValue="toggleSelect"
-                  @auxclick="() => onClickLibrary.mobile($event, item)"
-                  @click="() => onClickLibrary.mobile($event, item)"
+                  :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
+                  @update:modelValue="toggleSelect(item.raw)"
+                  v-bind="onClickLibrary.clickable ? {
+                    onClick: (event) => onClickLibrary.mobile(event, item),
+                    onAuxclick: (event) => onClickLibrary.mobile(event, item)
+                  } : {}"
                 >
                   <template
                     #item.top="props"
@@ -649,18 +651,20 @@
                 v-bind="{ index, item: item.raw, toggleSelect }"
               >
                 <FSDataIteratorItem
-                  :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
+                  :leftColor="$props.rowColor ? $props.rowColor(item.raw) : null"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :clickable="onClickLibrary.clickable"
-                  :showSelect="$props.showSelect"
-                  :itemTo="$props.itemTo"
-                  :color="$props.color"
+                  :selectable="$props.showSelect"
+                  :singleSelect="$props.singleSelect"
+                  :to="$props.itemTo"
+                  :bottomColor="$props.color"
                   :item="item.raw"
                   :key="index"
-                  :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
-                  @update:modelValue="toggleSelect"
-                  @auxclick="() => onClickLibrary.mobile($event, item)"
-                  @click="() => onClickLibrary.mobile($event, item)"
+                  :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
+                  @update:modelValue="toggleSelect(item.raw)"
+                  v-bind="onClickLibrary.clickable ? {
+                    onClick: (event) => onClickLibrary.mobile(event, item),
+                    onAuxclick: (event) => onClickLibrary.mobile(event, item)
+                  } : {}"
                 >
                   <template
                     #item.top="props"
@@ -1126,6 +1130,7 @@ export default defineComponent({
     });
 
     const onClickLibrary = computed((): { [key: string]: Function | boolean } => {
+      console.log(props["onClick:row"]);
       if (props["onClick:row"] || props.itemTo) {
         return {
           clickable: true,

package/components/lists/FSFilterButton.vue

@@ -12,7 +12,7 @@
         variant="standard"
         :height="['30px', '24px']"
         :color="ColorEnum.Dark"
-        :editable="true"
+        :clickable="true"
         :label="label"
         v-bind="props"
       />
@@ -40,7 +40,7 @@
             :height="['30px', '24px']"
             :variant="getAllVariant()"
             :color="$props.color"
-            :editable="true"
+            :clickable="true"
             @click="onToggleAll"
           />
           <FSDivider />
@@ -63,7 +63,7 @@
               :height="['30px', '24px']"
               :color="$props.color"
               :label="filter.text"
-              :editable="true"
+              :clickable="true"
               :key="index"
               @click="() => onToggle(filter)"
             >

package/components/lists/FSHeaderButton.vue

@@ -35,7 +35,7 @@
             variant="borderless"
             :label="$tr('data-table.hide-column', 'Hide column')"
             :height="[30, 24]"
-            :editable="true"
+            :clickable="true"
             @click="$emit('update:hide')"
           />
           <FSChip
@@ -45,7 +45,7 @@
             prependIcon="mdi-chevron-left"
             :label="$tr('data-table.move-left', 'Move to the left')"
             :height="[30, 24]"
-            :editable="true"
+            :clickable="true"
             @click="$emit('update:left')"
           />
           <FSChip
@@ -55,7 +55,7 @@
             prependIcon="mdi-chevron-right"
             :label="$tr('data-table.move-right', 'Move to the right')"
             :height="[30, 24]"
-            :editable="true"
+            :clickable="true"
             @click="$emit('update:right')"
           />
         </FSCol>

package/components/lists/FSHiddenButton.vue

@@ -10,7 +10,7 @@
         prependIcon="mdi-eye-off-outline"
         :height="[30, 24]"
         :color="ColorEnum.Light"
-        :editable="true"
+        :clickable="true"
         :label="$tr('data-table.hidden-columns', '{0} hidden column(s)', $props.headers.length.toString())"
         v-bind="props"
       />
@@ -46,7 +46,7 @@
               :height="['30px', '24px']"
               :color="$props.color"
               :label="header.text"
-              :editable="true"
+              :clickable="true"
               :key="index"
               @click="$emit('update:show', header)"
             >