@lazhus/kg-ui 0.10.15 → 0.10.16

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 (3) hide show
  1. package/custom-elements.json +1 -1
  2. package/dist/components/kg-checkbox.js +16 -9
  3. package/package.json +1 -1
package/custom-elements.json CHANGED
@@ -865,7 +865,7 @@
865
865
  "kind": "field",
866
866
  "name": "styles",
867
867
  "static": true,
868
- "default": "css` :host { display: inline-block; cursor: pointer; user-select: none; font-family: inherit; outline: none; } .kg-checkbox-wrapper:focus-within .checkbox-box { box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); border-color: var(--kg-primary); } .kg-checkbox-wrapper { position: relative; display: inline-block; } .kg-checkbox-container { display: flex; align-items: center; gap: 10px; position: relative; } .checkbox-box { width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--kg-bg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; } .kg-checkbox-container:hover .checkbox-box { border-color: var(--checkbox-active-color, var(--kg-primary)); } .kg-checkbox-container.checked .checkbox-box { background: var(--checkbox-active-color, var(--kg-primary)); border-color: var(--checkbox-active-color, var(--kg-primary)); } .checkmark { width: 12px; height: 12px; color: white; opacity: 0; transform: scale(0.5) rotate(-45deg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .checked .checkmark { opacity: 1; transform: scale(1) rotate(0); } /* Indeterminate state */ .checkbox-box::after { content: ''; position: absolute; width: 10px; height: 2px; background: white; border-radius: 1px; opacity: 0; transform: scaleX(0.5); transition: all 0.2s; } .kg-checkbox-container.indeterminate .checkbox-box { background: var(--kg-primary); border-color: var(--kg-primary); } .indeterminate .checkbox-box::after { opacity: 1; transform: scaleX(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } /* States */ .disabled { opacity: 0.5; cursor: not-allowed; } .error .checkbox-box { border-color: #DB2828 !important; } .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; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
868
+ "default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; outline: none; } .kg-checkbox-wrapper:focus-within .checkbox-box { box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); border-color: var(--kg-primary); } .kg-checkbox-wrapper { position: relative; display: inline-block; } .kg-checkbox-container { display: flex; align-items: center; gap: 10px; position: relative; } .checkbox-box { box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--kg-bg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; } .kg-checkbox-container:hover .checkbox-box { border-color: var(--checkbox-active-color, var(--kg-primary)); } .kg-checkbox-container.checked .checkbox-box { background: var(--checkbox-active-color, var(--kg-primary)); border-color: var(--checkbox-active-color, var(--kg-primary)); } .checkmark { width: 12px; height: 12px; color: white; opacity: 0; transform: scale(0.5) rotate(-45deg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .checked .checkmark { opacity: 1; transform: scale(1) rotate(0); } .indeterminate .checkmark { opacity: 0 !important; transform: scale(0.5) rotate(-45deg) !important; } /* Indeterminate state */ .checkbox-box::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background: white; border-radius: 1px; opacity: 0; transform: translate(-50%, -50%) scaleX(0.5); transition: all 0.2s; } .kg-checkbox-container.indeterminate .checkbox-box { background: var(--checkbox-active-color, var(--kg-primary)); border-color: var(--checkbox-active-color, var(--kg-primary)); } .indeterminate .checkbox-box::after { opacity: 1; transform: translate(-50%, -50%) scaleX(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } /* States */ .disabled { opacity: 0.5; cursor: not-allowed; } .error .checkbox-box { border-color: #DB2828 !important; } .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; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
869
869
  },
870
870
  {
871
871
  "kind": "method",
package/dist/components/kg-checkbox.js CHANGED
@@ -15,11 +15,9 @@ var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,con
15
15
  style="position: absolute; opacity: 0; width: 0; height: 0;"
16
16
  />
17
17
  <div class="checkbox-box">
18
- ${this.indeterminate?"":i`
19
- <svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
20
- <polyline points="20 6 9 17 4 12"></polyline>
21
- </svg>
22
- `}
18
+ <svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
19
+ <polyline points="20 6 9 17 4 12"></polyline>
20
+ </svg>
23
21
  </div>
24
22
  ${this.label?i`<span class="label-text">${this.label}</span>`:""}
25
23
  </div>
@@ -28,6 +26,7 @@ var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,con
28
26
  `}}t(s,"shadowRootOptions",{...r.shadowRootOptions,delegatesFocus:!0}),t(s,"styles",o`
29
27
  :host {
30
28
  display: inline-block;
29
+ vertical-align: middle;
31
30
  cursor: pointer;
32
31
  user-select: none;
33
32
  font-family: inherit;
@@ -52,6 +51,7 @@ var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,con
52
51
  }
53
52
 
54
53
  .checkbox-box {
54
+ box-sizing: border-box;
55
55
  width: 20px;
56
56
  height: 20px;
57
57
  border: 2px solid var(--kg-border);
@@ -88,27 +88,34 @@ var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,con
88
88
  transform: scale(1) rotate(0);
89
89
  }
90
90
 
91
+ .indeterminate .checkmark {
92
+ opacity: 0 !important;
93
+ transform: scale(0.5) rotate(-45deg) !important;
94
+ }
95
+
91
96
  /* Indeterminate state */
92
97
  .checkbox-box::after {
93
98
  content: '';
94
99
  position: absolute;
100
+ top: 50%;
101
+ left: 50%;
95
102
  width: 10px;
96
103
  height: 2px;
97
104
  background: white;
98
105
  border-radius: 1px;
99
106
  opacity: 0;
100
- transform: scaleX(0.5);
107
+ transform: translate(-50%, -50%) scaleX(0.5);
101
108
  transition: all 0.2s;
102
109
  }
103
110
 
104
111
  .kg-checkbox-container.indeterminate .checkbox-box {
105
- background: var(--kg-primary);
106
- border-color: var(--kg-primary);
112
+ background: var(--checkbox-active-color, var(--kg-primary));
113
+ border-color: var(--checkbox-active-color, var(--kg-primary));
107
114
  }
108
115
 
109
116
  .indeterminate .checkbox-box::after {
110
117
  opacity: 1;
111
- transform: scaleX(1);
118
+ transform: translate(-50%, -50%) scaleX(1);
112
119
  }
113
120
 
114
121
  .label-text {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lazhus/kg-ui",
3
- "version": "0.10.15",
3
+ "version": "0.10.16",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist",