@policystudio/policy-studio-ui-vue 1.1.90-beta.12 → 1.1.90-beta.17

package/src/components/chips/PsChips.vue

@@ -1,6 +1,6 @@
 <template>
-  <div 
-    class="psui-el-chips" 
+  <div
+    class="psui-el-chips"
     :class="[getComponentClass, `layout-${layout}`, `type-${type}`]"
   >
     <input
@@ -14,16 +14,16 @@
     <label
       :disabled="disabled"
       :for="getInputId"
-      :class="{'checked':checked && type === 'button'}"
+      :class="{'checked': checked && type === 'button' }"
     >
       <i
         v-if="icon"
         class="psui-el-chips-icon psui-el-chips-icon-prepend"
       >{{ icon }}</i>
       {{ label }}
-      <button 
-        @click="onClose" 
-        v-if="layout === 'rich'" 
+      <button
+        @click="onClose"
+        v-if="layout === 'rich'"
         class="psui-el-chips-close"
       >
         <span class="psui-el-chips-icon">close</span>
@@ -32,105 +32,102 @@
   </div>
 </template>
 
-<script>
-export const type = ['radio', 'checkbox', 'button']
-import { randomString } from '../../util/GeneralFunctions'
+<script setup>
+import { defineProps, defineEmits, computed, useAttrs } from 'vue'
 
-export default {
-  name: 'PsChips',
-  props: {
-    /**
-     * It sets the label of the chips button.
-     */
-    label: {
-      type: String,
-      default: '',
-    },
-    /**
-     * It sets the type of the chips button. eg: radio, checkbox, button.
-     */
-    type: {
-      type: String,
-      required: true,
-      default: 'button',
-      validator: (type) => ['radio', 'checkbox', 'button'].includes(type)
-    },
-    /**
-     * It sets the layout of the chipsbutton. eg: simple, with-icon, rich.
-     */
-    layout: {
-      type: String,
-      default: 'simple',
-      validator: (value) => ['simple', 'with-icon', 'rich'].includes(value)
-    },
-    /**
-    * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the right description of your icon on https://fonts.google.com/.
-    */
-    icon: {
-      type: String,
-      default: '',
-    },
-    /**
-     * It sets if the button was checked or not checked.
-     */
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It disables the chips button.
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It sets if the button is active or not.
-     */
-    active: {
-      type: Boolean,
-      default: false
-    },
-    /** 
-     * Add html attributes to the element input
-    */
-    inputAttrs: {
-      type: Object,
-      default: () => ({})
-    },
+import { randomString } from '../../util/GeneralFunctions.js'
+
+const emit = defineEmits(['click', 'change', 'update:checked', 'close'])
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  /**
+   * It sets the label of the chips button.
+   */
+  label: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    required: true,
+    default: 'button',
+    validator: (type) => ['radio', 'checkbox', 'button'].includes(type),
+  },
+  /**
+   * It sets the layout of the chipsbutton. eg: simple, with-icon, rich.
+   */
+  layout: {
+    type: String,
+    default: 'simple',
+    validator: (value) => ['simple', 'with-icon', 'rich'].includes(value),
+  },
+  /**
+   * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the right description of your icon on https://fonts.google.com/.
+   */
+  icon: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets if the button was checked or not checked.
+   */
+  checked: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['click', 'change'],
-  computed: {
-    getComponentClass() {
-      if (this.disabled) {
-        return 'status-disabled'  
-      } else {
-        return 'status-resting'
-      }
-    },
-    getInputId() {
-      if (this?.inputAttrs?.id) {
-        return this.inputAttrs.id
-      } else if (this?.$attrs?.id) {
-        return this.$attrs.id
-      } else {
-        return randomString(16)
-      }
-    },
+  /**
+   * It disables the chips button.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    onClick() {
-      this.$emit('click')
-    },
-    onChange(event) {
-      this.$emit('update:checked', event.target.checked)
-      this.$emit('change', event)
-    },
-    onClose() {
-      this.$emit('close')
-    },
+  /**
+   * It sets if the button is active or not.
+   */
+  active: {
+    type: Boolean,
+    default: false,
   },
+  /**
+   * Add html attributes to the element input
+   */
+  inputAttrs: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const getComponentClass = computed(() => {
+  if (props.disabled) {
+    return 'status-disabled'
+  } else {
+    return 'status-resting'
+  }
+})
+
+const getInputId = computed(() => {
+  if (props?.inputAttrs?.id) {
+    return props.inputAttrs.id
+  } else if (attrs?.id) {
+    return attrs.id
+  } else {
+    return randomString(16)
+  }
+})
+
+const onChange = (event) => {
+  emit('update:checked', event.target.checked)
+  emit('change', event)
+}
+
+const onClose = () => {
+  emit('close')
 }
 </script>
 
-<style> /* Please, use the file src/assets/scss/components/PsChips.scss */</style>
+<style>
+/* Please, use the file src/assets/scss/components/PsChips.scss */
+</style>

package/src/components/controls/PsCheckbox.vue

@@ -1,100 +1,100 @@
 <template>
-  <div
-    class="psui-el-checkbox"
-    :class="[getComponentClass, {'disabled':disabled}]"
+  <div
+    class="psui-el-checkbox"
+    :class="[getComponentClass, { disabled: disabled }]"
   >
-    <input 
-      :id="getInputId" 
-      type="checkbox" 
+    <input
+      :id="getInputId"
+      type="checkbox"
       :value="inputValue"
       v-model="model"
-      :disabled="disabled"      
+      :disabled="disabled"
     >
-    <label 
-      :for="getInputId" 
+    <label
+      :for="getInputId"
       class="psui-el-checkmark"
       :class="[labelClasses, 'psui-el-checkmark']"
     >
       <span>{{ label }}</span>
-    </label>    
+    </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
-import { randomString } from '../../util/GeneralFunctions'
+<script setup>
+import { computed, defineEmits } from 'vue'
+import { randomString } from '../../util/GeneralFunctions.js'
 
-export default {
-  name: 'PsCheckbox',
-  props: {
-    /**
-     * It sets the label of the checkbox input.
-     */
-    label: {
-      type: String,
-      default: '',
-    },
-    /**
-     * It sets the label classes.
-     */
-    labelClasses: {
-      type: String,
-      default: ''
-    },
-    /**
-     * It sets the value which should be monitored.
-    */
-    inputValue: {
-      type: [String, Boolean],
-    },
-    value:{
-      type: [Array, Boolean]
-    },
-    /**
-     * It disables the checkbox input.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * It set the of the checkbox input. eg: big and small.
-     */
-    size: {
-      type: String,
-      default: 'big',
-      validator: (value)=> ['big', 'small'].includes(value)
-    },
-    /**
-     * It set the layout of the checkbox input. eg: default and mixed.
-     */
-    layout:{
-      type: String,
-      default: 'default',
-      validator: (value)=> ['default','mixed'].includes(value)
-    }
+const props = defineProps({
+  /**
+   * It sets the label of the checkbox input.
+   */
+  label: {
+    type: String,
+    default: '',
   },
-  computed:{
-    getComponentClass(){
-      return `size-${this.size} layout-${this.layout}`
-    },
-    getInputId() {
-      if (this?.inputAttrs?.id) {
-        return this.inputAttrs.id
-      } else if (this?.$attrs?.id) {
-        return this.$attrs.id
-      } else {
-        return randomString(16)
-      }
-    },
-    model: {
-      get(){
-        return this.value
-      },
-      set(value){
-        this.$emit('input', value)
-      }
-    }  
+  /**
+   * It sets the label classes.
+   */
+  labelClasses: {
+    type: String,
+    default: '',
   },
-}
+  /**
+   * It sets the value which should be monitored.
+   */
+  inputValue: {
+    type: [String, Boolean],
+    default: '',
+  },
+  value: {
+    type: [Array, Boolean],
+    default: false,
+  },
+  /**
+   * It disables the checkbox input.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It set the of the checkbox input. eg: big and small.
+   */
+  size: {
+    type: String,
+    default: 'big',
+    validator: (value) => ['big', 'small'].includes(value),
+  },
+  /**
+   * It set the layout of the checkbox input. eg: default and mixed.
+   */
+  layout: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'mixed'].includes(value),
+  },
+})
+
+const emit = defineEmits(['input'])
+
+const getInputId = computed(() => {
+  if (props.inputAttrs?.id) {
+    return props.inputAttrs.id
+  } else if (props.$attrs?.id) {
+    return props.$attrs.id
+  } else {
+    return randomString(16)
+  }
+})
+
+const getComponentClass = computed(() => `size-${props.size} layout-${props.layout}`)
+
+const model = computed({
+  get() {
+    return props.value
+  },
+  set(newValue) {
+    emit('input', newValue)
+  },
+})
 </script>

package/src/components/controls/PsCheckboxSimple.vue

@@ -1,45 +1,45 @@
 <template>
-  <div 
+  <div
     v-if="withPrevent"
-    class="psui-el-checkbox" 
-    :class="[getComponentClass, {'disabled':disabled}]"
+    class="psui-el-checkbox"
+    :class="[getComponentClass, { disabled: disabled }]"
     v-bind="getComponentAttrs"
-    @click.prevent="$emit('click', $event)"
+    @click.prevent="emit('click', $event)"
   >
-    <input 
-      type="checkbox" 
-      :checked="checked" 
+    <input
+      type="checkbox"
+      :checked="checked"
       :disabled="disabled"
       :name="label"
       :id="getInputId"
       v-bind="inputAttrs"
-      @change="$emit('change', $event)"
+      @change="emit('change', $event)"
     >
-    <label 
+    <label
       :for="getInputId"
       class="psui-el-checkmark"
     >
       <slot name="content">
         <span>{{ label }}</span>
       </slot>
-    </label>    
+    </label>
   </div>
-  <div 
+  <div
     v-else
-    class="psui-el-checkbox" 
-    :class="[getComponentClass, {'disabled':disabled}]"
+    class="psui-el-checkbox"
+    :class="[getComponentClass, { disabled: disabled }]"
     v-bind="getComponentAttrs"
   >
-    <input 
-      type="checkbox" 
-      :checked="checked" 
+    <input
+      type="checkbox"
+      :checked="checked"
       :disabled="disabled"
       :name="label"
       :id="getInputId"
       v-bind="inputAttrs"
-      @change="$emit('change', $event)"
+      @change="emit('change', $event)"
     >
-    <label 
+    <label
       :for="getInputId"
       class="psui-el-checkmark"
       :title="showLabelTitle ? label : ''"
@@ -47,89 +47,89 @@
       <slot name="content">
         <span>{{ label }}</span>
       </slot>
-    </label>    
+    </label>
   </div>
 </template>
 
-<script>
+<script setup>
 //FIGMA CONTROLS & SELECTORS https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64852
-import { randomString } from '../../util/GeneralFunctions'
+import { randomString } from '../../util/GeneralFunctions.js'
+import { defineProps, defineEmits, computed, useAttrs } from 'vue'
 
-export default {
-  name: 'PsCheckboxSimple',
-  props: {
-    /**
-     * It sets the label of the checkbox input.
-     */
-    label: {
-      type: String,
-    },
-    /**
-     * It disables the checkbox input.
-     */
-    withPrevent: {
-      type: Boolean,
-      default: false,
-    },
+const emit = defineEmits(['change', 'click'])
 
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Sets the input as checked
-     */
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    /** 
-     * Add html attributes to the element input
-    */
-    inputAttrs: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * It set the of the checkbox input. eg: big and small.
-     */
-    size: {
-      type: String,
-      default: 'big',
-      validator: (value)=> ['big', 'small'].includes(value)
-    },
-    /**
-     * It set the layout of the checkbox input. eg: default and mixed.
-     */
-    layout:{
-      type: String,
-      default: 'default',
-      validator: (value)=> ['default','mixed'].includes(value)
-    },
-    showLabelTitle: {
-      type: Boolean,
-      default: true
-    }
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
   },
-  inheritAttrs: false,
-  computed:{
-    getComponentClass(){
-      return `size-${this.size} layout-${this.layout}`
-    },
-    getInputId() {
-      if (this?.inputAttrs?.id) {
-        return this.inputAttrs.id
-      } else if (this?.$attrs?.id) {
-        return this.$attrs.id
-      } else {
-        return randomString(16)
-      }
-    },
-    getComponentAttrs() {
-      let componentAttrs = { ... this.$attrs }
-      delete componentAttrs.id
-      return componentAttrs
-    }
+  /**
+   * It disables the checkbox input.
+   */
+  withPrevent: {
+    type: Boolean,
+    default: false,
   },
-}
+  
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Sets the input as checked
+   */
+  checked: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Add html attributes to the element input
+   */
+  inputAttrs: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * It set the of the checkbox input. eg: big and small.
+   */
+  size: {
+    type: String,
+    default: 'big',
+    validator: (value) => ['big', 'small'].includes(value),
+  },
+  /**
+   * It set the layout of the checkbox input. eg: default and mixed.
+   */
+  layout: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'mixed'].includes(value),
+  },
+  showLabelTitle: {
+    type: Boolean,
+    default: true,
+  },
+})
+const attrs = useAttrs()
+
+const getComponentClass = computed(() => {
+  return `size-${props.size} layout-${props.layout}`
+})
+
+
+const getInputId = computed(() => {
+  if (props?.inputAttrs?.id) {
+    return props.inputAttrs.id
+  } else if (attrs?.id) {
+    return attrs.id
+  } else {
+    return randomString(16)
+  }
+})
+
+const getComponentAttrs = computed(() => {
+  let componentAttrs = { ...attrs }
+  delete componentAttrs.id
+  return componentAttrs
+})
 </script>