zen-wdg 1.0.0 → 2.0.1

package/AUTHORS.md

@@ -0,0 +1,7 @@
+# Authors
+
+- **José Luis Romero Arce**  
+  Email: joseluisromeroarce12@gmail.com  
+  GitLab: [Im-Jota](https://github.com/Im-Jota)
+  LinkedIn: [@Im-Jota](https://www.linkedin.com/in/im-jota/)  
+  Telegram: [@Im-Jota](https://t.me/ImJota)

package/dist/zen-wdg.es.js

@@ -1,75 +1,100 @@
-function g(t) {
-  const o = document.createElement("style");
-  o.textContent = `
-    .clock-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      width: 100%;
-    }
-
-    .clock {
-      text-align: center;
-      font-family: 'Arial', sans-serif;
-      color: #333;
-      background-color: rgba(20, 20, 20, 0.4);
-      backdrop-filter: blur(0.2rem);
-      border-radius: 15px;
-      padding: 20px;
-      width: 100%;
-    }
-
-    .time {
-      font-size: 4em;
-      font-weight: bold;
-      color: #fff;
-      display: flex;
-      justify-content: center;
-    }
+class ClockWidget extends HTMLElement {
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = `
+      .clock-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+      }
 
-    .date {
-      font-size: 1.2em;
-      color: #fff;
-      margin-top: 10px;
-    }
+      .clock {
+        text-align: center;
+        font-family: 'Arial', sans-serif;
+        color: #333;
+        background-color: rgba(20, 20, 20, 0.4);
+        backdrop-filter: blur(0.2rem);
+        border-radius: 15px;
+        padding: 20px;
+        width: 100%;
+      }
 
-    @media (max-width: 500px) {
       .time {
-        font-size: 3em;
+        font-size: 4em;
+        font-weight: bold;
+        color: #fff;
+        display: flex;
+        justify-content: center;
       }
 
       .date {
-        font-size: 1em;
+        font-size: 1.2em;
+        color: #fff;
+        margin-top: 10px;
       }
-    }
-  `, document.head.appendChild(o), t.innerHTML = `
-    <div class="clock-container">
-      <div class="clock">
-        <div class="time" id="clock-time">--:--</div>
-        <div class="date" id="clock-date">--</div>
+
+      @media (max-width: 500px) {
+        .time {
+          font-size: 3em;
+        }
+
+        .date {
+          font-size: 1em;
+        }
+      }
+    `;
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = `
+      <div class="clock-container">
+        <div class="clock">
+          <div class="time" id="clock-time">--:--</div>
+          <div class="date" id="clock-date">--</div>
+        </div>
       </div>
-    </div>
-  `;
-  function n() {
-    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 = [
-      "Enero",
-      "Febrero",
-      "Marzo",
-      "Abril",
-      "Mayo",
-      "Junio",
-      "Julio",
-      "Agosto",
-      "Septiembre",
-      "Octubre",
-      "Noviembre",
-      "Diciembre"
-    ], l = a[e.getDay()], m = e.getDate(), f = d[e.getMonth()], u = e.getFullYear(), i = t.querySelector("#clock-time"), c = t.querySelector("#clock-date");
-    i && c && (i.textContent = `${r}:${s}`, c.textContent = `${l}, ${m} ${f} ${u}`);
+    `;
+    shadow.appendChild(style);
+    shadow.appendChild(wrapper);
+    const updateClock = () => {
+      const now = /* @__PURE__ */ new Date();
+      const hours = now.getHours().toString().padStart(2, "0");
+      const minutes = now.getMinutes().toString().padStart(2, "0");
+      const days = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
+      const months = [
+        "Enero",
+        "Febrero",
+        "Marzo",
+        "Abril",
+        "Mayo",
+        "Junio",
+        "Julio",
+        "Agosto",
+        "Septiembre",
+        "Octubre",
+        "Noviembre",
+        "Diciembre"
+      ];
+      const dayOfWeek = days[now.getDay()];
+      const day = now.getDate();
+      const month = months[now.getMonth()];
+      const year = now.getFullYear();
+      const timeEl = shadow.getElementById("clock-time");
+      const dateEl = shadow.getElementById("clock-date");
+      if (timeEl && dateEl) {
+        timeEl.textContent = `${hours}:${minutes}`;
+        dateEl.textContent = `${dayOfWeek}, ${day} ${month} ${year}`;
+      }
+    };
+    updateClock();
+    this._interval = setInterval(updateClock, 1e3);
+  }
+  disconnectedCallback() {
+    clearInterval(this._interval);
   }
-  n(), setInterval(n, 1e3);
 }
+customElements.define("clock-widget", ClockWidget);
 export {
-  g as renderClock
+  ClockWidget
 };

package/dist/zen-wdg.umd.js

@@ -1,51 +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=`
-    .clock-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      width: 100%;
-    }
-
-    .clock {
-      text-align: center;
-      font-family: 'Arial', sans-serif;
-      color: #333;
-      background-color: rgba(20, 20, 20, 0.4);
-      backdrop-filter: blur(0.2rem);
-      border-radius: 15px;
-      padding: 20px;
-      width: 100%;
-    }
-
-    .time {
-      font-size: 4em;
-      font-weight: bold;
-      color: #fff;
-      display: flex;
-      justify-content: center;
-    }
-
-    .date {
-      font-size: 1.2em;
-      color: #fff;
-      margin-top: 10px;
-    }
-
-    @media (max-width: 500px) {
-      .time {
-        font-size: 3em;
-      }
-
-      .date {
-        font-size: 1em;
-      }
-    }
-  `,document.head.appendChild(i),n.innerHTML=`
-    <div class="clock-container">
-      <div class="clock">
-        <div class="time" id="clock-time">--:--</div>
-        <div class="date" id="clock-date">--</div>
-      </div>
-    </div>
-  `;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"})});
+!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

@@ -0,0 +1 @@
+import './src/register.js';

package/package.json

@@ -1,16 +1,25 @@
 {
   "name": "zen-wdg",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "description": "Minimal widget library for Gridstack-based newtab extensions",
   "main": "dist/zen-wdg.umd.js",
   "module": "dist/zen-wdg.es.js",
   "type": "module",
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "dev": "vite"
   },
   "author": "Im-Jota",
   "license": "AGPL-3.0",
   "devDependencies": {
+    "terser": "^5.43.1",
     "vite": "^5.0.0"
-  }
-}
+  },
+  "files": [
+    "dist/",
+    "index.js",
+    "src/widgets/",
+    "src/register.js",
+    "AUTHORS.md"
+  ]
+}

package/src/register.js

@@ -0,0 +1,13 @@
+// src/register.js
+import { defineCustomElement } from 'vue'
+import ClockWidget from './widgets/z-clock-widget.vue'
+
+const widgets = [
+  { name: 'z-clock-widget', component: defineCustomElement(ClockWidget) },
+]
+
+widgets.forEach(({ name, component }) => {
+  if (!customElements.get(name)) {
+    customElements.define(name, component)
+  }
+})

package/src/widgets/z-clock-widget.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="clock-container">
+    <div class="clock">
+      <!-- Reloj digital -->
+      <div class="time">
+        <span>{{ hours }}</span>:<span>{{ minutes }}</span><!--:<span>{{ seconds }}</span>-->
+      </div>
+      <!-- Fecha -->
+      <div class="date">
+        <span>{{ dayOfWeek }}, {{ day }} {{ month }} {{ year }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DigitalClock',
+  data() {
+    return {
+      hours: '00',
+      minutes: '00',
+      seconds: '00',
+      dayOfWeek: '',
+      day: '',
+      month: '',
+      year: '',
+    };
+  },
+  mounted() {
+    this.updateClock();
+    setInterval(this.updateClock, 1000); // Actualizar la hora cada segundo
+  },
+  methods: {
+    updateClock() {
+      const now = new Date();
+
+      // Formatear la hora
+      this.hours = now.getHours().toString().padStart(2, '0');
+      this.minutes = now.getMinutes().toString().padStart(2, '0');
+      this.seconds = now.getSeconds().toString().padStart(2, '0');
+
+      // Formatear la fecha
+      this.dayOfWeek = this.getDayOfWeek(now.getDay());
+      this.day = now.getDate();
+      this.month = this.getMonthName(now.getMonth());
+      this.year = now.getFullYear();
+    },
+    getDayOfWeek(dayIndex) {
+      const days = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
+      return days[dayIndex];
+    },
+    getMonthName(monthIndex) {
+      const months = [
+        'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 
+        'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
+      ];
+      return months[monthIndex];
+    },
+  },
+};
+</script>
+
+<style scoped>
+.clock-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%; /* Centra el reloj verticalmente */
+  width: 100%;
+}
+
+.clock {
+  text-align: center;
+  font-family: 'Arial', sans-serif;
+  color: #333;
+  background-color: rgba(20, 20, 20, .4);
+  backdrop-filter: blur(.2rem);
+  border-radius: 15px;
+  padding: 20px;
+  width: 100%;
+}
+
+.time {
+  font-size: 4em;
+  font-weight: bold;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+}
+
+.date {
+  font-size: 1.2em;
+  color: #fff;
+  margin-top: 10px;
+}
+
+@media (max-width: 500px) {
+  .time {
+    font-size: 3em;
+  }
+  
+  .date {
+    font-size: 1em;
+  }
+}
+</style>
+

package/src/clock.js

@@ -1,90 +0,0 @@
-export function render(container) {
-  // Estilos embebidos (opcional: puedes moverlos a un CSS externo si prefieres)
-  const style = document.createElement('style');
-  style.textContent = `
-    .clock-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      width: 100%;
-    }
-
-    .clock {
-      text-align: center;
-      font-family: 'Arial', sans-serif;
-      color: #333;
-      background-color: rgba(20, 20, 20, 0.4);
-      backdrop-filter: blur(0.2rem);
-      border-radius: 15px;
-      padding: 20px;
-      width: 100%;
-    }
-
-    .time {
-      font-size: 4em;
-      font-weight: bold;
-      color: #fff;
-      display: flex;
-      justify-content: center;
-    }
-
-    .date {
-      font-size: 1.2em;
-      color: #fff;
-      margin-top: 10px;
-    }
-
-    @media (max-width: 500px) {
-      .time {
-        font-size: 3em;
-      }
-
-      .date {
-        font-size: 1em;
-      }
-    }
-  `;
-  document.head.appendChild(style);
-
-  // HTML del reloj
-  container.innerHTML = `
-    <div class="clock-container">
-      <div class="clock">
-        <div class="time" id="clock-time">--:--</div>
-        <div class="date" id="clock-date">--</div>
-      </div>
-    </div>
-  `;
-
-  // Función para actualizar la hora
-  function updateClock() {
-    const now = new Date();
-
-    const hours = now.getHours().toString().padStart(2, '0');
-    const minutes = now.getMinutes().toString().padStart(2, '0');
-    // const seconds = now.getSeconds().toString().padStart(2, '0');
-
-    const days = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
-    const months = [
-      'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
-      'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
-    ];
-
-    const dayOfWeek = days[now.getDay()];
-    const day = now.getDate();
-    const month = months[now.getMonth()];
-    const year = now.getFullYear();
-
-    const timeEl = container.querySelector('#clock-time');
-    const dateEl = container.querySelector('#clock-date');
-
-    if (timeEl && dateEl) {
-      timeEl.textContent = `${hours}:${minutes}`;
-      dateEl.textContent = `${dayOfWeek}, ${day} ${month} ${year}`;
-    }
-  }
-
-  updateClock();
-  setInterval(updateClock, 1000);
-}

package/src/index.js

@@ -1 +0,0 @@
-export { render as renderClock } from './clock.js';

package/vite.config.js

@@ -1,17 +0,0 @@
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: 'src/index.js',
-      name: 'ZenWdg',
-      fileName: (format) => `zen-wdg.${format}.js`
-    },
-    rollupOptions: {
-      external: [], // aquí tus dependencias externas (e.g. Gridstack)
-      output: {
-        globals: {}
-      }
-    }
-  }
-});