@policystudio/policy-studio-ui-vue 1.0.19 → 1.0.23

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="psui-flex psui-p-2 psui-rounded">
+    <div class="psui-flex psui-flex-shrink-0">
+      <div :class="dotClass" 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>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: 'Climate Zone 10',
+    },
+    total: {
+      type: Number,
+      default: null,
+    },
+    percentage: {
+      type: Boolean,
+      default: false,
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+}
+</script>
+
+<style scoped>
+.dot {
+  width: 14px; height: 14px;
+  background-color: #43cec2;
+  margin-right: 6px;
+}
+</style>

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

@@ -0,0 +1,18 @@
+<template>
+  <button
+    class="psui-flex psui-p-3 psui-bg-gray-10 psui-text-gray-50 hover:psui-text-blue-60 hover:psui-bg-blue-20 psui-transition-all psui-duration-300 psui-ease-out psui-shadow-lg psui-rounded"
+  >
+    <i v-if="icon" class="material-icons psui-text-base"> {{ icon }} </i>
+    <p class="psui-text-sm">10</p>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="container">
+      <div
+        class="loading-bar"
+        :class="{
+          'psui-bg-blue-20': value >= breakEven,
+          'psui-bg-red-10': value < breakEven,
+        }"
+      >
+        <span class="breakEven" :style="breakEvenPosition"> </span>
+
+        <input
+          type="number"
+          min="0"
+          max="100"
+          class="percentage"
+          :style="{ width: `${value}px` }"
+          :class="{
+            'psui-bg-blue-60': value >= breakEven,
+            'psui-bg-red-20': value < breakEven,
+          }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    breakEven: {
+      type: Number,
+      required: true,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      errors: [],
+    }
+  },
+
+  computed: {
+    valueBar() {
+      if (this.value > 100) return 100
+      else if (this.value < 0) return 0
+      else return this.value
+    },
+
+    breakEvenPosition() {
+      return `left: ${this.breakEven}px`
+    },
+    getIsBreakEven() {
+      if (this.breakEven < 0) return 0
+      else if (this.breakEven > 100) return 100
+      else return this.breakEven
+      // else return true;
+      // return this.value > this.breakEven ? true : false;
+    },
+  },
+}
+</script>
+
+<style scoped>
+.container {
+  overflow: visible;
+}
+
+.loading-bar {
+  position: relative;
+  width: 100px;
+  height: 8px;
+  border-radius: 15px;
+}
+
+.loading-bar .percentage {
+  position: absolute;
+  display: block;
+  max-width: 100px;
+  height: 100%;
+  border-radius: 15px;
+  overflow: visible;
+  background-size: 30px 30px;
+  animation: animate-stripes 3s linear infinite;
+}
+
+.breakEven {
+  position: absolute;
+  background-color: #d6dde5;
+  width: 2px;
+  height: 14px;
+  /* max-width: 100px; */
+  border-radius: 2px;
+  top: -3px;
+  z-index: 1;
+  /* left: 2px; */
+  /* right: -2px; */
+}
+
+@keyframes animate-stripes {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 60px 0;
+  }
+}
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <div class="example">
+    <div class="dot"></div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+.example {
+  position: static;
+  /* margin: 0px 32px; */
+  /* width: 275px;
+  height: 229px; */
+  /* left: 0px;
+  top: 0px; */
+  /* border: 1.5px dashed #9b51e0; */
+  /* background: #f3f6f9; */
+  box-sizing: border-box;
+}
+.dot {
+  background: #5db883;
+  /* border: solid 1px #2bb24c; */
+  border-radius: 50%;
+  /* box-shadow: 0px 0 2px #2bb24c; */
+  width: 8px;
+  height: 8px;
+  /* left: 6px;
+  top: 6px; */
+  margin: 100px auto;
+  position: relative;
+}
+
+.dot::before,
+.dot::after {
+  background: #def8e8;
+  border: solid 0px #2bb24c;
+  border-radius: 50%;
+  content: '';
+  width: 36px;
+  height: 36px;
+  left: -8px;
+  top: -8px;
+  position: absolute;
+  transform-origin: center center;
+  transform: scale(1) translate(-1px, -1px);
+}
+.dot::before {
+  animation: ripple 1s infinite;
+}
+.dot::after {
+  animation: ripple 1s infinite;
+  /* animation-delay: 0.4s; */
+}
+
+@keyframes ripple {
+  0% {
+    /* transform: scale(1) translate(-1px, -1px);
+    opacity: 0.75; */
+    left: 5px;
+    top: 5px;
+    opacity: 0.95;
+    width: 0;
+    height: 0;
+  }
+  100% {
+    /* transform: scale(2) translate(-1px, -1px);
+    opacity: 0; */
+    left: -13px;
+    top: -13px;
+    opacity: 0;
+    width: 36px;
+    height: 36px;
+  }
+}
+</style>

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

@@ -0,0 +1,46 @@
+<template>
+  <div :class="cssClass">
+    <div class="psui-w-full">{{ message }}</div>
+  </div>
+</template>
+
+<script>
+export const typeOptions = ['informative', 'success', 'warning', 'error']
+export default {
+  name: 'PsMiniTag',
+  props: {
+    type: {
+      type: String,
+      default: 'informative',
+      validator: (value) => typeOptions.indexOf(value) !== -1,
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      colors: {
+        informative: { background: 'blue-20', color: 'blue-60' },
+        success: { background: 'green-10', color: 'green-70' },
+        warning: { background: 'yellow-10', color: 'yellow-70' },
+        error: { background: 'red-10', color: 'red-20' },
+      },
+    }
+  },
+  computed: {
+    cssClass() {
+      return `fit-content psui-flex psui-rounded-lg psui-px-2 psui-items-center psui-justify-center psui-flex-row psui-mx-6 psui-bg-${
+        this.colors[this.type].background
+      } psui-text-${this.colors[this.type].color}`
+    },
+  },
+}
+</script>
+
+<style scoped>
+.fit-content {
+  width: fit-content;
+}
+</style>

package/src/components/buttons/PsButton.vue

@@ -1,109 +1,77 @@
 <template>
   <button
-    class="psui-font-bold psui-align-middle psui-flex psui-rounded-md"
-    :class="classes" 
-    @click="onClick()"
-  >
-    <i
-      v-if="icon"
-      :class="['psui-mr-2', iconClasses]"
-    >
-    {{ icon }}
-    </i>
-    <div 
-      v-if="label" 
-      class="psui-flex-grow psui-text-left"
-      >{{ label }}
-    </div>
-    <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}, {'active': isActive}, {'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,
+      required: true,
+      default: 'solid',
+      validator: (value) => ['solid','outline','ghost','onlytext'].includes(value)
     },
     icon: {
       type: String,
     },
-    iconRight: {
+    iconPosition:{
       type: String,
+      default: 'right',
+      validator: (value) => ['left','right'].includes(value)
     },
     size: {
       type: String,
       default: 'big',
-      validator: (value) => sizes.indexOf(value) !== -1
+      validator: (value) => ['small','medium','big'].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,
+      isActive: false,
     }
   },
   computed: {
-    iconClasses() {
-      const size = this.sizes === 'small' ? 'psui-text-sm' : ''
-      const color = this.iconColor.length > 0 ? `psui-text-${this.iconColor}` : ''
-      return `psui-my-auto material-icons ${size} ${color}`
-    },
-    classes() {
-      let sizeCss = 'psui-px-4 psui-py-2'
-      if (this.size === 'medium') sizeCss = 'psui-px-4 psui-py-1'
-      if (this.size === 'small') sizeCss = 'psui-px-2 psui-py-psui-px psui-text-sm'
-      if (this.outline) return `${sizeCss} psui-bg-white psui-border ${this.disabled ? 'psui-border-gray-40 psui-text-gray-40' : 'psui-border-blue-60 psui-text-blue-60'}`
-      if (this.ghost) return `${sizeCss} ${this.disabled ? 'psui-bg-gray-20 psui-text-gray-40' : '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'
-        
-        if (hasTextColor) textCss = `psui-text-${color}`
-        if (hover) textCss += `hover:psui-text-${hover}`
-
-        return `${sizeCss} ${textCss}`
-      }
-      if (this.disabled) return `${sizeCss} psui-bg-gray-20 psui-text-gray-40`
-      return `${sizeCss} psui-bg-blue-60 hover:psui-bg-blue-50 psui-text-white active:psui-shadow-inner`
-    }  
+    getComponentClass(){
+        return `layout-${this.layout} ${this.size} ${this.iconPosition}`
+    }
   },
   methods: {
     onClick() {
-      if (this.disabled) return false
+      if (this.disabled) return
+      this.isActive = true, 
       this.$emit('click')
+    },
+    onMouseEnter(){
+      if(!this.disabled){
+        this.isHover = true
+      }
+    },
+    onMouseLeave(){
+      if(!this.disabled){
+        this.isHover = false
+      }
     }
   }
 }
 </script>
+

package/src/components/chips/PsChips.vue

@@ -1,25 +1,26 @@
 <template>
   <label
     @click="onClick"
-    
     :for="title"
-
-    :class="cssClass"
-
+    :class="getCssClass"
     class="
       psui-flex
-      psui-items-center
       psui-gap-2
-      psui-justify-center
       psui-bg-gray-10
-      psui-text-gray-60
-      psui-rounded-md
-      psui-py-1
+      psui-text-gray-50
       psui-px-2
-      psui-cursor-pointer
+      psui-py-1
+      psui-rounded-md
+      psui-items-center
     "
   >
-    <input @change="onChange" v-if="type !== 'text'" :type="type" :id="title" />
+    <input
+      @change="onChange"
+      v-if="type !== 'text'"
+      :type="type"
+      :id="title"
+      :checked="checked"
+    />
     <i v-if="icon" class="material-icons">{{ icon }}</i>
     {{ title }}
     <button @click="onClose" v-if="rich" class="psui-flex psui-items-center">
@@ -41,15 +42,20 @@ export default {
     type: {
       type: String,
       required: true,
+      validator: (type) => ["text", "radio", "checkbox", "button"].includes(type)
     },
     icon: {
       type: String,
       default: "",
     },
     rich: {
-        type: Boolean,
-        default: false
-    }
+      type: Boolean,
+      default: false,
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
   },
   emits: ["click", "change"],
   data() {
@@ -58,42 +64,36 @@ export default {
     }
   },
   computed: {
-    cssClass() {
-      if (this.isChecked === true && this.type === "radio") {
-        return "psui-text-blue-50"
+    getCssClass() {
+      let cssClass = ''
+      
+      if (this.checked === true ) {
+        cssClass = "psui-text-blue-50 psui-bg-blue-20"
       }
 
-      if (this.isChecked === true && this.type === "checkbox") {
-        return "psui-text-blue-50"
-      }
-
-      if (this.isChecked === true){
-        return "psui-text-blue-50"
-      }
-      return "psui-text-blue-50"
+      return cssClass
     },
   },
   methods: {
     onClick() {
-      if (this.disabled) return false
-      if (this.type !== "checkbox" || this.type !== "radio") {
-        this.isChecked = !this.isChecked
-      }
+      this.isChecked = !this.isChecked
       this.$emit("click")
     },
     onChange(event) {
+
       this.isChecked = event.target.checked
+
+      this.$emit('update:checked', event.target.checked)
       this.$emit("change")
     },
-    onClose(){
+    onClose() {
       this.$emit("close")
-    }
-  } 
+    },
+  },
 }
 </script>
 
 <style scoped>
-
 input[type="radio"] {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -103,7 +103,8 @@ input[type="radio"] {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid #4b5563;
+  border: 1px solid #d6dde5;
+  cursor: pointer;
 }
 
 input[type="checkbox"] {
@@ -115,7 +116,8 @@ input[type="checkbox"] {
   width: 16px;
   height: 16px;
   border-radius: 25%;
-  border: 1px solid #4b5563;
+  border: 1px solid #d6dde5;
+  cursor: pointer;
 }
 
 input[type="radio"]:hover,
@@ -125,16 +127,19 @@ input[type="checkbox"]:hover {
 
 input[type="radio"]:checked {
   border-color: #64b5ce;
-  background: url('../../assets/images/radio-checked-button.svg') #ffffff no-repeat center;
+  background: url("../../assets/images/radio-checked-button.svg") #ffffff
+    no-repeat center;
 }
 
 input[type="checkbox"]:checked {
   border-color: #64b5ce;
-  background: url('../../assets/images/check-checkbox-button.svg') #64b5ce no-repeat center;
+  background: url("../../assets/images/check-checkbox-button.svg") #64b5ce
+    no-repeat center;
 }
 
 label {
-    width: fit-content;
+  width: fit-content;
+  cursor: pointer;
 }
 
 label:hover {
@@ -142,5 +147,8 @@ label:hover {
   background: #ffffff;
 }
 
+button {
+  outline: none;
+}
 </style>