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

package/src/components/controls/PsCheckbox.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class='psui-el-checkbox' :class="[getComponentClass, {'disabled':disabled}]" >
+  <div
+    class="psui-el-checkbox"
+    :class="[getComponentClass, {'disabled':disabled}]"
+  >
     <input 
       :id="getInputId" 
       type="checkbox" 
       :value="inputValue"
       v-model="model"
       :disabled="disabled"      
-    />
+    >
     <label 
       :for="getInputId" 
       class="psui-el-checkmark"

package/src/components/controls/PsCheckboxSimple.vue

@@ -1,7 +1,7 @@
 <template>
   <div 
     v-if="withPrevent"
-    class='psui-el-checkbox' 
+    class="psui-el-checkbox" 
     :class="[getComponentClass, {'disabled':disabled}]"
     v-bind="getComponentAttrs"
     @click.prevent="$emit('click', $event)"
@@ -14,7 +14,7 @@
       :id="getInputId"
       v-bind="inputAttrs"
       @change="$emit('change', $event)"
-    />
+    >
     <label 
       :for="getInputId"
       class="psui-el-checkmark"
@@ -26,7 +26,7 @@
   </div>
   <div 
     v-else
-    class='psui-el-checkbox' 
+    class="psui-el-checkbox" 
     :class="[getComponentClass, {'disabled':disabled}]"
     v-bind="getComponentAttrs"
   >
@@ -38,7 +38,7 @@
       :id="getInputId"
       v-bind="inputAttrs"
       @change="$emit('change', $event)"
-    />
+    >
     <label 
       :for="getInputId"
       class="psui-el-checkmark"

package/src/components/controls/PsDraggable.vue

@@ -1,86 +1,89 @@
 <template>
   <div class="psui-el-draggable">
-    <div class="psui-el-draggable-wrapper"
+    <div
+      class="psui-el-draggable-wrapper"
       v-for="(columnGroup, indexColumnGroup) in getColumns.columnGroups"
       :key="indexColumnGroup"
       :ref="indexColumnGroup"
       :id="`edit-group-${indexColumnGroup}`"
     >
-    <PsTooltip
-      position="top"
-      :ignoreDialog="!columnGroup.disabled"
-      class="w-full"
-    >
-      <template v-slot:trigger>
-      <div 
-        class="psui-el-draggable-wrapper-title"
-        :class="{'psui-opacity-50 psui-pointer-events-none':columnGroup.disabled}"
-        draggable="true"
-        @dragstart="$emit('drag-start-group', indexColumnGroup)"
-        @dragend="$emit('drag-end-group', indexColumnGroup)"
-        @dragover="$emit('drag-over-group', indexColumnGroup)"
-      >
-        <span class="flex psui-items-center">
-          <p>{{ columnGroup.title }}</p>
-          <PsIcon
-            class="psui-el-draggable-wrapper-title-icon"
-            v-if="columnGroup.hasHelper && columnGroup.hasHelper.showOnEditHideColumns"
-            icon="info"
-            size="16"
-            :icon-classes="columnGroup.disabled ? 'psui-ml-2 psui-text-gray-50':'psui-ml-2 psui-text-blue-50 psui-cursor-pointer'"
-            @click.native="$emit('column-group-helper', columnGroup.hasHelper)"
-          />
-        </span>
-        <i class="material-icons-round">drag_indicator</i>
-      </div>
-
-      <div 
-        class="psui-el-draggable-wrapper-list" 
-        :class="{'psui-opacity-50 psui-pointer-events-none':columnGroup.disabled}"
+      <PsTooltip
+        position="top"
+        :ignore-dialog="!columnGroup.disabled"
+        class="w-full"
       >
-        <div
-          v-for="(column, indexColumn) in columnGroup.columns"
-          :key="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
-          :id="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
-          class="psui-el-draggable-item"
-          draggable="true"
-          @dragstart="$emit('drag-start-item', { indexColumnGroup, indexColumn }, $event)"
-          @dragover="$emit('drag-over-item', { indexColumnGroup, indexColumn }, $event)"
-          @dragend="$emit('drag-end-item', $event)"
-          v-tooltip="column.tooltip || undefined"
-        >
-          <div
-            class="psui-w-full psui-flex psui-items-center"
+        <template #trigger>
+          <div 
+            class="psui-el-draggable-wrapper-title"
+            :class="{'psui-opacity-50 psui-pointer-events-none':columnGroup.disabled}"
+            draggable="true"
+            @dragstart="$emit('drag-start-group', indexColumnGroup)"
+            @dragend="$emit('drag-end-group', indexColumnGroup)"
+            @dragover="$emit('drag-over-group', indexColumnGroup)"
           >
-            <span class="psui-el-draggable-item-title psui-flex psui-flex-row psui-items-center">
-              <PsCheckboxSimple
-                size="small"
-                :label="column.title"
-                :class="{'active' : column.isActive}"
-                :checked="column.isActive"
-                :disabled="column.isDisabled"
-                class="psui-el-draggable-item-checkbox"
-                @change="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
-              />
+            <span class="flex psui-items-center">
+              <p>{{ columnGroup.title }}</p>
               <PsIcon
-                class="psui-el-draggable-item-title-icon"
-                v-if="column.hasHelper && column.hasHelper.showOnEditHideColumns"
+                class="psui-el-draggable-wrapper-title-icon"
+                v-if="columnGroup.hasHelper && columnGroup.hasHelper.showOnEditHideColumns"
                 icon="info"
                 size="16"
                 :icon-classes="columnGroup.disabled ? 'psui-ml-2 psui-text-gray-50':'psui-ml-2 psui-text-blue-50 psui-cursor-pointer'"
-                @click.native="$emit('column-helper', column.hasHelper)"
+                @click="$emit('column-group-helper', columnGroup.hasHelper)"
               />
             </span>
-            <span class="psui-el-draggable-item-append">
-              <i class="psui-icon">drag_indicator</i>
-            </span>
+            <i class="material-icons-round">drag_indicator</i>
           </div>
-        </div>
-      </div>
-      </template>
-      <template v-slot:content class="!psui-opacity-0">
-        {{columnGroup.disabledTitle}}
-      </template>
+
+          <div 
+            class="psui-el-draggable-wrapper-list" 
+            :class="{'psui-opacity-50 psui-pointer-events-none':columnGroup.disabled}"
+          >
+            <div
+              v-for="(column, indexColumn) in columnGroup.columns"
+              :key="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
+              :id="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
+              class="psui-el-draggable-item"
+              draggable="true"
+              @dragstart="$emit('drag-start-item', { indexColumnGroup, indexColumn }, $event)"
+              @dragover="$emit('drag-over-item', { indexColumnGroup, indexColumn }, $event)"
+              @dragend="$emit('drag-end-item', $event)"
+              v-tooltip="column.tooltip || undefined"
+            >
+              <div
+                class="psui-w-full psui-flex psui-items-center"
+              >
+                <span class="psui-el-draggable-item-title psui-flex psui-flex-row psui-items-center">
+                  <PsCheckboxSimple
+                    size="small"
+                    :label="column.title"
+                    :class="{'active' : column.isActive}"
+                    :checked="column.isActive"
+                    :disabled="column.isDisabled"
+                    class="psui-el-draggable-item-checkbox"
+                    @change="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
+                  />
+                  <PsIcon
+                    class="psui-el-draggable-item-title-icon"
+                    v-if="column.hasHelper && column.hasHelper.showOnEditHideColumns"
+                    icon="info"
+                    size="16"
+                    :icon-classes="columnGroup.disabled ? 'psui-ml-2 psui-text-gray-50':'psui-ml-2 psui-text-blue-50 psui-cursor-pointer'"
+                    @click="$emit('column-helper', column.hasHelper)"
+                  />
+                </span>
+                <span class="psui-el-draggable-item-append">
+                  <i class="psui-icon">drag_indicator</i>
+                </span>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template
+          #content
+        >
+          {{ columnGroup.disabledTitle }}
+        </template>
       </PsTooltip>
     </div>
   </div>

package/src/components/controls/PsInlineSelector.vue

@@ -8,8 +8,7 @@
     @keydown.esc="$emit('keydown-esc',$event)"
     @mouseleave="$emit('mouse-leave',$event)"
   >
-
-    <div class='psui-el-inline-selector-input-wrapper'>
+    <div class="psui-el-inline-selector-input-wrapper">
       <span> {{ search ? search : placeholder }} </span>
       <input
         ref="input"
@@ -22,23 +21,23 @@
         autocorrect="off"
         autocapitalize="off"
         spellcheck="false"
-      />
+      >
     </div>
     <transition
-        enter-active-class="transition ease-out duration-100 transform"
-        enter-class="opacity-0 scale-95"
-        enter-to-class="opacity-100 scale-100"
-        leave-active-class="transition ease-in duration-100 transform"
-        leave-class="opacity-100 scale-100"
-        leave-to-class="opacity-0 scale-95"
-      >
+      enter-active-class="transition ease-out duration-100 transform"
+      enter-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-100 transform"
+      leave-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
       <div 
         v-if="search"
         role="menu" 
         aria-orientation="vertical"
         class="psui-el-inline-selector-dropdown-wrapper"
       >
-      <slot name='loader'></slot>
+        <slot name="loader" />
         <div class="psui-el-inline-selector-dropdown">
           <div v-if="requestFetched && !jurisdictions.length">
             <h3>Hmmmm</h3>
@@ -53,9 +52,9 @@
               @click="$emit('click', $event)"
               @mouseover="('mouse-over', $event)"
             >
-              <span >
-                <h3>{{jurisdiction.title}}</h3>
-                <h3 >{{jurisdiction.type}}</h3>
+              <span>
+                <h3>{{ jurisdiction.title }}</h3>
+                <h3>{{ jurisdiction.type }}</h3>
               </span>
             </li>
           </ul>

package/src/components/controls/PsRadioButton.vue

@@ -1,15 +1,20 @@
 <template>
-  <div class='psui-el-radio' :class="[getComponentClass, {'disabled':disabled}]" >
+  <div
+    class="psui-el-radio"
+    :class="[getComponentClass, {'disabled':disabled}]"
+  >
     <input
       :id="inputId"
       type="radio"
       :value="inputValue"
       v-model="model"
-      :disabled='disabled'      
-    />
-    <label :for="inputId" class="psui-el-checkmark"><span>{{ label }}</span></label>    
+      :disabled="disabled"      
+    >
+    <label
+      :for="inputId"
+      class="psui-el-checkmark"
+    ><span>{{ label }}</span></label>    
   </div>
- 
 </template>
  
 <script>

package/src/components/controls/PsRadioButtonSimple.vue

@@ -1,9 +1,9 @@
 <template>
   <div 
-    class='psui-el-radio' 
+    class="psui-el-radio" 
     :class="[getComponentClass, {'disabled':disabled}]"
     v-bind="getComponentAttrs"
-    >
+  >
     <input 
       type="radio" 
       :checked="checked" 
@@ -13,7 +13,7 @@
       :id="getInputId"
       v-bind="inputAttrs"
       @change="$emit('change')"
-    />
+    >
     <label 
       :for="getInputId"
       class="psui-el-checkmark"

package/src/components/controls/PsSlider.vue

@@ -26,21 +26,21 @@
         <div 
           class="slider-bar" 
           :style="{ width: progressWidth }"
-        ></div>
+        />
 
         <div 
           v-for="(barStyle, index) in bgBarStyles"
           :key="index"
           class="slider-bar-bg"
           :style="bgBarStyles[index]"
-        ></div>
+        />
 
         <div 
           v-for="(bar, index) in barStyles"
           :key="index"
           class="slider-bar-dynamic"
           :style="barStyles[index]"
-        ></div>
+        />
         
         <input
           ref="slider"
@@ -51,7 +51,7 @@
           class="psui-el-slider-input psui-float-left"
           v-model="sliderValue"
           @input="updateSlider($event)"
-        />
+        >
       </div>
 
       <div 
@@ -63,7 +63,7 @@
           :key="index"
           class="line"
           :style="{ left: `${grid}%` }"
-        ></div>
+        />
 
         <span class="info info-min">{{ min }}</span>
         <span class="info info-max">{{ max }}</span>
@@ -203,7 +203,7 @@ export default {
   created() {
     window.addEventListener('resize', this.resizeHandler)
   },
-  destroyed() {
+  unmounted() {
     window.removeEventListener('resize', this.resizeHandler)
   },
   mounted() {

package/src/components/controls/PsSwitch.vue

@@ -1,7 +1,17 @@
 <template>
-  <div class='psui-el-switch' :class="[getComponentClass, {'disabled':disabled}]" @click="change()">
-      <input type="checkbox" :checked="value" />
-      <label class='psui-el-switch-button' :class="[getToggleClass]" />
+  <div
+    class="psui-el-switch"
+    :class="[getComponentClass, {'disabled':disabled}]"
+    @click="change()"
+  >
+    <input
+      type="checkbox"
+      :checked="value"
+    >
+    <label
+      class="psui-el-switch-button"
+      :class="[getToggleClass]"
+    />
   </div>
 </template>
 

package/src/components/controls/PsToggle.vue

@@ -1,15 +1,18 @@
 <template>
-    <div class="psui-el-toggle" role="group">
-      <button 
-        type="button"
-        v-for="(item, index) in items"
-        :key="getKeyValue(item) + index"
-        @click="selectOption(item)"
-        :class="{ 'status-active': selected == item }"
-      >
-        {{ getKeyLabel(item) }}
-      </button>
-    </div>
+  <div
+    class="psui-el-toggle"
+    role="group"
+  >
+    <button 
+      type="button"
+      v-for="(item, index) in items"
+      :key="getKeyValue(item) + index"
+      @click="selectOption(item)"
+      :class="{ 'status-active': selected == item }"
+    >
+      {{ getKeyLabel(item) }}
+    </button>
+  </div>
 </template>
 
 <script>

package/src/components/data-graphics/PsBarChart.vue

@@ -3,12 +3,14 @@
     <p 
       v-if="showNumber"
       class="psui-el-bar-chart-total"
-    >{{ total }}</p>
+    >
+      {{ total }}
+    </p>
 
     <div 
       class="psui-el-bar-chart-bar"
       :style="{width: `${fillWidth}%`}"
-    ></div>
+    />
   </div>
 </template>
 

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>