@policystudio/policy-studio-ui-vue 1.0.29 → 1.0.32

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",
+  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
     }
@@ -50,7 +71,11 @@ export default {
   },
   computed: {
     getComponentClass(){
-        return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}` 
+        if(this.icon){
+          return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}`
+        } else {
+          return `layout-${this.layout} size-${this.size}` 
+        }
     }
   },
   methods: {

package/src/components/chips/PsChips.vue

@@ -5,6 +5,7 @@
   >
     <input
       @change="onChange"
+      :disabled="disabled"
       v-if="type != 'button'"
       :type="type"
       :id="label"
@@ -12,12 +13,12 @@
     />
     <label
       @click="onClick"
+      :disabled="disabled"
       :for="label"
       :class="getCssClass"
     >
       <i v-if="icon" class="psui-el-chips-icon psui-el-chips-icon-prepend">{{ icon }}</i>
       {{ label }}
-      {{ layout }}
       <button 
         @click="onClose" 
         v-if="layout === 'rich'" 
@@ -30,44 +31,65 @@
 </template>
 
 <script>
-export const type = ["radio", "checkbox", "button"]
+export const type = ['radio', 'checkbox', 'button']
 
 export default {
-  name: "PsChips",
+  name: 'PsChips',
   props: {
+    /**
+     * It sets the label of the chips button.
+     */
     label: {
       type: String,
-      default: "",
+      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)
+      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: "",
+      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
     },
   },
-  emits: ["click", "change"],
+  emits: ['click', 'change'],
   data() {
     return {
       isChecked: false,
@@ -85,7 +107,7 @@ export default {
       let cssClass = ''
       
       if (this.checked === true ) {
-        cssClass = "psui-text-blue-50 psui-bg-blue-20"
+        cssClass = 'psui-text-blue-50 psui-bg-blue-20'
       }
 
       return cssClass
@@ -94,17 +116,15 @@ export default {
   methods: {
     onClick() {
       this.isChecked = !this.isChecked
-      this.$emit("click")
+      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")
+      this.$emit('close')
     },
   },
 }

package/src/components/controls/PsCheckbox.vue

@@ -3,10 +3,9 @@
     <input 
       :id="label" 
       type="checkbox" 
-      :value="label"
-      @change="onChange" 
-      :checked="checked"
-      :disabled='disabled'      
+      :value="inputValue"
+      v-model="model"
+      :disabled="disabled"      
     />
     <label :for="label" class="psui-el-checkmark"><span>{{ label }}</span></label>    
   </div>
@@ -18,41 +17,58 @@
 export default {
   name: 'PsCheckbox',
   props: {
+    /**
+     * It sets the label of the checkbox input.
+     */
     label: {
       type: String,
       default: '',
     },
+    /**
+     * It sets the value which should be monitored.
+    */
+    inputValue: {
+      type: String,
+    },
+    value:{
+      type: Array
+    },
+    /**
+     * It disables the checkbox input.
+     */
     disabled: {
       type: Boolean,
       default: false,
     },
+    /**
+     * It set the of the checkbox input. eg: big and small.
+     */
     size: {
       type: String,
       default: 'big',
       validator: (value)=> ['big', 'small'].includes(value)
     },
-    checked:{
-      type: Boolean,
-    },
+    /**
+     * It set the layout of the checkbox input. eg: default and mixed.
+     */
     layout:{
       type: String,
       default: 'default',
       validator: (value)=> ['default','mixed'].includes(value)
     }
   },
-  emits:['@update:checked', 'value'],
   computed:{
     getComponentClass(){
       return `size-${this.size} layout-${this.layout}`
-    }  
-  },
-  methods:{
-    onChange(event){
-      if(!this.disabled){
-        this.$emit('value', event.target.value)
-        this.$emit('update:checked', event.target.checked)
+    },
+    model: {
+      get(){
+        return this.value
+      },
+      set(value){
+        this.$emit('input', value)
       }
-    }
+    }  
   },
 }
 </script>