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

package/package.json

@@ -1,36 +1,49 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.18",
+  "version": "1.0.22",
   "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/addon-postcss": "^2.0.0",
+    "@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",
+    "postcss-import": "^14.0.2",
+    "postcss-nested": "^5.0.6",
+    "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/postcss.config.js

@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    'postcss-nested': {},
+    "postcss-import": {},
     tailwindcss: {},
     autoprefixer: {},
   },

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,8 @@
-@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');
+@import './components/PsInput.scss';
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
 *:focus {
     outline: none;
@@ -9,4 +10,4 @@
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+}

package/src/assets/scss/components/PsInput.scss

@@ -0,0 +1,89 @@
+@layer components{
+
+  .psui-el-input {
+    
+    input {
+      @apply psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-block
+    }
+
+    &-prepend {
+      @apply psui-absolute psui-inset-y-0 psui-left-0 psui-pl-2 psui-flex psui-items-center psui-pointer-events-none
+    }
+
+    &-append {
+      @apply psui-absolute psui-inset-y-0 psui-right-0 psui-pr-2 psui-flex psui-items-center
+    }
+
+    &-hint {
+      @apply psui-text-gray-50 psui-text-xsmall
+    }
+
+    &-wrapper {
+      @apply psui-relative;
+      &.hover input {
+        @apply psui-border-blue-50
+      }
+    }
+
+    label {
+      @apply psui-font-bold psui-text-gray-80
+    }
+
+    input {
+      @apply psui-bg-white psui-text-gray-60          
+    }
+
+    
+    /* Layout Default */
+    /* ----------------------------------------- */
+    
+      &.layout-default {
+        
+        input {
+          @apply psui-text-p;
+          padding: 11.5px 16px;
+        }          
+
+        &.status-active {
+          input {
+            @apply psui-border-blue-60
+          }
+        }
+        
+        &.status-error {
+          input {
+            @apply psui-border-red-20
+          }
+          &-hint  {
+            @apply psui-text-red-20
+          }
+        }
+
+        &.status-disabled {
+
+          input {
+            @apply psui-bg-gray-20 psui-border-gray-20 psui-text-gray-40
+          }
+
+          label {
+            @apply psui-text-gray-40
+          }
+
+        }
+      }
+    /* ----------------------------------------- Layout Default */
+    
+    
+    /* Layout Mini */
+    /* ----------------------------------------- */
+      &.layout-mini {
+        input {
+          @apply psui-text-small;
+          padding: 7px 8px;
+        }
+      }
+    /* ----------------------------------------- Layout Mini */
+    
+  }
+
+}

package/src/components/accordion/PsAccordion.vue

@@ -0,0 +1,40 @@
+<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;
+ }
+</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>
+      <i v-if="!display" class="material-icons">{{ iconClass.closed }}</i>
+      <i v-else :class="display ? 'selected' : ''" class="material-icons">{{
+        iconClass.open
+      }}</i>
+    </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,
+      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-top: 16px;
+  padding-bottom: 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/badges-and-tags/PsChartLegend.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="toView psui-flex psui-flex-row psui-p-8 psui-rounded">
+    <div class="container psui-p-2 psui-rounded">
+      <div class="psui-flex">
+        <div class="dot"></div>
+        <div class="text">{{ text }}</div>
+      </div>
+      <div class="container1">
+        <span v-if="this.value" :class="isValue">{{ value }}</span>
+        <span :class="isBar"></span>
+        <span :class="isPercentage">{{ percentage }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: 'Climate Zone 10',
+    },
+    value: {
+      type: Number,
+      // required: true,
+      default: null,
+    },
+    percentage: {
+      type: String,
+      // required: true,
+      default: '',
+    },
+  },
+  computed: {
+    isValue() {
+      if (this.value) {
+        return 'value'
+      } else {
+        return 'hide'
+      }
+    },
+    isPercentage() {
+      if (this.percentage) {
+        return 'percentage'
+      } else {
+        return 'hide'
+      }
+    },
+    isBar() {
+      if (this.value !== 0 && this.percentage !== '') {
+        return 'bar'
+      } else {
+        return 'hide'
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.toView {
+  /* display: flex; */
+  /* flex-direction: row; */
+  /* padding: 32px; */
+
+  width: 351px;
+  height: 119px;
+
+  background: #f3ebfa;
+  border: 1.5px dashed #7b61ff;
+  /* border-radius: 5px; */
+}
+
+.container {
+  /* padding: 8px; */
+
+  width: fit-content;
+  height: fit-content;
+
+  background: #ffffff;
+  /* border-radius: 4px; */
+
+  /* margin: 0px 32px; */
+}
+
+.hide {
+  display: none;
+}
+
+.dot {
+  width: 14px;
+  height: 14px;
+  background: #43cec2;
+  border-radius: 8px;
+  margin: 0px 6px 0px 0px;
+}
+
+.text {
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 120%;
+
+  color: #798490;
+}
+
+.container1 {
+  margin: 0px 0px 0px 20px;
+}
+
+.value {
+  color: #28323b;
+}
+
+.percentage {
+  color: #798490;
+}
+
+.bar {
+  background-color: #d6dde5;
+  height: 14px;
+
+  border-radius: 2px;
+
+  padding: 0px 1px;
+  margin-right: 3px;
+}
+</style>

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

@@ -0,0 +1,18 @@
+<template>
+  <button
+    class="psui-flex psui-p-3 psui-bg-gray-10 psui-text-gray-50 hover:psui-text-blue-60 hover:psui-bg-blue-20 psui-transition-all psui-duration-300 psui-ease-out psui-shadow-lg psui-rounded"
+  >
+    <i v-if="icon" class="material-icons psui-text-base"> {{ icon }} </i>
+    <p class="psui-text-sm">10</p>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="container">
+      <div
+        class="loading-bar"
+        :class="{
+          'psui-bg-blue-20': value >= breakEven,
+          'psui-bg-red-10': value < breakEven,
+        }"
+      >
+        <span class="breakEven" :style="breakEvenPosition"> </span>
+
+        <input
+          type="number"
+          min="0"
+          max="100"
+          class="percentage"
+          :style="{ width: `${value}px` }"
+          :class="{
+            'psui-bg-blue-60': value >= breakEven,
+            'psui-bg-red-20': value < breakEven,
+          }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    breakEven: {
+      type: Number,
+      required: true,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      errors: [],
+    }
+  },
+
+  computed: {
+    valueBar() {
+      if (this.value > 100) return 100
+      else if (this.value < 0) return 0
+      else return this.value
+    },
+
+    breakEvenPosition() {
+      return `left: ${this.breakEven}px`
+    },
+    getIsBreakEven() {
+      if (this.breakEven < 0) return 0
+      else if (this.breakEven > 100) return 100
+      else return this.breakEven
+      // else return true;
+      // return this.value > this.breakEven ? true : false;
+    },
+  },
+}
+</script>
+
+<style scoped>
+.container {
+  overflow: visible;
+}
+
+.loading-bar {
+  position: relative;
+  width: 100px;
+  height: 8px;
+  border-radius: 15px;
+}
+
+.loading-bar .percentage {
+  position: absolute;
+  display: block;
+  max-width: 100px;
+  height: 100%;
+  border-radius: 15px;
+  overflow: visible;
+  background-size: 30px 30px;
+  animation: animate-stripes 3s linear infinite;
+}
+
+.breakEven {
+  position: absolute;
+  background-color: #d6dde5;
+  width: 2px;
+  height: 14px;
+  /* max-width: 100px; */
+  border-radius: 2px;
+  top: -3px;
+  z-index: 1;
+  /* left: 2px; */
+  /* right: -2px; */
+}
+
+@keyframes animate-stripes {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 60px 0;
+  }
+}
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <div class="example">
+    <div class="dot"></div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+.example {
+  position: static;
+  /* margin: 0px 32px; */
+  /* width: 275px;
+  height: 229px; */
+  /* left: 0px;
+  top: 0px; */
+  /* border: 1.5px dashed #9b51e0; */
+  /* background: #f3f6f9; */
+  box-sizing: border-box;
+}
+.dot {
+  background: #5db883;
+  /* border: solid 1px #2bb24c; */
+  border-radius: 50%;
+  /* box-shadow: 0px 0 2px #2bb24c; */
+  width: 8px;
+  height: 8px;
+  /* left: 6px;
+  top: 6px; */
+  margin: 100px auto;
+  position: relative;
+}
+
+.dot::before,
+.dot::after {
+  background: #def8e8;
+  border: solid 0px #2bb24c;
+  border-radius: 50%;
+  content: '';
+  width: 36px;
+  height: 36px;
+  left: -8px;
+  top: -8px;
+  position: absolute;
+  transform-origin: center center;
+  transform: scale(1) translate(-1px, -1px);
+}
+.dot::before {
+  animation: ripple 1s infinite;
+}
+.dot::after {
+  animation: ripple 1s infinite;
+  /* animation-delay: 0.4s; */
+}
+
+@keyframes ripple {
+  0% {
+    /* transform: scale(1) translate(-1px, -1px);
+    opacity: 0.75; */
+    left: 5px;
+    top: 5px;
+    opacity: 0.95;
+    width: 0;
+    height: 0;
+  }
+  100% {
+    /* transform: scale(2) translate(-1px, -1px);
+    opacity: 0; */
+    left: -13px;
+    top: -13px;
+    opacity: 0;
+    width: 36px;
+    height: 36px;
+  }
+}
+</style>