@uibit/image-comparison 0.1.0 → 0.1.1
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 +6 -0
- package/dist/frameworks/preact/index.d.ts +1 -0
- package/dist/frameworks/react/index.d.ts +1 -0
- package/dist/frameworks/solid/index.d.ts +1 -0
- package/dist/frameworks/stencil/index.d.ts +1 -0
- package/dist/frameworks/svelte/index.svelte +5 -0
- package/dist/frameworks/vue/index.ts +2 -1
- 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 +5 -5
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
|
}
|
|
@@ -34,12 +34,18 @@ export class NgxImageComparison {
|
|
|
34
34
|
this.el.nativeElement.hoverReveal = this.hoverReveal();
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
|
+
effect(() => {
|
|
38
|
+
if (this.el.nativeElement) {
|
|
39
|
+
this.el.nativeElement.locale = this.locale();
|
|
40
|
+
}
|
|
41
|
+
});
|
|
37
42
|
}
|
|
38
43
|
|
|
39
44
|
readonly mode = input<ComparisonMode, any>('horizontal');
|
|
40
45
|
readonly progress = input<number, any>(50, { transform: numberAttribute });
|
|
41
46
|
readonly interactive = input<boolean, any>(true, { transform: booleanAttribute });
|
|
42
47
|
readonly hoverReveal = input<boolean, any>(false, { transform: booleanAttribute });
|
|
48
|
+
readonly locale = input<string, any>('');
|
|
43
49
|
|
|
44
50
|
readonly comparisonProgress = output<CustomEvent<progress: number>>();
|
|
45
51
|
}
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
progress = undefined,
|
|
9
9
|
interactive = undefined,
|
|
10
10
|
hoverReveal = undefined,
|
|
11
|
+
locale = undefined,
|
|
11
12
|
children
|
|
12
13
|
} = $props<{
|
|
13
14
|
children?: any;
|
|
@@ -15,6 +16,7 @@
|
|
|
15
16
|
progress?: number;
|
|
16
17
|
interactive?: boolean;
|
|
17
18
|
hoverReveal?: boolean;
|
|
19
|
+
locale?: string;
|
|
18
20
|
|
|
19
21
|
}>();
|
|
20
22
|
|
|
@@ -33,6 +35,9 @@
|
|
|
33
35
|
if (elementRef && hoverReveal !== undefined) {
|
|
34
36
|
elementRef.hoverReveal = hoverReveal;
|
|
35
37
|
}
|
|
38
|
+
if (elementRef && locale !== undefined) {
|
|
39
|
+
elementRef.locale = locale;
|
|
40
|
+
}
|
|
36
41
|
});
|
|
37
42
|
|
|
38
43
|
</script>
|
|
@@ -9,7 +9,8 @@ export const ImageComparison = defineComponent({
|
|
|
9
9
|
mode: { type: [String, Number, Boolean, Array, Object] as any },
|
|
10
10
|
progress: { type: [String, Number, Boolean, Array, Object] as any },
|
|
11
11
|
interactive: { type: [String, Number, Boolean, Array, Object] as any },
|
|
12
|
-
hoverReveal: { type: [String, Number, Boolean, Array, Object] as any }
|
|
12
|
+
hoverReveal: { type: [String, Number, Boolean, Array, Object] as any },
|
|
13
|
+
locale: { type: [String, Number, Boolean, Array, Object] as any }
|
|
13
14
|
},
|
|
14
15
|
emits: ['comparison-progress'],
|
|
15
16
|
setup(props, { slots, emit }) {
|
|
@@ -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.1.
|
|
3
|
+
"version": "0.1.1",
|
|
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",
|
|
@@ -48,7 +48,7 @@
|
|
|
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",
|
|
@@ -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
|
}
|