@uibit/image-comparison 0.1.0 → 0.2.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.
- package/README.md +10 -0
- package/custom-elements.json +470 -1
- package/dist/frameworks/angular/index.ts +45 -36
- package/dist/frameworks/astro/index.d.ts +9 -1
- package/dist/frameworks/preact/index.d.ts +3 -0
- package/dist/frameworks/react/index.ts +115 -0
- package/dist/frameworks/solid/index.d.ts +2 -1
- package/dist/frameworks/stencil/index.d.ts +3 -0
- package/dist/frameworks/svelte/index.svelte +59 -19
- package/dist/frameworks/vue/index.ts +107 -23
- package/dist/image-comparison.d.ts +4 -1
- package/dist/image-comparison.d.ts.map +1 -1
- package/dist/image-comparison.js +4 -1
- package/dist/image-comparison.js.map +1 -1
- package/package.json +7 -7
- package/dist/frameworks/react/index.d.ts +0 -22
package/README.md
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
# Image Comparison
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@uibit/image-comparison)
|
|
4
|
+
|
|
5
|
+
|
|
3
6
|
[Interactive Demonstration](https://rawlings.github.io/uibit/components/image-comparison)
|
|
4
7
|
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @uibit/image-comparison
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
|
|
5
15
|
Image Comparison provides a visual comparison curtain layout. It overlays two images (representing before and after states) and allows users to peel them back horizontally, vertically, diagonally, or radially via an interactive handle slider.
|
|
6
16
|
|
|
7
17
|
## Value Delivery
|
package/custom-elements.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "An interactive visual comparison curtain component. Displays before and after states
|
|
11
|
+
"description": "An interactive visual comparison curtain component. Displays before and after states",
|
|
12
12
|
"name": "ImageComparison",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
@@ -191,6 +191,211 @@
|
|
|
191
191
|
"kind": "method",
|
|
192
192
|
"name": "_renderHandleIcon",
|
|
193
193
|
"privacy": "private"
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"kind": "field",
|
|
197
|
+
"name": "locale",
|
|
198
|
+
"type": {
|
|
199
|
+
"text": "string"
|
|
200
|
+
},
|
|
201
|
+
"default": "''",
|
|
202
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
203
|
+
"attribute": "locale",
|
|
204
|
+
"inheritedFrom": {
|
|
205
|
+
"name": "UIBitElement",
|
|
206
|
+
"module": "../../platform/core/src/element.ts"
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"kind": "field",
|
|
211
|
+
"name": "resolvedLocale",
|
|
212
|
+
"type": {
|
|
213
|
+
"text": "string | undefined"
|
|
214
|
+
},
|
|
215
|
+
"description": "Resolves the active locale for formatting and localization.\nChecks the `locale` property first, then traverses up the DOM to find\nthe nearest ancestor with a `lang` attribute, and finally falls back\nto undefined (which defaults to browser locale).",
|
|
216
|
+
"readonly": true,
|
|
217
|
+
"inheritedFrom": {
|
|
218
|
+
"name": "UIBitElement",
|
|
219
|
+
"module": "../../platform/core/src/element.ts"
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"kind": "field",
|
|
224
|
+
"name": "_disposables",
|
|
225
|
+
"type": {
|
|
226
|
+
"text": "Set<() => void>"
|
|
227
|
+
},
|
|
228
|
+
"privacy": "private",
|
|
229
|
+
"default": "new Set()",
|
|
230
|
+
"inheritedFrom": {
|
|
231
|
+
"name": "UIBitElement",
|
|
232
|
+
"module": "../../platform/core/src/element.ts"
|
|
233
|
+
}
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"kind": "method",
|
|
237
|
+
"name": "createProperty",
|
|
238
|
+
"static": true,
|
|
239
|
+
"parameters": [
|
|
240
|
+
{
|
|
241
|
+
"name": "name",
|
|
242
|
+
"type": {
|
|
243
|
+
"text": "PropertyKey"
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "options",
|
|
248
|
+
"optional": true,
|
|
249
|
+
"type": {
|
|
250
|
+
"text": "PropertyDeclaration"
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
],
|
|
254
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default.",
|
|
255
|
+
"inheritedFrom": {
|
|
256
|
+
"name": "UIBitElement",
|
|
257
|
+
"module": "../../platform/core/src/element.ts"
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"kind": "method",
|
|
262
|
+
"name": "finalizeStyles",
|
|
263
|
+
"static": true,
|
|
264
|
+
"return": {
|
|
265
|
+
"type": {
|
|
266
|
+
"text": "Array<any>"
|
|
267
|
+
}
|
|
268
|
+
},
|
|
269
|
+
"parameters": [
|
|
270
|
+
{
|
|
271
|
+
"name": "styles",
|
|
272
|
+
"optional": true,
|
|
273
|
+
"type": {
|
|
274
|
+
"text": "CSSResultGroup"
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
],
|
|
278
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles.",
|
|
279
|
+
"inheritedFrom": {
|
|
280
|
+
"name": "UIBitElement",
|
|
281
|
+
"module": "../../platform/core/src/element.ts"
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
"kind": "method",
|
|
286
|
+
"name": "dispatchCustomEvent",
|
|
287
|
+
"return": {
|
|
288
|
+
"type": {
|
|
289
|
+
"text": "boolean"
|
|
290
|
+
}
|
|
291
|
+
},
|
|
292
|
+
"parameters": [
|
|
293
|
+
{
|
|
294
|
+
"name": "name",
|
|
295
|
+
"type": {
|
|
296
|
+
"text": "string"
|
|
297
|
+
}
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"name": "detail",
|
|
301
|
+
"optional": true,
|
|
302
|
+
"type": {
|
|
303
|
+
"text": "T"
|
|
304
|
+
}
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
"name": "options",
|
|
308
|
+
"optional": true,
|
|
309
|
+
"type": {
|
|
310
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
],
|
|
314
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options.",
|
|
315
|
+
"inheritedFrom": {
|
|
316
|
+
"name": "UIBitElement",
|
|
317
|
+
"module": "../../platform/core/src/element.ts"
|
|
318
|
+
}
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
"kind": "method",
|
|
322
|
+
"name": "getCssPropertyValue",
|
|
323
|
+
"return": {
|
|
324
|
+
"type": {
|
|
325
|
+
"text": "string"
|
|
326
|
+
}
|
|
327
|
+
},
|
|
328
|
+
"parameters": [
|
|
329
|
+
{
|
|
330
|
+
"name": "propertyName",
|
|
331
|
+
"type": {
|
|
332
|
+
"text": "string"
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
],
|
|
336
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element.",
|
|
337
|
+
"inheritedFrom": {
|
|
338
|
+
"name": "UIBitElement",
|
|
339
|
+
"module": "../../platform/core/src/element.ts"
|
|
340
|
+
}
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"kind": "method",
|
|
344
|
+
"name": "registerDisposable",
|
|
345
|
+
"parameters": [
|
|
346
|
+
{
|
|
347
|
+
"name": "cleanup",
|
|
348
|
+
"type": {
|
|
349
|
+
"text": "() => void"
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
],
|
|
353
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM.",
|
|
354
|
+
"inheritedFrom": {
|
|
355
|
+
"name": "UIBitElement",
|
|
356
|
+
"module": "../../platform/core/src/element.ts"
|
|
357
|
+
}
|
|
358
|
+
},
|
|
359
|
+
{
|
|
360
|
+
"kind": "method",
|
|
361
|
+
"name": "listen",
|
|
362
|
+
"return": {
|
|
363
|
+
"type": {
|
|
364
|
+
"text": "() => void"
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
"parameters": [
|
|
368
|
+
{
|
|
369
|
+
"name": "target",
|
|
370
|
+
"type": {
|
|
371
|
+
"text": "EventTarget"
|
|
372
|
+
}
|
|
373
|
+
},
|
|
374
|
+
{
|
|
375
|
+
"name": "type",
|
|
376
|
+
"type": {
|
|
377
|
+
"text": "K"
|
|
378
|
+
}
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
"name": "listener",
|
|
382
|
+
"type": {
|
|
383
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
384
|
+
}
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
"name": "options",
|
|
388
|
+
"optional": true,
|
|
389
|
+
"type": {
|
|
390
|
+
"text": "boolean | AddEventListenerOptions"
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
],
|
|
394
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected.",
|
|
395
|
+
"inheritedFrom": {
|
|
396
|
+
"name": "UIBitElement",
|
|
397
|
+
"module": "../../platform/core/src/element.ts"
|
|
398
|
+
}
|
|
194
399
|
}
|
|
195
400
|
],
|
|
196
401
|
"events": [
|
|
@@ -238,12 +443,32 @@
|
|
|
238
443
|
"default": "false",
|
|
239
444
|
"description": "If true, pointer movement tracks progress immediately without click-dragging",
|
|
240
445
|
"fieldName": "hoverReveal"
|
|
446
|
+
},
|
|
447
|
+
{
|
|
448
|
+
"name": "locale",
|
|
449
|
+
"type": {
|
|
450
|
+
"text": "string"
|
|
451
|
+
},
|
|
452
|
+
"default": "''",
|
|
453
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
454
|
+
"fieldName": "locale",
|
|
455
|
+
"inheritedFrom": {
|
|
456
|
+
"name": "UIBitElement",
|
|
457
|
+
"module": "../../platform/core/src/element.ts"
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
],
|
|
461
|
+
"cssStates": [
|
|
462
|
+
{
|
|
463
|
+
"name": "dragging",
|
|
464
|
+
"description": "Active when the comparison slider bar is being dragged."
|
|
241
465
|
}
|
|
242
466
|
],
|
|
243
467
|
"superclass": {
|
|
244
468
|
"name": "UIBitElement",
|
|
245
469
|
"package": "@uibit/core"
|
|
246
470
|
},
|
|
471
|
+
"summary": "An interactive slider component for comparing two overlaying images side-by-side.\nand allows users to peel them back horizontally, vertically, diagonally, or radially.",
|
|
247
472
|
"tagName": "uibit-image-comparison",
|
|
248
473
|
"customElement": true
|
|
249
474
|
}
|
|
@@ -340,6 +565,250 @@
|
|
|
340
565
|
"path": "src/types.ts",
|
|
341
566
|
"declarations": [],
|
|
342
567
|
"exports": []
|
|
568
|
+
},
|
|
569
|
+
{
|
|
570
|
+
"kind": "javascript-module",
|
|
571
|
+
"path": "../../platform/core/src/element.ts",
|
|
572
|
+
"declarations": [
|
|
573
|
+
{
|
|
574
|
+
"kind": "class",
|
|
575
|
+
"description": "A foundational base class for all UIBit web components.\nProvides custom event helpers, default kebab-case attribute mapping,\nautomatic cleanup/disposable tracking, and auto-injected reset styles.",
|
|
576
|
+
"name": "UIBitElement",
|
|
577
|
+
"members": [
|
|
578
|
+
{
|
|
579
|
+
"kind": "field",
|
|
580
|
+
"name": "locale",
|
|
581
|
+
"type": {
|
|
582
|
+
"text": "string"
|
|
583
|
+
},
|
|
584
|
+
"default": "''",
|
|
585
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
586
|
+
"attribute": "locale"
|
|
587
|
+
},
|
|
588
|
+
{
|
|
589
|
+
"kind": "field",
|
|
590
|
+
"name": "resolvedLocale",
|
|
591
|
+
"type": {
|
|
592
|
+
"text": "string | undefined"
|
|
593
|
+
},
|
|
594
|
+
"description": "Resolves the active locale for formatting and localization.\nChecks the `locale` property first, then traverses up the DOM to find\nthe nearest ancestor with a `lang` attribute, and finally falls back\nto undefined (which defaults to browser locale).",
|
|
595
|
+
"readonly": true
|
|
596
|
+
},
|
|
597
|
+
{
|
|
598
|
+
"kind": "field",
|
|
599
|
+
"name": "_disposables",
|
|
600
|
+
"type": {
|
|
601
|
+
"text": "Set<() => void>"
|
|
602
|
+
},
|
|
603
|
+
"privacy": "private",
|
|
604
|
+
"default": "new Set()"
|
|
605
|
+
},
|
|
606
|
+
{
|
|
607
|
+
"kind": "method",
|
|
608
|
+
"name": "createProperty",
|
|
609
|
+
"static": true,
|
|
610
|
+
"parameters": [
|
|
611
|
+
{
|
|
612
|
+
"name": "name",
|
|
613
|
+
"type": {
|
|
614
|
+
"text": "PropertyKey"
|
|
615
|
+
}
|
|
616
|
+
},
|
|
617
|
+
{
|
|
618
|
+
"name": "options",
|
|
619
|
+
"optional": true,
|
|
620
|
+
"type": {
|
|
621
|
+
"text": "PropertyDeclaration"
|
|
622
|
+
}
|
|
623
|
+
}
|
|
624
|
+
],
|
|
625
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default."
|
|
626
|
+
},
|
|
627
|
+
{
|
|
628
|
+
"kind": "method",
|
|
629
|
+
"name": "finalizeStyles",
|
|
630
|
+
"static": true,
|
|
631
|
+
"return": {
|
|
632
|
+
"type": {
|
|
633
|
+
"text": "Array<any>"
|
|
634
|
+
}
|
|
635
|
+
},
|
|
636
|
+
"parameters": [
|
|
637
|
+
{
|
|
638
|
+
"name": "styles",
|
|
639
|
+
"optional": true,
|
|
640
|
+
"type": {
|
|
641
|
+
"text": "CSSResultGroup"
|
|
642
|
+
}
|
|
643
|
+
}
|
|
644
|
+
],
|
|
645
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles."
|
|
646
|
+
},
|
|
647
|
+
{
|
|
648
|
+
"kind": "method",
|
|
649
|
+
"name": "dispatchCustomEvent",
|
|
650
|
+
"return": {
|
|
651
|
+
"type": {
|
|
652
|
+
"text": "boolean"
|
|
653
|
+
}
|
|
654
|
+
},
|
|
655
|
+
"parameters": [
|
|
656
|
+
{
|
|
657
|
+
"name": "name",
|
|
658
|
+
"type": {
|
|
659
|
+
"text": "string"
|
|
660
|
+
}
|
|
661
|
+
},
|
|
662
|
+
{
|
|
663
|
+
"name": "detail",
|
|
664
|
+
"optional": true,
|
|
665
|
+
"type": {
|
|
666
|
+
"text": "T"
|
|
667
|
+
}
|
|
668
|
+
},
|
|
669
|
+
{
|
|
670
|
+
"name": "options",
|
|
671
|
+
"optional": true,
|
|
672
|
+
"type": {
|
|
673
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
674
|
+
}
|
|
675
|
+
}
|
|
676
|
+
],
|
|
677
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options."
|
|
678
|
+
},
|
|
679
|
+
{
|
|
680
|
+
"kind": "method",
|
|
681
|
+
"name": "getCssPropertyValue",
|
|
682
|
+
"return": {
|
|
683
|
+
"type": {
|
|
684
|
+
"text": "string"
|
|
685
|
+
}
|
|
686
|
+
},
|
|
687
|
+
"parameters": [
|
|
688
|
+
{
|
|
689
|
+
"name": "propertyName",
|
|
690
|
+
"type": {
|
|
691
|
+
"text": "string"
|
|
692
|
+
}
|
|
693
|
+
}
|
|
694
|
+
],
|
|
695
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element."
|
|
696
|
+
},
|
|
697
|
+
{
|
|
698
|
+
"kind": "method",
|
|
699
|
+
"name": "registerDisposable",
|
|
700
|
+
"parameters": [
|
|
701
|
+
{
|
|
702
|
+
"name": "cleanup",
|
|
703
|
+
"type": {
|
|
704
|
+
"text": "() => void"
|
|
705
|
+
}
|
|
706
|
+
}
|
|
707
|
+
],
|
|
708
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM."
|
|
709
|
+
},
|
|
710
|
+
{
|
|
711
|
+
"kind": "method",
|
|
712
|
+
"name": "listen",
|
|
713
|
+
"return": {
|
|
714
|
+
"type": {
|
|
715
|
+
"text": "() => void"
|
|
716
|
+
}
|
|
717
|
+
},
|
|
718
|
+
"parameters": [
|
|
719
|
+
{
|
|
720
|
+
"name": "target",
|
|
721
|
+
"type": {
|
|
722
|
+
"text": "EventTarget"
|
|
723
|
+
}
|
|
724
|
+
},
|
|
725
|
+
{
|
|
726
|
+
"name": "type",
|
|
727
|
+
"type": {
|
|
728
|
+
"text": "K"
|
|
729
|
+
}
|
|
730
|
+
},
|
|
731
|
+
{
|
|
732
|
+
"name": "listener",
|
|
733
|
+
"type": {
|
|
734
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
735
|
+
}
|
|
736
|
+
},
|
|
737
|
+
{
|
|
738
|
+
"name": "options",
|
|
739
|
+
"optional": true,
|
|
740
|
+
"type": {
|
|
741
|
+
"text": "boolean | AddEventListenerOptions"
|
|
742
|
+
}
|
|
743
|
+
}
|
|
744
|
+
],
|
|
745
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected."
|
|
746
|
+
},
|
|
747
|
+
{
|
|
748
|
+
"kind": "method",
|
|
749
|
+
"name": "listen",
|
|
750
|
+
"return": {
|
|
751
|
+
"type": {
|
|
752
|
+
"text": "() => void"
|
|
753
|
+
}
|
|
754
|
+
},
|
|
755
|
+
"parameters": [
|
|
756
|
+
{
|
|
757
|
+
"name": "target",
|
|
758
|
+
"type": {
|
|
759
|
+
"text": "EventTarget"
|
|
760
|
+
}
|
|
761
|
+
},
|
|
762
|
+
{
|
|
763
|
+
"name": "type",
|
|
764
|
+
"type": {
|
|
765
|
+
"text": "string"
|
|
766
|
+
}
|
|
767
|
+
},
|
|
768
|
+
{
|
|
769
|
+
"name": "listener",
|
|
770
|
+
"type": {
|
|
771
|
+
"text": "EventListenerOrEventListenerObject"
|
|
772
|
+
}
|
|
773
|
+
},
|
|
774
|
+
{
|
|
775
|
+
"name": "options",
|
|
776
|
+
"optional": true,
|
|
777
|
+
"type": {
|
|
778
|
+
"text": "boolean | AddEventListenerOptions"
|
|
779
|
+
}
|
|
780
|
+
}
|
|
781
|
+
]
|
|
782
|
+
}
|
|
783
|
+
],
|
|
784
|
+
"attributes": [
|
|
785
|
+
{
|
|
786
|
+
"name": "locale",
|
|
787
|
+
"type": {
|
|
788
|
+
"text": "string"
|
|
789
|
+
},
|
|
790
|
+
"default": "''",
|
|
791
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
792
|
+
"fieldName": "locale"
|
|
793
|
+
}
|
|
794
|
+
],
|
|
795
|
+
"superclass": {
|
|
796
|
+
"name": "LitElement",
|
|
797
|
+
"package": "lit"
|
|
798
|
+
},
|
|
799
|
+
"customElement": true
|
|
800
|
+
}
|
|
801
|
+
],
|
|
802
|
+
"exports": [
|
|
803
|
+
{
|
|
804
|
+
"kind": "js",
|
|
805
|
+
"name": "UIBitElement",
|
|
806
|
+
"declaration": {
|
|
807
|
+
"name": "UIBitElement",
|
|
808
|
+
"module": "../../platform/core/src/element.ts"
|
|
809
|
+
}
|
|
810
|
+
}
|
|
811
|
+
]
|
|
343
812
|
}
|
|
344
813
|
]
|
|
345
814
|
}
|
|
@@ -1,45 +1,54 @@
|
|
|
1
|
-
import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
|
|
1
|
+
import { Component, ChangeDetectionStrategy, ElementRef, model, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
|
|
2
2
|
import '@uibit/image-comparison';
|
|
3
3
|
import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
|
|
4
4
|
import type { ComparisonMode } from '@uibit/image-comparison';
|
|
5
|
-
|
|
6
5
|
@Component({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
selector: 'uibit-image-comparison',
|
|
7
|
+
template: '<ng-content></ng-content>',
|
|
8
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
9
|
+
standalone: true,
|
|
10
|
+
host: {
|
|
11
|
+
'(comparison-progress)': 'comparisonProgress.emit($event); progress.set($event.detail?.progress !== undefined ? $event.detail.progress : $event.target.progress)'
|
|
12
|
+
}
|
|
14
13
|
})
|
|
15
14
|
export class NgxImageComparison {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
constructor(private el: ElementRef<HTMLElementClass>){
|
|
16
|
+
effect(()=>{
|
|
17
|
+
if (this.el.nativeElement) {
|
|
18
|
+
this.el.nativeElement.mode = this.mode();
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
effect(()=>{
|
|
22
|
+
if (this.el.nativeElement) {
|
|
23
|
+
this.el.nativeElement.progress = this.progress();
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
effect(()=>{
|
|
27
|
+
if (this.el.nativeElement) {
|
|
28
|
+
this.el.nativeElement.interactive = this.interactive();
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
effect(()=>{
|
|
32
|
+
if (this.el.nativeElement) {
|
|
33
|
+
this.el.nativeElement.hoverReveal = this.hoverReveal();
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
effect(()=>{
|
|
37
|
+
if (this.el.nativeElement) {
|
|
38
|
+
this.el.nativeElement.locale = this.locale();
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
readonly mode = input<ComparisonMode>('horizontal');
|
|
43
|
+
readonly progress = model<number>(50);
|
|
44
|
+
readonly interactive = input<boolean, any>(true, {
|
|
45
|
+
transform: booleanAttribute
|
|
21
46
|
});
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
this.el.nativeElement.progress = this.progress();
|
|
25
|
-
}
|
|
47
|
+
readonly hoverReveal = input<boolean, any>(false, {
|
|
48
|
+
transform: booleanAttribute
|
|
26
49
|
});
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
});
|
|
32
|
-
effect(() => {
|
|
33
|
-
if (this.el.nativeElement) {
|
|
34
|
-
this.el.nativeElement.hoverReveal = this.hoverReveal();
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
readonly mode = input<ComparisonMode, any>('horizontal');
|
|
40
|
-
readonly progress = input<number, any>(50, { transform: numberAttribute });
|
|
41
|
-
readonly interactive = input<boolean, any>(true, { transform: booleanAttribute });
|
|
42
|
-
readonly hoverReveal = input<boolean, any>(false, { transform: booleanAttribute });
|
|
43
|
-
|
|
44
|
-
readonly comparisonProgress = output<CustomEvent<progress: number>>();
|
|
50
|
+
readonly locale = input<string>('');
|
|
51
|
+
readonly comparisonProgress = output<CustomEvent<{
|
|
52
|
+
progress: number;
|
|
53
|
+
}>>();
|
|
45
54
|
}
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
|
|
2
2
|
import '@uibit/image-comparison';
|
|
3
|
+
import type { ComparisonMode } from '@uibit/image-comparison';
|
|
3
4
|
|
|
4
5
|
declare global {
|
|
5
6
|
namespace astroHTML.JSX {
|
|
6
7
|
interface IntrinsicElements {
|
|
7
|
-
'uibit-image-comparison': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes
|
|
8
|
+
'uibit-image-comparison': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes & {
|
|
9
|
+
mode?: ComparisonMode;
|
|
10
|
+
progress?: number;
|
|
11
|
+
interactive?: boolean;
|
|
12
|
+
hoverReveal?: boolean;
|
|
13
|
+
locale?: string;
|
|
14
|
+
"on:comparison-progress"?: (event: CustomEvent<{ progress: number }>) => void;
|
|
15
|
+
};
|
|
8
16
|
}
|
|
9
17
|
}
|
|
10
18
|
}
|
|
@@ -11,6 +11,9 @@ declare module 'preact' {
|
|
|
11
11
|
progress?: number;
|
|
12
12
|
interactive?: boolean;
|
|
13
13
|
hoverReveal?: boolean;
|
|
14
|
+
locale?: string;
|
|
15
|
+
onComparisonProgress?: (event: CustomEvent<{ progress: number }>) => void;
|
|
16
|
+
"on:comparison-progress"?: (event: CustomEvent<{ progress: number }>) => void;
|
|
14
17
|
};
|
|
15
18
|
}
|
|
16
19
|
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
|
|
2
|
+
import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
|
|
3
|
+
import '@uibit/image-comparison';
|
|
4
|
+
import type { ComparisonMode } from '@uibit/image-comparison';
|
|
5
|
+
const useTypeOfLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
6
|
+
export interface ImageComparisonProps extends Omit<React.HTMLAttributes<HTMLElementClass>, 'mode' | 'progress' | 'interactive' | 'hoverReveal' | 'locale' | 'onComparisonProgress'> {
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
mode?: ComparisonMode;
|
|
9
|
+
progress?: number;
|
|
10
|
+
interactive?: boolean;
|
|
11
|
+
hoverReveal?: boolean;
|
|
12
|
+
locale?: string;
|
|
13
|
+
onComparisonProgress?: (event: CustomEvent<{
|
|
14
|
+
progress: number;
|
|
15
|
+
}>) => void;
|
|
16
|
+
}
|
|
17
|
+
export const ImageComparison = ({ ref, children, ...props }: ImageComparisonProps & {
|
|
18
|
+
ref?: React.Ref<HTMLElementClass>;
|
|
19
|
+
})=>{
|
|
20
|
+
const innerRef = useRef<HTMLElementClass>(null);
|
|
21
|
+
const propsRef = useRef(props);
|
|
22
|
+
propsRef.current = props;
|
|
23
|
+
useImperativeHandle(ref, ()=>innerRef.current!);
|
|
24
|
+
useTypeOfLayoutEffect(()=>{
|
|
25
|
+
const element = innerRef.current;
|
|
26
|
+
if (element && props.mode !== undefined) {
|
|
27
|
+
(element as any).mode = props.mode;
|
|
28
|
+
}
|
|
29
|
+
}, [
|
|
30
|
+
props.mode
|
|
31
|
+
]);
|
|
32
|
+
useTypeOfLayoutEffect(()=>{
|
|
33
|
+
const element = innerRef.current;
|
|
34
|
+
if (element && props.progress !== undefined) {
|
|
35
|
+
(element as any).progress = props.progress;
|
|
36
|
+
}
|
|
37
|
+
}, [
|
|
38
|
+
props.progress
|
|
39
|
+
]);
|
|
40
|
+
useTypeOfLayoutEffect(()=>{
|
|
41
|
+
const element = innerRef.current;
|
|
42
|
+
if (element && props.interactive !== undefined) {
|
|
43
|
+
(element as any).interactive = props.interactive;
|
|
44
|
+
}
|
|
45
|
+
}, [
|
|
46
|
+
props.interactive
|
|
47
|
+
]);
|
|
48
|
+
useTypeOfLayoutEffect(()=>{
|
|
49
|
+
const element = innerRef.current;
|
|
50
|
+
if (element && props.hoverReveal !== undefined) {
|
|
51
|
+
(element as any).hoverReveal = props.hoverReveal;
|
|
52
|
+
}
|
|
53
|
+
}, [
|
|
54
|
+
props.hoverReveal
|
|
55
|
+
]);
|
|
56
|
+
useTypeOfLayoutEffect(()=>{
|
|
57
|
+
const element = innerRef.current;
|
|
58
|
+
if (element && props.locale !== undefined) {
|
|
59
|
+
(element as any).locale = props.locale;
|
|
60
|
+
}
|
|
61
|
+
}, [
|
|
62
|
+
props.locale
|
|
63
|
+
]);
|
|
64
|
+
useTypeOfLayoutEffect(()=>{
|
|
65
|
+
const element = innerRef.current;
|
|
66
|
+
if (!element) return;
|
|
67
|
+
const handleEvent = (event: Event)=>{
|
|
68
|
+
if (propsRef.current.onComparisonProgress) {
|
|
69
|
+
propsRef.current.onComparisonProgress(event as any);
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
element.addEventListener('comparison-progress', handleEvent);
|
|
73
|
+
return ()=>{
|
|
74
|
+
element.removeEventListener('comparison-progress', handleEvent);
|
|
75
|
+
};
|
|
76
|
+
}, []);
|
|
77
|
+
const domProps = {
|
|
78
|
+
...props
|
|
79
|
+
};
|
|
80
|
+
const customPropNames = [
|
|
81
|
+
'mode',
|
|
82
|
+
'progress',
|
|
83
|
+
'interactive',
|
|
84
|
+
'hoverReveal',
|
|
85
|
+
'locale',
|
|
86
|
+
'onComparisonProgress'
|
|
87
|
+
];
|
|
88
|
+
for (const key of customPropNames){
|
|
89
|
+
delete (domProps as any)[key];
|
|
90
|
+
}
|
|
91
|
+
return React.createElement('uibit-image-comparison', {
|
|
92
|
+
ref: innerRef,
|
|
93
|
+
...domProps
|
|
94
|
+
}, children);
|
|
95
|
+
};
|
|
96
|
+
declare global {
|
|
97
|
+
namespace React {
|
|
98
|
+
namespace JSX {
|
|
99
|
+
interface IntrinsicElements {
|
|
100
|
+
'uibit-image-comparison': React.ClassAttributes<HTMLElementClass> & React.HTMLAttributes<HTMLElementClass> & {
|
|
101
|
+
children?: React.ReactNode;
|
|
102
|
+
class?: string;
|
|
103
|
+
mode?: ComparisonMode;
|
|
104
|
+
progress?: number;
|
|
105
|
+
interactive?: boolean;
|
|
106
|
+
hoverReveal?: boolean;
|
|
107
|
+
locale?: string;
|
|
108
|
+
onComparisonProgress?: (event: CustomEvent<{
|
|
109
|
+
progress: number;
|
|
110
|
+
}>) => void;
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
@@ -11,7 +11,8 @@ declare module 'solid-js' {
|
|
|
11
11
|
progress?: number;
|
|
12
12
|
interactive?: boolean;
|
|
13
13
|
hoverReveal?: boolean;
|
|
14
|
-
|
|
14
|
+
locale?: string;
|
|
15
|
+
"on:comparison-progress"?: (event: CustomEvent<{ progress: number }>) => void;
|
|
15
16
|
};
|
|
16
17
|
}
|
|
17
18
|
}
|
|
@@ -10,6 +10,9 @@ declare module '@stencil/core' {
|
|
|
10
10
|
progress?: number;
|
|
11
11
|
interactive?: boolean;
|
|
12
12
|
hoverReveal?: boolean;
|
|
13
|
+
locale?: string;
|
|
14
|
+
onComparisonProgress?: (event: CustomEvent<{ progress: number }>) => void;
|
|
15
|
+
"on:comparison-progress"?: (event: CustomEvent<{ progress: number }>) => void;
|
|
13
16
|
};
|
|
14
17
|
}
|
|
15
18
|
}
|
|
@@ -2,42 +2,82 @@
|
|
|
2
2
|
import '@uibit/image-comparison';
|
|
3
3
|
import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
|
|
4
4
|
import type { ComparisonMode } from '@uibit/image-comparison';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
mode =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
mode = $bindable(),
|
|
8
|
+
progress = $bindable(),
|
|
9
|
+
interactive = $bindable(),
|
|
10
|
+
hoverReveal = $bindable(),
|
|
11
|
+
locale = $bindable(),
|
|
12
|
+
children,
|
|
13
|
+
...restProps
|
|
12
14
|
} = $props<{
|
|
13
|
-
children?:
|
|
15
|
+
children?: import('svelte').Snippet;
|
|
14
16
|
mode?: ComparisonMode;
|
|
15
17
|
progress?: number;
|
|
16
18
|
interactive?: boolean;
|
|
17
19
|
hoverReveal?: boolean;
|
|
18
|
-
|
|
20
|
+
locale?: string;
|
|
21
|
+
|
|
22
|
+
[key: string]: any;
|
|
19
23
|
}>();
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
if (elementRef && mode !== undefined) {
|
|
24
|
+
|
|
25
|
+
let elementRef: HTMLElementClass | null = $state(null);
|
|
26
|
+
|
|
27
|
+
$effect(() => {
|
|
28
|
+
if (elementRef && mode !== undefined && elementRef.mode !== mode) {
|
|
25
29
|
elementRef.mode = mode;
|
|
26
30
|
}
|
|
27
|
-
if (elementRef && progress !== undefined) {
|
|
31
|
+
if (elementRef && progress !== undefined && elementRef.progress !== progress) {
|
|
28
32
|
elementRef.progress = progress;
|
|
29
33
|
}
|
|
30
|
-
if (elementRef && interactive !== undefined) {
|
|
34
|
+
if (elementRef && interactive !== undefined && elementRef.interactive !== interactive) {
|
|
31
35
|
elementRef.interactive = interactive;
|
|
32
36
|
}
|
|
33
|
-
if (elementRef && hoverReveal !== undefined) {
|
|
37
|
+
if (elementRef && hoverReveal !== undefined && elementRef.hoverReveal !== hoverReveal) {
|
|
34
38
|
elementRef.hoverReveal = hoverReveal;
|
|
35
39
|
}
|
|
40
|
+
if (elementRef && locale !== undefined && elementRef.locale !== locale) {
|
|
41
|
+
elementRef.locale = locale;
|
|
42
|
+
}
|
|
36
43
|
});
|
|
37
|
-
|
|
44
|
+
|
|
45
|
+
$effect(() => {
|
|
46
|
+
const element = elementRef;
|
|
47
|
+
if (!element) return;
|
|
48
|
+
|
|
49
|
+
const handleEvent = () => {
|
|
50
|
+
if (mode !== element.mode) {
|
|
51
|
+
mode = element.mode as any;
|
|
52
|
+
}
|
|
53
|
+
if (progress !== element.progress) {
|
|
54
|
+
progress = element.progress as any;
|
|
55
|
+
}
|
|
56
|
+
if (interactive !== element.interactive) {
|
|
57
|
+
interactive = element.interactive as any;
|
|
58
|
+
}
|
|
59
|
+
if (hoverReveal !== element.hoverReveal) {
|
|
60
|
+
hoverReveal = element.hoverReveal as any;
|
|
61
|
+
}
|
|
62
|
+
if (locale !== element.locale) {
|
|
63
|
+
locale = element.locale as any;
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
const events = ['change', 'input', 'comparison-progress'];
|
|
68
|
+
for (const event of events) {
|
|
69
|
+
element.addEventListener(event, handleEvent);
|
|
70
|
+
}
|
|
71
|
+
return () => {
|
|
72
|
+
for (const event of events) {
|
|
73
|
+
element.removeEventListener(event, handleEvent);
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
});
|
|
77
|
+
|
|
38
78
|
</script>
|
|
39
79
|
|
|
40
|
-
<uibit-image-comparison bind:this={elementRef} {
|
|
80
|
+
<uibit-image-comparison bind:this={elementRef} {...restProps}>
|
|
41
81
|
|
|
42
82
|
{#if children}
|
|
43
83
|
{@render children()}
|
|
@@ -1,28 +1,112 @@
|
|
|
1
|
-
import { defineComponent, h } from 'vue';
|
|
1
|
+
import { defineComponent, h, ref, watch } from 'vue';
|
|
2
2
|
import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
|
|
3
3
|
import '@uibit/image-comparison';
|
|
4
4
|
import type { ComparisonMode } from '@uibit/image-comparison';
|
|
5
|
-
|
|
6
5
|
export const ImageComparison = defineComponent({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
6
|
+
name: 'ImageComparison',
|
|
7
|
+
props: {
|
|
8
|
+
mode: {
|
|
9
|
+
type: [
|
|
10
|
+
String,
|
|
11
|
+
Number,
|
|
12
|
+
Boolean,
|
|
13
|
+
Array,
|
|
14
|
+
Object
|
|
15
|
+
] as any
|
|
16
|
+
},
|
|
17
|
+
progress: {
|
|
18
|
+
type: [
|
|
19
|
+
String,
|
|
20
|
+
Number,
|
|
21
|
+
Boolean,
|
|
22
|
+
Array,
|
|
23
|
+
Object
|
|
24
|
+
] as any
|
|
25
|
+
},
|
|
26
|
+
interactive: {
|
|
27
|
+
type: [
|
|
28
|
+
String,
|
|
29
|
+
Number,
|
|
30
|
+
Boolean,
|
|
31
|
+
Array,
|
|
32
|
+
Object
|
|
33
|
+
] as any
|
|
34
|
+
},
|
|
35
|
+
hoverReveal: {
|
|
36
|
+
type: [
|
|
37
|
+
String,
|
|
38
|
+
Number,
|
|
39
|
+
Boolean,
|
|
40
|
+
Array,
|
|
41
|
+
Object
|
|
42
|
+
] as any
|
|
43
|
+
},
|
|
44
|
+
locale: {
|
|
45
|
+
type: [
|
|
46
|
+
String,
|
|
47
|
+
Number,
|
|
48
|
+
Boolean,
|
|
49
|
+
Array,
|
|
50
|
+
Object
|
|
51
|
+
] as any
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
emits: [
|
|
55
|
+
'comparison-progress'
|
|
56
|
+
],
|
|
57
|
+
setup (props, { slots, emit }) {
|
|
58
|
+
const elementRef = ref<HTMLElementClass | null>(null);
|
|
59
|
+
if (false) {
|
|
60
|
+
watch(()=>props.modelValue, (newVal)=>{
|
|
61
|
+
if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
|
|
62
|
+
elementRef.value.value = newVal;
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
watch(()=>props.value, (newVal)=>{
|
|
66
|
+
if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
|
|
67
|
+
elementRef.value.value = newVal;
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
watch(()=>props.mode, (newVal)=>{
|
|
72
|
+
if (elementRef.value && newVal !== undefined) {
|
|
73
|
+
(elementRef.value as any).mode = newVal;
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
watch(()=>props.progress, (newVal)=>{
|
|
77
|
+
if (elementRef.value && newVal !== undefined) {
|
|
78
|
+
(elementRef.value as any).progress = newVal;
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
watch(()=>props.interactive, (newVal)=>{
|
|
82
|
+
if (elementRef.value && newVal !== undefined) {
|
|
83
|
+
(elementRef.value as any).interactive = newVal;
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
watch(()=>props.hoverReveal, (newVal)=>{
|
|
87
|
+
if (elementRef.value && newVal !== undefined) {
|
|
88
|
+
(elementRef.value as any).hoverReveal = newVal;
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
watch(()=>props.locale, (newVal)=>{
|
|
92
|
+
if (elementRef.value && newVal !== undefined) {
|
|
93
|
+
(elementRef.value as any).locale = newVal;
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
return ()=>{
|
|
97
|
+
const eventListeners: Record<string, any> = {};
|
|
98
|
+
eventListeners['onComparison-progress'] = (event: Event)=>{
|
|
99
|
+
emit('comparison-progress', event);
|
|
100
|
+
};
|
|
101
|
+
const mergedProps = {
|
|
102
|
+
...props,
|
|
103
|
+
...eventListeners,
|
|
104
|
+
ref: elementRef
|
|
105
|
+
};
|
|
106
|
+
if (false && props.modelValue !== undefined) {
|
|
107
|
+
(mergedProps as any).value = props.modelValue;
|
|
108
|
+
}
|
|
109
|
+
return h('uibit-image-comparison', mergedProps, slots.default?.());
|
|
110
|
+
};
|
|
111
|
+
}
|
|
28
112
|
});
|
|
@@ -2,6 +2,8 @@ import { UIBitElement } from '@uibit/core';
|
|
|
2
2
|
import type { ComparisonMode } from './types';
|
|
3
3
|
/**
|
|
4
4
|
* An interactive visual comparison curtain component. Displays before and after states
|
|
5
|
+
|
|
6
|
+
* @summary An interactive slider component for comparing two overlaying images side-by-side.
|
|
5
7
|
* and allows users to peel them back horizontally, vertically, diagonally, or radially.
|
|
6
8
|
*
|
|
7
9
|
* @fires { progress: number } comparison-progress - Fired when the curtain progress updates
|
|
@@ -11,7 +13,8 @@ import type { ComparisonMode } from './types';
|
|
|
11
13
|
* @cssprop [--uibit-image-comparison-handle-border-color=transparent] - Border outline color of the handle
|
|
12
14
|
* @cssprop [--uibit-image-comparison-handle-inner-color=#111111] - Color of the arrows/icons inside the handle
|
|
13
15
|
* @cssprop [--uibit-image-comparison-border-color=#ffffff] - Separation line border color
|
|
14
|
-
|
|
16
|
+
|
|
17
|
+
* @cssstate dragging - Active when the comparison slider bar is being dragged.*/
|
|
15
18
|
export declare class ImageComparison extends UIBitElement {
|
|
16
19
|
static styles: import("lit").CSSResult;
|
|
17
20
|
/** Visual mode of reveal: 'horizontal' | 'vertical' | 'diagonal' | 'radial' */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-comparison.d.ts","sourceRoot":"","sources":["../src/image-comparison.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAG1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C
|
|
1
|
+
{"version":3,"file":"image-comparison.d.ts","sourceRoot":"","sources":["../src/image-comparison.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAG1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;;;;;;;;iFAciF;AACjF,qBACa,eAAgB,SAAQ,YAAY;IAC/C,MAAM,CAAC,MAAM,0BAAU;IAEvB,+EAA+E;IACnD,IAAI,EAAE,cAAc,CAAgB;IAEhE,4CAA4C;IAChB,QAAQ,SAAM;IAE1C,4DAA4D;IAC/B,WAAW,UAAQ;IAEhD,mFAAmF;IAC3B,WAAW,UAAS;IAEnE,OAAO,CAAC,WAAW,CAAS;IAErC,iBAAiB,SAShB;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,QAKnD;IAED,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,wBAAwB;IA6BhC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,iBAAiB;IAwCzB,MAAM,oCA6CL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,eAAe,CAAC;KAC3C;CACF;eAEc,eAAe"}
|
package/dist/image-comparison.js
CHANGED
|
@@ -10,6 +10,8 @@ import { property, state } from 'lit/decorators.js';
|
|
|
10
10
|
import { styles } from './styles';
|
|
11
11
|
/**
|
|
12
12
|
* An interactive visual comparison curtain component. Displays before and after states
|
|
13
|
+
|
|
14
|
+
* @summary An interactive slider component for comparing two overlaying images side-by-side.
|
|
13
15
|
* and allows users to peel them back horizontally, vertically, diagonally, or radially.
|
|
14
16
|
*
|
|
15
17
|
* @fires { progress: number } comparison-progress - Fired when the curtain progress updates
|
|
@@ -19,7 +21,8 @@ import { styles } from './styles';
|
|
|
19
21
|
* @cssprop [--uibit-image-comparison-handle-border-color=transparent] - Border outline color of the handle
|
|
20
22
|
* @cssprop [--uibit-image-comparison-handle-inner-color=#111111] - Color of the arrows/icons inside the handle
|
|
21
23
|
* @cssprop [--uibit-image-comparison-border-color=#ffffff] - Separation line border color
|
|
22
|
-
|
|
24
|
+
|
|
25
|
+
* @cssstate dragging - Active when the comparison slider bar is being dragged.*/
|
|
23
26
|
let ImageComparison = class ImageComparison extends UIBitElement {
|
|
24
27
|
constructor() {
|
|
25
28
|
super(...arguments);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-comparison.js","sourceRoot":"","sources":["../src/image-comparison.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC
|
|
1
|
+
{"version":3,"file":"image-comparison.js","sourceRoot":"","sources":["../src/image-comparison.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uibit/image-comparison",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Displays overlapping before/after content layers with interactive diagonal, radial, horizontal, or vertical splits.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
},
|
|
13
13
|
"./image-comparison.css": "./dist/image-comparison.css",
|
|
14
14
|
"./custom-elements.json": "./custom-elements.json",
|
|
15
|
-
"./react": "./dist/frameworks/react/index.
|
|
15
|
+
"./react": "./dist/frameworks/react/index.ts",
|
|
16
16
|
"./vue": "./dist/frameworks/vue/index.ts",
|
|
17
17
|
"./svelte": "./dist/frameworks/svelte/index.svelte",
|
|
18
18
|
"./angular": "./dist/frameworks/angular/index.ts",
|
|
@@ -48,13 +48,13 @@
|
|
|
48
48
|
"directory": "packages/components/image-comparison"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@uibit/core": "0.
|
|
51
|
+
"@uibit/core": "0.2.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@types/node": "^20.19.43",
|
|
55
55
|
"lit": "^3.3.3",
|
|
56
56
|
"typescript": "7.0.2",
|
|
57
|
-
"@uibit/codegen": "0.
|
|
57
|
+
"@uibit/codegen": "0.2.0"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
60
|
"lit": "^3.0.0",
|
|
@@ -85,9 +85,9 @@
|
|
|
85
85
|
"tagName": "uibit-image-comparison"
|
|
86
86
|
},
|
|
87
87
|
"scripts": {
|
|
88
|
-
"build": "cem analyze --
|
|
89
|
-
"dev": "concurrently \"cem analyze --
|
|
90
|
-
"analyze": "cem analyze --
|
|
88
|
+
"build": "cem analyze --config ../custom-elements-manifest.config.js && uibit-codegen --package . && tsc",
|
|
89
|
+
"dev": "concurrently \"cem analyze --config ../custom-elements-manifest.config.js --watch\" \"tsc --watch\"",
|
|
90
|
+
"analyze": "cem analyze --config ../custom-elements-manifest.config.js",
|
|
91
91
|
"typecheck": "tsc --noEmit",
|
|
92
92
|
"test": "vitest run -c ../../../vitest.config.ts --passWithNoTests"
|
|
93
93
|
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes, ClassAttributes } from 'react';
|
|
2
|
-
import type { ImageComparison as HTMLElementClass } from '@uibit/image-comparison';
|
|
3
|
-
import '@uibit/image-comparison';
|
|
4
|
-
import type { ComparisonMode } from '@uibit/image-comparison';
|
|
5
|
-
|
|
6
|
-
declare global {
|
|
7
|
-
namespace React {
|
|
8
|
-
namespace JSX {
|
|
9
|
-
interface IntrinsicElements {
|
|
10
|
-
'uibit-image-comparison': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
|
|
11
|
-
children?: React.ReactNode;
|
|
12
|
-
class?: string;
|
|
13
|
-
mode?: ComparisonMode;
|
|
14
|
-
progress?: number;
|
|
15
|
-
interactive?: boolean;
|
|
16
|
-
hoverReveal?: boolean;
|
|
17
|
-
onComparisonProgress?: (event: any) => void;
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|