@lazhus/kg-ui 0.5.2 → 0.5.3

package/custom-elements.json

@@ -414,7 +414,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ color: { type: String }, // primary, secondary, tertiary, red, green, etc. size: { type: String }, // mini, tiny, small, medium, large, big, huge, massive fullwidth: { type: Boolean }, circular: { type: Boolean }, square: { type: Boolean }, loading: { type: Boolean }, disabled: { type: Boolean }, basic: { type: Boolean }, inverted: { type: Boolean }, active: { type: Boolean }, text: { type: Boolean }, hasText: { type: Boolean, state: true }, hasLeft: { type: Boolean, state: true }, hasRight: { type: Boolean, state: true } }"
+              "default": "{ color: { type: String }, // primary, secondary, tertiary, red, green, etc. size: { type: String }, // mini, tiny, small, medium, large, big, huge, massive fullwidth: { type: Boolean }, circular: { type: Boolean }, square: { type: Boolean }, loading: { type: Boolean }, disabled: { type: Boolean }, basic: { type: Boolean }, inverted: { type: Boolean }, active: { type: Boolean }, text: { type: Boolean }, hasText: { type: Boolean, state: true }, hasLeft: { type: Boolean, state: true }, hasRight: { type: Boolean, state: true }, type: { type: String } }"
             },
             {
               "kind": "field",
@@ -483,6 +483,14 @@
                 "text": "boolean"
               },
               "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "string"
+              },
+              "default": "'button'"
             }
           ],
           "superclass": {

package/dist/components/kg-button.js

@@ -1,4 +1,4 @@
-var t=Object.defineProperty,o=(o,r,e)=>((o,r,e)=>r in o?t(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e)(o,"symbol"!=typeof r?r+"":r,e);import{LitElement as r,css as e,html as a}from"lit";import{classMap as i}from"lit/directives/class-map.js";class n extends r{constructor(){super(),this.color="",this.size="medium",this.hasText=!1,this.hasLeft=!1,this.hasRight=!1}_handleSlotChange(t){const o=t.target,r=o.assignedNodes({flatten:!0}).filter(t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent.trim().length>0).length>0;o.name?"left"===o.name?this.hasLeft=r:"right"===o.name&&(this.hasRight=r):this.hasText=r}render(){const t=["primary","secondary","tertiary","error"].includes(this.color),o=this.color&&!t,r=!this.hasText&&(this.hasLeft||this.hasRight),e={[this.color]:t,"custom-color":o,[this.size]:!!this.size,fullwidth:this.fullwidth,circular:this.circular,square:this.square,loading:this.loading,basic:this.basic,text:this.text,inverted:this.inverted,disabled:this.disabled,"icon-only":r},n=o?`border: none; --kg-custom-color: ${this.color};`:"";return a`
+var t=Object.defineProperty,o=(o,r,e)=>((o,r,e)=>r in o?t(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e)(o,"symbol"!=typeof r?r+"":r,e);import{LitElement as r,css as e,html as a}from"lit";import{classMap as i}from"lit/directives/class-map.js";class n extends r{constructor(){super(),this.color="",this.size="medium",this.hasText=!1,this.hasLeft=!1,this.hasRight=!1,this.type="button"}_handleSlotChange(t){const o=t.target,r=o.assignedNodes({flatten:!0}).filter(t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent.trim().length>0).length>0;o.name?"left"===o.name?this.hasLeft=r:"right"===o.name&&(this.hasRight=r):this.hasText=r}render(){const t=["primary","secondary","tertiary","error"].includes(this.color),o=this.color&&!t,r=!this.hasText&&(this.hasLeft||this.hasRight),e={[this.color]:t,"custom-color":o,[this.size]:!!this.size,fullwidth:this.fullwidth,circular:this.circular,square:this.square,loading:this.loading,basic:this.basic,text:this.text,inverted:this.inverted,disabled:this.disabled,"icon-only":r},n=o?`border: none; --kg-custom-color: ${this.color};`:"";return a`
       <button 
         class="${i(e)}"
         style="${n}"
@@ -13,7 +13,7 @@ var t=Object.defineProperty,o=(o,r,e)=>((o,r,e)=>r in o?t(o,r,{enumerable:!0,con
         
         <slot name="right" @slotchange=${this._handleSlotChange}></slot>
       </button>
-    `}_handleClick(t){(this.loading||this.disabled)&&(t.preventDefault(),t.stopPropagation())}}o(n,"properties",{color:{type:String},size:{type:String},fullwidth:{type:Boolean},circular:{type:Boolean},square:{type:Boolean},loading:{type:Boolean},disabled:{type:Boolean},basic:{type:Boolean},inverted:{type:Boolean},active:{type:Boolean},text:{type:Boolean},hasText:{type:Boolean,state:!0},hasLeft:{type:Boolean,state:!0},hasRight:{type:Boolean,state:!0}}),o(n,"styles",e`
+    `}_handleClick(t){if(this.loading||this.disabled)return t.preventDefault(),void t.stopPropagation();if("submit"===this.type){const t=this.closest("form");t&&(t.requestSubmit?t.requestSubmit():t.submit())}if("reset"===this.type){const t=this.closest("form");t&&t.reset()}}}o(n,"properties",{color:{type:String},size:{type:String},fullwidth:{type:Boolean},circular:{type:Boolean},square:{type:Boolean},loading:{type:Boolean},disabled:{type:Boolean},basic:{type:Boolean},inverted:{type:Boolean},active:{type:Boolean},text:{type:Boolean},hasText:{type:Boolean,state:!0},hasLeft:{type:Boolean,state:!0},hasRight:{type:Boolean,state:!0},type:{type:String}}),o(n,"styles",e`
     :host {
       display: inline-block;
       vertical-align: middle;

package/package.json

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

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

@@ -12,6 +12,8 @@ export class kgbutton extends LitElement {
   hasLeft: boolean;
   /**  */
   hasRight: boolean;
+  /**  */
+  type: string;
 }
 
 declare global {
@@ -27,6 +29,7 @@ declare global {
       hasText?: boolean;
       hasLeft?: boolean;
       hasRight?: boolean;
+      type?: string;
         [key: string]: any;
       };
     }

package/types/index.d.ts

@@ -121,6 +121,7 @@ declare global {
       hasText?: boolean;
       hasLeft?: boolean;
       hasRight?: boolean;
+      type?: string;
       [key: string]: any;
     };
     'kg-card': {