kiui-kit 1.5.0 → 1.5.1
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.
- package/README.md +70 -65
- package/dist/assets/app.js +31 -0
- package/dist/assets/index.js +11 -11
- package/dist/index.html +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
<img src="kiui.png">
|
|
5
|
+
<img src="./public/kiui.png">
|
|
6
6
|
|
|
7
7
|
A lightweight, modern Web Component UI Kit – ready to plug into your HTML projects.
|
|
8
8
|
|
|
@@ -12,15 +12,15 @@ A lightweight, modern Web Component UI Kit – ready to plug into your HTML proj
|
|
|
12
12
|
|
|
13
13
|
## 📦 Files Overview
|
|
14
14
|
|
|
15
|
-
| File
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
23
|
-
| `kiui.
|
|
15
|
+
| File | Description |
|
|
16
|
+
| -------------------- | -------------------------------------------- |
|
|
17
|
+
| `/assets/index.js` | Core JavaScript containing Web Components |
|
|
18
|
+
| `/assets/app.js` | You can init Kiui project |
|
|
19
|
+
| `/assets/index.css` | Main CSS for layout and design |
|
|
20
|
+
| `/assets/custom.css` | Theme/style config – customize colors easily |
|
|
21
|
+
| `allData/*.json` | Dynamic content used by components |
|
|
22
|
+
| `index.html` | Live demo file – test components quickly |
|
|
23
|
+
| `kiui.png` | Default image/logo used in cards/headers |
|
|
24
24
|
|
|
25
25
|
---
|
|
26
26
|
|
|
@@ -41,36 +41,39 @@ You can either clone this repo or copy the following files into your project:
|
|
|
41
41
|
```
|
|
42
42
|
/your-project/
|
|
43
43
|
│
|
|
44
|
-
├── kiui.min.js
|
|
45
|
-
├── kiui.min.css
|
|
46
|
-
├── components.conf.css (optional)
|
|
47
44
|
├── /allData/*.json
|
|
45
|
+
├── /assets/*
|
|
46
|
+
├─────── index.js
|
|
47
|
+
├─────── app.js
|
|
48
|
+
├─────── index.css
|
|
49
|
+
├─────── custom.css (optional)
|
|
48
50
|
└── your.html
|
|
49
51
|
```
|
|
50
52
|
|
|
51
53
|
---
|
|
52
54
|
|
|
53
|
-
### 2. Include in Your HTML
|
|
55
|
+
### 2. Include in Your HTML and JS
|
|
56
|
+
HTML
|
|
54
57
|
|
|
55
58
|
```html
|
|
56
|
-
<!
|
|
59
|
+
<!doctype html>
|
|
57
60
|
<html lang="en" dir="ltr">
|
|
58
61
|
<head>
|
|
59
62
|
<meta charset="UTF-8" />
|
|
60
63
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
61
64
|
<title>KIUI Demo</title>
|
|
62
|
-
<link rel="shortcut icon" href="
|
|
63
|
-
<
|
|
64
|
-
<link rel="stylesheet" href="
|
|
65
|
+
<link rel="shortcut icon" href="/kiui.png" type="image/png" />
|
|
66
|
+
<script type="module" crossorigin src="/assets/index.js"></script>
|
|
67
|
+
<link rel="stylesheet" crossorigin href="/assets/index.css" />
|
|
65
68
|
</head>
|
|
66
69
|
|
|
67
70
|
<body>
|
|
68
71
|
<header>
|
|
69
72
|
<!--! To use one of the components below, uncomment only one -->
|
|
70
73
|
|
|
71
|
-
<header-type-1></header-type-1>
|
|
74
|
+
<!-- <header-type-1></header-type-1> -->
|
|
72
75
|
|
|
73
|
-
|
|
76
|
+
<header-type-2></header-type-2>
|
|
74
77
|
|
|
75
78
|
<!--! To use one of the components below, uncomment only one -->
|
|
76
79
|
</header>
|
|
@@ -111,13 +114,13 @@ You can either clone this repo or copy the following files into your project:
|
|
|
111
114
|
<box-card-1 data-title="just title"></box-card-1>
|
|
112
115
|
|
|
113
116
|
<box-card-1
|
|
114
|
-
data-img="
|
|
117
|
+
data-img="/kiui.png"
|
|
115
118
|
data-title="title2"
|
|
116
119
|
data-price="23"
|
|
117
120
|
></box-card-1>
|
|
118
121
|
|
|
119
122
|
<box-card-1
|
|
120
|
-
data-img="
|
|
123
|
+
data-img="/kiui.png"
|
|
121
124
|
data-button-title="Buy"
|
|
122
125
|
data-title="title3"
|
|
123
126
|
data-description="description"
|
|
@@ -125,7 +128,7 @@ You can either clone this repo or copy the following files into your project:
|
|
|
125
128
|
></box-card-1>
|
|
126
129
|
|
|
127
130
|
<box-card-1
|
|
128
|
-
data-img="
|
|
131
|
+
data-img="/kiui.png"
|
|
129
132
|
data-title="title4"
|
|
130
133
|
data-description="description"
|
|
131
134
|
data-button-title="button"
|
|
@@ -133,6 +136,12 @@ You can either clone this repo or copy the following files into your project:
|
|
|
133
136
|
></box-card-1>
|
|
134
137
|
<!--? Boxes -->
|
|
135
138
|
</div>
|
|
139
|
+
<button-primary
|
|
140
|
+
data-content="Click me"
|
|
141
|
+
data-bg="black"
|
|
142
|
+
data-color="#fff"
|
|
143
|
+
data-id="btn-1"
|
|
144
|
+
></button-primary>
|
|
136
145
|
</main>
|
|
137
146
|
|
|
138
147
|
<footer>
|
|
@@ -148,50 +157,46 @@ You can either clone this repo or copy the following files into your project:
|
|
|
148
157
|
</footer>
|
|
149
158
|
|
|
150
159
|
<!--* Scripts -->
|
|
151
|
-
<script
|
|
152
|
-
|
|
153
|
-
<!--! Use KIUI Type Writer -->
|
|
154
|
-
<script src="./src/effects/typewriter.js"></script>
|
|
155
|
-
<script>
|
|
156
|
-
initKIUITypeWriter(
|
|
157
|
-
[
|
|
158
|
-
"Welcome to KIUI",
|
|
159
|
-
"A lightweight",
|
|
160
|
-
"and",
|
|
161
|
-
"Modern Web Component UI Kit.",
|
|
162
|
-
"Let’s build something amazing together . . . ",
|
|
163
|
-
],
|
|
164
|
-
100, // typing/deleting speed
|
|
165
|
-
1000 // pause between type/delete
|
|
166
|
-
);
|
|
167
|
-
</script>
|
|
168
|
-
|
|
160
|
+
<script src="./assets/app.js"></script>
|
|
169
161
|
<!--! Other Scripts ... -->
|
|
170
|
-
<script>
|
|
171
|
-
// ? InitProject
|
|
172
|
-
|
|
173
|
-
(async () => {
|
|
174
|
-
const navMenus = await fetch("./src/allData/header.json")
|
|
175
|
-
.then((res) => res.json())
|
|
176
|
-
.then((data) => data);
|
|
177
|
-
|
|
178
|
-
initHeader(navMenus);
|
|
179
|
-
|
|
180
|
-
const footerData = await fetch("./src/allData/footer.json")
|
|
181
|
-
.then((res) => res.json())
|
|
182
|
-
.then((data) => data);
|
|
183
|
-
|
|
184
|
-
const socials = await fetch("./src/allData/socials.json")
|
|
185
|
-
.then((res) => res.json())
|
|
186
|
-
.then((data) => data);
|
|
187
|
-
|
|
188
|
-
const footer = { ...footerData.footer, socials: socials.socials };
|
|
189
|
-
|
|
190
|
-
initFooter(footer);
|
|
191
|
-
})();
|
|
192
|
-
</script>
|
|
193
162
|
</body>
|
|
194
163
|
</html>
|
|
164
|
+
```
|
|
165
|
+
JavaScript (app.js)
|
|
166
|
+
|
|
167
|
+
```js
|
|
168
|
+
window.addEventListener("load", () => {
|
|
169
|
+
// ? InitProject
|
|
170
|
+
(async () => {
|
|
171
|
+
const navMenusDataRes = await fetch("/allData/header.json");
|
|
172
|
+
const navMenusData = await navMenusDataRes.json();
|
|
173
|
+
initHeader(navMenusData);
|
|
174
|
+
|
|
175
|
+
const footerDataRes = await fetch("/allData/footer.json");
|
|
176
|
+
const footerData = await footerDataRes.json();
|
|
177
|
+
|
|
178
|
+
const socialsDataRes = await fetch("/allData/socials.json");
|
|
179
|
+
const socialsData = await socialsDataRes.json();
|
|
180
|
+
|
|
181
|
+
const footer = { ...footerData.footer, socials: socialsData.socials };
|
|
182
|
+
initFooter(footer);
|
|
183
|
+
})();
|
|
184
|
+
|
|
185
|
+
// Use KIUI Type Writer
|
|
186
|
+
|
|
187
|
+
initKIUITypeWriter(
|
|
188
|
+
[
|
|
189
|
+
"Welcome to KIUI",
|
|
190
|
+
"A lightweight",
|
|
191
|
+
"and",
|
|
192
|
+
"Modern Web Component UI Kit.",
|
|
193
|
+
"Let’s build something amazing together . . . ",
|
|
194
|
+
],
|
|
195
|
+
100, // typing/deleting speed
|
|
196
|
+
1000, // pause between type/delete
|
|
197
|
+
);
|
|
198
|
+
});
|
|
199
|
+
|
|
195
200
|
```
|
|
196
201
|
|
|
197
202
|
---
|
|
@@ -289,7 +294,7 @@ npm run dev
|
|
|
289
294
|
## 🎨 Theming & Styling
|
|
290
295
|
|
|
291
296
|
- To change colors, shadows, transitions, and styles:
|
|
292
|
-
Edit the `
|
|
297
|
+
Edit the `custom.css` file and **uncomment** the section you want to modify.
|
|
293
298
|
- You can apply your own color palette, spacing, fonts, etc.
|
|
294
299
|
|
|
295
300
|
---
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
window.addEventListener("load", () => {
|
|
2
|
+
// ? InitProject
|
|
3
|
+
(async () => {
|
|
4
|
+
const navMenusDataRes = await fetch("/allData/header.json");
|
|
5
|
+
const navMenusData = await navMenusDataRes.json();
|
|
6
|
+
initHeader(navMenusData);
|
|
7
|
+
|
|
8
|
+
const footerDataRes = await fetch("/allData/footer.json");
|
|
9
|
+
const footerData = await footerDataRes.json();
|
|
10
|
+
|
|
11
|
+
const socialsDataRes = await fetch("/allData/socials.json");
|
|
12
|
+
const socialsData = await socialsDataRes.json();
|
|
13
|
+
|
|
14
|
+
const footer = { ...footerData.footer, socials: socialsData.socials };
|
|
15
|
+
initFooter(footer);
|
|
16
|
+
})();
|
|
17
|
+
|
|
18
|
+
// Use KIUI Type Writer
|
|
19
|
+
|
|
20
|
+
initKIUITypeWriter(
|
|
21
|
+
[
|
|
22
|
+
"Welcome to KIUI",
|
|
23
|
+
"A lightweight",
|
|
24
|
+
"and",
|
|
25
|
+
"Modern Web Component UI Kit.",
|
|
26
|
+
"Let’s build something amazing together . . . ",
|
|
27
|
+
],
|
|
28
|
+
100, // typing/deleting speed
|
|
29
|
+
1000, // pause between type/delete
|
|
30
|
+
);
|
|
31
|
+
});
|
package/dist/assets/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(){const
|
|
1
|
+
(function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))r(s);new MutationObserver(s=>{for(const t of s)if(t.type==="childList")for(const e of t.addedNodes)e.tagName==="LINK"&&e.rel==="modulepreload"&&r(e)}).observe(document,{childList:!0,subtree:!0});function o(s){const t={};return s.integrity&&(t.integrity=s.integrity),s.referrerPolicy&&(t.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?t.credentials="include":s.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function r(s){if(s.ep)return;s.ep=!0;const t=o(s);fetch(s.href,t)}})();function y(n){function a(s,t){const e=s.classList.contains("open");s.classList.contains("translate-x-full")?(s.classList.toggle("translate-x-0"),s.classList.toggle("translate-x-full")):s.classList.toggle("hidden");const[i,l]=t.children;e?(i.classList.remove("opacity-0"),i.classList.add("opacity-100"),l.classList.remove("opacity-100"),l.classList.add("opacity-0"),s.classList.remove("open")):(i.classList.remove("opacity-100"),i.classList.add("opacity-0"),l.classList.remove("opacity-0"),l.classList.add("opacity-100"),s.classList.add("open"))}class o extends HTMLElement{async connectedCallback(){const t=await n;if(!t)return;const e=t.menu.items.map(l=>`<li class="menu-item"><a class="transition-colors">${l}</a></li>`).join(""),i=t.menu.items.map(l=>`<li class="menu-mobile-item"><a class="transition-colors">${l}</a></li>`).join("");this.render(t.menu.title,e,i),this.setDesktopLinks(t.menu.links),this.setMobileLinks(t.menu.links),this.setupMobileToggle()}render(t,e,i){this.innerHTML=`
|
|
2
2
|
<nav class="menu-background bg-gray-100 dark:bg-gray-900 shadow-md fixed w-full top-0 left-0 z-50">
|
|
3
3
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
|
|
4
4
|
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
</ul>
|
|
35
35
|
</div>
|
|
36
36
|
</nav>
|
|
37
|
-
`}setDesktopLinks(t){this.querySelectorAll(".menu-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setMobileLinks(t){this.querySelectorAll(".menu-mobile-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setupMobileToggle(){const t=this.querySelector("#hamburger-btn"),e=this.querySelector("#mobile-menu"),i=t;t&&e&&i&&(i.children[0].classList.add("opacity-100"),i.children[1].classList.add("opacity-0"),t.addEventListener("click",()=>
|
|
37
|
+
`}setDesktopLinks(t){this.querySelectorAll(".menu-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setMobileLinks(t){this.querySelectorAll(".menu-mobile-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setupMobileToggle(){const t=this.querySelector("#hamburger-btn"),e=this.querySelector("#mobile-menu"),i=t;t&&e&&i&&(i.children[0].classList.add("opacity-100"),i.children[1].classList.add("opacity-0"),t.addEventListener("click",()=>a(e,i)))}}class r extends HTMLElement{async connectedCallback(){const t=await n;if(!t)return;const e=t.menu.items.map(l=>`<li class="menu-item"><a class="transition-colors">${l}</a></li>`).join(""),i=t.menu.items.map(l=>`<li class="menu-mobile-item"><a class="transition-colors">${l}</a></li>`).join("");this.render(t.menu.title,e,i),this.setLinks(t.menu.links),this.setMobileLinks(t.menu.links),this.setupMobileToggle()}render(t,e,i){this.innerHTML=`
|
|
38
38
|
<nav class="menu-background bg-gray-200 text-slate-800 dark:bg-gray-900 dark:text-slate-100 fixed top-0 left-0 w-full z-50 shadow">
|
|
39
39
|
<div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
|
|
40
40
|
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
</ul>
|
|
78
78
|
</div>
|
|
79
79
|
</nav>
|
|
80
|
-
`}setLinks(t){this.querySelectorAll(".menu-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setMobileLinks(t){this.querySelectorAll(".menu-mobile-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setupMobileToggle(){const t=this.querySelector("#hamburger-btn"),e=this.querySelector("#mobile-menu"),i=t;t&&e&&i&&(i.children[0].classList.add("opacity-100"),i.children[1].classList.add("opacity-0"),t.addEventListener("click",()=>
|
|
80
|
+
`}setLinks(t){this.querySelectorAll(".menu-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setMobileLinks(t){this.querySelectorAll(".menu-mobile-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setupMobileToggle(){const t=this.querySelector("#hamburger-btn"),e=this.querySelector("#mobile-menu"),i=t;t&&e&&i&&(i.children[0].classList.add("opacity-100"),i.children[1].classList.add("opacity-0"),t.addEventListener("click",()=>a(e,i)))}}customElements.define("header-type-1",o),customElements.define("header-type-2",r)}function w(n){class a extends HTMLElement{async connectedCallback(){const e=await n;e&&(this.logoRender=s.bind(this),this.render(e))}render(e){const i=e.socials.socials_names?e.socials.socials_names.map(l=>{if(this.logoRender(l))return`<a href="https://${l}" target="_blank">${this.logoRender(l)}</a>`}).join(""):"";this.innerHTML=`
|
|
81
81
|
<div class="footer bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-300 pt-10">
|
|
82
82
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
83
83
|
<!-- Top -->
|
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
</div>
|
|
164
164
|
</div>
|
|
165
165
|
</div>
|
|
166
|
-
`}}class
|
|
166
|
+
`}}class r extends HTMLElement{async connectedCallback(){const e=await n;e&&(this.logoRender=s.bind(this),this.render(e))}render({title:e,description:i,footerItems:l,socials:d}){const{item1:h,item2:p,item3:u}=l,v=d.socials_names?d.socials_names.map(c=>{if(this.logoRender(c))return`<a href="https://${c}" target="_blank">${this.logoRender(c)}</a>`}).join(""):"";this.innerHTML=`
|
|
167
167
|
<footer class="footer bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 py-16 text-sm">
|
|
168
168
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between lg:flex-row flex-col space-y-4 lg:space-y-0">
|
|
169
169
|
|
|
@@ -223,14 +223,14 @@
|
|
|
223
223
|
<path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/>
|
|
224
224
|
</svg>`;case e.includes("linkedin"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
|
|
225
225
|
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
|
|
226
|
-
</svg>`;default:return""}}customElements.define("footer-type-1",
|
|
226
|
+
</svg>`;default:return""}}customElements.define("footer-type-1",a),customElements.define("footer-type-2",o),customElements.define("footer-type-3",r)}class k extends HTMLElement{async connectedCallback(){const{img:a,title:o,description:r,price:s,buttonTitle:t,buttonLink:e}=this.dataset;this.render(a,o,r,s,t,e)}render(a,o,r,s,t,e){this.innerHTML=`
|
|
227
227
|
<!-- Product Card -->
|
|
228
228
|
<div class="card w-full bg-gray-200 dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl hover:-translate-y-2 transition duration-300">
|
|
229
|
-
<img class="w-full h-60 object-cover" src="${
|
|
229
|
+
<img class="w-full h-60 object-cover" src="${a||"./kiui.png"}" alt="${o||"default alt"}" />
|
|
230
230
|
|
|
231
231
|
<div class="h-42 p-5 flex flex-col justify-between space-y-3">
|
|
232
232
|
${o?`<h2 class="card-title text-lg sm:text-xl font-semibold text-gray-800 dark:text-white">${o}</h2>`:""}
|
|
233
|
-
${
|
|
233
|
+
${r?`<p class="card-description text-sm text-gray-600 dark:text-gray-400">${r}</p>`:""}
|
|
234
234
|
|
|
235
235
|
${s||e?`<div class="flex items-center justify-between mt-4">
|
|
236
236
|
${s?`<span class="card-price text-lg font-bold text-gray-600 dark:text-indigo-400">$${s}</span>`:"<div></div>"}
|
|
@@ -239,7 +239,7 @@
|
|
|
239
239
|
</div>
|
|
240
240
|
</div>
|
|
241
241
|
<!-- Product Card -->
|
|
242
|
-
`}}customElements.define("box-card-1",k);document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll(".ripple").forEach(n=>{n.addEventListener("click",function(
|
|
243
|
-
<button ${s?`id=${s}`:""} class="cursor-pointer m-1 relative overflow-hidden px-4 py-2 rounded-md ripple bg-slate-900 text-white" style="background-color: ${o} !important; color: ${
|
|
244
|
-
${
|
|
245
|
-
</button>`}}customElements.define("button-primary",L);const $=document,f=$.querySelector("#KIUI-typewriter");let x=null,b=null;function M(n=[],
|
|
242
|
+
`}}customElements.define("box-card-1",k);document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll(".ripple").forEach(n=>{n.addEventListener("click",function(a){const o=document.createElement("span"),r=Math.max(this.clientWidth,this.clientHeight),s=r/2;o.style.width=o.style.height=`${r}px`,o.style.left=`${a.clientX-this.getBoundingClientRect().left-s}px`,o.style.top=`${a.clientY-this.getBoundingClientRect().top-s}px`,o.classList.add("ripple-effect");const t=this.querySelector(".ripple-effect");t&&t.remove(),this.appendChild(o)})})});class L extends HTMLElement{async connectedCallback(){this.render()}render(){const{content:a,bg:o,color:r}=this.dataset;let{id:s=null}=this.dataset;this.innerHTML=`
|
|
243
|
+
<button ${s?`id=${s}`:""} class="cursor-pointer m-1 relative overflow-hidden px-4 py-2 rounded-md ripple bg-slate-900 text-white" style="background-color: ${o} !important; color: ${r} !important;">
|
|
244
|
+
${a||"Click"}
|
|
245
|
+
</button>`}}customElements.define("button-primary",L);const $=document,f=$.querySelector("#KIUI-typewriter");let x=null,b=null;function M(n=[],a=100,o=1e3){let r=0,s=0;function t(){const i=n[r];x=setInterval(()=>{f.textContent+=i[s],s++,s>=i.length&&(clearInterval(x),setTimeout(()=>e(),o))},a)}function e(){const i=n[r];b=setInterval(()=>{s--,f.textContent=i.slice(0,s),s<=0&&(clearInterval(b),r=(r+1)%n.length,setTimeout(()=>t(),o))},a)}t()}window.initKIUITypeWriter=M;const C=document.querySelector("#show-more"),g=document.querySelector("#show-more__button");g.addEventListener("click",()=>{g.textContent=g.textContent==="Show More"?"Show Less":"Show More",C.classList.toggle("active")});window.initHeader=y;window.initFooter=w;
|
package/dist/index.html
CHANGED