tinkiet 0.2.80 → 0.3.4

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 (9) hide show
  1. package/drawer/drawer.d.ts +4 -2
  2. package/drawer/drawer.js +35 -11
  3. package/drawer/drawer.scss.js +2 -2
  4. package/package.json +2 -2
  5. package/select/select.js +2 -2
  6. package/textarea/textarea.js +2 -2
  7. package/textfield/textfield.js +2 -2
  8. package/umd/tinkiet.min.d.ts +4 -2
  9. package/umd/tinkiet.min.js +47 -46
package/drawer/drawer.d.ts CHANGED
@@ -1,11 +1,13 @@
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;
9
11
  swipeable: boolean;
10
12
  private $drawer;
11
13
  private mql;
package/drawer/drawer.js CHANGED
@@ -2,24 +2,34 @@ import { __decorate, __metadata } from 'tslib';
2
2
  import { LitElement, html, css, unsafeCSS } from 'lit';
3
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
+ import { DIRECTION_HORIZONTAL, Pan, PointerListener, Tap } from 'contactjs';
6
6
 
7
7
  let TkDrawer = class TkDrawer extends LitElement {
8
8
  constructor() {
9
9
  super(...arguments);
10
- this.open = false;
10
+ this._open = false;
11
11
  this.over = false;
12
- this.left = false;
12
+ this.right = false;
13
13
  this.swipeable = false;
14
14
  }
15
+ set open(value) {
16
+ if (value === this._open)
17
+ return;
18
+ const oldValue = this._open;
19
+ this._open = value;
20
+ this.requestUpdate("open", oldValue);
21
+ if (this._open)
22
+ this.dispatchEvent(new Event("did-show"));
23
+ if (!this._open)
24
+ this.dispatchEvent(new Event("did-close"));
25
+ }
26
+ get open() {
27
+ return this._open;
28
+ }
15
29
  render() {
16
30
  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>`;
17
31
  }
18
32
  updated(props) {
19
- if (props.has("open") && this.open)
20
- this.dispatchEvent(new Event("did-show"));
21
- if (props.has("open") && !this.open)
22
- this.dispatchEvent(new Event("did-close"));
23
33
  if (props.has("overQuery"))
24
34
  this.overMediaQuery();
25
35
  if (props.has("openQuery")) {
@@ -27,8 +37,17 @@ let TkDrawer = class TkDrawer extends LitElement {
27
37
  this.show();
28
38
  }
29
39
  if (props.has("swipeable") && this.swipeable) {
40
+ var panOptions = {
41
+ supportedDirections: DIRECTION_HORIZONTAL,
42
+ bubbles: false
43
+ };
44
+ var panRecognizer = new Pan(this.$drawer, panOptions);
30
45
  this.pointerListener = new PointerListener(this.$drawer, {
31
- supportedGestures: [Tap, Pan],
46
+ DEBUG: true,
47
+ DEBUG_CONTACT: true,
48
+ DEBUG_GESTURES: true,
49
+ // handleTouchEvents : false,
50
+ supportedGestures: [Tap, panRecognizer],
32
51
  bubbles: false
33
52
  });
34
53
  this.$drawer.addEventListener("tap", (event) => {
@@ -37,6 +56,9 @@ let TkDrawer = class TkDrawer extends LitElement {
37
56
  if (el)
38
57
  el.click();
39
58
  });
59
+ this.$drawer.addEventListener("panstart", (event) => {
60
+ this.$drawer.style.transition = "transform 0ms ease";
61
+ });
40
62
  this.$drawer.addEventListener("pan", (event) => {
41
63
  var x = event.detail.global.deltaX > 0 ? 0 : event.detail.global.deltaX;
42
64
  var y = 0;
@@ -47,6 +69,7 @@ let TkDrawer = class TkDrawer extends LitElement {
47
69
  });
48
70
  this.$drawer.addEventListener("panend", (event) => {
49
71
  requestAnimationFrame(_ => {
72
+ this.$drawer.style.transition = "";
50
73
  this.$drawer.style.transform = "";
51
74
  this.open = event.detail.global.deltaX < -50 ? false : true;
52
75
  });
@@ -84,8 +107,9 @@ let TkDrawer = class TkDrawer extends LitElement {
84
107
  TkDrawer.styles = css `${unsafeCSS(css_248z)}`;
85
108
  __decorate([
86
109
  property({ type: Boolean, reflect: true }),
87
- __metadata("design:type", Boolean)
88
- ], TkDrawer.prototype, "open", void 0);
110
+ __metadata("design:type", Object),
111
+ __metadata("design:paramtypes", [Object])
112
+ ], TkDrawer.prototype, "open", null);
89
113
  __decorate([
90
114
  property({ type: Boolean, reflect: true }),
91
115
  __metadata("design:type", Boolean)
@@ -101,7 +125,7 @@ __decorate([
101
125
  __decorate([
102
126
  property({ type: Boolean, reflect: true }),
103
127
  __metadata("design:type", Boolean)
104
- ], TkDrawer.prototype, "left", void 0);
128
+ ], TkDrawer.prototype, "right", void 0);
105
129
  __decorate([
106
130
  property({ type: Boolean, reflect: true }),
107
131
  __metadata("design:type", Boolean)
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{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}}";
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tinkiet",
3
- "version": "0.2.80",
3
+ "version": "0.3.4",
4
4
  "description": "Pragmatic UI Web Components",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -27,7 +27,7 @@
27
27
  "homepage": "https://tinkiet.educ.cloud",
28
28
  "dependencies": {
29
29
  "contactjs": "^1.4.0",
30
- "lit": "^2.0.2",
30
+ "lit": "^2.2.1",
31
31
  "tslib": "^2.3.1"
32
32
  },
33
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,11 +206,13 @@ 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;
214
216
  swipeable: boolean;
215
217
  private $drawer;
216
218
  private mql;