tinkiet 0.2.70 → 0.3.2

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.
Files changed (11) hide show
  1. package/drawer/drawer.d.ts +7 -2
  2. package/drawer/drawer.js +74 -13
  3. package/drawer/drawer.scss.js +2 -2
  4. package/list-item/list-item.d.ts +2 -1
  5. package/list-item/list-item.js +15 -8
  6. package/package.json +3 -2
  7. package/select/select.js +2 -2
  8. package/textarea/textarea.js +2 -2
  9. package/textfield/textfield.js +2 -2
  10. package/umd/tinkiet.min.d.ts +9 -3
  11. package/umd/tinkiet.min.js +340 -21
package/drawer/drawer.d.ts CHANGED
@@ -1,12 +1,17 @@
1
1
  import { LitElement } from "lit";
2
2
  declare class TkDrawer extends LitElement {
3
3
  static styles: import("lit").CSSResult;
4
- open: boolean;
4
+ _open: boolean;
5
+ set open(value: boolean);
6
+ get open(): boolean;
5
7
  over: boolean;
6
8
  openQuery: string;
7
9
  overQuery: string;
8
- left: boolean;
10
+ right: boolean;
11
+ swipeable: boolean;
12
+ private $drawer;
9
13
  private mql;
14
+ private pointerListener;
10
15
  render(): import("lit-html").TemplateResult<1>;
11
16
  updated(props: any): void;
12
17
  protected overMediaQuery(): void;
package/drawer/drawer.js CHANGED
@@ -1,30 +1,82 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
2
  import { LitElement, html, css, unsafeCSS } from 'lit';
3
- import { property, customElement } from 'lit/decorators.js';
3
+ import { property, query, customElement } from 'lit/decorators.js';
4
4
  import css_248z from './drawer.scss.js';
5
+ import { DIRECTION_HORIZONTAL, Pan, PointerListener, Tap } from 'contactjs';
5
6
 
6
7
  let TkDrawer = class TkDrawer extends LitElement {
7
8
  constructor() {
8
9
  super(...arguments);
9
- this.open = false;
10
+ this._open = false;
10
11
  this.over = false;
11
- this.left = false;
12
+ this.right = false;
13
+ this.swipeable = false;
14
+ }
15
+ set open(value) {
16
+ const oldValue = this._open;
17
+ this._open = value;
18
+ this.requestUpdate("open", oldValue);
19
+ if (this._open)
20
+ this.dispatchEvent(new Event("did-show"));
21
+ if (!this._open)
22
+ this.dispatchEvent(new Event("did-close"));
23
+ }
24
+ get open() {
25
+ return this._open;
12
26
  }
13
27
  render() {
14
- return html `<div class="container"><slot name="drawer-container"></slot></div><div class="overlay" @click="${() => (this.open = false)}"></div><div class="drawer"><div class="drawer-header"><slot name="drawer-header"></slot></div><div class="drawer-content"><slot name="drawer-content"></slot></div><div class="drawer-footer"><slot name="drawer-footer"></slot></div></div>`;
28
+ return html `<div class="container fi"><slot name="drawer-container"></slot></div><div class="overlay" @click="${() => (this.open = false)}"></div><div class="drawer"><div class="drawer-header"><slot name="drawer-header"></slot></div><div class="drawer-content"><slot name="drawer-content"></slot></div><div class="drawer-footer"><slot name="drawer-footer"></slot></div></div>`;
15
29
  }
16
30
  updated(props) {
17
- if (props.has("open") && this.open)
18
- this.dispatchEvent(new Event("did-show"));
19
- if (props.has("open") && !this.open)
20
- this.dispatchEvent(new Event("did-close"));
21
31
  if (props.has("overQuery"))
22
32
  this.overMediaQuery();
23
33
  if (props.has("openQuery")) {
24
34
  if (window.matchMedia(this.openQuery).matches)
25
35
  this.show();
26
36
  }
27
- ;
37
+ if (props.has("swipeable") && this.swipeable) {
38
+ var panOptions = {
39
+ supportedDirections: DIRECTION_HORIZONTAL,
40
+ bubbles: false
41
+ };
42
+ var panRecognizer = new Pan(this.$drawer, panOptions);
43
+ this.pointerListener = new PointerListener(this.$drawer, {
44
+ DEBUG: true,
45
+ DEBUG_CONTACT: true,
46
+ DEBUG_GESTURES: true,
47
+ // handleTouchEvents : false,
48
+ supportedGestures: [Tap, panRecognizer],
49
+ bubbles: false
50
+ });
51
+ this.$drawer.addEventListener("tap", (event) => {
52
+ const { x, y } = event.detail.live.srcEvent;
53
+ const el = this.shadowRoot?.elementFromPoint(x, y);
54
+ if (el)
55
+ el.click();
56
+ });
57
+ this.$drawer.addEventListener("panstart", (event) => {
58
+ this.$drawer.style.transition = "transform 0ms ease";
59
+ });
60
+ this.$drawer.addEventListener("pan", (event) => {
61
+ var x = event.detail.global.deltaX > 0 ? 0 : event.detail.global.deltaX;
62
+ var y = 0;
63
+ var transformString = "translate3d(" + x + "px, " + y + "px, 0)";
64
+ requestAnimationFrame(_ => {
65
+ this.$drawer.style.transform = transformString;
66
+ });
67
+ });
68
+ this.$drawer.addEventListener("panend", (event) => {
69
+ requestAnimationFrame(_ => {
70
+ this.$drawer.style.transition = "";
71
+ this.$drawer.style.transform = "";
72
+ this.open = event.detail.global.deltaX < -50 ? false : true;
73
+ });
74
+ });
75
+ }
76
+ if (props.has("swipeable") && !this.swipeable) {
77
+ this.pointerListener && this.pointerListener.destroy();
78
+ this.pointerListener = null;
79
+ }
28
80
  }
29
81
  overMediaQuery() {
30
82
  if (this.mql)
@@ -37,7 +89,7 @@ let TkDrawer = class TkDrawer extends LitElement {
37
89
  e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
38
90
  }
39
91
  hideIfOver() {
40
- if (this.overQuery && this.mql?.matches || this.over)
92
+ if ((this.overQuery && this.mql?.matches) || this.over)
41
93
  this.open = false;
42
94
  }
43
95
  show() {
@@ -53,8 +105,9 @@ let TkDrawer = class TkDrawer extends LitElement {
53
105
  TkDrawer.styles = css `${unsafeCSS(css_248z)}`;
54
106
  __decorate([
55
107
  property({ type: Boolean, reflect: true }),
56
- __metadata("design:type", Boolean)
57
- ], TkDrawer.prototype, "open", void 0);
108
+ __metadata("design:type", Object),
109
+ __metadata("design:paramtypes", [Object])
110
+ ], TkDrawer.prototype, "open", null);
58
111
  __decorate([
59
112
  property({ type: Boolean, reflect: true }),
60
113
  __metadata("design:type", Boolean)
@@ -70,7 +123,15 @@ __decorate([
70
123
  __decorate([
71
124
  property({ type: Boolean, reflect: true }),
72
125
  __metadata("design:type", Boolean)
73
- ], TkDrawer.prototype, "left", void 0);
126
+ ], TkDrawer.prototype, "right", void 0);
127
+ __decorate([
128
+ property({ type: Boolean, reflect: true }),
129
+ __metadata("design:type", Boolean)
130
+ ], TkDrawer.prototype, "swipeable", void 0);
131
+ __decorate([
132
+ query("div.drawer"),
133
+ __metadata("design:type", HTMLElement)
134
+ ], TkDrawer.prototype, "$drawer", void 0);
74
135
  TkDrawer = __decorate([
75
136
  customElement("tk-drawer")
76
137
  ], TkDrawer);
package/drawer/drawer.scss.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--drawer-width:256px;display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([left]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
2
- var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--drawer-width:256px;display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([left]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
1
+ var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;touch-action:pan-y;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([right]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
2
+ var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;touch-action:pan-y;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([right]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
3
3
 
4
4
  export { css_248z as default, stylesheet };
package/list-item/list-item.d.ts CHANGED
@@ -4,12 +4,13 @@ declare class TkListItem extends LitElement {
4
4
  href: string;
5
5
  target: string;
6
6
  ariaLabel: string;
7
+ protected $ahref: HTMLAnchorElement;
7
8
  render(): import("lit-html").TemplateResult<1>;
8
9
  constructor();
9
10
  firstUpdated(): void;
10
11
  connectedCallback(): void;
11
12
  disconnectedCallback(): void;
12
- private handleClick;
13
+ protected handleClick(e: Event): void;
13
14
  }
14
15
  declare global {
15
16
  interface HTMLElementTagNameMap {
package/list-item/list-item.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
2
  import { LitElement, html, css, unsafeCSS } from 'lit';
3
- import { property, customElement } from 'lit/decorators.js';
3
+ import { property, query, customElement } from 'lit/decorators.js';
4
4
  import css_248z from './list-item.scss.js';
5
5
 
6
6
  let TkListItem = class TkListItem extends LitElement {
@@ -11,7 +11,7 @@ let TkListItem = class TkListItem extends LitElement {
11
11
  }
12
12
  render() {
13
13
  return html `<slot name="before"></slot><div id="content"><slot></slot></div><slot name="after"></slot>${this.href
14
- ? html `<a tabindex="-1" id="link" href="${this.href}" rel="noreferrer" aria-label="${this.ariaLabel}"></a>`
14
+ ? html `<a tabindex="-1" id="ahref" href="${this.href}" rel="noreferrer" aria-label="${this.ariaLabel}"></a>`
15
15
  : ""}`;
16
16
  }
17
17
  firstUpdated() {
@@ -20,17 +20,20 @@ let TkListItem = class TkListItem extends LitElement {
20
20
  }
21
21
  connectedCallback() {
22
22
  super.connectedCallback();
23
- this.addEventListener("click", () => this.handleClick());
23
+ this.addEventListener("click", this.handleClick.bind(this));
24
24
  }
25
25
  disconnectedCallback() {
26
26
  this.removeEventListener("click", this.handleClick);
27
27
  super.disconnectedCallback();
28
28
  }
29
- handleClick() {
30
- if (this.href && this.target)
31
- window.open(this.href, this.target, "noopener noreferrer");
32
- else if (this.href)
33
- this.shadowRoot?.querySelector("#link")?.click();
29
+ handleClick(e) {
30
+ if (this.querySelector("button") && e.target == this.querySelector("button"))
31
+ return;
32
+ if (this.$ahref && e.target == this.$ahref)
33
+ return;
34
+ if (this.href) {
35
+ this.$ahref.click();
36
+ }
34
37
  }
35
38
  };
36
39
  TkListItem.styles = css `${unsafeCSS(css_248z)}`;
@@ -46,6 +49,10 @@ __decorate([
46
49
  property({ attribute: "aria-label" }),
47
50
  __metadata("design:type", String)
48
51
  ], TkListItem.prototype, "ariaLabel", void 0);
52
+ __decorate([
53
+ query("#ahref"),
54
+ __metadata("design:type", HTMLAnchorElement)
55
+ ], TkListItem.prototype, "$ahref", void 0);
49
56
  TkListItem = __decorate([
50
57
  customElement("tk-list-item"),
51
58
  __metadata("design:paramtypes", [])
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tinkiet",
3
- "version": "0.2.70",
3
+ "version": "0.3.2",
4
4
  "description": "Pragmatic UI Web Components",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -26,7 +26,8 @@
26
26
  "license": "MIT",
27
27
  "homepage": "https://tinkiet.educ.cloud",
28
28
  "dependencies": {
29
- "lit": "^2.0.2",
29
+ "contactjs": "^1.4.0",
30
+ "lit": "^2.2.1",
30
31
  "tslib": "^2.3.1"
31
32
  },
32
33
  "contributors": [
package/select/select.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
2
  import { LitElement, html, css, unsafeCSS } from 'lit';
3
- import { property, eventOptions, customElement } from 'lit/decorators.js';
3
+ import { property, state, eventOptions, customElement } from 'lit/decorators.js';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
5
  import '../box/index.js';
6
6
  import { uniqueID } from '../utils/unique.js';
@@ -85,7 +85,7 @@ __decorate([
85
85
  __metadata("design:type", String)
86
86
  ], TkSelect.prototype, "pattern", void 0);
87
87
  __decorate([
88
- property({ type: String, attribute: "value" }),
88
+ state(),
89
89
  __metadata("design:type", String)
90
90
  ], TkSelect.prototype, "initialValue", void 0);
91
91
  __decorate([
package/textarea/textarea.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
2
  import { LitElement, html, css, unsafeCSS } from 'lit';
3
- import { property, eventOptions, customElement } from 'lit/decorators.js';
3
+ import { property, state, eventOptions, customElement } from 'lit/decorators.js';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
5
  import { uniqueID } from '../utils/unique.js';
6
6
  import css_248z from './textarea.scss.js';
@@ -90,7 +90,7 @@ __decorate([
90
90
  __metadata("design:type", String)
91
91
  ], TkTextarea.prototype, "pattern", void 0);
92
92
  __decorate([
93
- property({ type: String }),
93
+ state(),
94
94
  __metadata("design:type", String)
95
95
  ], TkTextarea.prototype, "initialValue", void 0);
96
96
  __decorate([
package/textfield/textfield.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
+ import { property, state, eventOptions, customElement } from 'lit/decorators.js';
2
3
  import { LitElement, html, css, unsafeCSS } from 'lit';
3
- import { property, eventOptions, customElement } from 'lit/decorators.js';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
5
  import { uniqueID } from '../utils/unique.js';
6
6
  import css_248z from './textfield.scss.js';
@@ -89,7 +89,7 @@ __decorate([
89
89
  __metadata("design:type", String)
90
90
  ], TkTextfield.prototype, "pattern", void 0);
91
91
  __decorate([
92
- property({ type: String, attribute: "value" }),
92
+ state(),
93
93
  __metadata("design:type", String)
94
94
  ], TkTextfield.prototype, "initialValue", void 0);
95
95
  __decorate([
package/umd/tinkiet.min.d.ts CHANGED
@@ -206,12 +206,17 @@ declare global {
206
206
  }
207
207
  declare class TkDrawer extends LitElement {
208
208
  static styles: import("lit").CSSResult;
209
- open: boolean;
209
+ _open: boolean;
210
+ set open(value: boolean);
211
+ get open(): boolean;
210
212
  over: boolean;
211
213
  openQuery: string;
212
214
  overQuery: string;
213
- left: boolean;
215
+ right: boolean;
216
+ swipeable: boolean;
217
+ private $drawer;
214
218
  private mql;
219
+ private pointerListener;
215
220
  render(): import("lit-html").TemplateResult<1>;
216
221
  updated(props: any): void;
217
222
  protected overMediaQuery(): void;
@@ -251,12 +256,13 @@ declare class TkListItem extends LitElement {
251
256
  href: string;
252
257
  target: string;
253
258
  ariaLabel: string;
259
+ protected $ahref: HTMLAnchorElement;
254
260
  render(): import("lit-html").TemplateResult<1>;
255
261
  constructor();
256
262
  firstUpdated(): void;
257
263
  connectedCallback(): void;
258
264
  disconnectedCallback(): void;
259
- private handleClick;
265
+ protected handleClick(e: Event): void;
260
266
  }
261
267
  declare global {
262
268
  interface HTMLElementTagNameMap {