@policystudio/policy-studio-ui-vue 1.0.30 → 1.0.31

package/src/components/controls/PsCheckbox.vue

@@ -3,10 +3,9 @@
     <input 
       :id="label" 
       type="checkbox" 
-      :value="label"
-      @change="onChange" 
-      :checked="checked"
-      :disabled='disabled'      
+      :value="inputValue"
+      v-model="model"
+      :disabled="disabled"      
     />
     <label :for="label" class="psui-el-checkmark"><span>{{ label }}</span></label>    
   </div>
@@ -18,41 +17,58 @@
 export default {
   name: 'PsCheckbox',
   props: {
+    /**
+     * It sets the label of the checkbox input.
+     */
     label: {
       type: String,
       default: '',
     },
+    /**
+     * It sets the value which should be monitored.
+    */
+    inputValue: {
+      type: String,
+    },
+    value:{
+      type: Array
+    },
+    /**
+     * It disables the checkbox input.
+     */
     disabled: {
       type: Boolean,
       default: false,
     },
+    /**
+     * It set the of the checkbox input. eg: big and small.
+     */
     size: {
       type: String,
       default: 'big',
       validator: (value)=> ['big', 'small'].includes(value)
     },
-    checked:{
-      type: Boolean,
-    },
+    /**
+     * It set the layout of the checkbox input. eg: default and mixed.
+     */
     layout:{
       type: String,
       default: 'default',
       validator: (value)=> ['default','mixed'].includes(value)
     }
   },
-  emits:['@update:checked', 'value'],
   computed:{
     getComponentClass(){
       return `size-${this.size} layout-${this.layout}`
-    }  
-  },
-  methods:{
-    onChange(event){
-      if(!this.disabled){
-        this.$emit('value', event.target.value)
-        this.$emit('update:checked', event.target.checked)
+    },
+    model: {
+      get(){
+        return this.value
+      },
+      set(value){
+        this.$emit('input', value)
       }
-    }
+    }  
   },
 }
 </script>

package/src/components/controls/PsDraggable.vue

@@ -1,184 +1,73 @@
 <template>
-  <div class="psui-w-full psui-my-4 psui-pr-4 psui-flex psui-flex-wrap psui-justify-start psui-mb-20">
-    <div class="psui-w-full psui-mb-4 psui-rounded-lg psui-bg-gray-30 psui-p-2"
+  <div class="psui-el-draggable">
+    <div class="psui-el-draggable-wrapper"
       v-for="(columnGroup, indexColumnGroup) in getColumns.columnGroups"
       :key="indexColumnGroup"
-      :class="{ 'is-dragging-out' :  indexColumnGroup == isDraggingOverGroup}"
+      :ref="indexColumnGroup"
     >
       <!-- COLUMN GROUP -->
       <div 
-        class="psui-w-full psui-flex psui-justify-between psui-mb-2 psui-rounded-sm psui-items-center psui-px-2 app-draggable-list-item"
+        class="psui-el-draggable-title"
         draggable="true"
-        @dragstart="dragStartGroup({ indexColumnGroup })"
-        @dragover="dragOverGroup({ indexColumnGroup })"
-        @dragend="dragEndGroup"
+        @dragstart="onDragStart"
+        @dragover="$emit('drag-over', $event)"
+        @dragend="onDragEnd"
       >
-        <h2 class="psui-w-full psui-text-gray-80 psui-font-bold psui-pl-4 psui-py-2">{{columnGroup.title}}</h2>
-        <i class='material-icons-round psui-text-gray-40 psui-pr-1 psui-py-2'>drag_indicator</i>
+        <h2 >{{columnGroup.title}}</h2>
+        <i >drag_indicator</i>
       </div>
 
-      <div class="psui-w-full psui-flex psui-flex-wrap">
+      <ul class="psui-el-draggable-list-items-wrapper">
         <!-- COLUMNS -->
-        <div class="psui-w-full psui-mb-2 app-draggable-list-item"
+        <li
           v-for="(column, indexColumn) in columnGroup.columns"
           :key="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
           :id="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
         >
-          <div class="psui-select-none psui-w-full psui-py-2 psui-px-3 psui-rounded-sm psui-flex psui-items-center psui-bg-white"
+          <div class="psui-el-draggable-item-wrapper"
             draggable="true"
-            @dragstart="dragStartColumn({ indexColumnGroup, indexColumn })"
-            @dragover="dragOverColumn({ indexColumnGroup, indexColumn })"
-            @dragend="dragEndColumn"
-            :class="{ 'is-dragging-out' : checkColumnIsDragOver({ indexColumnGroup, indexColumn }) }"
+            @dragstart="$emit('drag-start-item',$event)"
+            @dragover="$emit('drag-over-item',$event)"
+            @dragend="$emit('drag-end-item',$event)"
           >
-            <PsCheckbox :inputValue='column' :label='column' @change="toggleColumnIsActive({ studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey:  columnGroup.key})">
-            </PsCheckbox>
-
-            <!-- <Checkbox
-              class="psui-whitespace-no-wrap"
-              :label="column.title"
-              :value="column.isActive"
-              @change="toggleColumnIsActive({ studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey:  columnGroup.key})"
-            ></Checkbox> -->
-            <div class="psui-w-full psui-flex psui-justify-end">
-              <i class='material-icons-round psui-text-gray-30'>drag_indicator</i>
+            <slot name="item">
+            </slot>
+            <div class="psui-el-draggable-item-icon">
+              <i>drag_indicator</i>
             </div>
           </div>
-        </div>
-      </div>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
 
 <script>
-import PsCheckbox from './PsCheckbox.vue'
 
 export default {
-  name: 'DragAndDropEditColumnsList',
-  components: { PsCheckbox},
-  props: ['getColumns', 'module'],
-  data() {
-    return {
-      // Column
-      isDraggingColumnGroup: -1,
-      isDraggingOverColumn: -1,
-      isDraggingColumn: -1,
-
-      // Group
-      isDraggingGroup: -1,
-      isDraggingOverGroup: -1,
-    }
-  },
-
-  computed: {
-    getColumnsStateKey() {
-      return `${this.module}Columns`
-    },
-    getMoveColumnStoreMutationName() {
-      return `${this.module}/moveColumnItem`
-    },
-    getMoveColumnGroupStoreMutationName() {
-      return `${this.module}/moveColumnGroup`
-    },
-    getToggleColumnIsActiveStoreMutationName() {
-      return `${this.module}/toggleColumnIsActive`
-    }
-
-  },
-
-  methods: {
-    toggleColumnIsActive({ studyKey, indexColumnGroup, indexColumn, columnGroupKey }) {
-      this.$store.commit(this.getToggleColumnIsActiveStoreMutationName, { columnsStateKey: this.getColumnsStateKey, studyKey, indexColumnGroup, indexColumn, columnGroupKey })
-    },
-
+  name: 'PsDraggable',
+  props: {
     /**
-    * Drag and drop COLUMN
-    */
-     dragStartColumn({ indexColumnGroup, indexColumn }) {
-      this.isDraggingColumn = indexColumn
-      this.isDraggingColumnGroup = indexColumnGroup
-    },
-    dragEndColumn() {
-      this.moveItemColumn({
-        studyKey: this.getColumns.key, 
-        indexColumnGroup: this.isDraggingColumnGroup,
-        from: this.isDraggingColumn,
-        to: this.isDraggingOverColumn
-      })
-      this.dragLeaveColumn()
-      this.dragLeaveGroup()
-    },
-    dragOverColumn({ indexColumnGroup, indexColumn }) {
-      if(this.isDraggingColumnGroup != indexColumnGroup) return
-      this.isDraggingOverColumn = indexColumn
+     * It sets the data that will be used.
+     */
+    getColumns: {
+      type: Object,
     },
-    checkColumnIsDragOver({indexColumnGroup, indexColumn }) {
-      return (this.isDraggingColumnGroup == indexColumnGroup && this.isDraggingOverColumn == indexColumn)
-    },
-    dragLeaveColumn() {
-      this.isDraggingColumn = -1
-      this.isDraggingColumnGroup = -1
-      this.isDraggingOverColumn = -1
-    },
-    moveItemColumn({ studyKey, indexColumnGroup, from, to}) {
-      this.$store.commit(this.getMoveColumnStoreMutationName, { 
-        columnsStateKey: this.getColumnsStateKey, 
-        studyKey, 
-        indexColumnGroup, 
-        from, 
-        to
-      })
-      this.blinkColumns({ indexColumnGroup, to })
-      this.dragLeaveColumn()
-    },
-
-    blinkColumns({ indexColumnGroup, to }) {
-      const colToBlink = document.getElementById(`edit-columns-column-${indexColumnGroup}-${to}`)
-      if(colToBlink) {
-        colToBlink.classList.add('blink')
-        setTimeout(() => colToBlink.classList.remove('blink'), 800)
-      }
-    },
-
     /**
-    * Drag and drop GROUP
-    */
-    dragStartGroup({ indexColumnGroup }) {
-      this.isDraggingGroup = indexColumnGroup
-    },
-    dragEndGroup() {
-      this.moveItemGroup({ 
-        studyKey: this.getColumns.key,
-        from: this.isDraggingGroup,
-        to: this.isDraggingOverGroup
-      })
-      this.dragLeaveGroup()
-    },
-    dragOverGroup({ indexColumnGroup }) {
-      if(this.isDraggingGroup < 0) return
-      this.isDraggingOverGroup = indexColumnGroup
-    },
-    dragLeaveGroup() {
-      this.isDraggingGroup = -1
-      this.isDraggingOverGroup = -1
+     * It sets the module which will be used to set getters and actions.
+     */
+    module:{
+      type: String
+    }
+  }, 
+  methods:{
+    onDragStart(event){
+      this.$emit('drag-start', event)
     },
-    moveItemGroup({ studyKey, from, to}) {
-      this.$store.commit(this.getMoveColumnGroupStoreMutationName, { 
-        columnsStateKey: this.getColumnsStateKey,
-        studyKey,
-        from,to
-      })
+
+    onDragEnd(event){
+      this.$emit('drag-end',event)
     }
-    
   }
 }
 </script>
-<style scoped>
-  .app-draggable-list-item {
-    cursor: grab;
-  }
-
-  .app-draggable-list-item label {
-      margin-bottom: 0;
-  }
-</style>

package/src/components/controls/PsInlineSelector.vue

@@ -69,15 +69,27 @@
 export default {
   name: 'PsInlineSelector',
   props: {
+    /**
+     * It sets the default width of the inline selector.
+     */
     width: {
       default: 244
     },
+    /**
+     * It sets if it should receive focus or not when componented is mounted.
+     */
     focusOnMount: {
       default: false
     },
+    /**
+     * It sets if the component should be scrollable.
+     */
     shouldScroll: {
       default: false
     },
+    /**
+     * It sets the label of the component.
+     */
     label: {
       type: String,
       default: 'Type a City or County'
@@ -86,19 +98,31 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * It sets the jurisdiction selected.
+     */
     jurisdictionSelected: {
       type: [ Object, Boolean ]
     },
+    /**
+     * It gets and set the data that was written.
+     */
     search: {
       type: String,
       default: '',
       required: true
     },
+    /**
+     * It provides all the jurisdictions. 
+     */
     jurisdictions: {
       type: Array,
       default: () => [],
       required: true
     },
+    /**
+     * It is a helper for checking if fetching data was successful.
+     */
     requestFetched: {
       type: Boolean,
     },
@@ -110,10 +134,16 @@ export default {
       type: Number,
       default: 0,
     },
+    /**
+     * It sets if the component is focused or not.
+     */
     isFocused:{
       type: Boolean,
       default: false,
     },
+    /**
+     * It sets the placeholder of the component.
+     */
     placeholder:{
       type: String,
     }

package/src/components/controls/PsRadioButton.vue

@@ -3,9 +3,8 @@
     <input 
       :id="label" 
       type="radio" 
-      :value="label"
-      @change="onChange" 
-      :checked="checked"
+      :value="inputValue"
+      v-model="model"
       :disabled='disabled'      
     />
     <label :for="label" class="psui-el-checkmark"><span>{{ label }}</span></label>    
@@ -19,37 +18,51 @@
 export default {
   name: 'PsRadioButton',
   props: {
+    /**
+    * It sets the label of the radio button.
+     */
     label: {
       type: String,
       default: '',
     },
+    /**
+    * It's the value of the checkbox
+     */
+    inputValue:{
+      type: String,
+    },
+    value:{
+      type: String
+    },
+    /**
+    * It disables the radio button. All mouse events are disabled.
+     */
     disabled: {
       type: Boolean,
       default: false
     },
+    /**
+    * It sets the size of the radio button. eg: big and small.
+     */
     size: {
       type: String,
       default: 'big',
       validator: (value) => ['big', 'small'].includes(value)
     },
-    checked:{
-      type: Boolean,
-    }
   },
-  emits:['@update:checked', 'value'],
   computed: {
     getComponentClass(){
       return `size-${this.size}`
+    },
+    model: {
+    get(){
+      return this.value
+    },
+    set(value){
+      this.$emit('input', value)
     }
+  }  
   },
-  methods:{
-    onChange(event){
-      if(!this.disabled){
-        this.$emit('value', event.target.value)
-        this.$emit('update:checked', event.target.checked)
-      }
-    }
-  }
 }
 </script>
 

package/src/components/controls/PsSwitch.vue

@@ -1,9 +1,7 @@
 <template>
   <div class='psui-el-switch' :class="getComponentClass">
-      <input type="checkbox" :id='label' @change="onChange">
-      <transition>
-        <label :for="label" class='psui-el-switch-button' :class="getToggleClass" />
-      </transition>
+      <input type="checkbox" :id='label' v-model="getValue">
+      <label :for="label" class='psui-el-switch-button' :class="getToggleClass" />
   </div>
 </template>
 
@@ -13,13 +11,21 @@
 export default {
   name: 'PsSwitch',
   props: {
+    /**
+    * It sets the label of the switch button.
+     */
     label:{
       type: String,
     },
+    /**
+    * It sets the value of the switch button. 
+     */
     value:{
       type: Boolean,
-      required: true,
     },
+    /**
+    * It sets the size of the switch button. eg: small and big.
+     */
     size:{
       type: String,
       default: 'big',
@@ -32,14 +38,17 @@ export default {
     },
     getComponentClass(){
       return `size-${this.size}`
+    },
+    getValue:{
+      get(){
+        return this.value
+      },
+      set(value){
+        this.$emit('input', value)
+        this.$emit('change', value)
+      }
     }
   },
-  methods:{
-    onChange(event){
-      this.value = event.target.checked
-      this.$emit('update:value', event.target.value)
-    }
-  }
 } 
 </script>
 

package/src/components/controls/PsToggle.vue

@@ -3,11 +3,11 @@
       <button 
         type="button"
         v-for="(item, index) in items"
-        :key="index"
+        :key="getKeyValue(item) + index"
         @click="selectOption(item)"
-        :class="{ 'status-active': getSelected === item }"
+        :class="{ 'status-active': selected == item }"
       >
-        {{ item }}
+        {{ getKeyLabel(item) }}
       </button>
     </div>
 </template>
@@ -18,26 +18,47 @@
 export default {
   name: 'PsToggle',
   props: {
+    /**
+    * It sets the items which will be used to create the toggle tab. See Figma - Controls & Selector for more information.
+     */
     items: {
       type: Array,
       required: true
     },
+    /**
+    * It sets the value selected.
+     */
     selected: {},
-  },
-  computed: {
-    getSelected() {
-      if (this.selected) {
-        return this.selected
-      } else {
-        return false
-      }
+    /**
+    * It sets the key label of your items if needed.
+     */
+    keyLabel: {
+      type: [String, Function],
+      default: 'label'
     },
+    /**
+    * It sets the key value of your items if needed.
+     */
+    keyValue: {
+      type: [String, Function],
+      default: 'value'
+    }
   },
   methods: {
     selectOption(item) {
       this.$emit('update:selected', item)
       this.$emit('change', item)
-    }
+    },
+    getKeyLabel(item) {
+      if(typeof this.keyLabel == 'function') return this.keyLabel(item)
+      if(typeof item === 'object') return item[this.keyLabel]
+      return item
+    },
+    getKeyValue(item) {
+      if(typeof this.keyValue == 'function') return this.keyValue(item)
+      if(typeof item === 'object') return item[this.keyLabel]
+      return item
+    },
   }
 }
 </script>

package/src/components/datatable/PsDataTable.vue

@@ -35,6 +35,9 @@ export const alignment = ['center', 'right', 'left']
 export default {
   name: 'PsDataTable',
   props: {
+    /**
+     * It sets the type of the data table. eg: simple or rich.
+     */
     type: {
       type: String,
       required: true,
@@ -42,17 +45,29 @@ export default {
         return ['simple', 'rich'].indexOf(value) !== -1
       },
     },
+    /**
+    * It sets the values which will be use to render the header.
+     */
     header: {
       type: Array,
       required: true,
     },
+    /**
+    * It sets the values which will be use to render the body.
+     */
     data: {
       type: Array,
       required: true
     },
+    /**
+    * It sets the values which will be use to render the footer.
+     */
     footer: {
       type: Array,
     },
+    /**
+    * It sets the alignment of the whole context.
+     */
     align: {
       type: String,
       default: 'left',
@@ -60,6 +75,9 @@ export default {
         return ['center', 'right', 'left'].indexOf(value) !== -1
       }
     },
+    /**
+    * It sets additional styling if needed.
+     */
     cssStyle: {
       type: String,
       default: 'psui-text-gray-60'