@keenmate/pure-admin-core 1.0.0-rc01

package/snippets/code.html

@@ -0,0 +1,225 @@
+<!-- CODE COMPONENT SNIPPETS -->
+
+<!-- ========================================
+     INLINE CODE
+     ======================================== -->
+
+<!-- Basic inline code -->
+<p>Use the <code>&lt;code&gt;</code> element for inline code.</p>
+
+<!-- Inline code in sentences -->
+<p>Install packages with <code>npm install</code> and run with <code>npm start</code>.</p>
+
+
+<!-- ========================================
+     BASIC CODE BLOCKS
+     ======================================== -->
+
+<!-- Plain code block -->
+<pre class="pa-code">function example() {
+    return 'Plain code block';
+}</pre>
+
+<!-- JavaScript code block -->
+<pre class="pa-code pa-code--javascript">function greet(name) {
+    return `Hello, ${name}!`;
+}
+
+const result = greet('World');
+console.log(result);</pre>
+
+<!-- JSON code block -->
+<pre class="pa-code pa-code--json">{
+    "name": "Pure Admin",
+    "version": "1.0.0",
+    "theme": "corporate",
+    "features": [
+        "responsive",
+        "themeable",
+        "lightweight"
+    ]
+}</pre>
+
+<!-- HTML code block -->
+<pre class="pa-code pa-code--html">&lt;div class="pa-card"&gt;
+    &lt;div class="pa-card__header"&gt;
+        &lt;h3&gt;Card Title&lt;/h3&gt;
+    &lt;/div&gt;
+    &lt;div class="pa-card__body"&gt;
+        Content here
+    &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<!-- CSS code block -->
+<pre class="pa-code pa-code--css">.pa-btn {
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    background-color: #3b82f6;
+    color: #ffffff;
+}</pre>
+
+<!-- Bash/Terminal code block -->
+<pre class="pa-code pa-code--bash">$ npm install
+$ npm run build
+$ npm start
+
+Server running on port 3000...</pre>
+
+<!-- SQL code block -->
+<pre class="pa-code pa-code--sql">SELECT users.name, orders.total
+FROM users
+INNER JOIN orders
+    ON users.id = orders.user_id
+WHERE orders.status = 'completed'
+ORDER BY orders.total DESC;</pre>
+
+<!-- Python code block -->
+<pre class="pa-code pa-code--python">def fibonacci(n):
+    if n <= 1:
+        return n
+    return fibonacci(n-1) + fibonacci(n-2)
+
+print(fibonacci(10))</pre>
+
+
+<!-- ========================================
+     CODE BLOCK WITH HEADER
+     ======================================== -->
+
+<!-- Code block with filename and copy button -->
+<div class="pa-code-block">
+    <div class="pa-code-block__header">
+        <span class="pa-code-block__title">server.js</span>
+        <button class="pa-btn pa-btn--xs pa-btn--secondary" onclick="copyCode(this)">
+            <span class="pa-btn__icon">📋</span>
+            Copy
+        </button>
+    </div>
+    <div class="pa-code-block__body">
+        <pre class="pa-code">const express = require('express');
+const app = express();
+
+app.get('/', (req, res) => {
+    res.send('Hello World!');
+});
+
+app.listen(3000);</pre>
+    </div>
+</div>
+
+<!-- JSON config file -->
+<div class="pa-code-block">
+    <div class="pa-code-block__header">
+        <span class="pa-code-block__title">package.json</span>
+        <button class="pa-btn pa-btn--xs pa-btn--secondary" onclick="copyCode(this)">
+            <span class="pa-btn__icon">📋</span>
+            Copy
+        </button>
+    </div>
+    <div class="pa-code-block__body">
+        <pre class="pa-code pa-code--json">{
+    "name": "my-app",
+    "version": "1.0.0",
+    "scripts": {
+        "start": "node server.js",
+        "dev": "nodemon server.js"
+    }
+}</pre>
+    </div>
+</div>
+
+
+<!-- ========================================
+     COMPACT VARIANT
+     ======================================== -->
+
+<!-- Compact code block -->
+<pre class="pa-code pa-code--compact">const x = 42;</pre>
+
+<!-- Compact with language variant -->
+<pre class="pa-code pa-code--compact pa-code--python">print("Hello World")</pre>
+
+
+<!-- ========================================
+     ALL LANGUAGE VARIANTS
+     ======================================== -->
+
+<!-- JavaScript - Yellow accent -->
+<pre class="pa-code pa-code--javascript">console.log('JavaScript');</pre>
+
+<!-- JSON - Orange accent -->
+<pre class="pa-code pa-code--json">{"language": "JSON"}</pre>
+
+<!-- HTML - Red accent -->
+<pre class="pa-code pa-code--html">&lt;div&gt;HTML&lt;/div&gt;</pre>
+
+<!-- CSS - Blue accent -->
+<pre class="pa-code pa-code--css">.class { color: blue; }</pre>
+
+<!-- Bash - Green accent -->
+<pre class="pa-code pa-code--bash">$ echo "Bash"</pre>
+
+<!-- SQL - Teal accent -->
+<pre class="pa-code pa-code--sql">SELECT * FROM table;</pre>
+
+<!-- Python - Blue accent -->
+<pre class="pa-code pa-code--python">print("Python")</pre>
+
+
+<!-- ========================================
+     JAVASCRIPT FOR COPY FUNCTIONALITY
+     ======================================== -->
+
+<script>
+function copyCode(button) {
+    const codeBlock = button.closest('.pa-code-block');
+    const code = codeBlock.querySelector('.pa-code').textContent;
+
+    navigator.clipboard.writeText(code).then(() => {
+        const originalText = button.innerHTML;
+        button.innerHTML = '<span class="pa-btn__icon">✓</span> Copied!';
+        button.classList.add('pa-btn--success');
+
+        setTimeout(() => {
+            button.innerHTML = originalText;
+            button.classList.remove('pa-btn--success');
+        }, 2000);
+    });
+}
+</script>
+
+
+<!-- ========================================
+     COMPONENT REFERENCE
+     ======================================== -->
+
+<!--
+INLINE CODE:
+- <code> - Inline code element with light background
+
+CODE BLOCKS:
+- .pa-code - Basic code block (pre element)
+- .pa-code--compact - Smaller padding and font size
+- .pa-code--javascript - Yellow left border
+- .pa-code--json - Orange left border
+- .pa-code--html - Red left border
+- .pa-code--css - Blue left border
+- .pa-code--bash - Green left border
+- .pa-code--sql - Teal left border
+- .pa-code--python - Blue left border
+
+CODE BLOCK WITH HEADER:
+- .pa-code-block - Container with border
+- .pa-code-block__header - Header with title and actions
+- .pa-code-block__title - Filename or description
+- .pa-code-block__body - Body containing .pa-code
+
+COMBINE MODIFIERS:
+<pre class="pa-code pa-code--compact pa-code--javascript">
+
+USAGE:
+Inline: <code>code here</code>
+Block: <pre class="pa-code">code here</pre>
+With language: <pre class="pa-code pa-code--json">{"key": "value"}</pre>
+-->

package/snippets/command-palette.html

@@ -0,0 +1,210 @@
+<!-- ========================================
+     Command Palette Component
+     macOS Spotlight-style global search
+     ======================================== -->
+
+<!--
+  USAGE:
+  - Include this HTML in your layout (globally available)
+  - Include /dist/js/command-palette.js for functionality
+  - Press Ctrl+K or Cmd+K to open
+  - Use /p, /o, /u, /i prefixes for context switching
+-->
+
+<!-- Command Palette Modal -->
+<div class="pa-command-palette" id="commandPalette">
+    <!-- Backdrop overlay -->
+    <div class="pa-command-palette__backdrop" id="commandPaletteBackdrop"></div>
+
+    <!-- Main container -->
+    <div class="pa-command-palette__container">
+        <!-- Search input -->
+        <div class="pa-command-palette__search">
+            <input
+                type="text"
+                class="pa-command-palette__input"
+                id="commandPaletteInput"
+                placeholder="Search products, orders, users... (try /p, /o, /u)"
+                autocomplete="off"
+                spellcheck="false"
+            >
+            <!-- Context label (hidden by default, shown when prefix detected) -->
+            <div class="pa-command-palette__context" id="commandPaletteContext"></div>
+        </div>
+
+        <!-- Results container -->
+        <div class="pa-command-palette__results" id="commandPaletteResults">
+            <!-- Empty state (default) -->
+            <div class="pa-command-palette__empty">
+                Type to search or use /p for products, /o for orders, /u for users, /i for invoices
+            </div>
+        </div>
+
+        <!-- Footer with keyboard hints -->
+        <div class="pa-command-palette__footer">
+            <div class="pa-command-palette__hint">
+                <span class="pa-command-palette__key">↑↓</span>
+                <span>Navigate</span>
+            </div>
+            <div class="pa-command-palette__hint">
+                <span class="pa-command-palette__key">←→</span>
+                <span>Pages</span>
+            </div>
+            <div class="pa-command-palette__hint">
+                <span class="pa-command-palette__key">↵</span>
+                <span>Select</span>
+            </div>
+            <div class="pa-command-palette__hint">
+                <span class="pa-command-palette__key">Esc</span>
+                <span>Close</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- ========================================
+     JavaScript States
+     ======================================== -->
+
+<!-- Loader state (shown during search) -->
+<div class="pa-command-palette__loader">
+    <div class="pa-spinner pa-spinner--sm pa-spinner--primary"></div>
+    <span>Searching...</span>
+</div>
+
+<!-- Result item (generated dynamically) -->
+<div class="pa-command-palette__item">
+    <div class="pa-command-palette__item-icon">💻</div>
+    <div class="pa-command-palette__item-content">
+        <div class="pa-command-palette__item-title">MacBook Pro 16"</div>
+        <div class="pa-command-palette__item-meta">SKU: MBP-16-001 • $2,499.00</div>
+    </div>
+    <div class="pa-command-palette__item-badge">In Stock</div>
+</div>
+
+<!-- Active result item -->
+<div class="pa-command-palette__item pa-command-palette__item--active">
+    <div class="pa-command-palette__item-icon">📱</div>
+    <div class="pa-command-palette__item-content">
+        <div class="pa-command-palette__item-title">iPhone 15 Pro</div>
+        <div class="pa-command-palette__item-meta">SKU: IP15P-256 • $999.00</div>
+    </div>
+    <div class="pa-command-palette__item-badge">New</div>
+</div>
+
+<!-- Result with highlighted search match -->
+<div class="pa-command-palette__item">
+    <div class="pa-command-palette__item-icon">🎧</div>
+    <div class="pa-command-palette__item-content">
+        <div class="pa-command-palette__item-title">Air<mark>Pods</mark> Pro</div>
+        <div class="pa-command-palette__item-meta">SKU: APP-GEN2 • $249.00</div>
+    </div>
+    <div class="pa-command-palette__item-badge">Popular</div>
+</div>
+
+<!-- Pagination indicator (shown when multiple pages) -->
+<div class="pa-command-palette__pagination">
+    Page 1 of 3 • 24 results
+</div>
+
+<!-- Section header (for grouping results) -->
+<div class="pa-command-palette__section">
+    Recent Searches
+</div>
+
+<!-- ========================================
+     CSS Modifiers
+     ======================================== -->
+
+<!-- Active state (shows the palette) -->
+<div class="pa-command-palette pa-command-palette--active">
+    <!-- ... -->
+</div>
+
+<!-- Context label visible -->
+<div class="pa-command-palette__context pa-command-palette__context--visible">
+    Searching in Products
+</div>
+
+<!-- Results in loading state (shows overlay) -->
+<div class="pa-command-palette__results pa-command-palette__results--loading">
+    <!-- ... -->
+</div>
+
+<!-- ========================================
+     JavaScript API
+     ======================================== -->
+
+<!--
+// Open palette
+document.getElementById('commandPalette').classList.add('pa-command-palette--active');
+document.getElementById('commandPaletteInput').focus();
+
+// Close palette
+document.getElementById('commandPalette').classList.remove('pa-command-palette--active');
+document.getElementById('commandPaletteInput').value = '';
+
+// Open with pre-filled query
+const input = document.getElementById('commandPaletteInput');
+input.value = '/p laptop';
+input.dispatchEvent(new Event('input'));
+-->
+
+<!-- ========================================
+     Context Prefixes
+     ======================================== -->
+
+<!--
+/p  → Products    → "Searching in Products"
+/o  → Orders      → "Searching in Orders"
+/u  → Users       → "Searching in Users"
+/i  → Invoices    → "Searching in Invoices"
+-->
+
+<!-- ========================================
+     Keyboard Shortcuts
+     ======================================== -->
+
+<!--
+Ctrl+K / Cmd+K  → Open/close palette
+↑ ↓             → Navigate between results
+← →             → Navigate between pages
+Enter           → Select highlighted result
+Esc             → Close palette
+-->
+
+<!-- ========================================
+     SCSS Variables (for customization)
+     ======================================== -->
+
+<!--
+$command-palette-width: 38rem
+$command-palette-offset-top: 8rem
+$command-palette-border-radius: $border-radius
+$command-palette-backdrop-bg: rgba(0, 0, 0, 0.5)
+$command-palette-backdrop-blur: 4px
+$command-palette-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3)
+$command-palette-input-padding-v: $spacing-base
+$command-palette-input-padding-h: $spacing-lg
+$command-palette-input-font-size: $font-size-lg
+$command-palette-results-max-height: 24rem
+$command-palette-empty-padding-v: $spacing-2xl
+$command-palette-item-padding-v: $spacing-sm
+$command-palette-item-hover-bg: rgba($accent-color, 0.05)
+$command-palette-item-active-bg: rgba($accent-color, 0.1)
+$command-palette-item-icon-size: 2rem
+$command-palette-highlight-bg: rgba($accent-color, 0.2)
+$command-palette-highlight-text: $accent-color
+-->
+
+<!-- ========================================
+     Implementation Files
+     ======================================== -->
+
+<!--
+SCSS:       src/scss/core-components/_command-palette.scss
+Variables:  src/scss/_variables.scss (17 variables)
+JavaScript: dist/js/command-palette.js
+HTML:       views/layout.mustache (included globally)
+Demo:       /command-palette
+-->