@lazhus/kg-ui 0.8.9 → 0.9.1

package/README.md

@@ -10,6 +10,7 @@ Modern, lightweight UI component library built with LitElement.
 - 📱 **Responsive** - Mobile-first design
 - ⚡ **Lightweight** - Built with LitElement
 - 🎯 **TypeScript Ready** - Full type support (Global & React/JSX)
+- 📊 **Powerful DataGrid** - Server-side pagination, sorting, and custom rendering
 - ♿ **Accessible** - ARIA compliant components
 
 ## 📦 Installation

package/custom-elements.json

@@ -5346,7 +5346,7 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .kg-switch-wrapper { display: flex; align-items: center; gap: 0.75rem; } .kg-switch-track { position: relative; width: 44px; height: 24px; background: var(--kg-border); border-radius: 24px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .kg-switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; white-space: nowrap; } .error .kg-switch-track { box-shadow: 0 0 0 2px rgba(219, 40, 40, 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
+              "default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .kg-switch-wrapper { display: flex; align-items: center; gap: 0.75rem; } .kg-switch-track { position: relative; width: 44px; height: 24px; background: var(--kg-border); border-radius: 24px; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .kg-switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transform: translateX(0); will-change: transform; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s ease, background-color 0.3s ease; } /* Micro-animation: stretch effect on click */ .kg-switch-wrapper:active .kg-switch-thumb { width: 26px; } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); } :host([checked]) .kg-switch-wrapper:active .kg-switch-thumb { transform: translateX(14px); /* Adjust position when stretched */ } .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); transition: color 0.3s ease; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; white-space: nowrap; } .error .kg-switch-track { box-shadow: 0 0 0 2px rgba(219, 40, 40, 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
             },
             {
               "kind": "method",
@@ -5414,6 +5414,30 @@
               },
               "default": "'primary'"
             },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "leftLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "rightLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
             {
               "kind": "field",
               "name": "value",

package/dist/components/kg-switch.js

@@ -1,14 +1,15 @@
-var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit";import"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class c extends(a(r)){static get properties(){return{...super.properties,checked:{type:Boolean,reflect:!0},label:{type:String},color:{type:String}}}constructor(){super(),this.checked=!1,this.color="primary",this.value="on"}formResetCallback(){this.checked=this.hasAttribute("checked"),this._updateFormValue()}formStateRestoreCallback(e){"checked"===e?this.checked=!0:"unchecked"===e&&(this.checked=!1),this._updateFormValue()}updated(e){e.has("checked")&&this._updateFormValue(),super.updated(e)}_updateFormValue(){const e=this.checked?this.value||"on":null;this.internals.setFormValue(e,this.checked?"checked":"unchecked")}_toggle(){this.disabled||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}render(){const e=(r=this.color)&&"primary"!==r?r.startsWith("#")||r.startsWith("rgb")||r.startsWith("hsl")?r:{secondary:"var(--kg-secondary)",tertiary:"var(--kg-tertiary)",error:"#e74c3c",red:"#e74c3c",green:"#2ecc71",blue:"#3498db",orange:"#f39c12",purple:"#9b59b6"}[r]||`var(--kg-${r}, ${r})`:"var(--kg-primary)",t=this.checked?`--switch-active-color: ${e};`:"";var r;return i`
+var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit";import"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class c extends(a(r)){static get properties(){return{...super.properties,checked:{type:Boolean,reflect:!0},label:{type:String},leftLabel:{type:String},rightLabel:{type:String},color:{type:String}}}constructor(){super(),this.checked=!1,this.color="primary",this.label="",this.leftLabel="",this.rightLabel="",this.value="on"}formResetCallback(){this.checked=this.hasAttribute("checked"),this._updateFormValue()}formStateRestoreCallback(e){"checked"===e?this.checked=!0:"unchecked"===e&&(this.checked=!1),this._updateFormValue()}updated(e){e.has("checked")&&this._updateFormValue(),super.updated(e)}_updateFormValue(){const e=this.checked?this.value||"on":null;this.internals.setFormValue(e,this.checked?"checked":"unchecked")}_toggle(){this.disabled||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}render(){const e=(r=this.color)&&"primary"!==r?r.startsWith("#")||r.startsWith("rgb")||r.startsWith("hsl")?r:{secondary:"var(--kg-secondary)",tertiary:"var(--kg-tertiary)",error:"#e74c3c",red:"#e74c3c",green:"#2ecc71",blue:"#3498db",orange:"#f39c12",purple:"#9b59b6"}[r]||`var(--kg-${r}, ${r})`:"var(--kg-primary)",t=this.checked?`--switch-active-color: ${e};`:"";var r;return i`
       <div style="position: relative; display: inline-block;">
         <div
           class="kg-switch-wrapper ${this.errorText?"error":""}"
           style="${t}"
           @click="${this._toggle}"
         >
+          ${this.leftLabel?i`<span class="label left-label">${this.leftLabel}</span>`:""}
           <div class="kg-switch-track">
             <div class="kg-switch-thumb"></div>
           </div>
-          ${this.label?i`<span class="label">${this.label}</span>`:""}
+          ${this.rightLabel||this.label?i`<span class="label right-label">${this.rightLabel||this.label}</span>`:""}
         </div>
         ${this.errorText?i`<div class="error-text">${this.errorText}</div>`:""}
       </div>
@@ -38,7 +39,7 @@ var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit
       height: 24px;
       background: var(--kg-border);
       border-radius: 24px;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
     }
 
@@ -51,7 +52,16 @@ var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit
       background: white;
       border-radius: 50%;
       box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      transform: translateX(0);
+      will-change: transform;
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
+                  width 0.2s ease,
+                  background-color 0.3s ease;
+    }
+
+    /* Micro-animation: stretch effect on click */
+    .kg-switch-wrapper:active .kg-switch-thumb {
+      width: 26px;
     }
 
     /* Checked State */
@@ -61,10 +71,17 @@ var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit
 
     :host([checked]) .kg-switch-thumb {
       transform: translateX(20px);
+    }
+
+    :host([checked]) .kg-switch-wrapper:active .kg-switch-thumb {
+      transform: translateX(14px); /* Adjust position when stretched */
+    }
+
     .label {
       font-size: 0.95rem;
       font-weight: 500;
       color: var(--kg-text);
+      transition: color 0.3s ease;
     }
 
     .error-text {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazhus/kg-ui",
-  "version": "0.8.9",
+  "version": "0.9.1",
   "type": "module",
   "files": [
     "dist",

package/types/components/kg-switch.d.ts

@@ -17,6 +17,12 @@ export class kgswitch extends LitElement {
   /**  */
   color: string;
   /**  */
+  label: string;
+  /**  */
+  leftLabel: string;
+  /**  */
+  rightLabel: string;
+  /**  */
   form: any;
   /**  */
   type: string;
@@ -37,6 +43,9 @@ declare global {
       errorText?: string;
       checked?: boolean;
       color?: string;
+      label?: string;
+      leftLabel?: string;
+      rightLabel?: string;
       form?: any;
       type?: string;
       onChange?: (e: any) => void;

package/types/index.d.ts

@@ -429,6 +429,9 @@ declare global {
       errorText?: string;
       checked?: boolean;
       color?: string;
+      label?: string;
+      leftLabel?: string;
+      rightLabel?: string;
       form?: any;
       type?: string;
       onChange?: (e: any) => void;