zero-query 0.9.6 → 0.9.8

package/cli/scaffold/default/app/components/contacts/contacts.html

@@ -0,0 +1,200 @@
+<!--
+  contacts.html — external template for contacts-page component
+
+  This template is fetched via templateUrl and uses {{expression}} syntax
+  for data binding. All zQuery directives work here: z-if, z-else,
+  z-for, z-show, z-bind, z-class, z-text, z-model, z-ref,
+  z-cloak, @click, @submit.prevent, @click.outside, @keydown.escape, etc.
+-->
+<div class="page-header" z-cloak>
+  <h1>Contacts</h1>
+  <p class="subtitle">
+    External template &amp; styles via <code>templateUrl</code> / <code>styleUrl</code>.
+    Click a contact card to open the detail modal — dismiss with <code>Esc</code> or <code>@click.outside</code>.
+  </p>
+</div>
+
+<!-- Toolbar -->
+<div class="ct-bar">
+  <div class="ct-bar-left">
+    <div class="ct-badges" z-if="contacts.length > 0">
+      <span class="ct-badge"><strong z-text="contacts.length"></strong> total</span>
+      <span class="ct-badge ct-badge-accent"><strong z-text="favoriteCount"></strong> ★</span>
+    </div>
+  </div>
+  <div class="ct-bar-right">
+    <input type="text" z-model="filterText" z-debounce="200" placeholder="Search…" class="ct-search" @keydown.escape="filterText = ''" />
+    <button class="ct-btn ct-btn-accent ct-btn-add" @click="openAddModal">+ Add Contact</button>
+  </div>
+</div>
+
+<!-- Role filter chips -->
+<div class="ct-chips" z-show="contacts.length > 0">
+  <button class="ct-chip {{filterRole === '' ? 'active' : ''}}" @click="setFilter('')">All</button>
+  <button class="ct-chip {{filterRole === 'Developer' ? 'active' : ''}}" @click="setFilter('Developer')">Developer</button>
+  <button class="ct-chip {{filterRole === 'Designer' ? 'active' : ''}}" @click="setFilter('Designer')">Designer</button>
+  <button class="ct-chip {{filterRole === 'Manager' ? 'active' : ''}}" @click="setFilter('Manager')">Manager</button>
+  <button class="ct-chip {{filterRole === 'QA' ? 'active' : ''}}" @click="setFilter('QA')">QA</button>
+</div>
+
+<!-- Contact grid -->
+<div class="ct-grid" z-show="filteredContacts.length > 0">
+  <div
+    z-for="contact in filteredContacts"
+    z-key="{{contact.id}}"
+    class="ct-card {{contact.favorite ? 'ct-card-fav' : ''}}"
+    @click="openModal({{contact.id}})"
+  >
+    <!-- Status bar -->
+    <div class="ct-card-status ct-card-status-{{contact.status}}"></div>
+
+    <!-- Avatar -->
+    <div class="ct-card-avatar" :style="'background: hsl(' + (contact.name.charCodeAt(0) * 7 % 360) + ', 55%, 42%)'">
+      {{contact.name.charAt(0).toUpperCase()}}
+    </div>
+
+    <!-- Info -->
+    <div class="ct-card-info">
+      <div class="ct-card-name">{{contact.name}}</div>
+      <div class="ct-card-email">{{contact.email}}</div>
+      <span class="ct-card-role ct-role-{{contact.role.toLowerCase()}}">{{contact.role}}</span>
+    </div>
+
+    <!-- Fav -->
+    <button
+      class="ct-card-fav-btn {{contact.favorite ? 'is-fav' : ''}}"
+      @click.stop="toggleFavorite({{contact.id}})"
+    >{{contact.favorite ? '★' : '☆'}}</button>
+  </div>
+</div>
+
+<!-- Empty -->
+<div class="ct-empty-card" z-show="filteredContacts.length === 0">
+  <div class="ct-empty-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" style="width:48px;height:48px;opacity:.3;"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/></svg>
+  </div>
+  <p z-if="filterText || filterRole">No contacts match your filter.</p>
+  <p z-else>No contacts yet — hit <strong>+ Add Contact</strong> to create one!</p>
+</div>
+
+<!-- ═══ Add Contact Modal ═══ -->
+<div class="ct-overlay" z-show="showAddModal" @click.self="closeAddModal">
+  <div class="ct-modal ct-modal-form" z-show="showAddModal">
+    <div class="ct-modal-strip ct-modal-strip-accent"></div>
+    <button class="ct-modal-close" @click="closeAddModal">✕</button>
+
+    <div class="ct-modal-heading">
+      <h2>New Contact</h2>
+      <p class="muted">Fill in the required fields to add a contact.</p>
+    </div>
+
+    <form class="ct-form" @submit.prevent="addContact">
+      <div class="ct-form-row">
+        <div class="ct-form-field ct-form-grow">
+          <label>Name <span class="ct-req">*</span></label>
+          <input type="text" z-model="newName" z-trim placeholder="Full name" class="ct-input" @blur="validateName" />
+          <small class="ct-err" z-show="nameError" z-text="nameError"></small>
+        </div>
+        <div class="ct-form-field ct-form-grow">
+          <label>Email <span class="ct-req">*</span></label>
+          <input type="email" z-model="newEmail" z-trim z-lowercase placeholder="Email address" class="ct-input" @blur="validateEmail" />
+          <small class="ct-err" z-show="emailError" z-text="emailError"></small>
+        </div>
+      </div>
+      <div class="ct-form-row">
+        <div class="ct-form-field">
+          <label>Role</label>
+          <select z-model="newRole" class="ct-input">
+            <option value="Developer">Developer</option>
+            <option value="Designer">Designer</option>
+            <option value="Manager">Manager</option>
+            <option value="QA">QA</option>
+          </select>
+        </div>
+        <div class="ct-form-field ct-form-grow">
+          <label>Phone <span class="ct-opt">optional</span></label>
+          <input type="text" z-model="newPhone" z-trim placeholder="+1 (555) 000-0000" class="ct-input" />
+        </div>
+      </div>
+      <div class="ct-form-field">
+        <label>Bio <span class="ct-opt">optional</span></label>
+        <input type="text" z-model="newBio" z-trim placeholder="A short bio…" class="ct-input" />
+      </div>
+      <div class="ct-form-actions">
+        <button type="button" class="ct-btn ct-btn-ghost" @click="closeAddModal">Cancel</button>
+        <button type="submit" class="ct-btn ct-btn-accent">Save Contact</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<!-- ═══ Contact Detail Modal ═══ -->
+<div class="ct-overlay" z-show="modalId !== null" @click.self="closeModal">
+  <div class="ct-modal" z-show="modalContact">
+    <!-- Status strip -->
+    <div class="ct-modal-strip ct-modal-strip-{{modalContact.status}}"></div>
+
+    <button class="ct-modal-close" @click="closeModal">✕</button>
+
+    <!-- Profile header -->
+    <div class="ct-modal-profile">
+      <div class="ct-modal-avatar" :style="'background: hsl(' + (modalContact.name.charCodeAt(0) * 7 % 360) + ', 55%, 42%)'">
+        {{modalContact.name.charAt(0).toUpperCase()}}
+      </div>
+      <div class="ct-modal-status-dot ct-dot-{{modalContact.status}}"></div>
+      <h2>{{modalContact.name}}</h2>
+      <span class="ct-modal-role ct-role-{{modalContact.role.toLowerCase()}}">{{modalContact.role}}</span>
+    </div>
+
+    <!-- Details grid -->
+    <div class="ct-modal-details">
+      <div class="ct-modal-field">
+        <span class="ct-modal-label">Email</span>
+        <span class="ct-modal-value">{{modalContact.email}}</span>
+      </div>
+      <div class="ct-modal-field" z-if="modalContact.phone">
+        <span class="ct-modal-label">Phone</span>
+        <span class="ct-modal-value">{{modalContact.phone}}</span>
+      </div>
+      <div class="ct-modal-field" z-if="modalContact.location">
+        <span class="ct-modal-label">Location</span>
+        <span class="ct-modal-value">{{modalContact.location}}</span>
+      </div>
+      <div class="ct-modal-field" z-if="modalContact.joined">
+        <span class="ct-modal-label">Joined</span>
+        <span class="ct-modal-value">{{modalContact.joined}}</span>
+      </div>
+      <div class="ct-modal-field" z-if="modalContact.status">
+        <span class="ct-modal-label">Status</span>
+        <span class="ct-modal-value ct-modal-status-text">{{modalContact.status}}</span>
+      </div>
+    </div>
+
+    <div class="ct-modal-bio" z-if="modalContact.bio">
+      <span class="ct-modal-label">Bio</span>
+      <p>{{modalContact.bio}}</p>
+    </div>
+
+    <!-- Actions -->
+    <div class="ct-modal-actions">
+      <button class="ct-btn ct-btn-ghost ct-btn-sm" @click="toggleFavorite({{modalContact.id}})">
+        {{modalContact.favorite ? '★ Favorited' : '☆ Favorite'}}
+      </button>
+      <button class="ct-btn ct-btn-ghost ct-btn-sm" @click="cycleStatus({{modalContact.id}})">
+        Cycle Status
+      </button>
+
+      <button
+        class="ct-btn ct-btn-danger ct-btn-sm"
+        z-if="confirmDeleteId !== modalContact.id"
+        @click.stop="confirmDelete({{modalContact.id}})"
+      >Delete</button>
+
+      <span z-else class="ct-confirm-group">
+        <span class="ct-confirm-text">Sure?</span>
+        <button class="ct-btn ct-btn-danger ct-btn-sm" @click.stop="deleteContact({{modalContact.id}})">Yes</button>
+        <button class="ct-btn ct-btn-ghost ct-btn-sm" @click.stop="cancelDelete">No</button>
+      </span>
+    </div>
+  </div>
+</div>

package/cli/scaffold/default/app/components/contacts/contacts.js

@@ -0,0 +1,196 @@
+// contacts.js — Contact book page
+//
+// Features used:
+//   templateUrl / styleUrl  — external template & scoped styles
+//   z-if / z-show / z-for   — conditional & list rendering
+//   z-model / z-ref          — form bindings
+//   @click / @submit.prevent — event handling
+//   @keydown.escape          — keyboard modifier
+//   $.getStore / dispatch    — store integration
+//   $.bus.emit('toast')      — notifications
+
+$.component('contacts-page', {
+  templateUrl: 'contacts.html',
+  styleUrl:    'contacts.css',
+
+  state: () => ({
+    contacts: [],
+    showAddModal: false,
+    newName: '',
+    newEmail: '',
+    newRole: 'Developer',
+    newPhone: '',
+    newBio: '',
+    nameError: '',
+    emailError: '',
+    modalId: null,
+    confirmDeleteId: null,
+    totalAdded: 0,
+    favoriteCount: 0,
+    filterText: '',
+    filterRole: '',
+    // Derived state (not computed — external templates resolve state only)
+    filteredContacts: [],
+    modalContact: null,
+  }),
+
+  watch: {
+    filterText() { this._recompute(); },
+    filterRole() { this._recompute(); },
+    modalId()    { this._recompute(); },
+  },
+
+  mounted() {
+    const store = $.getStore('main');
+    this._syncFromStore(store);
+    this._unsub = store.subscribe(() => this._syncFromStore(store));
+
+    // Global Escape handler — template @keydown.escape on overlays is
+    // unreliable when no child element has focus (detail modal has no inputs).
+    this._onEscape = (e) => {
+      if (e.key !== 'Escape') return;
+      if (this.state.showAddModal)       { this.closeAddModal(); e.stopPropagation(); }
+      else if (this.state.modalId != null) { this.closeModal();    e.stopPropagation(); }
+    };
+    document.addEventListener('keydown', this._onEscape);
+  },
+
+  destroyed() {
+    if (this._unsub) this._unsub();
+    if (this._onEscape) document.removeEventListener('keydown', this._onEscape);
+  },
+
+  _syncFromStore(store) {
+    // Shallow-clone each contact so the framework detects new references
+    // (store actions mutate objects in place — same refs won't trigger re-render)
+    this.state.contacts      = store.state.contacts.map(c => ({ ...c }));
+    this.state.totalAdded    = store.state.contactsAdded;
+    this.state.favoriteCount = store.getters.favoriteCount;
+    this._recompute();
+  },
+
+  /** Recalculate derived state from current contacts + filter values. */
+  _recompute() {
+    let list = this.state.contacts;
+    const q = this.state.filterText.toLowerCase();
+    if (q) list = list.filter(c => c.name.toLowerCase().includes(q) || c.email.toLowerCase().includes(q));
+    if (this.state.filterRole) list = list.filter(c => c.role === this.state.filterRole);
+    this.state.filteredContacts = list;
+
+    this.state.modalContact = this.state.modalId != null
+      ? this.state.contacts.find(c => c.id === this.state.modalId) || null
+      : null;
+  },
+
+  // -- Add-contact modal --
+
+  openAddModal() {
+    this.state.showAddModal = true;
+  },
+
+  closeAddModal() {
+    this.state.showAddModal = false;
+    this._clearForm();
+  },
+
+  _validateName(name) {
+    if (!name) return 'Name is required.';
+    if (name.length < 2) return 'At least 2 characters.';
+    return '';
+  },
+
+  _validateEmail(email) {
+    if (!email) return 'Email is required.';
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return 'Enter a valid email.';
+    const store = $.getStore('main');
+    if (store.state.contacts.some(c => c.email.toLowerCase() === email.toLowerCase())) {
+      return 'Email already exists.';
+    }
+    return '';
+  },
+
+  validateName() {
+    this.state.nameError = this._validateName(this.state.newName.trim());
+  },
+
+  validateEmail() {
+    this.state.emailError = this._validateEmail(this.state.newEmail.trim());
+  },
+
+  addContact() {
+    const name  = this.state.newName.trim();
+    const email = this.state.newEmail.trim();
+
+    const nameError  = this._validateName(name);
+    const emailError = this._validateEmail(email);
+    this.state.nameError  = nameError;
+    this.state.emailError = emailError;
+    if (nameError || emailError) return;
+
+    $.getStore('main').dispatch('addContact', {
+      name,
+      email,
+      role:  this.state.newRole,
+      phone: this.state.newPhone.trim(),
+      bio:   this.state.newBio.trim(),
+    });
+
+    this._clearForm();
+    this.state.showAddModal = false;
+    $.bus.emit('toast', { message: `${name} added!`, type: 'success' });
+  },
+
+  // -- Detail modal --
+
+  openModal(id) {
+    this.state.modalId = Number(id);
+    this.state.confirmDeleteId = null;
+  },
+
+  closeModal() {
+    this.state.modalId = null;
+    this.state.confirmDeleteId = null;
+  },
+
+  // -- Actions --
+
+  toggleFavorite(id) {
+    $.getStore('main').dispatch('toggleFavorite', Number(id));
+  },
+
+  confirmDelete(id) {
+    this.state.confirmDeleteId = Number(id);
+  },
+
+  cancelDelete() {
+    this.state.confirmDeleteId = null;
+  },
+
+  deleteContact(id) {
+    const numId = Number(id);
+    const store = $.getStore('main');
+    const c = store.state.contacts.find(c => c.id === numId);
+    store.dispatch('deleteContact', numId);
+    this.state.modalId = null;
+    this.state.confirmDeleteId = null;
+    $.bus.emit('toast', { message: `${c ? c.name : 'Contact'} removed`, type: 'error' });
+  },
+
+  cycleStatus(id) {
+    $.getStore('main').dispatch('cycleContactStatus', Number(id));
+  },
+
+  setFilter(role) {
+    this.state.filterRole = this.state.filterRole === role ? '' : role;
+  },
+
+  _clearForm() {
+    this.state.newName    = '';
+    this.state.newEmail   = '';
+    this.state.newRole    = 'Developer';
+    this.state.newPhone   = '';
+    this.state.newBio     = '';
+    this.state.nameError  = '';
+    this.state.emailError = '';
+  },
+});

package/cli/scaffold/default/app/components/counter.js

@@ -0,0 +1,127 @@
+// counter.js — Interactive counter
+//
+// Features used:
+//   state / computed / watch  — reactive data flow
+//   @click                    — event binding
+//   z-model + z-number        — two-way binding with type coercion
+//   z-class / z-if / z-for    — conditional & list rendering
+//   $.bus.emit('toast', …)    — notifications via event bus
+
+$.component('counter-page', {
+  styles: `
+    .ctr-display   { padding: 2rem 0 1.25rem; text-align: center; }
+    .ctr-num       { font-size: 4rem; font-weight: 800; font-variant-numeric: tabular-nums;
+                     color: var(--accent); transition: color .2s;
+                     letter-spacing: -0.02em; line-height: 1; }
+    .ctr-num.negative { color: var(--danger); }
+    .ctr-label     { font-size: .82rem; color: var(--text-muted); margin-top: .35rem; }
+    .ctr-actions   { display: flex; justify-content: center; gap: .65rem;
+                     margin-bottom: 1.5rem; }
+    .ctr-actions .btn { min-width: 120px; justify-content: center; }
+    .ctr-config    { display: flex; align-items: center; justify-content: center; gap: 1.25rem;
+                     padding-top: 1.15rem; border-top: 1px solid var(--border); }
+    .ctr-config label { display: flex; align-items: center; gap: .5rem;
+                        color: var(--text-muted); font-size: .88rem; }
+    .ctr-config .input-sm { width: 65px; text-align: center; }
+
+    .ctr-hist      { display: flex; flex-wrap: wrap; gap: .4rem; }
+    .ctr-hist-item { display: inline-flex; align-items: center; gap: .3rem;
+                     padding: .3rem .65rem; border-radius: var(--radius);
+                     background: var(--bg-hover); border: 1px solid var(--border);
+                     font-size: .82rem; font-variant-numeric: tabular-nums;
+                     transition: border-color .15s; }
+    .ctr-hist-item:last-child { border-color: var(--accent); background: rgba(88,166,255,.06); }
+    .ctr-hist-op   { color: var(--text-muted); font-weight: 500; }
+    .ctr-hist-val  { color: var(--accent); font-weight: 600; }
+
+    @media (max-width: 768px) {
+      .ctr-num       { font-size: 2.75rem; }
+      .ctr-actions   { gap: .5rem; }
+      .ctr-actions .btn { min-width: 100px; }
+      .ctr-config    { flex-wrap: wrap; gap: .75rem; justify-content: center; }
+    }
+    @media (max-width: 480px) {
+      .ctr-num       { font-size: 2.25rem; }
+      .ctr-actions .btn { min-width: 0; flex: 1; }
+    }
+  `,
+
+  state: () => ({
+    count: 0,
+    step: 1,
+    history: [],
+  }),
+
+  computed: {
+    isNegative: (state) => state.count < 0,
+    historyCount: (state) => state.history.length,
+    lastAction: (state) => state.history.length ? state.history[state.history.length - 1] : null,
+  },
+
+  watch: {
+    count(val) {
+      if (val === 100) $.bus.emit('toast', { message: 'Century! 🎉', type: 'success' });
+      if (val === -100) $.bus.emit('toast', { message: 'Negative century!', type: 'error' });
+    },
+  },
+
+  increment() {
+    this.state.count += this.state.step;
+    this._pushHistory('+', this.state.step, this.state.count);
+  },
+
+  decrement() {
+    this.state.count -= this.state.step;
+    this._pushHistory('−', this.state.step, this.state.count);
+  },
+
+  _pushHistory(action, value, result) {
+    const raw = this.state.history.__raw || this.state.history;
+    const next = [...raw, { id: Date.now(), action, value, result }];
+    this.state.history = next.length > 8 ? next.slice(-8) : next;
+  },
+
+  reset() {
+    this.state.count = 0;
+    this.state.history = [];
+    $.bus.emit('toast', { message: 'Counter reset!', type: 'info' });
+  },
+
+  render() {
+    return `
+      <div class="page-header">
+        <h1>Counter</h1>
+        <p class="subtitle"><code>computed</code>, <code>watch</code>, <code>@click</code>, <code>z-model</code>, <code>z-class</code>, and <code>z-for</code> with <code>z-key</code>.</p>
+      </div>
+
+      <div class="card">
+        <div class="ctr-display">
+          <div class="ctr-num" z-class="{'negative': count < 0}">${this.state.count}</div>
+          <div class="ctr-label">current value${this.state.step !== 1 ? ` · step ${this.state.step}` : ''}</div>
+        </div>
+
+        <div class="ctr-actions">
+          <button class="btn btn-outline" @click="decrement">− Subtract</button>
+          <button class="btn btn-primary" @click="increment">+ Add</button>
+        </div>
+
+        <div class="ctr-config">
+          <label>Step size
+            <input type="number" z-model="step" z-number min="1" max="100" class="input input-sm" />
+          </label>
+          <button class="btn btn-ghost btn-sm" @click="reset">Reset</button>
+        </div>
+      </div>
+
+      <div class="card" z-if="history.length > 0">
+        <h3>History <small style="color:var(--text-muted);font-weight:400;font-size:.85rem;">${this.computed.historyCount} entries</small></h3>
+        <div class="ctr-hist">
+          <span z-for="e in history" z-key="{{e.id}}" class="ctr-hist-item">
+            <span class="ctr-hist-op">{{e.action}}{{e.value}}</span>
+            <span class="ctr-hist-val">→ {{e.result}}</span>
+          </span>
+        </div>
+      </div>
+    `;
+  }
+});