@policystudio/policy-studio-ui-vue 1.1.90-beta.5 → 1.1.90-beta.50

package/src/components/controls/PsRadioButton.vue

@@ -1,76 +1,83 @@
 <template>
   <div
     class="psui-el-radio"
-    :class="[getComponentClass, {'disabled':disabled}]"
+    :class="[getComponentClass, { disabled: disabled }]"
   >
     <input
       :id="inputId"
       type="radio"
+      :name="inputId"
       :value="inputValue"
       v-model="model"
-      :disabled="disabled"      
+      :disabled="disabled"
+      :checked="isChecked"
     >
     <label
       :for="inputId"
       class="psui-el-checkmark"
-    ><span>{{ label }}</span></label>    
+    ><span>{{ label }}</span></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
- 
-export default {
-  name: 'PsRadioButton',
-  props: {
-    inputId: {
-      type: String,
-      default: ''
-    },
-    /**
-    * It sets the label of the radio button.
-     */
-    label: {
-      type: String,
-      default: '',
-    },
-    /**
-    * It's the value of the checkbox
-     */
-    inputValue:{
-      type: [String, Object],
-    },
-    value:{
-      type: [String, Object]
-    },
-    /**
-    * It disables the radio button. All mouse events are disabled.
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-    * It sets the size of the radio button. eg: big and small.
-     */
-    size: {
-      type: String,
-      default: 'big',
-      validator: (value) => ['big', 'small'].includes(value)
-    },
+import { computed } from 'vue'
+
+const props = defineProps({
+  inputId: {
+    type: String,
+    default: '',
   },
-  computed: {
-    getComponentClass(){
-      return `size-${this.size}`
-    },
-    model: {
-    get(){
-      return this.value
-    },
-    set(value){
-      this.$emit('input', value)
-    }
-  }  
+  /**
+   * It sets the label of the radio button.
+   */
+  label: {
+    type: String,
+    default: '',
   },
-}
-</script>
+  /**
+   * It's the value of the checkbox
+   */
+  inputValue: {
+    type: [String, Object],
+    default: '',
+  },
+  value: {
+    type: [String, Object],
+    default: '',
+  },
+  /**
+   * It disables the radio button. All mouse events are disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It sets the size of the radio button. eg: big and small.
+   */
+  size: {
+    type: String,
+    default: 'big',
+    validator: (value) => ['big', 'small'].includes(value),
+  },
+})
+
+const emit = defineEmits(['input'])
+const getComponentClass = computed(() => {
+  return `size-${props.size}`
+})
+
+const model = computed({
+  get: () => {
+    return props.value
+  },
+  set: (value) => {
+    emit('input', value)
+  },
+})
+
+const isChecked = computed(() => {
+  return props.inputValue === props.value
+})
+</script>

package/src/components/controls/PsRadioButtonSimple.vue

@@ -1,97 +1,101 @@
 <template>
-  <div 
-    class="psui-el-radio" 
-    :class="[getComponentClass, {'disabled':disabled}]"
+  <div
+    class="psui-el-radio"
+    :class="[getComponentClass, { disabled: disabled }]"
     v-bind="getComponentAttrs"
   >
-    <input 
-      type="radio" 
-      :checked="checked" 
+    <input
+      type="radio"
+      :checked="checked"
       :disabled="disabled"
       :label="label"
       :name="name"
       :id="getInputId"
       v-bind="inputAttrs"
-      @change="$emit('change')"
+      @change="emit('change')"
     >
-    <label 
+    <label
       :for="getInputId"
       class="psui-el-checkmark"
     >
       <slot name="content">
         <span>{{ label }}</span>
       </slot>
-    </label>    
+    </label>
   </div>
 </template>
 
-<script>
-import { randomString } from '../../util/GeneralFunctions'
+<script setup>
+import { randomString } from '../../util/GeneralFunctions.js'
+import { computed, useAttrs } from 'vue'
 
-export default {
-  name: 'PsRadioButtonSimple',
-  props: {
-    /**
-     * It sets the label of the checkbox input.
-     */
-    label: {
-      type: String,
-    },
-    name:{
-      type: String,
-    },
-    /**
-     * It disables the checkbox input.
-     */
-    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.
-     */
+const emit = defineEmits(['change'])
+
+const props = defineProps({
+  /**
+   * It sets the label of the checkbox input.
+   */
+  label: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It disables the checkbox input.
+   */
+  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: () => ({}),
   },
-  inheritAttrs: false,
-  computed:{
-    getComponentClass(){
-      return `size-${this.size}`
-    },
-    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 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.
+   */
+})
+
+const attrs = useAttrs()
+
+const getComponentClass = computed(() => {
+  return `size-${props.size}`
+})
+
+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>