@policystudio/policy-studio-ui-vue 1.0.47 → 1.0.48

package/dist/css/psui_styles.css

@@ -17255,13 +17255,20 @@ html {
 
 .psui-el-draggable .psui-el-draggable-item-title {
       --text-opacity: 1;
-      color: #515E6A;
-      color: rgba(81, 94, 106, var(--text-opacity));
+      color: #798490;
+      color: rgba(121, 132, 144, var(--text-opacity));
       font-size: 14px;
       line-height: 130%;
       font-weight: 700;
     }
 
+.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkmark:before {
+          margin-right: 0.25rem;
+          --text-opacity: 1;
+          color: #D6DDE5;
+          color: rgba(214, 221, 229, var(--text-opacity));
+        }
+
 .psui-el-draggable .psui-el-draggable-item-append {
       display: flex;
       --text-opacity: 1;
@@ -17274,77 +17281,16 @@ html {
         font-size: 18px;
       }
 
-.psui-el-draggable .psui-el-draggable-item:active {
+.psui-el-draggable .psui-el-draggable-item:active,
+      .psui-el-draggable .psui-el-draggable-item.on-dragging {
       cursor: -webkit-grabbing;
       cursor: grabbing;
     }
 
-.psui-el-draggable .psui-el-draggable-list-items-wrapper {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-.psui-el-draggable .psui-el-draggable-list-items-wrapper li {
-      width: 100%;
-      margin-bottom: 0.5rem;
-      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
-      background-color: #ffffff;
-      border-radius: 0.25rem;
-      display: flex;
-      align-items: center;
-      padding: 7px 16px;
-    }
-
-.psui-el-draggable .psui-el-draggable-list-items-wrapper li:hover {
-        --text-opacity: 1;
-        color: #798490;
-        color: rgba(121, 132, 144, var(--text-opacity));
-        cursor: -webkit-grab;
-        cursor: grab
-      }
-
-.psui-el-draggable .psui-el-draggable-list-items-wrapper li:active {
-        cursor: -webkit-grabbing;
-        cursor: grabbing
-      }
-
-.psui-el-draggable .psui-el-draggable-list-items-wrapper .psui-el-draggable-item-wrapper {
-      -webkit-user-select: none;
-         -moz-user-select: none;
-          -ms-user-select: none;
-              user-select: none;
-      width: 100%;
-      display: flex;
-      align-items: center
-    }
-
-.psui-el-draggable .psui-el-draggable-list-items-wrapper .psui-el-draggable-item-icon {
-      display: flex;
-      justify-content: flex-end;
-      margin-left: auto;
+.psui-el-draggable .psui-el-draggable-item.on-drag-over {
+      opacity: 0.2;
     }
 
-.psui-el-draggable .psui-el-draggable-list-items-wrapper .psui-el-draggable-item-icon i {
-        font-family: 'Material Icons Round';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 24px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        white-space: nowrap;
-        word-wrap: normal;
-        direction: ltr;
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        --text-opacity: 1;
-        color: #D6DDE5;
-        color: rgba(214, 221, 229, var(--text-opacity));
-        font-size: 18px;
-      }
-
 .psui-el-input-select {
   width: 100%;
   display: flex;

package/package.json

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

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

@@ -31,7 +31,13 @@
       padding: 7px 16px;
 
       &-title {
-        @apply psui-text-gray-60 psui-text-small psui-font-bold;
+        @apply psui-text-gray-50 psui-text-small psui-font-bold;
+
+        .psui-el-checkmark {
+          &:before {
+            @apply psui-mr-1 psui-text-gray-30;
+          }
+        }
       }
 
       &-append {
@@ -42,39 +48,15 @@
         }
       }
 
-      &:active {
-        @apply psui-cursor-grabbing;
+      &:active,
+      &.on-dragging {
+        cursor: -webkit-grabbing; 
+        cursor: -moz-grabbing;
+        cursor: grabbing;
       }
-    }
-
-
-    .psui-el-draggable-list-items-wrapper {
-      @apply psui-w-full psui-flex psui-flex-wrap;
 
-      li {
-        @apply psui-w-full psui-mb-2 psui-shadow-elevation-5 psui-bg-white psui-rounded psui-flex psui-items-center;
-        padding: 7px 16px;
-
-        &:hover {
-          @apply psui-text-gray-50 psui-cursor-grab
-        }
-
-        &:active {
-          @apply psui-cursor-grabbing
-        }
-      }
-
-      .psui-el-draggable-item-wrapper {
-        @apply psui-select-none psui-w-full psui-flex psui-items-center
-      }
-
-      .psui-el-draggable-item-icon {
-        @apply psui-flex psui-justify-end psui-ml-auto;
-
-        i {
-          @apply psui-icon psui-text-gray-30;
-          font-size: 18px;
-        }
+      &.on-drag-over {
+        opacity: 0.2;
       }
     }
   }

package/src/components/controls/PsCheckbox.vue

@@ -31,7 +31,7 @@ export default {
       type: [String, Boolean],
     },
     value:{
-      type: Array
+      type: [Array, Boolean]
     },
     /**
      * It disables the checkbox input.

package/src/components/controls/PsDraggable.vue

@@ -4,13 +4,14 @@
       v-for="(columnGroup, indexColumnGroup) in getColumns.columnGroups"
       :key="indexColumnGroup"
       :ref="indexColumnGroup"
+       :id="`edit-group-${indexColumnGroup}`"
     >
       <div 
         class="psui-el-draggable-wrapper-title"
         draggable="true"
-        @dragstart="onDragStart"
-        @dragover="$emit('drag-over', $event)"
-        @dragend="onDragEnd"
+        @dragstart="$emit('drag-start-group', indexColumnGroup)"
+        @dragend="$emit('drag-end-group', indexColumnGroup)"
+        @dragover="$emit('drag-over-group', indexColumnGroup)"
       >
         <p>{{ columnGroup.title }}</p>
         <i class="material-icons-round">drag_indicator</i>
@@ -22,19 +23,24 @@
           :key="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
           :id="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
           class="psui-el-draggable-item"
+          draggable="true"
+          @dragstart="$emit('drag-start-item', { indexColumnGroup, indexColumn }, $event)"
+          @dragover="$emit('drag-over-item', { indexColumnGroup, indexColumn }, $event)"
+          @dragend="$emit('drag-end-item', $event)"
         >
           <div
             class="psui-w-full psui-flex psui-items-center"
-            draggable="true"
-            @dragstart="$emit('drag-start-item',$event)"
-            @dragover="$emit('drag-over-item',$event)"
-            @dragend="$emit('drag-end-item',$event)"
           >
             <span class="psui-el-draggable-item-title">
-              {{ column.title }}
+              <PsCheckbox
+                size="small"
+                :value="column.isActive"
+                :label="column.title"
+                @input="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
+              />
             </span>
             <span class="psui-el-draggable-item-append">
-              <i class="material-icons-round">drag_indicator</i>
+              <i class="psui-icon">drag_indicator</i>
             </span>
           </div>
         </div>
@@ -59,16 +65,7 @@ export default {
      */
     module:{
       type: String
-    }
-  }, 
-  methods:{
-    onDragStart(event){
-      this.$emit('drag-start', event)
     },
-
-    onDragEnd(event){
-      this.$emit('drag-end',event)
-    }
-  }
+  },
 }
 </script>