tkeron 3.2.1 → 3.4.0

package/changelog.md

@@ -1,3 +1,17 @@
+# v3.4.0
+
+- update tkeron library
+    - Add childs property
+    - Add "addChilds" method
+
+# v3.3.0
+
+- update tkeron lilbrary
+    - Add and remove classes
+    - Refactor for quick "div" creation
+    - Add a simple CSS reset
+
+
 # v3.2.1
 
 - removed path entry to @tkeron.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tkeron",
-  "version": "3.2.1",
+  "version": "3.4.0",
   "description": "Micro framework for developing web user interfaces with typescript.",
   "bin": {
     "tkeron": "dist/index.js",

package/tkeron_library/addChilds.ts

@@ -0,0 +1,12 @@
+import { TkeronElement } from "./element";
+
+export const addChilds = (com: TkeronElement) => {
+  com.addChilds = (...elements) => {
+    for (const element of elements) {
+      com.childs.push(element);
+      com.htmlElement.appendChild(element.htmlElement);
+    }
+
+    return com;
+  };
+};

package/tkeron_library/addClass_removeClass.ts

@@ -0,0 +1,15 @@
+import { TkeronElement } from "./element";
+
+export const addClass = (com: TkeronElement) => {
+  com.addClass = (...className) => {
+    com.htmlElement.classList.add(...className);
+    return com;
+  };
+};
+
+export const removeClass = (com: TkeronElement) => {
+  com.removeClass = (...className) => {
+    com.htmlElement.classList.remove(...className);
+    return com;
+  };
+};

package/tkeron_library/element.ts

@@ -1,6 +1,8 @@
 import { appendIn } from "./appendIn";
 import { setAttribute } from "./setAttribute";
 import { setHtml, setText } from "./setHtml_setText";
+import { addClass, removeClass } from "./addClass_removeClass";
+import { addChilds } from "./addChilds";
 
 export interface TkeronElement {
   htmlElement: HTMLElement;
@@ -12,6 +14,10 @@ export interface TkeronElement {
   setHtml: (html: string) => TkeronElement;
   setText: (text: string) => TkeronElement;
   setAttribute: (attribute: string, value: string) => TkeronElement;
+  addClass: (...className) => TkeronElement;
+  removeClass: (...className) => TkeronElement;
+  childs: TkeronElement[];
+  addChilds: (...childs: TkeronElement[]) => TkeronElement;
 }
 
 export interface TkeronElementArguments {
@@ -19,19 +25,26 @@ export interface TkeronElementArguments {
   childs: TkeronElement[];
 }
 
-export const tk = (
+export type TkeronElementConstructor = (
   args?: Partial<TkeronElementArguments> | string
+) => TkeronElement;
+
+export type TkeronElementAuto = TkeronElement & TkeronElementConstructor;
+
+export const tk = <TkeronElementAuto>((
+  tagOrArgs?: Partial<TkeronElementArguments> | string
 ): TkeronElement => {
-  if (!args) args = {};
+  if (!tagOrArgs) tagOrArgs = {};
 
-  let { tag, childs } = typeof args === "object" ? args : <any>{};
+  let { tag, childs } = typeof tagOrArgs === "object" ? tagOrArgs : <any>{};
 
-  if (typeof args === "string") tag = args;
+  if (typeof tagOrArgs === "string") tag = tagOrArgs;
 
   if (!tag) tag = "div";
 
   const com = <TkeronElement>{
     htmlElement: document.createElement(tag),
+    childs: childs || [],
   };
 
   //init chaining methods
@@ -39,11 +52,33 @@ export const tk = (
   setHtml(com);
   setText(com);
   setAttribute(com);
+  addClass(com);
+  removeClass(com);
+  addChilds(com);
 
   if (childs)
     for (const child of childs) {
+      com.childs.push(child);
       com.htmlElement.appendChild(child.htmlElement);
     }
 
   return com;
-};
+});
+
+for (const attribute of [
+  "htmlElement",
+  "appendIn",
+  "setHtml",
+  "setText",
+  "setAttribute",
+  "addClass",
+  "removeClass",
+  "childs",
+  "addChilds"
+]) {
+  Object.defineProperty(tk, attribute, {
+    get() {
+      return tk()[attribute];
+    },
+  });
+}

package/tkeron_library/index.ts

@@ -6,7 +6,29 @@ import { settings } from "./settings";
  * @param css {string} css code to append in style element
  */
 export const addCss = (css: string) => {
-  tk({ tag: "style" });
+  tk({ tag: "style" }).setHtml(css).appendIn.head;
+};
+
+export const addCssReset = () => {
+  addCss(`
+      * {
+        box-sizing: border-box;
+        position: relative;
+        min-width: 0;
+      }
+
+      body {
+        min-height: 100dvh;
+      }
+
+      h1, h2, h3, h4 {
+        text-wrap: balance;
+      }
+
+      p {
+        text-wrap: pretty;
+      }
+`);
 };
 
 /**