@policystudio/policy-studio-ui-vue 1.1.47 → 1.1.49

package/dist/css/psui_styles.css

@@ -3010,6 +3010,12 @@ video {
     pointer-events: none;
   }
 
+.psui-el-switch.disabled .psui-el-switch-button {
+      --bg-opacity: 1;
+      background-color: #E6ECF2;
+      background-color: rgba(230, 236, 242, var(--bg-opacity));
+    }
+
 .psui-el-switch.size-big {
     width: 46px;
     height: 24px;
@@ -3035,12 +3041,6 @@ video {
           content: '';
         }
 
-.psui-el-switch.size-small .psui-el-switch-button.toggle-true {
-        --bg-opacity: 1;
-        background-color: #5DB883;
-        background-color: rgba(93, 184, 131, var(--bg-opacity));
-      }
-
 .psui-el-switch.size-small .psui-el-switch-button.toggle-true::before {
           position: absolute;
           height: 0.75rem;
@@ -3075,9 +3075,6 @@ video {
     left: 0;
     right: 0;
     bottom: 0;
-    --bg-opacity: 1;
-    background-color: #A2ACB7;
-    background-color: rgba(162, 172, 183, var(--bg-opacity));
     border-radius: 9999px;
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3099,12 +3096,6 @@ video {
         content: '';
       }
 
-.psui-el-switch .psui-el-switch-button.toggle-true {
-      --bg-opacity: 1;
-      background-color: #5DB883;
-      background-color: rgba(93, 184, 131, var(--bg-opacity));
-    }
-
 .psui-el-switch .psui-el-switch-button.toggle-true::before {
         position: absolute;
         height: 1.25rem;

package/package.json

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

package/src/assets/scss/components/PsSwitch.scss

@@ -4,7 +4,11 @@
 
     &.disabled {
       pointer-events: none;
+      .psui-el-switch-button {
+        @apply psui-bg-gray-20; 
+      }
     }
+
     &.size-big {
       width: 46px;
       height: 24px;  
@@ -24,8 +28,6 @@
         }
         
         &.toggle-true {
-          @apply psui-bg-green-20;
-
           &::before {
             @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
             left: 16px;
@@ -42,7 +44,7 @@
       @apply psui-opacity-0 psui-w-0 psui-h-0;
     }
     .psui-el-switch-button {
-      @apply psui-absolute psui-inline-block psui-cursor-pointer psui-top-0 psui-left-0 psui-right-0 psui-bottom-0 psui-bg-gray-40 psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500;
+      @apply psui-absolute psui-inline-block psui-cursor-pointer psui-top-0 psui-left-0 psui-right-0 psui-bottom-0 psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500;
       
         &.toggle-false{   
         &::before {
@@ -54,7 +56,6 @@
       }
       
       &.toggle-true {
-        @apply psui-bg-green-20;
 
         &::before {
           @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;

package/src/components/controls/PsSwitch.vue

@@ -23,6 +23,10 @@ export default {
     value:{
       type: Boolean,
     },
+    backgroundColor: {
+      type: String,
+      default:'psui-bg-green-20'
+    },
     /**
      * It sets disabling mode.
      */
@@ -41,7 +45,8 @@ export default {
   },
   computed:{
     getToggleClass(){
-      return this.value ? 'toggle-true' : 'toggle-false'
+      if(this.disabled) return 'toggle-false'
+      return this.value ? `toggle-true ${this.backgroundColor}` : 'toggle-false psui-bg-gray-40'
     },
     getComponentClass(){
       return `size-${this.size}`

package/src/components/table-results/PsTableResults.vue

@@ -39,7 +39,15 @@
             :style="item.background_color ? `background-color: ${getBackgroundColor(item.background_color)};` : ''"
             class="psui-transition"
           >
-            <div class="psui-flex psui-justify-between psui-relative">
+            <div class="psui-flex psui-relative">
+                <PsIcon
+                  v-if="item.remove_add_button"
+                  :icon="item.remove_add_button_icon"
+                  class="psui-flex psui-text-gray-40 pl-8 psui-cursor-pointer leading-none hover:psui-text-blue-60 transition-all"
+                  size="15"
+                  display="flex"
+                  @click.native="$emit('removeOrAddButtonChange',item)" 
+                />
               <div
                 class="psui-flex psui-items-center actions psui-space-x-3"
                 :style="{paddingLeft: `${item.deep * 16}px`}"
@@ -189,6 +197,7 @@
                 class="psui-space-x-2 psui-show-childrens-on-hover"
                 :class="column.isCenteredContent ? 'psui-justify-center' : 'psui-justify-end'"
               >
+              
                 <PsTooltip v-if="isSelectedRow(column,item)">
                   <template v-slot:trigger>
                     <PsIcon
@@ -252,11 +261,13 @@
                   :value="item.data[column.key] == '--' ? 0 : item.data[column.key]"
                   :force-break-even="item.is_disabled || item.data[column.key] === '--' ? true : false"
                 />
-
                 <PsSwitch
                   v-if="column.isSwitch && item.data[column.key] != null"
+                  :disabled="item.data.is_disabled"
                   :value="item.data[column.key]"
+                  :background-color="switchButtonBackgroundColor"
                   size="small"
+                  @change="$emit('switchButtonItemChanged', item)"
                 />
               </div>
               
@@ -425,6 +436,9 @@ export default {
         return []
       }
     },
+    switchButtonBackgroundColor:{
+      type:String,
+    }
   },
   data: () => ({
     collapsedRows : [],