zero-query 0.3.1 → 0.5.2

package/cli/scaffold/scripts/components/contacts/contacts.css

@@ -0,0 +1,253 @@
+/* contacts.css — scoped styles for contacts-page component
+ *
+ * Loaded via styleUrl — these styles are automatically scoped
+ * to the contacts-page component by zQuery.
+ */
+
+/* -- Toolbar -- */
+.contacts-toolbar-row {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* -- Add Form -- */
+.contacts-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.form-field-full {
+  grid-column: 1 / -1;
+}
+
+.form-field .input {
+  width: 100%;
+}
+
+.field-error {
+  color: var(--danger);
+  font-size: 0.78rem;
+  min-height: 0;
+}
+
+.contacts-form .btn {
+  grid-column: 1 / -1;
+  justify-self: start;
+}
+
+/* -- Count -- */
+.contacts-count {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+/* -- List -- */
+.contacts-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.contacts-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.7rem 0.85rem;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border: 1px solid transparent;
+}
+
+.contacts-item:hover {
+  background: var(--bg-hover);
+}
+
+.contacts-item.selected {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+}
+
+.contacts-item.is-favorite {
+  border-left: 3px solid var(--accent);
+}
+
+/* -- Status dot -- */
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--text-muted);
+}
+
+.status-online  { background: var(--success); }
+.status-away    { background: var(--info); }
+.status-offline { background: var(--text-muted); }
+
+/* -- Contact info -- */
+.contacts-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.contacts-info strong {
+  font-size: 0.9rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.contacts-info small {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* -- Role badge -- */
+.role-badge {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.2rem 0.55rem;
+  border-radius: 99px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+}
+
+.role-developer {
+  background: rgba(96, 165, 250, 0.15);
+  color: #60a5fa;
+}
+
+.role-designer {
+  background: rgba(168, 85, 247, 0.15);
+  color: #a855f7;
+}
+
+.role-manager {
+  background: rgba(52, 211, 153, 0.15);
+  color: #34d399;
+}
+
+.role-qa {
+  background: rgba(251, 191, 36, 0.15);
+  color: #fbbf24;
+}
+
+/* -- Favorite button -- */
+.fav-btn {
+  background: none;
+  border: none;
+  font-size: 1.2rem;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 0.2rem;
+  transition: all 0.15s ease;
+  line-height: 1;
+}
+
+.fav-btn:hover {
+  transform: scale(1.2);
+}
+
+.fav-btn.is-fav {
+  color: var(--accent);
+}
+
+/* -- Detail panel -- */
+.contact-detail {
+  border-left: 3px solid var(--accent);
+  animation: slide-in 0.2s ease;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.detail-header h3 {
+  font-size: 1.1rem;
+  margin-bottom: 0.15rem;
+}
+
+.detail-header .muted {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.detail-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* -- Confirm group -- */
+.confirm-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.confirm-text {
+  font-size: 0.82rem;
+  color: var(--danger);
+  font-weight: 500;
+}
+
+@keyframes slide-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+}
+
+/* -- Animation -- */
+@keyframes slide-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* -- Responsive -- */
+@media (max-width: 768px) {
+  .contacts-toolbar-row {
+    flex-direction: column;
+  }
+
+  .contacts-form {
+    grid-template-columns: 1fr;
+  }
+
+  .contacts-item {
+    flex-wrap: wrap;
+  }
+
+  .role-badge {
+    order: 10;
+    margin-left: calc(10px + 0.75rem);
+  }
+
+  .detail-header {
+    flex-direction: column;
+  }
+}

package/cli/scaffold/scripts/components/contacts/contacts.html

@@ -0,0 +1,139 @@
+<!--
+  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-style, z-text, z-model, z-ref,
+  z-cloak, @click, @submit.prevent, etc.
+
+  Expressions have access to `state` and `props` automatically.
+  Inside z-for loops, use {{item.prop}} for per-item values.
+-->
+<div class="page-header" z-cloak>
+  <h1>Contacts</h1>
+  <p class="subtitle">
+    External template &amp; styles via <code>templateUrl</code> / <code>styleUrl</code>.
+    Directives: <code>z-if</code>, <code>z-for</code>, <code>z-show</code>,
+    <code>z-bind</code>, <code>z-class</code>, <code>z-model</code>, and more.
+  </p>
+</div>
+
+<!-- Toolbar: add button -->
+<div class="card contacts-toolbar">
+  <div class="contacts-toolbar-row">
+    <span class="contacts-count" z-if="contacts.length > 0">
+      <strong z-text="contacts.length"></strong> contacts
+      · <strong z-text="favoriteCount"></strong> ★ favorited
+      <span z-show="totalAdded > 0"> · <span z-text="totalAdded"></span> added this session</span>
+    </span>
+    <span class="contacts-count" z-else>No contacts yet</span>
+    <button class="btn btn-primary" @click="toggleForm">
+      <span z-if="showForm">✕ Cancel</span>
+      <span z-else>+ Add Contact</span>
+    </button>
+  </div>
+
+  <!-- Add contact form — toggled via z-show -->
+  <form class="contacts-form" z-show="showForm" @submit.prevent="addContact">
+    <div class="form-field form-field-full">
+      <input
+        type="text"
+        z-model="newName"
+        z-trim
+        placeholder="Full name"
+        class="input"
+        @blur="validateName"
+      />
+      <small class="field-error" z-show="nameError" z-text="nameError"></small>
+    </div>
+    <div class="form-field">
+      <input
+        type="email"
+        z-model="newEmail"
+        z-trim
+        placeholder="Email address"
+        class="input"
+        @blur="validateEmail"
+      />
+      <small class="field-error" z-show="emailError" z-text="emailError"></small>
+    </div>
+    <select z-model="newRole" class="input">
+      <option value="Developer">Developer</option>
+      <option value="Designer">Designer</option>
+      <option value="Manager">Manager</option>
+      <option value="QA">QA</option>
+    </select>
+    <button type="submit" class="btn btn-primary">Save Contact</button>
+  </form>
+</div>
+
+<!-- Contact count -->
+<div class="card" z-if="contacts.length > 0">
+  <!-- Contacts list — z-for renders each item -->
+  <ul class="contacts-list">
+    <li
+      z-for="contact in contacts"
+      class="contacts-item {{contact.id === selectedId ? 'selected' : ''}} {{contact.favorite ? 'is-favorite' : ''}}"
+      @click="selectContact({{contact.id}})"
+    >
+      <!-- Status indicator — class set per status -->
+      <span
+        class="status-dot status-{{contact.status}}"
+        title="{{contact.status}}"
+      ></span>
+
+      <!-- Contact info -->
+      <div class="contacts-info">
+        <strong>{{contact.name}}</strong>
+        <small>{{contact.email}}</small>
+      </div>
+
+      <!-- Role badge -->
+      <span class="role-badge role-{{contact.role.toLowerCase()}}">{{contact.role}}</span>
+
+      <!-- Favorite toggle — .stop modifier prevents row click -->
+      <button
+        class="fav-btn {{contact.favorite ? 'is-fav' : ''}}"
+        @click.stop="toggleFavorite({{contact.id}})"
+      >{{contact.favorite ? '★' : '☆'}}</button>
+    </li>
+  </ul>
+</div>
+
+<!-- Empty state -->
+<div class="card" z-else>
+  <div class="empty-state">
+    <p>No contacts yet — add one above!</p>
+  </div>
+</div>
+
+<!-- Selected contact detail panel — z-if conditional rendering -->
+<div class="card contact-detail" z-if="selectedId !== null">
+  <div class="detail-header">
+    <div>
+      <h3 z-text="contacts.find(c => c.id === selectedId)?.name || ''"></h3>
+      <p class="muted" z-text="contacts.find(c => c.id === selectedId)?.email || ''"></p>
+    </div>
+    <div class="detail-actions">
+      <button
+        class="btn btn-outline btn-sm"
+        @click="cycleStatus({{selectedId}})"
+      >
+        Status: <span z-text="contacts.find(c => c.id === selectedId)?.status || ''"></span>
+      </button>
+
+      <!-- Confirm delete pattern using z-if / z-else -->
+      <button
+        class="btn btn-danger btn-sm"
+        z-if="confirmDeleteId !== selectedId"
+        @click.stop="confirmDelete({{selectedId}})"
+      >Delete</button>
+
+      <span z-else class="confirm-group">
+        <span class="confirm-text">Sure?</span>
+        <button class="btn btn-danger btn-sm" @click.stop="deleteContact({{selectedId}})">Yes</button>
+        <button class="btn btn-ghost btn-sm" @click.stop="cancelDelete">No</button>
+      </span>
+    </div>
+  </div>
+</div>

package/cli/scaffold/scripts/components/contacts/contacts.js

@@ -0,0 +1,137 @@
+// scripts/components/contacts/contacts.js — contact book
+//
+// Demonstrates: external templateUrl + styleUrl, z-if/z-else, z-for,
+//               z-show, z-bind/:attr, z-class, z-style, z-text, z-html,
+//               z-model, z-ref, z-cloak, @click, @submit.prevent,
+//               @input.debounce, event modifiers, and template {{expressions}}
+//
+// This component uses external files for its template and styles,
+// resolved automatically relative to this JS file's location.
+// Contacts are persisted in the global $.store('main') so they
+// survive navigation between routes.
+
+$.component('contacts-page', {
+  templateUrl: 'contacts.html',
+  styleUrl:    'contacts.css',
+
+  state: () => ({
+    contacts: [],
+    showForm: false,
+    newName: '',
+    newEmail: '',
+    newRole: 'Developer',
+    nameError: '',
+    emailError: '',
+    selectedId: null,
+    confirmDeleteId: null,
+    totalAdded: 0,
+    favoriteCount: 0,
+  }),
+
+  mounted() {
+    const store = $.getStore('main');
+    this._syncFromStore(store);
+    this._unsub = store.subscribe(() => this._syncFromStore(store));
+  },
+
+  destroyed() {
+    if (this._unsub) this._unsub();
+  },
+
+  _syncFromStore(store) {
+    this.state.contacts      = store.state.contacts;
+    this.state.totalAdded    = store.state.contactsAdded;
+    this.state.favoriteCount = store.getters.favoriteCount;
+  },
+
+  // -- Actions --
+
+  toggleForm() {
+    this.state.showForm = !this.state.showForm;
+    if (!this.state.showForm) this._clearForm();
+  },
+
+  _validateName(name) {
+    if (!name) return 'Name is required.';
+    if (name.length < 2) return 'Name must be at least 2 characters.';
+    return '';
+  },
+
+  _validateEmail(email) {
+    if (!email) return 'Email is required.';
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return 'Enter a valid email address.';
+    const store = $.getStore('main');
+    if (store.state.contacts.some(c => c.email.toLowerCase() === email.toLowerCase())) {
+      return 'A contact with this 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,
+    });
+
+    this._clearForm();
+    this.state.showForm = false;
+    $.bus.emit('toast', { message: `${name} added!`, type: 'success' });
+  },
+
+  toggleFavorite(id) {
+    $.getStore('main').dispatch('toggleFavorite', Number(id));
+  },
+
+  selectContact(id) {
+    this.state.selectedId = this.state.selectedId === Number(id) ? null : Number(id);
+    this.state.confirmDeleteId = null;
+  },
+
+  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.selectedId = null;
+    this.state.confirmDeleteId = null;
+    $.bus.emit('toast', { message: `${c ? c.name : 'Contact'} removed`, type: 'error' });
+  },
+
+  cycleStatus(id) {
+    $.getStore('main').dispatch('cycleContactStatus', Number(id));
+  },
+
+  _clearForm() {
+    this.state.newName   = '';
+    this.state.newEmail  = '';
+    this.state.newRole   = 'Developer';
+    this.state.nameError = '';
+    this.state.emailError = '';
+  },
+});

package/cli/scaffold/scripts/components/counter.js

@@ -0,0 +1,65 @@
+// scripts/components/counter.js — interactive counter
+//
+// Demonstrates: component state, instance methods, @click event binding,
+//               z-model two-way binding with z-number modifier, z-class,
+//               z-if, z-for, $.bus toast notifications
+
+$.component('counter-page', {
+  state: () => ({
+    count: 0,
+    step: 1,
+    history: [],
+  }),
+
+  increment() {
+    this.state.count += this.state.step;
+    this.state.history.push({ action: '+', value: this.state.step, result: this.state.count });
+    if (this.state.history.length > 8) this.state.history.shift();
+  },
+
+  decrement() {
+    this.state.count -= this.state.step;
+    this.state.history.push({ action: '−', value: this.state.step, result: this.state.count });
+    if (this.state.history.length > 8) this.state.history.shift();
+  },
+
+  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">Component state, <code>@click</code> handlers, <code>z-model</code>, <code>z-class</code>, and <code>z-for</code>.</p>
+      </div>
+
+      <div class="card counter-card">
+        <div class="counter-display">
+          <span class="counter-value" z-class="{'negative': count < 0}">${this.state.count}</span>
+        </div>
+
+        <div class="counter-controls">
+          <button class="btn btn-danger" @click="decrement">− Subtract</button>
+          <button class="btn btn-primary" @click="increment">+ Add</button>
+        </div>
+
+        <div class="counter-step">
+          <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 card-muted" z-if="history.length > 0">
+        <h3>History</h3>
+        <div class="history-list">
+          <span z-for="e in history" class="history-item">{{e.action}}{{e.value}} → <strong>{{e.result}}</strong></span>
+        </div>
+      </div>
+    `;
+  }
+});