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

package/src/components/buttons/PsButton.vue

@@ -1,110 +1,113 @@
 <template>
   <button
-    @click="onClick()" 
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave" 
-    class="psui-el-button" 
-    :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled || loading }]" 
-  >
-    <svg
-      v-if="loading" 
+      @click="onClick()" 
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave" 
+      class='psui-el-button' 
+      :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled || loading }]" 
+   >
+    <svg v-if="loading" 
       class="psui-animate-spin psui-mr-3 psui-h-5 psui-w-5 psui-text-black"
       :class="`${iconPosition == 'left' ? 'psui-mr-3' : 'psui-ml-3 psui--mr-1'}`"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        class="psui-opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      />
-      <path
-        class="psui-opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
+      xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle class="psui-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="psui-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
     </svg>
-    <i
-      v-else-if="icon"
-      :class="iconClass"
-      class="material-icons-round"
-    >{{ icon }}</i>
+    <i v-else-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
     <span v-if="label">{{ label }}</span>
   </button>
 </template>
 
-<script setup lang="ts">
-import { PropType, computed, ref } from 'vue'
-
-  const isHover = ref(false)
-
-  const emit = defineEmits(['click'])
-
-  const props = defineProps({
+<script>
+export default {  
+  props: {
+    /**
+     * It set de label of the button when component is rendered.
+     */
     label: {
       type: String,
-      default: ''
     },
-    layout:{
-      type: String as PropType<'solid' | 'outline' | 'ghost' | 'onlytext' | 'caution'>,
+    /**
+     * It set the layout of the button. eg: solid, outline, ghost, onlytext and caution.
+     */
+    layout: {
+      type: String,
       default: 'solid',
-      validator: (value:string) => ['solid','outline','ghost','onlytext','caution'].includes(value)
+      validator: (value) => ['solid','outline','ghost','onlytext','caution'].includes(value)
     },
+    /**
+     * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
+     */
     icon: {
       type: String,
-      default: ''
     },
-    iconPosition: {
+    /**
+     * It sets the position of the icon. eg: left or right.
+     */
+    iconPosition:{
       type: String,
       default: 'left',
-      validator: (value:string) => ['left','right'].includes(value)
+      validator: (value) => ['left','right'].includes(value)
     },
+    /**
+     * It sets the size of the icon. eg: small, medium and big.
+     */
     size: {
-        type: String,
-        default: 'big',
-        validator: (value:string) => ['small','medium','big'].includes(value)
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      loading: {
-        type: Boolean,
-        default: false
-      },
-      iconClass:{
-        type: String,
-        default: ''
-      } 
-  })
-
- const getComponentClass = computed(()=>{
-  if(props.icon){
-    return `layout-${props.layout} size-${props.size} icon-${props.iconPosition}`
-  } else {
-    return `layout-${props.layout} size-${props.size}` 
-  }
- })   
-
- const onClick = () => {
-  if (props.disabled) return
-    emit('click')
- }
- const onMouseEnter = () => {
-  if(!props.disabled){
-    isHover.value = true
-  }
- }
-
- const onMouseLeave = () => {
-    if(!props.disabled){
-      isHover.value = false
+      type: String,
+      default: 'big',
+      validator: (value) => ['small','medium','big'].includes(value)
+    },
+    /**
+     * It disable the button. All mouse event are disabled.
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * It disable and add a spin icon to the button. All mouse event are disabled.
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * It set any further css style that might be needed.
+     */
+    iconClass:{
+      type: String
+    }
+  },
+  data(){
+    return {
+      isHover: false,
+    }
+  },
+  computed: {
+    getComponentClass(){
+        if(this.icon){
+          return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}`
+        } else {
+          return `layout-${this.layout} size-${this.size}` 
+        }
+    },
+  },
+  methods: {
+    onClick() {
+      if (this.disabled) return
+      this.$emit('click')
+    },
+    onMouseEnter(){
+      if(!this.disabled){
+        this.isHover = true
+      }
+    },
+    onMouseLeave(){
+      if(!this.disabled){
+        this.isHover = false
+      }
     }
   }
-
+}
 </script>
 

package/src/components/chips/PsChips.vue

@@ -10,16 +10,13 @@
       :type="type"
       :id="getInputId"
       :checked="checked"
-    >
+    />
     <label
       :disabled="disabled"
       :for="getInputId"
       :class="{'checked':checked && type === 'button'}"
     >
-      <i
-        v-if="icon"
-        class="psui-el-chips-icon psui-el-chips-icon-prepend"
-      >{{ icon }}</i>
+      <i v-if="icon" class="psui-el-chips-icon psui-el-chips-icon-prepend">{{ icon }}</i>
       {{ label }}
       <button 
         @click="onClose" 

package/src/components/controls/PsCheckbox.vue

@@ -1,15 +1,12 @@
 <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,89 +1,86 @@
 <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"
-        :ignore-dialog="!columnGroup.disabled"
-        class="w-full"
+    <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}"
       >
-        <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)"
+        <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="flex psui-items-center">
-              <p>{{ columnGroup.title }}</p>
+            <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-wrapper-title-icon"
-                v-if="columnGroup.hasHelper && columnGroup.hasHelper.showOnEditHideColumns"
+                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-group-helper', columnGroup.hasHelper)"
+                @click.native="$emit('column-helper', column.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}"
-          >
-            <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>
+            <span class="psui-el-draggable-item-append">
+              <i class="psui-icon">drag_indicator</i>
+            </span>
           </div>
-        </template>
-        <template
-          #content
-        >
-          {{ columnGroup.disabledTitle }}
-        </template>
+        </div>
+      </div>
+      </template>
+      <template v-slot:content class="!psui-opacity-0">
+        {{columnGroup.disabledTitle}}
+      </template>
       </PsTooltip>
     </div>
   </div>

package/src/components/controls/PsInlineSelector.vue

@@ -8,7 +8,8 @@
     @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"
@@ -21,23 +22,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 name='loader'></slot>
         <div class="psui-el-inline-selector-dropdown">
           <div v-if="requestFetched && !jurisdictions.length">
             <h3>Hmmmm</h3>
@@ -52,9 +53,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,20 +1,15 @@
 <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)
   },
-  unmounted() {
+  destroyed() {
     window.removeEventListener('resize', this.resizeHandler)
   },
   mounted() {

package/src/components/controls/PsSwitch.vue

@@ -1,17 +1,7 @@
 <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,18 +1,15 @@
 <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,14 +3,12 @@
     <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>