tinkiet 0.4.0 → 0.4.6

package/drawer/drawer.scss.js

@@ -1,4 +1,4 @@
-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}}";
-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}}";
+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,256px)}: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}}";
+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,256px)}: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}}";
 
 export { css_248z as default, stylesheet };

package/form/form.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+declare class TkForm extends LitElement {
+    value: any;
+    protected createRenderRoot(): Element | ShadowRoot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    submit(e: SubmitEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-form": TkForm;
+    }
+}
+export { TkForm };

package/form/form.js

@@ -0,0 +1,50 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+
+let TkForm = class TkForm extends LitElement {
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("submit", this.submit);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("submit", this.submit);
+    }
+    submit(e) {
+        e.preventDefault();
+        const $form = this.querySelector("form");
+        const result = {};
+        const data = new FormData($form);
+        data.forEach((value, key) => {
+            const $inputElement = this.querySelector(`[name=${key}]`);
+            if ($inputElement.tagName == "TK-SLIDER") {
+                value = Number(value);
+            }
+            if ($inputElement.tagName == "TK-CHECKBOX" && (value == "on" || value == "true")) {
+                value = true;
+            }
+            if (key.indexOf("-") > 0) {
+                const _ks = key.split("-");
+                result[_ks[0]] = result[_ks[0]] ?? {};
+                result[_ks[0]][_ks[1]] = value;
+            }
+            else {
+                result[key] = value;
+            }
+        });
+        this.dispatchEvent(new CustomEvent("fulfill", { detail: result }));
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], TkForm.prototype, "value", void 0);
+TkForm = __decorate([
+    customElement("tk-form")
+], TkForm);
+
+export { TkForm };

package/form/index.d.ts

@@ -0,0 +1 @@
+export { TkForm } from "./form";

package/form/index.js

@@ -0,0 +1 @@
+export { TkForm } from './form.js';

package/index.d.ts

@@ -5,6 +5,7 @@ export * from "./button/index";
 export * from "./checkbox/index";
 export * from "./dialog/index";
 export * from "./drawer/index";
+export * from "./form/index";
 export * from "./icon/index";
 export * from "./list-item/index";
 export * from "./loading/index";

package/index.js

@@ -5,6 +5,7 @@ import './button/index.js';
 import './checkbox/index.js';
 import './dialog/index.js';
 import './drawer/index.js';
+import './form/index.js';
 import './icon/index.js';
 import './list-item/index.js';
 import './loading/index.js';
@@ -28,6 +29,7 @@ export { TkButton } from './button/button.js';
 export { TkCheckbox } from './checkbox/checkbox.js';
 export { TkDialog } from './dialog/dialog.js';
 export { TkDrawer } from './drawer/drawer.js';
+export { TkForm } from './form/form.js';
 export { TkIcon } from './icon/icon.js';
 export { TkIcons } from './icon/icons.js';
 export { TkListItem } from './list-item/list-item.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinkiet",
-  "version": "0.4.0",
+  "version": "0.4.6",
   "description": "Pragmatic UI Web Components",
   "main": "index.js",
   "module": "index.js",
@@ -27,7 +27,7 @@
   "homepage": "https://tinkiet.educ.cloud",
   "dependencies": {
     "contactjs": "^1.4.0",
-    "lit": "^2.2.1",
+    "lit": "^2.2.2",
     "tslib": "^2.3.1"
   },
   "contributors": [

package/tab-group/tab-group.scss.js

@@ -1,4 +1,4 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));display:inline-block;overflow:hidden;position:relative}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid var(--shade-lighter)}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0}.circle,.underline{background-color:var(--color)}.circle{border-radius:var(--border-radius-circle,50%);height:8px;transition:transform .3s ease;width:8px}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));display:inline-block;overflow:hidden;position:relative}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid var(--shade-lighter)}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0}.circle,.underline{background-color:var(--color)}.circle{border-radius:var(--border-radius-circle,50%);height:8px;transition:transform .3s ease;width:8px}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));display:inline-block;overflow:hidden;overflow-x:scroll;position:relative}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid var(--shade-lighter)}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0}.circle,.underline{background-color:var(--color)}.circle{border-radius:var(--border-radius-circle,50%);height:8px;transition:transform .3s ease;width:8px}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));display:inline-block;overflow:hidden;overflow-x:scroll;position:relative}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid var(--shade-lighter)}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0}.circle,.underline{background-color:var(--color)}.circle{border-radius:var(--border-radius-circle,50%);height:8px;transition:transform .3s ease;width:8px}";
 
 export { css_248z as default, stylesheet };

package/umd/tinkiet.min.d.ts

@@ -233,6 +233,18 @@ declare global {
         "tk-drawer": TkDrawer;
     }
 }
+declare class TkForm extends LitElement {
+    value: any;
+    protected createRenderRoot(): Element | ShadowRoot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    submit(e: SubmitEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-form": TkForm;
+    }
+}
 declare class TkIcon extends TkBox {
     static get styles(): import("lit").CSSResult[];
     name: string;
@@ -610,4 +622,4 @@ declare global {
         "tk-theme": TkTheme;
     }
 }
-export { TkAccordion, TkBadge, TkBox, TkButton, TkCheckbox, TkDialog, TkDrawer, TkIcon, TkIcons, TkListItem, TkLoading, TkNavbar, TkNotie, TkPages, TkProgress, TkRadio, TkSelect, TkSlider, TkSwitch, TkTabGroup, TkTag, TkTextarea, TkTextfield, TkTheme };
+export { TkAccordion, TkBadge, TkBox, TkButton, TkCheckbox, TkDialog, TkDrawer, TkForm, TkIcon, TkIcons, TkListItem, TkLoading, TkNavbar, TkNotie, TkPages, TkProgress, TkRadio, TkSelect, TkSlider, TkSwitch, TkTabGroup, TkTag, TkTextarea, TkTextfield, TkTheme };