@policystudio/policy-studio-ui-vue 1.0.25 → 1.0.29

package/src/components/buttons/PsButton.vue

@@ -1,78 +1,74 @@
-<template>
-  <button
-      @click="onClick()" 
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave" 
-      class='psui-el-button' 
-      :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled}]" 
-   >
-    <i v-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
-    <span v-if="label">{{ label }}</span>
-  </button>
-</template>
-
-<script>
-export default {  
-  props: {
-    label: {
-      type: String,
-    },
-    layout: {
-      type: String,
-      default: 'solid',
-      validator: (value) => ['solid','outline','ghost','onlytext'].includes(value)
-    },
-    icon: {
-      type: String,
-    },
-    iconPosition:{
-      type: String,
-      default: 'left',
-      validator: (value) => ['left','right'].includes(value)
-    },
-    size: {
-      type: String,
-      default: 'big',
-      validator: (value) => ['small','medium','big','custom'].includes(value)
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    iconClass:{
-      type: String
-    }
-  },
-  data(){
-    return {
-      isHover: false,
-    }
-  },
-  computed: {
-    getComponentClass(){
-      if (this.size != 'custom') {
-        return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}`
-      } else {
-        return `layout-${this.layout} icon-${this.iconPosition}`
-      }
-    }
-  },
-  methods: {
-    onClick() {
-      if (this.disabled) return
-      this.$emit('click')
-    },
-    onMouseEnter(){
-      if(!this.disabled){
-        this.isHover = true
-      }
-    },
-    onMouseLeave(){
-      if(!this.disabled){
-        this.isHover = false
-      }
-    }
-  }
-}
-</script>
-
+<template>
+  <button
+      @click="onClick()" 
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave" 
+      class='psui-el-button' 
+      :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled}]" 
+   >
+    <i v-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
+    <span v-if="label">{{ label }}</span>
+  </button>
+</template>
+
+<script>
+export default {  
+  props: {
+    label: {
+      type: String,
+    },
+    layout: {
+      type: String,
+      default: 'solid',
+      validator: (value) => ['solid','outline','ghost','onlytext'].includes(value)
+    },
+    icon: {
+      type: String,
+    },
+    iconPosition:{
+      type: String,
+      default: 'left',
+      validator: (value) => ['left','right'].includes(value)
+    },
+    size: {
+      type: String,
+      default: 'big',
+      validator: (value) => ['small','medium','big'].includes(value)
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    iconClass:{
+      type: String
+    }
+  },
+  data(){
+    return {
+      isHover: false,
+    }
+  },
+  computed: {
+    getComponentClass(){
+        return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}` 
+    }
+  },
+  methods: {
+    onClick() {
+      if (this.disabled) return
+      this.$emit('click')
+    },
+    onMouseEnter(){
+      if(!this.disabled){
+        this.isHover = true
+      }
+    },
+    onMouseLeave(){
+      if(!this.disabled){
+        this.isHover = false
+      }
+    }
+  }
+}
+</script>
+

package/src/components/chips/PsChips.vue

@@ -1,58 +1,68 @@
 <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
-    "
+  <div 
+    class="psui-el-chips" 
+    :class="[getComponentClass, `layout-${layout}`, `type-${type}`]"
   >
     <input
       @change="onChange"
-      v-if="type !== 'text'"
+      v-if="type != 'button'"
       :type="type"
-      :id="title"
+      :id="label"
       :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>
+    <label
+      @click="onClick"
+      :for="label"
+      :class="getCssClass"
+    >
+      <i v-if="icon" class="psui-el-chips-icon psui-el-chips-icon-prepend">{{ icon }}</i>
+      {{ label }}
+      {{ layout }}
+      <button 
+        @click="onClose" 
+        v-if="layout === 'rich'" 
+        class="psui-el-chips-close"
+      >
+        <span class="psui-el-chips-icon">close</span>
+      </button>
+    </label>
+  </div>
 </template>
 
 <script>
-export const type = ["text", "radio", "checkbox", "button"]
+export const type = ["radio", "checkbox", "button"]
 
 export default {
   name: "PsChips",
   props: {
-    title: {
+    label: {
       type: String,
       default: "",
     },
     type: {
       type: String,
       required: true,
-      validator: (type) => ["text", "radio", "checkbox", "button"].includes(type)
+      default: 'button',
+      validator: (type) => ["radio", "checkbox", "button"].includes(type)
+    },
+    layout: {
+      type: String,
+      default: 'simple',
+      validator: (value) => ['simple', 'with-icon', 'rich'].includes(value)
     },
     icon: {
       type: String,
       default: "",
     },
-    rich: {
+    checked: {
       type: Boolean,
-      default: false,
+      default: false
     },
-    checked: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    active: {
       type: Boolean,
       default: false
     },
@@ -64,6 +74,13 @@ export default {
     }
   },
   computed: {
+    getComponentClass() {
+      if (this.disabled) {
+        return 'status-disabled'  
+      } else {
+        return 'status-resting'
+      }
+    },
     getCssClass() {
       let cssClass = ''
       
@@ -93,62 +110,4 @@ export default {
 }
 </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>
-
+<style> /* Please, use the file src/assets/scss/components/PsChips.scss */</style>

package/src/components/controls/PsCheckbox.vue

@@ -1,134 +1,58 @@
-<template>
-  <label
-    class="container psui-pl-6"
-    :class="[
-      { 'psui-text-gray-40': disabled },
-      { 'psui-text-gray-50': !disabled },
-      labelClasses,
-    ]"
-  >
-    {{ label }}
-    <input
-      type="checkbox"
-      v-model="model"
-      :disabled="disabled"
-      :value="inputValue"
-    />
-    <span
-      class="checkmark psui-border-2"
-      :class="classes"
-      :style="getSize"
-    ></span>
-  </label>
-</template>
-
-<script>
-export default {
-  name: 'PsCheckbox',
-  props: {
-    value: {
-      required: true,
-    },
-    inputValue: String,
-    label: {
-      type: String,
-      default: '',
-    },
-    checkboxClasses: {
-      type: String,
-      default: '',
-    },
-    labelClasses: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      default: 18,
-    },
-  },
-  computed: {
-    model: {
-      get() {
-        return this.value
-      },
-      set(newValue) {
-        this.$emit('input', newValue)
-        this.$emit('change', newValue)
-      },
-    },
-    classes() {
-      return `${
-        this.disabled ? 'psui-border-gray-40' : 'psui-border-gray-50'
-      } ${this.checkboxClasses}`
-    },
-    getSize() {
-      return {
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-      }
-    },
-  },
-}
-</script>
-
-<style scoped>
-.container {
-  display: block;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 18px;
-  width: 18px;
-  background-color: #fff;
-  border-radius: 2px;
-}
-
-.container input:checked ~ .checkmark {
-  background-color: #64b5ce;
-  border: none;
-}
-
-.checkmark:after {
-  content: '';
-  position: absolute;
-  display: none;
-}
-
-.container input:checked ~ .checkmark:after {
-  display: block;
-}
-
-.container .checkmark:after {
-  left: 35%;
-  top: 8%;
-  width: 35%;
-  height: 65%;
-  border: solid white;
-  border-radius: 1px;
-  border-width: 0 2px 2px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-</style>
+<template>
+  <div class='psui-el-checkbox' :class="[getComponentClass, {'disabled':disabled}]" >
+    <input 
+      :id="label" 
+      type="checkbox" 
+      :value="label"
+      @change="onChange" 
+      :checked="checked"
+      :disabled='disabled'      
+    />
+    <label :for="label" class="psui-el-checkmark"><span>{{ label }}</span></label>    
+  </div>
+</template>
+
+<script>
+//FIGMA CONTROLS & SELECTORS https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64852
+
+export default {
+  name: 'PsCheckbox',
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'big',
+      validator: (value)=> ['big', 'small'].includes(value)
+    },
+    checked:{
+      type: Boolean,
+    },
+    layout:{
+      type: String,
+      default: 'default',
+      validator: (value)=> ['default','mixed'].includes(value)
+    }
+  },
+  emits:['@update:checked', 'value'],
+  computed:{
+    getComponentClass(){
+      return `size-${this.size} layout-${this.layout}`
+    }  
+  },
+  methods:{
+    onChange(event){
+      if(!this.disabled){
+        this.$emit('value', event.target.value)
+        this.$emit('update:checked', event.target.checked)
+      }
+    }
+  },
+}
+</script>

package/src/components/controls/PsInlineSelector.vue

@@ -0,0 +1,135 @@
+<template>
+  <div 
+    class="psui-el-inline-selector"
+    @keydown.up="$emit('keydown-up', $event)"
+    @keydown.down="$emit('keydown-down', $event)"
+    @keydown.enter="$emit('keydown-enter', $event)"
+    @keydown.tab="$emit('keydown-tab',$event)"
+    @keydown.esc="$emit('keydown-esc',$event)"
+    @mouseleave="$emit('mouse-leave',$event)"
+  >
+
+    <div class='psui-el-inline-selector-input-wrapper'>
+      <span> {{ search ? search : placeholder }} </span>
+      <input
+        ref="input"
+        v-model="search"
+        :label="label"
+        :placeholder="placeholder"
+        @input="$emit('input', $event)"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+        autocomplete="chrome-off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+    </div>
+    <transition
+        enter-active-class="transition ease-out duration-100 transform"
+        enter-class="opacity-0 scale-95"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-100 transform"
+        leave-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-95"
+      >
+      <div 
+        v-if="search"
+        role="menu" 
+        aria-orientation="vertical"
+        class="psui-el-inline-selector-dropdown-wrapper"
+      >
+      <slot name='loader'></slot>
+        <div>
+          <div v-if="requestFetched && !jurisdictions.length">
+            <h3>Hmmmm</h3>
+            <p>Please check the spelling and try again</p>
+          </div>
+          <ul v-else>
+            <li
+              tabindex="0"
+              v-for="(jurisdiction, index) in jurisdictions"
+              :key="`dropdown-jurisdiction-${jurisdiction.id}`"
+              :id="`jurisdiction-list-item-${index}`"
+              @click="$emit('click', $event)"
+              @mouseover="('mouse-over', $event)"
+            >
+              <span >
+                <h3>{{jurisdiction.title}}</h3>
+                <h3 >{{jurisdiction.type}}</h3>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PsInlineSelector',
+  props: {
+    width: {
+      default: 244
+    },
+    focusOnMount: {
+      default: false
+    },
+    shouldScroll: {
+      default: false
+    },
+    inputClass: {
+      default: 'text-gray02'
+    },
+    label: {
+      type: String,
+      default: 'Type a City or County'
+    },
+    selectOnlyFirstClimateZone: {
+      type: Boolean,
+      default: false
+    },
+    jurisdictionSelected: {
+      type: [ Object, Boolean ]
+    },
+    search: {
+      type: String,
+      default: '',
+      required: true
+    },
+    jurisdictions: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    requestFetched: {
+      type: Boolean,
+    },
+    showDropDown:{
+      type: Boolean,
+      default: true,
+    },
+    currentSelected:{
+      type: Number,
+      default: 0,
+    },
+    isFocused:{
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed:{
+    placeholder(){
+      return this.jurisdictionsAsText && !this.isFocused ? this.jurisdictionsAsText : this.label
+    },
+    jurisdictionsAsText(){
+      return this.jurisdictionSelected?.title_type ?? false
+    }
+  },
+  mounted(){
+    if(this.focusOnMount) this.$refs.input.focus()
+  },
+}
+</script>
+