@aithe/aithe-ui 26.2.3 → 26.3.1

package/dist/apps/demo/pages/autoform.js

@@ -0,0 +1,412 @@
+import { t } from '../../../styles/i18n';
+function setFields(root, fieldsJson) {
+    const form = root.querySelector('aithe-autoform');
+    if (form) {
+        form.fields = JSON.stringify(fieldsJson);
+    }
+}
+function bindAutoformSubmit(root) {
+    const form = root.querySelector('aithe-autoform');
+    if (!form)
+        return;
+    form.addEventListener('aithe-submit', (e) => {
+        const { values } = e.detail;
+        let dialog = root.querySelector('aithe-dialog');
+        if (!dialog) {
+            dialog = document.createElement('aithe-dialog');
+            dialog.setAttribute('title', 'Form Data');
+            dialog.setAttribute('confirm-text', 'OK');
+            dialog.addEventListener('aithe-confirm', () => {
+                dialog.visible = false;
+            });
+            dialog.addEventListener('aithe-cancel', () => {
+                dialog.visible = false;
+            });
+            root.appendChild(dialog);
+        }
+        const pre = document.createElement('pre');
+        pre.style.cssText =
+            'margin:0;white-space:pre-wrap;word-break:break-all;font-size:13px;max-height:400px;overflow:auto;';
+        pre.textContent = JSON.stringify(values, null, 2);
+        dialog.visible = false;
+        const slot = dialog.querySelector('slot');
+        const parent = slot?.parentElement;
+        if (parent) {
+            parent.innerHTML = '';
+            parent.appendChild(pre);
+        }
+        else {
+            dialog.innerHTML = '';
+            dialog.appendChild(pre);
+        }
+        requestAnimationFrame(() => {
+            dialog.visible = true;
+        });
+    });
+}
+function setupWithFields(fieldsJson) {
+    return (root) => {
+        setFields(root, fieldsJson);
+        bindAutoformSubmit(root);
+    };
+}
+const basicFields = [
+    {
+        name: 'username',
+        type: 'input',
+        label: 'Username',
+        icon: 'user',
+        required: true,
+        placeholder: 'Enter username',
+        description: 'Your unique username for the platform',
+    },
+    {
+        name: 'email',
+        type: 'input',
+        label: 'Email',
+        icon: 'mail',
+        required: true,
+        placeholder: 'user@example.com',
+        inputType: 'email',
+        pattern: String.raw `^[^\s@]+@[^\s@]+\.[^\s@]+$`,
+        message: 'Please enter a valid email',
+    },
+    {
+        name: 'bio',
+        type: 'textarea',
+        label: 'Bio',
+        placeholder: 'Tell us about yourself...',
+        rows: '4',
+    },
+];
+const selectionFields = [
+    {
+        name: 'role',
+        type: 'select',
+        label: 'Role',
+        required: true,
+        placeholder: 'Select a role',
+        options: [
+            { label: 'Admin', id: 'admin' },
+            { label: 'Editor', id: 'editor' },
+            { label: 'Viewer', id: 'viewer' },
+        ],
+    },
+    {
+        name: 'department',
+        type: 'radio',
+        label: 'Department',
+        options: [
+            { label: 'Engineering', id: 'eng' },
+            { label: 'Design', id: 'design' },
+            { label: 'Marketing', id: 'marketing' },
+        ],
+    },
+    {
+        name: 'skills',
+        type: 'checkbox',
+        label: 'Skills',
+        options: [
+            { label: 'TypeScript', id: 'ts' },
+            { label: 'Python', id: 'py' },
+            { label: 'Go', id: 'go' },
+            { label: 'Rust', id: 'rs' },
+        ],
+    },
+    { name: 'notifications', type: 'switch', label: 'Enable Notifications', dft: 'true' },
+];
+const advancedFields = [
+    { name: 'priority', type: 'slider', label: 'Priority', min: '0', max: '10', step: '1', dft: '5' },
+    { name: 'satisfaction', type: 'rate', label: 'Satisfaction', dft: '3' },
+    { name: 'theme', type: 'color-picker', label: 'Brand Color', dft: '#4d8dff' },
+    { name: 'startDate', type: 'date-picker', label: 'Start Date' },
+    { name: 'deadline', type: 'time-picker', label: 'Deadline' },
+    {
+        name: 'tags',
+        type: 'combobox',
+        label: 'Tags',
+        placeholder: 'Search or create...',
+        options: [
+            { label: 'Bug', id: 'bug' },
+            { label: 'Feature', id: 'feature' },
+            { label: 'Improvement', id: 'improvement' },
+        ],
+    },
+];
+const validationFields = [
+    {
+        name: 'phone',
+        type: 'input',
+        label: 'Phone',
+        required: true,
+        placeholder: '+1 (555) 000-0000',
+        pattern: String.raw `^\+?\d{7,15}$`,
+        message: 'Enter a valid phone number (7-15 digits)',
+        icon: 'phone',
+    },
+    {
+        name: 'website',
+        type: 'input',
+        label: 'Website',
+        placeholder: 'https://example.com',
+        inputType: 'url',
+        pattern: '^https?://.+',
+        message: 'URL must start with http:// or https://',
+    },
+    {
+        name: 'age',
+        type: 'number',
+        label: 'Age',
+        required: true,
+        min: '18',
+        max: '120',
+        placeholder: '18-120',
+    },
+    {
+        name: 'code',
+        type: 'input',
+        label: 'Access Code',
+        required: true,
+        pattern: String.raw `^[A-Z]{3}-\d{4}$`,
+        message: 'Format: ABC-1234',
+        placeholder: 'ABC-1234',
+    },
+];
+const disabledFields = [
+    { name: 'readonlyName', type: 'input', label: 'Name', dft: 'Jane Doe', disabled: true },
+    {
+        name: 'readonlyRole',
+        type: 'select',
+        label: 'Role',
+        dft: 'admin',
+        disabled: true,
+        options: [
+            { label: 'Admin', id: 'admin' },
+            { label: 'User', id: 'user' },
+        ],
+    },
+    { name: 'readonlyActive', type: 'switch', label: 'Active', dft: 'true', disabled: true },
+    {
+        name: 'readonlyNotes',
+        type: 'textarea',
+        label: 'Notes',
+        dft: 'This content is read-only.',
+        disabled: true,
+        rows: '2',
+    },
+];
+const fullFields = [
+    {
+        name: 'fullName',
+        type: 'input',
+        label: 'Full Name',
+        icon: 'user',
+        required: true,
+        placeholder: 'John Doe',
+        tooltip: 'Your legal name',
+    },
+    {
+        name: 'email',
+        type: 'input',
+        label: 'Email',
+        icon: 'mail',
+        required: true,
+        placeholder: 'john@company.com',
+        inputType: 'email',
+        description: 'We will never share your email.',
+    },
+    {
+        name: 'phone',
+        type: 'input',
+        label: 'Phone',
+        icon: 'phone',
+        placeholder: '+1 555-0000',
+        inputType: 'tel',
+    },
+    {
+        name: 'role',
+        type: 'select',
+        label: 'Role',
+        required: true,
+        placeholder: 'Choose...',
+        options: [
+            { label: 'Developer', id: 'dev' },
+            { label: 'Designer', id: 'design' },
+            { label: 'Manager', id: 'mgr' },
+        ],
+    },
+    {
+        name: 'experience',
+        type: 'slider',
+        label: 'Years of Experience',
+        min: '0',
+        max: '20',
+        step: '1',
+        dft: '3',
+    },
+    { name: 'rating', type: 'rate', label: 'Self Rating', dft: '4' },
+    { name: 'theme', type: 'color-picker', label: 'Favorite Color', dft: '#1677ff' },
+    { name: 'startDate', type: 'date-picker', label: 'Start Date' },
+    { name: 'remote', type: 'switch', label: 'Remote Work', dft: 'true' },
+    {
+        name: 'skills',
+        type: 'checkbox',
+        label: 'Skills',
+        options: [
+            { label: 'Frontend', id: 'fe' },
+            { label: 'Backend', id: 'be' },
+            { label: 'DevOps', id: 'ops' },
+            { label: 'Data', id: 'data' },
+        ],
+    },
+    {
+        name: 'team',
+        type: 'radio',
+        label: 'Team',
+        options: [
+            { label: 'Alpha', id: 'alpha' },
+            { label: 'Beta', id: 'beta' },
+            { label: 'Gamma', id: 'gamma' },
+        ],
+    },
+    {
+        name: 'notes',
+        type: 'textarea',
+        label: 'Additional Notes',
+        placeholder: 'Anything else...',
+        rows: '3',
+    },
+];
+const dependencyFields = [
+    {
+        name: 'province',
+        type: 'select',
+        label: 'Province',
+        placeholder: 'Select province',
+        options: [
+            { label: 'Beijing', id: 'BJ' },
+            { label: 'Shanghai', id: 'SH' },
+            { label: 'Guangdong', id: 'GD' },
+        ],
+    },
+    {
+        name: 'city',
+        type: 'select',
+        label: 'City',
+        placeholder: 'Select city',
+        dependencies: ['province'],
+        rules: [
+            { type: 'show', condition: "province !== ''" },
+            {
+                type: 'update',
+                condition: "province === 'BJ'",
+                options: [
+                    { label: 'Haidian', id: 'hd' },
+                    { label: 'Chaoyang', id: 'cy' },
+                ],
+            },
+            {
+                type: 'update',
+                condition: "province === 'SH'",
+                options: [
+                    { label: 'Pudong', id: 'pd' },
+                    { label: "Jing'an", id: 'ja' },
+                ],
+            },
+            {
+                type: 'update',
+                condition: "province === 'GD'",
+                options: [
+                    { label: 'Guangzhou', id: 'gz' },
+                    { label: 'Shenzhen', id: 'sz' },
+                ],
+            },
+            { type: 'clear' },
+        ],
+    },
+    { name: 'hasCar', type: 'switch', label: 'Do you have a car?', dft: 'false' },
+    {
+        name: 'carModel',
+        type: 'input',
+        label: 'Car Model',
+        placeholder: 'Enter car model',
+        dependencies: ['hasCar'],
+        rules: [{ type: 'show', condition: 'hasCar === true' }, { type: 'clear' }],
+    },
+    { name: 'agreement', type: 'switch', label: 'I agree to the terms', dft: 'false' },
+    {
+        name: 'comments',
+        type: 'textarea',
+        label: 'Comments',
+        placeholder: 'Only available after agreement',
+        rows: '3',
+        dependencies: ['agreement'],
+        rules: [{ type: 'disable', condition: 'agreement !== true' }],
+    },
+];
+function formatDisplayCode(fieldsJson) {
+    return JSON.stringify(fieldsJson, null, 2);
+}
+export const autoformPage = {
+    key: 'autoform',
+    title: () => t('demo.autoform.title'),
+    description: () => t('demo.autoform.description'),
+    examples: [
+        {
+            title: () => t('demo.autoform.basic.title'),
+            description: () => t('demo.autoform.basic.description'),
+            code: '<aithe-autoform fields=""></aithe-autoform>',
+            displayCode: formatDisplayCode(basicFields),
+            setup: setupWithFields(basicFields),
+            previewHeight: '420px',
+        },
+        {
+            title: () => t('demo.autoform.selection.title'),
+            description: () => t('demo.autoform.selection.description'),
+            code: '<aithe-autoform fields=""></aithe-autoform>',
+            displayCode: formatDisplayCode(selectionFields),
+            setup: setupWithFields(selectionFields),
+            previewHeight: '480px',
+        },
+        {
+            title: () => t('demo.autoform.advanced.title'),
+            description: () => t('demo.autoform.advanced.description'),
+            code: '<aithe-autoform fields=""></aithe-autoform>',
+            displayCode: formatDisplayCode(advancedFields),
+            setup: setupWithFields(advancedFields),
+            previewHeight: '520px',
+        },
+        {
+            title: () => t('demo.autoform.validation.title'),
+            description: () => t('demo.autoform.validation.description'),
+            code: '<aithe-autoform validate-on-change fields=""></aithe-autoform>',
+            displayCode: formatDisplayCode(validationFields),
+            setup: setupWithFields(validationFields),
+            previewHeight: '440px',
+        },
+        {
+            title: () => t('demo.autoform.disabled.title'),
+            description: () => t('demo.autoform.disabled.description'),
+            code: '<aithe-autoform fields=""></aithe-autoform><aithe-button disabled>Read Only</aithe-button>',
+            displayCode: formatDisplayCode(disabledFields),
+            setup: setupWithFields(disabledFields),
+            previewHeight: '380px',
+        },
+        {
+            title: () => t('demo.autoform.full.title'),
+            description: () => t('demo.autoform.full.description'),
+            code: '<aithe-autoform fields=""></aithe-autoform>',
+            displayCode: formatDisplayCode(fullFields),
+            setup: setupWithFields(fullFields),
+            previewHeight: '780px',
+        },
+        {
+            title: () => t('demo.autoform.dependency.title'),
+            description: () => t('demo.autoform.dependency.description'),
+            code: '<aithe-autoform fields=""></aithe-autoform>',
+            displayCode: formatDisplayCode(dependencyFields),
+            setup: setupWithFields(dependencyFields),
+            previewHeight: '620px',
+        },
+    ],
+};

package/dist/apps/demo/pages/basic.js

@@ -0,0 +1,157 @@
+import { t } from '../../../styles/i18n';
+export const basicPage = {
+    key: 'basic',
+    title: () => t('demo.basic.title'),
+    description: () => t('demo.basic.description'),
+    examples: [
+        {
+            title: () => t('demo.basic.buttons.title'),
+            description: () => t('demo.basic.buttons.description'),
+            code: `<aithe-space size="16" direction="horizontal" wrap>
+  <aithe-button variant="primary" title="Primary action button" icon="check">Primary Action</aithe-button>
+  <aithe-button title="Standard button">Default</aithe-button>
+  <aithe-button type="dashed">Dashed</aithe-button>
+  <aithe-button type="text">Text</aithe-button>
+  <aithe-button type="link">Link</aithe-button>
+  <aithe-button variant="primary" loading>Generating</aithe-button>
+  <aithe-button variant="danger">Delete</aithe-button>
+</aithe-space>
+<div style="height: 16px;"></div>
+<aithe-button-group gap="12">
+  <aithe-button type="default">Cancel</aithe-button>
+  <aithe-button type="primary">Save Workspace</aithe-button>
+</aithe-button-group>`,
+        },
+        {
+            title: () => t('demo.basic.input.title'),
+            description: () => t('demo.basic.input.description'),
+            code: `<div style="display:grid;gap:16px;max-width:720px;">
+  <aithe-input placeholder="Search agents, prompts or datasets" clearable value="Aithe UI">
+    <span slot="prefix">⌕</span>
+    <span slot="suffix">⌘K</span>
+  </aithe-input>
+  <aithe-input type="email" placeholder="owner@company.com" status="success"></aithe-input>
+  <aithe-textarea rows="4" placeholder="Describe the system message..."></aithe-textarea>
+</div>`,
+        },
+        {
+            title: () => t('demo.basic.card.title'),
+            description: () => t('demo.basic.card.description'),
+            code: `<aithe-card style="display:block;max-width:720px;" shadow="3" title="Model Output Summary" icon="sparkles">
+  <div style="display:grid;gap:12px;">
+    <p style="margin:0;color:var(--aithe-color-text-muted);">
+      This card uses the design token system and supports fluid content width.
+    </p>
+    <aithe-badge value="128">
+      <aithe-button type="default">Queued Jobs</aithe-button>
+    </aithe-badge>
+  </div>
+  <span slot="footer">Updated just now</span>
+</aithe-card>`,
+        },
+        {
+            title: () => t('demo.basic.cardDivider.title'),
+            description: () => t('demo.basic.cardDivider.description'),
+            code: `<aithe-space direction="vertical" size="16">
+  <aithe-card style="display:block;max-width:720px;" shadow="2" title="With Dividers" icon="file-text">
+    <p style="margin:0;">Default divider="border" — lines between sections.</p>
+    <span slot="footer">Footer with divider above</span>
+  </aithe-card>
+  <aithe-card style="display:block;max-width:720px;" shadow="2" title="No Dividers" icon="file-text" divider="none">
+    <p style="margin:0;">divider="none" — no lines between sections.</p>
+    <span slot="footer">Footer without divider</span>
+  </aithe-card>
+</aithe-space>`,
+        },
+        {
+            title: () => t('demo.basic.tag.title'),
+            description: () => t('demo.basic.tag.description'),
+            code: `<aithe-space size="12" direction="horizontal" wrap>
+  <aithe-tag variant="primary">Inference</aithe-tag>
+  <aithe-tag variant="success">Stable</aithe-tag>
+  <aithe-tag variant="warning" closable>Reviewing</aithe-tag>
+  <aithe-tag variant="danger">Critical</aithe-tag>
+  <aithe-chip selected>Realtime</aithe-chip>
+  <aithe-chip closable>Vision</aithe-chip>
+</aithe-space>`,
+        },
+        {
+            title: () => t('demo.basic.avatar.title'),
+            description: () => t('demo.basic.avatar.description'),
+            code: `<div style="display:grid;gap:20px;max-width:720px;">
+  <aithe-space size="12" direction="horizontal">
+    <aithe-avatar text="AI"></aithe-avatar>
+    <aithe-avatar shape="square" text="ML"></aithe-avatar>
+    <aithe-avatar size="lg" text="SYS"></aithe-avatar>
+  </aithe-space>
+  <aithe-divider>Icon Format — Built-in / URL / Auto</aithe-divider>
+  <aithe-space size="12" direction="horizontal">
+    <aithe-avatar text="(class)user" shape="circle" size="lg"></aithe-avatar>
+    <aithe-avatar text="(class)sparkles" shape="square" size="lg"></aithe-avatar>
+    <aithe-avatar text="(auto)Admin" shape="circle" size="lg"></aithe-avatar>
+    <aithe-avatar text="(url)https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/bot.svg|Bot" shape="circle" size="lg"></aithe-avatar>
+  </aithe-space>
+  <aithe-divider>System Modules</aithe-divider>
+  <div style="display:flex;gap:16px;align-items:center;">
+    <span>Retrieval</span>
+    <aithe-divider direction="vertical"></aithe-divider>
+    <span>Reasoning</span>
+    <aithe-divider direction="vertical"></aithe-divider>
+    <span>Delivery</span>
+  </div>
+</div>`,
+        },
+        {
+            title: () => t('demo.basic.icon.title'),
+            description: () => t('demo.basic.icon.description'),
+            code: `<div style="display:grid;gap:20px;">
+  <aithe-divider>Class — Size Presets (xs ~ 6xl)</aithe-divider>
+  <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
+    <aithe-icon name="sparkles" size="xs"></aithe-icon>
+    <aithe-icon name="sparkles" size="sm"></aithe-icon>
+    <aithe-icon name="sparkles" size="md"></aithe-icon>
+    <aithe-icon name="sparkles" size="lg"></aithe-icon>
+    <aithe-icon name="sparkles" size="xl"></aithe-icon>
+    <aithe-icon name="sparkles" size="2xl"></aithe-icon>
+    <aithe-icon name="sparkles" size="3xl"></aithe-icon>
+    <aithe-icon name="sparkles" size="4xl"></aithe-icon>
+    <aithe-icon name="sparkles" size="5xl"></aithe-icon>
+    <aithe-icon name="sparkles" size="6xl"></aithe-icon>
+  </div>
+
+  <aithe-divider>Class — Color & Glyphs</aithe-divider>
+  <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
+    <aithe-icon name="check" size="lg" color="var(--aithe-success-6)"></aithe-icon>
+    <aithe-icon name="warning" size="lg" color="var(--aithe-warning-6)"></aithe-icon>
+    <aithe-icon name="error" size="lg" color="var(--aithe-danger-6)"></aithe-icon>
+    <aithe-icon name="info" size="lg" color="var(--aithe-info-6)"></aithe-icon>
+    <aithe-icon name="heart" size="lg" color="var(--aithe-danger-5)"></aithe-icon>
+    <aithe-icon name="star" size="lg" color="var(--aithe-warning-5)"></aithe-icon>
+    <aithe-icon name="search" size="lg"></aithe-icon>
+    <aithe-icon name="settings" size="lg"></aithe-icon>
+    <aithe-icon name="user" size="lg"></aithe-icon>
+    <aithe-icon name="bell" size="lg"></aithe-icon>
+  </div>
+
+  <aithe-divider>Auto — First Character</aithe-divider>
+  <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
+    <aithe-icon name="(auto)User Name" size="lg"></aithe-icon>
+    <aithe-icon name="(auto)AI" size="xl"></aithe-icon>
+    <aithe-icon name="(auto)System" size="2xl"></aithe-icon>
+    <aithe-icon name="(auto)Database" size="3xl"></aithe-icon>
+  </div>
+
+  <aithe-divider>URL — Remote Image with Alt Fallback</aithe-divider>
+  <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
+    <aithe-icon name="(url)https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/check.svg|Check" size="lg"></aithe-icon>
+    <aithe-icon name="(url)https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/x.svg|X" size="xl"></aithe-icon>
+    <aithe-icon name="(url)https://invalid.example.com/missing.svg|?" size="lg"></aithe-icon>
+  </div>
+
+  <aithe-divider>Empty State</aithe-divider>
+  <aithe-empty text="No generated artifacts yet. Start by creating a workflow."></aithe-empty>
+</div>`,
+            previewHeight: '520px',
+        },
+    ],
+};