@aithe/aithe-ui 26.2.3 → 26.3.2

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

@@ -0,0 +1,310 @@
+import { t } from '../../../styles/i18n';
+function setupAutoView(fieldsJson, data) {
+    return (root) => {
+        const view = root.querySelector('aithe-autoview');
+        if (view) {
+            view.fields = JSON.stringify(fieldsJson);
+            view.data = data;
+        }
+    };
+}
+function formatDisplayCode(fieldsJson, data) {
+    return `// fields\n${JSON.stringify(fieldsJson, null, 2)}\n\n// data\n${JSON.stringify(data, null, 2)}`;
+}
+const basicFields = [
+    { name: 'username', type: 'input', label: 'Username' },
+    { name: 'email', type: 'input', label: 'Email', inputType: 'email' },
+    { name: 'bio', type: 'textarea', label: 'Bio', span: 2 },
+];
+const basicData = {
+    username: 'John Doe',
+    email: 'john@example.com',
+    bio: 'Frontend engineer who loves building design systems and Web Components.',
+};
+const selectionFields = [
+    {
+        name: 'role',
+        type: 'select',
+        label: '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: 'Notifications' },
+];
+const selectionData = {
+    role: 'editor',
+    department: 'design',
+    skills: ['ts', 'go'],
+    notifications: true,
+};
+const advancedFields = [
+    { name: 'priority', type: 'slider', label: 'Priority' },
+    { name: 'satisfaction', type: 'rate', label: 'Satisfaction' },
+    { name: 'theme', type: 'color-picker', label: 'Brand Color' },
+    { name: 'startDate', type: 'date-picker', label: 'Start Date', filter: 'date yyyy-MM-dd' },
+    { name: 'deadline', type: 'time-picker', label: 'Deadline' },
+    {
+        name: 'tags',
+        type: 'combobox',
+        label: 'Tags',
+        options: [
+            { label: 'Bug', id: 'bug' },
+            { label: 'Feature', id: 'feature' },
+            { label: 'Improvement', id: 'improvement' },
+        ],
+    },
+];
+const advancedData = {
+    priority: '7',
+    satisfaction: '4',
+    theme: '#4d8dff',
+    startDate: '2026-08-31',
+    deadline: '18:30',
+    tags: 'feature',
+};
+const dependencyFields = [
+    {
+        name: 'province',
+        type: 'select',
+        label: 'Province',
+        options: [
+            { label: 'Beijing', id: 'BJ' },
+            { label: 'Shanghai', id: 'SH' },
+            { label: 'Guangdong', id: 'GD' },
+        ],
+    },
+    {
+        name: 'city',
+        type: 'select',
+        label: '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' },
+                ],
+            },
+        ],
+    },
+    { name: 'hasCar', type: 'switch', label: 'Has a car?' },
+    {
+        name: 'carModel',
+        type: 'input',
+        label: 'Car Model',
+        dependencies: ['hasCar'],
+        rules: [{ type: 'show', condition: 'hasCar === true' }],
+    },
+];
+const dependencyData = {
+    province: 'BJ',
+    city: 'hd',
+    hasCar: true,
+    carModel: 'Tesla Model 3',
+};
+const fullFields = [
+    { name: 'fullName', type: 'input', label: 'Full Name' },
+    { name: 'email', type: 'input', label: 'Email', inputType: 'email' },
+    { name: 'phone', type: 'input', label: 'Phone', inputType: 'tel' },
+    {
+        name: 'role',
+        type: 'select',
+        label: 'Role',
+        options: [
+            { label: 'Developer', id: 'dev' },
+            { label: 'Designer', id: 'design' },
+            { label: 'Manager', id: 'mgr' },
+        ],
+    },
+    { name: 'experience', type: 'slider', label: 'Years of Experience' },
+    { name: 'rating', type: 'rate', label: 'Self Rating' },
+    { name: 'theme', type: 'color-picker', label: 'Favorite Color' },
+    { name: 'startDate', type: 'date-picker', label: 'Start Date', filter: 'date yyyy-MM-dd' },
+    { name: 'remote', type: 'switch', label: 'Remote Work' },
+    {
+        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', span: 2 },
+];
+const fullData = {
+    fullName: 'Jane Smith',
+    email: 'jane@company.com',
+    phone: '+1 555-0123',
+    role: 'dev',
+    experience: '5',
+    rating: '4',
+    theme: '#1677ff',
+    startDate: '2026-03-15',
+    remote: true,
+    skills: ['fe', 'be'],
+    team: 'beta',
+    notes: 'Passionate about building accessible and performant web applications.',
+};
+const emptyFields = [
+    { name: 'username', type: 'input', label: 'Username' },
+    { name: 'role', type: 'select', label: 'Role', options: [{ label: 'Admin', id: 'admin' }] },
+    { name: 'active', type: 'switch', label: 'Active' },
+    { name: 'createdAt', type: 'date-picker', label: 'Created At', filter: 'date yyyy-MM-dd' },
+];
+const emptyData = {
+    username: '',
+    role: '',
+    active: false,
+    createdAt: '',
+};
+const borderStyleFields = [
+    { name: 'name', type: 'input', label: 'Name' },
+    { name: 'department', type: 'input', label: 'Department' },
+    { name: 'position', type: 'input', label: 'Position' },
+    { name: 'email', type: 'input', label: 'Email', inputType: 'email' },
+    { name: 'phone', type: 'input', label: 'Phone', inputType: 'tel' },
+    { name: 'location', type: 'input', label: 'Location' },
+];
+const borderStyleData = {
+    name: 'Jane Smith',
+    department: 'Engineering',
+    position: 'Senior Frontend Engineer',
+    email: 'jane@company.com',
+    phone: '+1 555-0123',
+    location: 'San Francisco, CA',
+};
+export const autoViewPage = {
+    key: 'autoview',
+    title: () => t('demo.autoView.title'),
+    description: () => t('demo.autoView.description'),
+    examples: [
+        {
+            title: () => t('demo.autoView.basic.title'),
+            description: () => t('demo.autoView.basic.description'),
+            code: '<aithe-autoview column="2" border></aithe-autoview>',
+            displayCode: formatDisplayCode(basicFields, basicData),
+            setup: setupAutoView(basicFields, basicData),
+            previewHeight: '240px',
+        },
+        {
+            title: () => t('demo.autoView.selection.title'),
+            description: () => t('demo.autoView.selection.description'),
+            code: '<aithe-autoview column="2" border></aithe-autoview>',
+            displayCode: formatDisplayCode(selectionFields, selectionData),
+            setup: setupAutoView(selectionFields, selectionData),
+            previewHeight: '280px',
+        },
+        {
+            title: () => t('demo.autoView.advanced.title'),
+            description: () => t('demo.autoView.advanced.description'),
+            code: '<aithe-autoview column="2" border></aithe-autoview>',
+            displayCode: formatDisplayCode(advancedFields, advancedData),
+            setup: setupAutoView(advancedFields, advancedData),
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.autoView.dependency.title'),
+            description: () => t('demo.autoView.dependency.description'),
+            code: '<aithe-autoview column="2" border></aithe-autoview>',
+            displayCode: formatDisplayCode(dependencyFields, dependencyData),
+            setup: setupAutoView(dependencyFields, dependencyData),
+            previewHeight: '280px',
+        },
+        {
+            title: () => t('demo.autoView.full.title'),
+            description: () => t('demo.autoView.full.description'),
+            code: '<aithe-autoview column="2" border title="Employee Profile"></aithe-autoview>',
+            displayCode: formatDisplayCode(fullFields, fullData),
+            setup: setupAutoView(fullFields, fullData),
+            previewHeight: '520px',
+        },
+        {
+            title: () => t('demo.autoView.empty.title'),
+            description: () => t('demo.autoView.empty.description'),
+            code: '<aithe-autoview column="2" border></aithe-autoview>',
+            displayCode: formatDisplayCode(emptyFields, emptyData),
+            setup: setupAutoView(emptyFields, emptyData),
+            previewHeight: '200px',
+        },
+        {
+            title: () => t('demo.autoView.borderNone.title'),
+            description: () => t('demo.autoView.borderNone.description'),
+            code: '<aithe-autoview column="2" border-style="none" label-background="none"></aithe-autoview>',
+            displayCode: formatDisplayCode(borderStyleFields, borderStyleData),
+            setup: setupAutoView(borderStyleFields, borderStyleData),
+            previewHeight: '240px',
+        },
+        {
+            title: () => t('demo.autoView.borderFull.title'),
+            description: () => t('demo.autoView.borderFull.description'),
+            code: '<aithe-autoview column="2" border-style="full" label-background="filled"></aithe-autoview>',
+            displayCode: formatDisplayCode(borderStyleFields, borderStyleData),
+            setup: setupAutoView(borderStyleFields, borderStyleData),
+            previewHeight: '240px',
+        },
+        {
+            title: () => t('demo.autoView.borderRow.title'),
+            description: () => t('demo.autoView.borderRow.description'),
+            code: '<aithe-autoview column="2" border-style="row" label-background="none"></aithe-autoview>',
+            displayCode: formatDisplayCode(borderStyleFields, borderStyleData),
+            setup: setupAutoView(borderStyleFields, borderStyleData),
+            previewHeight: '240px',
+        },
+    ],
+};

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',
+        },
+    ],
+};