@policystudio/policy-studio-ui-vue 1.0.24 → 1.0.28

package/src/components/buttons/PsButton.vue

@@ -1,77 +1,74 @@
-<template>
-  <button
-      @click="onClick()" 
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave" 
-      class='psui-el-button' 
-      :class="[getComponentClass, {'hover': isHover}, {'active': isActive}, {'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,
-      required: true,
-      default: 'solid',
-      validator: (value) => ['solid','outline','ghost','onlytext'].includes(value)
-    },
-    icon: {
-      type: String,
-    },
-    iconPosition:{
-      type: String,
-      default: 'right',
-      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,
-      isActive: false,
-    }
-  },
-  computed: {
-    getComponentClass(){
-        return `layout-${this.layout} ${this.size} ${this.iconPosition}`
-    }
-  },
-  methods: {
-    onClick() {
-      if (this.disabled) return
-      this.isActive = true, 
-      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,15 @@
+<template>
+  <div class="psui-el-inline-selector">
+      <input type="text">
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

package/src/components/controls/PsRadioButton.vue

@@ -1,110 +1,55 @@
 <template>
-  <label class="wrapper flex items-center">
-    {{ label }}
-    <input
-      class="checkbox"
-      type="radio"
-      :checked="isChecked"
-      :value="value"
-      @change="$emit('change', $event.target.value)"
+  <div class='psui-el-radio' :class="[getComponentClass, {'disabled':disabled}]" >
+    <input 
+      :id="label" 
+      type="radio" 
+      :value="label"
+      @change="onChange" 
+      :checked="checked"
+      :disabled='disabled'      
     />
-    <span class="checkmark" :class="{ 'checkmark-small': small }"></span>
-  </label>
+    <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: 'PsRadioButton',
   props: {
     label: {
       type: String,
       default: '',
-      required: true,
     },
-    modelValue: {
-      default: '',
+    disabled: {
+      type: Boolean,
+      default: false
     },
-    value: {
+    size: {
       type: String,
-      default: undefined,
+      default: 'big',
+      validator: (value) => ['big', 'small'].includes(value)
     },
-    small: {
+    checked:{
       type: Boolean,
-      default: false,
-    },
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'change',
+    }
   },
+  emits:['@update:checked', 'value'],
   computed: {
-    isChecked() {
-      return this.modelValue == this.value
-    },
+    getComponentClass(){
+      return `size-${this.size}`
+    }
   },
+  methods:{
+    onChange(event){
+      if(!this.disabled){
+        this.$emit('value', event.target.value)
+        this.$emit('update:checked', event.target.checked)
+      }
+    }
+  }
 }
 </script>
 
-<style scoped>
-.wrapper {
-  display: block;
-  position: relative;
-  padding-left: 32px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.wrapper input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-.checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 24px;
-  width: 24px;
-  border-radius: 50%;
-  background-color: white;
-  border: 2px solid #a2acb7;
-}
-.checkmark-small {
-  top: 3px;
-  height: 18px !important;
-  width: 18px !important;
-}
-.wrapper input:checked ~ .checkmark {
-  background-color: white;
-  border-color: #64b5ce;
-  border-width: 2px;
-}
-.checkmark:after {
-  content: '';
-  position: absolute;
-  display: none;
-}
-.wrapper input:checked ~ .checkmark:after {
-  display: block;
-}
-.wrapper .checkmark:after {
-  top: 4px;
-  left: 4px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #64b5ce;
-}
-.wrapper .checkmark-small:after {
-  top: 3px;
-  left: 3px;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #64b5ce;
-}
-</style>

package/src/components/controls/PsSlider.vue

@@ -1,10 +1,9 @@
 <template>
-  <div>
-    <div v-if="label" class="psui-mb-2">
-      <div class="psui-float-right">{{ value }}</div>
-      <div>{{ label }}</div> 
+  <div class="psui-el-slider">
+    <div v-if="label" class="psui-el-slider-label">
+      <span>{{label}}</span> 
     </div>
-    <div class="" :class="{'psui-flex psui-items-center': !label && !bubble }">
+    <div :class="{'psui-flex psui-items-center': !label && !bubble }">
       <div
         v-if="bubble"
         class="psui-relative psui-bg-gray-40 psui-text-gray-20 psui-rounded-md psui-text-white psui-font-bold psui-w-10 psui-text-center range-value"