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

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/forms/PsInput.vue

@@ -1,102 +1,122 @@
-<template>
-	<div>
-		<div v-if="label" class="psui-font-bold psui-text-gray-80">{{ label }}</div>
-    <div class="psui-relative">
-      <div class="psui-absolute psui-inset-y-0 psui-left-0 psui-pl-2 psui-flex psui-items-center psui-pointer-events-none" v-if="this.$slots.prepend">
-        <slot name="prepend"></slot>
-      </div>
-      <input
-        :type="type"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :aria-required="required"
-        :aria-invalid="validation.hasError"
-        :class="[getInputClasses, { 'psui-border-red' : validation.hasError }]"
-        :required="required"
-        :value="value"
-        @focus="$emit('focus', $event)"
-        @blur="$emit('blur', $event)"
-        @input="$emit('input', $event)"
-        @keydown.enter="$emit('keydown', $event)"
-        @change="$emit('change', $event)"
-        v-bind="getAttrs"
-      />
-      <div class="psui-absolute psui-inset-y-0 psui-right-0 psui-pr-2 psui-flex psui-items-center" v-if="this.$slots.append">
-        <slot name="append"></slot>
-      </div>
-    </div>
-		<div v-if="hint && !validation.hasError" class="psui-text-gray-50 psui-text-xsmall">{{ hint }}</div>
-		<div v-if="validation.hasError && validation.label" class="psui-text-red psui-text-xsmall">{{ validation.label }}</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'PsInput',
-  props: {
-    type: {
-      type: String,
-      default: 'text'
-    },
-		required: {
-			type: Boolean
-		},
-		placeholder: {
-			type: String
-		},
-		label: {
-			type: String
-		},
-		hint: {
-			type: String
-		},
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    mini: {
-      type: Boolean,
-      default: false
-    },
-    validation: {
-      type: Object,
-      default: () => {
-        return { hasError: false, checked: false, filled: false, required: false }
-      }
-    },
-    value: {
-      required: true,
-    },    
-	},
-  computed: {
-    getInputClasses() {
-      return `${this.getPadding} ${this.getText} psui-text-gray-60 psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-block hover:psui-border-blue-50 focus:psui-border-blue-50 ${this.getState}`
-    },
-    getText() {
-      return this.mini ? 'psui-text-small' : ''
-    },
-    getPadding() {
-      return this.mini ? 'psui-px-2 mini-p' : 'psui-py-2 psui-px-4'
-    },
-    getState() {
-      return this.disabled ? 'disabled:psui-bg-gray-20' : 'psui-bg-white'
-    },
-    getAttrs() {
-      const defaultAttrs = {
-        autocapitalize: 'sentences',
-        autocomplete: 'chrome-off',
-        autocorrect: 'off',
-        spellcheck: 'spellcheck'
-      }
-      return { ...defaultAttrs, ...this.$attrs }
-    }
-  },
-}
-</script>
-
-<style>
-.mini-p {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-</style>
+<template>
+	<div class="psui-el-input" :class="[getComponentClass, `layout-${layout}`]" >
+		
+    <label v-if="label"> {{ label }} </label>
+    
+    <div 
+      class="psui-el-input-wrapper" 
+      @mouseenter="isHoveringInputWrapper = true" 
+      @mouseleave="isHoveringInputWrapper = false"
+      :class="{ 'hover' : isHoveringInputWrapper }"
+    >
+    
+      <div v-if="$slots.prepend" class="psui-el-input-prepend">
+        <slot name="prepend"></slot>
+      </div>
+    
+      <input
+        :type="type"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :value="value"
+        @focus="onInputFocus"
+        @blur="onInputBlur"
+        @input="$emit('input', $event)"
+        @keydown="$emit('keydown', $event)"
+        @change="$emit('change', $event)"
+        v-bind="getAttrs"
+        :class="{ 'focus': isFocus }"
+      />
+    
+      <div v-if="$slots.append || hasError" class="psui-el-input-append">
+        <span v-if="hasError" class="material-icons psui-text-red-20 material-icons-sharp">error</span>
+        <slot v-else name="append"></slot>
+      </div>
+
+    </div>
+    
+		<p v-if="hint || (hasError && typeof hasError === 'string')" class="psui-el-input-hint">
+      {{ typeof hasError === 'string' ? hasError : hint }}
+    </p>
+
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PsInput',  
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+		placeholder: {
+			type: String
+		},
+		label: {
+			type: String
+		},
+		hint: {
+			type: String
+		},    
+    layout: {
+      type: String,
+      default: 'default',
+      validator: (value) => ['default', 'mini'].includes(value)
+    },
+    value: {
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    hasError: {
+      type: [String, Boolean],
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+	},
+  data: () => ({
+    isHoveringInputWrapper: false,
+    isFocus: false,
+  }),
+  computed: {
+    getAttrs() {
+      const defaultAttrs = {
+        autocapitalize: 'sentences',
+        autocomplete: 'chrome-off',
+        autocorrect: 'off',
+        spellcheck: 'spellcheck'
+      }
+      return { ...defaultAttrs, ...this.$attrs }
+    },
+    getComponentClass() {
+      if (this.disabled) {
+        return 'status-disabled'  
+      } else if (this.hasError) {
+        return 'status-error'
+      } else if (this.isFocus || this.isTyping || this.active ) {
+        return 'status-active'
+      } else {
+        return 'status-resting'
+      }
+    },
+  },
+  methods: {
+    onInputFocus($event) {
+      this.isFocus = true
+      this.$emit('focus', $event)
+    },
+    onInputBlur($event) {
+      this.isFocus = false
+      this.$emit('blur', $event)
+    }
+  }
+}
+</script>
+
+<style> /* Please, use the file src/assets/scss/components/PsInput.scss */</style>

package/src/components/notifications/PsDialog.vue

@@ -1,38 +1,57 @@
 <template>
-  <div :class="cssClass">
-    <div class="material-icons psui-my-auto">info</div>
-    <div class="psui-w-full">{{ message }}</div>
-    <div class="psui-cursor-pointer psui-font-bold psui-my-auto psui-pr-4">OK</div>
+  <div class="psui-flex psui-justify-between psui-pr-3 psui-pl-2 psui-py-2 psui-rounded-md" :class="getDialogColor">   
+      <div class="psui-flex psui-justify-between psui-gap-2">
+        <i class="material-icons-round">info</i>
+        <div class="psui-flex psui-flex-col">
+          <p v-if="message" class="psui-w-full">{{ message }}</p>
+          <slot v-else name="content"></slot>
+          <slot v-if="layout === 'vertical'" name="action"></slot>
+        </div>
+      </div>
+      <div class="psui-flex psui-gap-3">
+        <slot v-if="layout === 'horizontal'" name="action"></slot>
+        <button @click="onClose" class="psui-w-4 psui-h-4 focus:psui-outline-none hover:opacity-70 transition-default">
+          <i class="material-icons-round">close</i>
+        </button>
+      </div>
   </div>
 </template>
 
 <script>
-export const typeOptions = ['informative', 'success', 'alert']
+
 export default {
   name: 'PsDialog',
   props: {
-    type: {
+    status: {
       type: String,
       default: 'informative',
-      validator: (value) => typeOptions.indexOf(value) !== -1
+      validator: (value) => ['informative', 'success', 'alert'].includes(value)
     },
     message: {
       type: String,
-      required: true
+    },
+    layout:{
+      type: String,
+      default: 'horizontal',
+      validator: (value) => ['horizontal', 'vertical'].includes(value)
+    },
+    cssClass:{
+      type: String
     }
   },
-  data() {
-    return {
-      colors: {
-        informative: { background:'blue-20', color: 'blue-60' },
-        success: { background:'green-10', color: 'green-70' },
-        alert: { background:'yellow-10', color: 'yellow-70' }
-      }
+  emits:['close'],
+  computed: {
+    getDialogColor() {
+      let dialogColor = ''
+        if(this.status === 'informative') dialogColor = `psui-bg-blue-20 psui-text-blue-60 ${this.cssClass}`
+        if(this.status === 'success') dialogColor = `psui-bg-green-10 psui-text-green-70 ${this.cssClass}`
+        if(this.status === 'alert') dialogColor = `psui-bg-yellow-10 psui-text-yellow-70 ${this.cssClass}`
+      return dialogColor
     }
   },
-  computed: {
-    cssClass() {
-      return `psui-flex psui-space-x-4 psui-font-small psui-rounded-md psui-py-2 psui-px-4 psui-align-middle psui-flex psui-bg-${this.colors[this.type].background} psui-text-${this.colors[this.type].color}`
+  methods:{
+    onClose(){
+      this.$emit('close')
     }
   }
 }

package/src/components/tabs/PsTabHeader.vue

@@ -6,9 +6,10 @@
       :key="item[keyValue]"
       @click="selectTab(item)"
       :class="[
+        'transition-default',
         classes, 
         { 'psui-bg-blue-60 psui-text-white': getSelected === item[keyValue] && theme === 'standard' },
-        { 'psui-border-b-2 psui-border-blue-60 psui-text-blue-60 psui-font-bold': getSelected === item[keyValue] && theme === 'underline' },
+        { 'psui-border-blue-60 psui-text-blue-60': getSelected === item[keyValue] && theme === 'underline' },
         { 'psui-text-blue-60 psui-font-bold psui-bg-white hover:psui-text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
       ]"
     >
@@ -53,7 +54,7 @@ export default {
     },
     classes() {
       if (this.theme === 'underline') {
-        return 'psui-text-gray-60 psui-pb-3 hover:psui-text-blue-60'
+        return 'psui-text-gray-60 psui-pb-3 psui-text-small psui-border-b-2 psui-border-transparent psui-font-bold hover:psui-text-blue-60'
       }
       if (this.theme === 'folder') {
         return 'psui-bg-gray-10 psui-text-gray-50 psui-py-2 psui-px-4 psui-rounded-t-lg hover:psui-text-gray-60 active:psui-text-blue-60'

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,44 @@
+<template>
+  <PsTooltip :cssClass="`${textColorClass} ${cssClass}`" :title="title">
+    <template v-slot:trigger>
+      <slot></slot>
+    </template>
+    <template v-slot:dialog>
+      <p v-if="text">{{text}}</p>
+    </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),
+    },
+    text: {
+      type: String,
+    },
+    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>