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

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>

package/src/components/controls/PsToggle.vue

@@ -1,39 +1,45 @@
-<template>
-    <div class="psui-rounded-sm psui-inline-flex psui-bg-gray-10 wrapper psui-gap-x-px" role="group">
-      <button 
-        v-for="(item, index) in items"
-        :key="index"
-        @click="selectOption(item)"
-        type="button"
-        class="psui-inline-flex psui-rounded-sm psui-text-small psui-text-blue-60 psui-px-2"
-        :class="{'psui-bg-blue-60 psui-text-white psui-font-bold': selected === item}"
-      >
-        {{ item }}
-      </button>
-    </div>
-</template>
-
-<script>
-export default {
-  name: 'PsSlider',
-  props: {
-    items: {
-      type: Array,
-      required: true
-    },
-    selected: {},
-  },
-  methods: {
-    selectOption(item) {
-      this.$emit('update:selected', item)
-      this.$emit('change', item)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.wrapper {
-  padding: 2px;
-}
-</style>
+<template>
+    <div class="psui-el-toggle" role="group">
+      <button 
+        type="button"
+        v-for="(item, index) in items"
+        :key="index"
+        @click="selectOption(item)"
+        :class="{ 'status-active': getSelected === item }"
+      >
+        {{ item }}
+      </button>
+    </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: 'PsToggle',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    selected: {},
+  },
+  computed: {
+    getSelected() {
+      if (this.selected) {
+        return this.selected
+      } else {
+        return false
+      }
+    },
+  },
+  methods: {
+    selectOption(item) {
+      this.$emit('update:selected', item)
+      this.$emit('change', item)
+    }
+  }
+}
+</script>
+
+<style> /* Please, use the file src/assets/scss/components/PsToggle.scss */</style>

package/src/components/datatable/PsDataTable.vue

@@ -1,10 +1,9 @@
 <template>
-  <table :class='cssAlign' class='table psui-w-full psui-border-2 psui-border-gray-10' >
+  <table :class='cssAlign' class="psui-el-table psui-table">
     <thead v-if="header">
       <th
         v-for="head in header"
         :key="head"
-        class='psui-bg-gray-10 psui-text-gray-80 psui-capitalize psui-font-bold'
       >
         {{ head }}
       </th>
@@ -21,7 +20,7 @@
       <th
         v-for="ft in footer"
         :key="ft"
-        class='psui-bg-gray-10 psui-text-gray-80'
+        class='psui-bg-gray-10 psui-text-gray-80 psui-font-normal'
       >
         {{ ft }}
       </th>
@@ -75,15 +74,4 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-
-.table th,
-.table td,
-.table tr {
-  height: 40px;
-  border: 1px solid #e6ecf2;
-  padding: 11px 16px;
-}
-
-</style>
+<style> /* Please, use the file src/assets/scss/components/PsDataTable.scss */</style>

package/src/components/forms/PsDropdown.vue

@@ -1,6 +1,7 @@
 <template>
+<div class="background-temporary">
   <div 
-    class="psui-relative psui-inline-block psui-text-left" 
+    class="psui-el-dropdown-menu"
     ref="PSDropdown"
   >
 
@@ -12,7 +13,7 @@
       v-else
       @click="show && !toggleWhenActive ? '' : toggle()" 
       type="button" 
-      class="psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-focus:shadow-outline-blue psui-dropdown-button psui-text-sm psui-leading-none" 
+      class="psui-el-dropdown-menu-button" 
       :class="[buttonClasses]"
       :id="id"
       aria-haspopup="true" 
@@ -26,19 +27,21 @@
     <div 
       ref="PSDropdownDialog"
       role="menu" 
-      class="psui-dropdown-dialog psui-hidden psui-origin-top-right psui-fixed psui-mt-2 psui-w-auto psui-rounded psui-shadow-lg psui-border psui-border-blue05 psui-z-50 psui-opacity-0" 
+      class="psui-el-dropdown-menu-dialog" 
       aria-orientation="vertical" 
       :aria-labelledby="id"
       :class="[dialogClasses]"
       :style="{ minWidth: minWidthDropdown, marginLeft: marginLeft }"
     >
-      <div class="w-full">
-        <h2 class="psui-text-gray02 psui-font-bold psui-whitespace-no-wrap psui-mb-4 ts--accent--1" v-if="title">{{ title }}</h2>
+
+      <div class="psui-el-dropdown-menu-dialog-category-divider">
+        <h2 class="ts--accent--1" v-if="title">{{ title }}</h2>
         <slot name="items"></slot>
       </div>
 
     </div>
   </div>
+</div>
 </template>
 
 <script>
@@ -178,19 +181,32 @@ export default {
 
 <style>
 
-  .dropdown-button {
+  .background-temporary {
+    width: 300px;
+    height: 200px;
+    left: 0;
+    top: 8px;
+
+    background-color: #e6ecf2;
+    border: 1.5px dashed #7b61ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* .dropdown-button {
     background-color: transparent;
     padding-top: 2.5px;
     padding-bottom: 2.5px;
     min-height: 27px;
-  }
+  } */
 
-  .dropdown-button:focus {
+  /* .dropdown-button:focus {
     outline: none;
-  }
+  } */
 
-  .psui-dropdown-dialog {
+  /* .psui-dropdown-dialog {
     transition: opacity 150ms ease-in-out;
-  }
+  } */
   
 </style>