zen-wdg 1.0.0 → 2.0.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 (8) hide show
  1. package/AUTHORS.md +7 -0
  2. package/dist/zen-wdg.es.js +88 -63
  3. package/dist/zen-wdg.umd.js +1 -51
  4. package/index.js +1 -0
  5. package/package.json +12 -4
  6. package/src/clock.js +90 -78
  7. package/src/index.js +0 -1
  8. package/vite.config.js +0 -17
package/AUTHORS.md ADDED
@@ -0,0 +1,7 @@
1
+ # Authors
2
+
3
+ - **José Luis Romero Arce**
4
+ Email: joseluisromeroarce12@gmail.com
5
+ GitLab: [Im-Jota](https://github.com/Im-Jota)
6
+ LinkedIn: [@Im-Jota](https://www.linkedin.com/in/im-jota/)
7
+ Telegram: [@Im-Jota](https://t.me/ImJota)
package/dist/zen-wdg.es.js CHANGED
@@ -1,75 +1,100 @@
1
- function g(t) {
2
- const o = document.createElement("style");
3
- o.textContent = `
4
- .clock-container {
5
- display: flex;
6
- justify-content: center;
7
- align-items: center;
8
- height: 100%;
9
- width: 100%;
10
- }
11
-
12
- .clock {
13
- text-align: center;
14
- font-family: 'Arial', sans-serif;
15
- color: #333;
16
- background-color: rgba(20, 20, 20, 0.4);
17
- backdrop-filter: blur(0.2rem);
18
- border-radius: 15px;
19
- padding: 20px;
20
- width: 100%;
21
- }
22
-
23
- .time {
24
- font-size: 4em;
25
- font-weight: bold;
26
- color: #fff;
27
- display: flex;
28
- justify-content: center;
29
- }
1
+ class ClockWidget extends HTMLElement {
2
+ connectedCallback() {
3
+ const shadow = this.attachShadow({ mode: "open" });
4
+ const style = document.createElement("style");
5
+ style.textContent = `
6
+ .clock-container {
7
+ display: flex;
8
+ justify-content: center;
9
+ align-items: center;
10
+ height: 100%;
11
+ width: 100%;
12
+ }
30
13
 
31
- .date {
32
- font-size: 1.2em;
33
- color: #fff;
34
- margin-top: 10px;
35
- }
14
+ .clock {
15
+ text-align: center;
16
+ font-family: 'Arial', sans-serif;
17
+ color: #333;
18
+ background-color: rgba(20, 20, 20, 0.4);
19
+ backdrop-filter: blur(0.2rem);
20
+ border-radius: 15px;
21
+ padding: 20px;
22
+ width: 100%;
23
+ }
36
24
 
37
- @media (max-width: 500px) {
38
25
  .time {
39
- font-size: 3em;
26
+ font-size: 4em;
27
+ font-weight: bold;
28
+ color: #fff;
29
+ display: flex;
30
+ justify-content: center;
40
31
  }
41
32
 
42
33
  .date {
43
- font-size: 1em;
34
+ font-size: 1.2em;
35
+ color: #fff;
36
+ margin-top: 10px;
44
37
  }
45
- }
46
- `, document.head.appendChild(o), t.innerHTML = `
47
- <div class="clock-container">
48
- <div class="clock">
49
- <div class="time" id="clock-time">--:--</div>
50
- <div class="date" id="clock-date">--</div>
38
+
39
+ @media (max-width: 500px) {
40
+ .time {
41
+ font-size: 3em;
42
+ }
43
+
44
+ .date {
45
+ font-size: 1em;
46
+ }
47
+ }
48
+ `;
49
+ const wrapper = document.createElement("div");
50
+ wrapper.innerHTML = `
51
+ <div class="clock-container">
52
+ <div class="clock">
53
+ <div class="time" id="clock-time">--:--</div>
54
+ <div class="date" id="clock-date">--</div>
55
+ </div>
51
56
  </div>
52
- </div>
53
- `;
54
- function n() {
55
- const e = /* @__PURE__ */ new Date(), r = e.getHours().toString().padStart(2, "0"), s = e.getMinutes().toString().padStart(2, "0"), a = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"], d = [
56
- "Enero",
57
- "Febrero",
58
- "Marzo",
59
- "Abril",
60
- "Mayo",
61
- "Junio",
62
- "Julio",
63
- "Agosto",
64
- "Septiembre",
65
- "Octubre",
66
- "Noviembre",
67
- "Diciembre"
68
- ], l = a[e.getDay()], m = e.getDate(), f = d[e.getMonth()], u = e.getFullYear(), i = t.querySelector("#clock-time"), c = t.querySelector("#clock-date");
69
- i && c && (i.textContent = `${r}:${s}`, c.textContent = `${l}, ${m} ${f} ${u}`);
57
+ `;
58
+ shadow.appendChild(style);
59
+ shadow.appendChild(wrapper);
60
+ const updateClock = () => {
61
+ const now = /* @__PURE__ */ new Date();
62
+ const hours = now.getHours().toString().padStart(2, "0");
63
+ const minutes = now.getMinutes().toString().padStart(2, "0");
64
+ const days = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
65
+ const months = [
66
+ "Enero",
67
+ "Febrero",
68
+ "Marzo",
69
+ "Abril",
70
+ "Mayo",
71
+ "Junio",
72
+ "Julio",
73
+ "Agosto",
74
+ "Septiembre",
75
+ "Octubre",
76
+ "Noviembre",
77
+ "Diciembre"
78
+ ];
79
+ const dayOfWeek = days[now.getDay()];
80
+ const day = now.getDate();
81
+ const month = months[now.getMonth()];
82
+ const year = now.getFullYear();
83
+ const timeEl = shadow.getElementById("clock-time");
84
+ const dateEl = shadow.getElementById("clock-date");
85
+ if (timeEl && dateEl) {
86
+ timeEl.textContent = `${hours}:${minutes}`;
87
+ dateEl.textContent = `${dayOfWeek}, ${day} ${month} ${year}`;
88
+ }
89
+ };
90
+ updateClock();
91
+ this._interval = setInterval(updateClock, 1e3);
92
+ }
93
+ disconnectedCallback() {
94
+ clearInterval(this._interval);
70
95
  }
71
- n(), setInterval(n, 1e3);
72
96
  }
97
+ customElements.define("clock-widget", ClockWidget);
73
98
  export {
74
- g as renderClock
99
+ ClockWidget
75
100
  };
package/dist/zen-wdg.umd.js CHANGED
@@ -1,51 +1 @@
1
- (function(e,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(e=typeof globalThis<"u"?globalThis:e||self,o(e.ZenWdg={}))})(this,function(e){"use strict";function o(n){const i=document.createElement("style");i.textContent=`
2
- .clock-container {
3
- display: flex;
4
- justify-content: center;
5
- align-items: center;
6
- height: 100%;
7
- width: 100%;
8
- }
9
-
10
- .clock {
11
- text-align: center;
12
- font-family: 'Arial', sans-serif;
13
- color: #333;
14
- background-color: rgba(20, 20, 20, 0.4);
15
- backdrop-filter: blur(0.2rem);
16
- border-radius: 15px;
17
- padding: 20px;
18
- width: 100%;
19
- }
20
-
21
- .time {
22
- font-size: 4em;
23
- font-weight: bold;
24
- color: #fff;
25
- display: flex;
26
- justify-content: center;
27
- }
28
-
29
- .date {
30
- font-size: 1.2em;
31
- color: #fff;
32
- margin-top: 10px;
33
- }
34
-
35
- @media (max-width: 500px) {
36
- .time {
37
- font-size: 3em;
38
- }
39
-
40
- .date {
41
- font-size: 1em;
42
- }
43
- }
44
- `,document.head.appendChild(i),n.innerHTML=`
45
- <div class="clock-container">
46
- <div class="clock">
47
- <div class="time" id="clock-time">--:--</div>
48
- <div class="date" id="clock-date">--</div>
49
- </div>
50
- </div>
51
- `;function c(){const t=new Date,r=t.getHours().toString().padStart(2,"0"),l=t.getMinutes().toString().padStart(2,"0"),a=["Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"],f=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],u=a[t.getDay()],m=t.getDate(),p=f[t.getMonth()],g=t.getFullYear(),s=n.querySelector("#clock-time"),d=n.querySelector("#clock-date");s&&d&&(s.textContent=`${r}:${l}`,d.textContent=`${u}, ${m} ${p} ${g}`)}c(),setInterval(c,1e3)}e.renderClock=o,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
1
+ !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).ZenWdg={})}(this,function(e){"use strict";class n extends HTMLElement{connectedCallback(){const e=this.attachShadow({mode:"open"}),n=document.createElement("style");n.textContent="\n .clock-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n }\n\n .clock {\n text-align: center;\n font-family: 'Arial', sans-serif;\n color: #333;\n background-color: rgba(20, 20, 20, 0.4);\n backdrop-filter: blur(0.2rem);\n border-radius: 15px;\n padding: 20px;\n width: 100%;\n }\n\n .time {\n font-size: 4em;\n font-weight: bold;\n color: #fff;\n display: flex;\n justify-content: center;\n }\n\n .date {\n font-size: 1.2em;\n color: #fff;\n margin-top: 10px;\n }\n\n @media (max-width: 500px) {\n .time {\n font-size: 3em;\n }\n\n .date {\n font-size: 1em;\n }\n }\n ";const t=document.createElement("div");t.innerHTML='\n <div class="clock-container">\n <div class="clock">\n <div class="time" id="clock-time">--:--</div>\n <div class="date" id="clock-date">--</div>\n </div>\n </div>\n ',e.appendChild(n),e.appendChild(t);const o=()=>{const n=new Date,t=n.getHours().toString().padStart(2,"0"),o=n.getMinutes().toString().padStart(2,"0"),i=["Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"][n.getDay()],c=n.getDate(),l=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"][n.getMonth()],d=n.getFullYear(),a=e.getElementById("clock-time"),r=e.getElementById("clock-date");a&&r&&(a.textContent=`${t}:${o}`,r.textContent=`${i}, ${c} ${l} ${d}`)};o(),this._interval=setInterval(o,1e3)}disconnectedCallback(){clearInterval(this._interval)}}customElements.define("clock-widget",n),e.ClockWidget=n,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
package/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from './src/clock.js';
package/package.json CHANGED
@@ -1,16 +1,24 @@
1
1
  {
2
2
  "name": "zen-wdg",
3
- "version": "1.0.0",
3
+ "version": "2.0.0",
4
4
  "description": "Minimal widget library for Gridstack-based newtab extensions",
5
5
  "main": "dist/zen-wdg.umd.js",
6
6
  "module": "dist/zen-wdg.es.js",
7
7
  "type": "module",
8
8
  "scripts": {
9
- "build": "vite build"
9
+ "build": "vite build",
10
+ "dev": "vite"
10
11
  },
11
12
  "author": "Im-Jota",
12
13
  "license": "AGPL-3.0",
13
14
  "devDependencies": {
15
+ "terser": "^5.43.1",
14
16
  "vite": "^5.0.0"
15
- }
16
- }
17
+ },
18
+ "files": [
19
+ "dist/",
20
+ "index.js",
21
+ "src/clock.js",
22
+ "AUTHORS.md"
23
+ ]
24
+ }
package/src/clock.js CHANGED
@@ -1,90 +1,102 @@
1
- export function render(container) {
2
- // Estilos embebidos (opcional: puedes moverlos a un CSS externo si prefieres)
3
- const style = document.createElement('style');
4
- style.textContent = `
5
- .clock-container {
6
- display: flex;
7
- justify-content: center;
8
- align-items: center;
9
- height: 100%;
10
- width: 100%;
11
- }
12
-
13
- .clock {
14
- text-align: center;
15
- font-family: 'Arial', sans-serif;
16
- color: #333;
17
- background-color: rgba(20, 20, 20, 0.4);
18
- backdrop-filter: blur(0.2rem);
19
- border-radius: 15px;
20
- padding: 20px;
21
- width: 100%;
22
- }
1
+ export class ClockWidget extends HTMLElement {
2
+ connectedCallback() {
3
+ const shadow = this.attachShadow({ mode: 'open' })
23
4
 
24
- .time {
25
- font-size: 4em;
26
- font-weight: bold;
27
- color: #fff;
28
- display: flex;
29
- justify-content: center;
30
- }
5
+ // Estilos
6
+ const style = document.createElement('style')
7
+ style.textContent = `
8
+ .clock-container {
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+ height: 100%;
13
+ width: 100%;
14
+ }
31
15
 
32
- .date {
33
- font-size: 1.2em;
34
- color: #fff;
35
- margin-top: 10px;
36
- }
16
+ .clock {
17
+ text-align: center;
18
+ font-family: 'Arial', sans-serif;
19
+ color: #333;
20
+ background-color: rgba(20, 20, 20, 0.4);
21
+ backdrop-filter: blur(0.2rem);
22
+ border-radius: 15px;
23
+ padding: 20px;
24
+ width: 100%;
25
+ }
37
26
 
38
- @media (max-width: 500px) {
39
27
  .time {
40
- font-size: 3em;
28
+ font-size: 4em;
29
+ font-weight: bold;
30
+ color: #fff;
31
+ display: flex;
32
+ justify-content: center;
41
33
  }
42
34
 
43
35
  .date {
44
- font-size: 1em;
36
+ font-size: 1.2em;
37
+ color: #fff;
38
+ margin-top: 10px;
45
39
  }
46
- }
47
- `;
48
- document.head.appendChild(style);
49
-
50
- // HTML del reloj
51
- container.innerHTML = `
52
- <div class="clock-container">
53
- <div class="clock">
54
- <div class="time" id="clock-time">--:--</div>
55
- <div class="date" id="clock-date">--</div>
40
+
41
+ @media (max-width: 500px) {
42
+ .time {
43
+ font-size: 3em;
44
+ }
45
+
46
+ .date {
47
+ font-size: 1em;
48
+ }
49
+ }
50
+ `
51
+
52
+ // Estructura HTML
53
+ const wrapper = document.createElement('div')
54
+ wrapper.innerHTML = `
55
+ <div class="clock-container">
56
+ <div class="clock">
57
+ <div class="time" id="clock-time">--:--</div>
58
+ <div class="date" id="clock-date">--</div>
59
+ </div>
56
60
  </div>
57
- </div>
58
- `;
59
-
60
- // Función para actualizar la hora
61
- function updateClock() {
62
- const now = new Date();
63
-
64
- const hours = now.getHours().toString().padStart(2, '0');
65
- const minutes = now.getMinutes().toString().padStart(2, '0');
66
- // const seconds = now.getSeconds().toString().padStart(2, '0');
67
-
68
- const days = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
69
- const months = [
70
- 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
71
- 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
72
- ];
73
-
74
- const dayOfWeek = days[now.getDay()];
75
- const day = now.getDate();
76
- const month = months[now.getMonth()];
77
- const year = now.getFullYear();
78
-
79
- const timeEl = container.querySelector('#clock-time');
80
- const dateEl = container.querySelector('#clock-date');
81
-
82
- if (timeEl && dateEl) {
83
- timeEl.textContent = `${hours}:${minutes}`;
84
- dateEl.textContent = `${dayOfWeek}, ${day} ${month} ${year}`;
61
+ `
62
+
63
+ shadow.appendChild(style)
64
+ shadow.appendChild(wrapper)
65
+
66
+ // Actualización del reloj
67
+ const updateClock = () => {
68
+ const now = new Date()
69
+ const hours = now.getHours().toString().padStart(2, '0')
70
+ const minutes = now.getMinutes().toString().padStart(2, '0')
71
+
72
+ const days = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']
73
+ const months = [
74
+ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
75
+ 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
76
+ ]
77
+
78
+ const dayOfWeek = days[now.getDay()]
79
+ const day = now.getDate()
80
+ const month = months[now.getMonth()]
81
+ const year = now.getFullYear()
82
+
83
+ const timeEl = shadow.getElementById('clock-time')
84
+ const dateEl = shadow.getElementById('clock-date')
85
+
86
+ if (timeEl && dateEl) {
87
+ timeEl.textContent = `${hours}:${minutes}`
88
+ dateEl.textContent = `${dayOfWeek}, ${day} ${month} ${year}`
89
+ }
85
90
  }
91
+
92
+ updateClock()
93
+ this._interval = setInterval(updateClock, 1000)
94
+ }
95
+
96
+ disconnectedCallback() {
97
+ clearInterval(this._interval)
86
98
  }
99
+ }
87
100
 
88
- updateClock();
89
- setInterval(updateClock, 1000);
90
- }
101
+ // Registro del componente
102
+ customElements.define('clock-widget', ClockWidget)
package/src/index.js DELETED
@@ -1 +0,0 @@
1
- export { render as renderClock } from './clock.js';
package/vite.config.js DELETED
@@ -1,17 +0,0 @@
1
- import { defineConfig } from 'vite';
2
-
3
- export default defineConfig({
4
- build: {
5
- lib: {
6
- entry: 'src/index.js',
7
- name: 'ZenWdg',
8
- fileName: (format) => `zen-wdg.${format}.js`
9
- },
10
- rollupOptions: {
11
- external: [], // aquí tus dependencias externas (e.g. Gridstack)
12
- output: {
13
- globals: {}
14
- }
15
- }
16
- }
17
- });