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

package/src/components/controls/PsRadioButton.vue

@@ -1,17 +1,15 @@
 <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="wrapper flex items-center">
+    {{ label }}
+    <input
+      class="checkbox"
+      type="radio"
+      :checked="isChecked"
+      :value="value"
+      @change="$emit('change', $event.target.value)"
+    />
+    <span class="checkmark" :class="{ 'checkmark-small': small }"></span>
+  </label>
 </template>
 
 <script>
@@ -20,84 +18,93 @@ export default {
   props: {
     label: {
       type: String,
-      required: true
+      default: '',
+      required: true,
+    },
+    modelValue: {
+      default: '',
     },
     value: {
-      required: true
-    }
+      type: String,
+      default: undefined,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
   },
-  data() {
-    return {
-      id: ''
-    }
+  model: {
+    prop: 'modelValue',
+    event: 'change',
   },
   computed: {
-    childValue: {
-      get () {
-        return this.value
-      },
-      set (newValue) {
-        this.$emit('input', newValue )
-      }
-    }
+    isChecked() {
+      return this.modelValue == this.value
+    },
   },
-  mounted() {
-    this.id = 'teste'
-  }
 }
 </script>
 
 <style scoped>
-.form-control {
+.wrapper {
   display: block;
   position: relative;
-  padding-left: 35px;
+  padding-left: 32px;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-
-.form-control input {
+.wrapper input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
+  height: 0;
+  width: 0;
 }
-
-.radio-button {
+.checkmark {
   position: absolute;
   top: 0;
   left: 0;
-  height: 20px;
-  width: 20px;
-  background-color: #FFF;
-  border: 2px solid #A2ACB7;
+  height: 24px;
+  width: 24px;
   border-radius: 50%;
+  background-color: white;
+  border: 2px solid #a2acb7;
 }
-
-.form-control input:checked ~ .radio-button {
-  background-color: #FFF;
-  border: 2px solid #64B5CE;
+.checkmark-small {
+  top: 3px;
+  height: 18px !important;
+  width: 18px !important;
 }
-
-.radio-button:after {
-  content: "";
+.wrapper input:checked ~ .checkmark {
+  background-color: white;
+  border-color: #64b5ce;
+  border-width: 2px;
+}
+.checkmark:after {
+  content: '';
   position: absolute;
   display: none;
 }
-
-.form-control input:checked ~ .radio-button:after {
+.wrapper input:checked ~ .checkmark:after {
   display: block;
 }
-
-.form-control .radio-button:after {
- 	top: 3px;
-	left: 3px;
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-  background-color: #64B5CE;
+.wrapper .checkmark:after {
+  top: 4px;
+  left: 4px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #64b5ce;
+}
+.wrapper .checkmark-small:after {
+  top: 3px;
+  left: 3px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #64b5ce;
 }
- 
-</style>
+</style>

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

@@ -1,97 +1,97 @@
 <template>
-	<label for="ps-switch" class="psui-flex psui-items-center psui-cursor-pointer psui-relative">
-		<input type="checkbox" id="ps-switch" class="psui-hidden" :checked="active">
-		<div 
-			:class="classes"
-			@click="change()"
-		></div>
-		<span class="psui-ml-3 psui-text-gray-50 psui-text-sm psui-font-medium">{{ label }}</span>
-	</label>
+  <div class="switch-button-control">
+    <div
+      :class="{ enabled: active, 'switch-button': !small, 'switch-button-small': small }"
+      @click="toggle"
+      :style="{'--color': color}"
+    >
+      <div class="button"></div>
+    </div>
+    <div class="switch-button-label">
+      <slot></slot>
+    </div>
+  </div>
 </template>
 
 <script>
-export const sizes = ['big', 'small']
 export default {
   name: 'PsSwitch',
-  computed: {
-    text() {
-      if (this.label && this.labelActived) {
-        return this.active ? this.labelActived : this.label
-      } else if (this.label) {
-        return this.label
-      } else {
-        return false
-      }
-    },
-		classes() {
-			if (this.size === 'small') {
-				return 'toggle-bg psui-bg-gray-40 psui-border-gray-40 psui-border-2 psui-h-4 ps-switch-small psui-rounded-full'
-			}
-			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
-		}
+    small: Boolean,
+    active: Boolean,
+    color: {
+      type: String,
+      required: false,
+      default: '#5DB883'
+    }
+  },
+  model: {
+    prop: "active",
+    event: "toggle"
   },
   methods: {
-    change() {
-      if (!this.disabled) {
-        this.$emit('update:active', !this.active)
-        this.$emit('change', !this.active)
-      }
+    toggle: function() {
+      this.$emit('toggle', !this.active)
     }
   }
 }
 </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;
+.switch-button-control {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
-.ps-switch-small {
-	width: 30px;
+.switch-button-control .switch-button {
+  height: 24px;
+  width: calc(24px * 2);
+  background-color: #A2ACB7;
+  border: 2px solid #A2ACB7;
+  border-radius: 24px;
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
 }
-.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;
+.switch-button-control .switch-button-small {
+  height: 16px;
+  width: calc(16px * 2);
+  background-color: #A2ACB7;
+  border: 2px solid #A2ACB7;
+  border-radius: 16px;
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
 }
-.toggle-bg:after + .ps-switch-small {
-	content: '';
-	@apply psui-absolute psui-bg-white psui-border-gray-40 psui-rounded-full psui-h-2 psui-w-2 psui-transition;
+.switch-button-control .switch-button .button {
+  height: calc(24px - (2 * 2px));
+  width: calc(24px - (2 * 2px));
+  border-radius: calc(24px - (2 * 2px));
+  background:#F3F6F9;
+  transition: all 0.3s ease-in-out;
 }
-
-input:checked + .toggle-bg:after + .ps-switch-small {
-	transform: translateX(100%);
-	position: absolute;
-	left: 2px;
-	@apply border-white;
+.switch-button-control .switch-button-small .button {
+  height: calc(16px - (2 * 2px));
+  width: calc(16px - (2 * 2px));
+  border-radius: calc(16px - (2 * 2px));
+  background:#F3F6F9;
+  transition: all 0.3s ease-in-out;
 }
-
-input:checked + .toggle-bg:after {
-	transform: translateX(100%);
-	position: absolute;
-	left: 4px;
-	@apply border-white;
+.switch-button-control .switch-button.enabled {
+  background-color: var(--color);
+  border: 2px solid var(--color);
 }
-
-input:checked + .toggle-bg {
-	@apply psui-bg-green-20 psui-border-green-20;
-} */
-</style>
+.switch-button-control .switch-button-small.enabled {
+  background-color: var(--color);
+  border: 2px solid var(--color);
+}
+.switch-button-control .switch-button.enabled .button {
+  background: white;
+  transform: translateX(calc(calc(24px - (2 * 2px)) + (2 *2px)));
+}
+.switch-button-control .switch-button-small.enabled .button {
+  background: white;
+  transform: translateX(calc(calc(16px - (2 * 2px)) + (2 *2px)));
+}
+.switch-button-control .switch-button-label {
+  margin-left: 10px;
+}
+</style>

package/src/components/datatable/PsDataTable.vue

@@ -0,0 +1,89 @@
+<template>
+  <table :class='cssAlign' class='table psui-w-full psui-border-2 psui-border-gray-10' >
+    <thead v-if="header">
+      <th
+        v-for="head in header"
+        :key="head"
+        class='psui-bg-gray-10 psui-text-gray-80 psui-capitalize psui-font-bold'
+      >
+        {{ 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-bg-gray-10 psui-text-gray-80'
+      >
+        {{ ft }}
+      </th>
+    </tfoot>
+  </table>
+</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,
+      required: true
+    },
+    footer: {
+      type: Array,
+    },
+    align: {
+      type: String,
+      default: 'left',
+      validator: (value) => {
+        return ['center', 'right', 'left'].indexOf(value) !== -1
+      }
+    },
+    cssStyle: {
+      type: String,
+      default: 'psui-text-gray-60'
+    }
+  },
+  computed: {
+    cssAlign() {
+      if (this.align === 'right') return `psui-text-right ${this.cssStyle}`
+      if (this.align === 'center') return `psui-text-center  ${this.cssStyle}`
+      return `psui-text-left ${this.cssStyle}`
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+.table th,
+.table td,
+.table tr {
+  height: 40px;
+  border: 1px solid #e6ecf2;
+  padding: 11px 16px;
+}
+
+</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" class="psui-px-4 psui-py-2">
+        <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>