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

package/src/components/controls/PsRadioButton.vue

@@ -1,79 +1,104 @@
 <template>
-  <label class="form-control">
-    <span>{{ label }}</span>
-    <input type="radio" :value="value" :name="name" v-model="radioButtonValue">
-    <span class="radio-button"></span>
+  <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>
 export default {
   name: 'PsRadioButton',
-  props: ['name', 'label', 'value'],
+  props: {
+    label: {
+      type: String, 
+      default: "",
+      required:true
+    },
+    modelValue: {
+      default: ""
+    },
+    value: {
+      type: String,
+      default: undefined
+    },
+    small: {
+      type: Boolean,
+      default: false
+    }
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'change'
+  },
   computed: {
-    radioButtonValue: {
-      get: function() {
-        return this.value
-      },
-      set: function() {
-        this.$emit("change", this.value)
-      }
+    isChecked() {
+      return this.modelValue == this.value
     }
   }
 }
 </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 {
+.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 {
+.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: 10px;
-	height: 10px;
-	border-radius: 50%;
-  background-color: #64B5CE;
+  left: 3px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #64B5CE;
 }
- 
 </style>

package/src/components/controls/PsSwitch.vue

@@ -1,98 +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',
   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'
+    }
   },
-  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'
-		}
+  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>
-	
-.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;
 }
-
-/* 
-	@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;
+.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

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

package/src/components/datatable/PsDataTableItem.vue

@@ -1,7 +1,7 @@
 <template>
   <tbody v-if="data">
-    <tr v-for="(dt, index) in data" :key="index">
-      <td v-for="(el, elIndex) in dt" :key="elIndex">
+    <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) }}

package/src/components/tooltip/PsDialogTooltip.vue

@@ -0,0 +1,79 @@
+<template>
+  <PsTooltip :cssClass="getCssClass.content" :title="title">
+    <template v-slot:trigger>
+      <slot></slot>
+    </template>
+    <template
+      v-slot:dialog
+      class="psui-flex psui-fkex-col psui-gap-3 psui-items-start"
+    >
+      <p :class="type === 'white' ? 'psui-text-gray-50' : ''">{{ text }}</p>
+      <button
+        v-if="buttonText"
+        class="psui-py-2 psui-px-4 psui-rounded-md"
+        :class="getCssClass.button"
+        @click="onClick"
+      >
+        {{ buttonText }}
+      </button>
+    </template>
+  </PsTooltip>
+</template>
+
+<script>
+import PsTooltip from "./PsTooltip.vue"
+
+export default {
+  name: "PsDialogTooltip",
+  components: { PsTooltip },
+  props: {
+    text: {
+      type: String,
+    },
+    title: {
+      type: String,
+    },
+    buttonText: {
+      type: String,
+    },
+    type: {
+      type: String,
+      default: "white",
+      validator: (value) => ["white", "dark", "color"].includes(value),
+    },
+    cssClass: {
+      type: String,
+      required: false,
+    },
+  },
+  emits: ["click"],
+  computed: {
+    getCssClass() {
+        
+      if (this.type === "dark")
+        return {
+          content: `psui-bg-blue-70 psui-text-white ${this.cssClass}`,
+          button: `psui-bg-blue-60 psui-text-white`,
+        }
+      if (this.type === "color")
+        return {
+          content: `psui-bg-blue-50 psui-text-white ${this.cssClass}`,
+          button: `psui-bg-blue-60 psui-text-white`,
+        }
+
+        return { content: `psui-bg-white psui-text-gray-80 ${this.cssClass}`, button: `psui-bg-blue-20 psui-text-blue-60`,}
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit("click")
+    },
+  },
+}
+</script>
+
+<style scoped>
+button {
+  width: fit-content;
+}
+</style>>

package/src/components/tooltip/PsRichTooltip.vue

@@ -0,0 +1,38 @@
+<template>
+  <PsTooltip :cssClass="`${textColorClass} ${cssClass}`" :title="title">
+    <template v-slot:trigger>
+      <slot></slot>
+    </template>
+  </PsTooltip>
+</template>
+
+<script>
+import PsTooltip from "../tooltip/PsTooltip.vue"
+
+export default {
+  name: "PsRichTooltip",
+  components: { PsTooltip },
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "gray",
+      validator: (type) => ["gray", "red", "blue"].includes(type),
+    },
+    cssClass: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    textColorClass() {
+      if (this.type === "red") return `psui-text-red-70 psui-bg-red-10 `
+      if (this.type === "blue") return `psui-bg-blue-70 psui-text-white`
+      return `psui-text-gray-80 psui-bg-gray-30 `
+    },
+  },
+}
+</script>

package/src/components/tooltip/PsTooltip.vue

@@ -0,0 +1,120 @@
+<template>
+  <div @mouseover="open" @mouseleave="close" ref="tooltip">
+    <div ref="tooltiptrigger">
+      <slot name="trigger"></slot>
+    </div>
+
+    <div class="psui-relative">
+      <div
+        role="menu"
+        ref="dialog"
+        class="
+          psui-fixed
+          psui-hidden
+          psui-opacity-0
+          psui-transition-opacity
+          psui-duration-500
+          psui-ease-in-out
+        "
+      >
+        <div
+          class="
+            psui-flex
+            psui-flex-col
+            psui-py-1
+            psui-px-2
+            psui-rounded-md
+            psui-shadow-md
+            psui-z-20
+          "
+          aria-orientation="vertical"
+          :class="cssClass"
+        >
+          <h2 v-if="title" class="psui-font-bold">{{ title}}</h2>
+          <slot name="dialog" class="psui-font-normal"
+            >
+          </slot
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PsTooltip",
+  props: {
+    title: {
+      type: String,
+    },
+    ignoreDialog: {
+      type: Boolean,
+      default: false,
+    },
+    keepOpen: {
+      default: false,
+    },
+    cssClass:{
+        type: String,
+        default: 'psui-bg-gray-50 psui-text-white'
+    }
+  },
+  inheritAttrs: true,
+  emits: ["show"],
+  data() {
+    return {
+      show: false,
+      closingTimeout: null,
+    }
+  },
+  mounted() {
+      console.log(this.$attrs)
+    document.addEventListener("resize", this.updatePosition)
+  },
+  beforeDestroy() {
+    document.removeEventListener("resize", this.updatePosition)
+  },
+  methods: {
+    open() {
+      if (this.show || this.ignoreDialog) return
+      this.$emit("show")
+      this.show = true
+
+      this.$refs.dialog.style.display = "block"
+      this.$refs.dialog.style.opacity = 0
+
+      setTimeout(() => {
+        this.updatePosition()
+      }, 10)
+    },
+    close() {
+      if (this.show && this.$refs.dialog) {
+        this.$emit("close")
+        this.show = false
+
+        this.$refs.dialog.style.display = "none"
+      }
+    },
+    updatePosition() {
+      const dialog = this.$refs.dialog
+      const trigger = this.$refs.tooltiptrigger
+
+      const rectDialog = dialog.getBoundingClientRect()
+      const rectTrigger = trigger.getBoundingClientRect()
+      const windowWidth = document.documentElement.clientWidth
+      dialog.style.top = `${rectTrigger.y + rectTrigger.height}px`
+
+      if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
+        dialog.style.left = `${windowWidth - rectDialog.width - 30}px`
+      } else {
+        dialog.style.left = `${rectTrigger.x}px`
+      }
+
+      setTimeout(() => {
+        dialog.style.opacity = 100
+      }, 100)
+    },
+  },
+}
+</script>