lightview 1.8.2 → 2.0.0

package/docs/components/drawer.html

@@ -0,0 +1,515 @@
+<!-- SEO-friendly SPA Shim -->
+<script src="/lightview-router.js"></script>
+<script>
+  if (window.LightviewRouter) {
+    LightviewRouter.base('/index.html');
+  }
+</script>
+
+<!-- Load the page-specific stylesheet -->
+<link rel="stylesheet" href="./index.css">
+
+<!-- Gallery Structure -->
+<div class="gallery-page">
+  <div class="gallery-layout">
+    <!-- Sidebar Overlay -->
+    <div id="sidebar-overlay" class="sidebar-overlay"></div>
+
+    <!-- Sidebar -->
+    <div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
+
+    <!-- Main Content -->
+    <div id="gallery-main" class="gallery-main">
+      <!-- Header Container -->
+      <div
+        style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
+        <!-- Breadcrumbs Row -->
+        <div style="padding: 0.75rem 1.5rem 0;">
+          <script>
+            (() => {
+              const { Breadcrumbs } = Lightview.tags;
+              const breadcrumbs = Breadcrumbs({
+                id: 'page-breadcrumbs',
+                items: [
+                  { label: 'Components', href: '/docs/components' },
+                  { label: 'Drawer' }
+                ]
+              });
+              document.currentScript.replaceWith(breadcrumbs.domEl);
+            })();
+          </script>
+        </div>
+        <!-- Title Row -->
+        <div class="gallery-header"
+          style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
+          <button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
+              style="stroke: currentColor; stroke-width: 2;">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <h1 class="gallery-title">Drawer</h1>
+        </div>
+      </div>
+
+      <!-- Content -->
+      <div class="gallery-content">
+        <div class="section-content" style="max-width: 1000px;">
+          <p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
+            Drawer is a sidebar that can be opened from the left or right side.
+            Perfect for navigation menus and side panels.
+          </p>
+
+          <!-- Basic Example with Examplify -->
+          <div class="card bg-base-200" style="margin-bottom: 2rem;">
+            <div class="card-body">
+              <h2 class="card-title">Basic Example</h2>
+              <p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Drawer with toggle button and menu</p>
+
+              <!-- Tabs -->
+              <script>
+                window.switchSyntaxTab = (tabId) => {
+                  const tabs = ['tagged', 'vdom', 'object'];
+                  tabs.forEach(t => {
+                    const tabEl = document.getElementById(`tab-btn-${t}`);
+                    const contentEl = document.getElementById(`syntax-${t}`);
+                    if (t === tabId) {
+                      tabEl.classList.add('syntax-tab-active');
+                      contentEl.style.display = 'block';
+                    } else {
+                      tabEl.classList.remove('syntax-tab-active');
+                      contentEl.style.display = 'none';
+                    }
+                  });
+                };
+              </script>
+              <div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
+                <button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
+                  onclick="switchSyntaxTab('tagged')">Tagged</button>
+                <button id="tab-btn-vdom" role="tab" class="syntax-tab" onclick="switchSyntaxTab('vdom')">vDOM</button>
+                <button id="tab-btn-object" role="tab" class="syntax-tab" onclick="switchSyntaxTab('object')">Object
+                  DOM</button>
+              </div>
+
+              <!-- Tagged Syntax -->
+              <div id="syntax-tagged">
+                <pre><script>
+                  examplify(document.currentScript.nextElementSibling, {
+                    at: document.currentScript.parentElement,
+                    scripts: ['/lightview.js', '/lightview-x.js'],
+                    styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                    type: 'module',
+                    minHeight: 220,
+                    autoRun: true,
+                    html: '<div id="demo" style="height: 200px;"></div>'
+                  });
+                </script><code contenteditable="true">await import('/components/layout/drawer.js');
+const { tags, $ } = Lightview;
+const { ul, li, a, p, Drawer } = tags;
+
+const drawerId = 'my-drawer';
+
+const drawer = Drawer({ id: drawerId },
+    Drawer.Content({},
+        Drawer.Button({ for: drawerId }, 'Open Drawer'),
+        p({ class: 'py-4' }, 'Main content area. Click the button to open the drawer.')
+    ),
+    Drawer.Side({ class: 'z-50' },
+        Drawer.Overlay({ for: drawerId }),
+        ul({ class: 'menu bg-base-200 text-base-content min-h-full w-64 p-4' },
+            li({}, a({}, '📁 Dashboard')),
+            li({}, a({}, '👤 Profile')),
+            li({}, a({}, '⚙️ Settings')),
+            li({}, a({}, '🚪 Logout'))
+        )
+    )
+);
+
+$('#demo').content(drawer);</code></pre>
+              </div>
+
+              <!-- vDOM Syntax -->
+              <div id="syntax-vdom" style="display: none;">
+                <pre><script>
+                  examplify(document.currentScript.nextElementSibling, {
+                    at: document.currentScript.parentElement,
+                    scripts: ['/lightview.js', '/lightview-x.js'],
+                    styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                    type: 'module',
+                    minHeight: 220,
+                    html: '<div id="demo" style="height: 200px;"></div>'
+                  });
+                </script><code contenteditable="true">await import('/components/layout/drawer.js');
+const { $, tags } = Lightview;
+const { Drawer, ul, li, a, p } = tags;
+
+const drawerId = 'my-drawer';
+
+const drawer = {
+  tag: Drawer,
+  attributes: { id: drawerId },
+  children: [
+    {
+      tag: Drawer.Content,
+      children: [
+        { tag: Drawer.Button, attributes: { for: drawerId }, children: ['Open Drawer'] },
+        { tag: p, attributes: { class: 'py-4' }, children: ['Main content area. Click the button to open the drawer.'] }
+      ]
+    },
+    {
+      tag: Drawer.Side,
+      attributes: { class: 'z-50' },
+      children: [
+        { tag: Drawer.Overlay, attributes: { for: drawerId } },
+        {
+          tag: ul,
+          attributes: { class: 'menu bg-base-200 text-base-content min-h-full w-64 p-4' },
+          children: [
+            { tag: li, children: [{ tag: a, children: ['📁 Dashboard'] }] },
+            { tag: li, children: [{ tag: a, children: ['👤 Profile'] }] },
+            { tag: li, children: [{ tag: a, children: ['⚙️ Settings'] }] },
+            { tag: li, children: [{ tag: a, children: ['🚪 Logout'] }] }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+$('#demo').content(drawer);</code></pre>
+              </div>
+
+              <!-- Object DOM Syntax -->
+              <div id="syntax-object" style="display: none;">
+                <pre><script>
+                  examplify(document.currentScript.nextElementSibling, {
+                    at: document.currentScript.parentElement,
+                    scripts: ['/lightview.js', '/lightview-x.js'],
+                    styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                    type: 'module',
+                    minHeight: 220,
+                    html: '<div id="demo" style="height: 200px;"></div>'
+                  });
+                </script><code contenteditable="true">await import('/components/layout/drawer.js');
+const { $ } = Lightview;
+
+const drawerId = 'my-drawer';
+
+const drawer = {
+  Drawer: {
+    id: drawerId,
+    children: [
+      {
+        'Drawer.Content': {
+          children: [
+            { 'Drawer.Button': { for: drawerId, children: ['Open Drawer'] } },
+            { p: { class: 'py-4', children: ['Main content area. Click the button to open the drawer.'] } }
+          ]
+        }
+      },
+      {
+        'Drawer.Side': {
+          class: 'z-50',
+          children: [
+            { 'Drawer.Overlay': { for: drawerId } },
+            {
+              ul: {
+                class: 'menu bg-base-200 text-base-content min-h-full w-64 p-4',
+                children: [
+                  { li: { children: [{ a: { children: ['📁 Dashboard'] } }] } },
+                  { li: { children: [{ a: { children: ['👤 Profile'] } }] } },
+                  { li: { children: [{ a: { children: ['⚙️ Settings'] } }] } },
+                  { li: { children: [{ a: { children: ['🚪 Logout'] } }] } }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+};
+
+$('#demo').content(drawer);</code></pre>
+              </div>
+            </div>
+          </div>
+
+          <!-- Reactive Example with Examplify -->
+          <div class="card bg-base-200" style="margin-bottom: 2rem;">
+            <div class="card-body">
+              <h2 class="card-title">Right Side Drawer</h2>
+              <p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Drawer opening from the right</p>
+
+              <!-- Tabs -->
+              <script>
+                window.switchReactiveSyntaxTab = (tabId) => {
+                  const tabs = ['tagged', 'vdom', 'object'];
+                  tabs.forEach(t => {
+                    const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
+                    const contentEl = document.getElementById(`reactive-syntax-${t}`);
+                    if (t === tabId) {
+                      tabEl.classList.add('syntax-tab-active');
+                      contentEl.style.display = 'block';
+                    } else {
+                      tabEl.classList.remove('syntax-tab-active');
+                      contentEl.style.display = 'none';
+                    }
+                  });
+                };
+              </script>
+              <div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
+                <button id="reactive-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
+                  onclick="switchReactiveSyntaxTab('tagged')">Tagged</button>
+                <button id="reactive-tab-btn-vdom" role="tab" class="syntax-tab"
+                  onclick="switchReactiveSyntaxTab('vdom')">vDOM</button>
+                <button id="reactive-tab-btn-object" role="tab" class="syntax-tab"
+                  onclick="switchReactiveSyntaxTab('object')">Object DOM</button>
+              </div>
+
+              <!-- Tagged Syntax -->
+              <div id="reactive-syntax-tagged">
+                <pre><script>
+                  examplify(document.currentScript.nextElementSibling, {
+                    at: document.currentScript.parentElement,
+                    scripts: ['/lightview.js', '/lightview-x.js'],
+                    styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                    type: 'module',
+                    minHeight: 220,
+                    html: '<div id="demo" style="height: 200px;"></div>'
+                  });
+                </script><code contenteditable="true">await import('/components/layout/drawer.js');
+await import('/components/actions/button.js');
+
+const { tags, $ } = Lightview;
+const { ul, li, a, div, p, h3, Drawer, Button } = tags;
+
+const drawerId = 'cart-drawer';
+
+const drawer = Drawer({ id: drawerId, end: true },
+    Drawer.Content({},
+        Drawer.Button({ for: drawerId, class: 'btn-accent' }, '🛒 View Cart')
+    ),
+    Drawer.Side({ class: 'z-50' },
+        Drawer.Overlay({ for: drawerId }),
+        div({ class: 'bg-base-200 text-base-content min-h-full w-80 p-4' },
+            h3({ class: 'text-lg font-bold mb-4' }, '🛒 Shopping Cart'),
+            div({ class: 'divider' }),
+            p({ class: 'opacity-70' }, 'Your cart is empty'),
+            div({ class: 'mt-4' },
+                Button({ color: 'primary', class: 'w-full' }, 'Checkout')
+            )
+        )
+    )
+);
+
+$('#demo').content(drawer);</code></pre>
+              </div>
+
+              <!-- vDOM Syntax -->
+              <div id="reactive-syntax-vdom" style="display: none;">
+                <pre><script>
+                  examplify(document.currentScript.nextElementSibling, {
+                    at: document.currentScript.parentElement,
+                    scripts: ['/lightview.js', '/lightview-x.js'],
+                    styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                    type: 'module',
+                    minHeight: 220,
+                    html: '<div id="demo" style="height: 200px;"></div>'
+                  });
+                </script><code contenteditable="true">await import('/components/layout/drawer.js');
+await import('/components/actions/button.js');
+const { $, tags } = Lightview;
+const { Drawer, Button, div, h3, p } = tags;
+
+const drawerId = 'cart-drawer';
+
+const drawer = {
+  tag: Drawer,
+  attributes: { id: drawerId, end: true },
+  children: [
+    {
+      tag: Drawer.Content,
+      children: [
+        { tag: Drawer.Button, attributes: { for: drawerId, class: 'btn-accent' }, children: ['🛒 View Cart'] }
+      ]
+    },
+    {
+      tag: Drawer.Side,
+      attributes: { class: 'z-50' },
+      children: [
+        { tag: Drawer.Overlay, attributes: { for: drawerId } },
+        {
+          tag: div,
+          attributes: { class: 'bg-base-200 text-base-content min-h-full w-80 p-4' },
+          children: [
+            { tag: h3, attributes: { class: 'text-lg font-bold mb-4' }, children: ['🛒 Shopping Cart'] },
+            { tag: div, attributes: { class: 'divider' } },
+            { tag: p, attributes: { class: 'opacity-70' }, children: ['Your cart is empty'] },
+            {
+              tag: div,
+              attributes: { class: 'mt-4' },
+              children: [
+                { tag: Button, attributes: { color: 'primary', class: 'w-full' }, children: ['Checkout'] }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+$('#demo').content(drawer);</code></pre>
+              </div>
+
+              <!-- Object DOM Syntax -->
+              <div id="reactive-syntax-object" style="display: none;">
+                <pre><script>
+                  examplify(document.currentScript.nextElementSibling, {
+                    at: document.currentScript.parentElement,
+                    scripts: ['/lightview.js', '/lightview-x.js'],
+                    styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                    type: 'module',
+                    minHeight: 220,
+                    html: '<div id="demo" style="height: 200px;"></div>'
+                  });
+                </script><code contenteditable="true">await import('/components/layout/drawer.js');
+await import('/components/actions/button.js');
+const { $ } = Lightview;
+
+const drawerId = 'cart-drawer';
+
+const drawer = {
+  Drawer: {
+    id: drawerId,
+    end: true,
+    children: [
+      {
+        'Drawer.Content': {
+          children: [
+            { 'Drawer.Button': { for: drawerId, class: 'btn-accent', children: ['🛒 View Cart'] } }
+          ]
+        }
+      },
+      {
+        'Drawer.Side': {
+          class: 'z-50',
+          children: [
+            { 'Drawer.Overlay': { for: drawerId } },
+            {
+              div: {
+                class: 'bg-base-200 text-base-content min-h-full w-80 p-4',
+                children: [
+                  { h3: { class: 'text-lg font-bold mb-4', children: ['🛒 Shopping Cart'] } },
+                  { div: { class: 'divider' } },
+                  { p: { class: 'opacity-70', children: ['Your cart is empty'] } },
+                  {
+                    div: {
+                      class: 'mt-4',
+                      children: [{ Button: { color: 'primary', class: 'w-full', children: ['Checkout'] } }]
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+};
+
+$('#demo').content(drawer);</code></pre>
+              </div>
+            </div>
+          </div>
+
+          <!-- Props Table -->
+          <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Props</h2>
+          <div style="overflow-x: auto; margin-bottom: 2rem;">
+            <table class="table table-zebra">
+              <thead>
+                <tr>
+                  <th>Prop</th>
+                  <th>Type</th>
+                  <th>Default</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>id</code></td>
+                  <td>string</td>
+                  <td>auto</td>
+                  <td>Unique ID for the drawer toggle</td>
+                </tr>
+                <tr>
+                  <td><code>open</code></td>
+                  <td>boolean | function</td>
+                  <td>false</td>
+                  <td>Control open state (reactive)</td>
+                </tr>
+                <tr>
+                  <td><code>end</code></td>
+                  <td>boolean</td>
+                  <td>false</td>
+                  <td>Open from right side</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- Sub-components -->
+          <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sub-components</h2>
+          <div style="overflow-x: auto; margin-bottom: 2rem;">
+            <table class="table table-zebra">
+              <thead>
+                <tr>
+                  <th>Component</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>Drawer.Content</code></td>
+                  <td>Main content area (visible when drawer is closed)</td>
+                </tr>
+                <tr>
+                  <td><code>Drawer.Side</code></td>
+                  <td>Sidebar content container</td>
+                </tr>
+                <tr>
+                  <td><code>Drawer.Overlay</code></td>
+                  <td>Click-to-close overlay backdrop</td>
+                </tr>
+                <tr>
+                  <td><code>Drawer.Button</code></td>
+                  <td>Toggle button to open drawer</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- Static Example -->
+          <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Interactive Demo</h2>
+          <div class="drawer rounded-lg border border-base-300"
+            style="margin-bottom: 2rem; height: 12rem; overflow: hidden;">
+            <input id="demo-drawer" type="checkbox" class="drawer-toggle" />
+            <div class="drawer-content flex flex-col items-center justify-center">
+              <label for="demo-drawer" class="btn btn-primary drawer-button">Open drawer</label>
+            </div>
+            <div class="drawer-side z-50">
+              <label for="demo-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+              <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
+                <li><a>Sidebar Item 1</a></li>
+                <li><a>Sidebar Item 2</a></li>
+                <li><a>Sidebar Item 3</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>