@policystudio/policy-studio-ui-vue 1.0.30 → 1.0.31

package/src/assets/scss/components/PsToggle.scss

@@ -1,11 +1,15 @@
 @layer components{
 
   .psui-el-toggle {
-    @apply psui-flex psui-rounded-sm psui-bg-gray-10 psui-gap-x-px;
+    @apply psui-flex psui-bg-gray-10 psui-items-center;
     padding: 2px;
+    gap: 2px;
+    border-radius: 4px;
 
     button {
-      @apply transition-default psui-inline-flex psui-rounded-sm psui-text-small psui-bg-gray-10 psui-text-blue-60 psui-px-2;
+      @apply transition-default psui-inline-flex psui-text-small psui-bg-gray-10 psui-text-blue-60 psui-outline-none psui-align-middle;
+      border-radius: 4px;
+      padding:1px 8px;
 
       &.status-active {
         @apply psui-bg-blue-60 psui-text-white psui-font-bold psui-shadow-elevation-10;

package/src/assets/scss/components/PsTooltip.scss

@@ -5,11 +5,14 @@
             @apply psui-relative;
 
             .psui-el-tooltip-dialog {
-                @apply psui-fixed psui-hidden psui-opacity-0 psui-transition-opacity psui-duration-500 psui-ease-in-out;
-            
+                @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out;
+                transition-delay: 0.4s;
+                min-width: 256px;
+
                 .psui-el-tooltip-content {
-                    @apply psui-flex psui-flex-col psui-rounded-md psui-shadow-md psui-z-20 psui-bg-gray-50 psui-text-white;
-                    padding: 5px 8px;
+                    @apply psui-flex psui-flex-col psui-bg-gray-50 psui-text-white;
+                    padding: 5px 8px 4px 8px;
+                    border-radius: 4px;
 
                     h2 {
                         @apply psui-font-bold;
@@ -21,9 +24,10 @@
 
                     &.layout {
                         &-gray {
-                            @apply psui-bg-gray-30 psui-text-gray-80 psui-p-4 ;
+                            @apply psui-bg-gray-30 psui-text-gray-80 psui-shadow-none;
                             font-size: 12px;
                             line-height: 120%;
+                            padding: 10px 16px 12px 16px;
                             
                             .psui-el-tooltip-content-wrapper {
                                 @apply psui-font-normal psui-mt-1 
@@ -31,9 +35,10 @@
                         }
 
                         &-blue {
-                            @apply psui-bg-blue-70 psui-text-white psui-p-4;
+                            @apply psui-bg-blue-70 psui-text-white psui-shadow-none;
                             font-size: 12px;
                             line-height: 120%;
+                            padding: 10px 16px 12px 16px;
                             
                             .psui-el-tooltip-content-wrapper {
                                 @apply psui-font-normal psui-mt-1
@@ -41,9 +46,10 @@
                         }
 
                         &-red {
-                            @apply psui-bg-red-10 psui-text-red-70 psui-p-4;
+                            @apply psui-bg-red-10 psui-text-red-70 psui-shadow-none;
                             font-size: 12px;
                             line-height: 120%;
+                            padding: 10px 16px 12px 16px;
 
                             .psui-el-tooltip-content-wrapper {
                                 @apply psui-font-normal psui-mt-1
@@ -51,7 +57,8 @@
                         }
 
                         &-white {
-                            @apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
+                            @apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
+                            gap: 8.8px;
                              
                             h2 {
                                 @apply psui-text-gray-80 psui-font-bold;
@@ -60,19 +67,27 @@
                             }
 
                             .psui-el-tooltip-content-wrapper {
-                                @apply psui-text-gray-50 psui-text-small psui-font-normal psui-flex psui-flex-col psui-gap-3;
+                                @apply psui-text-gray-50 psui-font-normal psui-flex psui-flex-col;
+                                gap: 13.6px;
+                                font-size: 14px;
+                                line-height: 120%;
 
                                 button {
-                                    @apply  psui-rounded-md psui-bg-blue-20 psui-text-blue-60;
+                                    @apply  psui-rounded-md psui-bg-blue-20 psui-text-blue-60 psui-font-bold;
                                     padding: 7px 16px;
                                     width: fit-content;
+                                    
+                                    &:focus {
+                                        outline: none;
+                                    }
                                 }       
                             }
                         }
 
                         &-dark {
-                            @apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
-                             
+                            @apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
+                            gap: 8.8px;
+                            
                             h2 {
                                 @apply psui-text-white psui-font-bold;
                                 font-size: 17px;
@@ -80,19 +95,29 @@
                             }
 
                             .psui-el-tooltip-content-wrapper {
-                                @apply psui-text-white psui-text-small psui-font-normal  psui-flex psui-flex-col psui-gap-3;
+                                @apply psui-text-white psui-font-normal  psui-flex psui-flex-col;
+                                gap: 13.6px;
+                                font-size: 14px;
+                                line-height: 120%;
 
                                 button {
-                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white;
+                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
                                     padding: 7px 16px;
                                     width: fit-content;
+
+                                    &:focus {
+                                        outline: none;
+                                    }
+
                                 }       
                             }
                         }
 
                         &-color {
-                            @apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
-                             
+                            @apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
+                            gap: 8.8px; 
+
+
                             h2 {
                                 @apply psui-text-white psui-font-bold;
                                 font-size: 17px;
@@ -100,12 +125,20 @@
                             }
 
                             .psui-el-tooltip-content-wrapper {
-                                @apply psui-text-white psui-text-small psui-font-normal psui-flex psui-flex-col psui-gap-3;
+                                @apply psui-text-white psui-font-normal psui-flex psui-flex-col;
+                                gap: 13.6px;
+                                font-size: 14px;
+                                line-height: 120%;
 
                                 button {
-                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white;
+                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
                                     padding: 7px 16px;
                                     width: fit-content;
+
+                                    &:focus {
+                                        outline: none;
+                                    }
+
                                 }       
                             }
                         }

package/src/components/accordion/PsAccordion.vue

@@ -1,42 +1,26 @@
 <template>
-  <div class="psui-el-accordion" :class="`layout-${layout}`">
+  <div class="psui-el-accordion" :class="getComponentClass">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export const layouts = ['big', 'medium']
-export const defaultIconsByLayout = {
-  big: { 
-    'iconOpened': 'remove',
-    'iconClosed': 'add'
-  },
-  medium: {
-    'iconOpened': 'expand_less',
-    'iconClosed': 'expand_more'
-  }
-}
 export default {
   name: 'PsAccordion',
   props: {
+    /**
+     * It defines the size of the accordion items. eg: text size and font.
+     */
     layout: {
       type: String,
       default: 'medium',
-      validator: (value) => layouts.indexOf(value) !== -1,
+      validator: (value) => ['medium','big'].includes(value),
     },
-    'iconOpened': {
-      type: String,
-    },
-    'iconClosed': {
-      type: String,
-    }
   },
   computed: {
-    getIcons() {
-      return {
-        'iconOpened' : this.iconOpened ?? defaultIconsByLayout[this.layout].iconOpened,
-        'iconClosed' : this.iconClosed ?? defaultIconsByLayout[this.layout].iconClosed,
-      }
+    getComponentClass() {
+      return `layout-${this.layout}`
     }
   }
 }

package/src/components/accordion/PsAccordionItem.vue

@@ -2,31 +2,46 @@
   <div class="psui-el-accordion-item" :class="`status-${isOpen ? 'opened' : 'closed'}`">
     <div @click="toggle" class="psui-el-accordion-item-header">
       <h2 v-if="title" class="psui-el-accordion-item-title">{{ title }}</h2>
-      <i class="psui-el-accordion-item-icon material-icons">{{ getIcon }}</i>
-    </div>
-    <div v-if="isOpen" class="psui-el-accordion-item-content">
-      <slot></slot>
+        <i class="psui-el-accordion-item-icon">{{ getIcon }}</i>
     </div>
+    <transition
+      name="accordion-fade"
+      @enter="start"
+      @after-enter="end"
+      @before-leave="start"
+      @after-leave="end"
+    >
+      <div v-if="isOpen" class="psui-el-accordion-item-content">
+        <slot></slot>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script>
+import { getParentVueComponentByName } from '../../util/GeneralFunctions'
 export default {
   name: "PsAccordionItem",
   props: {
+    /**
+     * It sets the title of the accordion item.
+     */
     title: {
       type: String,
       required: true,
     },
-    'iconOpened': {
-      type: String,
-    },
-    'iconClosed': {
-      type: String,
-    },
+    /**
+    * It sets the status of the accordion item when mounted. 
+    */
     opened: {
       type: [Boolean],
       default: false
+    },
+    /**
+     * It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
+     */
+    icon: {
+      type: String
     }
   },
   data() {
@@ -35,17 +50,17 @@ export default {
     }
   },
   computed: {
-    getIcons() {
-      return {
-        'iconOpened' : this.iconOpened ?? this.getParentVueComponentByName(this.$parent, 'PsAccordion').getIcons.iconOpened,
-        'iconClosed' : this.iconClosed ?? this.getParentVueComponentByName(this.$parent, 'PsAccordion').getIcons.iconClosed,
-      }
-    },
-    getIcon() {
-      return this.isOpen ? this.getIcons.iconOpened : this.getIcons.iconClosed
-    },
     isOpen() {
       return this.localOpened !== null ? this.localOpened : this.opened
+    },
+    getParent() {
+      return getParentVueComponentByName(this,'PsAccordion')
+    },
+    getIcon(){
+      if(this.getParent._props.layout === 'medium') return 'expand_more'
+      if(this.getParent._props.layout === 'big' && this.isOpen === false) return 'add'
+      if(this.getParent._props.layout === 'big' && this.isOpen === true) return 'remove'
+      return `${this.icon}`
     }
   },
   methods: {
@@ -56,12 +71,13 @@ export default {
         this.localOpened = !this.localOpened
       }
     },
-    getParentVueComponentByName(comp, name) {
-      if (comp.$options.name === name) {
-        return comp
-      } else {
-        return this.getParentVueComponentByName(comp.$parent, name)
-      }
+    start(el) {
+      el.style.height = el.scrollHeight + 'px'
+      el.style.padding = el.srcollPaddingBottom + 'px'
+    },
+    end(el) {
+      el.style.height = ''
+      el.style.padding = ''
     }
   }
 }

package/src/components/badges-and-tags/PsCardInfos.vue

@@ -17,18 +17,30 @@
 export default {
   name: 'PsCardInfos',
   props: {
+    /**
+     * It sets the title of your card.
+     */
     title: {
       type: String,
       default: 'Total',
     },
+    /**
+     * It sets the subtitle of your card if needed.
+     */
     subtitle: {
       type: String,
       default: '',
     },
+    /**
+     * It sets the text key to get the svg icon in Google Fonts. Make sure to get the right description of your icon on https://fonts.google.com/.
+     */
     icon: {
       type: String,
       default: 'edit',
     },
+    /**
+     * It sets the data that will show up when component is mounted.
+     */
     total: {
       type: String,
       default: '',

package/src/components/badges-and-tags/PsChartLegend.vue

@@ -13,19 +13,32 @@
 
 <script>
 export default {
+  name: 'PsChartLegend',
   props: {
+    /**
+     * It sets the text of the chart legend.
+     */
     text: {
       type: [String, Number],
       default: 'Climate Zone 10',
     },
+    /**
+     * It sets the data that will show up when component is mounted.
+     */
     total: {
       type: String,
       default: null,
     },
+    /**
+     * It sets the data that wull show up when component is mounted.
+     */
     percentage: {
       type: String,
       default: null,
     },
+    /**
+     * It sets the color of the dot component.
+     */
     dotColor: {
       type: Object,
       default: null

package/src/components/badges-and-tags/PsClimateZoneBadge.vue

@@ -9,11 +9,18 @@
 
 <script>
 export default {
+  name: 'PsClimateZoneBadge',
   props: {
+    /**
+     * It sets the text key to get the svg icon in Google Fonts. Make sure to get the right description of your icon on https://fonts.google.com/.
+     */
     icon: {
       type: String,
       default: 'area_chart',
     },
+    /**
+     * It sets the content that will show up when the component is rendered.
+     */
     content: {
       type: Number,
       default: 10,

package/src/components/badges-and-tags/PsCostEffectBar.vue

@@ -22,11 +22,17 @@ export default {
   },
 
   props: {
+    /**
+     * It sets the value of the progress bar within costeffectbar.
+     */
     value: {
       type: Number,
       required: true,
       default: 0,
     },
+    /**
+     * It sets the threshold of being effective or not effective within costeffectbar.
+     */
     breakEven: {
       type: Number,
       required: true,

package/src/components/badges-and-tags/PsHighlightRippleDot.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {}
+export default {
+  name: 'PsHighlightRippleDot',
+}
 </script>
 
 <style> /* Please, use the file src/assets/scss/components/PsHighlightRippleDot.scss */</style>

package/src/components/badges-and-tags/PsMiniTag.vue

@@ -15,11 +15,17 @@ export const typeOptions = [
 export default {
   name: 'PsMiniTag',
   props: {
+    /**
+     * It sets the layout of the the minitag. eg: info, success, warning, error and default.
+     */
     layout: {
       type: String,
       default: 'info',
       validator: (value) => typeOptions.indexOf(value) !== -1,
     },
+    /**
+     * It sets the message that will show up within the minitag when component is rendered.
+     */
     message: {
       type: String,
       required: true,

package/src/components/badges-and-tags/PsProgressBar.vue

@@ -13,21 +13,29 @@
 
 <script>
 export default {
+  name: 'PsProgressBar',
   props: {
-    value: {
-      type: Number,
-      required: true,
-      default: 0,
-      validator: (value) => {
-        return value >= 0 && value <= 100
-      },
+  /**
+   * It sets the value of the progress bar.
+   */
+  value: {
+    type: Number,
+    required: true,
+    default: 0,
+    validator: (value) => {
+      return value >= 0 && value <= 100
     },
+  },
+  /**
+   * It sets the color of the progressbar.
+   */
   percentageColor: {
     type: String,
     default: 'psui-bg-blue-60'
-    // required: true,
-
   },
+  /**
+   * It sets the background color of the progressbar.
+   */
   bgColor: {
     type: String,
     default: 'psui-bg-blue-20'

package/src/components/buttons/PsButton.vue

@@ -14,31 +14,52 @@
 <script>
 export default {  
   props: {
+    /**
+     * It set de label of the button when component is rendered.
+     */
     label: {
       type: String,
     },
+    /**
+     * It set the layout of the button. eg: solid, outline, ghost, onlytext and caution.
+     */
     layout: {
       type: String,
       default: 'solid',
-      validator: (value) => ['solid','outline','ghost','onlytext'].includes(value)
+      validator: (value) => ['solid','outline','ghost','onlytext','caution'].includes(value)
     },
+    /**
+     * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
+     */
     icon: {
       type: String,
     },
+    /**
+     * It sets the position of the icon. eg: left or right.
+     */
     iconPosition:{
       type: String,
       default: 'left',
       validator: (value) => ['left','right'].includes(value)
     },
+    /**
+     * It sets the size of the icon. eg: small, medium and big.
+     */
     size: {
       type: String,
       default: 'big',
       validator: (value) => ['small','medium','big'].includes(value)
     },
+    /**
+     * It disable the button. All mouse event are disabled.
+     */
     disabled: {
       type: Boolean,
       default: false
     },
+    /**
+     * It set any further css style that might be needed.
+     */
     iconClass:{
       type: String
     }

package/src/components/chips/PsChips.vue

@@ -5,6 +5,7 @@
   >
     <input
       @change="onChange"
+      :disabled="disabled"
       v-if="type != 'button'"
       :type="type"
       :id="label"
@@ -12,6 +13,7 @@
     />
     <label
       @click="onClick"
+      :disabled="disabled"
       :for="label"
       :class="getCssClass"
     >
@@ -34,33 +36,54 @@ export const type = ["radio", "checkbox", "button"]
 export default {
   name: "PsChips",
   props: {
+    /**
+     * It sets the label of the chips button.
+     */
     label: {
       type: String,
       default: "",
     },
+    /**
+     * It sets the type of the chips button. eg: radio, checkbox, button.
+     */
     type: {
       type: String,
       required: true,
       default: 'button',
       validator: (type) => ["radio", "checkbox", "button"].includes(type)
     },
+    /**
+     * It sets the layout of the chipsbutton. eg: simple, with-icon, rich.
+     */
     layout: {
       type: String,
       default: 'simple',
       validator: (value) => ['simple', 'with-icon', 'rich'].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/.
+    */
     icon: {
       type: String,
       default: "",
     },
+    /**
+     * It sets if the button was checked or not checked.
+     */
     checked: {
       type: Boolean,
       default: false
     },
+    /**
+     * It disables the chips button.
+     */
     disabled: {
       type: Boolean,
       default: false
     },
+    /**
+     * It sets if the button is active or not.
+     */
     active: {
       type: Boolean,
       default: false
@@ -96,11 +119,9 @@ export default {
       this.$emit("click")
     },
     onChange(event) {
-
       this.isChecked = event.target.checked
-
       this.$emit('update:checked', event.target.checked)
-      this.$emit("change")
+      this.$emit("change", event)
     },
     onClose() {
       this.$emit("close")