@policystudio/policy-studio-ui-vue 1.0.27 → 1.0.28

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

@@ -1,10 +1,13 @@
 <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 }}
+  <div 
+    class="psui-el-card-infos"
+    @click="onClick()"
+  >
+    <h5 class="psui-el-card-infos-title">
+      <span class="psui-text-gray-60 psui-mr-1">{{ 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>
+    <div class="psui-el-card-infos-content">
+      <span class="psui-el-card-infos-icon material-icons-round">{{ icon }}</span>
       <h5 class="psui-text-gray-80">{{ total }}</h5>
     </div>
   </div>
@@ -30,9 +33,13 @@ export default {
       type: String,
       default: '',
     },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click')
+    }
   }
 }
 </script>
 
-<style scoped>
-</style>
+<style> /* Please, use the file src/assets/scss/components/PsCardInfos.scss */</style>

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

@@ -1,12 +1,12 @@
 <template>
-  <div class="psui-flex psui-p-2 psui-rounded">
+  <div class="psui-el-chart-legend">
     <div class="psui-flex psui-flex-shrink-0">
-      <div class="dot psui-rounded-full" :style="dotColor"></div>
+      <div class="psui-el-chart-legend-dot" :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 class="psui-el-chart-legend-text">{{ text }}</div>
+      <span v-if="this.total" class="psui-el-chart-legend-total">{{ total }}</span>
+      <span class="psui-el-chart-legend-percentage" v-if="percentage"><span class="psui-text-gray-30" v-if="total && percentage"> | </span>{{ percentage }}%</span>
     </div>
   </div>
 </template>
@@ -15,7 +15,7 @@
 export default {
   props: {
     text: {
-      type: String,
+      type: [String, Number],
       default: 'Climate Zone 10',
     },
     total: {
@@ -34,10 +34,4 @@ export default {
 }
 </script>
 
-<style scoped>
-.dot {
-  width: 14px; height: 14px;
-  background-color: #43cec2;
-  margin-right: 6px;
-}
-</style>
+<style> /* Please, use the file src/assets/scss/components/PsChartLegend.scss */</style>

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

@@ -1,10 +1,10 @@
 <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>
+  <div class="psui-el-climate-zone-badge">
+    <i v-if="icon"> {{ icon }} </i>
+    <span>
+      {{ content }}
+    </span>
+  </div>
 </template>
 
 <script>
@@ -12,7 +12,16 @@ export default {
   props: {
     icon: {
       type: String,
+      default: 'area_chart',
+    },
+    content: {
+      type: Number,
+      default: 10,
     },
   },
 }
 </script>
+
+<style>
+/* Please, use the file src/assets/scss/components/PsClimateZoneBadge.scss */
+</style>

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

@@ -0,0 +1,72 @@
+<template>
+    <div class="psui-el-cost-effect-bar">
+      
+      <div
+        :class="{
+          'psui-bg-blue-20': value >= breakEven,
+          'psui-bg-red-10': value < breakEven,
+        }"
+      >
+        
+        <span :style="breakEvenPosition"> </span>
+
+        <div class="psui-overflow-hidden">
+
+        <input
+          type="number"
+          :style="{ width: `${value}px` }"
+          :class="{
+            'psui-bg-blue-60': value >= breakEven,
+            'psui-bg-red-20': value < breakEven,
+          }"
+        />
+        </div>
+
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'PsCostEffectBar',
+
+  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
+    },
+  },
+}
+</script>
+
+<style> /* Please, use the file src/assets/scss/components/PsCostEffectBar.scss */</style>
+

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

@@ -1,33 +1,26 @@
 <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>
+  <div class="psui-el-cost-effect-bar">
+    <div>
+      <span :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>
+      <PsProgressBar
+        :value="value"
+        :percentageColor="percentageColor"
+        :bgColor="bgColor"
+      >
+      </PsProgressBar>
     </div>
   </div>
 </template>
 
 <script>
+import PsProgressBar from './PsProgressBar.vue'
 export default {
+  name: 'PsCostEffectBar',
+  components: {
+    PsProgressBar,
+  },
+
   props: {
     value: {
       type: Number,
@@ -37,7 +30,7 @@ export default {
     breakEven: {
       type: Number,
       required: true,
-      default: 1,
+      default: 0,
     },
   },
   data() {
@@ -54,61 +47,31 @@ export default {
     },
 
     breakEvenPosition() {
-      return `left: ${this.breakEven}px`
+      return `left: ${this.breakEven >= 98 ? 98 : 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;
-}
+    percentageColor() {
+      return this.value >= this.breakEven
+        ? 'psui-bg-blue-60'
+        : 'psui-bg-red-20'
+    },
 
-.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; */
+    bgColor() {
+      // console.log(this.value >= this.breakEven ? 'psui-bg-blue-20' : 'psui-bg-red-10')
+      return this.value >= this.breakEven
+        ? 'psui-bg-blue-20'
+        : 'psui-bg-red-10'
+    },
+  },
 }
+</script>
 
-@keyframes animate-stripes {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 60px 0;
-  }
-}
+<style>
+/* Please, use the file src/assets/scss/components/PsCostEffectBar.scss */
 </style>

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="example">
-    <div class="dot"></div>
+  <div class="psui-el-highlight-ripple-icon">
+    <div class="psui-el-icon"></div>
   </div>
 </template>
 
@@ -8,71 +8,5 @@
 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;
-}
+<style> /* Please, use the file src/assets/scss/components/PsHighlightRippleDot.scss */</style>
 
-.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/PsProgressBar.vue

@@ -0,0 +1,42 @@
+<template> 
+      <div
+        class="psui-el-simple-progress-bar"
+        :class="bgColor"
+        >
+        <div
+          class="psui-el-simple-progress-bar-percentage"
+          :style="{ width: `${value}px` }"
+          :class="percentageColor"
+        ></div>
+      </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true,
+      default: 0,
+      validator: (value) => {
+        return value >= 0 && value <= 100
+      },
+    },
+  percentageColor: {
+    type: String,
+    default: 'psui-bg-blue-60'
+    // required: true,
+
+  },
+  bgColor: {
+    type: String,
+    default: 'psui-bg-blue-20'
+    // required: true,
+  },
+  
+  },
+}
+</script>
+
+<style> /* Please, use the file src/assets/scss/components/PsProgressBar.scss */ </style>
+

package/src/components/buttons/PsButton.vue

@@ -1,78 +1,74 @@
-<template>
-  <button
-      @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 default {  
-  props: {
-    label: {
-      type: String,
-    },
-    layout: {
-      type: String,
-      default: 'solid',
-      validator: (value) => ['solid','outline','ghost','onlytext'].includes(value)
-    },
-    icon: {
-      type: String,
-    },
-    iconPosition:{
-      type: String,
-      default: 'left',
-      validator: (value) => ['left','right'].includes(value)
-    },
-    size: {
-      type: String,
-      default: 'big',
-      validator: (value) => ['small','medium','big','custom'].includes(value)
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    iconClass:{
-      type: String
-    }
-  },
-  data(){
-    return {
-      isHover: false,
-    }
-  },
-  computed: {
-    getComponentClass(){
-      if (this.size != 'custom') {
-        return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}`
-      } else {
-        return `layout-${this.layout} icon-${this.iconPosition}`
-      }
-    }
-  },
-  methods: {
-    onClick() {
-      if (this.disabled) return
-      this.$emit('click')
-    },
-    onMouseEnter(){
-      if(!this.disabled){
-        this.isHover = true
-      }
-    },
-    onMouseLeave(){
-      if(!this.disabled){
-        this.isHover = false
-      }
-    }
-  }
-}
-</script>
-
+<template>
+  <button
+      @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 default {  
+  props: {
+    label: {
+      type: String,
+    },
+    layout: {
+      type: String,
+      default: 'solid',
+      validator: (value) => ['solid','outline','ghost','onlytext'].includes(value)
+    },
+    icon: {
+      type: String,
+    },
+    iconPosition:{
+      type: String,
+      default: 'left',
+      validator: (value) => ['left','right'].includes(value)
+    },
+    size: {
+      type: String,
+      default: 'big',
+      validator: (value) => ['small','medium','big'].includes(value)
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    iconClass:{
+      type: String
+    }
+  },
+  data(){
+    return {
+      isHover: false,
+    }
+  },
+  computed: {
+    getComponentClass(){
+        return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}` 
+    }
+  },
+  methods: {
+    onClick() {
+      if (this.disabled) return
+      this.$emit('click')
+    },
+    onMouseEnter(){
+      if(!this.disabled){
+        this.isHover = true
+      }
+    },
+    onMouseLeave(){
+      if(!this.disabled){
+        this.isHover = false
+      }
+    }
+  }
+}
+</script>
+