zen-wdg 2.0.0 → 2.0.2

package/dist/zen-wdg.css

@@ -0,0 +1 @@
+.clock-container[data-v-dc4ab000]{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.clock[data-v-dc4ab000]{text-align:center;font-family:Arial,sans-serif;color:#333;background-color:#14141466;backdrop-filter:blur(.2rem);border-radius:15px;padding:20px;width:100%}.time[data-v-dc4ab000]{font-size:4em;font-weight:700;color:#fff;display:flex;justify-content:center}.date[data-v-dc4ab000]{font-size:1.2em;color:#fff;margin-top:10px}@media (max-width: 500px){.time[data-v-dc4ab000]{font-size:3em}.date[data-v-dc4ab000]{font-size:1em}}

package/dist/zen-wdg.es.js

@@ -1,67 +1,44 @@
-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%;
-      }
-
-      .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;
-        }
-      }
-    `;
-    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);
-    const updateClock = () => {
+import { createElementBlock, openBlock, createElementVNode, createTextVNode, toDisplayString, defineCustomElement } from "vue";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main = {
+  name: "DigitalClock",
+  data() {
+    return {
+      hours: "00",
+      minutes: "00",
+      seconds: "00",
+      dayOfWeek: "",
+      day: "",
+      month: "",
+      year: ""
+    };
+  },
+  mounted() {
+    this.updateClock();
+    setInterval(this.updateClock, 1e3);
+  },
+  methods: {
+    updateClock() {
       const now = /* @__PURE__ */ new Date();
-      const hours = now.getHours().toString().padStart(2, "0");
-      const minutes = now.getMinutes().toString().padStart(2, "0");
+      this.hours = now.getHours().toString().padStart(2, "0");
+      this.minutes = now.getMinutes().toString().padStart(2, "0");
+      this.seconds = now.getSeconds().toString().padStart(2, "0");
+      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",
@@ -76,25 +53,34 @@ class ClockWidget extends HTMLElement {
         "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);
+      return months[monthIndex];
+    }
   }
-  disconnectedCallback() {
-    clearInterval(this._interval);
-  }
-}
-customElements.define("clock-widget", ClockWidget);
-export {
-  ClockWidget
 };
+const _hoisted_1 = { class: "clock-container" };
+const _hoisted_2 = { class: "clock" };
+const _hoisted_3 = { class: "time" };
+const _hoisted_4 = { class: "date" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      createElementVNode("div", _hoisted_3, [
+        createElementVNode("span", null, toDisplayString($data.hours), 1),
+        _cache[0] || (_cache[0] = createTextVNode(":", -1)),
+        createElementVNode("span", null, toDisplayString($data.minutes), 1)
+      ]),
+      createElementVNode("div", _hoisted_4, [
+        createElementVNode("span", null, toDisplayString($data.dayOfWeek) + ", " + toDisplayString($data.day) + " " + toDisplayString($data.month) + " " + toDisplayString($data.year), 1)
+      ])
+    ])
+  ]);
+}
+const ClockWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-dc4ab000"]]);
+const widgets = [
+  { name: "z-clock-widget", component: defineCustomElement(ClockWidget) }
+];
+widgets.forEach(({ name, component }) => {
+  if (!customElements.get(name)) {
+    customElements.define(name, component);
+  }
+});

package/dist/zen-wdg.umd.js

@@ -1 +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"})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Vue)}(this,function(e){"use strict";const t={class:"clock-container"},o={class:"clock"},n={class:"time"},s={class:"date"};const a=((e,t)=>{const o=e.__vccOpts||e;for(const[n,s]of t)o[n]=s;return o})({name:"DigitalClock",data:()=>({hours:"00",minutes:"00",seconds:"00",dayOfWeek:"",day:"",month:"",year:""}),mounted(){this.updateClock(),setInterval(this.updateClock,1e3)},methods:{updateClock(){const e=new Date;this.hours=e.getHours().toString().padStart(2,"0"),this.minutes=e.getMinutes().toString().padStart(2,"0"),this.seconds=e.getSeconds().toString().padStart(2,"0"),this.dayOfWeek=this.getDayOfWeek(e.getDay()),this.day=e.getDate(),this.month=this.getMonthName(e.getMonth()),this.year=e.getFullYear()},getDayOfWeek:e=>["Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"][e],getMonthName:e=>["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"][e]}},[["render",function(a,i,r,c,l,d){return e.openBlock(),e.createElementBlock("div",t,[e.createElementVNode("div",o,[e.createElementVNode("div",n,[e.createElementVNode("span",null,e.toDisplayString(l.hours),1),i[0]||(i[0]=e.createTextVNode(":",-1)),e.createElementVNode("span",null,e.toDisplayString(l.minutes),1)]),e.createElementVNode("div",s,[e.createElementVNode("span",null,e.toDisplayString(l.dayOfWeek)+", "+e.toDisplayString(l.day)+" "+e.toDisplayString(l.month)+" "+e.toDisplayString(l.year),1)])])])}],["__scopeId","data-v-dc4ab000"]]);[{name:"z-clock-widget",component:e.defineCustomElement(a)}].forEach(({name:e,component:t})=>{customElements.get(e)||customElements.define(e,t)})});

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.2",
   "description": "Minimal widget library for Gridstack-based newtab extensions",
   "main": "dist/zen-wdg.umd.js",
   "module": "dist/zen-wdg.es.js",
@@ -12,13 +12,15 @@
   "author": "Im-Jota",
   "license": "AGPL-3.0",
   "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
     "terser": "^5.43.1",
-    "vite": "^5.0.0"
+    "vite": "^7.0.5"
   },
   "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)