@policystudio/policy-studio-ui-vue 1.0.19 → 1.0.23

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,13 +1,184 @@
 <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"
+      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: '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,79 +1,110 @@
 <template>
-  <label class="form-control">
-    <span>{{ label }}</span>
-    <input type="radio" :value="value" :name="name" v-model="radioButtonValue">
-    <span class="radio-button"></span>
-  </label>  
+  <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>
 </template>
 
 <script>
 export default {
   name: 'PsRadioButton',
-  props: ['name', 'label', 'value'],
+  props: {
+    label: {
+      type: String,
+      default: '',
+      required: true,
+    },
+    modelValue: {
+      default: '',
+    },
+    value: {
+      type: String,
+      default: undefined,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'change',
+  },
   computed: {
-    radioButtonValue: {
-      get: function() {
-        return this.value
-      },
-      set: function() {
-        this.$emit("change", this.value)
-      }
-    }
-  }
+    isChecked() {
+      return this.modelValue == this.value
+    },
+  },
 }
 </script>
 
 <style scoped>
-.form-control {
+.wrapper {
   display: block;
   position: relative;
-  padding-left: 35px;
+  padding-left: 32px;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-
-.form-control input {
+.wrapper input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
+  height: 0;
+  width: 0;
 }
-
-.radio-button {
+.checkmark {
   position: absolute;
   top: 0;
   left: 0;
-  height: 20px;
-  width: 20px;
-  background-color: #FFF;
-  border: 2px solid #A2ACB7;
+  height: 24px;
+  width: 24px;
   border-radius: 50%;
+  background-color: white;
+  border: 2px solid #a2acb7;
 }
-
-.form-control input:checked ~ .radio-button {
-  background-color: #FFF;
-  border: 2px solid #64B5CE;
+.checkmark-small {
+  top: 3px;
+  height: 18px !important;
+  width: 18px !important;
 }
-
-.radio-button:after {
-  content: "";
+.wrapper input:checked ~ .checkmark {
+  background-color: white;
+  border-color: #64b5ce;
+  border-width: 2px;
+}
+.checkmark:after {
+  content: '';
   position: absolute;
   display: none;
 }
-
-.form-control input:checked ~ .radio-button:after {
+.wrapper input:checked ~ .checkmark:after {
   display: block;
 }
-
-.form-control .radio-button:after {
+.wrapper .checkmark:after {
+  top: 4px;
+  left: 4px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #64b5ce;
+}
+.wrapper .checkmark-small:after {
   top: 3px;
-	left: 3px;
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-  background-color: #64B5CE;
+  left: 3px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #64b5ce;
 }
- 
-</style>
+</style>

package/src/components/controls/PsSwitch.vue

@@ -1,98 +1,97 @@
 <template>
-	<label for="ps-switch" class="psui-flex psui-items-center psui-cursor-pointer psui-relative">
-		<input type="checkbox" id="ps-switch" class="psui-hidden" :checked="active">
-		<div 
-			:class="classes"
-			@click="change()"
-		></div>
-		<span class="psui-ml-3 psui-text-gray-50 psui-text-sm psui-font-medium">{{ label }}</span>
-	</label>
+  <div class="switch-button-control">
+    <div
+      :class="{ enabled: active, 'switch-button': !small, 'switch-button-small': small }"
+      @click="toggle"
+      :style="{'--color': color}"
+    >
+      <div class="button"></div>
+    </div>
+    <div class="switch-button-label">
+      <slot></slot>
+    </div>
+  </div>
 </template>
 
 <script>
-export const sizes = ['big', 'small']
 export default {
   name: 'PsSwitch',
   props: {
-    label: String,
-    active: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-		size: {
-			type: String,
-			default: 'big',
-      validator: (value) => sizes.indexOf(value) !== -1
-		}
+    small: Boolean,
+    active: Boolean,
+    color: {
+      type: String,
+      required: false,
+      default: '#5DB883'
+    }
   },
-  computed: {
-    text() {
-      if (this.label && this.labelActived) {
-        return this.active ? this.labelActived : this.label
-      } else if (this.label) {
-        return this.label
-      } else {
-        return false
-      }
-    },
-		classes() {
-			if (this.size === 'small') {
-				return 'toggle-bg psui-bg-gray-40 psui-border-gray-40 psui-border-2 psui-h-4 ps-switch-small psui-rounded-full'
-			}
-			return 'toggle-bg psui-bg-gray-40 psui-border-gray-40 psui-border-2 psui-h-6 ps-switch psui-rounded-full'
-		}
+  model: {
+    prop: "active",
+    event: "toggle"
   },
   methods: {
-    change() {
-      if (!this.disabled) {
-        this.$emit('update:active', !this.active)
-        this.$emit('change', !this.active)
-      }
+    toggle: function() {
+      this.$emit('toggle', !this.active)
     }
   }
 }
 </script>
 
 <style scoped>
-	
-.ps-switch {
-	width: 46px;
+.switch-button-control {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
-.ps-switch-small {
-	width: 30px;
+.switch-button-control .switch-button {
+  height: 24px;
+  width: calc(24px * 2);
+  background-color: #A2ACB7;
+  border: 2px solid #A2ACB7;
+  border-radius: 24px;
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
 }
-
-/* 
-	@TODO - Fix the apply error
-	https://www.dropbox.com/s/83vwthcdvdt5t97/Screen%20Shot%202022-01-06%20at%2011.49.00%20AM.png?dl=0
-.toggle-bg:after {
-	content: '';
-	@apply psui-absolute psui-bg-white psui-border-gray-40 psui-rounded-full psui-h-5 psui-w-5 psui-transition;
+.switch-button-control .switch-button-small {
+  height: 16px;
+  width: calc(16px * 2);
+  background-color: #A2ACB7;
+  border: 2px solid #A2ACB7;
+  border-radius: 16px;
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
 }
-.toggle-bg:after + .ps-switch-small {
-	content: '';
-	@apply psui-absolute psui-bg-white psui-border-gray-40 psui-rounded-full psui-h-2 psui-w-2 psui-transition;
+.switch-button-control .switch-button .button {
+  height: calc(24px - (2 * 2px));
+  width: calc(24px - (2 * 2px));
+  border-radius: calc(24px - (2 * 2px));
+  background:#F3F6F9;
+  transition: all 0.3s ease-in-out;
 }
-
-input:checked + .toggle-bg:after + .ps-switch-small {
-	transform: translateX(100%);
-	position: absolute;
-	left: 2px;
-	@apply border-white;
+.switch-button-control .switch-button-small .button {
+  height: calc(16px - (2 * 2px));
+  width: calc(16px - (2 * 2px));
+  border-radius: calc(16px - (2 * 2px));
+  background:#F3F6F9;
+  transition: all 0.3s ease-in-out;
 }
-
-input:checked + .toggle-bg:after {
-	transform: translateX(100%);
-	position: absolute;
-	left: 4px;
-	@apply border-white;
+.switch-button-control .switch-button.enabled {
+  background-color: var(--color);
+  border: 2px solid var(--color);
 }
-
-input:checked + .toggle-bg {
-	@apply psui-bg-green-20 psui-border-green-20;
-} */
-</style>
+.switch-button-control .switch-button-small.enabled {
+  background-color: var(--color);
+  border: 2px solid var(--color);
+}
+.switch-button-control .switch-button.enabled .button {
+  background: white;
+  transform: translateX(calc(calc(24px - (2 * 2px)) + (2 *2px)));
+}
+.switch-button-control .switch-button-small.enabled .button {
+  background: white;
+  transform: translateX(calc(calc(16px - (2 * 2px)) + (2 *2px)));
+}
+.switch-button-control .switch-button-label {
+  margin-left: 10px;
+}
+</style>

package/src/components/controls/PsToggle.vue

@@ -32,7 +32,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .wrapper {
   padding: 2px;
 }