@policystudio/policy-studio-ui-vue 1.1.89 → 1.1.90-beta.10

package/src/components/datatable/PsDataTable.vue

@@ -1,5 +1,8 @@
 <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"
@@ -9,18 +12,24 @@
       </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>
+    <slot v-else />
     <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,7 +1,14 @@
 <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) }}
@@ -14,8 +21,14 @@
                 : '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>
+      <slot name="dropdownTrigger" />
     </div>
 
     <button
@@ -25,8 +25,11 @@
       <slot
         v-if="show && $slots.buttonLabelOnShow"
         name="buttonLabelOnShow"
-      ></slot>
-      <slot v-else name="buttonLabel"></slot>
+      />
+      <slot
+        v-else
+        name="buttonLabel"
+      />
     </button>
     <div
       ref="PSDropdownDialog"
@@ -37,7 +40,7 @@
       :style="{ minWidth: minWidthDropDown }"
     >
       <div class="psui-el-dropdown-menu-dialog">
-        <slot name="items"></slot>
+        <slot name="items" />
       </div>
     </div>
   </div>
@@ -104,7 +107,7 @@ export default {
       return document.documentElement.clientWidth - bounds['left'] - 30
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     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.native.stop="$eventBus.$emit('openDescriptionModal', { type: item.hasHelper.type, id: item.hasHelper.id, slug: item.hasHelper.slug })"
+          @click.stop="$eventBus.$emit('openDescriptionModal', { type: item.hasHelper.type, id: item.hasHelper.id, slug: item.hasHelper.slug })"
         />
       </div>
 

package/src/components/forms/PsInput.vue

@@ -1,6 +1,8 @@
 <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 
@@ -8,15 +10,18 @@
       @mouseenter="$emit('mouseenter',$event)" 
       @mouseleave="$emit('mouseleave',$event)" 
     >
-      <div v-if="$slots.prepend" class="psui-el-input-prepend">
-        <slot name="prepend"></slot>
+      <div
+        v-if="$slots.prepend"
+        class="psui-el-input-prepend"
+      >
+        <slot name="prepend" />
       </div>
       <PsRichTooltip 
         class="psui-w-full"
         css-class="psui-w-48"
         :ignore-dialog="!showTooltip"
       >
-        <template v-slot:trigger>
+        <template #trigger>
           <input
             :title="title"
             :type="type"
@@ -33,25 +38,36 @@
             @change="$emit('change', $event)"
             v-bind="getAttrs"
             :class="{ 'focus': isFocus }"
-          />
+          >
         </template>
-        <template v-slot:content>
+        <template #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"></slot>
+      <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>
     </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,17 +1,39 @@
 <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>
+      <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">{{ optionalLabel }}</p>
+    <p
+      v-if="optionalLabel && !disabled && layout !== 'mini'"
+      class="psui-el-input-helper"
+    >
+      {{ optionalLabel }}
+    </p>
   </div>
 </template>
 

package/src/components/forms/PsInputTextArea.vue

@@ -1,7 +1,13 @@
 <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"
@@ -13,10 +19,15 @@
         @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.native="onNavigate(item)"
+          @click="onNavigate(item)"
         >
           {{ item.title }}
         </router-link>

package/src/components/notifications/PsDialog.vue

@@ -1,22 +1,28 @@
 <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>
+        <slot name="action" />
       </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,13 +1,25 @@
-<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,9 +1,14 @@
 <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,97 +4,169 @@
       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>
-                <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   
+              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>
-                <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   
+              v-for="(style, index) in borderStyle"
+              :value="style"
+              :key="index"
+            >
+              {{ style }}
+            </option>
           </select>
         </div>
       </div>