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

package/package.json

@@ -1,36 +1,46 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.16",
+  "version": "1.0.20",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
   "url": "https://bitbucket.org/policy-studio/policy-studio-ui-vue",
-  "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "build:tailwind": "postcss src/assets/scss/base.scss -o src/assets/scss/tailwind.css",
-    "publish": "npm run build:tailwind && npm publish"
-  },
+  "license": "MIT",
   "keywords": [
     "vue",
     "ui"
   ],
-  "license": "MIT",
+  "scripts": {
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "build-tailwind": "postcss src/assets/scss/base.scss -o dist/css/psui_styles.css",
+    "publish": "npm run lint && npm run build-tailwind && npm publish"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11"
+  },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/vue": "^6.3.12",
-    "autoprefixer": "^10.4.0",
+    "@babel/core": "^7.16.7",
+    "@storybook/addon-actions": "^6.4.13",
+    "@storybook/addon-essentials": "^6.4.13",
+    "@storybook/addon-links": "^6.4.13",
+    "@storybook/vue": "^6.4.13",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.3",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^6.2.2",
     "postcss": "^8.3.11",
     "postcss-cli": "^9.0.2",
+    "prettier": "^2.2.1",
     "tailwindcss": "^1.9.6",
-    "vue": "^2.6.14",
     "vue-loader": "^15.9.8",
-    "vue-router": "^3.5.3",
-    "vue-template-compiler": "^2.6.14"
-  },
-  "dependencies": {}
+    "vue-template-compiler": "^2.6.11"
+  }
 }

package/src/assets/images/check-checkbox-button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" width="16px" fill="#ffffff"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>

package/src/assets/images/radio-checked-button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#64b5ce"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><circle cx="12" cy="12" r="5"/></svg>

package/src/assets/scss/base.scss

@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round');
 
 *:focus {
     outline: none;

package/src/components/accordion/PsAccordion.vue

@@ -0,0 +1,44 @@
+<template>
+  <div :class="classes" class='accordion' >
+      <slot></slot>
+  </div>
+</template>
+
+<script>
+export const sizes = ['big', 'medium']
+
+export default {
+  name:"PsAccordion",
+  props: {
+    size:{
+      type: String,
+      default: 'medium',
+      required: true
+    }
+  },
+  computed:{
+    classes(){
+      if( this.size === 'big') return 'big'
+      return 'medium'
+    }
+  }
+
+}
+</script>
+<style scoped>
+ .medium {
+   width: 390px;
+ }
+
+ .big {
+   width: 580px;
+ }
+
+ .accordion {
+   display: flex;
+   flex-direction: column;
+   border-right:1px solid #e6ecf2;
+   border-left:1px solid #e6ecf2;
+   border-top:1px solid #e6ecf2;
+ }
+</style>

package/src/components/accordion/PsAccordionItem.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="container">
+    <div
+      @click="toggleTitle"
+      :class="cssClass"
+      class="
+        psui-flex psui-cursor-pointer psui-transition-all psui-justify-between
+      "
+    >
+      <div
+        v-if="title"
+        :class="display ? 'selected' : ''"
+        class="psui-font-bold psui-gray04"
+      >
+        {{ title }}
+      </div>
+      <span v-if="!display" class="material-icons">{{ iconClass.closed }}</span>
+      <span v-else :class="display ? 'selected' : ''" class="material-icons">{{
+        iconClass.open
+      }}</span>
+    </div>
+    <div v-if="display" class="psui-transition-all psui-duration-300">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export const iconTypes = ["mathsign", "chevron"]
+export const fontCss = ["medium", "big"]
+
+export default {
+  name: "PsAccordionItem",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    iconType: {
+      type: String,
+      required: true,
+      default: "chevron",
+    },
+    fontCss: {
+      type: String,
+      default: "medium",
+    },
+  },
+  data() {
+    return {
+      display: false,
+    }
+  },
+  computed: {
+    iconClass() {
+      if (this.iconType === "chevron") {
+        return { closed: "expand_more", open: "expand_less" }
+      } else if (this.iconType === "mathsign") {
+        return { closed: "add", open: "remove" }
+      }
+      return ''
+    },
+    cssClass() {
+      if (this.fontCss === "big") return "big"
+      return "medium"
+    },
+  },
+  methods: {
+    toggleTitle() {
+      this.display = !this.display
+    },
+  },
+}
+</script>
+
+<style scoped>
+.container {
+  border-bottom: 1px solid #e6ecf2;
+  padding: 16px;
+}
+
+span {
+  font-weight: 700;
+  color: #e6ecf2;
+}
+
+.selected {
+  color: #318fac;
+  transition: color 300ms;
+}
+
+.big {
+  font-size: 18px;
+  line-height: 130%;
+}
+
+.medium {
+  font-size: 16px;
+  line-height: 130%;
+}
+</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,164 @@
+<template>
+  <label
+    @click="onClick"
+    :for="title"
+    :class="cssClass"
+    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,
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    rich: {
+      type: Boolean,
+      default: false,
+    },
+    checked: {
+      type: Boolean,
+    },
+  },
+  emits: ["click", "change"],
+  data() {
+    return {
+      isChecked: false,
+      value: null,
+    }
+  },
+  computed: {
+    cssClass() {
+      let cssClass = ''
+      
+      if (this.isChecked === true && this.type === "radio") {
+        cssClass = "psui-text-blue-50 psui-bg-blue-20"
+      }
+
+      if (this.isChecked === true && this.type === "checkbox") {
+        cssClass = "psui-text-blue-50 psui-bg-blue-20"
+      }
+
+      if (this.isChecked === true) {
+        cssClass = "psui-text-blue-50 psui-bg-blue-20"
+      }
+
+      return cssClass
+    },
+  },
+  methods: {
+    onClick() {
+      if (this.disabled) return false
+
+      if (this.type !== "checkbox" || this.type !== "radio") {
+        this.isChecked = !this.isChecked
+      }
+
+      this.$emit("click")
+    },
+    onChange(event) {
+      this.isChecked = event.target.checked
+      this.checked = event.target.checked
+      this.$emit("change", event.target.checked)
+    },
+    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

@@ -25,7 +25,7 @@ export default {
     },
     checkboxClasses: {
       type: String,
-      default: 'psui-pl-8'
+      default: ''
     },
     labelClasses: {
       type: String,
@@ -42,7 +42,7 @@ export default {
   computed: {
     model: {
       get() {
-        return this.value;
+        return this.value
       },
       set(newValue) {
         this.$emit('input', newValue)
@@ -50,7 +50,7 @@ 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 {

package/src/components/controls/PsDraggable.vue

@@ -1,10 +1,35 @@
 <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>
+      </div>
+  </div>
 </template>
 
 <script>
 export default {
-
+    name: 'PsDraggable',
+    props:{
+        data: {
+            type: Array,
+            required: true,
+        }
+    }
 }
 </script>