@policystudio/policy-studio-ui-vue 1.1.90-beta.5 → 1.1.91

package/src/components/datatable/PsDataTable.vue

@@ -1,8 +1,5 @@
 <template>
-  <table
-    :class="cssAlign"
-    class="psui-el-table psui-table"
-  >
+  <table :class='cssAlign' class="psui-el-table psui-table">
     <thead v-if="header">
       <th
         v-for="head in header"
@@ -12,24 +9,18 @@
       </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"
-        >
+      <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 v-else></slot>
     <tfoot v-if="footer">
       <th
         v-for="ft in footer"
         :key="ft"
-        class="psui-bg-gray-10 psui-text-gray-80 psui-font-normal"
+        class='psui-bg-gray-10 psui-text-gray-80 psui-font-normal'
       >
         {{ ft }}
       </th>

package/src/components/datatable/PsDataTableItem.vue

@@ -1,14 +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"
-        class="psui-px-4 psui-py-2"
-      >
+    <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) }}
@@ -21,14 +14,8 @@
                 : '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>
+            <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>
               {{
                 (

package/src/components/forms/PsDropdown.vue

@@ -10,7 +10,7 @@
       v-if="$slots.dropdownTrigger"
       @click="show && !toggleWhenActive ? '' : toggle()"
     >
-      <slot name="dropdownTrigger" />
+      <slot name="dropdownTrigger"></slot>
     </div>
 
     <button
@@ -25,11 +25,8 @@
       <slot
         v-if="show && $slots.buttonLabelOnShow"
         name="buttonLabelOnShow"
-      />
-      <slot
-        v-else
-        name="buttonLabel"
-      />
+      ></slot>
+      <slot v-else name="buttonLabel"></slot>
     </button>
     <div
       ref="PSDropdownDialog"
@@ -40,7 +37,7 @@
       :style="{ minWidth: minWidthDropDown }"
     >
       <div class="psui-el-dropdown-menu-dialog">
-        <slot name="items" />
+        <slot name="items"></slot>
       </div>
     </div>
   </div>
@@ -107,7 +104,7 @@ export default {
       return document.documentElement.clientWidth - bounds['left'] - 30
     },
   },
-  beforeUnmount() {
+  beforeDestroy() {
     this.unwatchParentScrolling()
   },
   methods: {

package/src/components/forms/PsDropdownList.vue

@@ -29,7 +29,7 @@
           size="20"
           class="psui-text-blue-60 psui-opacity-0 psui-transition psui-leading-none psui-cursor-pointer psui-ml-1"
           :display="item.key == getItems.key || isHovering == index ? 'flex' : 'none'"
-          @click.stop="$eventBus.$emit('openDescriptionModal', { type: item.hasHelper.type, id: item.hasHelper.id, slug: item.hasHelper.slug })"
+          @click.native.stop="$eventBus.$emit('openDescriptionModal', { type: item.hasHelper.type, id: item.hasHelper.id, slug: item.hasHelper.slug })"
         />
       </div>
 

package/src/components/forms/PsInput.vue

@@ -1,8 +1,6 @@
 <template>
-  <div
-    class="psui-el-input"
-    :class="[getComponentClass, `layout-${layout}`]"
-  >
+	<div class="psui-el-input" :class="[getComponentClass, `layout-${layout}`]" >
+		
     <label v-if="label"> {{ label }} </label>
 
     <div 
@@ -10,18 +8,15 @@
       @mouseenter="$emit('mouseenter',$event)" 
       @mouseleave="$emit('mouseleave',$event)" 
     >
-      <div
-        v-if="$slots.prepend"
-        class="psui-el-input-prepend"
-      >
-        <slot name="prepend" />
+      <div v-if="$slots.prepend" class="psui-el-input-prepend">
+        <slot name="prepend"></slot>
       </div>
       <PsRichTooltip 
         class="psui-w-full"
         css-class="psui-w-48"
         :ignore-dialog="!showTooltip"
       >
-        <template #trigger>
+        <template v-slot:trigger>
           <input
             :title="title"
             :type="type"
@@ -38,36 +33,25 @@
             @change="$emit('change', $event)"
             v-bind="getAttrs"
             :class="{ 'focus': isFocus }"
-          >
+          />
         </template>
-        <template #content>
+        <template v-slot:content>
           <div class="text-left">
             {{ tooltipText }}
           </div>
         </template>
       </PsRichTooltip>
-      <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"
-        />
+      <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"
-    >
+		<p v-if="hint || (hasError && typeof hasError === 'string')" class="psui-el-input-hint">
       {{ typeof hasError === 'string' ? hasError : hint }}
-    </p>
-  </div>
+    </p>
+
+	</div>
 </template>
 
 <script>

package/src/components/forms/PsInputSelect.vue

@@ -1,39 +1,17 @@
 <template>
-  <div
-    class="psui-el-input-select"
-    :class="[getComponentClass, {'selected':selectedClass}, {'disabled':disabled}]"
-  >
-    <label
-      :for="label"
-      v-if="label"
-    >{{ label }}</label>
+  <div class="psui-el-input-select" :class="[getComponentClass, {'selected':selectedClass}, {'disabled':disabled}]">
+    <label :for='label' v-if="label" >{{ label }}</label>
     <div class="psui-el-input-select-wrapper">
-      <select 
-        :name="label"
-        :id="label"  
-        v-model="childValue"
-      >
-        <option
-          value=""
-          disabled
-        >
-          Select
-        </option>
-        <option
-          v-for="item in getItems"
-          :value="item[keyValue]"
-          :key="item[keyValue]"
-        >
-          {{ item[keyLabel] }}
-        </option>
-      </select>
-    </div>
-    <p
-      v-if="optionalLabel && !disabled && layout !== 'mini'"
-      class="psui-el-input-helper"
+    <select 
+      :name="label"
+      :id="label"  
+      v-model="childValue"
     >
-      {{ optionalLabel }}
-    </p>
+      <option value='' disabled>Select</option>
+      <option v-for="item in getItems" :value="item[keyValue]" :key="item[keyValue]">{{ item[keyLabel] }}</option>
+    </select>
+    </div>
+    <p v-if="optionalLabel && !disabled && layout !== 'mini'" class="psui-el-input-helper">{{ optionalLabel }}</p>
   </div>
 </template>
 

package/src/components/forms/PsInputTextArea.vue

@@ -1,13 +1,7 @@
 <template>
-  <div
-    class="psui-el-input-textarea"
-    :class="[{'disabled':disabled}]"
-  >
+  <div class="psui-el-input-textarea" :class="[{'disabled':disabled}]">
     <div class="psui-el-input-textarea-wrapper">
-      <label
-        :for="label"
-        v-if="label"
-      >{{ label }}</label>
+      <label :for="label" v-if="label">{{label}}</label>
       <textarea
         :id="label"
         :autocapitalize="autocapitalize"
@@ -19,15 +13,10 @@
         @change="$emit('change', $event)"
         :rows="rows"
         :placeholder="placeholder"
-        :readonly="disabled"
+        :readonly='disabled'
       />
     </div>
-    <p
-      class="psui-el-input-textarea-message"
-      v-if="optionalLabel && !disabled"
-    >
-      {{ optionalLabel }}
-    </p>
+    <p class="psui-el-input-textarea-message" v-if="optionalLabel && !disabled">{{optionalLabel}}</p>
   </div>
 </template>
 

package/src/components/navigations/PsBreadcrumb.vue

@@ -13,7 +13,7 @@
         <router-link
           v-if="item.route && !item.isReset"
           :to="item.route"
-          @click="onNavigate(item)"
+          @click.native="onNavigate(item)"
         >
           {{ item.title }}
         </router-link>

package/src/components/notifications/PsDialog.vue

@@ -1,28 +1,22 @@
 <template>
-  <div
-    class="psui-el-dialog"
-    :class="getComponentClass"
-  >   
+  <div class="psui-el-dialog" :class="getComponentClass">   
     <div class="psui-el-dialog-icon">
-      <i class="material-icons-round">{{ icon }}</i>
+      <i class="material-icons-round">{{icon}}</i>
     </div>
     <div class="psui-el-dialog-wrapper">      
       <div class="psui-el-dialog-default">
         <slot>
-          <p class="psui-el-dialog-message">
-            {{ message }}
-          </p>
+          <p class="psui-el-dialog-message">{{ message }}</p>
         </slot>
       </div>
       <div class="psui-el-dialog-action">
-        <slot name="action" />
+        <slot name="action"></slot>
       </div>
     </div>
     <button
       class="psui-el-dialog-close" 
       v-if="hasClose" 
-      @click="onClose"
-    >
+      @click="onClose">
       <i class="material-icons-round">close</i>
     </button>
   </div>

package/src/components/notifications/PsSimpleAlert.vue

@@ -1,25 +1,13 @@
-<template>
-  <div
-    class="psui-el-simple-alert"
-    v-bind="$attrs"
-    @click.stop="$emit('click')"
-  >
-    <PsIcon
-      :icon="icon"
-      :icon-classes="iconClass"
-      :size="iconSize"
-    />
-    <p class="psui-el-simple-alert-message">
-      {{ message }}
-    </p>
-    <button
-      class="psui-el-simple-alert-button"
-      :class="buttonClass"
-      @click.stop="$emit('close')"
-    >
-      close
-    </button>
-  </div>
+<template >
+    <div class="psui-el-simple-alert" v-bind="$attrs" @click.stop="$emit('click')">
+        <PsIcon
+            :icon="icon"
+            :icon-classes="iconClass"
+            :size="iconSize"
+        />
+        <p class="psui-el-simple-alert-message">{{ message }}</p>
+        <button class="psui-el-simple-alert-button" :class="buttonClass" @click.stop="$emit('close')">close</button>
+    </div>
 </template>
 
 <script>

package/src/components/notifications/PsToast.vue

@@ -1,14 +1,9 @@
 <template>
-  <div
-    class="psui-el-toast"
-    :class="getComponentClass"
-  >
+  <div class='psui-el-toast' :class="getComponentClass">
     <i class="material-icons-round psui-el-toast-icon">{{ icon }}</i>
-    <p class="psui-el-toast-message">
-      {{ message }}
-    </p>
+    <p class="psui-el-toast-message">{{ message }}</p>
     <div class="psui-el-toast-actions">
-      <slot />
+      <slot></slot>
     </div>
   </div>
 </template>

package/src/components/playground/PsScrollBar.vue

@@ -4,169 +4,97 @@
       class="visible-scrollbar psui-flex psui-flex-col psui-h-full psui-w-56 psui-bg-gray-30 psui-p-2"
       @click="onClick"
     >
-      <h2 class="psui-font-bold">
-        Scrollbar Playground (click over here to copy the computed style to clipboard)
-      </h2>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <h2 class="psui-font-bold">Scrollbar Playground (click over here to copy the computed style to clipboard)</h2>
+        <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
     </div>
     <div class="psui-flex psui-bg-gray-60 psui-p-2 psui-gap-4">
       <div class="psui-flex psui-flex-col">
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">Scroll Width (px)</label>
-          <input
-            type="text"
-            id="width"
-            name="width"
-            @change="onChange"
-          >
+          <input type="text" id="width" name="width" @change="onChange">
         </div>
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">Scroll Height (px)</label>
-          <input
-            type="text"
-            id="height"
-            name="height"
-            @change="onChange"
-          >
+          <input type="text" id="height" name="height" @change="onChange">
         </div>
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">ScrollTrack Color</label>
-          <input
-            type="text"
-            id="track"
-            name="track"
-            @change="onChange"
-          >
+          <input type="text" id="track" name="track" @change="onChange">
         </div>
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">Thumb Color</label>
-          <input
-            type="text"
-            id="thumb"
-            name="thumb"
-            @change="onChange"
-          >
+          <input type="text" id="thumb" name="thumb" @change="onChange">
         </div>
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">Thumb Border-Radius (px)</label>
-          <input
-            type="text"
-            id="thumb-radius"
-            name="thumb-radius"
-            @change="onChange"
-          >
+          <input type="text" id="thumb-radius" name="thumb-radius" @change="onChange">
         </div>
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">Thumb Border Size(px)</label>
-          <input
-            type="text"
-            id="thumb-border"
-            name="thumb-border"
-            @change="onChange"
-          >
+          <input type="text" id="thumb-border" name="thumb-border" @change="onChange">
         </div>
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">Thumb Border Color</label>
-          <input
-            type="text"
-            id="thumb-border-color"
-            name="thumb-border-color"
-            @change="onChange"
-          >
+          <input type="text" id="thumb-border-color" name="thumb-border-color" @change="onChange">
         </div>
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">Thumb Border Style</label>
-          <select
-            id="thumb-border-style"
-            name="thumb-border-style"
-            v-model="selectedStyle"
-          >
-            <option
-              value=""
-              hidden
-              selected
-            />
-            <option   
-              v-for="(style, index) in borderStyle"
-              :value="style"
-              :key="index"
-            >
-              {{ style }}
-            </option>
+          <select id="thumb-border-style" name="thumb-border-style" v-model="selectedStyle">
+                <option value="" hidden selected></option>
+                <option   
+                  v-for="(style, index) in borderStyle"
+                  :value="style"
+                  :key="index"
+                >{{style}}</option>
           </select>
         </div>
       </div>
       <div class="psui-flex psui-flex-col">
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">Thumb Hover Color</label>
-          <input
-            type="text"
-            id="thumb-hover-color"
-            name="thumb-hover-color"
-            @change="onChange"
-          >
+          <input type="text" id="thumb-hover-color" name="thumb-hover-color" @change="onChange">
         </div>
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">Thumb Hover Border Size</label>
-          <input
-            type="text"
-            id="thumb-hover-border-size"
-            name="thumb-hover-border-size"
-            @change="onChange"
-          >
+          <input type="text" id="thumb-hover-border-size" name="thumb-hover-border-size" @change="onChange">
         </div>
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">Thumb Hover Border Color</label>
-          <input
-            type="text"
-            id="thumb-hover-border-color"
-            name="thumb-hover-border-color"
-            @change="onChange"
-          >
+          <input type="text" id="thumb-hover-border-color" name="thumb-hover-border-color" @change="onChange">
         </div>
         <div class="psui-flex psui-flex-col psui-w-48">
           <label for="width">Thumb Border Style</label>
-          <select
-            id="thumb-border-style"
-            name="thumb-border-style"
-            v-model="selectedHoverStyle"
-          >
-            <option
-              value=""
-              hidden
-              selected
-            />
-            <option   
-              v-for="(style, index) in borderStyle"
-              :value="style"
-              :key="index"
-            >
-              {{ style }}
-            </option>
+          <select id="thumb-border-style" name="thumb-border-style" v-model="selectedHoverStyle">
+                <option value="" hidden selected></option>
+                <option   
+                  v-for="(style, index) in borderStyle"
+                  :value="style"
+                  :key="index"
+                >{{style}}</option>
           </select>
         </div>
       </div>