@policystudio/policy-studio-ui-vue 1.0.89 → 1.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.89",
+  "version": "1.0.91",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/components/PsDraggable.scss

@@ -31,7 +31,7 @@
       padding: 7px 16px;
 
       &-title {
-        @apply psui-text-gray-50 psui-text-small;
+        @apply psui-text-gray-50 psui-text-small psui-flex psui-items-center;
 
         .psui-el-checkbox {
           @apply psui-text-gray-50;

package/src/components/controls/PsDraggable.vue

@@ -13,11 +13,21 @@
         @dragend="$emit('drag-end-group', indexColumnGroup)"
         @dragover="$emit('drag-over-group', indexColumnGroup)"
       >
-        <p>{{ columnGroup.title }}</p>
+        <span class="flex psui-items-center">
+          <p>{{ columnGroup.title }}</p>
+          <PsIcon
+            v-if="columnGroup.hasHelper.showOnEditHideColumns"
+            icon="info"
+            size="16"
+            icon-classes="psui-ml-2 psui-text-blue-50 psui-cursor-pointer"
+            @click.native="$emit('column-group-helper', columnGroup.hasHelper.slug)"
+          />
+        </span>
         <i class="material-icons-round">drag_indicator</i>
       </div>
 
       <div class="psui-el-draggable-wrapper-list">
+        
         <div
           v-for="(column, indexColumn) in columnGroup.columns"
           :key="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
@@ -31,7 +41,7 @@
           <div
             class="psui-w-full psui-flex psui-items-center"
           >
-            <span class="psui-el-draggable-item-title">
+            <span class="psui-el-draggable-item-title psui-flex psui-items-center">
               <PsCheckboxSimple
                 size="small"
                 :label="column.title"
@@ -41,6 +51,13 @@
                 class="psui-el-draggable-item-checkbox"
                 @change="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
               />
+              <PsIcon
+                v-if="column.hasHelper.showOnEditHideColumns"
+                icon="info"
+                size="16"
+                icon-classes="psui-ml-2 psui-text-blue-50 psui-cursor-pointer"
+                @click.native="$emit('column-helper', column.hasHelper.slug)"
+              />
             </span>
             <span class="psui-el-draggable-item-append">
               <i class="psui-icon">drag_indicator</i>
@@ -86,6 +103,6 @@ export default {
         return false
       }
     },
-  }
+  },
 }
 </script>

package/src/components/tooltip/PsTooltip.vue

@@ -48,22 +48,29 @@ export default {
     /**
      * It sets the layout of the tooltip if needed. Usefull when using rich or dialog tooltip.
      */
-    layout:{
-        type: String,
+    layout: {
+      type: String,
     },
     /**
      * It sets a additional styling if needed.
      */
-    cssClass:{
-        type: String,
+    cssClass: {
+      type: String,
     },
     /**
      * It sets the vertical position.
      */
-    position:{
+    position: {
       type: String,
       default: 'bottom',
-      validator: (value)=> ['bottom','top'].includes(value)
+      validator: (value)=> ['bottom','top', 'custom'].includes(value)
+    },
+    /**
+     * It sets the custom positions.
+     */
+    customPosition: {
+      type: String,
+      default: '',
     }
   },
   inheritAttrs: true,
@@ -120,7 +127,7 @@ export default {
         dialog.style.left = `${windowWidth - rectDialog.width - 30}px`
       } else if ((rectTrigger.x - rectDialog.width) < 0) {
         dialog.style.left = `${rectTrigger.x + 10}px`  
-      } else if (rectDialog.width >= rectTrigger.width){
+      } else if (rectDialog.width >= rectTrigger.width && this.position != 'custom') {
         dialog.style.left = `${rectTrigger.x - ((rectDialog.width - rectTrigger.width)/2)}px`
       } else {
         dialog.style.left = `${rectTrigger.x + ((rectTrigger.width - rectDialog.width)/2)}px`
@@ -130,6 +137,12 @@ export default {
         dialog.style.top = `${rectTrigger.y - rectDialog.height - 10}px`
       }
 
+      if(this.position == 'custom') {
+        dialog.style = this.customPosition
+        dialog.style.display = 'block'
+        dialog.style.position = 'absolute'
+      }
+
       setTimeout(() => {
         dialog.style.opacity = 100
       }, 100)