@lazhus/kg-ui 0.9.18 → 0.10.0

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 (5) hide show
  1. package/custom-elements.json +10 -2
  2. package/dist/components/kg-card.js +16 -5
  3. package/package.json +1 -1
  4. package/types/components/kg-card.d.ts +9 -0
  5. package/types/index.d.ts +3 -0
package/custom-elements.json CHANGED
@@ -753,13 +753,13 @@
753
753
  "text": "object"
754
754
  },
755
755
  "static": true,
756
- "default": "{ raised: { type: Boolean }, vertical: { type: Boolean }, inverted: { type: Boolean }, color: { type: String }, // primary, secondary, tertiary basic: { type: Boolean }, padded: { type: Boolean } }"
756
+ "default": "{ raised: { type: Boolean }, vertical: { type: Boolean }, inverted: { type: Boolean }, color: { type: String }, // primary, secondary, tertiary basic: { type: Boolean }, padded: { type: Boolean }, fullWidth: { type: Boolean }, height: { type: String }, width: { type: String } }"
757
757
  },
758
758
  {
759
759
  "kind": "field",
760
760
  "name": "styles",
761
761
  "static": true,
762
- "default": "css` :host { display: block; margin: 1rem 0; } .ui-card { position: relative; background: var(--kg-bg); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border-radius: var(--kg-radius-lg, 12px); border: 1px solid var(--kg-border); color: var(--kg-text); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; } .card-header { padding: 1rem 1.25rem; background: var(--kg-surface); border-bottom: 1px solid var(--kg-border); font-weight: 700; font-size: 1.1rem; border-top-left-radius: var(--kg-radius-lg, 12px); border-top-right-radius: var(--kg-radius-lg, 12px); } .card-content { padding: 1.25rem; flex: 1; } .card-footer { padding: 0.75rem 1.25rem; background: var(--kg-surface); border-top: 1px solid var(--kg-border); font-size: 0.9rem; color: var(--kg-text-muted); border-bottom-left-radius: var(--kg-radius-lg, 12px); border-bottom-right-radius: var(--kg-radius-lg, 12px); } /* Variations */ .raised { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .raised:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .basic { background: transparent; border: 1px dashed var(--kg-border); box-shadow: none; } .padded .card-content { padding: 2.5rem; } .inverted { background: #1B1C1D !important; color: #FFFFFF !important; border-color: #3d3e3f !important; } .inverted .card-header, .inverted .card-footer { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #FFFFFF !important; } .inverted .card-footer { color: rgba(255, 255, 255, 0.6) !important; } /* States / Colors */ .primary { border-top: 4px solid var(--kg-primary); } .secondary { border-top: 4px solid var(--kg-secondary); } .tertiary { border-top: 4px solid var(--kg-tertiary); } `"
762
+ "default": "css` :host { display: block; margin: 1rem 0; } .ui-card { position: relative; background: var(--kg-bg); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border-radius: var(--kg-radius-lg, 12px); border: 1px solid var(--kg-border); color: var(--kg-text); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-sizing: border-box; } .full-width { width: 100%; } .card-header { padding: 1rem 1.25rem; background: var(--kg-surface); border-bottom: 1px solid var(--kg-border); font-weight: 700; font-size: 1.1rem; border-top-left-radius: var(--kg-radius-lg, 12px); border-top-right-radius: var(--kg-radius-lg, 12px); } .card-content { padding: 1.25rem; flex: 1; } .card-footer { padding: 0.75rem 1.25rem; background: var(--kg-surface); border-top: 1px solid var(--kg-border); font-size: 0.9rem; color: var(--kg-text-muted); border-bottom-left-radius: var(--kg-radius-lg, 12px); border-bottom-right-radius: var(--kg-radius-lg, 12px); } /* Variations */ .raised { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .raised:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .basic { background: transparent; border: 1px dashed var(--kg-border); box-shadow: none; } .padded .card-content { padding: 2.5rem; } .inverted { background: #1B1C1D !important; color: #FFFFFF !important; border-color: #3d3e3f !important; } .inverted .card-header, .inverted .card-footer { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #FFFFFF !important; } .inverted .card-footer { color: rgba(255, 255, 255, 0.6) !important; } /* States / Colors */ .primary { border-top: 4px solid var(--kg-primary); } .secondary { border-top: 4px solid var(--kg-secondary); } .tertiary { border-top: 4px solid var(--kg-tertiary); } `"
763
763
  },
764
764
  {
765
765
  "kind": "method",
@@ -796,6 +796,14 @@
796
796
  "text": "boolean"
797
797
  },
798
798
  "default": "false"
799
+ },
800
+ {
801
+ "kind": "field",
802
+ "name": "fullWidth",
803
+ "type": {
804
+ "text": "boolean"
805
+ },
806
+ "default": "false"
799
807
  }
800
808
  ],
801
809
  "superclass": {
package/dist/components/kg-card.js CHANGED
@@ -1,6 +1,12 @@
1
- var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t)(e,"symbol"!=typeof o?o+"":o,t);import{LitElement as o,css as t,html as a}from"lit";import{classMap as d}from"lit/directives/class-map.js";class s extends o{constructor(){super(),this.raised=!1,this.inverted=!1,this.basic=!1,this.padded=!1}render(){const r={"ui-card":!0,raised:this.raised,inverted:this.inverted,basic:this.basic,padded:this.padded,[this.color]:!!this.color},e=this.querySelector('[slot="header"]'),o=this.querySelector('[slot="footer"]');return a`
2
- <div class="${d(r)}">
3
- ${e?a`
1
+ var r=Object.defineProperty,e=(e,t,o)=>((e,t,o)=>t in e?r(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o)(e,"symbol"!=typeof t?t+"":t,o);import{LitElement as t,css as o,html as a}from"lit";import{classMap as d}from"lit/directives/class-map.js";import{styleMap as i}from"lit/directives/style-map.js";class s extends t{constructor(){super(),this.raised=!1,this.inverted=!1,this.basic=!1,this.padded=!1,this.fullWidth=!1}render(){const r={"ui-card":!0,raised:this.raised,inverted:this.inverted,basic:this.basic,padded:this.padded,"full-width":this.fullWidth,[this.color]:!!this.color},e={height:this.height||"auto",width:this.fullWidth?"100%":this.width||"auto"},t=this.fullWidth?"0":"1rem 0",o=this.fullWidth?"100%":"auto",s=this.querySelector('[slot="header"]'),l=this.querySelector('[slot="footer"]');return a`
2
+ <style>
3
+ :host {
4
+ margin: ${t};
5
+ width: ${o};
6
+ }
7
+ </style>
8
+ <div class="${d(r)}" style="${i(e)}">
9
+ ${s?a`
4
10
  <div class="card-header">
5
11
  <slot name="header" @slotchange=${()=>this.requestUpdate()}></slot>
6
12
  </div>
@@ -10,13 +16,13 @@ var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,con
10
16
  <slot></slot>
11
17
  </div>
12
18
 
13
- ${o?a`
19
+ ${l?a`
14
20
  <div class="card-footer">
15
21
  <slot name="footer" @slotchange=${()=>this.requestUpdate()}></slot>
16
22
  </div>
17
23
  `:a`<slot name="footer" @slotchange=${()=>this.requestUpdate()} style="display:none"></slot>`}
18
24
  </div>
19
- `}}e(s,"properties",{raised:{type:Boolean},vertical:{type:Boolean},inverted:{type:Boolean},color:{type:String},basic:{type:Boolean},padded:{type:Boolean}}),e(s,"styles",t`
25
+ `}}e(s,"properties",{raised:{type:Boolean},vertical:{type:Boolean},inverted:{type:Boolean},color:{type:String},basic:{type:Boolean},padded:{type:Boolean},fullWidth:{type:Boolean},height:{type:String},width:{type:String}}),e(s,"styles",o`
20
26
  :host {
21
27
  display: block;
22
28
  margin: 1rem 0;
@@ -32,6 +38,11 @@ var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,con
32
38
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
33
39
  display: flex;
34
40
  flex-direction: column;
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ .full-width {
45
+ width: 100%;
35
46
  }
36
47
 
37
48
  .card-header {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lazhus/kg-ui",
3
- "version": "0.9.18",
3
+ "version": "0.10.0",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist",
package/types/components/kg-card.d.ts CHANGED
@@ -10,10 +10,16 @@ export class kgcard extends LitElement {
10
10
  basic: boolean;
11
11
  /** */
12
12
  padded: boolean;
13
+ /** */
14
+ fullWidth: boolean;
13
15
  /** Generated from static properties */
14
16
  vertical: boolean;
15
17
  /** Generated from static properties */
16
18
  color: string;
19
+ /** Generated from static properties */
20
+ height: string;
21
+ /** Generated from static properties */
22
+ width: string;
17
23
  }
18
24
 
19
25
  declare global {
@@ -28,8 +34,11 @@ declare global {
28
34
  inverted?: boolean;
29
35
  basic?: boolean;
30
36
  padded?: boolean;
37
+ fullWidth?: boolean;
31
38
  vertical?: boolean;
32
39
  color?: string;
40
+ height?: string;
41
+ width?: string;
33
42
  [key: string]: any;
34
43
  };
35
44
  }
package/types/index.d.ts CHANGED
@@ -150,8 +150,11 @@ declare global {
150
150
  inverted?: boolean;
151
151
  basic?: boolean;
152
152
  padded?: boolean;
153
+ fullWidth?: boolean;
153
154
  vertical?: boolean;
154
155
  color?: string;
156
+ height?: string;
157
+ width?: string;
155
158
  [key: string]: any;
156
159
  };
157
160
  'kg-checkbox': {