@policystudio/policy-studio-ui-vue 1.1.90-beta.47 → 1.1.90-beta.49

package/dist/css/psui_styles_output.css

@@ -567,21 +567,21 @@ video {
   --tw-text-opacity: 1;
   color: rgb(49 143 172/var(--tw-text-opacity));
 }
-.psui-el-chips.type-checkbox input:checked + label.status-disabled, .psui-el-chips.type-radio input:checked + label.status-disabled {
+.psui-el-chips.type-checkbox input:checked + label.layout-disabled, .psui-el-chips.type-radio input:checked + label.layout-disabled {
   cursor: default;
 }
-.psui-el-chips.type-checkbox input:checked + label.status-disabled, .psui-el-chips.type-radio input:checked + label.status-disabled {
+.psui-el-chips.type-checkbox input:checked + label.layout-disabled, .psui-el-chips.type-radio input:checked + label.layout-disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(230 236 242/var(--tw-bg-opacity));
 }
-.psui-el-chips.type-checkbox input:checked + label.status-disabled, .psui-el-chips.type-radio input:checked + label.status-disabled {
+.psui-el-chips.type-checkbox input:checked + label.layout-disabled, .psui-el-chips.type-radio input:checked + label.layout-disabled {
   --tw-text-opacity: 1;
   color: rgb(162 172 183/var(--tw-text-opacity));
 }
-.psui-el-chips.type-checkbox input:checked + label.status-disabled:before, .psui-el-chips.type-radio input:checked + label.status-disabled:before {
+.psui-el-chips.type-checkbox input:checked + label.layout-disabled:before, .psui-el-chips.type-radio input:checked + label.layout-disabled:before {
   cursor: default;
 }
-.psui-el-chips.type-checkbox input:checked + label.status-disabled:before, .psui-el-chips.type-radio input:checked + label.status-disabled:before {
+.psui-el-chips.type-checkbox input:checked + label.layout-disabled:before, .psui-el-chips.type-radio input:checked + label.layout-disabled:before {
   --tw-text-opacity: 1;
   color: rgb(214 221 229/var(--tw-text-opacity));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.47",
+  "version": "1.1.90-beta.49",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

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

@@ -20,7 +20,7 @@
           + label {
             @apply psui-text-blue-60 psui-bg-blue-20;
 
-            &.status-disabled {
+            &.layout-disabled {
               @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default; 
 
               &:before {

package/src/components/chips/PsChips.vue

@@ -2,6 +2,14 @@
   <div
     class="psui-el-chips"
     :class="[getComponentClass, `layout-${layout}`, `type-${type}`]"
+    v-tooltip="{
+      content: disabledText,
+      trigger: 'hover',
+      placement: 'bottom',      
+      show: layout === 'disabled' && disabledText !== '' && isHovering
+    }"
+    @mouseover="isHovering = true"
+    @mouseleave="isHovering = false"
   >
     <input
       @change="onChange"
@@ -14,7 +22,7 @@
     <label
       :disabled="disabled"
       :for="getInputId"
-      :class="{'checked': checked && type === 'button', 'status-disabled': disabled }"
+      :class="{'checked': checked && type === 'button', 'layout-disabled': layout === 'disabled'}"
     >
       <i
         v-if="icon"
@@ -33,7 +41,7 @@
 </template>
 
 <script setup>
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, ref } from 'vue'
 
 import { randomString } from '../../util/GeneralFunctions.js'
 
@@ -61,7 +69,7 @@ const props = defineProps({
   layout: {
     type: String,
     default: 'simple',
-    validator: (value) => ['simple', 'with-icon', 'rich'].includes(value),
+    validator: (value) => ['simple', 'with-icon', 'rich', 'disabled'].includes(value),
   },
   /**
    * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the right description of your icon on https://fonts.google.com/.
@@ -98,8 +106,14 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  disabledText: {
+    type: String,
+    default: '',
+  }
 })
 
+const isHovering = ref(false)
+
 const getComponentClass = computed(() => {
   if (props.disabled) {
     return 'status-disabled'