@uibit/text-clamp 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 +474 -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/text-clamp.d.ts +5 -1
- package/dist/text-clamp.d.ts.map +1 -1
- package/dist/text-clamp.js +5 -1
- package/dist/text-clamp.js.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
# Text Clamp
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@uibit/text-clamp)
|
|
4
|
+
|
|
5
|
+
|
|
3
6
|
[Interactive Demonstration](https://rawlings.github.io/uibit/components/text-clamp)
|
|
4
7
|
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @uibit/text-clamp
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
|
|
5
15
|
Text Clamp constrains long, multi-line text blocks to a designated maximum line count. When the text exceeds the boundary, the component inserts an inline ellipsis and an interactive toggle (e.g. "More" / "Less") to expand or collapse the content dynamically without page navigation.
|
|
6
16
|
|
|
7
17
|
## Value Delivery
|
package/custom-elements.json
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"declarations": [
|
|
61
61
|
{
|
|
62
62
|
"kind": "class",
|
|
63
|
-
"description": "Clamps slotted content to an exact line count. When content overflows the
|
|
63
|
+
"description": "Clamps slotted content to an exact line count. When content overflows the",
|
|
64
64
|
"name": "TextClamp",
|
|
65
65
|
"cssProperties": [
|
|
66
66
|
{
|
|
@@ -172,6 +172,211 @@
|
|
|
172
172
|
"kind": "method",
|
|
173
173
|
"name": "_toggle",
|
|
174
174
|
"privacy": "private"
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"kind": "field",
|
|
178
|
+
"name": "locale",
|
|
179
|
+
"type": {
|
|
180
|
+
"text": "string"
|
|
181
|
+
},
|
|
182
|
+
"default": "''",
|
|
183
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
184
|
+
"attribute": "locale",
|
|
185
|
+
"inheritedFrom": {
|
|
186
|
+
"name": "UIBitElement",
|
|
187
|
+
"module": "../../platform/core/src/element.ts"
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"kind": "field",
|
|
192
|
+
"name": "resolvedLocale",
|
|
193
|
+
"type": {
|
|
194
|
+
"text": "string | undefined"
|
|
195
|
+
},
|
|
196
|
+
"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).",
|
|
197
|
+
"readonly": true,
|
|
198
|
+
"inheritedFrom": {
|
|
199
|
+
"name": "UIBitElement",
|
|
200
|
+
"module": "../../platform/core/src/element.ts"
|
|
201
|
+
}
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"kind": "field",
|
|
205
|
+
"name": "_disposables",
|
|
206
|
+
"type": {
|
|
207
|
+
"text": "Set<() => void>"
|
|
208
|
+
},
|
|
209
|
+
"privacy": "private",
|
|
210
|
+
"default": "new Set()",
|
|
211
|
+
"inheritedFrom": {
|
|
212
|
+
"name": "UIBitElement",
|
|
213
|
+
"module": "../../platform/core/src/element.ts"
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"kind": "method",
|
|
218
|
+
"name": "createProperty",
|
|
219
|
+
"static": true,
|
|
220
|
+
"parameters": [
|
|
221
|
+
{
|
|
222
|
+
"name": "name",
|
|
223
|
+
"type": {
|
|
224
|
+
"text": "PropertyKey"
|
|
225
|
+
}
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"name": "options",
|
|
229
|
+
"optional": true,
|
|
230
|
+
"type": {
|
|
231
|
+
"text": "PropertyDeclaration"
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
],
|
|
235
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default.",
|
|
236
|
+
"inheritedFrom": {
|
|
237
|
+
"name": "UIBitElement",
|
|
238
|
+
"module": "../../platform/core/src/element.ts"
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"kind": "method",
|
|
243
|
+
"name": "finalizeStyles",
|
|
244
|
+
"static": true,
|
|
245
|
+
"return": {
|
|
246
|
+
"type": {
|
|
247
|
+
"text": "Array<any>"
|
|
248
|
+
}
|
|
249
|
+
},
|
|
250
|
+
"parameters": [
|
|
251
|
+
{
|
|
252
|
+
"name": "styles",
|
|
253
|
+
"optional": true,
|
|
254
|
+
"type": {
|
|
255
|
+
"text": "CSSResultGroup"
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
],
|
|
259
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles.",
|
|
260
|
+
"inheritedFrom": {
|
|
261
|
+
"name": "UIBitElement",
|
|
262
|
+
"module": "../../platform/core/src/element.ts"
|
|
263
|
+
}
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
"kind": "method",
|
|
267
|
+
"name": "dispatchCustomEvent",
|
|
268
|
+
"return": {
|
|
269
|
+
"type": {
|
|
270
|
+
"text": "boolean"
|
|
271
|
+
}
|
|
272
|
+
},
|
|
273
|
+
"parameters": [
|
|
274
|
+
{
|
|
275
|
+
"name": "name",
|
|
276
|
+
"type": {
|
|
277
|
+
"text": "string"
|
|
278
|
+
}
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"name": "detail",
|
|
282
|
+
"optional": true,
|
|
283
|
+
"type": {
|
|
284
|
+
"text": "T"
|
|
285
|
+
}
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"name": "options",
|
|
289
|
+
"optional": true,
|
|
290
|
+
"type": {
|
|
291
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
],
|
|
295
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options.",
|
|
296
|
+
"inheritedFrom": {
|
|
297
|
+
"name": "UIBitElement",
|
|
298
|
+
"module": "../../platform/core/src/element.ts"
|
|
299
|
+
}
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
"kind": "method",
|
|
303
|
+
"name": "getCssPropertyValue",
|
|
304
|
+
"return": {
|
|
305
|
+
"type": {
|
|
306
|
+
"text": "string"
|
|
307
|
+
}
|
|
308
|
+
},
|
|
309
|
+
"parameters": [
|
|
310
|
+
{
|
|
311
|
+
"name": "propertyName",
|
|
312
|
+
"type": {
|
|
313
|
+
"text": "string"
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
],
|
|
317
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element.",
|
|
318
|
+
"inheritedFrom": {
|
|
319
|
+
"name": "UIBitElement",
|
|
320
|
+
"module": "../../platform/core/src/element.ts"
|
|
321
|
+
}
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
"kind": "method",
|
|
325
|
+
"name": "registerDisposable",
|
|
326
|
+
"parameters": [
|
|
327
|
+
{
|
|
328
|
+
"name": "cleanup",
|
|
329
|
+
"type": {
|
|
330
|
+
"text": "() => void"
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
],
|
|
334
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM.",
|
|
335
|
+
"inheritedFrom": {
|
|
336
|
+
"name": "UIBitElement",
|
|
337
|
+
"module": "../../platform/core/src/element.ts"
|
|
338
|
+
}
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
"kind": "method",
|
|
342
|
+
"name": "listen",
|
|
343
|
+
"return": {
|
|
344
|
+
"type": {
|
|
345
|
+
"text": "() => void"
|
|
346
|
+
}
|
|
347
|
+
},
|
|
348
|
+
"parameters": [
|
|
349
|
+
{
|
|
350
|
+
"name": "target",
|
|
351
|
+
"type": {
|
|
352
|
+
"text": "EventTarget"
|
|
353
|
+
}
|
|
354
|
+
},
|
|
355
|
+
{
|
|
356
|
+
"name": "type",
|
|
357
|
+
"type": {
|
|
358
|
+
"text": "K"
|
|
359
|
+
}
|
|
360
|
+
},
|
|
361
|
+
{
|
|
362
|
+
"name": "listener",
|
|
363
|
+
"type": {
|
|
364
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
{
|
|
368
|
+
"name": "options",
|
|
369
|
+
"optional": true,
|
|
370
|
+
"type": {
|
|
371
|
+
"text": "boolean | AddEventListenerOptions"
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
],
|
|
375
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected.",
|
|
376
|
+
"inheritedFrom": {
|
|
377
|
+
"name": "UIBitElement",
|
|
378
|
+
"module": "../../platform/core/src/element.ts"
|
|
379
|
+
}
|
|
175
380
|
}
|
|
176
381
|
],
|
|
177
382
|
"events": [
|
|
@@ -192,12 +397,36 @@
|
|
|
192
397
|
"default": "3",
|
|
193
398
|
"description": "Maximum number of lines to show when collapsed.",
|
|
194
399
|
"fieldName": "lines"
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
"name": "locale",
|
|
403
|
+
"type": {
|
|
404
|
+
"text": "string"
|
|
405
|
+
},
|
|
406
|
+
"default": "''",
|
|
407
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
408
|
+
"fieldName": "locale",
|
|
409
|
+
"inheritedFrom": {
|
|
410
|
+
"name": "UIBitElement",
|
|
411
|
+
"module": "../../platform/core/src/element.ts"
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
],
|
|
415
|
+
"cssStates": [
|
|
416
|
+
{
|
|
417
|
+
"name": "clamped",
|
|
418
|
+
"description": "Active when the text content is currently truncated."
|
|
419
|
+
},
|
|
420
|
+
{
|
|
421
|
+
"name": "expanded",
|
|
422
|
+
"description": "Active when the full text content is visible."
|
|
195
423
|
}
|
|
196
424
|
],
|
|
197
425
|
"superclass": {
|
|
198
426
|
"name": "UIBitElement",
|
|
199
427
|
"package": "@uibit/core"
|
|
200
428
|
},
|
|
429
|
+
"summary": "A multi-line text truncation and clamping component with a dynamic \"Read More\" button.\nclamped height a \"More\" toggle appears inline at the truncation point.\nClicking it expands the block; clicking \"Less\" collapses it again.\n\nUses a ResizeObserver to recalculate on every container-width change.",
|
|
201
430
|
"tagName": "uibit-text-clamp",
|
|
202
431
|
"customElement": true
|
|
203
432
|
}
|
|
@@ -234,6 +463,250 @@
|
|
|
234
463
|
"path": "src/types.ts",
|
|
235
464
|
"declarations": [],
|
|
236
465
|
"exports": []
|
|
466
|
+
},
|
|
467
|
+
{
|
|
468
|
+
"kind": "javascript-module",
|
|
469
|
+
"path": "../../platform/core/src/element.ts",
|
|
470
|
+
"declarations": [
|
|
471
|
+
{
|
|
472
|
+
"kind": "class",
|
|
473
|
+
"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.",
|
|
474
|
+
"name": "UIBitElement",
|
|
475
|
+
"members": [
|
|
476
|
+
{
|
|
477
|
+
"kind": "field",
|
|
478
|
+
"name": "locale",
|
|
479
|
+
"type": {
|
|
480
|
+
"text": "string"
|
|
481
|
+
},
|
|
482
|
+
"default": "''",
|
|
483
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
484
|
+
"attribute": "locale"
|
|
485
|
+
},
|
|
486
|
+
{
|
|
487
|
+
"kind": "field",
|
|
488
|
+
"name": "resolvedLocale",
|
|
489
|
+
"type": {
|
|
490
|
+
"text": "string | undefined"
|
|
491
|
+
},
|
|
492
|
+
"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).",
|
|
493
|
+
"readonly": true
|
|
494
|
+
},
|
|
495
|
+
{
|
|
496
|
+
"kind": "field",
|
|
497
|
+
"name": "_disposables",
|
|
498
|
+
"type": {
|
|
499
|
+
"text": "Set<() => void>"
|
|
500
|
+
},
|
|
501
|
+
"privacy": "private",
|
|
502
|
+
"default": "new Set()"
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
"kind": "method",
|
|
506
|
+
"name": "createProperty",
|
|
507
|
+
"static": true,
|
|
508
|
+
"parameters": [
|
|
509
|
+
{
|
|
510
|
+
"name": "name",
|
|
511
|
+
"type": {
|
|
512
|
+
"text": "PropertyKey"
|
|
513
|
+
}
|
|
514
|
+
},
|
|
515
|
+
{
|
|
516
|
+
"name": "options",
|
|
517
|
+
"optional": true,
|
|
518
|
+
"type": {
|
|
519
|
+
"text": "PropertyDeclaration"
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
],
|
|
523
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default."
|
|
524
|
+
},
|
|
525
|
+
{
|
|
526
|
+
"kind": "method",
|
|
527
|
+
"name": "finalizeStyles",
|
|
528
|
+
"static": true,
|
|
529
|
+
"return": {
|
|
530
|
+
"type": {
|
|
531
|
+
"text": "Array<any>"
|
|
532
|
+
}
|
|
533
|
+
},
|
|
534
|
+
"parameters": [
|
|
535
|
+
{
|
|
536
|
+
"name": "styles",
|
|
537
|
+
"optional": true,
|
|
538
|
+
"type": {
|
|
539
|
+
"text": "CSSResultGroup"
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
],
|
|
543
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles."
|
|
544
|
+
},
|
|
545
|
+
{
|
|
546
|
+
"kind": "method",
|
|
547
|
+
"name": "dispatchCustomEvent",
|
|
548
|
+
"return": {
|
|
549
|
+
"type": {
|
|
550
|
+
"text": "boolean"
|
|
551
|
+
}
|
|
552
|
+
},
|
|
553
|
+
"parameters": [
|
|
554
|
+
{
|
|
555
|
+
"name": "name",
|
|
556
|
+
"type": {
|
|
557
|
+
"text": "string"
|
|
558
|
+
}
|
|
559
|
+
},
|
|
560
|
+
{
|
|
561
|
+
"name": "detail",
|
|
562
|
+
"optional": true,
|
|
563
|
+
"type": {
|
|
564
|
+
"text": "T"
|
|
565
|
+
}
|
|
566
|
+
},
|
|
567
|
+
{
|
|
568
|
+
"name": "options",
|
|
569
|
+
"optional": true,
|
|
570
|
+
"type": {
|
|
571
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
572
|
+
}
|
|
573
|
+
}
|
|
574
|
+
],
|
|
575
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options."
|
|
576
|
+
},
|
|
577
|
+
{
|
|
578
|
+
"kind": "method",
|
|
579
|
+
"name": "getCssPropertyValue",
|
|
580
|
+
"return": {
|
|
581
|
+
"type": {
|
|
582
|
+
"text": "string"
|
|
583
|
+
}
|
|
584
|
+
},
|
|
585
|
+
"parameters": [
|
|
586
|
+
{
|
|
587
|
+
"name": "propertyName",
|
|
588
|
+
"type": {
|
|
589
|
+
"text": "string"
|
|
590
|
+
}
|
|
591
|
+
}
|
|
592
|
+
],
|
|
593
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element."
|
|
594
|
+
},
|
|
595
|
+
{
|
|
596
|
+
"kind": "method",
|
|
597
|
+
"name": "registerDisposable",
|
|
598
|
+
"parameters": [
|
|
599
|
+
{
|
|
600
|
+
"name": "cleanup",
|
|
601
|
+
"type": {
|
|
602
|
+
"text": "() => void"
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
],
|
|
606
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM."
|
|
607
|
+
},
|
|
608
|
+
{
|
|
609
|
+
"kind": "method",
|
|
610
|
+
"name": "listen",
|
|
611
|
+
"return": {
|
|
612
|
+
"type": {
|
|
613
|
+
"text": "() => void"
|
|
614
|
+
}
|
|
615
|
+
},
|
|
616
|
+
"parameters": [
|
|
617
|
+
{
|
|
618
|
+
"name": "target",
|
|
619
|
+
"type": {
|
|
620
|
+
"text": "EventTarget"
|
|
621
|
+
}
|
|
622
|
+
},
|
|
623
|
+
{
|
|
624
|
+
"name": "type",
|
|
625
|
+
"type": {
|
|
626
|
+
"text": "K"
|
|
627
|
+
}
|
|
628
|
+
},
|
|
629
|
+
{
|
|
630
|
+
"name": "listener",
|
|
631
|
+
"type": {
|
|
632
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
633
|
+
}
|
|
634
|
+
},
|
|
635
|
+
{
|
|
636
|
+
"name": "options",
|
|
637
|
+
"optional": true,
|
|
638
|
+
"type": {
|
|
639
|
+
"text": "boolean | AddEventListenerOptions"
|
|
640
|
+
}
|
|
641
|
+
}
|
|
642
|
+
],
|
|
643
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected."
|
|
644
|
+
},
|
|
645
|
+
{
|
|
646
|
+
"kind": "method",
|
|
647
|
+
"name": "listen",
|
|
648
|
+
"return": {
|
|
649
|
+
"type": {
|
|
650
|
+
"text": "() => void"
|
|
651
|
+
}
|
|
652
|
+
},
|
|
653
|
+
"parameters": [
|
|
654
|
+
{
|
|
655
|
+
"name": "target",
|
|
656
|
+
"type": {
|
|
657
|
+
"text": "EventTarget"
|
|
658
|
+
}
|
|
659
|
+
},
|
|
660
|
+
{
|
|
661
|
+
"name": "type",
|
|
662
|
+
"type": {
|
|
663
|
+
"text": "string"
|
|
664
|
+
}
|
|
665
|
+
},
|
|
666
|
+
{
|
|
667
|
+
"name": "listener",
|
|
668
|
+
"type": {
|
|
669
|
+
"text": "EventListenerOrEventListenerObject"
|
|
670
|
+
}
|
|
671
|
+
},
|
|
672
|
+
{
|
|
673
|
+
"name": "options",
|
|
674
|
+
"optional": true,
|
|
675
|
+
"type": {
|
|
676
|
+
"text": "boolean | AddEventListenerOptions"
|
|
677
|
+
}
|
|
678
|
+
}
|
|
679
|
+
]
|
|
680
|
+
}
|
|
681
|
+
],
|
|
682
|
+
"attributes": [
|
|
683
|
+
{
|
|
684
|
+
"name": "locale",
|
|
685
|
+
"type": {
|
|
686
|
+
"text": "string"
|
|
687
|
+
},
|
|
688
|
+
"default": "''",
|
|
689
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
690
|
+
"fieldName": "locale"
|
|
691
|
+
}
|
|
692
|
+
],
|
|
693
|
+
"superclass": {
|
|
694
|
+
"name": "LitElement",
|
|
695
|
+
"package": "lit"
|
|
696
|
+
},
|
|
697
|
+
"customElement": true
|
|
698
|
+
}
|
|
699
|
+
],
|
|
700
|
+
"exports": [
|
|
701
|
+
{
|
|
702
|
+
"kind": "js",
|
|
703
|
+
"name": "UIBitElement",
|
|
704
|
+
"declaration": {
|
|
705
|
+
"name": "UIBitElement",
|
|
706
|
+
"module": "../../platform/core/src/element.ts"
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
]
|
|
237
710
|
}
|
|
238
711
|
]
|
|
239
712
|
}
|
|
@@ -23,10 +23,16 @@ export class NgxTextClamp {
|
|
|
23
23
|
this.el.nativeElement._resize = this._resize();
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
|
+
effect(() => {
|
|
27
|
+
if (this.el.nativeElement) {
|
|
28
|
+
this.el.nativeElement.locale = this.locale();
|
|
29
|
+
}
|
|
30
|
+
});
|
|
26
31
|
}
|
|
27
32
|
|
|
28
33
|
readonly lines = input<number, any>(3, { transform: numberAttribute });
|
|
29
34
|
readonly _resize = input<any, any>(new ResizeController(this, { target: () => this._contentEl, callback: () => this._measure(), }));
|
|
35
|
+
readonly locale = input<string, any>('');
|
|
30
36
|
|
|
31
37
|
readonly toggle = output<CustomEvent<{ expanded: boolean }>>();
|
|
32
38
|
}
|
|
@@ -5,11 +5,13 @@
|
|
|
5
5
|
let {
|
|
6
6
|
lines = undefined,
|
|
7
7
|
_resize = undefined,
|
|
8
|
+
locale = undefined,
|
|
8
9
|
children
|
|
9
10
|
} = $props<{
|
|
10
11
|
children?: any;
|
|
11
12
|
lines?: number;
|
|
12
13
|
_resize?: any;
|
|
14
|
+
locale?: string;
|
|
13
15
|
|
|
14
16
|
}>();
|
|
15
17
|
|
|
@@ -22,6 +24,9 @@
|
|
|
22
24
|
if (elementRef && _resize !== undefined) {
|
|
23
25
|
elementRef._resize = _resize;
|
|
24
26
|
}
|
|
27
|
+
if (elementRef && locale !== undefined) {
|
|
28
|
+
elementRef.locale = locale;
|
|
29
|
+
}
|
|
25
30
|
});
|
|
26
31
|
|
|
27
32
|
</script>
|
|
@@ -6,7 +6,8 @@ export const TextClamp = defineComponent({
|
|
|
6
6
|
name: 'TextClamp',
|
|
7
7
|
props: {
|
|
8
8
|
lines: { type: [String, Number, Boolean, Array, Object] as any },
|
|
9
|
-
_resize: { type: [String, Number, Boolean, Array, Object] as any }
|
|
9
|
+
_resize: { type: [String, Number, Boolean, Array, Object] as any },
|
|
10
|
+
locale: { type: [String, Number, Boolean, Array, Object] as any }
|
|
10
11
|
},
|
|
11
12
|
emits: ['toggle'],
|
|
12
13
|
setup(props, { slots, emit }) {
|
package/dist/text-clamp.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { UIBitElement, ResizeController } from '@uibit/core';
|
|
2
2
|
/**
|
|
3
3
|
* Clamps slotted content to an exact line count. When content overflows the
|
|
4
|
+
|
|
5
|
+
* @summary A multi-line text truncation and clamping component with a dynamic "Read More" button.
|
|
4
6
|
* clamped height a "More" toggle appears inline at the truncation point.
|
|
5
7
|
* Clicking it expands the block; clicking "Less" collapses it again.
|
|
6
8
|
*
|
|
@@ -18,7 +20,9 @@ import { UIBitElement, ResizeController } from '@uibit/core';
|
|
|
18
20
|
* @cssprop [--uibit-text-clamp-toggle-color=currentColor] - Toggle button color
|
|
19
21
|
* @cssprop [--uibit-text-clamp-toggle-font-weight=600] - Toggle button font weight
|
|
20
22
|
* @cssprop [--uibit-text-clamp-toggle-decoration=underline] - Toggle button text decoration
|
|
21
|
-
|
|
23
|
+
|
|
24
|
+
* @cssstate clamped - Active when the text content is currently truncated.
|
|
25
|
+
* @cssstate expanded - Active when the full text content is visible.*/
|
|
22
26
|
export declare class TextClamp extends UIBitElement {
|
|
23
27
|
static styles: import("lit").CSSResult;
|
|
24
28
|
/** Maximum number of lines to show when collapsed. */
|
package/dist/text-clamp.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-clamp.d.ts","sourceRoot":"","sources":["../src/text-clamp.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI5E
|
|
1
|
+
{"version":3,"file":"text-clamp.d.ts","sourceRoot":"","sources":["../src/text-clamp.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI5E;;;;;;;;;;;;;;;;;;;;;;;uEAuBuE;AACvE,qBACa,SAAU,SAAQ,YAAY;IACzC,MAAM,CAAC,MAAM,0BAAU;IAEvB,sDAAsD;IAC1B,KAAK,SAAK;IAE7B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,UAAU,CAAS;IAEjB,OAAO,CAAC,UAAU,CAAe;IAEpD,SAAS,CAAC,OAAO,mBAGd;IAEH,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAGpC;IAED,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,QAAQ;IA4BhB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,OAAO;IAKf,MAAM,oCA2BL;CACF;eAEc,SAAS"}
|
package/dist/text-clamp.js
CHANGED
|
@@ -10,6 +10,8 @@ import { property, query, state } from 'lit/decorators.js';
|
|
|
10
10
|
import { styles } from './styles';
|
|
11
11
|
/**
|
|
12
12
|
* Clamps slotted content to an exact line count. When content overflows the
|
|
13
|
+
|
|
14
|
+
* @summary A multi-line text truncation and clamping component with a dynamic "Read More" button.
|
|
13
15
|
* clamped height a "More" toggle appears inline at the truncation point.
|
|
14
16
|
* Clicking it expands the block; clicking "Less" collapses it again.
|
|
15
17
|
*
|
|
@@ -27,7 +29,9 @@ import { styles } from './styles';
|
|
|
27
29
|
* @cssprop [--uibit-text-clamp-toggle-color=currentColor] - Toggle button color
|
|
28
30
|
* @cssprop [--uibit-text-clamp-toggle-font-weight=600] - Toggle button font weight
|
|
29
31
|
* @cssprop [--uibit-text-clamp-toggle-decoration=underline] - Toggle button text decoration
|
|
30
|
-
|
|
32
|
+
|
|
33
|
+
* @cssstate clamped - Active when the text content is currently truncated.
|
|
34
|
+
* @cssstate expanded - Active when the full text content is visible.*/
|
|
31
35
|
let TextClamp = class TextClamp extends UIBitElement {
|
|
32
36
|
constructor() {
|
|
33
37
|
super(...arguments);
|
package/dist/text-clamp.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-clamp.js","sourceRoot":"","sources":["../src/text-clamp.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC
|
|
1
|
+
{"version":3,"file":"text-clamp.js","sourceRoot":"","sources":["../src/text-clamp.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;uEAuBuE;AAEhE,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,YAAY;IAApC;;QAGL,sDAAsD;QAC1B,UAAK,GAAG,CAAC,CAAC;QAErB,cAAS,GAAG,KAAK,CAAC;QAClB,eAAU,GAAG,KAAK,CAAC;QAI1B,YAAO,GAAG,IAAI,gBAAgB,CAAC,IAAI,EAAE;YAC7C,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU;YAC7B,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;SAChC,CAAC,CAAC;IAoFL,CAAC;aAjGQ,WAAM,GAAG,MAAM,AAAT,CAAU;IAevB,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC1C,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC;YAAE,IAAI,CAAC,WAAW,EAAE,CAAC;IACnD,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAEO,QAAQ;QACd,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;QAC3B,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,2CAA2C;QAC3C,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;QAC9C,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACnC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;QAC9C,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;QACpC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAE/B,MAAM,KAAK,GAAG,EAAE,CAAC,YAAY,CAAC;QAE9B,wCAAwC;QACxC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC5B,EAAE,CAAC,KAAK,CAAC,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE9C,MAAM,QAAQ,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACnD,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAEnD,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAE5B,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YAC/B,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAEO,WAAW;QACjB,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;QAC3B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YAC/B,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;QAChD,CAAC;aAAM,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAC3B,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;YAC5B,EAAE,CAAC,KAAK,CAAC,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAEO,OAAO;QACb,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,aAAa;;QAEtC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;YAElB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;uCACM,IAAI,CAAC,OAAO;;;;;;;WAOxC,CAAC,CAAC,CAAC,IAAI,CAAA;uCACqB,IAAI,CAAC,OAAO;;;;;;;WAOxC;;OAEJ,CAAC,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;CACF,CAAA;AA9F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAW;AAErB;IAAhB,KAAK,EAAE;4CAA2B;AAClB;IAAhB,KAAK,EAAE;6CAA4B;AAET;IAA1B,KAAK,CAAC,UAAU,CAAC;6CAAkC;AATzC,SAAS;IADrB,aAAa,CAAC,kBAAkB,CAAC;GACrB,SAAS,CAkGrB;;AAED,eAAe,SAAS,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uibit/text-clamp",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Clamps slotted text to an exact line count via a lines attribute. When content overflows, a More/Less toggle appears inline. A ResizeObserver recalculates overflow on every viewport resize so the clamp is always mathematically correct.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"directory": "packages/components/text-clamp"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@uibit/core": "0.
|
|
48
|
+
"@uibit/core": "0.2.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@types/node": "^20.19.43",
|
|
@@ -82,9 +82,9 @@
|
|
|
82
82
|
"tagName": "uibit-text-clamp"
|
|
83
83
|
},
|
|
84
84
|
"scripts": {
|
|
85
|
-
"build": "cem analyze --
|
|
86
|
-
"dev": "concurrently \"cem analyze --
|
|
87
|
-
"analyze": "cem analyze --
|
|
85
|
+
"build": "cem analyze --config ../custom-elements-manifest.config.js && uibit-codegen --package . && tsc",
|
|
86
|
+
"dev": "concurrently \"cem analyze --config ../custom-elements-manifest.config.js --watch\" \"tsc --watch\"",
|
|
87
|
+
"analyze": "cem analyze --config ../custom-elements-manifest.config.js",
|
|
88
88
|
"typecheck": "tsc --noEmit"
|
|
89
89
|
}
|
|
90
90
|
}
|