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

package/src/components/accordion/PsAccordion.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="classes" class='psui-flex psui-flex-col' >
+      <slot></slot>
+  </div>
+</template>
+
+<script>
+export const sizes = ['big', 'medium']
+
+export default {
+  name:"PsAccordion",
+  props: {
+    size:{
+      type: String,
+      default: 'medium',
+      required: true
+    }
+  },
+  computed:{
+    classes(){
+      if( this.size === 'big') return 'big'
+      return 'medium'
+    }
+  }
+
+}
+</script>
+<style scoped>
+ .medium {
+   width: 390px;
+ }
+
+ .big {
+   width: 580px;
+ }
+</style>

package/src/components/accordion/PsAccordionItem.vue

@@ -0,0 +1,102 @@
+<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>
+      <span v-if="!display" class="material-icons">{{ iconClass.closed }}</span>
+      <span v-else :class="display ? 'selected' : ''" class="material-icons">{{
+        iconClass.open
+      }}</span>
+    </div>
+    <div v-if="display" class="psui-transition-all psui-duration-300">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export const iconTypes = ["mathsign", "chevron"]
+export const fontCss = ["medium", "big"]
+
+export default {
+  name: "PsAccordionItem",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    iconType: {
+      type: String,
+      required: true,
+      default: "chevron",
+    },
+    fontCss: {
+      type: String,
+      default: "medium",
+    },
+  },
+  data() {
+    return {
+      display: false,
+    }
+  },
+  computed: {
+    iconClass() {
+      if (this.iconType === "chevron") {
+        return { closed: "expand_more", open: "expand_less" }
+      } else if (this.iconType === "mathsign") {
+        return { closed: "add", open: "remove" }
+      }
+      return ''
+    },
+    cssClass() {
+      if (this.fontCss === "big") return "big"
+      return "medium"
+    },
+  },
+  methods: {
+    toggleTitle() {
+      this.display = !this.display
+    },
+  },
+}
+</script>
+
+<style scoped>
+.container {
+  border: 1px solid #e6ecf2;
+  padding: 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>
+

package/src/components/buttons/PsButton.vue

@@ -10,7 +10,11 @@
     >
     {{ icon }}
     </i>
-    <div class="psui-flex-grow psui-text-left">{{ label }}</div>
+    <div 
+      v-if="label" 
+      class="psui-flex-grow psui-text-left"
+      >{{ label }}
+    </div>
     <i
       v-if="iconRight"
       :class="['psui-ml-2', iconClasses]"
@@ -26,7 +30,6 @@ export default {
   props: {
     label: {
       type: String,
-      required: true
     },
     outline: {
       type: Boolean,
@@ -99,7 +102,7 @@ export default {
   methods: {
     onClick() {
       if (this.disabled) return false
-      this.$emit('click');
+      this.$emit('click')
     }
   }
 }

package/src/components/chips/PsChips.vue

@@ -0,0 +1,146 @@
+<template>
+  <label
+    @click="onClick"
+    
+    :for="title"
+
+    :class="cssClass"
+
+    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-px-2
+      psui-cursor-pointer
+    "
+  >
+    <input @change="onChange" v-if="type !== 'text'" :type="type" :id="title" />
+    <i v-if="icon" class="material-icons">{{ icon }}</i>
+    {{ title }}
+    <button @click="onClose" v-if="rich" class="psui-flex psui-items-center">
+      <i class="material-icons">close</i>
+    </button>
+  </label>
+</template>
+
+<script>
+export const type = ["text", "radio", "checkbox", "button"]
+
+export default {
+  name: "PsChips",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    rich: {
+        type: Boolean,
+        default: false
+    }
+  },
+  emits: ["click", "change"],
+  data() {
+    return {
+      isChecked: false,
+    }
+  },
+  computed: {
+    cssClass() {
+      if (this.isChecked === true && this.type === "radio") {
+        return "psui-text-blue-50"
+      }
+
+      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"
+    },
+  },
+  methods: {
+    onClick() {
+      if (this.disabled) return false
+      if (this.type !== "checkbox" || this.type !== "radio") {
+        this.isChecked = !this.isChecked
+      }
+      this.$emit("click")
+    },
+    onChange(event) {
+      this.isChecked = event.target.checked
+      this.$emit("change")
+    },
+    onClose(){
+      this.$emit("close")
+    }
+  } 
+}
+</script>
+
+<style scoped>
+
+input[type="radio"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid #4b5563;
+}
+
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 25%;
+  border: 1px solid #4b5563;
+}
+
+input[type="radio"]:hover,
+input[type="checkbox"]:hover {
+  border-color: #64b5ce;
+}
+
+input[type="radio"]:checked {
+  border-color: #64b5ce;
+  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;
+}
+
+label {
+    width: fit-content;
+}
+
+label:hover {
+  color: #64b5ce;
+  background: #ffffff;
+}
+
+</style>
+

package/src/components/controls/PsCheckbox.vue

@@ -25,7 +25,7 @@ export default {
     },
     checkboxClasses: {
       type: String,
-      default: 'psui-pl-8'
+      default: ''
     },
     labelClasses: {
       type: String,
@@ -42,7 +42,7 @@ export default {
   computed: {
     model: {
       get() {
-        return this.value;
+        return this.value
       },
       set(newValue) {
         this.$emit('input', newValue)
@@ -50,7 +50,7 @@ export default {
       },
     },
     classes() {
-      return `${this.disabled ? 'psui-border-gray-40': 'psui-border-gray-50'} ${checkboxClasses}`
+      return `${this.disabled ? 'psui-border-gray-40': 'psui-border-gray-50'} ${this.checkboxClasses}`
     },
     getSize() {
       return {

package/src/components/controls/PsRadioButton.vue

@@ -1,48 +1,24 @@
 <template>
-  <div class="w-full">
-    <label class="form-control" :for="id">
-      {{ label }}
-      <input
-        type="radio"
-        name="radio"
-        :id="id"
-        @change="$emit('change')"
-        v-model="childValue"
-      />
-      <span class="radio-button"></span>
-    </label>  
-  </div>
+  <label class="form-control">
+    <span>{{ label }}</span>
+    <input type="radio" :value="value" :name="name" v-model="radioButtonValue">
+    <span class="radio-button"></span>
+  </label>  
 </template>
 
 <script>
 export default {
   name: 'PsRadioButton',
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    value: {
-      required: true
-    }
-  },
-  data() {
-    return {
-      id: ''
-    }
-  },
+  props: ['name', 'label', 'value'],
   computed: {
-    childValue: {
-      get () {
+    radioButtonValue: {
+      get: function() {
         return this.value
       },
-      set (newValue) {
-        this.$emit('input', newValue )
+      set: function() {
+        this.$emit("change", this.value)
       }
     }
-  },
-  mounted() {
-    this.id = 'teste'
   }
 }
 </script>
@@ -92,7 +68,7 @@ export default {
 }
 
 .form-control .radio-button:after {
- 	top: 3px;
+  top: 3px;
 	left: 3px;
 	width: 10px;
 	height: 10px;

package/src/components/controls/PsSlider.vue

@@ -29,18 +29,6 @@
 <script>
 export default {
   name: 'PsSlider',
-  computed: {
-    positionBubble() {
-      if (this.bubble && this.isMounted) {
-        return (this.$refs.slider.offsetWidth / this.max) * this.value - 15
-      }
-    }
-  },
-  methods: {
-    getValueToScale(value) {
-      return 100 * value / this.rangeDistanceMax
-    }
-  },
   props: {
     min: {
       type: Number,
@@ -75,8 +63,21 @@ export default {
       isMounted: false
     }
   },
+  computed: {
+    positionBubble() {
+      if (this.bubble && this.isMounted) {
+        return (this.$refs.slider.offsetWidth / this.max) * this.value - 15
+      }
+      return 0
+    }
+  },
   mounted() {
     this.isMounted = true
+  },
+  methods: {
+    getValueToScale(value) {
+      return 100 * value / this.rangeDistanceMax
+    }
   }
 }
 </script>

package/src/components/controls/PsSwitch.vue

@@ -13,6 +13,22 @@
 export const sizes = ['big', 'small']
 export default {
   name: 'PsSwitch',
+  props: {
+    label: String,
+    active: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+		size: {
+			type: String,
+			default: 'big',
+      validator: (value) => sizes.indexOf(value) !== -1
+		}
+  },
   computed: {
     text() {
       if (this.label && this.labelActived) {
@@ -30,22 +46,6 @@ export default {
 			return 'toggle-bg psui-bg-gray-40 psui-border-gray-40 psui-border-2 psui-h-6 ps-switch psui-rounded-full'
 		}
   },
-  props: {
-    label: String,
-    active: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-		size: {
-			type: String,
-			default: 'big',
-      validator: (value) => sizes.indexOf(value) !== -1
-		}
-  },
   methods: {
     change() {
       if (!this.disabled) {
@@ -58,9 +58,6 @@ export default {
 </script>
 
 <style scoped>
-/* 
-	@TODO - Fix the apply error
-	https://www.dropbox.com/s/83vwthcdvdt5t97/Screen%20Shot%202022-01-06%20at%2011.49.00%20AM.png?dl=0
 	
 .ps-switch {
 	width: 46px;
@@ -68,6 +65,10 @@ export default {
 .ps-switch-small {
 	width: 30px;
 }
+
+/* 
+	@TODO - Fix the apply error
+	https://www.dropbox.com/s/83vwthcdvdt5t97/Screen%20Shot%202022-01-06%20at%2011.49.00%20AM.png?dl=0
 .toggle-bg:after {
 	content: '';
 	@apply psui-absolute psui-bg-white psui-border-gray-40 psui-rounded-full psui-h-5 psui-w-5 psui-transition;

package/src/components/datatable/PsDataTable.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="table" :class="cssAlign">
+    <thead v-if="header">
+      <th
+        v-for="head in header"
+        :key="head"
+        :class="'psui-text-gray-80 psui-font-bold psui-bg-gray-10 psui-capitalize'"
+      >
+        {{ head }}
+      </th>
+    </thead>
+    <tbody v-if="type === 'simple'">
+      <tr v-for="(dt, index) in data" :key="index">
+        <td v-for="(head, cellRow) in header" :key="cellRow">
+          {{ data[index][head] }}
+        </td>
+      </tr>
+    </tbody>
+    <slot v-else></slot>
+    <tfoot v-if="footer">
+      <th
+        v-for="ft in footer"
+        :key="ft"
+        :class="'psui-text-gray-80 psui-bg-gray-10'"
+      >
+        {{ ft }}
+      </th>
+    </tfoot>
+  </div>
+</template>
+
+<script>
+export const type = ["simple", "rich"]
+export const alignment = ["center", "right", "left"]
+
+export default {
+  name: "PsDataTable",
+  props: {
+    type: {
+      type: String,
+      required: true,
+      validator: (value) => {
+        return ["simple", "rich"].indexOf(value) !== -1
+      },
+    },
+    header: {
+      type: Array,
+      required: true,
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    footer: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    align: {
+      type: String,
+      default: "left",
+    },
+  },
+  computed: {
+    cssAlign() {
+      if (this.align === "right") return "psui-text-right"
+      if (this.align === "left") return "psui-text-left"
+      return "psui-text-center"
+    },
+  },
+}
+</script>
+
+<style>
+.table {
+  width: fit-content;
+  border: 1px solid #e6ecf2;
+  border-radius: 4px;
+}
+
+th,
+td,
+tr {
+  height: 40px;
+  border: 1px solid #e6ecf2;
+  padding: 11px 16px;
+  font-weight: 400;
+  color: #515e6a;
+}
+</style>

package/src/components/datatable/PsDataTableItem.vue

@@ -0,0 +1,57 @@
+<template>
+  <tbody v-if="data">
+    <tr v-for="(dt, index) in data" :key="index">
+      <td v-for="(el, elIndex) in dt" :key="elIndex">
+        <div class="psui-flex psui-gap-1 psui-items-center">
+          <span class="psui-text-gray-80">
+            {{ el[Object.keys(el)[1]].toFixed(3) }}
+          </span>
+          <div
+            class="psui-flex psui-items-center"
+            :class="
+              el[Object.keys(el)[1]] >= 0
+                ? 'psui-text-green-70'
+                : 'psui-text-red-70'
+            "
+          >
+            <i v-if="el[Object.keys(el)[1]] >= 0" class="material-icons">arrow_upward</i>
+            <i v-else class="material-icons">arrow_downward</i>
+            <span>
+              {{
+                (
+                  (el[Object.keys(el)[1]] / el[Object.keys(el)[0]]) *
+                  100
+                ).toFixed(2)
+              }}%
+            </span>
+          </div>
+        </div>
+        <span class="psui-text-gray-50">{{
+          el[Object.keys(el)[0]].toFixed(6)
+        }}</span>
+      </td>
+    </tr>
+  </tbody>
+</template>
+
+<script>
+export default {
+  name: "PsDataTableItem",
+  props: {
+    data: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+.material-icons {
+  font-size: 15px;
+  margin-bottom: 2px;
+}
+</style>