@policystudio/policy-studio-ui-vue 1.0.32 → 1.0.33
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.
- package/dist/css/psui_styles.css +7 -4
- package/package.json +1 -1
- package/src/assets/images/multifamily-units.svg +10 -0
- package/src/assets/scss/components/PsChips.scss +4 -4
- package/src/components/controls/PsSwitch.vue +10 -13
- package/src/components/playground/PsScrollBar.vue +232 -38
- package/src/stories/Chips.stories.js +4 -29
- package/src/stories/Icon.stories.js +21 -0
- package/src/stories/Playground.stories.js +1 -1
package/dist/css/psui_styles.css
CHANGED
|
@@ -19453,7 +19453,9 @@ html {
|
|
|
19453
19453
|
--text-opacity: 1;
|
|
19454
19454
|
color: #798490;
|
|
19455
19455
|
color: rgba(121, 132, 144, var(--text-opacity));
|
|
19456
|
-
|
|
19456
|
+
--bg-opacity: 1;
|
|
19457
|
+
background-color: #F3F6F9;
|
|
19458
|
+
background-color: rgba(243, 246, 249, var(--bg-opacity));
|
|
19457
19459
|
transition-property: all;
|
|
19458
19460
|
cursor: pointer;
|
|
19459
19461
|
border-radius: 0.25rem;
|
|
@@ -19477,6 +19479,9 @@ html {
|
|
|
19477
19479
|
--text-opacity: 1;
|
|
19478
19480
|
color: #318FAC;
|
|
19479
19481
|
color: rgba(49, 143, 172, var(--text-opacity));
|
|
19482
|
+
--bg-opacity: 1;
|
|
19483
|
+
background-color: #F3F6F9;
|
|
19484
|
+
background-color: rgba(243, 246, 249, var(--bg-opacity));
|
|
19480
19485
|
}
|
|
19481
19486
|
|
|
19482
19487
|
.psui-el-chips.type-checkbox label:hover:before, .psui-el-chips.type-radio label:hover:before {
|
|
@@ -19508,9 +19513,6 @@ html {
|
|
|
19508
19513
|
--text-opacity: 1;
|
|
19509
19514
|
color: #515E6A;
|
|
19510
19515
|
color: rgba(81, 94, 106, var(--text-opacity));
|
|
19511
|
-
--bg-opacity: 1;
|
|
19512
|
-
background-color: #F3F6F9;
|
|
19513
|
-
background-color: rgba(243, 246, 249, var(--bg-opacity));
|
|
19514
19516
|
transition-property: all;
|
|
19515
19517
|
cursor: pointer;
|
|
19516
19518
|
border-radius: 0.25rem;
|
|
@@ -19520,6 +19522,7 @@ html {
|
|
|
19520
19522
|
padding-right: 0.75rem;
|
|
19521
19523
|
font-size: 14px;
|
|
19522
19524
|
line-height: 130%;
|
|
19525
|
+
background-color: #F6F7F8;
|
|
19523
19526
|
}
|
|
19524
19527
|
|
|
19525
19528
|
.psui-el-chips.type-button label:hover {
|
package/package.json
CHANGED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0)">
|
|
3
|
+
<path d="M18.2274 34.9462V30.9159M18.2274 34.9462H3.12439V30.9159H4.56681M18.2274 34.9462H21.1123H23.8274M34.3911 10.2129V34.9462H31.3789H28.6214M34.3911 10.2129L35.7911 10.8068V7.74167L18.2274 1.61667V4.27349M34.3911 10.2129L18.2274 4.27349M16.2759 11.6129L4.56681 16.7498M18.2274 7.74167L3.12439 14.6833V17.3826L4.56681 16.7498M18.2274 7.74167V30.9159M18.2274 7.74167V4.27349M8.34257 30.9159V25.7826H14.4941V30.9159M8.34257 30.9159H14.4941M8.34257 30.9159H4.56681M14.4941 30.9159H18.2274M4.56681 30.9159V16.7498M23.8274 34.9462V27.3947H28.6214V34.9462M23.8274 34.9462H28.6214M8.34257 18.825L12.5001 17.0432H14.4941V22.4735H8.34257V18.825ZM21.1123 18.4432H24.5062V23.7886H21.1123V18.4432ZM27.985 18.4432H31.3789V23.7886H27.985V18.4432ZM21.1123 15.1341H24.5062V9.70379L21.1123 8.34621V15.1341ZM27.985 15.1341H31.3789V12.1644L27.985 10.8068V15.1341Z" stroke="#A9AEB0" stroke-width="1.4" stroke-linejoin="round"/>
|
|
4
|
+
</g>
|
|
5
|
+
<defs>
|
|
6
|
+
<clipPath id="clip0">
|
|
7
|
+
<rect width="37.3333" height="37.3333" fill="white" transform="translate(0.791016 0.333344)"/>
|
|
8
|
+
</clipPath>
|
|
9
|
+
</defs>
|
|
10
|
+
</svg>
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
label {
|
|
31
|
-
@apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-bg-
|
|
31
|
+
@apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-bg-gray-10 psui-transition-all psui-cursor-pointer psui-rounded;
|
|
32
32
|
padding: 4px 8px 4px 6px;
|
|
33
33
|
|
|
34
34
|
&:before {
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
&:hover {
|
|
43
|
-
@apply psui-text-blue-60;
|
|
43
|
+
@apply psui-text-blue-60 psui-bg-gray-10;
|
|
44
44
|
&:before {
|
|
45
45
|
@apply psui-text-blue-50;
|
|
46
46
|
}
|
|
@@ -83,8 +83,8 @@
|
|
|
83
83
|
|
|
84
84
|
&.type-button {
|
|
85
85
|
label {
|
|
86
|
-
@apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-
|
|
87
|
-
|
|
86
|
+
@apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
|
|
87
|
+
background-color: #F6F7F8;
|
|
88
88
|
&:hover {
|
|
89
89
|
@apply psui-text-blue-60 psui-bg-white;
|
|
90
90
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class='psui-el-switch' :class="getComponentClass">
|
|
3
|
-
<input type="checkbox" :
|
|
4
|
-
<label
|
|
2
|
+
<div class='psui-el-switch' :class="getComponentClass" @click="change()">
|
|
3
|
+
<input type="checkbox" :checked="value" />
|
|
4
|
+
<label class='psui-el-switch-button' :class="[getToggleClass]" />
|
|
5
5
|
</div>
|
|
6
6
|
</template>
|
|
7
7
|
|
|
@@ -34,21 +34,18 @@ export default {
|
|
|
34
34
|
},
|
|
35
35
|
computed:{
|
|
36
36
|
getToggleClass(){
|
|
37
|
-
return
|
|
37
|
+
return this.value ? 'toggle-true' : 'toggle-false'
|
|
38
38
|
},
|
|
39
39
|
getComponentClass(){
|
|
40
40
|
return `size-${this.size}`
|
|
41
|
-
},
|
|
42
|
-
getValue:{
|
|
43
|
-
get(){
|
|
44
|
-
return this.value
|
|
45
|
-
},
|
|
46
|
-
set(value){
|
|
47
|
-
this.$emit('input', value)
|
|
48
|
-
this.$emit('change', value)
|
|
49
|
-
}
|
|
50
41
|
}
|
|
51
42
|
},
|
|
43
|
+
methods: {
|
|
44
|
+
change() {
|
|
45
|
+
this.$emit('update:value', !this.value)
|
|
46
|
+
this.$emit('change', !this.value)
|
|
47
|
+
}
|
|
48
|
+
}
|
|
52
49
|
}
|
|
53
50
|
</script>
|
|
54
51
|
|
|
@@ -1,54 +1,248 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
2
|
+
<div class="wrapper psui-flex psui-gap-4">
|
|
3
|
+
<div
|
|
4
|
+
class="visible-scrollbar psui-flex psui-flex-col psui-h-full psui-w-56 psui-bg-gray-30 psui-p-2"
|
|
5
|
+
@click="onClick"
|
|
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>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="psui-flex psui-bg-gray-60 psui-p-2 psui-gap-4">
|
|
35
|
+
<div class="psui-flex psui-flex-col">
|
|
36
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
37
|
+
<label for="width">Scroll Width (px)</label>
|
|
38
|
+
<input type="text" id="width" name="width" @change="onChange">
|
|
39
|
+
</div>
|
|
40
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
41
|
+
<label for="width">Scroll Height (px)</label>
|
|
42
|
+
<input type="text" id="height" name="height" @change="onChange">
|
|
43
|
+
</div>
|
|
44
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
45
|
+
<label for="width">ScrollTrack Color</label>
|
|
46
|
+
<input type="text" id="track" name="track" @change="onChange">
|
|
47
|
+
</div>
|
|
48
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
49
|
+
<label for="width">Thumb Color</label>
|
|
50
|
+
<input type="text" id="thumb" name="thumb" @change="onChange">
|
|
51
|
+
</div>
|
|
52
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
53
|
+
<label for="width">Thumb Border-Radius (px)</label>
|
|
54
|
+
<input type="text" id="thumb-radius" name="thumb-radius" @change="onChange">
|
|
55
|
+
</div>
|
|
56
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
57
|
+
<label for="width">Thumb Border Size(px)</label>
|
|
58
|
+
<input type="text" id="thumb-border" name="thumb-border" @change="onChange">
|
|
59
|
+
</div>
|
|
60
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
61
|
+
<label for="width">Thumb Border Color</label>
|
|
62
|
+
<input type="text" id="thumb-border-color" name="thumb-border-color" @change="onChange">
|
|
63
|
+
</div>
|
|
64
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
65
|
+
<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>
|
|
73
|
+
</select>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="psui-flex psui-flex-col">
|
|
77
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
78
|
+
<label for="width">Thumb Hover Color</label>
|
|
79
|
+
<input type="text" id="thumb-hover-color" name="thumb-hover-color" @change="onChange">
|
|
80
|
+
</div>
|
|
81
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
82
|
+
<label for="width">Thumb Hover Border Size</label>
|
|
83
|
+
<input type="text" id="thumb-hover-border-size" name="thumb-hover-border-size" @change="onChange">
|
|
84
|
+
</div>
|
|
85
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
86
|
+
<label for="width">Thumb Hover Border Color</label>
|
|
87
|
+
<input type="text" id="thumb-hover-border-color" name="thumb-hover-border-color" @change="onChange">
|
|
88
|
+
</div>
|
|
89
|
+
<div class="psui-flex psui-flex-col psui-w-48">
|
|
90
|
+
<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>
|
|
98
|
+
</select>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
32
102
|
</div>
|
|
33
103
|
</template>
|
|
34
104
|
|
|
35
105
|
<script>
|
|
106
|
+
|
|
36
107
|
export default {
|
|
37
108
|
name: 'PsScrollBar',
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
109
|
+
data(){
|
|
110
|
+
return {
|
|
111
|
+
borderStyle: ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'ouset'],
|
|
112
|
+
selectedStyle: null,
|
|
113
|
+
selectedHoverStyle: null
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
watch:{
|
|
117
|
+
selectedStyle(){
|
|
118
|
+
const visibleScrollBar = document.querySelector('.visible-scrollbar')
|
|
119
|
+
visibleScrollBar.style.setProperty('--scrollbar-thumb-border-style', this.selectedStyle)
|
|
120
|
+
},
|
|
121
|
+
selectedHoverStyle(){
|
|
122
|
+
const visibleScrollBar = document.querySelector('.visible-scrollbar')
|
|
123
|
+
visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-border-style', this.selectedHoverStyle)
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
methods:{
|
|
127
|
+
onChange(event){
|
|
128
|
+
|
|
129
|
+
const visibleScrollBar = document.querySelector('.visible-scrollbar')
|
|
130
|
+
|
|
131
|
+
switch(event.target.id){
|
|
132
|
+
case 'width':
|
|
133
|
+
visibleScrollBar.style.setProperty('--scrollbar-width', `${event.target.value}px`)
|
|
134
|
+
break
|
|
135
|
+
case 'thumb':
|
|
136
|
+
visibleScrollBar.style.setProperty('--scrollbar-thumb-color', event.target.value)
|
|
137
|
+
break
|
|
138
|
+
case 'track':
|
|
139
|
+
visibleScrollBar.style.setProperty('--scrollbar-track-color', event.target.value)
|
|
140
|
+
break
|
|
141
|
+
case 'thumb-radius':
|
|
142
|
+
visibleScrollBar.style.setProperty('--scrollbar-thumb-radius', `${event.target.value}px`)
|
|
143
|
+
break
|
|
144
|
+
case 'thumb-border':
|
|
145
|
+
visibleScrollBar.style.setProperty('--scrollbar-thumb-border', `${event.target.value}px`)
|
|
146
|
+
break
|
|
147
|
+
case 'thumb-border-color':
|
|
148
|
+
visibleScrollBar.style.setProperty('--scrollbar-thumb-border-color', event.target.value)
|
|
149
|
+
break
|
|
150
|
+
case 'height':
|
|
151
|
+
visibleScrollBar.style.setProperty('--scrollbar-height', `${event.target.value}px`)
|
|
152
|
+
break
|
|
153
|
+
case 'thumb-hover-color':
|
|
154
|
+
visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-color', event.target.value)
|
|
155
|
+
break
|
|
156
|
+
case 'thumb-hover-border-size':
|
|
157
|
+
visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-border-size', `${event.target.value}px`)
|
|
158
|
+
break
|
|
159
|
+
case 'thumb-hover-border-color':
|
|
160
|
+
visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-border-color', event.target.value)
|
|
161
|
+
break
|
|
41
162
|
}
|
|
163
|
+
|
|
42
164
|
},
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
165
|
+
onClick(){
|
|
166
|
+
const visibleScrollBar = document.querySelector('.visible-scrollbar')
|
|
167
|
+
|
|
168
|
+
const styleScrollBar = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar')
|
|
169
|
+
const styleScrollBarTrack = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-track')
|
|
170
|
+
const styleScrollBarThumb = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-thumb')
|
|
171
|
+
const styleScrollBarThumbHover = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-thumb:hover')
|
|
172
|
+
const styleScrollBarCorner = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-corner')
|
|
173
|
+
|
|
174
|
+
navigator.clipboard.writeText(`
|
|
175
|
+
::-webkit-scrollbar {
|
|
176
|
+
display: ${styleScrollBar.display};
|
|
177
|
+
width: ${styleScrollBar.width};
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
::-webkit-scrollbar-track {
|
|
181
|
+
background-color: ${styleScrollBarTrack.backgroundColor};
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
::-webkit-scrollbar-thumb {
|
|
185
|
+
background-color: ${styleScrollBarThumb.backgroundColor};
|
|
186
|
+
border-radius: ${styleScrollBarThumb.borderRadius};
|
|
187
|
+
border: ${styleScrollBarThumb.border};
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
::-webkit-scrollbar-thumb:hover {
|
|
191
|
+
background-color: ${styleScrollBarThumbHover.backgroundColor};
|
|
192
|
+
border: ${styleScrollBarThumbHover.border};
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
::-webkit-scrollbar-corner {
|
|
196
|
+
display: ${styleScrollBarCorner.display};
|
|
197
|
+
background-color: ${styleScrollBarCorner.backgroundColor};
|
|
198
|
+
height: ${styleScrollBarCorner.height};
|
|
199
|
+
width: ${styleScrollBarCorner.width};
|
|
200
|
+
}
|
|
201
|
+
`)
|
|
202
|
+
|
|
203
|
+
window.alert('Copied to clipboard')
|
|
46
204
|
}
|
|
47
|
-
}
|
|
205
|
+
},
|
|
48
206
|
}
|
|
49
207
|
|
|
50
208
|
</script>
|
|
51
209
|
|
|
52
|
-
<style>
|
|
210
|
+
<style scoped>
|
|
211
|
+
|
|
212
|
+
.visible-scrollbar{
|
|
213
|
+
overflow: scroll;
|
|
214
|
+
white-space: nowrap;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.visible-scrollbar::-webkit-scrollbar {
|
|
218
|
+
display: block;
|
|
219
|
+
width: var(--scrollbar-width, 10px);
|
|
220
|
+
height: var(--scrollbar-height, 10px);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.visible-scrollbar::-webkit-scrollbar-track {
|
|
224
|
+
background: var(--scrollbar-track-color, gray);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.visible-scrollbar::-webkit-scrollbar-thumb {
|
|
228
|
+
background: var(--scrollbar-thumb-color,black);
|
|
229
|
+
border-radius: var(--scrollbar-thumb-radius);
|
|
230
|
+
border: var(--scrollbar-thumb-border) var(--scrollbar-thumb-border-style) var(--scrollbar-thumb-border-color);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.visible-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
234
|
+
background: var(--scrollbar-thumb-hover-color, black);
|
|
235
|
+
border: var(--scrollbar-thumb-hover-border-size) var(--scrollbar-thumb-hover-border-style) var(--scrollbar-thumb-hover-border-color);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.visible-scrollbar::-webkit-scrollbar-corner {
|
|
239
|
+
display: none;
|
|
240
|
+
background-color: var(--scrollbar-track-color, gray);
|
|
241
|
+
height: var(--scrollbar-height, 10px);
|
|
242
|
+
width: var(--scrollbar-width, 10px);
|
|
243
|
+
}
|
|
53
244
|
|
|
245
|
+
.wrapper {
|
|
246
|
+
height: 450px;
|
|
247
|
+
}
|
|
54
248
|
</style>
|
|
@@ -11,46 +11,21 @@ const Template = (args, { argTypes }) => ({
|
|
|
11
11
|
data: ()=>{
|
|
12
12
|
return{
|
|
13
13
|
isChecked: null,
|
|
14
|
+
isCheckedTwo: null,
|
|
14
15
|
}
|
|
15
16
|
},
|
|
16
17
|
template: `<div style="display:flex; gap: 10px;">
|
|
17
18
|
<PsChips v-bind='$props' type="button" @update:checked='isChecked = $event' :checked='isChecked'/>
|
|
18
19
|
<PsChips v-bind='$props' label="Simple chips with icons" type="button" layout="with-icon" icon="home" @update:checked='isChecked = $event' :checked='isChecked'/>
|
|
19
20
|
<PsChips v-bind='$props' label="Radio chips" type="radio" @update:checked='isChecked = $event' :checked='isChecked'/>
|
|
20
|
-
<PsChips v-bind='$props' label="Checkbox chips" type="checkbox" @update:checked='
|
|
21
|
+
<PsChips v-bind='$props' label="Checkbox chips" type="checkbox" @update:checked='isCheckedTwo = $event' :checked='isCheckedTwo'/>
|
|
21
22
|
<PsChips v-bind='$props' label="Rich chips" type="button" layout="rich" icon="text_snippet" @update:checked='isChecked = $event' :checked='isChecked'/>
|
|
22
23
|
</div>
|
|
23
24
|
`
|
|
24
25
|
})
|
|
25
26
|
|
|
26
|
-
export const
|
|
27
|
-
|
|
27
|
+
export const Default = Template.bind({})
|
|
28
|
+
Default.args = {
|
|
28
29
|
label: 'Simple Chip',
|
|
29
30
|
icon:'',
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export const SimpleWithIcon = Template.bind({})
|
|
33
|
-
SimpleWithIcon.args = {
|
|
34
|
-
label: 'Simple With Icon',
|
|
35
|
-
icon: 'home',
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export const Radio = Template.bind({})
|
|
39
|
-
Radio.args = {
|
|
40
|
-
label: 'Radio Chip',
|
|
41
|
-
type:'radio'
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
export const Checkbox = Template.bind({})
|
|
45
|
-
Checkbox.args = {
|
|
46
|
-
label: 'Checkbox Chip',
|
|
47
|
-
type: 'checkbox'
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export const Rich = Template.bind({})
|
|
51
|
-
Rich.args = {
|
|
52
|
-
label: 'Rich Chip',
|
|
53
|
-
type: 'button',
|
|
54
|
-
icon: 'text_snippet',
|
|
55
|
-
layout: 'rich'
|
|
56
31
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import PsIcon from '../components/ui/PsIcon.vue'
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Components/Icon',
|
|
5
|
+
component: PsIcon,
|
|
6
|
+
argTypes: {},
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const Template = (args, { argTypes }) => ({
|
|
10
|
+
props: Object.keys(argTypes),
|
|
11
|
+
components: { PsIcon },
|
|
12
|
+
template: `
|
|
13
|
+
<div class='psui-flex'>
|
|
14
|
+
<PsIcon v-bind="$props" type='svg' icon="/images/multifamily-units.svg" />
|
|
15
|
+
<PsIcon v-bind="$props" type='svg' icon="/images/multifamily-units.svg"/>
|
|
16
|
+
</div>
|
|
17
|
+
`,
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
export const IconSimple = Template.bind({})
|
|
21
|
+
IconSimple.args = {}
|