@policystudio/policy-studio-ui-vue 1.0.44 → 1.0.45

package/README.md

@@ -39,3 +39,4 @@ Inside the policy-studio-ui-vue project folder
 Navigate to the application folder that you wants to link with the library
 ```` npm link @policystudio/policy-studio-ui-vue ````
 
+

package/dist/css/psui_styles.css

@@ -19543,6 +19543,15 @@ html {
         background-color: rgba(224, 239, 246, var(--bg-opacity));
       }
 
+.psui-el-chips.type-button label.checked {
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+        --bg-opacity: 1;
+        background-color: #E0EFF6;
+        background-color: rgba(224, 239, 246, var(--bg-opacity));
+      }
+
 .psui-el-chips.type-button.layout-with-icon label {
         display: flex;
         align-items: center;

package/package.json

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

package/src/assets/scss/components/PsChips.scss

@@ -82,6 +82,8 @@
     }
 
     &.type-button {
+
+
       label {
         @apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
         background-color: #F6F7F8;
@@ -93,6 +95,11 @@
         &:active {
           @apply psui-text-blue-60 psui-bg-blue-20;
         }
+
+        &.checked {
+          @apply psui-text-blue-60 psui-bg-blue-20;
+        }
+  
       }
 
       &.layout-with-icon {

package/src/components/chips/PsChips.vue

@@ -12,10 +12,9 @@
       :checked="checked"
     />
     <label
-      @click="onClick"
       :disabled="disabled"
       :for="label"
-      :class="getCssClass"
+      :class="{'checked':checked && type === 'button'}"
     >
       <i v-if="icon" class="psui-el-chips-icon psui-el-chips-icon-prepend">{{ icon }}</i>
       {{ label }}
@@ -90,11 +89,6 @@ export default {
     },
   },
   emits: ['click', 'change'],
-  data() {
-    return {
-      isChecked: false,
-    }
-  },
   computed: {
     getComponentClass() {
       if (this.disabled) {
@@ -103,23 +97,12 @@ export default {
         return 'status-resting'
       }
     },
-    getCssClass() {
-      let cssClass = ''
-      
-      if (this.checked === true ) {
-        cssClass = 'psui-text-blue-50 psui-bg-blue-20'
-      }
-
-      return cssClass
-    },
   },
   methods: {
     onClick() {
-      this.isChecked = !this.isChecked
       this.$emit('click')
     },
     onChange(event) {
-      this.isChecked = event.target.checked
       this.$emit('update:checked', event.target.checked)
       this.$emit('change', event)
     },

package/src/components/tabs/PsTabHeader.vue

@@ -5,12 +5,12 @@
     role="group"
   >
 		
-    <template v-for="item in getItems">
+    <template v-for="(item, index) in getItems">
       <slot v-bind:item="item" >
       <PsRichTooltip v-if="item.tooltip" :title="item.tooltip" layout="blue">
         <template v-slot:trigger>
           <button
-            :key="item[keyValue]"
+            :key="item[keyValue] + index"
             type="button"
             @click="selectTab(item)"
             :class="getButtonClass(item)"
@@ -20,8 +20,8 @@
         </template>
       </PsRichTooltip>
         <button
-        v-else
-          :key="item[keyValue]"
+          v-else
+          :key="item[keyValue] + index"
           type="button"
           @click="selectTab(item)"
           :class="getButtonClass(item)"

package/src/stories/Chips.stories.js

@@ -10,7 +10,7 @@ const Template = (args, { argTypes }) => ({
   components: { PsChips },
   data: ()=>{
     return{
-      isChecked: null,
+      isChecked: true,
       isCheckedTwo: null,
     }
   },