@policystudio/policy-studio-ui-vue 1.1.88 → 1.1.90-beta.0

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 (67) hide show
  1. package/.eslintignore +1 -0
  2. package/.eslintrc.js +70 -67
  3. package/.github/workflows/deploy-storybook.yml +1 -1
  4. package/.storybook/eventBus.js +25 -2
  5. package/.storybook/main.js +17 -21
  6. package/babel.config.js +17 -3
  7. package/dist/css/psui_styles.css +0 -1
  8. package/package.json +36 -23
  9. package/scripts/kill-port.sh +12 -0
  10. package/src/assets/scss/components/PsTableResults.scss +3 -2
  11. package/src/components/accordion/PsAccordion.vue +20 -21
  12. package/src/components/accordion/PsAccordionItem.vue +30 -8
  13. package/src/components/badges-and-tags/PsBadgeWithIcon.vue +6 -3
  14. package/src/components/badges-and-tags/PsCardInfos.vue +3 -1
  15. package/src/components/badges-and-tags/PsChartLegend.vue +19 -5
  16. package/src/components/badges-and-tags/PsCostEffectBar.vue +4 -5
  17. package/src/components/badges-and-tags/PsHighlightRippleDot.vue +1 -1
  18. package/src/components/badges-and-tags/PsTestimonialCard.vue +6 -4
  19. package/src/components/buttons/PsButton.vue +30 -11
  20. package/src/components/chips/PsChips.vue +5 -2
  21. package/src/components/controls/PsCheckbox.vue +5 -2
  22. package/src/components/controls/PsCheckboxSimple.vue +4 -4
  23. package/src/components/controls/PsDraggable.vue +70 -67
  24. package/src/components/controls/PsInlineSelector.vue +13 -14
  25. package/src/components/controls/PsRadioButton.vue +10 -5
  26. package/src/components/controls/PsRadioButtonSimple.vue +3 -3
  27. package/src/components/controls/PsSlider.vue +6 -6
  28. package/src/components/controls/PsSwitch.vue +13 -3
  29. package/src/components/controls/PsToggle.vue +14 -11
  30. package/src/components/data-graphics/PsBarChart.vue +4 -2
  31. package/src/components/datatable/PsDataTable.vue +14 -5
  32. package/src/components/datatable/PsDataTableItem.vue +17 -4
  33. package/src/components/forms/PsDropdown.vue +8 -5
  34. package/src/components/forms/PsDropdownList.vue +1 -1
  35. package/src/components/forms/PsInput.vue +30 -14
  36. package/src/components/forms/PsInputSelect.vue +33 -11
  37. package/src/components/forms/PsInputTextArea.vue +15 -4
  38. package/src/components/navigations/PsBreadcrumb.vue +1 -1
  39. package/src/components/notifications/PsDialog.vue +11 -5
  40. package/src/components/notifications/PsSimpleAlert.vue +22 -10
  41. package/src/components/notifications/PsToast.vue +8 -3
  42. package/src/components/playground/PsScrollBar.vue +122 -50
  43. package/src/components/table-results/PsTableResults.vue +79 -58
  44. package/src/components/table-results/PsTableResultsBody.vue +3 -1
  45. package/src/components/table-results/PsTableResultsHead.vue +27 -8
  46. package/src/components/table-results/PsTableResultsHeadComparison.vue +24 -8
  47. package/src/components/table-results/PsTableResultsHeadFlexible.vue +18 -6
  48. package/src/components/table-results/PsTableResultsRow.vue +6 -2
  49. package/src/components/tabs/PsTabHeader.vue +19 -16
  50. package/src/components/tooltip/PsDialogTooltip.vue +18 -8
  51. package/src/components/tooltip/PsRichTooltip.vue +12 -5
  52. package/src/components/tooltip/PsTooltip.vue +17 -9
  53. package/src/components/ui/PsDotLoader.vue +5 -5
  54. package/src/components/ui/PsIcon.vue +6 -2
  55. package/src/index.js +0 -1
  56. package/src/stories/Button.stories.js +48 -130
  57. package/src/stories/Button.vue +59 -0
  58. package/src/stories/{ElevationSystem.stories.mdx → ElevationSystem.mdx} +1 -1
  59. package/src/stories/Header.stories.js +41 -0
  60. package/src/stories/Header.vue +77 -0
  61. package/src/stories/{Introduction.stories.mdx → Introduction.mdx} +101 -101
  62. package/src/stories/{Typography.stories.mdx → Typography.mdx} +107 -105
  63. package/src/stories/button.css +30 -0
  64. package/src/stories/header.css +32 -0
  65. package/webpack.config.js +22 -0
  66. package/backup-package-lock.json +0 -37194
  67. /package/src/stories/{Colors.stories.mdx → Colors.mdx} +0 -0
package/src/components/forms/PsInput.vue CHANGED
@@ -1,6 +1,8 @@
1
1
  <template>
2
- <div class="psui-el-input" :class="[getComponentClass, `layout-${layout}`]" >
3
-
2
+ <div
3
+ class="psui-el-input"
4
+ :class="[getComponentClass, `layout-${layout}`]"
5
+ >
4
6
  <label v-if="label"> {{ label }} </label>
5
7
 
6
8
  <div
@@ -8,15 +10,18 @@
8
10
  @mouseenter="$emit('mouseenter',$event)"
9
11
  @mouseleave="$emit('mouseleave',$event)"
10
12
  >
11
- <div v-if="$slots.prepend" class="psui-el-input-prepend">
12
- <slot name="prepend"></slot>
13
+ <div
14
+ v-if="$slots.prepend"
15
+ class="psui-el-input-prepend"
16
+ >
17
+ <slot name="prepend" />
13
18
  </div>
14
19
  <PsRichTooltip
15
20
  class="psui-w-full"
16
21
  css-class="psui-w-48"
17
22
  :ignore-dialog="!showTooltip"
18
23
  >
19
- <template v-slot:trigger>
24
+ <template #trigger>
20
25
  <input
21
26
  :title="title"
22
27
  :type="type"
@@ -33,25 +38,36 @@
33
38
  @change="$emit('change', $event)"
34
39
  v-bind="getAttrs"
35
40
  :class="{ 'focus': isFocus }"
36
- />
41
+ >
37
42
  </template>
38
- <template v-slot:content>
43
+ <template #content>
39
44
  <div class="text-left">
40
45
  {{ tooltipText }}
41
46
  </div>
42
47
  </template>
43
48
  </PsRichTooltip>
44
- <div v-if="$slots.append || hasError" class="psui-el-input-append">
45
- <span v-if="hasError" class="material-icons psui-text-red-20 material-icons-sharp">error</span>
46
- <slot v-else name="append"></slot>
49
+ <div
50
+ v-if="$slots.append || hasError"
51
+ class="psui-el-input-append"
52
+ >
53
+ <span
54
+ v-if="hasError"
55
+ class="material-icons psui-text-red-20 material-icons-sharp"
56
+ >error</span>
57
+ <slot
58
+ v-else
59
+ name="append"
60
+ />
47
61
  </div>
48
62
  </div>
49
63
 
50
- <p v-if="hint || (hasError && typeof hasError === 'string')" class="psui-el-input-hint">
64
+ <p
65
+ v-if="hint || (hasError && typeof hasError === 'string')"
66
+ class="psui-el-input-hint"
67
+ >
51
68
  {{ typeof hasError === 'string' ? hasError : hint }}
52
- </p>
53
-
54
- </div>
69
+ </p>
70
+ </div>
55
71
  </template>
56
72
 
57
73
  <script>
package/src/components/forms/PsInputSelect.vue CHANGED
@@ -1,17 +1,39 @@
1
1
  <template>
2
- <div class="psui-el-input-select" :class="[getComponentClass, {'selected':selectedClass}, {'disabled':disabled}]">
3
- <label :for='label' v-if="label" >{{ label }}</label>
2
+ <div
3
+ class="psui-el-input-select"
4
+ :class="[getComponentClass, {'selected':selectedClass}, {'disabled':disabled}]"
5
+ >
6
+ <label
7
+ :for="label"
8
+ v-if="label"
9
+ >{{ label }}</label>
4
10
  <div class="psui-el-input-select-wrapper">
5
- <select
6
- :name="label"
7
- :id="label"
8
- v-model="childValue"
9
- >
10
- <option value='' disabled>Select</option>
11
- <option v-for="item in getItems" :value="item[keyValue]" :key="item[keyValue]">{{ item[keyLabel] }}</option>
12
- </select>
11
+ <select
12
+ :name="label"
13
+ :id="label"
14
+ v-model="childValue"
15
+ >
16
+ <option
17
+ value=""
18
+ disabled
19
+ >
20
+ Select
21
+ </option>
22
+ <option
23
+ v-for="item in getItems"
24
+ :value="item[keyValue]"
25
+ :key="item[keyValue]"
26
+ >
27
+ {{ item[keyLabel] }}
28
+ </option>
29
+ </select>
13
30
  </div>
14
- <p v-if="optionalLabel && !disabled && layout !== 'mini'" class="psui-el-input-helper">{{ optionalLabel }}</p>
31
+ <p
32
+ v-if="optionalLabel && !disabled && layout !== 'mini'"
33
+ class="psui-el-input-helper"
34
+ >
35
+ {{ optionalLabel }}
36
+ </p>
15
37
  </div>
16
38
  </template>
17
39
 
package/src/components/forms/PsInputTextArea.vue CHANGED
@@ -1,7 +1,13 @@
1
1
  <template>
2
- <div class="psui-el-input-textarea" :class="[{'disabled':disabled}]">
2
+ <div
3
+ class="psui-el-input-textarea"
4
+ :class="[{'disabled':disabled}]"
5
+ >
3
6
  <div class="psui-el-input-textarea-wrapper">
4
- <label :for="label" v-if="label">{{label}}</label>
7
+ <label
8
+ :for="label"
9
+ v-if="label"
10
+ >{{ label }}</label>
5
11
  <textarea
6
12
  :id="label"
7
13
  :autocapitalize="autocapitalize"
@@ -13,10 +19,15 @@
13
19
  @change="$emit('change', $event)"
14
20
  :rows="rows"
15
21
  :placeholder="placeholder"
16
- :readonly='disabled'
22
+ :readonly="disabled"
17
23
  />
18
24
  </div>
19
- <p class="psui-el-input-textarea-message" v-if="optionalLabel && !disabled">{{optionalLabel}}</p>
25
+ <p
26
+ class="psui-el-input-textarea-message"
27
+ v-if="optionalLabel && !disabled"
28
+ >
29
+ {{ optionalLabel }}
30
+ </p>
20
31
  </div>
21
32
  </template>
22
33
 
package/src/components/navigations/PsBreadcrumb.vue CHANGED
@@ -13,7 +13,7 @@
13
13
  <router-link
14
14
  v-if="item.route && !item.isReset"
15
15
  :to="item.route"
16
- @click.native="onNavigate(item)"
16
+ @click="onNavigate(item)"
17
17
  >
18
18
  {{ item.title }}
19
19
  </router-link>
package/src/components/notifications/PsDialog.vue CHANGED
@@ -1,22 +1,28 @@
1
1
  <template>
2
- <div class="psui-el-dialog" :class="getComponentClass">
2
+ <div
3
+ class="psui-el-dialog"
4
+ :class="getComponentClass"
5
+ >
3
6
  <div class="psui-el-dialog-icon">
4
- <i class="material-icons-round">{{icon}}</i>
7
+ <i class="material-icons-round">{{ icon }}</i>
5
8
  </div>
6
9
  <div class="psui-el-dialog-wrapper">
7
10
  <div class="psui-el-dialog-default">
8
11
  <slot>
9
- <p class="psui-el-dialog-message">{{ message }}</p>
12
+ <p class="psui-el-dialog-message">
13
+ {{ message }}
14
+ </p>
10
15
  </slot>
11
16
  </div>
12
17
  <div class="psui-el-dialog-action">
13
- <slot name="action"></slot>
18
+ <slot name="action" />
14
19
  </div>
15
20
  </div>
16
21
  <button
17
22
  class="psui-el-dialog-close"
18
23
  v-if="hasClose"
19
- @click="onClose">
24
+ @click="onClose"
25
+ >
20
26
  <i class="material-icons-round">close</i>
21
27
  </button>
22
28
  </div>
package/src/components/notifications/PsSimpleAlert.vue CHANGED
@@ -1,13 +1,25 @@
1
- <template >
2
- <div class="psui-el-simple-alert" v-bind="$attrs" @click.stop="$emit('click')">
3
- <PsIcon
4
- :icon="icon"
5
- :icon-classes="iconClass"
6
- :size="iconSize"
7
- />
8
- <p class="psui-el-simple-alert-message">{{ message }}</p>
9
- <button class="psui-el-simple-alert-button" :class="buttonClass" @click.stop="$emit('close')">close</button>
10
- </div>
1
+ <template>
2
+ <div
3
+ class="psui-el-simple-alert"
4
+ v-bind="$attrs"
5
+ @click.stop="$emit('click')"
6
+ >
7
+ <PsIcon
8
+ :icon="icon"
9
+ :icon-classes="iconClass"
10
+ :size="iconSize"
11
+ />
12
+ <p class="psui-el-simple-alert-message">
13
+ {{ message }}
14
+ </p>
15
+ <button
16
+ class="psui-el-simple-alert-button"
17
+ :class="buttonClass"
18
+ @click.stop="$emit('close')"
19
+ >
20
+ close
21
+ </button>
22
+ </div>
11
23
  </template>
12
24
 
13
25
  <script>
package/src/components/notifications/PsToast.vue CHANGED
@@ -1,9 +1,14 @@
1
1
  <template>
2
- <div class='psui-el-toast' :class="getComponentClass">
2
+ <div
3
+ class="psui-el-toast"
4
+ :class="getComponentClass"
5
+ >
3
6
  <i class="material-icons-round psui-el-toast-icon">{{ icon }}</i>
4
- <p class="psui-el-toast-message">{{ message }}</p>
7
+ <p class="psui-el-toast-message">
8
+ {{ message }}
9
+ </p>
5
10
  <div class="psui-el-toast-actions">
6
- <slot></slot>
11
+ <slot />
7
12
  </div>
8
13
  </div>
9
14
  </template>
package/src/components/playground/PsScrollBar.vue CHANGED
@@ -4,97 +4,169 @@
4
4
  class="visible-scrollbar psui-flex psui-flex-col psui-h-full psui-w-56 psui-bg-gray-30 psui-p-2"
5
5
  @click="onClick"
6
6
  >
7
- <h2 class="psui-font-bold">Scrollbar Playground (click over here to copy the computed style to clipboard)</h2>
8
- <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
9
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
10
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
11
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
12
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
13
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
14
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
15
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
16
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
17
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
18
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
19
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
20
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
21
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
22
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
23
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
24
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
25
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
26
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
27
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
28
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
29
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
30
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
31
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
32
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
7
+ <h2 class="psui-font-bold">
8
+ Scrollbar Playground (click over here to copy the computed style to clipboard)
9
+ </h2>
10
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
11
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
12
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
13
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
14
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
15
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
16
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
17
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
18
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
19
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
20
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
21
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
22
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
23
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
24
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
25
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
26
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
27
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
28
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
29
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
30
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
31
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
32
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
33
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
34
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
33
35
  </div>
34
36
  <div class="psui-flex psui-bg-gray-60 psui-p-2 psui-gap-4">
35
37
  <div class="psui-flex psui-flex-col">
36
38
  <div class="psui-flex psui-flex-col psui-w-48">
37
39
  <label for="width">Scroll Width (px)</label>
38
- <input type="text" id="width" name="width" @change="onChange">
40
+ <input
41
+ type="text"
42
+ id="width"
43
+ name="width"
44
+ @change="onChange"
45
+ >
39
46
  </div>
40
47
  <div class="psui-flex psui-flex-col psui-w-48">
41
48
  <label for="width">Scroll Height (px)</label>
42
- <input type="text" id="height" name="height" @change="onChange">
49
+ <input
50
+ type="text"
51
+ id="height"
52
+ name="height"
53
+ @change="onChange"
54
+ >
43
55
  </div>
44
56
  <div class="psui-flex psui-flex-col psui-w-48">
45
57
  <label for="width">ScrollTrack Color</label>
46
- <input type="text" id="track" name="track" @change="onChange">
58
+ <input
59
+ type="text"
60
+ id="track"
61
+ name="track"
62
+ @change="onChange"
63
+ >
47
64
  </div>
48
65
  <div class="psui-flex psui-flex-col psui-w-48">
49
66
  <label for="width">Thumb Color</label>
50
- <input type="text" id="thumb" name="thumb" @change="onChange">
67
+ <input
68
+ type="text"
69
+ id="thumb"
70
+ name="thumb"
71
+ @change="onChange"
72
+ >
51
73
  </div>
52
74
  <div class="psui-flex psui-flex-col psui-w-48">
53
75
  <label for="width">Thumb Border-Radius (px)</label>
54
- <input type="text" id="thumb-radius" name="thumb-radius" @change="onChange">
76
+ <input
77
+ type="text"
78
+ id="thumb-radius"
79
+ name="thumb-radius"
80
+ @change="onChange"
81
+ >
55
82
  </div>
56
83
  <div class="psui-flex psui-flex-col psui-w-48">
57
84
  <label for="width">Thumb Border Size(px)</label>
58
- <input type="text" id="thumb-border" name="thumb-border" @change="onChange">
85
+ <input
86
+ type="text"
87
+ id="thumb-border"
88
+ name="thumb-border"
89
+ @change="onChange"
90
+ >
59
91
  </div>
60
92
  <div class="psui-flex psui-flex-col psui-w-48">
61
93
  <label for="width">Thumb Border Color</label>
62
- <input type="text" id="thumb-border-color" name="thumb-border-color" @change="onChange">
94
+ <input
95
+ type="text"
96
+ id="thumb-border-color"
97
+ name="thumb-border-color"
98
+ @change="onChange"
99
+ >
63
100
  </div>
64
101
  <div class="psui-flex psui-flex-col psui-w-48">
65
102
  <label for="width">Thumb Border Style</label>
66
- <select id="thumb-border-style" name="thumb-border-style" v-model="selectedStyle">
67
- <option value="" hidden selected></option>
68
- <option
69
- v-for="(style, index) in borderStyle"
70
- :value="style"
71
- :key="index"
72
- >{{style}}</option>
103
+ <select
104
+ id="thumb-border-style"
105
+ name="thumb-border-style"
106
+ v-model="selectedStyle"
107
+ >
108
+ <option
109
+ value=""
110
+ hidden
111
+ selected
112
+ />
113
+ <option
114
+ v-for="(style, index) in borderStyle"
115
+ :value="style"
116
+ :key="index"
117
+ >
118
+ {{ style }}
119
+ </option>
73
120
  </select>
74
121
  </div>
75
122
  </div>
76
123
  <div class="psui-flex psui-flex-col">
77
124
  <div class="psui-flex psui-flex-col psui-w-48">
78
125
  <label for="width">Thumb Hover Color</label>
79
- <input type="text" id="thumb-hover-color" name="thumb-hover-color" @change="onChange">
126
+ <input
127
+ type="text"
128
+ id="thumb-hover-color"
129
+ name="thumb-hover-color"
130
+ @change="onChange"
131
+ >
80
132
  </div>
81
133
  <div class="psui-flex psui-flex-col psui-w-48">
82
134
  <label for="width">Thumb Hover Border Size</label>
83
- <input type="text" id="thumb-hover-border-size" name="thumb-hover-border-size" @change="onChange">
135
+ <input
136
+ type="text"
137
+ id="thumb-hover-border-size"
138
+ name="thumb-hover-border-size"
139
+ @change="onChange"
140
+ >
84
141
  </div>
85
142
  <div class="psui-flex psui-flex-col psui-w-48">
86
143
  <label for="width">Thumb Hover Border Color</label>
87
- <input type="text" id="thumb-hover-border-color" name="thumb-hover-border-color" @change="onChange">
144
+ <input
145
+ type="text"
146
+ id="thumb-hover-border-color"
147
+ name="thumb-hover-border-color"
148
+ @change="onChange"
149
+ >
88
150
  </div>
89
151
  <div class="psui-flex psui-flex-col psui-w-48">
90
152
  <label for="width">Thumb Border Style</label>
91
- <select id="thumb-border-style" name="thumb-border-style" v-model="selectedHoverStyle">
92
- <option value="" hidden selected></option>
93
- <option
94
- v-for="(style, index) in borderStyle"
95
- :value="style"
96
- :key="index"
97
- >{{style}}</option>
153
+ <select
154
+ id="thumb-border-style"
155
+ name="thumb-border-style"
156
+ v-model="selectedHoverStyle"
157
+ >
158
+ <option
159
+ value=""
160
+ hidden
161
+ selected
162
+ />
163
+ <option
164
+ v-for="(style, index) in borderStyle"
165
+ :value="style"
166
+ :key="index"
167
+ >
168
+ {{ style }}
169
+ </option>
98
170
  </select>
99
171
  </div>
100
172
  </div>