@histoire/controls 0.1.5 → 0.2.2

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/style.css CHANGED
@@ -1,253 +1,507 @@
1
- *, ::before, ::after {
2
- --tw-translate-x: 0;
3
- --tw-translate-y: 0;
4
- --tw-rotate: 0;
5
- --tw-skew-x: 0;
6
- --tw-skew-y: 0;
7
- --tw-scale-x: 1;
8
- --tw-scale-y: 1;
9
- --tw-pan-x: ;
10
- --tw-pan-y: ;
11
- --tw-pinch-zoom: ;
12
- --tw-scroll-snap-strictness: proximity;
13
- --tw-ordinal: ;
14
- --tw-slashed-zero: ;
15
- --tw-numeric-figure: ;
16
- --tw-numeric-spacing: ;
17
- --tw-numeric-fraction: ;
18
- --tw-ring-inset: ;
19
- --tw-ring-offset-width: 0px;
20
- --tw-ring-offset-color: #fff;
21
- --tw-ring-color: rgb(59 130 246 / 0.5);
22
- --tw-ring-offset-shadow: 0 0 #0000;
23
- --tw-ring-shadow: 0 0 #0000;
24
- --tw-shadow: 0 0 #0000;
25
- --tw-shadow-colored: 0 0 #0000;
26
- --tw-blur: ;
27
- --tw-brightness: ;
28
- --tw-contrast: ;
29
- --tw-grayscale: ;
30
- --tw-hue-rotate: ;
31
- --tw-invert: ;
32
- --tw-saturate: ;
33
- --tw-sepia: ;
34
- --tw-drop-shadow: ;
35
- --tw-backdrop-blur: ;
36
- --tw-backdrop-brightness: ;
37
- --tw-backdrop-contrast: ;
38
- --tw-backdrop-grayscale: ;
39
- --tw-backdrop-hue-rotate: ;
40
- --tw-backdrop-invert: ;
41
- --tw-backdrop-opacity: ;
42
- --tw-backdrop-saturate: ;
43
- --tw-backdrop-sepia:
1
+ .resize-observer[data-v-b329ee4c]{
2
+ position:absolute;
3
+ top:0;
4
+ left:0;
5
+ z-index:-1;
6
+ width:100%;
7
+ height:100%;
8
+ border:none;
9
+ background-color:transparent;
10
+ pointer-events:none;
11
+ display:block;
12
+ overflow:hidden;
13
+ opacity:0
44
14
  }
45
15
 
46
- .htw-absolute {
47
- position: absolute
16
+ .resize-observer[data-v-b329ee4c] object{
17
+ display:block;
18
+ position:absolute;
19
+ top:0;
20
+ left:0;
21
+ height:100%;
22
+ width:100%;
23
+ overflow:hidden;
24
+ pointer-events:none;
25
+ z-index:-1
48
26
  }
49
27
 
50
- .htw-relative {
51
- position: relative
28
+ .v-popper__popper{
29
+ z-index:10000;
30
+ top:0;
31
+ left:0
52
32
  }
53
33
 
54
- .htw-inset-0 {
55
- top: 0px;
56
- right: 0px;
57
- bottom: 0px;
58
- left: 0px
34
+ .v-popper__popper.v-popper__popper--hidden{
35
+ visibility:hidden;
36
+ opacity:0;
37
+ transition:opacity .15s,visibility .15s;
38
+ pointer-events:none
59
39
  }
60
40
 
61
- .htw-z-10 {
62
- z-index: 10
41
+ .v-popper__popper.v-popper__popper--shown{
42
+ visibility:visible;
43
+ opacity:1;
44
+ transition:opacity .15s
63
45
  }
64
46
 
65
- .htw-box-border {
66
- box-sizing: border-box
47
+ .v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{
48
+ transition:none!important
67
49
  }
68
50
 
69
- .htw-flex {
70
- display: flex
51
+ .v-popper__backdrop{
52
+ position:absolute;
53
+ top:0;
54
+ left:0;
55
+ width:100%;
56
+ height:100%;
57
+ display:none
71
58
  }
72
59
 
73
- .htw-h-\[16px\] {
74
- height: 16px
60
+ .v-popper__inner{
61
+ position:relative;
62
+ box-sizing:border-box;
63
+ overflow-y:auto
75
64
  }
76
65
 
77
- .htw-w-\[16px\] {
78
- width: 16px
66
+ .v-popper__inner>div{
67
+ position:relative;
68
+ z-index:1;
69
+ max-width:inherit;
70
+ max-height:inherit
79
71
  }
80
72
 
81
- .htw-w-full {
82
- width: 100%
73
+ .v-popper__arrow-container{
74
+ position:absolute;
75
+ width:10px;
76
+ height:10px
83
77
  }
84
78
 
85
- .htw-cursor-pointer {
86
- cursor: pointer
79
+ .v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{
80
+ display:none
87
81
  }
88
82
 
89
- .htw-cursor-text {
90
- cursor: text
83
+ .v-popper__arrow-inner,.v-popper__arrow-outer{
84
+ border-style:solid;
85
+ position:absolute;
86
+ top:0;
87
+ left:0;
88
+ width:0;
89
+ height:0
91
90
  }
92
91
 
93
- .htw-select-none {
94
- -webkit-user-select: none;
95
- -moz-user-select: none;
96
- -ms-user-select: none;
97
- user-select: none
92
+ .v-popper__arrow-inner{
93
+ visibility:hidden;
94
+ border-width:7px
98
95
  }
99
96
 
100
- .htw-items-center {
101
- align-items: center
97
+ .v-popper__arrow-outer{
98
+ border-width:6px
102
99
  }
103
100
 
104
- .htw-gap-2 {
105
- gap: 0.5rem
101
+ .v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
102
+ left:-2px
106
103
  }
107
104
 
108
- .htw-rounded-sm {
109
- border-radius: 0.25rem
105
+ .v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
106
+ left:-1px
110
107
  }
111
108
 
112
- .htw-border {
113
- border-width: 1px
109
+ .v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{
110
+ border-bottom-width:0;
111
+ border-left-color:transparent!important;
112
+ border-right-color:transparent!important;
113
+ border-bottom-color:transparent!important
114
114
  }
115
115
 
116
- .htw-border-8 {
117
- border-width: 8px
116
+ .v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{
117
+ top:-2px
118
118
  }
119
119
 
120
- .htw-border-primary-500 {
121
- --tw-border-opacity: 1;
122
- border-color: rgb(16 185 129 / var(--tw-border-opacity))
120
+ .v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{
121
+ top:0
123
122
  }
124
123
 
125
- .htw-border-gray-300 {
126
- --tw-border-opacity: 1;
127
- border-color: rgb(212 212 216 / var(--tw-border-opacity))
124
+ .v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
125
+ border-top-width:0;
126
+ border-left-color:transparent!important;
127
+ border-right-color:transparent!important;
128
+ border-top-color:transparent!important
128
129
  }
129
130
 
130
- .htw-bg-transparent {
131
- background-color: transparent
131
+ .v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
132
+ top:-4px
132
133
  }
133
134
 
134
- .htw-stroke-white {
135
- stroke: #fff
135
+ .v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
136
+ top:-6px
136
137
  }
137
138
 
138
- .htw-stroke-2 {
139
- stroke-width: 2
139
+ .v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
140
+ top:-2px
140
141
  }
141
142
 
142
- .htw-p-2 {
143
- padding: 0.5rem
143
+ .v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
144
+ top:-1px
144
145
  }
145
146
 
146
- .htw-px-4 {
147
- padding-left: 1rem;
148
- padding-right: 1rem
147
+ .v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
148
+ border-left-width:0;
149
+ border-left-color:transparent!important;
150
+ border-top-color:transparent!important;
151
+ border-bottom-color:transparent!important
149
152
  }
150
153
 
151
- .htw-py-3 {
152
- padding-top: 0.75rem;
153
- padding-bottom: 0.75rem
154
+ .v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
155
+ left:-4px
154
156
  }
155
157
 
156
- .htw-px-2 {
157
- padding-left: 0.5rem;
158
- padding-right: 0.5rem
158
+ .v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
159
+ left:-6px
159
160
  }
160
161
 
161
- .htw-py-0 {
162
- padding-top: 0px;
163
- padding-bottom: 0px
162
+ .v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{
163
+ right:-10px
164
164
  }
165
165
 
166
- .htw-text-sm {
167
- font-size: 0.875rem;
168
- line-height: 1.25rem
166
+ .v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{
167
+ border-right-width:0;
168
+ border-top-color:transparent!important;
169
+ border-right-color:transparent!important;
170
+ border-bottom-color:transparent!important
169
171
  }
170
172
 
171
- .htw-text-white {
172
- --tw-text-opacity: 1;
173
- color: rgb(255 255 255 / var(--tw-text-opacity))
173
+ .v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{
174
+ left:-2px
174
175
  }
175
176
 
176
- .htw-text-inherit {
177
- color: inherit
177
+ .v-popper--theme-dropdown .v-popper__inner{
178
+ background:#fff;
179
+ color:#000;
180
+ border-radius:6px;
181
+ border:1px solid #ddd;
182
+ box-shadow:0 6px 30px #0000001a
178
183
  }
179
184
 
180
- .htw-outline-none {
181
- outline: 2px solid transparent;
182
- outline-offset: 2px
185
+ .v-popper--theme-dropdown .v-popper__arrow-inner{
186
+ visibility:visible;
187
+ border-color:#fff
183
188
  }
184
189
 
185
- .htw-transition-border {
186
- transition-property: border;
187
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
188
- transition-duration: 150ms
190
+ .v-popper--theme-dropdown .v-popper__arrow-outer{
191
+ border-color:#ddd
189
192
  }
190
193
 
191
- .htw-transition-all {
192
- transition-property: all;
193
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
194
- transition-duration: 150ms
194
+ .v-popper--theme-tooltip .v-popper__inner{
195
+ background:rgba(0,0,0,.8);
196
+ color:#fff;
197
+ border-radius:6px;
198
+ padding:7px 12px 6px
195
199
  }
196
200
 
197
- .htw-transition-none {
198
- transition-property: none
201
+ .v-popper--theme-tooltip .v-popper__arrow-outer{
202
+ border-color:#000c
199
203
  }
200
204
 
201
- .htw-delay-150 {
202
- transition-delay: 150ms
205
+ *, ::before, ::after{
206
+ --tw-translate-x:0;
207
+ --tw-translate-y:0;
208
+ --tw-rotate:0;
209
+ --tw-skew-x:0;
210
+ --tw-skew-y:0;
211
+ --tw-scale-x:1;
212
+ --tw-scale-y:1;
213
+ --tw-pan-x: ;
214
+ --tw-pan-y: ;
215
+ --tw-pinch-zoom: ;
216
+ --tw-scroll-snap-strictness:proximity;
217
+ --tw-ordinal: ;
218
+ --tw-slashed-zero: ;
219
+ --tw-numeric-figure: ;
220
+ --tw-numeric-spacing: ;
221
+ --tw-numeric-fraction: ;
222
+ --tw-ring-inset: ;
223
+ --tw-ring-offset-width:0px;
224
+ --tw-ring-offset-color:#fff;
225
+ --tw-ring-color:rgb(59 130 246 / 0.5);
226
+ --tw-ring-offset-shadow:0 0 #0000;
227
+ --tw-ring-shadow:0 0 #0000;
228
+ --tw-shadow:0 0 #0000;
229
+ --tw-shadow-colored:0 0 #0000;
230
+ --tw-blur: ;
231
+ --tw-brightness: ;
232
+ --tw-contrast: ;
233
+ --tw-grayscale: ;
234
+ --tw-hue-rotate: ;
235
+ --tw-invert: ;
236
+ --tw-saturate: ;
237
+ --tw-sepia: ;
238
+ --tw-drop-shadow: ;
239
+ --tw-backdrop-blur: ;
240
+ --tw-backdrop-brightness: ;
241
+ --tw-backdrop-contrast: ;
242
+ --tw-backdrop-grayscale: ;
243
+ --tw-backdrop-hue-rotate: ;
244
+ --tw-backdrop-invert: ;
245
+ --tw-backdrop-opacity: ;
246
+ --tw-backdrop-saturate: ;
247
+ --tw-backdrop-sepia:
203
248
  }
204
249
 
205
- .htw-duration-150 {
206
- transition-duration: 150ms
250
+ .htw-absolute{
251
+ position:absolute
207
252
  }
208
253
 
209
- .htw-duration-200 {
210
- transition-duration: 200ms
254
+ .htw-relative{
255
+ position:relative
211
256
  }
212
257
 
213
- .htw-ease-out {
214
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
258
+ .htw-inset-0{
259
+ top:0px;
260
+ right:0px;
261
+ bottom:0px;
262
+ left:0px
215
263
  }
216
264
 
217
- .htw-ease-in-out {
218
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
265
+ .htw-z-10{
266
+ z-index:10
219
267
  }
220
268
 
221
- .htw-dark body {
222
- --tw-text-opacity: 1;
223
- color: rgb(244 244 245 / var(--tw-text-opacity))
269
+ .-htw-my-1{
270
+ margin-top:-0.25rem;
271
+ margin-bottom:-0.25rem
224
272
  }
225
273
 
226
- .hover\:htw-bg-primary-100:hover {
227
- --tw-bg-opacity: 1;
228
- background-color: rgb(209 250 229 / var(--tw-bg-opacity))
274
+ .htw-box-border{
275
+ box-sizing:border-box
229
276
  }
230
277
 
231
- .focus\:htw-border-primary-500:focus {
232
- --tw-border-opacity: 1;
233
- border-color: rgb(16 185 129 / var(--tw-border-opacity))
278
+ .htw-block{
279
+ display:block
234
280
  }
235
281
 
236
- .htw-group:active .group-active\:htw-bg-gray-500\/20 {
237
- background-color: rgb(113 113 122 / 0.2)
282
+ .htw-flex{
283
+ display:flex
238
284
  }
239
285
 
240
- .htw-dark .dark\:htw-border-gray-500 {
241
- --tw-border-opacity: 1;
242
- border-color: rgb(113 113 122 / var(--tw-border-opacity))
286
+ .htw-h-\[16px\]{
287
+ height:16px
243
288
  }
244
289
 
245
- .htw-dark .dark\:hover\:htw-bg-primary-700:hover {
246
- --tw-bg-opacity: 1;
247
- background-color: rgb(4 120 87 / var(--tw-bg-opacity))
290
+ .htw-min-h-\[26px\]{
291
+ min-height:26px
248
292
  }
249
293
 
250
- .htw-dark .dark\:focus\:htw-border-primary-500:focus {
251
- --tw-border-opacity: 1;
252
- border-color: rgb(16 185 129 / var(--tw-border-opacity))
294
+ .htw-w-28{
295
+ width:7rem
296
+ }
297
+
298
+ .htw-w-\[16px\]{
299
+ width:16px
300
+ }
301
+
302
+ .htw-w-full{
303
+ width:100%
304
+ }
305
+
306
+ .htw-shrink-0{
307
+ flex-shrink:0
308
+ }
309
+
310
+ .htw-grow{
311
+ flex-grow:1
312
+ }
313
+
314
+ .htw-cursor-pointer{
315
+ cursor:pointer
316
+ }
317
+
318
+ .htw-cursor-ew-resize{
319
+ cursor:ew-resize
320
+ }
321
+
322
+ .htw-cursor-text{
323
+ cursor:text
324
+ }
325
+
326
+ .htw-select-none{
327
+ -webkit-user-select:none;
328
+ -moz-user-select:none;
329
+ -ms-user-select:none;
330
+ user-select:none
331
+ }
332
+
333
+ .htw-resize-y{
334
+ resize:vertical
335
+ }
336
+
337
+ .htw-flex-wrap{
338
+ flex-wrap:wrap
339
+ }
340
+
341
+ .htw-items-center{
342
+ align-items:center
343
+ }
344
+
345
+ .htw-gap-2{
346
+ gap:0.5rem
347
+ }
348
+
349
+ .htw-overflow-hidden{
350
+ overflow:hidden
351
+ }
352
+
353
+ .htw-text-ellipsis{
354
+ text-overflow:ellipsis
355
+ }
356
+
357
+ .htw-whitespace-nowrap{
358
+ white-space:nowrap
359
+ }
360
+
361
+ .htw-rounded-sm{
362
+ border-radius:0.25rem
363
+ }
364
+
365
+ .htw-border{
366
+ border-width:1px
367
+ }
368
+
369
+ .htw-border-8{
370
+ border-width:8px
371
+ }
372
+
373
+ .htw-border-solid{
374
+ border-style:solid
375
+ }
376
+
377
+ .htw-border-primary-500{
378
+ --tw-border-opacity:1;
379
+ border-color:rgb(16 185 129 / var(--tw-border-opacity))
380
+ }
381
+
382
+ .htw-border-black\/25{
383
+ border-color:rgb(0 0 0 / 0.25)
384
+ }
385
+
386
+ .htw-bg-transparent{
387
+ background-color:transparent
388
+ }
389
+
390
+ .htw-stroke-white{
391
+ stroke:#fff
392
+ }
393
+
394
+ .htw-stroke-2{
395
+ stroke-width:2
396
+ }
397
+
398
+ .htw-p-2{
399
+ padding:0.5rem
400
+ }
401
+
402
+ .htw-py-1{
403
+ padding-top:0.25rem;
404
+ padding-bottom:0.25rem
405
+ }
406
+
407
+ .htw-px-2{
408
+ padding-left:0.5rem;
409
+ padding-right:0.5rem
410
+ }
411
+
412
+ .htw-pl-2{
413
+ padding-left:0.5rem
414
+ }
415
+
416
+ .htw-text-white{
417
+ --tw-text-opacity:1;
418
+ color:rgb(255 255 255 / var(--tw-text-opacity))
419
+ }
420
+
421
+ .htw-text-inherit{
422
+ color:inherit
423
+ }
424
+
425
+ .htw-outline-none{
426
+ outline:2px solid transparent;
427
+ outline-offset:2px
428
+ }
429
+
430
+ .htw-transition-border{
431
+ transition-property:border;
432
+ transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
433
+ transition-duration:150ms
434
+ }
435
+
436
+ .htw-transition-all{
437
+ transition-property:all;
438
+ transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
439
+ transition-duration:150ms
440
+ }
441
+
442
+ .htw-transition-none{
443
+ transition-property:none
444
+ }
445
+
446
+ .htw-delay-150{
447
+ transition-delay:150ms
448
+ }
449
+
450
+ .htw-duration-150{
451
+ transition-duration:150ms
452
+ }
453
+
454
+ .htw-duration-200{
455
+ transition-duration:200ms
456
+ }
457
+
458
+ .htw-ease-out{
459
+ transition-timing-function:cubic-bezier(0, 0, 0.2, 1)
460
+ }
461
+
462
+ .htw-ease-in-out{
463
+ transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)
464
+ }
465
+
466
+ body {
467
+ font-size: 18px;
468
+ }
469
+
470
+ .htw-dark body{
471
+ --tw-text-opacity:1;
472
+ color:rgb(244 244 245 / var(--tw-text-opacity))
473
+ }
474
+
475
+ @media (min-width: 640px) {
476
+ body {
477
+ font-size: 14px;
478
+ }
479
+ }
480
+
481
+ .hover\:htw-bg-primary-100:hover{
482
+ --tw-bg-opacity:1;
483
+ background-color:rgb(209 250 229 / var(--tw-bg-opacity))
484
+ }
485
+
486
+ .focus\:htw-border-primary-500:focus{
487
+ --tw-border-opacity:1;
488
+ border-color:rgb(16 185 129 / var(--tw-border-opacity))
489
+ }
490
+
491
+ .htw-group:active .group-active\:htw-bg-gray-500\/20{
492
+ background-color:rgb(113 113 122 / 0.2)
493
+ }
494
+
495
+ .htw-dark .dark\:htw-border-white\/25{
496
+ border-color:rgb(255 255 255 / 0.25)
497
+ }
498
+
499
+ .htw-dark .dark\:hover\:htw-bg-primary-800:hover{
500
+ --tw-bg-opacity:1;
501
+ background-color:rgb(6 95 70 / var(--tw-bg-opacity))
502
+ }
503
+
504
+ .htw-dark .dark\:focus\:htw-border-primary-500:focus{
505
+ --tw-border-opacity:1;
506
+ border-color:rgb(16 185 129 / var(--tw-border-opacity))
253
507
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@histoire/controls",
3
- "version": "0.1.5",
3
+ "version": "0.2.2",
4
4
  "description": "Prebuilt controls components",
5
5
  "license": "MIT",
6
6
  "author": {
@@ -30,21 +30,21 @@
30
30
  "*.postcss",
31
31
  "*.vue"
32
32
  ],
33
- "dependencies": {},
34
- "peerDependencies": {},
35
33
  "devDependencies": {
36
34
  "@peeky/test": "^0.13.5",
37
35
  "@types/node": "^17.0.18",
38
- "@vitejs/plugin-vue": "^2.2.4",
36
+ "@vitejs/plugin-vue": "^2.3.1",
39
37
  "@vue/test-utils": "^2.0.0-rc.17",
38
+ "@vueuse/core": "^8.1.1",
40
39
  "autoprefixer": "^10.4.2",
41
40
  "concurrently": "^7.0.0",
42
- "histoire": "^0.1.5",
41
+ "floating-vue": "^2.0.0-beta.6",
42
+ "histoire": "^0.2.2",
43
43
  "postcss": "^8.4.6",
44
44
  "postcss-import": "^14.0.2",
45
45
  "tailwindcss": "^3.0.23",
46
46
  "typescript": "^4.5.5",
47
- "vite": "^2.8.3",
47
+ "vite": "^2.9.0",
48
48
  "vue": "^3.2.31",
49
49
  "vue-tsc": "^0.33.0"
50
50
  },