@policystudio/policy-studio-ui-vue 1.0.20 → 1.0.21

package/src/components/controls/PsCheckbox.vue

@@ -1,5 +1,12 @@
 <template>
-  <label class="container psui-pl-6" :class="[{ 'psui-text-gray-40': disabled }, { 'psui-text-gray-50': !disabled }, labelClasses]">
+  <label
+    class="container psui-pl-6"
+    :class="[
+      { 'psui-text-gray-40': disabled },
+      { 'psui-text-gray-50': !disabled },
+      labelClasses,
+    ]"
+  >
     {{ label }}
     <input
       type="checkbox"
@@ -7,7 +14,11 @@
       :disabled="disabled"
       :value="inputValue"
     />
-    <span class="checkmark psui-border-2" :class="classes" :style="getSize"></span>
+    <span
+      class="checkmark psui-border-2"
+      :class="classes"
+      :style="getSize"
+    ></span>
   </label>
 </template>
 
@@ -18,26 +29,26 @@ export default {
     value: {
       required: true,
     },
-    inputValue: String,    
+    inputValue: String,
     label: {
       type: String,
-      default: ''
+      default: '',
     },
     checkboxClasses: {
       type: String,
-      default: ''
+      default: '',
     },
     labelClasses: {
       type: String,
-      default: ''
+      default: '',
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     size: {
-      default: 18
-    }
+      default: 18,
+    },
   },
   computed: {
     model: {
@@ -50,15 +61,17 @@ export default {
       },
     },
     classes() {
-      return `${this.disabled ? 'psui-border-gray-40': 'psui-border-gray-50'} ${this.checkboxClasses}`
+      return `${
+        this.disabled ? 'psui-border-gray-40' : 'psui-border-gray-50'
+      } ${this.checkboxClasses}`
     },
     getSize() {
       return {
         width: `${this.size}px`,
-        height: `${this.size}px`
+        height: `${this.size}px`,
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -92,12 +105,12 @@ export default {
 }
 
 .container input:checked ~ .checkmark {
-  background-color: #64B5CE;
+  background-color: #64b5ce;
   border: none;
 }
 
 .checkmark:after {
-  content: "";
+  content: '';
   position: absolute;
   display: none;
 }
@@ -118,4 +131,4 @@ export default {
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }
-</style>
+</style>

package/src/components/controls/PsDraggable.vue

@@ -1,38 +1,184 @@
 <template>
-  <div>
-      <div>
-          <div class="psui-bg-gray-20 psui-rounded-lg psui-mb-4">
-              <div class="psui-flex psui-justify-between psui-items-center psui-p-2">
-                <h2 class="psui-text-gray-80 psui-font-bold psui-leading-4">Cost Effectiveness</h2>
-                <i class="material-icons-round psui-text-gray-40" >drag_indicator</i>
-              </div>
-          </div>
-            <div>
-                <div class="psui-flex psui-flex-col psui-bg-gray-20 psui-rounded-lg psui-mb-4">
-                    <div class="psui-flex psui-justify-between psui-items-center psui-p-2">
-                        <h2 class="psui-text-gray-80 psui-font-bold psui-leading-4">Per Home Results</h2>
-                        <i class="material-icons-round psui-text-gray-40">drag_indicator</i>
-                    </div>
-                    <slot>
-                    </slot>
-                </div>
+  <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"
+      v-for="(columnGroup, indexColumnGroup) in getColumns.columnGroups"
+      :key="indexColumnGroup"
+      :class="{ 'is-dragging-out' :  indexColumnGroup == isDraggingOverGroup}"
+    >
+      <!-- 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"
+        draggable="true"
+        @dragstart="dragStartGroup({ indexColumnGroup })"
+        @dragover="dragOverGroup({ indexColumnGroup })"
+        @dragend="dragEndGroup"
+      >
+        <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>
+      </div>
+
+      <div class="psui-w-full psui-flex psui-flex-wrap">
+        <!-- COLUMNS -->
+        <div class="psui-w-full psui-mb-2 app-draggable-list-item"
+          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"
+            draggable="true"
+            @dragstart="dragStartColumn({ indexColumnGroup, indexColumn })"
+            @dragover="dragOverColumn({ indexColumnGroup, indexColumn })"
+            @dragend="dragEndColumn"
+            :class="{ 'is-dragging-out' : checkColumnIsDragOver({ indexColumnGroup, indexColumn }) }"
+          >
+            <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>
             </div>
+          </div>
+        </div>
       </div>
+    </div>
   </div>
 </template>
 
 <script>
+import PsCheckbox from './PsCheckbox.vue'
+
 export default {
-    name: 'PsDraggable',
-    props:{
-        data: {
-            type: Array,
-            required: true,
-        }
+  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 })
+    },
+
+    /**
+    * 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
+    },
+    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
+    },
+    moveItemGroup({ studyKey, from, to}) {
+      this.$store.commit(this.getMoveColumnGroupStoreMutationName, { 
+        columnsStateKey: this.getColumnsStateKey,
+        studyKey,
+        from,to
+      })
     }
+    
+  }
 }
 </script>
+<style scoped>
+  .app-draggable-list-item {
+    cursor: grab;
+  }
 
-<style>
-
+  .app-draggable-list-item label {
+      margin-bottom: 0;
+  }
 </style>

package/src/components/controls/PsRadioButton.vue

@@ -1,9 +1,15 @@
 <template>
   <label class="wrapper flex items-center">
     {{ label }}
-    <input class="checkbox" type="radio" :checked="isChecked" :value="value" @change="$emit('change', $event.target.value)" />
-    <span class="checkmark" :class="{ 'checkmark-small' : small }"></span>
-  </label>  
+    <input
+      class="checkbox"
+      type="radio"
+      :checked="isChecked"
+      :value="value"
+      @change="$emit('change', $event.target.value)"
+    />
+    <span class="checkmark" :class="{ 'checkmark-small': small }"></span>
+  </label>
 </template>
 
 <script>
@@ -11,31 +17,31 @@ export default {
   name: 'PsRadioButton',
   props: {
     label: {
-      type: String, 
-      default: "",
-      required:true
+      type: String,
+      default: '',
+      required: true,
     },
     modelValue: {
-      default: ""
+      default: '',
     },
     value: {
       type: String,
-      default: undefined
+      default: undefined,
     },
     small: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   model: {
     prop: 'modelValue',
-    event: 'change'
+    event: 'change',
   },
   computed: {
     isChecked() {
       return this.modelValue == this.value
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -65,7 +71,7 @@ export default {
   width: 24px;
   border-radius: 50%;
   background-color: white;
-  border: 2px solid #A2ACB7;
+  border: 2px solid #a2acb7;
 }
 .checkmark-small {
   top: 3px;
@@ -74,11 +80,11 @@ export default {
 }
 .wrapper input:checked ~ .checkmark {
   background-color: white;
-  border-color: #64B5CE;
+  border-color: #64b5ce;
   border-width: 2px;
 }
 .checkmark:after {
-  content: "";
+  content: '';
   position: absolute;
   display: none;
 }
@@ -91,7 +97,7 @@ export default {
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: #64B5CE;
+  background: #64b5ce;
 }
 .wrapper .checkmark-small:after {
   top: 3px;
@@ -99,6 +105,6 @@ export default {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: #64B5CE;
+  background: #64b5ce;
 }
-</style>
+</style>

package/src/components/forms/PsInput.vue

@@ -1,102 +1,122 @@
-<template>
-	<div>
-		<div v-if="label" class="psui-font-bold psui-text-gray-80">{{ label }}</div>
-    <div class="psui-relative">
-      <div class="psui-absolute psui-inset-y-0 psui-left-0 psui-pl-2 psui-flex psui-items-center psui-pointer-events-none" v-if="this.$slots.prepend">
-        <slot name="prepend"></slot>
-      </div>
-      <input
-        :type="type"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :aria-required="required"
-        :aria-invalid="validation.hasError"
-        :class="[getInputClasses, { 'psui-border-red' : validation.hasError }]"
-        :required="required"
-        :value="value"
-        @focus="$emit('focus', $event)"
-        @blur="$emit('blur', $event)"
-        @input="$emit('input', $event)"
-        @keydown.enter="$emit('keydown', $event)"
-        @change="$emit('change', $event)"
-        v-bind="getAttrs"
-      />
-      <div class="psui-absolute psui-inset-y-0 psui-right-0 psui-pr-2 psui-flex psui-items-center" v-if="this.$slots.append">
-        <slot name="append"></slot>
-      </div>
-    </div>
-		<div v-if="hint && !validation.hasError" class="psui-text-gray-50 psui-text-xsmall">{{ hint }}</div>
-		<div v-if="validation.hasError && validation.label" class="psui-text-red psui-text-xsmall">{{ validation.label }}</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'PsInput',
-  props: {
-    type: {
-      type: String,
-      default: 'text'
-    },
-		required: {
-			type: Boolean
-		},
-		placeholder: {
-			type: String
-		},
-		label: {
-			type: String
-		},
-		hint: {
-			type: String
-		},
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    mini: {
-      type: Boolean,
-      default: false
-    },
-    validation: {
-      type: Object,
-      default: () => {
-        return { hasError: false, checked: false, filled: false, required: false }
-      }
-    },
-    value: {
-      required: true,
-    },    
-	},
-  computed: {
-    getInputClasses() {
-      return `${this.getPadding} ${this.getText} psui-text-gray-60 psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-block hover:psui-border-blue-50 focus:psui-border-blue-50 ${this.getState}`
-    },
-    getText() {
-      return this.mini ? 'psui-text-small' : ''
-    },
-    getPadding() {
-      return this.mini ? 'psui-px-2 mini-p' : 'psui-py-2 psui-px-4'
-    },
-    getState() {
-      return this.disabled ? 'disabled:psui-bg-gray-20' : 'psui-bg-white'
-    },
-    getAttrs() {
-      const defaultAttrs = {
-        autocapitalize: 'sentences',
-        autocomplete: 'chrome-off',
-        autocorrect: 'off',
-        spellcheck: 'spellcheck'
-      }
-      return { ...defaultAttrs, ...this.$attrs }
-    }
-  },
-}
-</script>
-
-<style>
-.mini-p {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-</style>
+<template>
+	<div class="psui-el-input" :class="[getComponentClass, `layout-${layout}`]" >
+		
+    <label v-if="label"> {{ label }} </label>
+    
+    <div 
+      class="psui-el-input-wrapper" 
+      @mouseenter="isHoveringInputWrapper = true" 
+      @mouseleave="isHoveringInputWrapper = false"
+      :class="{ 'hover' : isHoveringInputWrapper }"
+    >
+    
+      <div v-if="$slots.prepend" class="psui-el-input-prepend">
+        <slot name="prepend"></slot>
+      </div>
+    
+      <input
+        :type="type"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :value="value"
+        @focus="onInputFocus"
+        @blur="onInputBlur"
+        @input="$emit('input', $event)"
+        @keydown="$emit('keydown', $event)"
+        @change="$emit('change', $event)"
+        v-bind="getAttrs"
+        :class="getInputClasses"
+      />
+    
+      <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>
+
+    </div>
+    
+		<p v-if="hint || (hasError && typeof hasError === 'string')" class="psui-el-input-hint">
+      {{ typeof hasError === 'string' ? hasError : hint }}
+    </p>
+
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PsInput',  
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+		placeholder: {
+			type: String
+		},
+		label: {
+			type: String
+		},
+		hint: {
+			type: String
+		},    
+    layout: {
+      type: String,
+      default: 'default',
+      validator: (value) => ['default', 'mini'].includes(value)
+    },
+    value: {
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    hasError: {
+      type: [String, Boolean],
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+	},
+  data: () => ({
+    isHoveringInputWrapper: false,
+    isFocus: false,
+  }),
+  computed: {
+    getAttrs() {
+      const defaultAttrs = {
+        autocapitalize: 'sentences',
+        autocomplete: 'chrome-off',
+        autocorrect: 'off',
+        spellcheck: 'spellcheck'
+      }
+      return { ...defaultAttrs, ...this.$attrs }
+    },
+    getComponentClass() {
+      if (this.disabled) {
+        return 'status-disabled'  
+      } else if (this.hasError) {
+        return 'status-error'
+      } else if (this.isFocus || this.isTyping || this.active ) {
+        return 'status-active'
+      } else {
+        return 'status-resting'
+      }
+    },
+  },
+  methods: {
+    onInputFocus($event) {
+      this.isFocus = true
+      this.$emit('focus', $event)
+    },
+    onInputBlur($event) {
+      this.isFocus = false
+      this.$emit('blur', $event)
+    }
+  }
+}
+</script>
+
+<style> /* Please, use the file src/assets/scss/components/PsInput.scss */</style>