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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/.github/workflows/deploy-storybook.yml +47 -0
  2. package/package.json +1 -1
  3. package/src/components/buttons/PsButton.vue +17 -3
  4. package/src/components/chips/PsChips.vue +19 -2
  5. package/src/components/controls/PsCheckboxSimple.vue +1 -2
  6. package/src/components/controls/PsRadioButtonSimple.vue +93 -0
  7. package/src/components/forms/PsInputTextArea.vue +16 -16
  8. package/src/index.js +4 -1
  9. package/src/stories/Button.stories.js +20 -15
  10. package/src/stories/RadioButtonSimple.stories.js +43 -0
  11. package/vercel.json +11 -0
package/.github/workflows/deploy-storybook.yml ADDED
@@ -0,0 +1,47 @@
1
+ name: Deploy Storybook
2
+ on:
3
+ push:
4
+ branches:
5
+ - master
6
+
7
+ permissions:
8
+ contents: read
9
+ pull-requests: write
10
+
11
+ jobs:
12
+ deploy:
13
+ runs-on: ubuntu-latest
14
+ timeout-minutes: 20
15
+ steps:
16
+ - name: Checkout code
17
+ uses: actions/checkout@v2
18
+
19
+ - name: Cache dependencies
20
+ uses: actions/cache@v2
21
+ with:
22
+ path: ~/.npm
23
+ key: npm-${{ hashFiles('package-lock.json') }}
24
+ restore-keys: npm-
25
+
26
+ - name: Setup Node.js
27
+ uses: actions/setup-node@v2
28
+ with:
29
+ node-version: ^14.0.0
30
+
31
+ - name: Install dependencies
32
+ run: npm install && npm install vercel@25.1.0 && npm install -g vercel@25.1.0
33
+
34
+ - name: Build storybook
35
+ run: npm run build-storybook && cp ./vercel.json storybook-static/
36
+
37
+ - name: Deploy Storybook into vercel
38
+ uses: amondnet/vercel-action@v25.1.0
39
+ with:
40
+ vercel-token: ${{ secrets.VERCEL_TOKEN }}
41
+ github-token: ${{ github.token }}
42
+ github-comment: false
43
+ vercel-org-id: ${{ secrets.VERCEL_TEAM_ID }}
44
+ vercel-project-id: ${{ secrets.VERCEL_STORYBOOK_PROJECT_ID }}
45
+ scope: ${{ secrets.VERCEL_TEAM_ID }}
46
+ working-directory: ./storybook-static
47
+ vercel-args: '--prod'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@policystudio/policy-studio-ui-vue",
3
- "version": "1.0.61",
3
+ "version": "1.0.64",
4
4
  "description": "Policy Studio UI",
5
5
  "main": "src/index.js",
6
6
  "author": "Policy Studio Team",
package/src/components/buttons/PsButton.vue CHANGED
@@ -4,9 +4,16 @@
4
4
  @mouseenter="onMouseEnter"
5
5
  @mouseleave="onMouseLeave"
6
6
  class='psui-el-button'
7
- :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled}]"
7
+ :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled || loading }]"
8
8
  >
9
- <i v-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
9
+ <svg v-if="loading"
10
+ class="psui-animate-spin psui-mr-3 psui-h-5 psui-w-5 psui-text-black"
11
+ :class="`${iconPosition == 'left' ? 'psui-mr-3' : 'psui-ml-3 psui--mr-1'}`"
12
+ xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
13
+ <circle class="psui-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
14
+ <path class="psui-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
15
+ </svg>
16
+ <i v-else-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
10
17
  <span v-if="label">{{ label }}</span>
11
18
  </button>
12
19
  </template>
@@ -57,6 +64,13 @@ export default {
57
64
  type: Boolean,
58
65
  default: false
59
66
  },
67
+ /**
68
+ * It disable and add a spin icon to the button. All mouse event are disabled.
69
+ */
70
+ loading: {
71
+ type: Boolean,
72
+ default: false
73
+ },
60
74
  /**
61
75
  * It set any further css style that might be needed.
62
76
  */
@@ -76,7 +90,7 @@ export default {
76
90
  } else {
77
91
  return `layout-${this.layout} size-${this.size}`
78
92
  }
79
- }
93
+ },
80
94
  },
81
95
  methods: {
82
96
  onClick() {
package/src/components/chips/PsChips.vue CHANGED
@@ -8,12 +8,12 @@
8
8
  :disabled="disabled"
9
9
  v-if="type != 'button'"
10
10
  :type="type"
11
- :id="label"
11
+ :id="getInputId"
12
12
  :checked="checked"
13
13
  />
14
14
  <label
15
15
  :disabled="disabled"
16
- :for="label"
16
+ :for="getInputId"
17
17
  :class="{'checked':checked && type === 'button'}"
18
18
  >
19
19
  <i v-if="icon" class="psui-el-chips-icon psui-el-chips-icon-prepend">{{ icon }}</i>
@@ -31,6 +31,7 @@
31
31
 
32
32
  <script>
33
33
  export const type = ['radio', 'checkbox', 'button']
34
+ import { randomString } from '../../util/GeneralFunctions'
34
35
 
35
36
  export default {
36
37
  name: 'PsChips',
@@ -87,6 +88,13 @@ export default {
87
88
  type: Boolean,
88
89
  default: false
89
90
  },
91
+ /**
92
+ * Add html attributes to the element input
93
+ */
94
+ inputAttrs: {
95
+ type: Object,
96
+ default: () => ({})
97
+ },
90
98
  },
91
99
  emits: ['click', 'change'],
92
100
  computed: {
@@ -97,6 +105,15 @@ export default {
97
105
  return 'status-resting'
98
106
  }
99
107
  },
108
+ getInputId() {
109
+ if (this?.inputAttrs?.id) {
110
+ return this.inputAttrs.id
111
+ } else if (this?.$attrs?.id) {
112
+ return this.$attrs.id
113
+ } else {
114
+ return randomString(16)
115
+ }
116
+ },
100
117
  },
101
118
  methods: {
102
119
  onClick() {
package/src/components/controls/PsCheckboxSimple.vue CHANGED
@@ -1,7 +1,6 @@
1
1
  <template>
2
2
  <div
3
3
  class='psui-el-checkbox'
4
- @click="$emit('click')"
5
4
  :class="[getComponentClass, {'disabled':disabled}]"
6
5
  v-bind="getComponentAttrs"
7
6
  >
@@ -12,7 +11,7 @@
12
11
  :name="label"
13
12
  :id="getInputId"
14
13
  v-bind="inputAttrs"
15
- @change="$emit('change')"
14
+ @change="$emit('change')"
16
15
  />
17
16
  <label
18
17
  :for="getInputId"
package/src/components/controls/PsRadioButtonSimple.vue ADDED
@@ -0,0 +1,93 @@
1
+ <template>
2
+ <div
3
+ class='psui-el-radio'
4
+ :class="[getComponentClass, {'disabled':disabled}]"
5
+ v-bind="getComponentAttrs"
6
+ >
7
+ <input
8
+ type="radio"
9
+ :checked="checked"
10
+ :disabled="disabled"
11
+ :name="label"
12
+ :id="getInputId"
13
+ v-bind="inputAttrs"
14
+ @change="$emit('change')"
15
+ />
16
+ <label
17
+ :for="getInputId"
18
+ class="psui-el-checkmark"
19
+ >
20
+ <slot name="content">
21
+ <span>{{ label }}</span>
22
+ </slot>
23
+ </label>
24
+ </div>
25
+ </template>
26
+
27
+ <script>
28
+ import { randomString } from '../../util/GeneralFunctions'
29
+
30
+ export default {
31
+ name: 'PsRadioButtonSimple',
32
+ props: {
33
+ /**
34
+ * It sets the label of the checkbox input.
35
+ */
36
+ label: {
37
+ type: String,
38
+ },
39
+ /**
40
+ * It disables the checkbox input.
41
+ */
42
+ disabled: {
43
+ type: Boolean,
44
+ default: false,
45
+ },
46
+ /**
47
+ * Sets the input as checked
48
+ */
49
+ checked: {
50
+ type: Boolean,
51
+ default: false
52
+ },
53
+ /**
54
+ * Add html attributes to the element input
55
+ */
56
+ inputAttrs: {
57
+ type: Object,
58
+ default: () => ({})
59
+ },
60
+ /**
61
+ * It set the of the checkbox input. eg: big and small.
62
+ */
63
+ size: {
64
+ type: String,
65
+ default: 'big',
66
+ validator: (value)=> ['big', 'small'].includes(value)
67
+ },
68
+ /**
69
+ * It set the layout of the checkbox input. eg: default and mixed.
70
+ */
71
+ },
72
+ inheritAttrs: false,
73
+ computed:{
74
+ getComponentClass(){
75
+ return `size-${this.size}`
76
+ },
77
+ getInputId() {
78
+ if (this?.inputAttrs?.id) {
79
+ return this.inputAttrs.id
80
+ } else if (this?.$attrs?.id) {
81
+ return this.$attrs.id
82
+ } else {
83
+ return randomString(16)
84
+ }
85
+ },
86
+ getComponentAttrs() {
87
+ let componentAttrs = { ... this.$attrs }
88
+ delete componentAttrs.id
89
+ return componentAttrs
90
+ }
91
+ },
92
+ }
93
+ </script>
package/src/components/forms/PsInputTextArea.vue CHANGED
@@ -7,9 +7,10 @@
7
7
  :autocapitalize="autocapitalize"
8
8
  :aria-required="required"
9
9
  :value="value"
10
- @blur="onBlur"
11
- @focus="onFocus"
12
- @input="onInput"
10
+ @focus="onInputFocus"
11
+ @blur="onInputBlur"
12
+ @input="$emit('input', $event)"
13
+ @change="$emit('change', $event)"
13
14
  :rows="rows"
14
15
  :placeholder="placeholder"
15
16
  :readonly='disabled'
@@ -52,8 +53,8 @@ export default {
52
53
  * It sets aria-required property. eg: true or false.
53
54
  */
54
55
  required:{
55
- type: Boolean,
56
- default:true
56
+ type: Boolean,
57
+ default:true
57
58
  },
58
59
  /**
59
60
  * It sets the type of autocapitalize. See mdn web-doc for full information. default: sentences.
@@ -73,19 +74,18 @@ export default {
73
74
  * It disabled the textarea input. All mouse events are disabled.
74
75
  */
75
76
  disabled: {
76
- type: Boolean,
77
- default: false,
77
+ type: Boolean,
78
+ default: false,
78
79
  }
80
+ },
81
+ methods: {
82
+ onInputFocus($event) {
83
+ this.isFocus = true
84
+ this.$emit('focus', $event)
79
85
  },
80
- methods: {
81
- onBlur(){
82
- this.$emit('blur', this.$event)
83
- },
84
- onFocus(){
85
- this.$emit('focus',this.$event)
86
- },
87
- onInput(){
88
- this.$emit('input', this.$event)
86
+ onInputBlur($event) {
87
+ this.isFocus = false
88
+ this.$emit('blur', $event)
89
89
  }
90
90
  }
91
91
  }
package/src/index.js CHANGED
@@ -30,6 +30,7 @@ import PsScrollBar from './components/playground/PsScrollBar.vue'
30
30
  import PsMiniTag from './components/badges-and-tags/PsMiniTag.vue'
31
31
  import PsCheckboxSimple from './components/controls/PsCheckboxSimple.vue'
32
32
  import PsBadgeWithIcon from './components/badges-and-tags/PsBadgeWithIcon.vue'
33
+ import PsRadioButtonSimple from './components/controls/PsRadioButtonSimple.vue'
33
34
 
34
35
 
35
36
 
@@ -67,6 +68,7 @@ export default {
67
68
  Vue.component('PsMiniTag', PsMiniTag)
68
69
  Vue.component('PsCheckboxSimple', PsCheckboxSimple)
69
70
  Vue.component('PsBadgeWithIcon', PsBadgeWithIcon)
71
+ Vue.component('PsRadioButtonSimple', PsRadioButtonSimple)
70
72
 
71
73
  Vue.directive('click-outside', {
72
74
  bind: function (el, binding, vnode) {
@@ -118,6 +120,7 @@ export {
118
120
  PsScrollBar,
119
121
  PsMiniTag,
120
122
  PsCheckboxSimple,
121
- PsBadgeWithIcon
123
+ PsBadgeWithIcon,
124
+ PsRadioButtonSimple
122
125
  }
123
126
 
package/src/stories/Button.stories.js CHANGED
@@ -15,78 +15,83 @@ const TemplateDefault = (args, { argTypes }) => ({
15
15
  props: Object.keys(argTypes),
16
16
  components: { PsButton },
17
17
  template: `
18
- <div style="display:flex; flex-direction: column;">
18
+ <div style="display:flex; flex-direction: column;">
19
19
  <p>Size: Big</p>
20
20
  <div style="display: flex; flex-direction: column; gap: 10px;">
21
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
21
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
22
22
  <span style="text-align: center; color: black;">Solid Style</span>
23
23
  <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left'/>
24
24
  <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right'/>
25
25
  <PsButton label='Text Only' layout='solid' />
26
- <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled/>
26
+ <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled/>
27
+ <PsButton label='Loading Solid' layout='solid' icon='verified' iconPosition='left' loading />
27
28
  </div>
28
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
29
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
29
30
  <span style="text-align: center; color: blue;">Outline Style</span>
30
31
  <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left'/>
31
32
  <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right'/>
32
33
  <PsButton label='Text Only' layout='outline'/>
33
34
  <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled/>
35
+ <PsButton label='Loading Outline' layout='outline' icon='verified' iconPosition='left' loading />
34
36
  </div>
35
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
37
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
36
38
  <span style="text-align: center; color: brown;">Ghost Style</span>
37
39
  <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left'/>
38
40
  <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right'/>
39
41
  <PsButton label='Text Only' layout='ghost' />
40
42
  <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled/>
43
+ <PsButton label='Loading Ghost' layout='ghost' icon='verified' iconPosition='left' loading />
41
44
  </div>
42
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
45
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
43
46
  <span style="text-align: center; color: green;">Only-Text Style</span>
44
47
  <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
45
48
  <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
46
49
  <PsButton label='Text Only' layout='onlytext'/>
47
50
  <PsButton label='Disabled' layout='onlytext' icon='verified' iconPosition='left' disabled/>
51
+ <PsButton label='Loading Only-Text' layout='onlytext' icon='verified' iconPosition='left' loading />
48
52
  </div>
49
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
53
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
50
54
  <span style="text-align: center; color: red;">Caution Button</span>
51
55
  <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left'/>
52
56
  <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right'/>
53
57
  <PsButton label='Text Only' layout='caution' />
54
58
  <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled/>
59
+ <PsButton label='Loading Caution' layout='caution' icon='verified' iconPosition='left' loading />
55
60
  </div>
56
61
 
57
62
 
58
63
  </div>
59
64
  <p>Size: Medium</p>
60
65
  <div style="display: flex; flex-direction: column; gap: 10px;">
61
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
66
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
62
67
  <span style="text-align: center; color: black;">Solid Style</span>
63
68
  <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='medium'/>
64
69
  <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='medium'/>
65
70
  <PsButton label='Text Only' layout='solid' size='medium'/>
66
71
  <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='medium'/>
67
72
  </div>
68
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
73
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
69
74
  <span style="text-align: center; color: blue;">Outline Style</span>
70
75
  <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left' size='medium'/>
71
76
  <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right' size='medium'/>
72
77
  <PsButton label='Text Only' layout='outline' size='medium'/>
73
78
  <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled size='medium'/>
74
79
  </div>
75
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
80
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
76
81
  <span style="text-align: center; color: brown;">Ghost Style</span>
77
82
  <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left' size='medium'/>
78
83
  <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right' size='medium'/>
79
84
  <PsButton label='Text Only' layout='ghost' size='medium'/>
80
85
  <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled size='medium'/>
81
86
  </div>
82
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
87
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
83
88
  <span style="text-align: center; color: green;">Only-Text Style</span>
84
89
  <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='medium'/>
85
90
  <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='medium'/>
86
91
  <PsButton label='Text Only' layout='onlytext' size='medium'/>
87
92
  <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='medium'/>
88
93
  </div>
89
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
94
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
90
95
  <span style="text-align: center; color: red;">Caution Button</span>
91
96
  <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='medium'/>
92
97
  <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='medium'/>
@@ -96,21 +101,21 @@ const TemplateDefault = (args, { argTypes }) => ({
96
101
  </div>
97
102
  <p>Size: Small</p>
98
103
  <div style="display: flex; flex-direction: column; gap: 10px;">
99
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
104
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
100
105
  <span style="text-align: center; color: black;">Solid Style</span>
101
106
  <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='small'/>
102
107
  <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='small'/>
103
108
  <PsButton label='Text Only' layout='solid' size='small'/>
104
109
  <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='small'/>
105
110
  </div>
106
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
111
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
107
112
  <span style="text-align: center; color: green;">Only-Text Style</span>
108
113
  <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='small'/>
109
114
  <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='small'/>
110
115
  <PsButton label='Text Only' layout='onlytext' size='small'/>
111
116
  <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='small'/>
112
117
  </div>
113
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
118
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
114
119
  <span style="text-align: center; color: red;">Caution Button</span>
115
120
  <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='small'/>
116
121
  <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='small'/>
package/src/stories/RadioButtonSimple.stories.js ADDED
@@ -0,0 +1,43 @@
1
+ import PsRadioButtonSimple from '../components/controls/PsRadioButtonSimple.vue'
2
+
3
+ export default {
4
+ title: 'Components/Inputs V2/RadioButton',
5
+ component: PsRadioButtonSimple,
6
+ }
7
+
8
+ const defaultTemplate = (args, {argTypes}) => ({
9
+ props: Object.keys(argTypes),
10
+ components: { PsRadioButtonSimple },
11
+ data: () => ({
12
+ checkBox1 : true
13
+ }),
14
+ template: `
15
+ <div style='display:flex; gap: 20px;'>
16
+ <div style='display:flex; flex-direction:column; gap:5px;'>
17
+ <p>Resting</p>
18
+ <div style='display: flex; flex-direction:column; gap: 10px;'>
19
+ <PsRadioButtonSimple :checked="radioButton1" @click="radioButton1 = true" label='Label 1' />
20
+ <PsRadioButtonSimple :checked="radioButton2" @click="radioButton2 = true" label='Label 2' size='small' />
21
+ </div>
22
+ </div>
23
+ <div style='display:flex; flex-direction:column; gap:5px;'>
24
+ <p>Active</p>
25
+ <div style='display: flex; flex-direction:column; gap: 10px;'>
26
+ <PsRadioButtonSimple v-bind="$props" label='Label 3' checked />
27
+ <PsRadioButtonSimple v-bind="$props" label='Label 4' checked size='small'/>
28
+ </div>
29
+ </div>
30
+ <div style='display:flex; flex-direction:column; gap:5px;'>
31
+ <p>Disabled</p>
32
+ <div style='display: flex; flex-direction:column; gap: 10px;'>
33
+ <PsRadioButtonSimple v-bind="$props" label='Input via inputAttrs' :inputAttrs="{ id: 'my-input-id' }" disabled/>
34
+ <PsRadioButtonSimple v-bind="$props" label='Input via component id' size='small' id="my-component-id" data-test="test" disabled/>
35
+ <PsRadioButtonSimple v-bind="$props" label='Input fallback' size='small' disabled/>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ `
40
+ })
41
+
42
+ export const Default = defaultTemplate.bind({})
43
+
package/vercel.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "version": 2,
3
+ "public": false,
4
+ "github": {
5
+ "enabled": false
6
+ },
7
+ "rewrites": [
8
+ { "source": "/(.*)", "destination": "/index.html" },
9
+ { "source": "/:path*", "destination": "/index.html" }
10
+ ]
11
+ }