@policystudio/policy-studio-ui-vue 1.0.31 → 1.0.34

package/.eslintrc.js

@@ -15,41 +15,42 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'semi': ['warn', 'never'],
-    "vue/order-in-components": ["warn", {
-      "order": [
-        "el",
-        "name",
-        "key",
-        "parent",
-        ["components", "directives", "filters"],
-        ["props", "propsData"],
-        "functional",
-        ["delimiters", "comments"],
-        "extends",
-        "mixins",
-        ["provide", "inject"],
-        "ROUTER_GUARDS",
-        "layout",
-        "middleware",
-        "validate",
-        "scrollToTop",
-        "transition",
-        "loading",
-        "inheritAttrs",
-        "model",
-        "emits",
-        "setup",
-        "asyncData",
-        "data",
-        "fetch",
-        "head",
-        "computed",
-        "watch",
-        "watchQuery",
-        "LIFECYCLE_HOOKS",
-        "methods",
-        ["template", "render"],
-        "renderError"
+    'quotes': [2, 'single'],
+    'vue/order-in-components': ['warn', {
+      'order': [
+        'el',
+        'name',
+        'key',
+        'parent',
+        ['components', 'directives', 'filters'],
+        ['props', 'propsData'],
+        'functional',
+        ['delimiters', 'comments'],
+        'extends',
+        'mixins',
+        ['provide', 'inject'],
+        'ROUTER_GUARDS',
+        'layout',
+        'middleware',
+        'validate',
+        'scrollToTop',
+        'transition',
+        'loading',
+        'inheritAttrs',
+        'model',
+        'emits',
+        'setup',
+        'asyncData',
+        'data',
+        'fetch',
+        'head',
+        'computed',
+        'watch',
+        'watchQuery',
+        'LIFECYCLE_HOOKS',
+        'methods',
+        ['template', 'render'],
+        'renderError'
       ]
     }]
   },

package/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+  presets: ['@vue/cli-plugin-babel/preset'],
 }

package/dist/css/psui_styles.css

@@ -17618,7 +17618,6 @@ html {
       transition-duration: 300ms;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-delay: 0.4s;
-      min-width: 256px;
     }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content {
@@ -18189,6 +18188,8 @@ html {
 .psui-el-dropdown-menu-list {
   width: 100%;
   font-weight: 700;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
 }
 
 .psui-el-dropdown-menu-list li {
@@ -18209,7 +18210,10 @@ html {
 .psui-el-dropdown-menu-list li:hover {
       --text-opacity: 1;
       color: #318FAC;
-      color: rgba(49, 143, 172, var(--text-opacity))
+      color: rgba(49, 143, 172, var(--text-opacity));
+      --bg-opacity: 1;
+      background-color: #ECF7FB;
+      background-color: rgba(236, 247, 251, var(--bg-opacity));
     }
 
 .psui-el-dropdown-menu-list li span {
@@ -18244,8 +18248,6 @@ html {
 .psui-el-dropdown-menu-dialog-wrapper {
     display: none;
     transform-origin: top right;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
     background-color: #ffffff;
     position: fixed;
     width: auto;
@@ -18895,6 +18897,19 @@ html {
       border-bottom: 0;
     }
 
+.psui-el-table-rich thead th {
+        padding: 15px 16px;
+      }
+
+.psui-el-table-rich tbody th,
+        .psui-el-table-rich tbody td,
+        .psui-el-table-rich tbody tr {
+        padding: 7px 16px;
+        --text-opacity: 1;
+        color: #28323B;
+        color: rgba(40, 50, 59, var(--text-opacity));
+      }
+
 .psui-el-highlight-ripple-icon {
   position: static;
   box-sizing: border-box;
@@ -19438,7 +19453,9 @@ html {
       --text-opacity: 1;
       color: #798490;
       color: rgba(121, 132, 144, var(--text-opacity));
-      background-color: #ffffff;
+      --bg-opacity: 1;
+      background-color: #F3F6F9;
+      background-color: rgba(243, 246, 249, var(--bg-opacity));
       transition-property: all;
       cursor: pointer;
       border-radius: 0.25rem;
@@ -19462,6 +19479,9 @@ html {
         --text-opacity: 1;
         color: #318FAC;
         color: rgba(49, 143, 172, var(--text-opacity));
+        --bg-opacity: 1;
+        background-color: #F3F6F9;
+        background-color: rgba(243, 246, 249, var(--bg-opacity));
       }
 
 .psui-el-chips.type-checkbox label:hover:before, .psui-el-chips.type-radio label:hover:before {
@@ -19493,9 +19513,6 @@ html {
       --text-opacity: 1;
       color: #515E6A;
       color: rgba(81, 94, 106, var(--text-opacity));
-      --bg-opacity: 1;
-      background-color: #F3F6F9;
-      background-color: rgba(243, 246, 249, var(--bg-opacity));
       transition-property: all;
       cursor: pointer;
       border-radius: 0.25rem;
@@ -19505,6 +19522,7 @@ html {
       padding-right: 0.75rem;
       font-size: 14px;
       line-height: 130%;
+      background-color: #F6F7F8;
     }
 
 .psui-el-chips.type-button label:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.31",
+  "version": "1.0.34",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
@@ -17,6 +17,7 @@
     "build-temp-tailwind": "postcss src/assets/scss/base.scss -o temp/css/psui_styles.css",
     "publish": "npm run lint && npm run build-tailwind && build-storybook && npm publish",
     "serve": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-tailwind\"",
+    "serve-prod": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-prod-tailwind\"",
     "watch-storybook": "start-storybook -p 6006",
     "watch-prod-tailwind": "watch 'npm run build-tailwind' ./src/assets",
     "watch-tailwind": "watch 'npm run build-temp-tailwind' ./src/assets",

package/postcss.config.js

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

package/src/assets/images/multifamily-units.svg

@@ -0,0 +1,10 @@
+<svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M18.2274 34.9462V30.9159M18.2274 34.9462H3.12439V30.9159H4.56681M18.2274 34.9462H21.1123H23.8274M34.3911 10.2129V34.9462H31.3789H28.6214M34.3911 10.2129L35.7911 10.8068V7.74167L18.2274 1.61667V4.27349M34.3911 10.2129L18.2274 4.27349M16.2759 11.6129L4.56681 16.7498M18.2274 7.74167L3.12439 14.6833V17.3826L4.56681 16.7498M18.2274 7.74167V30.9159M18.2274 7.74167V4.27349M8.34257 30.9159V25.7826H14.4941V30.9159M8.34257 30.9159H14.4941M8.34257 30.9159H4.56681M14.4941 30.9159H18.2274M4.56681 30.9159V16.7498M23.8274 34.9462V27.3947H28.6214V34.9462M23.8274 34.9462H28.6214M8.34257 18.825L12.5001 17.0432H14.4941V22.4735H8.34257V18.825ZM21.1123 18.4432H24.5062V23.7886H21.1123V18.4432ZM27.985 18.4432H31.3789V23.7886H27.985V18.4432ZM21.1123 15.1341H24.5062V9.70379L21.1123 8.34621V15.1341ZM27.985 15.1341H31.3789V12.1644L27.985 10.8068V15.1341Z" stroke="#A9AEB0" stroke-width="1.4" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="37.3333" height="37.3333" fill="white" transform="translate(0.791016 0.333344)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/scss/components/PsChips.scss

@@ -28,7 +28,7 @@
       }
 
       label {
-        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-bg-white psui-transition-all psui-cursor-pointer psui-rounded;
+        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-bg-gray-10 psui-transition-all psui-cursor-pointer psui-rounded;
         padding: 4px 8px 4px 6px;
   
         &:before {
@@ -40,7 +40,7 @@
         }
 
         &:hover {
-          @apply psui-text-blue-60;
+          @apply psui-text-blue-60 psui-bg-gray-10;
           &:before {
             @apply psui-text-blue-50;
           }
@@ -83,8 +83,8 @@
 
     &.type-button {
       label {
-        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-bg-gray-10 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
-
+        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
+        background-color: #F6F7F8;
         &:hover {
           @apply psui-text-blue-60 psui-bg-white;
         }

package/src/assets/scss/components/PsDataTable.scss

@@ -45,6 +45,23 @@
         border-bottom: 0; 
       }
     }
+
+    &-rich {
+      thead {
+        th {
+          padding: 15px 16px;
+        }
+      }
+
+      tbody {
+        th,
+        td,
+        tr {
+          padding: 7px 16px;
+          @apply .psui-text-gray-80;
+        }
+      }
+    }
   }
 
 }

package/src/assets/scss/components/PsDropdown.scss

@@ -1,7 +1,7 @@
 @layer components {
     .psui-el-dropdown-menu {
         @apply psui-relative psui-inline-block psui-text-left;
-
+        
         button {
             @apply psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-leading-none;
             background-color: transparent;
@@ -9,6 +9,7 @@
             padding-bottom: 2.5px;
             min-height: 27px;
             font-size: 0.875rem;
+            
 
             &:focus {
                 outline: none;
@@ -17,10 +18,11 @@
         }
 
         &-dialog-wrapper {
-            @apply psui-hidden psui-origin-top-right psui-py-4 psui-bg-white psui-fixed psui-w-auto psui-rounded-md psui-z-50 psui-opacity-0 psui-shadow-elevation-20 psui-transition-all psui-duration-100 psui-ease-in;
-
+            @apply psui-hidden psui-origin-top-right psui-bg-white psui-fixed psui-w-auto psui-rounded-md psui-z-50 psui-opacity-0 psui-shadow-elevation-20 psui-transition-all psui-duration-100 psui-ease-in;
+            
             &-dialog {
-                @apply w-full;
+                @apply psui-w-full;
+
             }
         }
     }

package/src/assets/scss/components/PsDropdownList.scss

@@ -1,6 +1,6 @@
 @layer components {
     .psui-el-dropdown-menu-list {
-        @apply psui-w-full psui-font-bold;
+        @apply psui-w-full psui-font-bold psui-my-3;
 
         li {
             @apply psui-w-full psui-text-gray-60 psui-text-small psui-list-none psui-flex psui-flex-col psui-cursor-pointer;
@@ -8,7 +8,7 @@
             font-weight: 700;
 
             &:hover {
-                @apply psui-text-blue-60
+                @apply psui-text-blue-60 psui-bg-blue-10;
             }
 
             span {

package/src/assets/scss/components/PsTooltip.scss

@@ -7,7 +7,6 @@
             .psui-el-tooltip-dialog {
                 @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out;
                 transition-delay: 0.4s;
-                min-width: 256px;
 
                 .psui-el-tooltip-content {
                     @apply psui-flex psui-flex-col psui-bg-gray-50 psui-text-white;

package/src/components/accordion/PsAccordionItem.vue

@@ -21,7 +21,7 @@
 <script>
 import { getParentVueComponentByName } from '../../util/GeneralFunctions'
 export default {
-  name: "PsAccordionItem",
+  name: 'PsAccordionItem',
   props: {
     /**
      * It sets the title of the accordion item.

package/src/components/chips/PsChips.vue

@@ -31,17 +31,17 @@
 </template>
 
 <script>
-export const type = ["radio", "checkbox", "button"]
+export const type = ['radio', 'checkbox', 'button']
 
 export default {
-  name: "PsChips",
+  name: 'PsChips',
   props: {
     /**
      * It sets the label of the chips button.
      */
     label: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * It sets the type of the chips button. eg: radio, checkbox, button.
@@ -50,7 +50,7 @@ export default {
       type: String,
       required: true,
       default: 'button',
-      validator: (type) => ["radio", "checkbox", "button"].includes(type)
+      validator: (type) => ['radio', 'checkbox', 'button'].includes(type)
     },
     /**
      * It sets the layout of the chipsbutton. eg: simple, with-icon, rich.
@@ -65,7 +65,7 @@ export default {
     */
     icon: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * It sets if the button was checked or not checked.
@@ -89,7 +89,7 @@ export default {
       default: false
     },
   },
-  emits: ["click", "change"],
+  emits: ['click', 'change'],
   data() {
     return {
       isChecked: false,
@@ -107,7 +107,7 @@ export default {
       let cssClass = ''
       
       if (this.checked === true ) {
-        cssClass = "psui-text-blue-50 psui-bg-blue-20"
+        cssClass = 'psui-text-blue-50 psui-bg-blue-20'
       }
 
       return cssClass
@@ -116,15 +116,15 @@ export default {
   methods: {
     onClick() {
       this.isChecked = !this.isChecked
-      this.$emit("click")
+      this.$emit('click')
     },
     onChange(event) {
       this.isChecked = event.target.checked
       this.$emit('update:checked', event.target.checked)
-      this.$emit("change", event)
+      this.$emit('change', event)
     },
     onClose() {
-      this.$emit("close")
+      this.$emit('close')
     },
   },
 }

package/src/components/controls/PsSwitch.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class='psui-el-switch' :class="getComponentClass">
-      <input type="checkbox" :id='label' v-model="getValue">
-      <label :for="label" class='psui-el-switch-button' :class="getToggleClass" />
+  <div class='psui-el-switch' :class="getComponentClass" @click="change()">
+      <input type="checkbox" :checked="value" />
+      <label class='psui-el-switch-button' :class="[getToggleClass]" />
   </div>
 </template>
 
@@ -34,21 +34,18 @@ export default {
   },
   computed:{
     getToggleClass(){
-      return `toggle-${this.value.toString()}`
+      return this.value ? 'toggle-true' : 'toggle-false'
     },
     getComponentClass(){
       return `size-${this.size}`
-    },
-    getValue:{
-      get(){
-        return this.value
-      },
-      set(value){
-        this.$emit('input', value)
-        this.$emit('change', value)
-      }
     }
   },
+  methods: {
+    change() {
+      this.$emit('update:value', !this.value)
+      this.$emit('change', !this.value)
+    }
+  }
 } 
 </script>
 

package/src/components/datatable/PsDataTable.vue

@@ -57,7 +57,9 @@ export default {
      */
     data: {
       type: Array,
-      required: true
+      default() {
+        return []
+      }
     },
     /**
     * It sets the values which will be use to render the footer.

package/src/components/datatable/PsDataTableItem.vue

@@ -36,7 +36,7 @@
 
 <script>
 export default {
-  name: "PsDataTableItem",
+  name: 'PsDataTableItem',
   props: {
     data: {
       type: Array,