@policystudio/policy-studio-ui-vue 1.0.18 → 1.0.22

package/src/components/badges-and-tags/PsMiniTag.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="cssClass">
+    <div class="psui-w-full">{{ message }}</div>
+  </div>
+</template>
+
+<script>
+export const typeOptions = ['informative', 'success', 'warning', 'error']
+export default {
+  name: 'PsMiniTag',
+  props: {
+    type: {
+      type: String,
+      default: 'informative',
+      validator: (value) => typeOptions.indexOf(value) !== -1,
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      colors: {
+        informative: { background: 'blue-20', color: 'blue-60' },
+        success: { background: 'green-10', color: 'green-70' },
+        warning: { background: 'yellow-10', color: 'yellow-70' },
+        error: { background: 'red-10', color: 'red-20' },
+      },
+    }
+  },
+  computed: {
+    cssClass() {
+      return `fit-content psui-flex psui-rounded-lg psui-px-2 psui-items-center psui-justify-center psui-flex-row psui-mx-6 psui-bg-${
+        this.colors[this.type].background
+      } psui-text-${this.colors[this.type].color}`
+    },
+  },
+}
+</script>
+
+<style scoped>
+.fit-content {
+  width: fit-content;
+}
+</style>

package/src/components/buttons/PsButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="psui-font-bold psui-align-middle psui-flex psui-rounded-md"
+    class="psui-font-bold psui-items-center psui-flex psui-rounded-md"
     :class="classes" 
     @click="onClick()"
   >
@@ -10,7 +10,11 @@
     >
     {{ icon }}
     </i>
-    <div class="psui-flex-grow psui-text-left">{{ label }}</div>
+    <span 
+      v-if="label" 
+      class="psui-flex-grow psui-text-left"
+      >{{ label }}
+    </span>
     <i
       v-if="iconRight"
       :class="['psui-ml-2', iconClasses]"
@@ -26,7 +30,6 @@ export default {
   props: {
     label: {
       type: String,
-      required: true
     },
     outline: {
       type: Boolean,
@@ -69,38 +72,58 @@ export default {
   },
   computed: {
     iconClasses() {
-      const size = this.sizes === 'small' ? 'psui-text-sm' : ''
+      const size = this.size === 'small' ? 'psui-text-small' : this.size === 'medium' ? 'psui-text-small' : 'psui-text-big'
       const color = this.iconColor.length > 0 ? `psui-text-${this.iconColor}` : ''
       return `psui-my-auto material-icons ${size} ${color}`
     },
     classes() {
-      let sizeCss = 'psui-px-4 psui-py-2'
-      if (this.size === 'medium') sizeCss = 'psui-px-4 psui-py-1'
-      if (this.size === 'small') sizeCss = 'psui-px-2 psui-py-psui-px psui-text-sm'
-      if (this.outline) return `${sizeCss} psui-bg-white psui-border ${this.disabled ? 'psui-border-gray-40 psui-text-gray-40' : 'psui-border-blue-60 psui-text-blue-60'}`
-      if (this.ghost) return `${sizeCss} ${this.disabled ? 'psui-bg-gray-20 psui-text-gray-40' : 'psui-bg-blue-20 psui-text-blue-60 active:psui-shadow-inner'}`
+      let sizeCss = ''
+
+      if (this.size === 'medium') sizeCss = 'medium'      
+      if (this.size === 'small') sizeCss = 'small'
+      if (this.size === 'big') sizeCss = 'big'
+      
+      if (this.outline) return `${sizeCss} psui-bg-white psui-border ${this.disabled ? 'psui-border-gray-40 psui-text-gray-40 psui-cursor-default' : 'psui-border-blue-60 psui-text-blue-60'}`
+      if (this.ghost) return `${sizeCss} ${this.disabled ? 'psui-bg-gray-20 psui-text-gray-40 psui-cursor-default' : 'psui-bg-blue-20 psui-text-blue-60 active:psui-shadow-inner'}`
       if (this.textOnly) {
         const hasTextColor = this.textColor.length > 0
         const color = hasTextColor ? this.textColor.split('hover:')[0] : ''
         const hover = hasTextColor ? this.textColor.split('hover:')[1] : ''
 
         let textCss = 'psui-text-blue-50 hover:psui-text-blue-60'
-        if (this.disabled) textCss = 'psui-text-gray-40'
+        if (this.disabled) textCss = 'psui-text-gray-40 psui-cursor-default'
         
         if (hasTextColor) textCss = `psui-text-${color}`
         if (hover) textCss += `hover:psui-text-${hover}`
 
         return `${sizeCss} ${textCss}`
       }
-      if (this.disabled) return `${sizeCss} psui-bg-gray-20 psui-text-gray-40`
-      return `${sizeCss} psui-bg-blue-60 hover:psui-bg-blue-50 psui-text-white active:psui-shadow-inner`
+      if (this.disabled) return `${sizeCss} psui-bg-gray-20 psui-text-gray-40 psui-cursor-default`
+      return `${sizeCss} psui-bg-blue-60 hover:psui-bg-blue-50 psui-text-white active:psui-shadow-inner psui-cursor-pointer`
     }  
   },
   methods: {
     onClick() {
       if (this.disabled) return false
-      this.$emit('click');
+      this.$emit('click')
     }
   }
 }
 </script>
+
+<style scoped>
+  .small {
+    padding: 4px 8px 4px 8px;
+    font-size: 14px;
+  }
+
+  .medium{
+    padding: 7px 16px 7px 16px;
+    font-size: 14px;
+  }
+
+  .big{
+    padding: 9.5px 16px 9.5px 16px;
+    font-size: 16px;
+  }
+</style>

package/src/components/chips/PsChips.vue

@@ -0,0 +1,154 @@
+<template>
+  <label
+    @click="onClick"
+    :for="title"
+    :class="getCssClass"
+    class="
+      psui-flex
+      psui-gap-2
+      psui-bg-gray-10
+      psui-text-gray-50
+      psui-px-2
+      psui-py-1
+      psui-rounded-md
+      psui-items-center
+    "
+  >
+    <input
+      @change="onChange"
+      v-if="type !== 'text'"
+      :type="type"
+      :id="title"
+      :checked="checked"
+    />
+    <i v-if="icon" class="material-icons">{{ icon }}</i>
+    {{ title }}
+    <button @click="onClose" v-if="rich" class="psui-flex psui-items-center">
+      <i class="material-icons">close</i>
+    </button>
+  </label>
+</template>
+
+<script>
+export const type = ["text", "radio", "checkbox", "button"]
+
+export default {
+  name: "PsChips",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      required: true,
+      validator: (type) => ["text", "radio", "checkbox", "button"].includes(type)
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    rich: {
+      type: Boolean,
+      default: false,
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+  },
+  emits: ["click", "change"],
+  data() {
+    return {
+      isChecked: false,
+    }
+  },
+  computed: {
+    getCssClass() {
+      let cssClass = ''
+      
+      if (this.checked === true ) {
+        cssClass = "psui-text-blue-50 psui-bg-blue-20"
+      }
+
+      return cssClass
+    },
+  },
+  methods: {
+    onClick() {
+      this.isChecked = !this.isChecked
+      this.$emit("click")
+    },
+    onChange(event) {
+
+      this.isChecked = event.target.checked
+
+      this.$emit('update:checked', event.target.checked)
+      this.$emit("change")
+    },
+    onClose() {
+      this.$emit("close")
+    },
+  },
+}
+</script>
+
+<style scoped>
+input[type="radio"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid #d6dde5;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 25%;
+  border: 1px solid #d6dde5;
+  cursor: pointer;
+}
+
+input[type="radio"]:hover,
+input[type="checkbox"]:hover {
+  border-color: #64b5ce;
+}
+
+input[type="radio"]:checked {
+  border-color: #64b5ce;
+  background: url("../../assets/images/radio-checked-button.svg") #ffffff
+    no-repeat center;
+}
+
+input[type="checkbox"]:checked {
+  border-color: #64b5ce;
+  background: url("../../assets/images/check-checkbox-button.svg") #64b5ce
+    no-repeat center;
+}
+
+label {
+  width: fit-content;
+  cursor: pointer;
+}
+
+label:hover {
+  color: #64b5ce;
+  background: #ffffff;
+}
+
+button {
+  outline: none;
+}
+</style>
+

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,31 +29,31 @@ export default {
     value: {
       required: true,
     },
-    inputValue: String,    
+    inputValue: String,
     label: {
       type: String,
-      default: ''
+      default: '',
     },
     checkboxClasses: {
       type: String,
-      default: 'psui-pl-8'
+      default: '',
     },
     labelClasses: {
       type: String,
-      default: ''
+      default: '',
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     size: {
-      default: 18
-    }
+      default: 18,
+    },
   },
   computed: {
     model: {
       get() {
-        return this.value;
+        return this.value
       },
       set(newValue) {
         this.$emit('input', newValue)
@@ -50,15 +61,17 @@ export default {
       },
     },
     classes() {
-      return `${this.disabled ? 'psui-border-gray-40': 'psui-border-gray-50'} ${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>