@policystudio/policy-studio-ui-vue 1.0.63 → 1.0.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.63",
+  "version": "1.0.64",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/components/controls/PsRadioButtonSimple.vue

@@ -0,0 +1,93 @@
+<template>
+  <div 
+    class='psui-el-radio' 
+    :class="[getComponentClass, {'disabled':disabled}]"
+    v-bind="getComponentAttrs"
+    >
+    <input 
+      type="radio" 
+      :checked="checked" 
+      :disabled="disabled"
+      :name="label"
+      :id="getInputId"
+      v-bind="inputAttrs"
+      @change="$emit('change')"
+    />
+    <label 
+      :for="getInputId"
+      class="psui-el-checkmark"
+    >
+      <slot name="content">
+        <span>{{ label }}</span>
+      </slot>
+    </label>    
+  </div>
+</template>
+
+<script>
+import { randomString } from '../../util/GeneralFunctions'
+
+export default {
+  name: 'PsRadioButtonSimple',
+  props: {
+    /**
+     * It sets the label of the checkbox input.
+     */
+    label: {
+      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.
+     */
+  },
+  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
+    }
+  },
+}
+</script>

package/src/index.js

@@ -30,6 +30,7 @@ import PsScrollBar from './components/playground/PsScrollBar.vue'
 import PsMiniTag from './components/badges-and-tags/PsMiniTag.vue'
 import PsCheckboxSimple from './components/controls/PsCheckboxSimple.vue'
 import PsBadgeWithIcon from './components/badges-and-tags/PsBadgeWithIcon.vue'
+import PsRadioButtonSimple from './components/controls/PsRadioButtonSimple.vue'
 
 
 
@@ -67,6 +68,7 @@ export default {
     Vue.component('PsMiniTag', PsMiniTag)
     Vue.component('PsCheckboxSimple', PsCheckboxSimple)
     Vue.component('PsBadgeWithIcon', PsBadgeWithIcon)
+    Vue.component('PsRadioButtonSimple', PsRadioButtonSimple)
     
     Vue.directive('click-outside', {
       bind: function (el, binding, vnode) {
@@ -118,6 +120,7 @@ export {
   PsScrollBar,
   PsMiniTag,
   PsCheckboxSimple,
-  PsBadgeWithIcon
+  PsBadgeWithIcon,
+  PsRadioButtonSimple
 }
 

package/src/stories/RadioButtonSimple.stories.js

@@ -0,0 +1,43 @@
+import PsRadioButtonSimple from '../components/controls/PsRadioButtonSimple.vue'
+
+export default {
+    title: 'Components/Inputs V2/RadioButton',
+    component: PsRadioButtonSimple,
+  }
+
+  const defaultTemplate = (args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: { PsRadioButtonSimple },
+    data: () => ({
+      checkBox1 : true
+    }),
+    template: `
+      <div style='display:flex; gap: 20px;'>
+        <div style='display:flex; flex-direction:column; gap:5px;'>
+          <p>Resting</p>
+          <div style='display: flex; flex-direction:column; gap: 10px;'>
+            <PsRadioButtonSimple :checked="radioButton1" @click="radioButton1 = true" label='Label 1' />
+            <PsRadioButtonSimple :checked="radioButton2" @click="radioButton2 = true" label='Label 2' size='small' />
+          </div>
+        </div>
+        <div style='display:flex; flex-direction:column; gap:5px;'>
+          <p>Active</p>
+          <div style='display: flex; flex-direction:column; gap: 10px;'>
+            <PsRadioButtonSimple v-bind="$props" label='Label 3' checked />
+            <PsRadioButtonSimple v-bind="$props" label='Label 4' checked size='small'/>
+          </div>
+        </div>
+        <div style='display:flex; flex-direction:column; gap:5px;'>
+          <p>Disabled</p>
+          <div style='display: flex; flex-direction:column; gap: 10px;'>
+            <PsRadioButtonSimple v-bind="$props" label='Input via inputAttrs' :inputAttrs="{ id: 'my-input-id' }" disabled/>
+            <PsRadioButtonSimple v-bind="$props" label='Input via component id' size='small' id="my-component-id" data-test="test" disabled/>
+            <PsRadioButtonSimple v-bind="$props" label='Input fallback' size='small' disabled/>
+          </div>
+        </div>
+      </div>
+      `
+  })
+  
+  export const Default = defaultTemplate.bind({}) 
+