~repos /atoms-element

#js

git clone https://pyrossh.dev/repos/atoms-element.git

A simple web component library for defining your custom elements. It works on both client and server.

Readme
|
Commits
|
Files
6df7a2e7 — Peter John

4 years ago 
v2.6.1
Files changed (4) hide show
  1. index.js +78 -20
  2. index.test.js +2 -2
  3. package-lock.json +1 -1
  4. package.json +1 -1
index.js CHANGED
@@ -91,11 +91,13 @@ const colors = {
91
91
  keys: {
92
92
  bg: 'backgroundColor',
93
93
  text: 'color',
94
+ divide: 'borderColor',
94
- b: 'borderColor',
95
+ border: 'borderColor',
95
- bl: 'borderLeftColor',
96
- br: 'borderRightColor',
96
+ ring: '--tw-ring-color',
97
+ 'border-l': 'borderLeftColor',
98
+ 'border-r': 'borderRightColor',
97
- bt: 'borderTopColor',
99
+ 'border-t': 'borderTopColor',
98
- bb: 'borderBottomColor',
100
+ 'border-b': 'borderBottomColor',
99
101
  },
100
102
  values: {
101
103
  transparent: 'transparent',
@@ -269,11 +271,11 @@ const radius = {
269
271
 
270
272
  const borders = {
271
273
  keys: {
272
- bw: 'borderWidth',
274
+ border: 'borderWidth',
273
- bwl: 'borderLeftWidth',
275
+ 'border-l': 'borderLeftWidth',
274
- bwr: 'borderRightWidth',
276
+ 'border-r': 'borderRightWidth',
275
- bwt: 'borderTopWidth',
277
+ 'border-t': 'borderTopWidth',
276
- bwb: 'borderBottomWidth',
278
+ 'border-b': 'borderBottomWidth',
277
279
  },
278
280
  values: {
279
281
  '': '1px',
@@ -288,6 +290,10 @@ const sizes = {
288
290
  keys: {
289
291
  h: 'height',
290
292
  w: 'width',
293
+ top: 'top',
294
+ left: 'left',
295
+ bottom: 'bottom',
296
+ right: 'right',
291
297
  minh: 'minHeight',
292
298
  minw: 'minWidth',
293
299
  maxh: 'maxHeight',
@@ -362,7 +368,17 @@ const sizes = {
362
368
 
363
369
  const classLookup = {
364
370
  flex: createStyle('display', 'flex'),
371
+ 'inline-flex': createStyle('display', 'inline-flex'),
365
372
  block: createStyle('display', 'block'),
373
+ 'inline-block': createStyle('display', 'inline-block'),
374
+ inline: createStyle('display', 'inline'),
375
+ table: createStyle('display', 'table'),
376
+ 'inline-table': createStyle('display', 'inline-table'),
377
+ 'inline-table': createStyle('display', 'inline-table'),
378
+ grid: createStyle('display', 'grid'),
379
+ 'inline-grid': createStyle('display', 'inline-grid'),
380
+ contents: createStyle('display', 'contents'),
381
+ 'list-item': createStyle('display', 'list-item'),
366
382
  hidden: createStyle('display', 'none'),
367
383
  'flex-1': createStyle('flex', '1'),
368
384
  'flex-row': createStyle('flexDirection', 'row'),
@@ -397,11 +413,11 @@ const classLookup = {
397
413
  'break-words': createStyle('wordBreak', 'break-word'),
398
414
  'break-all': createStyle('wordBreak', 'break-all'),
399
415
  'font-sans': createStyle(
400
- 'font-family',
416
+ 'fontFamily',
401
417
  `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
402
418
  ),
403
- 'font-serif': createStyle('font-family', `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`),
419
+ 'font-serif': createStyle('fontFamily', `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`),
404
- 'font-mono': createStyle('font-family', `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`),
420
+ 'font-mono': createStyle('fontFamily', `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`),
405
421
  'font-thin': createStyle('fontWeight', '100'),
406
422
  'font-extralight': createStyle('fontWeight', '200'),
407
423
  'font-light': createStyle('fontWeight', '300'),
@@ -432,12 +448,12 @@ const classLookup = {
432
448
  'cursor-move': createStyle('cursor', 'move'),
433
449
  'cursor-help': createStyle('cursor', 'help'),
434
450
  'cursor-not-allowed': createStyle('cursor', 'not-allowed'),
435
- 'pointer-events-none': createStyle('pointer-events', 'none'),
451
+ 'pointer-events-none': createStyle('pointerEvents', 'none'),
436
- 'pointer-events-auto': createStyle('pointer-events', 'auto'),
452
+ 'pointer-events-auto': createStyle('pointerEvents', 'auto'),
437
- 'select-none': createStyle('user-select', 'none'),
453
+ 'select-none': createStyle('userSelect', 'none'),
438
- 'select-text': createStyle('user-select', 'text'),
454
+ 'select-text': createStyle('userSelect', 'text'),
439
- 'select-all': createStyle('user-select', 'all'),
455
+ 'select-all': createStyle('userSelect', 'all'),
440
- 'select-auto': createStyle('user-select', 'auto'),
456
+ 'select-auto': createStyle('userSelect', 'auto'),
441
457
  'w-screen': '100vw',
442
458
  'h-screen': '100vh',
443
459
  ...mapApply(sizes),
@@ -445,8 +461,51 @@ const classLookup = {
445
461
  ...mapApply(colors),
446
462
  ...mapApply(borders),
447
463
  ...mapApply(radius),
464
+ static: createStyle('position', 'static'),
465
+ fixed: createStyle('position', 'fixed'),
466
+ absolute: createStyle('absolute', 'fixed'),
467
+ relative: createStyle('relative', 'fixed'),
468
+ sticky: createStyle('sticky', 'fixed'),
469
+ 'overflow-auto': createStyle('overflow', 'auto'),
470
+ 'overflow-hidden': createStyle('overflow', 'hidden'),
471
+ 'overflow-visible': createStyle('overflow', 'visible'),
472
+ 'overflow-scroll': createStyle('overflow', 'scroll'),
473
+ 'overflow-x-auto': createStyle('overflowX', 'auto'),
474
+ 'overflow-y-auto': createStyle('overflowY', 'auto'),
475
+ 'overflow-x-hidden': createStyle('overflowX', 'hidden'),
476
+ 'overflow-y-hidden': createStyle('overflowY', 'hidden'),
477
+ 'overflow-x-visible': createStyle('overflowX', 'visible'),
478
+ 'overflow-y-visible': createStyle('overflowY', 'visible'),
479
+ 'overflow-x-scroll': createStyle('overflowX', 'scroll'),
480
+ 'overflow-y-scroll': createStyle('overflowY', 'scroll'),
481
+ 'origin-center': createStyle('transformOrigin', 'center'),
482
+ 'origin-top': createStyle('transformOrigin', 'top'),
483
+ 'origin-top-right': createStyle('transformOrigin', 'top right'),
484
+ 'origin-right': createStyle('transformOrigin', 'right'),
485
+ 'origin-bottom-right': createStyle('transformOrigin', 'bottom right'),
486
+ 'origin-bottom': createStyle('transformOrigin', 'bottom'),
487
+ 'origin-bottom-left': createStyle('transformOrigin', 'bottom left'),
488
+ 'origin-left': createStyle('transformOrigin', 'left'),
489
+ 'origin-top-left': createStyle('transformOrigin', 'top left'),
490
+ 'shadow-sm': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05'),
491
+ shadow: createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06'),
492
+ 'shadow-md': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06'),
493
+ 'shadow-lg': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05'),
494
+ 'shadow-xl': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04'),
495
+ 'shadow-2xl': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25'),
496
+ 'shadow-inner': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, inset 0 2px 4px 0 rgba(0, 0, 0, 0.06'),
497
+ 'shadow-none': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 0 #0000'),
498
+ 'ring-inset': createStyle('--tw-ring-inset', 'insest'),
499
+ 'ring-0': createStyle('box-shadow', ' 0 0 0 calc(0px + 0px) rgba(59, 130, 246, 0.5'),
500
+ 'ring-1': createStyle('box-shadow', ' 0 0 0 calc(1px + 0px) rgba(59, 130, 246, 0.5'),
501
+ 'ring-2': createStyle('box-shadow', ' 0 0 0 calc(2px + 0px) rgba(59, 130, 246, 0.5'),
502
+ 'ring-4': createStyle('box-shadow', ' 0 0 0 calc(4px + 0px) rgba(59, 130, 246, 0.5'),
503
+ 'ring-8': createStyle('box-shadow', ' 0 0 0 calc(8px + 0px) rgba(59, 130, 246, 0.5'),
504
+ ring: createStyle('box-shadow', ' 0 0 0 calc(3px + 0px) rgba(59, 130, 246, 0.5'),
448
505
  };
449
506
 
507
+ // hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500
508
+
450
509
  const lastAttributeNameRegex =
451
510
  /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
452
511
  const tagRE = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
@@ -957,7 +1016,6 @@ export class AtomsElement extends BaseElement {
957
1016
  }
958
1017
 
959
1018
  renderTemplate() {
960
- console.log('render');
961
1019
  const template = this.render();
962
1020
  if (isBrowser) {
963
1021
  if (!this.styleElement) {
index.test.js CHANGED
@@ -273,8 +273,8 @@ test('AtomsElement', async () => {
273
273
  const Clazz = AtomsElement.getElement('app-item');
274
274
  expect(Clazz.name).toEqual(AppItem.name);
275
275
  const instance = new AppItem({
276
- address: JSON.stringify({ street: '123' }).replace(/"/g, `'`),
276
+ address: { street: '123' },
277
- perpage: '1',
277
+ perPage: '1',
278
278
  });
279
279
  instance.renderItem = () => html`<div><p>render item 1</p></div>`;
280
280
  expect(AppItem.observedAttributes).toEqual(['perpage', 'address']);
package-lock.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "atoms-element",
3
- "version": "2.6.0",
3
+ "version": "2.6.1",
4
4
  "lockfileVersion": 2,
5
5
  "requires": true,
6
6
  "packages": {
package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "atoms-element",
3
- "version": "2.6.0",
3
+ "version": "2.6.1",
4
4
  "description": "A simple web component library for defining your custom elements. It works on both client and server. It supports hooks and follows the same principles of react.",
5
5
  "keywords": [
6
6
  "pyros.sh",