@dative-gpi/foundation-shared-components 1.0.139-editablerefacto-3 → 1.0.139-richtextfield

package/components/lists/FSDataTableUI.vue

@@ -112,7 +112,7 @@
             :label="$tr('data-table.reset-filters', 'Reset')"
             :height="['30px', '24px']"
             :color="ColorEnum.Error"
-            :clickable="true"
+            :editable="true"
             @click="resetFilter"
           />
           <FSHiddenButton
@@ -478,20 +478,18 @@
               >
                 <FSDataIteratorItem
                   v-if="item.type === 'item'"
-                  :leftColor="$props.rowColor ? $props.rowColor(item.raw) : null"
+                  :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :selectable="$props.showSelect"
-                  :singleSelect="$props.singleSelect"
-                  :to="$props.itemTo"
-                  :bottomColor="$props.color"
+                  :clickable="onClickLibrary.clickable"
+                  :showSelect="$props.showSelect"
+                  :itemTo="$props.itemTo"
+                  :color="$props.color"
                   :item="item.raw"
                   :key="index"
-                  :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)
-                  } : {}"
+                  :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
+                  @update:modelValue="toggleSelect"
+                  @auxclick="() => onClickLibrary.mobile($event, item)"
+                  @click="() => onClickLibrary.mobile($event, item)"
                 >
                   <template
                     #item.top="props"
@@ -651,20 +649,18 @@
                 v-bind="{ index, item: item.raw, toggleSelect }"
               >
                 <FSDataIteratorItem
-                  :leftColor="$props.rowColor ? $props.rowColor(item.raw) : null"
+                  :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :selectable="$props.showSelect"
-                  :singleSelect="$props.singleSelect"
-                  :to="$props.itemTo"
-                  :bottomColor="$props.color"
+                  :clickable="onClickLibrary.clickable"
+                  :showSelect="$props.showSelect"
+                  :itemTo="$props.itemTo"
+                  :color="$props.color"
                   :item="item.raw"
                   :key="index"
-                  :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)
-                  } : {}"
+                  :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
+                  @update:modelValue="toggleSelect"
+                  @auxclick="() => onClickLibrary.mobile($event, item)"
+                  @click="() => onClickLibrary.mobile($event, item)"
                 >
                   <template
                     #item.top="props"
@@ -1130,7 +1126,6 @@ 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"
-        :clickable="true"
+        :editable="true"
         :label="label"
         v-bind="props"
       />
@@ -40,7 +40,7 @@
             :height="['30px', '24px']"
             :variant="getAllVariant()"
             :color="$props.color"
-            :clickable="true"
+            :editable="true"
             @click="onToggleAll"
           />
           <FSDivider />
@@ -63,7 +63,7 @@
               :height="['30px', '24px']"
               :color="$props.color"
               :label="filter.text"
-              :clickable="true"
+              :editable="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]"
-            :clickable="true"
+            :editable="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]"
-            :clickable="true"
+            :editable="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]"
-            :clickable="true"
+            :editable="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"
-        :clickable="true"
+        :editable="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"
-              :clickable="true"
+              :editable="true"
               :key="index"
               @click="$emit('update:show', header)"
             >

package/components/lists/FSSimpleListItem.vue

@@ -3,7 +3,7 @@
     v-bind="$props.tileProps"
     :width="$props.width"
     height="fit-content"
-    :selectable="false"
+    :editable="false"
   >
     <slot
       name="item"

package/components/tiles/FSChartTileUI.vue

@@ -2,6 +2,7 @@
   <FSTile
     :width="['275px','336px']"
     :height="['124px','156px']"
+    :editable="$props.editable"
     borderRadius="8px"
     v-bind="$attrs"
   >
@@ -99,6 +100,11 @@ export default defineComponent({
       type: Number as PropType<ChartType>,
       required: false,
       default: ChartType.None
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup() {

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -2,6 +2,7 @@
   <FSTile
     :activeColor="ColorEnum.Primary"
     :bottomColor="ColorEnum.Primary"
+    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -146,6 +147,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup(props) {

package/components/tiles/FSGroupTileUI.vue

@@ -2,6 +2,7 @@
   <FSTile
     :activeColor="ColorEnum.Primary"
     :bottomColor="ColorEnum.Error"
+    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -168,6 +169,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,

package/components/tiles/FSLoadTile.vue

@@ -40,7 +40,7 @@
       />
     </FSRow>
     <FSCard
-      v-if="$props.selectable"
+      v-if="$props.editable"
       class="fs-tile-checkbox"
       :height="['40px', '32px']"
       :width="['40px', '32px']"
@@ -48,7 +48,6 @@
     >
       <FSCheckbox
         :modelValue="$props.modelValue"
-        :disabled="true"
         @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
       />
     </FSCard>
@@ -82,7 +81,7 @@ export default defineComponent({
       required: false,
       default: false
     },
-    selectable: {
+    editable: {
       type: Boolean,
       required: false,
       default: false

package/components/tiles/FSServiceAccountOrganisationTileUI.vue

@@ -1,6 +1,7 @@
 <template>
   <FSTile
     :activeColor="ColorEnum.Primary"
+    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -107,6 +108,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup(props) {

package/components/tiles/FSSimpleTileUI.vue

@@ -2,6 +2,7 @@
   <FSTile 
     :activeColor="$props.activeColor"
     :bottomColor="$props.bottomColor"
+    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -135,6 +136,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup(props) {

package/components/tiles/FSTile.vue

@@ -5,7 +5,24 @@
     :width="$props.width"
   >
     <FSClickable
-      v-if="($props.href || $props.to || $attrs.onClick)"
+      v-if="$props.editable && $props.singleSelect"
+      padding="12px"
+      :variant="variant"
+      :color="color"
+      :style="style"
+      :to="$props.to"
+      :href="$props.href" 
+      width="100%"
+      height="100%"
+      @click="() => $emit('update:modelValue', !$props.modelValue)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </FSClickable>
+
+    
+    <FSClickable
+      v-else-if="$props.editable && ($props.href || $props.to || $attrs.onClick)"
       variant="background"
       class="fs-tile"
       padding="12px"
@@ -14,12 +31,10 @@
       height="100%"
       :to="$props.to"
       :style="style"
-      :disabled="$props.disableClick"
       v-bind="$attrs"
     >
       <slot />
       <FSCard
-        v-if="$props.selectable"
         class="fs-tile-checkbox"
         :height="['40px', '32px']"
         :width="['40px', '32px']"
@@ -31,20 +46,6 @@
         />
       </FSCard>
     </FSClickable>
-
-    <FSClickable
-      v-else-if="$props.selectable && $props.singleSelect"
-      padding="12px"
-      :variant="variant"
-      :color="color"
-      :style="style"
-      width="100%"
-      height="100%"
-      @click="() => $emit('update:modelValue', !$props.modelValue)"
-      v-bind="$attrs"
-    >
-      <slot />
-    </FSClickable>
     
     <FSCard
       v-else
@@ -58,7 +59,7 @@
     >
       <slot />
       <FSCard
-        v-if="$props.selectable"
+        v-if="$props.editable"
         class="fs-tile-checkbox"
         variant="background"
         :height="['40px', '32px']"
@@ -71,7 +72,6 @@
         />
       </FSCard>
     </FSCard>  
-    
     <div
       v-if="$props.leftColor"
       class="fs-tile-left"
@@ -134,12 +134,7 @@ export default defineComponent({
       required: false,
       default: null
     },
-    selectable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    disableClick: {
+    editable: {
       type: Boolean,
       required: false,
       default: false

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -1,6 +1,7 @@
 <template>
   <FSTile
     :activeColor="ColorEnum.Primary"
+    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -113,6 +114,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup(props) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.139-editablerefacto-3",
+  "version": "1.0.139-richtextfield",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.139-editablerefacto-3",
-    "@dative-gpi/foundation-shared-services": "1.0.139-editablerefacto-3"
+    "@dative-gpi/foundation-shared-domain": "1.0.139-richtextfield",
+    "@dative-gpi/foundation-shared-services": "1.0.139-richtextfield"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "cae71411b15b7e5a6abe56ac763693c88e1117e2"
+  "gitHead": "c8a5d32db0ce90ea1abf7ebbe6a5d4c4dde89f4a"
 }

package/styles/components/fs_chip.scss

@@ -9,7 +9,7 @@
     padding: 2px 20px !important;
 }
 
-.fs-chip-clickable {
+.fs-chip-editable {
     cursor: pointer !important;
 
     &:active {

package/styles/components/fs_data_iterator_item.scss

@@ -0,0 +1,35 @@
+.fs-data-iterator-item {
+    cursor: var(--fs-data-iterator-item-cursor);
+    position: relative;
+    min-height: 36px;
+    flex: 1 0 0;
+
+    & > .fs-col > .fs-row:first-of-type > :last-child {
+        padding-right: 32px;
+    }
+
+    @include clickscreen {
+        &:hover::after {
+            content: "";
+            background-color: black;
+            pointer-events: none;
+            position: absolute;
+            opacity: 0.04;
+            height: 100%;
+            width: 100%;
+            left: 0;
+            top: 0;
+        }
+    }
+}
+
+.fs-data-iterator-item-checkbox {
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    border-radius: 4px;
+    height: 32px;
+    width: 32px;
+    right: 1px;
+    top: 1px;
+}

package/styles/components/fs_draggable.scss

@@ -1,5 +1,10 @@
 .fs-draggable-item {
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+ 
+  &:has(.fs-data-iterator-item) {
+    flex: 1 1 0 !important;
+    width: 100% !important;
+  }
 }
 
 .fs-draggable-dragging {

package/styles/components/index.scss

@@ -19,6 +19,7 @@
 @import "fs_color.scss";
 @import "fs_color_icon.scss";
 @import "fs_data_table.scss";
+@import "fs_data_iterator_item.scss";
 @import "fs_dialog_menu.scss";
 @import "fs_dialog.scss";
 @import "fs_divider.scss";