@policystudio/policy-studio-ui-vue 1.0.62 → 1.0.65

package/.github/workflows/deploy-storybook.yml

@@ -0,0 +1,47 @@
+name: Deploy Storybook
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: npm-
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: ^14.0.0
+
+      - name: Install dependencies
+        run: npm install && npm install vercel@25.1.0 && npm install -g vercel@25.1.0
+
+      - name: Build storybook
+        run: npm run build-storybook && cp ./vercel.json storybook-static/
+
+      - name: Deploy Storybook into vercel
+        uses: amondnet/vercel-action@v25.1.0
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ github.token }}
+          github-comment: false
+          vercel-org-id: ${{ secrets.VERCEL_TEAM_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_STORYBOOK_PROJECT_ID }}
+          scope: ${{ secrets.VERCEL_TEAM_ID }}
+          working-directory: ./storybook-static
+          vercel-args: '--prod'

package/package.json

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

package/src/components/chips/PsChips.vue

@@ -8,12 +8,12 @@
       :disabled="disabled"
       v-if="type != 'button'"
       :type="type"
-      :id="label"
+      :id="getInputId"
       :checked="checked"
     />
     <label
       :disabled="disabled"
-      :for="label"
+      :for="getInputId"
       :class="{'checked':checked && type === 'button'}"
     >
       <i v-if="icon" class="psui-el-chips-icon psui-el-chips-icon-prepend">{{ icon }}</i>
@@ -31,6 +31,7 @@
 
 <script>
 export const type = ['radio', 'checkbox', 'button']
+import { randomString } from '../../util/GeneralFunctions'
 
 export default {
   name: 'PsChips',
@@ -87,6 +88,13 @@ export default {
       type: Boolean,
       default: false
     },
+    /** 
+     * Add html attributes to the element input
+    */
+    inputAttrs: {
+      type: Object,
+      default: () => ({})
+    },
   },
   emits: ['click', 'change'],
   computed: {
@@ -97,6 +105,15 @@ export default {
         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)
+      }
+    },
   },
   methods: {
     onClick() {

package/src/components/controls/PsCheckboxSimple.vue

@@ -1,7 +1,6 @@
 <template>
   <div 
     class='psui-el-checkbox' 
-    @click="$emit('click')" 
     :class="[getComponentClass, {'disabled':disabled}]"
     v-bind="getComponentAttrs"
     >
@@ -12,7 +11,7 @@
       :name="label"
       :id="getInputId"
       v-bind="inputAttrs"
-      @change="$emit('change')" 
+      @change="$emit('change')"
     />
     <label 
       :for="getInputId"

package/src/components/controls/PsRadioButtonSimple.vue

@@ -0,0 +1,97 @@
+<template>
+  <div 
+    class='psui-el-radio' 
+    :class="[getComponentClass, {'disabled':disabled}]"
+    v-bind="getComponentAttrs"
+    >
+    <input 
+      type="radio" 
+      :checked="checked" 
+      :disabled="disabled"
+      :label="label"
+      :name="name"
+      :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,
+    },
+    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.
+     */
+  },
+  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/components/forms/PsInputTextArea.vue

@@ -7,9 +7,10 @@
         :autocapitalize="autocapitalize"
         :aria-required="required"
         :value="value"
-        @blur="onBlur"
-        @focus="onFocus"
-        @input="onInput"
+        @focus="onInputFocus"
+        @blur="onInputBlur"
+        @input="$emit('input', $event)"
+        @change="$emit('change', $event)"
         :rows="rows"
         :placeholder="placeholder"
         :readonly='disabled'
@@ -52,8 +53,8 @@ export default {
      * It sets aria-required property. eg: true or false.
      */
     required:{
-        type: Boolean,
-        default:true
+      type: Boolean,
+      default:true
     },
     /**
      * It sets the type of autocapitalize. See mdn web-doc for full information. default: sentences.
@@ -73,19 +74,18 @@ export default {
      * It disabled the textarea input. All mouse events are disabled.
      */
     disabled: {
-        type: Boolean,
-        default: false,
+      type: Boolean,
+      default: false,
     }
+  },
+  methods: {
+    onInputFocus($event) {
+      this.isFocus = true
+      this.$emit('focus', $event)
     },
-    methods: {
-    onBlur(){
-        this.$emit('blur', this.$event)
-    },
-    onFocus(){
-        this.$emit('focus',this.$event)
-    },
-    onInput(){
-        this.$emit('input', this.$event)
+    onInputBlur($event) {
+      this.isFocus = false
+      this.$emit('blur', $event)
     }
   }
 }

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({}) 
+  

package/vercel.json

@@ -0,0 +1,11 @@
+{
+  "version": 2,
+  "public": false,
+  "github": {
+    "enabled": false
+  },
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/index.html" },
+    { "source": "/:path*", "destination": "/index.html" }
+  ]
+}