tinkiet 0.2.70 → 0.2.80

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 (8) hide show
  1. package/drawer/drawer.d.ts +3 -0
  2. package/drawer/drawer.js +43 -4
  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 +2 -1
  7. package/umd/tinkiet.min.d.ts +5 -1
  8. package/umd/tinkiet.min.js +332 -14
package/drawer/drawer.d.ts CHANGED
@@ -6,7 +6,10 @@ declare class TkDrawer extends LitElement {
6
6
  openQuery: string;
7
7
  overQuery: string;
8
8
  left: boolean;
9
+ swipeable: boolean;
10
+ private $drawer;
9
11
  private mql;
12
+ private pointerListener;
10
13
  render(): import("lit-html").TemplateResult<1>;
11
14
  updated(props: any): void;
12
15
  protected overMediaQuery(): void;
package/drawer/drawer.js CHANGED
@@ -1,7 +1,8 @@
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 { PointerListener, Tap, Pan } from 'contactjs';
5
6
 
6
7
  let TkDrawer = class TkDrawer extends LitElement {
7
8
  constructor() {
@@ -9,9 +10,10 @@ let TkDrawer = class TkDrawer extends LitElement {
9
10
  this.open = false;
10
11
  this.over = false;
11
12
  this.left = false;
13
+ this.swipeable = false;
12
14
  }
13
15
  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>`;
16
+ 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
17
  }
16
18
  updated(props) {
17
19
  if (props.has("open") && this.open)
@@ -24,7 +26,36 @@ let TkDrawer = class TkDrawer extends LitElement {
24
26
  if (window.matchMedia(this.openQuery).matches)
25
27
  this.show();
26
28
  }
27
- ;
29
+ if (props.has("swipeable") && this.swipeable) {
30
+ this.pointerListener = new PointerListener(this.$drawer, {
31
+ supportedGestures: [Tap, Pan],
32
+ bubbles: false
33
+ });
34
+ this.$drawer.addEventListener("tap", (event) => {
35
+ const { x, y } = event.detail.live.srcEvent;
36
+ const el = this.shadowRoot?.elementFromPoint(x, y);
37
+ if (el)
38
+ el.click();
39
+ });
40
+ this.$drawer.addEventListener("pan", (event) => {
41
+ var x = event.detail.global.deltaX > 0 ? 0 : event.detail.global.deltaX;
42
+ var y = 0;
43
+ var transformString = "translate3d(" + x + "px, " + y + "px, 0)";
44
+ requestAnimationFrame(_ => {
45
+ this.$drawer.style.transform = transformString;
46
+ });
47
+ });
48
+ this.$drawer.addEventListener("panend", (event) => {
49
+ requestAnimationFrame(_ => {
50
+ this.$drawer.style.transform = "";
51
+ this.open = event.detail.global.deltaX < -50 ? false : true;
52
+ });
53
+ });
54
+ }
55
+ if (props.has("swipeable") && !this.swipeable) {
56
+ this.pointerListener && this.pointerListener.destroy();
57
+ this.pointerListener = null;
58
+ }
28
59
  }
29
60
  overMediaQuery() {
30
61
  if (this.mql)
@@ -37,7 +68,7 @@ let TkDrawer = class TkDrawer extends LitElement {
37
68
  e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
38
69
  }
39
70
  hideIfOver() {
40
- if (this.overQuery && this.mql?.matches || this.over)
71
+ if ((this.overQuery && this.mql?.matches) || this.over)
41
72
  this.open = false;
42
73
  }
43
74
  show() {
@@ -71,6 +102,14 @@ __decorate([
71
102
  property({ type: Boolean, reflect: true }),
72
103
  __metadata("design:type", Boolean)
73
104
  ], TkDrawer.prototype, "left", void 0);
105
+ __decorate([
106
+ property({ type: Boolean, reflect: true }),
107
+ __metadata("design:type", Boolean)
108
+ ], TkDrawer.prototype, "swipeable", void 0);
109
+ __decorate([
110
+ query("div.drawer"),
111
+ __metadata("design:type", HTMLElement)
112
+ ], TkDrawer.prototype, "$drawer", void 0);
74
113
  TkDrawer = __decorate([
75
114
  customElement("tk-drawer")
76
115
  ], 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;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([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{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,256px);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}}";
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.2.80",
4
4
  "description": "Pragmatic UI Web Components",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -26,6 +26,7 @@
26
26
  "license": "MIT",
27
27
  "homepage": "https://tinkiet.educ.cloud",
28
28
  "dependencies": {
29
+ "contactjs": "^1.4.0",
29
30
  "lit": "^2.0.2",
30
31
  "tslib": "^2.3.1"
31
32
  },
package/umd/tinkiet.min.d.ts CHANGED
@@ -211,7 +211,10 @@ declare class TkDrawer extends LitElement {
211
211
  openQuery: string;
212
212
  overQuery: string;
213
213
  left: boolean;
214
+ swipeable: boolean;
215
+ private $drawer;
214
216
  private mql;
217
+ private pointerListener;
215
218
  render(): import("lit-html").TemplateResult<1>;
216
219
  updated(props: any): void;
217
220
  protected overMediaQuery(): void;
@@ -251,12 +254,13 @@ declare class TkListItem extends LitElement {
251
254
  href: string;
252
255
  target: string;
253
256
  ariaLabel: string;
257
+ protected $ahref: HTMLAnchorElement;
254
258
  render(): import("lit-html").TemplateResult<1>;
255
259
  constructor();
256
260
  firstUpdated(): void;
257
261
  connectedCallback(): void;
258
262
  disconnectedCallback(): void;
259
- private handleClick;
263
+ protected handleClick(e: Event): void;
260
264
  }
261
265
  declare global {
262
266
  interface HTMLElementTagNameMap {