@uibit/image-reveal 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-reveal.d.ts +4 -1
- package/dist/image-reveal.d.ts.map +1 -1
- package/dist/image-reveal.js +4 -1
- package/dist/image-reveal.js.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
# Image X-Ray
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@uibit/image-reveal)
|
|
4
|
+
|
|
5
|
+
|
|
3
6
|
[Interactive Demonstration](https://rawlings.github.io/uibit/image-xray)
|
|
4
7
|
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @uibit/image-reveal
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
|
|
5
15
|
Image X-Ray is an interactive comparative display component that reveals layers of information beneath a primary image. By rendering a cursor-following circular lens that acts as a window to a secondary, synchronized image, it offers a polished, engaging way to highlight internal craftsmanship, design layers, or material compositions.
|
|
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": "Reveals a synchronized secondary \"xray\" image through a circular lens that
|
|
11
|
+
"description": "Reveals a synchronized secondary \"xray\" image through a circular lens that",
|
|
12
12
|
"name": "ImageReveal",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
@@ -135,6 +135,211 @@
|
|
|
135
135
|
"kind": "field",
|
|
136
136
|
"name": "_onTouchEnd",
|
|
137
137
|
"privacy": "private"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"kind": "field",
|
|
141
|
+
"name": "locale",
|
|
142
|
+
"type": {
|
|
143
|
+
"text": "string"
|
|
144
|
+
},
|
|
145
|
+
"default": "''",
|
|
146
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
147
|
+
"attribute": "locale",
|
|
148
|
+
"inheritedFrom": {
|
|
149
|
+
"name": "UIBitElement",
|
|
150
|
+
"module": "../../platform/core/src/element.ts"
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"kind": "field",
|
|
155
|
+
"name": "resolvedLocale",
|
|
156
|
+
"type": {
|
|
157
|
+
"text": "string | undefined"
|
|
158
|
+
},
|
|
159
|
+
"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).",
|
|
160
|
+
"readonly": true,
|
|
161
|
+
"inheritedFrom": {
|
|
162
|
+
"name": "UIBitElement",
|
|
163
|
+
"module": "../../platform/core/src/element.ts"
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"kind": "field",
|
|
168
|
+
"name": "_disposables",
|
|
169
|
+
"type": {
|
|
170
|
+
"text": "Set<() => void>"
|
|
171
|
+
},
|
|
172
|
+
"privacy": "private",
|
|
173
|
+
"default": "new Set()",
|
|
174
|
+
"inheritedFrom": {
|
|
175
|
+
"name": "UIBitElement",
|
|
176
|
+
"module": "../../platform/core/src/element.ts"
|
|
177
|
+
}
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"kind": "method",
|
|
181
|
+
"name": "createProperty",
|
|
182
|
+
"static": true,
|
|
183
|
+
"parameters": [
|
|
184
|
+
{
|
|
185
|
+
"name": "name",
|
|
186
|
+
"type": {
|
|
187
|
+
"text": "PropertyKey"
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"name": "options",
|
|
192
|
+
"optional": true,
|
|
193
|
+
"type": {
|
|
194
|
+
"text": "PropertyDeclaration"
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
],
|
|
198
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default.",
|
|
199
|
+
"inheritedFrom": {
|
|
200
|
+
"name": "UIBitElement",
|
|
201
|
+
"module": "../../platform/core/src/element.ts"
|
|
202
|
+
}
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"kind": "method",
|
|
206
|
+
"name": "finalizeStyles",
|
|
207
|
+
"static": true,
|
|
208
|
+
"return": {
|
|
209
|
+
"type": {
|
|
210
|
+
"text": "Array<any>"
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
"parameters": [
|
|
214
|
+
{
|
|
215
|
+
"name": "styles",
|
|
216
|
+
"optional": true,
|
|
217
|
+
"type": {
|
|
218
|
+
"text": "CSSResultGroup"
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
],
|
|
222
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles.",
|
|
223
|
+
"inheritedFrom": {
|
|
224
|
+
"name": "UIBitElement",
|
|
225
|
+
"module": "../../platform/core/src/element.ts"
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
"kind": "method",
|
|
230
|
+
"name": "dispatchCustomEvent",
|
|
231
|
+
"return": {
|
|
232
|
+
"type": {
|
|
233
|
+
"text": "boolean"
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
"parameters": [
|
|
237
|
+
{
|
|
238
|
+
"name": "name",
|
|
239
|
+
"type": {
|
|
240
|
+
"text": "string"
|
|
241
|
+
}
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
"name": "detail",
|
|
245
|
+
"optional": true,
|
|
246
|
+
"type": {
|
|
247
|
+
"text": "T"
|
|
248
|
+
}
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
"name": "options",
|
|
252
|
+
"optional": true,
|
|
253
|
+
"type": {
|
|
254
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
],
|
|
258
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options.",
|
|
259
|
+
"inheritedFrom": {
|
|
260
|
+
"name": "UIBitElement",
|
|
261
|
+
"module": "../../platform/core/src/element.ts"
|
|
262
|
+
}
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"kind": "method",
|
|
266
|
+
"name": "getCssPropertyValue",
|
|
267
|
+
"return": {
|
|
268
|
+
"type": {
|
|
269
|
+
"text": "string"
|
|
270
|
+
}
|
|
271
|
+
},
|
|
272
|
+
"parameters": [
|
|
273
|
+
{
|
|
274
|
+
"name": "propertyName",
|
|
275
|
+
"type": {
|
|
276
|
+
"text": "string"
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
],
|
|
280
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element.",
|
|
281
|
+
"inheritedFrom": {
|
|
282
|
+
"name": "UIBitElement",
|
|
283
|
+
"module": "../../platform/core/src/element.ts"
|
|
284
|
+
}
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"kind": "method",
|
|
288
|
+
"name": "registerDisposable",
|
|
289
|
+
"parameters": [
|
|
290
|
+
{
|
|
291
|
+
"name": "cleanup",
|
|
292
|
+
"type": {
|
|
293
|
+
"text": "() => void"
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
],
|
|
297
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM.",
|
|
298
|
+
"inheritedFrom": {
|
|
299
|
+
"name": "UIBitElement",
|
|
300
|
+
"module": "../../platform/core/src/element.ts"
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
"kind": "method",
|
|
305
|
+
"name": "listen",
|
|
306
|
+
"return": {
|
|
307
|
+
"type": {
|
|
308
|
+
"text": "() => void"
|
|
309
|
+
}
|
|
310
|
+
},
|
|
311
|
+
"parameters": [
|
|
312
|
+
{
|
|
313
|
+
"name": "target",
|
|
314
|
+
"type": {
|
|
315
|
+
"text": "EventTarget"
|
|
316
|
+
}
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
"name": "type",
|
|
320
|
+
"type": {
|
|
321
|
+
"text": "K"
|
|
322
|
+
}
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
"name": "listener",
|
|
326
|
+
"type": {
|
|
327
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
328
|
+
}
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
"name": "options",
|
|
332
|
+
"optional": true,
|
|
333
|
+
"type": {
|
|
334
|
+
"text": "boolean | AddEventListenerOptions"
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
],
|
|
338
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected.",
|
|
339
|
+
"inheritedFrom": {
|
|
340
|
+
"name": "UIBitElement",
|
|
341
|
+
"module": "../../platform/core/src/element.ts"
|
|
342
|
+
}
|
|
138
343
|
}
|
|
139
344
|
],
|
|
140
345
|
"events": [
|
|
@@ -155,12 +360,32 @@
|
|
|
155
360
|
"default": "''",
|
|
156
361
|
"description": "Diameter of the lens in any CSS unit. Overrides the CSS custom property.",
|
|
157
362
|
"fieldName": "size"
|
|
363
|
+
},
|
|
364
|
+
{
|
|
365
|
+
"name": "locale",
|
|
366
|
+
"type": {
|
|
367
|
+
"text": "string"
|
|
368
|
+
},
|
|
369
|
+
"default": "''",
|
|
370
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
371
|
+
"fieldName": "locale",
|
|
372
|
+
"inheritedFrom": {
|
|
373
|
+
"name": "UIBitElement",
|
|
374
|
+
"module": "../../platform/core/src/element.ts"
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
],
|
|
378
|
+
"cssStates": [
|
|
379
|
+
{
|
|
380
|
+
"name": "revealed",
|
|
381
|
+
"description": "Active when the image has completed its reveal transition."
|
|
158
382
|
}
|
|
159
383
|
],
|
|
160
384
|
"superclass": {
|
|
161
385
|
"name": "UIBitElement",
|
|
162
386
|
"package": "@uibit/core"
|
|
163
387
|
},
|
|
388
|
+
"summary": "A scroll-triggered overlay image reveal effect component.\nfollows the user's cursor or touch point over the primary image.\n\nPlace the primary image in the default slot and the reveal image in the\n`xray` named slot. Both images are pixel-aligned so the lens shows exactly\nwhat lies beneath the cursor on the xray layer.",
|
|
164
389
|
"tagName": "uibit-image-reveal",
|
|
165
390
|
"customElement": true
|
|
166
391
|
}
|
|
@@ -249,6 +474,250 @@
|
|
|
249
474
|
"path": "src/types.ts",
|
|
250
475
|
"declarations": [],
|
|
251
476
|
"exports": []
|
|
477
|
+
},
|
|
478
|
+
{
|
|
479
|
+
"kind": "javascript-module",
|
|
480
|
+
"path": "../../platform/core/src/element.ts",
|
|
481
|
+
"declarations": [
|
|
482
|
+
{
|
|
483
|
+
"kind": "class",
|
|
484
|
+
"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.",
|
|
485
|
+
"name": "UIBitElement",
|
|
486
|
+
"members": [
|
|
487
|
+
{
|
|
488
|
+
"kind": "field",
|
|
489
|
+
"name": "locale",
|
|
490
|
+
"type": {
|
|
491
|
+
"text": "string"
|
|
492
|
+
},
|
|
493
|
+
"default": "''",
|
|
494
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
495
|
+
"attribute": "locale"
|
|
496
|
+
},
|
|
497
|
+
{
|
|
498
|
+
"kind": "field",
|
|
499
|
+
"name": "resolvedLocale",
|
|
500
|
+
"type": {
|
|
501
|
+
"text": "string | undefined"
|
|
502
|
+
},
|
|
503
|
+
"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).",
|
|
504
|
+
"readonly": true
|
|
505
|
+
},
|
|
506
|
+
{
|
|
507
|
+
"kind": "field",
|
|
508
|
+
"name": "_disposables",
|
|
509
|
+
"type": {
|
|
510
|
+
"text": "Set<() => void>"
|
|
511
|
+
},
|
|
512
|
+
"privacy": "private",
|
|
513
|
+
"default": "new Set()"
|
|
514
|
+
},
|
|
515
|
+
{
|
|
516
|
+
"kind": "method",
|
|
517
|
+
"name": "createProperty",
|
|
518
|
+
"static": true,
|
|
519
|
+
"parameters": [
|
|
520
|
+
{
|
|
521
|
+
"name": "name",
|
|
522
|
+
"type": {
|
|
523
|
+
"text": "PropertyKey"
|
|
524
|
+
}
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
"name": "options",
|
|
528
|
+
"optional": true,
|
|
529
|
+
"type": {
|
|
530
|
+
"text": "PropertyDeclaration"
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
],
|
|
534
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default."
|
|
535
|
+
},
|
|
536
|
+
{
|
|
537
|
+
"kind": "method",
|
|
538
|
+
"name": "finalizeStyles",
|
|
539
|
+
"static": true,
|
|
540
|
+
"return": {
|
|
541
|
+
"type": {
|
|
542
|
+
"text": "Array<any>"
|
|
543
|
+
}
|
|
544
|
+
},
|
|
545
|
+
"parameters": [
|
|
546
|
+
{
|
|
547
|
+
"name": "styles",
|
|
548
|
+
"optional": true,
|
|
549
|
+
"type": {
|
|
550
|
+
"text": "CSSResultGroup"
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
],
|
|
554
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles."
|
|
555
|
+
},
|
|
556
|
+
{
|
|
557
|
+
"kind": "method",
|
|
558
|
+
"name": "dispatchCustomEvent",
|
|
559
|
+
"return": {
|
|
560
|
+
"type": {
|
|
561
|
+
"text": "boolean"
|
|
562
|
+
}
|
|
563
|
+
},
|
|
564
|
+
"parameters": [
|
|
565
|
+
{
|
|
566
|
+
"name": "name",
|
|
567
|
+
"type": {
|
|
568
|
+
"text": "string"
|
|
569
|
+
}
|
|
570
|
+
},
|
|
571
|
+
{
|
|
572
|
+
"name": "detail",
|
|
573
|
+
"optional": true,
|
|
574
|
+
"type": {
|
|
575
|
+
"text": "T"
|
|
576
|
+
}
|
|
577
|
+
},
|
|
578
|
+
{
|
|
579
|
+
"name": "options",
|
|
580
|
+
"optional": true,
|
|
581
|
+
"type": {
|
|
582
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
],
|
|
586
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options."
|
|
587
|
+
},
|
|
588
|
+
{
|
|
589
|
+
"kind": "method",
|
|
590
|
+
"name": "getCssPropertyValue",
|
|
591
|
+
"return": {
|
|
592
|
+
"type": {
|
|
593
|
+
"text": "string"
|
|
594
|
+
}
|
|
595
|
+
},
|
|
596
|
+
"parameters": [
|
|
597
|
+
{
|
|
598
|
+
"name": "propertyName",
|
|
599
|
+
"type": {
|
|
600
|
+
"text": "string"
|
|
601
|
+
}
|
|
602
|
+
}
|
|
603
|
+
],
|
|
604
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element."
|
|
605
|
+
},
|
|
606
|
+
{
|
|
607
|
+
"kind": "method",
|
|
608
|
+
"name": "registerDisposable",
|
|
609
|
+
"parameters": [
|
|
610
|
+
{
|
|
611
|
+
"name": "cleanup",
|
|
612
|
+
"type": {
|
|
613
|
+
"text": "() => void"
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
],
|
|
617
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM."
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
"kind": "method",
|
|
621
|
+
"name": "listen",
|
|
622
|
+
"return": {
|
|
623
|
+
"type": {
|
|
624
|
+
"text": "() => void"
|
|
625
|
+
}
|
|
626
|
+
},
|
|
627
|
+
"parameters": [
|
|
628
|
+
{
|
|
629
|
+
"name": "target",
|
|
630
|
+
"type": {
|
|
631
|
+
"text": "EventTarget"
|
|
632
|
+
}
|
|
633
|
+
},
|
|
634
|
+
{
|
|
635
|
+
"name": "type",
|
|
636
|
+
"type": {
|
|
637
|
+
"text": "K"
|
|
638
|
+
}
|
|
639
|
+
},
|
|
640
|
+
{
|
|
641
|
+
"name": "listener",
|
|
642
|
+
"type": {
|
|
643
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
644
|
+
}
|
|
645
|
+
},
|
|
646
|
+
{
|
|
647
|
+
"name": "options",
|
|
648
|
+
"optional": true,
|
|
649
|
+
"type": {
|
|
650
|
+
"text": "boolean | AddEventListenerOptions"
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
],
|
|
654
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected."
|
|
655
|
+
},
|
|
656
|
+
{
|
|
657
|
+
"kind": "method",
|
|
658
|
+
"name": "listen",
|
|
659
|
+
"return": {
|
|
660
|
+
"type": {
|
|
661
|
+
"text": "() => void"
|
|
662
|
+
}
|
|
663
|
+
},
|
|
664
|
+
"parameters": [
|
|
665
|
+
{
|
|
666
|
+
"name": "target",
|
|
667
|
+
"type": {
|
|
668
|
+
"text": "EventTarget"
|
|
669
|
+
}
|
|
670
|
+
},
|
|
671
|
+
{
|
|
672
|
+
"name": "type",
|
|
673
|
+
"type": {
|
|
674
|
+
"text": "string"
|
|
675
|
+
}
|
|
676
|
+
},
|
|
677
|
+
{
|
|
678
|
+
"name": "listener",
|
|
679
|
+
"type": {
|
|
680
|
+
"text": "EventListenerOrEventListenerObject"
|
|
681
|
+
}
|
|
682
|
+
},
|
|
683
|
+
{
|
|
684
|
+
"name": "options",
|
|
685
|
+
"optional": true,
|
|
686
|
+
"type": {
|
|
687
|
+
"text": "boolean | AddEventListenerOptions"
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
]
|
|
691
|
+
}
|
|
692
|
+
],
|
|
693
|
+
"attributes": [
|
|
694
|
+
{
|
|
695
|
+
"name": "locale",
|
|
696
|
+
"type": {
|
|
697
|
+
"text": "string"
|
|
698
|
+
},
|
|
699
|
+
"default": "''",
|
|
700
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
701
|
+
"fieldName": "locale"
|
|
702
|
+
}
|
|
703
|
+
],
|
|
704
|
+
"superclass": {
|
|
705
|
+
"name": "LitElement",
|
|
706
|
+
"package": "lit"
|
|
707
|
+
},
|
|
708
|
+
"customElement": true
|
|
709
|
+
}
|
|
710
|
+
],
|
|
711
|
+
"exports": [
|
|
712
|
+
{
|
|
713
|
+
"kind": "js",
|
|
714
|
+
"name": "UIBitElement",
|
|
715
|
+
"declaration": {
|
|
716
|
+
"name": "UIBitElement",
|
|
717
|
+
"module": "../../platform/core/src/element.ts"
|
|
718
|
+
}
|
|
719
|
+
}
|
|
720
|
+
]
|
|
252
721
|
}
|
|
253
722
|
]
|
|
254
723
|
}
|
|
@@ -18,9 +18,15 @@ export class NgxImageReveal {
|
|
|
18
18
|
this.el.nativeElement.size = this.size();
|
|
19
19
|
}
|
|
20
20
|
});
|
|
21
|
+
effect(() => {
|
|
22
|
+
if (this.el.nativeElement) {
|
|
23
|
+
this.el.nativeElement.locale = this.locale();
|
|
24
|
+
}
|
|
25
|
+
});
|
|
21
26
|
}
|
|
22
27
|
|
|
23
28
|
readonly size = input<string, any>('');
|
|
29
|
+
readonly locale = input<string, any>('');
|
|
24
30
|
|
|
25
31
|
readonly revealMove = output<CustomEvent<{ x: number, y: number }>>();
|
|
26
32
|
}
|
|
@@ -4,11 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
let {
|
|
6
6
|
size = undefined,
|
|
7
|
+
locale = undefined,
|
|
7
8
|
xray = undefined,
|
|
8
9
|
children
|
|
9
10
|
} = $props<{
|
|
10
11
|
children?: any;
|
|
11
12
|
size?: string;
|
|
13
|
+
locale?: string;
|
|
12
14
|
xray?: import('svelte').Snippet;
|
|
13
15
|
}>();
|
|
14
16
|
|
|
@@ -18,6 +20,9 @@
|
|
|
18
20
|
if (elementRef && size !== undefined) {
|
|
19
21
|
elementRef.size = size;
|
|
20
22
|
}
|
|
23
|
+
if (elementRef && locale !== undefined) {
|
|
24
|
+
elementRef.locale = locale;
|
|
25
|
+
}
|
|
21
26
|
});
|
|
22
27
|
|
|
23
28
|
</script>
|
|
@@ -5,7 +5,8 @@ import '@uibit/image-reveal';
|
|
|
5
5
|
export const ImageReveal = defineComponent({
|
|
6
6
|
name: 'ImageReveal',
|
|
7
7
|
props: {
|
|
8
|
-
size: { type: [String, Number, Boolean, Array, Object] as any }
|
|
8
|
+
size: { type: [String, Number, Boolean, Array, Object] as any },
|
|
9
|
+
locale: { type: [String, Number, Boolean, Array, Object] as any }
|
|
9
10
|
},
|
|
10
11
|
emits: ['reveal-move'],
|
|
11
12
|
setup(props, { slots, emit }) {
|
package/dist/image-reveal.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { UIBitElement } from '@uibit/core';
|
|
2
2
|
/**
|
|
3
3
|
* Reveals a synchronized secondary "xray" image through a circular lens that
|
|
4
|
+
|
|
5
|
+
* @summary A scroll-triggered overlay image reveal effect component.
|
|
4
6
|
* follows the user's cursor or touch point over the primary image.
|
|
5
7
|
*
|
|
6
8
|
* Place the primary image in the default slot and the reveal image in the
|
|
@@ -14,7 +16,8 @@ import { UIBitElement } from '@uibit/core';
|
|
|
14
16
|
*
|
|
15
17
|
* @cssprop [--uibit-image-reveal-lens-size=12rem] - Diameter of the circular lens
|
|
16
18
|
* @cssprop [--uibit-image-reveal-lens-shadow=0 0 0 0.1875rem #ffffff, 0 0.5rem 2rem rgba(0,0,0,0.35)] - Box shadow of the lens ring
|
|
17
|
-
|
|
19
|
+
|
|
20
|
+
* @cssstate revealed - Active when the image has completed its reveal transition.*/
|
|
18
21
|
export declare class ImageReveal extends UIBitElement {
|
|
19
22
|
static styles: import("lit").CSSResult;
|
|
20
23
|
/** Diameter of the lens in any CSS unit. Overrides the CSS custom property. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-reveal.d.ts","sourceRoot":"","sources":["../src/image-reveal.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAK1D
|
|
1
|
+
{"version":3,"file":"image-reveal.d.ts","sourceRoot":"","sources":["../src/image-reveal.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAK1D;;;;;;;;;;;;;;;;;;oFAkBoF;AACpF,qBACa,WAAY,SAAQ,YAAY;IAC3C,MAAM,CAAC,MAAM,0BAAU;IAEvB,+EAA+E;IACnD,IAAI,SAAM;IAE7B,OAAO,CAAC,EAAE,CAAK;IACf,OAAO,CAAC,EAAE,CAAK;IAER,OAAO,CAAC,KAAK,CAAe;IACxB,OAAO,CAAC,QAAQ,CAAe;IAEnD,iBAAiB,SAEhB;IAED,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,WAAW;IAqBnB,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,YAAY,SAQX;IAED,MAAM,oCAoBL;CACF;eAEc,WAAW"}
|
package/dist/image-reveal.js
CHANGED
|
@@ -11,6 +11,8 @@ import { styleMap } from 'lit/directives/style-map.js';
|
|
|
11
11
|
import { styles } from './styles';
|
|
12
12
|
/**
|
|
13
13
|
* Reveals a synchronized secondary "xray" image through a circular lens that
|
|
14
|
+
|
|
15
|
+
* @summary A scroll-triggered overlay image reveal effect component.
|
|
14
16
|
* follows the user's cursor or touch point over the primary image.
|
|
15
17
|
*
|
|
16
18
|
* Place the primary image in the default slot and the reveal image in the
|
|
@@ -24,7 +26,8 @@ import { styles } from './styles';
|
|
|
24
26
|
*
|
|
25
27
|
* @cssprop [--uibit-image-reveal-lens-size=12rem] - Diameter of the circular lens
|
|
26
28
|
* @cssprop [--uibit-image-reveal-lens-shadow=0 0 0 0.1875rem #ffffff, 0 0.5rem 2rem rgba(0,0,0,0.35)] - Box shadow of the lens ring
|
|
27
|
-
|
|
29
|
+
|
|
30
|
+
* @cssstate revealed - Active when the image has completed its reveal transition.*/
|
|
28
31
|
let ImageReveal = class ImageReveal extends UIBitElement {
|
|
29
32
|
constructor() {
|
|
30
33
|
super(...arguments);
|
package/dist/image-reveal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-reveal.js","sourceRoot":"","sources":["../src/image-reveal.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,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC
|
|
1
|
+
{"version":3,"file":"image-reveal.js","sourceRoot":"","sources":["../src/image-reveal.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uibit/image-reveal",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A floating circular lens that follows the cursor or touch point, revealing a synchronized secondary image exactly where the user looks. Built for luxury and high-tech product storytelling.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"directory": "packages/components/image-reveal"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@uibit/core": "0.
|
|
49
|
+
"@uibit/core": "0.2.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@types/node": "^20.19.43",
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
"tagName": "uibit-image-reveal"
|
|
84
84
|
},
|
|
85
85
|
"scripts": {
|
|
86
|
-
"build": "cem analyze --
|
|
87
|
-
"dev": "concurrently \"cem analyze --
|
|
88
|
-
"analyze": "cem analyze --
|
|
86
|
+
"build": "cem analyze --config ../custom-elements-manifest.config.js && uibit-codegen --package . && tsc",
|
|
87
|
+
"dev": "concurrently \"cem analyze --config ../custom-elements-manifest.config.js --watch\" \"tsc --watch\"",
|
|
88
|
+
"analyze": "cem analyze --config ../custom-elements-manifest.config.js",
|
|
89
89
|
"typecheck": "tsc --noEmit"
|
|
90
90
|
}
|
|
91
91
|
}
|