@policystudio/policy-studio-ui-vue 1.0.22 → 1.0.26

package/src/components/accordion/PsAccordionItem.vue

@@ -1,34 +1,16 @@
 <template>
-  <div class="container">
-    <div
-      @click="toggleTitle"
-      :class="cssClass"
-      class="
-        psui-flex psui-cursor-pointer psui-transition-all psui-justify-between
-      "
-    >
-      <div
-        v-if="title"
-        :class="display ? 'selected' : ''"
-        class="psui-font-bold psui-gray04"
-      >
-        {{ title }}
-      </div>
-      <i v-if="!display" class="material-icons">{{ iconClass.closed }}</i>
-      <i v-else :class="display ? 'selected' : ''" class="material-icons">{{
-        iconClass.open
-      }}</i>
+  <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="display" class="psui-transition-all psui-duration-300">
+    <div v-if="isOpen" class="psui-el-accordion-item-content">
       <slot></slot>
     </div>
   </div>
 </template>
 
 <script>
-export const iconTypes = ["mathsign", "chevron"]
-export const fontCss = ["medium", "big"]
-
 export default {
   name: "PsAccordionItem",
   props: {
@@ -36,67 +18,54 @@ export default {
       type: String,
       required: true,
     },
-    iconType: {
+    'iconOpened': {
       type: String,
-      default: "chevron",
     },
-    fontCss: {
+    'iconClosed': {
       type: String,
-      default: "medium",
     },
+    opened: {
+      type: [Boolean],
+      default: false
+    }
   },
   data() {
     return {
-      display: false,
+      localOpened: null,
     }
   },
   computed: {
-    iconClass() {
-      if (this.iconType === "chevron") {
-        return { closed: "expand_more", open: "expand_less" }
-      } else if (this.iconType === "mathsign") {
-        return { closed: "add", open: "remove" }
+    getIcons() {
+      return {
+        'iconOpened' : this.iconOpened ?? this.getParentVueComponentByName(this.$parent, 'PsAccordion').getIcons.iconOpened,
+        'iconClosed' : this.iconClosed ?? this.getParentVueComponentByName(this.$parent, 'PsAccordion').getIcons.iconClosed,
       }
-      return ''
     },
-    cssClass() {
-      if (this.fontCss === "big") return "big"
-      return "medium"
+    getIcon() {
+      return this.isOpen ? this.getIcons.iconOpened : this.getIcons.iconClosed
     },
+    isOpen() {
+      return this.localOpened !== null ? this.localOpened : this.opened
+    }
   },
   methods: {
-    toggleTitle() {
-      this.display = !this.display
+    toggle() {
+      if (this.localOpened === null) {
+        this.localOpened = !this.opened
+      } else {
+        this.localOpened = !this.localOpened
+      }
     },
-  },
+    getParentVueComponentByName(comp, name) {
+      if (comp.$options.name === name) {
+        return comp
+      } else {
+        return this.getParentVueComponentByName(comp.$parent, name)
+      }
+    }
+  }
 }
 </script>
 
-<style scoped>
-.container {
-  border-bottom: 1px solid #e6ecf2;
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
-span {
-  font-weight: 700;
-  color: #e6ecf2;
-}
-
-.selected {
-  color: #318fac;
-  transition: color 300ms;
-}
-
-.big {
-  font-size: 18px;
-  line-height: 130%;
-}
-
-.medium {
-  font-size: 16px;
-  line-height: 130%;
-}
-</style>
+<style> /* Please, use the file src/assets/scss/components/PsAccordion.scss */</style>
 

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="psui-border psui-border-gray-20 psui-rounded-md psui-flex psui-flex-col psui-items-center psui-justify-center psui-px-3 psui-py-2 psui-space-y-2">
+    <h5 class="psui-text-xsmall psui-font-bold psui-text-gray-40">
+      <span class="psui-text-gray-60">{{ title }} </span>{{ subtitle }}
+    </h5>
+    <div class="psui-w-full psui-flex psui-justify-center psui-items-center psui-space-x-2 psui-text-p">
+      <span class="psui-text-blue-50 material-icons-round">{{ icon }}</span>
+      <h5 class="psui-text-gray-80">{{ total }}</h5>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PsCardInfos',
+  props: {
+    title: {
+      type: String,
+      default: 'Total',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: 'edit',
+    },
+    total: {
+      type: String,
+      default: '',
+    },
+  }
+}
+</script>
+
+<style scoped>
+</style>

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

@@ -1,15 +1,12 @@
 <template>
-  <div class="toView psui-flex psui-flex-row psui-p-8 psui-rounded">
-    <div class="container psui-p-2 psui-rounded">
-      <div class="psui-flex">
-        <div class="dot"></div>
-        <div class="text">{{ text }}</div>
-      </div>
-      <div class="container1">
-        <span v-if="this.value" :class="isValue">{{ value }}</span>
-        <span :class="isBar"></span>
-        <span :class="isPercentage">{{ percentage }}</span>
-      </div>
+  <div class="psui-flex psui-p-2 psui-rounded">
+    <div class="psui-flex psui-flex-shrink-0">
+      <div class="dot psui-rounded-full" :style="dotColor"></div>
+    </div>
+    <div class="psui-flex-grow-1">
+      <div class="psui-text-xsmall psui-text-gray-50 psui-font-bold psui-mb-1">{{ text }}</div>
+      <span v-if="this.total" class="psui-text-p psui-text-gray-80">{{ total }}</span>
+      <span class="psui-text-gray-50" v-if="percentage"><span class="psui-text-gray-30" v-if="total && percentage"> | </span>{{ percentage }}%</span>
     </div>
   </div>
 </template>
@@ -21,108 +18,26 @@ export default {
       type: String,
       default: 'Climate Zone 10',
     },
-    value: {
-      type: Number,
-      // required: true,
+    total: {
+      type: String,
       default: null,
     },
     percentage: {
       type: String,
-      // required: true,
-      default: '',
-    },
-  },
-  computed: {
-    isValue() {
-      if (this.value) {
-        return 'value'
-      } else {
-        return 'hide'
-      }
-    },
-    isPercentage() {
-      if (this.percentage) {
-        return 'percentage'
-      } else {
-        return 'hide'
-      }
+      default: null,
     },
-    isBar() {
-      if (this.value !== 0 && this.percentage !== '') {
-        return 'bar'
-      } else {
-        return 'hide'
-      }
+    dotColor: {
+      type: Object,
+      default: null
     },
   },
 }
 </script>
 
 <style scoped>
-.toView {
-  /* display: flex; */
-  /* flex-direction: row; */
-  /* padding: 32px; */
-
-  width: 351px;
-  height: 119px;
-
-  background: #f3ebfa;
-  border: 1.5px dashed #7b61ff;
-  /* border-radius: 5px; */
-}
-
-.container {
-  /* padding: 8px; */
-
-  width: fit-content;
-  height: fit-content;
-
-  background: #ffffff;
-  /* border-radius: 4px; */
-
-  /* margin: 0px 32px; */
-}
-
-.hide {
-  display: none;
-}
-
 .dot {
-  width: 14px;
-  height: 14px;
-  background: #43cec2;
-  border-radius: 8px;
-  margin: 0px 6px 0px 0px;
-}
-
-.text {
-  font-weight: bold;
-  font-size: 12px;
-  line-height: 120%;
-
-  color: #798490;
-}
-
-.container1 {
-  margin: 0px 0px 0px 20px;
-}
-
-.value {
-  color: #28323b;
-}
-
-.percentage {
-  color: #798490;
-}
-
-.bar {
-  background-color: #d6dde5;
-  height: 14px;
-
-  border-radius: 2px;
-
-  padding: 0px 1px;
-  margin-right: 3px;
+  width: 14px; height: 14px;
+  background-color: #43cec2;
+  margin-right: 6px;
 }
 </style>

package/src/components/buttons/PsButton.vue

@@ -1,129 +1,78 @@
 <template>
   <button
-    class="psui-font-bold psui-items-center psui-flex psui-rounded-md"
-    :class="classes" 
-    @click="onClick()"
-  >
-    <i
-      v-if="icon"
-      :class="['psui-mr-2', iconClasses]"
-    >
-    {{ icon }}
-    </i>
-    <span 
-      v-if="label" 
-      class="psui-flex-grow psui-text-left"
-      >{{ label }}
-    </span>
-    <i
-      v-if="iconRight"
-      :class="['psui-ml-2', iconClasses]"
-    >
-    {{ iconRight }}
-    </i>
+      @click="onClick()" 
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave" 
+      class='psui-el-button' 
+      :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled}]" 
+   >
+    <i v-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
+    <span v-if="label">{{ label }}</span>
   </button>
 </template>
 
 <script>
-export const sizes = ['big', 'medium', 'small']
 export default {  
   props: {
     label: {
       type: String,
     },
-    outline: {
-      type: Boolean,
-      default: false
-    },
-    ghost: {
-      type: Boolean,
-      default: false
-    },
-    textOnly: {
-      type: Boolean,
-      default: false
+    layout: {
+      type: String,
+      default: 'solid',
+      validator: (value) => ['solid','outline','ghost','onlytext'].includes(value)
     },
     icon: {
       type: String,
     },
-    iconRight: {
+    iconPosition:{
       type: String,
+      default: 'left',
+      validator: (value) => ['left','right'].includes(value)
     },
     size: {
       type: String,
       default: 'big',
-      validator: (value) => sizes.indexOf(value) !== -1
+      validator: (value) => ['small','medium','big','custom'].includes(value)
     },
     disabled: {
-      type: [Boolean, String]
-    },
-    'text-color': {
-      type: String,
-      default: ''
-    },
-    'icon-color': {
-      type: String,
-      default: ''
+      type: Boolean,
+      default: false
     },
-    color: {
-      type: String,
-      default: ''
+    iconClass:{
+      type: String
+    }
+  },
+  data(){
+    return {
+      isHover: false,
     }
   },
   computed: {
-    iconClasses() {
-      const size = this.size === 'small' ? 'psui-text-small' : this.size === 'medium' ? 'psui-text-small' : 'psui-text-big'
-      const color = this.iconColor.length > 0 ? `psui-text-${this.iconColor}` : ''
-      return `psui-my-auto material-icons ${size} ${color}`
-    },
-    classes() {
-      let sizeCss = ''
-
-      if (this.size === 'medium') sizeCss = 'medium'      
-      if (this.size === 'small') sizeCss = 'small'
-      if (this.size === 'big') sizeCss = 'big'
-      
-      if (this.outline) return `${sizeCss} psui-bg-white psui-border ${this.disabled ? 'psui-border-gray-40 psui-text-gray-40 psui-cursor-default' : 'psui-border-blue-60 psui-text-blue-60'}`
-      if (this.ghost) return `${sizeCss} ${this.disabled ? 'psui-bg-gray-20 psui-text-gray-40 psui-cursor-default' : 'psui-bg-blue-20 psui-text-blue-60 active:psui-shadow-inner'}`
-      if (this.textOnly) {
-        const hasTextColor = this.textColor.length > 0
-        const color = hasTextColor ? this.textColor.split('hover:')[0] : ''
-        const hover = hasTextColor ? this.textColor.split('hover:')[1] : ''
-
-        let textCss = 'psui-text-blue-50 hover:psui-text-blue-60'
-        if (this.disabled) textCss = 'psui-text-gray-40 psui-cursor-default'
-        
-        if (hasTextColor) textCss = `psui-text-${color}`
-        if (hover) textCss += `hover:psui-text-${hover}`
-
-        return `${sizeCss} ${textCss}`
+    getComponentClass(){
+      if (this.size != 'custom') {
+        return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}`
+      } else {
+        return `layout-${this.layout} icon-${this.iconPosition}`
       }
-      if (this.disabled) return `${sizeCss} psui-bg-gray-20 psui-text-gray-40 psui-cursor-default`
-      return `${sizeCss} psui-bg-blue-60 hover:psui-bg-blue-50 psui-text-white active:psui-shadow-inner psui-cursor-pointer`
-    }  
+    }
   },
   methods: {
     onClick() {
-      if (this.disabled) return false
+      if (this.disabled) return
       this.$emit('click')
+    },
+    onMouseEnter(){
+      if(!this.disabled){
+        this.isHover = true
+      }
+    },
+    onMouseLeave(){
+      if(!this.disabled){
+        this.isHover = false
+      }
     }
   }
 }
 </script>
 
-<style scoped>
-  .small {
-    padding: 4px 8px 4px 8px;
-    font-size: 14px;
-  }
-
-  .medium{
-    padding: 7px 16px 7px 16px;
-    font-size: 14px;
-  }
-
-  .big{
-    padding: 9.5px 16px 9.5px 16px;
-    font-size: 16px;
-  }
-</style>

package/src/components/controls/PsToggle.vue

@@ -32,7 +32,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .wrapper {
   padding: 2px;
 }

package/src/components/forms/PsInput.vue

@@ -25,7 +25,7 @@
         @keydown="$emit('keydown', $event)"
         @change="$emit('change', $event)"
         v-bind="getAttrs"
-        :class="getInputClasses"
+        :class="{ 'focus': isFocus }"
       />
     
       <div v-if="$slots.append || hasError" class="psui-el-input-append">

package/src/components/notifications/PsDialog.vue

@@ -1,28 +1,33 @@
 <template>
-  <div class="psui-flex psui-justify-between psui-pr-3 psui-pl-2 psui-py-2 psui-rounded-md" :class="getDialogColor">   
-      <div class="psui-flex psui-justify-between psui-gap-2">
-        <i class="material-icons-round">info</i>
-        <div class="psui-flex psui-flex-col">
-          <p v-if="message" class="psui-w-full">{{ message }}</p>
-          <slot v-else name="content"></slot>
-          <slot v-if="layout === 'vertical'" name="action"></slot>
-        </div>
+  <div class="psui-el-dialog" :class="getComponentClass">   
+    <div class="psui-el-dialog-icon">
+      <i class="material-icons-round">{{icon}}</i>
+    </div>
+    <div class="psui-el-dialog-wrapper">      
+      <div class="psui-el-dialog-default">
+        <slot>
+          <p class="psui-el-dialog-message">{{ message }}</p>
+        </slot>
       </div>
-      <div class="psui-flex psui-gap-3">
-        <slot v-if="layout === 'horizontal'" name="action"></slot>
-        <button @click="onClose" class="psui-w-4 psui-h-4 focus:psui-outline-none">
-          <i class="material-icons-round">close</i>
-        </button>
+      <div class="psui-el-dialog-action">
+        <slot name="action"></slot>
       </div>
+    </div>
+    <button
+      class="psui-el-dialog-close" 
+      v-if="hasClose" 
+      @click="onClose">
+      <i class="material-icons-round">close</i>
+    </button>
   </div>
 </template>
 
 <script>
-
+// Figma - 3. Inline Dialog https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=3694%3A55841
 export default {
   name: 'PsDialog',
   props: {
-    status: {
+    theme: {
       type: String,
       default: 'informative',
       validator: (value) => ['informative', 'success', 'alert'].includes(value)
@@ -35,18 +40,19 @@ export default {
       default: 'horizontal',
       validator: (value) => ['horizontal', 'vertical'].includes(value)
     },
-    cssClass:{
-      type: String
+    hasClose: {
+      type: Boolean,
+      default: true
+    },
+    icon: {
+      type: String,
+      default: 'info'
     }
   },
   emits:['close'],
   computed: {
-    getDialogColor() {
-      let dialogColor = ''
-        if(this.status === 'informative') dialogColor = `psui-bg-blue-20 psui-text-blue-60 ${this.cssClass}`
-        if(this.status === 'success') dialogColor = `psui-bg-green-10 psui-text-green-70 ${this.cssClass}`
-        if(this.status === 'alert') dialogColor = `psui-bg-yellow-10 psui-text-yellow-70 ${this.cssClass}`
-      return dialogColor
+    getComponentClass() {
+      return [`layout-${this.layout}`, `theme-${this.theme}`, `close-${this.hasClose ? 'on' : 'off'}` ]
     }
   },
   methods:{

package/src/components/tabs/PsTabHeader.vue

@@ -1,37 +1,36 @@
 <template>
-  <div :class="wrapperClasses" role="group">
+  <div 
+    class="psui-el-tab-header" 
+    :class="[getComponentClass, `layout-${layout}`]" 
+    role="group"
+  >
+		
     <button
       type="button" 
       v-for="item in getItems" 
       :key="item[keyValue]"
       @click="selectTab(item)"
-      :class="[
-        classes, 
-        { 'psui-bg-blue-60 psui-text-white': getSelected === item[keyValue] && theme === 'standard' },
-        { 'psui-border-b-2 psui-border-blue-60 psui-text-blue-60 psui-font-bold': getSelected === item[keyValue] && theme === 'underline' },
-        { 'psui-text-blue-60 psui-font-bold psui-bg-white hover:psui-text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
-      ]"
+      :class="{ 'status-active': getSelected === item[keyValue] }"
     >
       {{ item[keyLabel] }}
     </button>
-  </div>
+
+	</div>
 </template>
 
 <script>
-export const themeOptions = ['standard', 'underline', 'folder']
 export default {
   name: 'PsTabHeader',
   props: {
-    theme: {
+    layout: {
       type: String,
       default: 'standard',
-      validator: (value) => themeOptions.indexOf(value) !== -1
+      validator: (value) => ['standard', 'underline', 'folder'].includes(value)
     },
     items: {
       type: Array,
       required: true
     },
-    selected: {},
     keyLabel: {
       type: String,
       default: 'label'
@@ -39,26 +38,20 @@ export default {
     keyValue: {
       type: String,
       default: 'value'
-    }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    selected: {},
   },
   computed: {
-    wrapperClasses() {
-      if (this.theme === 'underline') {
-        return 'psui-flex psui-space-x-4 psui-border-b psui-border-gray-20'
-      }
-      if (this.theme === 'folder') {
-        return 'psui-flex psui-space-x-1'
-      }
-      return 'psui-inline-flex psui-rounded-md psui-flex psui-gap-x-px'
-    },
-    classes() {
-      if (this.theme === 'underline') {
-        return 'psui-text-gray-60 psui-pb-3 hover:psui-text-blue-60'
-      }
-      if (this.theme === 'folder') {
-        return 'psui-bg-gray-10 psui-text-gray-50 psui-py-2 psui-px-4 psui-rounded-t-lg hover:psui-text-gray-60 active:psui-text-blue-60'
+    getComponentClass() {
+      if (this.disabled) {
+        return 'status-disabled'  
+      } else {
+        return 'status-resting'
       }
-      return 'psui-bg-gray-10 psui-px-4 psui-py-2 psui-text-gray-60 hover:psui-text-blue-60 last:psui-rounded-r-lg first:psui-rounded-l-lg active:psui-text-white active:psui-bg-blue-60'
     },
     getIsObject() {
       return typeof this.selected === 'object'
@@ -85,7 +78,7 @@ export default {
       } else {
         return this.items
       }
-    }
+    },
   },
   methods: {
     selectTab(item) {
@@ -96,3 +89,5 @@ export default {
 
 }
 </script>
+
+<style> /* Please, use the file src/assets/scss/components/PsTabHeader.scss */</style>