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

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"

package/src/components/controls/PsSwitch.vue

@@ -1,97 +1,45 @@
 <template>
-  <div class="switch-button-control">
-    <div
-      :class="{ enabled: active, 'switch-button': !small, 'switch-button-small': small }"
-      @click="toggle"
-      :style="{'--color': color}"
-    >
-      <div class="button"></div>
-    </div>
-    <div class="switch-button-label">
-      <slot></slot>
-    </div>
+  <div class='psui-el-switch' :class="getComponentClass">
+      <input type="checkbox" :id='label' @change="onChange">
+      <transition>
+        <label :for="label" class='psui-el-switch-button' :class="getToggleClass" />
+      </transition>
   </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: 'PsSwitch',
   props: {
-    small: Boolean,
-    active: Boolean,
-    color: {
+    label:{
+      type: String,
+    },
+    value:{
+      type: Boolean,
+      required: true,
+    },
+    size:{
       type: String,
-      required: false,
-      default: '#5DB883'
+      default: 'big',
+      validator: (value)=> ['small', 'big'].includes(value)
     }
   },
-  model: {
-    prop: "active",
-    event: "toggle"
+  computed:{
+    getToggleClass(){
+      return `toggle-${this.value.toString()}`
+    },
+    getComponentClass(){
+      return `size-${this.size}`
+    }
   },
-  methods: {
-    toggle: function() {
-      this.$emit('toggle', !this.active)
+  methods:{
+    onChange(event){
+      this.value = event.target.checked
+      this.$emit('update:value', event.target.value)
     }
   }
-}
+} 
 </script>
 
-<style scoped>
-.switch-button-control {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.switch-button-control .switch-button {
-  height: 24px;
-  width: calc(24px * 2);
-  background-color: #A2ACB7;
-  border: 2px solid #A2ACB7;
-  border-radius: 24px;
-  transition: all 0.3s ease-in-out;
-  cursor: pointer;
-}
-.switch-button-control .switch-button-small {
-  height: 16px;
-  width: calc(16px * 2);
-  background-color: #A2ACB7;
-  border: 2px solid #A2ACB7;
-  border-radius: 16px;
-  transition: all 0.3s ease-in-out;
-  cursor: pointer;
-}
-.switch-button-control .switch-button .button {
-  height: calc(24px - (2 * 2px));
-  width: calc(24px - (2 * 2px));
-  border-radius: calc(24px - (2 * 2px));
-  background:#F3F6F9;
-  transition: all 0.3s ease-in-out;
-}
-.switch-button-control .switch-button-small .button {
-  height: calc(16px - (2 * 2px));
-  width: calc(16px - (2 * 2px));
-  border-radius: calc(16px - (2 * 2px));
-  background:#F3F6F9;
-  transition: all 0.3s ease-in-out;
-}
-.switch-button-control .switch-button.enabled {
-  background-color: var(--color);
-  border: 2px solid var(--color);
-}
-.switch-button-control .switch-button-small.enabled {
-  background-color: var(--color);
-  border: 2px solid var(--color);
-}
-.switch-button-control .switch-button.enabled .button {
-  background: white;
-  transform: translateX(calc(calc(24px - (2 * 2px)) + (2 *2px)));
-}
-.switch-button-control .switch-button-small.enabled .button {
-  background: white;
-  transform: translateX(calc(calc(16px - (2 * 2px)) + (2 *2px)));
-}
-.switch-button-control .switch-button-label {
-  margin-left: 10px;
-}
-</style>