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

package/src/components/chips/PsChips.vue

@@ -5,6 +5,7 @@
   >
     <input
       @change="onChange"
+      :disabled="disabled"
       v-if="type != 'button'"
       :type="type"
       :id="label"
@@ -12,6 +13,7 @@
     />
     <label
       @click="onClick"
+      :disabled="disabled"
       :for="label"
       :class="getCssClass"
     >
@@ -29,44 +31,65 @@
 </template>
 
 <script>
-export const type = ["radio", "checkbox", "button"]
+export const type = ['radio', 'checkbox', 'button']
 
 export default {
-  name: "PsChips",
+  name: 'PsChips',
   props: {
+    /**
+     * It sets the label of the chips button.
+     */
     label: {
       type: String,
-      default: "",
+      default: '',
     },
+    /**
+     * It sets the type of the chips button. eg: radio, checkbox, button.
+     */
     type: {
       type: String,
       required: true,
       default: 'button',
-      validator: (type) => ["radio", "checkbox", "button"].includes(type)
+      validator: (type) => ['radio', 'checkbox', 'button'].includes(type)
     },
+    /**
+     * It sets the layout of the chipsbutton. eg: simple, with-icon, rich.
+     */
     layout: {
       type: String,
       default: 'simple',
       validator: (value) => ['simple', 'with-icon', 'rich'].includes(value)
     },
+    /**
+    * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the right description of your icon on https://fonts.google.com/.
+    */
     icon: {
       type: String,
-      default: "",
+      default: '',
     },
+    /**
+     * It sets if the button was checked or not checked.
+     */
     checked: {
       type: Boolean,
       default: false
     },
+    /**
+     * It disables the chips button.
+     */
     disabled: {
       type: Boolean,
       default: false
     },
+    /**
+     * It sets if the button is active or not.
+     */
     active: {
       type: Boolean,
       default: false
     },
   },
-  emits: ["click", "change"],
+  emits: ['click', 'change'],
   data() {
     return {
       isChecked: false,
@@ -84,7 +107,7 @@ export default {
       let cssClass = ''
       
       if (this.checked === true ) {
-        cssClass = "psui-text-blue-50 psui-bg-blue-20"
+        cssClass = 'psui-text-blue-50 psui-bg-blue-20'
       }
 
       return cssClass
@@ -93,17 +116,15 @@ export default {
   methods: {
     onClick() {
       this.isChecked = !this.isChecked
-      this.$emit("click")
+      this.$emit('click')
     },
     onChange(event) {
-
       this.isChecked = event.target.checked
-
       this.$emit('update:checked', event.target.checked)
-      this.$emit("change")
+      this.$emit('change', event)
     },
     onClose() {
-      this.$emit("close")
+      this.$emit('close')
     },
   },
 }

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>
+  <div class='psui-el-switch' :class="getComponentClass" @click="change()">
+      <input type="checkbox" :checked="value" />
+      <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',
@@ -28,16 +34,16 @@ export default {
   },
   computed:{
     getToggleClass(){
-      return `toggle-${this.value.toString()}`
+      return this.value ? 'toggle-true' : 'toggle-false'
     },
     getComponentClass(){
       return `size-${this.size}`
     }
   },
-  methods:{
-    onChange(event){
-      this.value = event.target.checked
-      this.$emit('update:value', event.target.value)
+  methods: {
+    change() {
+      this.$emit('update:value', !this.value)
+      this.$emit('change', !this.value)
     }
   }
 }