zen-wdg 2.0.0 → 2.0.1

package/index.js

@@ -1 +1 @@
-export * from './src/clock.js';
+import './src/register.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zen-wdg",
-  "version": "2.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",
@@ -18,7 +18,8 @@
   "files": [
     "dist/",
     "index.js",
-    "src/clock.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,102 +0,0 @@
-export class ClockWidget extends HTMLElement {
-  connectedCallback() {
-    const shadow = this.attachShadow({ mode: 'open' })
-
-    // Estilos
-    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;
-        }
-      }
-    `
-
-    // Estructura HTML
-    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>
-    `
-
-    shadow.appendChild(style)
-    shadow.appendChild(wrapper)
-
-    // Actualización del reloj
-    const updateClock = () => {
-      const now = 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, 1000)
-  }
-
-  disconnectedCallback() {
-    clearInterval(this._interval)
-  }
-}
-
-// Registro del componente
-customElements.define('clock-widget', ClockWidget)