@aithe/aithe-ui 26.2.3 → 26.3.2

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

@@ -0,0 +1,422 @@
+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: 'password',
+        type: 'input',
+        label: 'Password',
+        icon: 'lock',
+        required: true,
+        placeholder: 'Enter your password',
+        inputType: 'password',
+        message: 'Password is required',
+    },
+    {
+        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/autoview.d.ts

@@ -0,0 +1,3 @@
+import type { DemoPage } from '../editor';
+export declare const autoViewPage: DemoPage;
+//# sourceMappingURL=autoview.d.ts.map

package/dist/apps/demo/pages/autoview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoview.d.ts","sourceRoot":"","sources":["../../../../src/apps/demo/pages/autoview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAiQ1C,eAAO,MAAM,YAAY,EAAE,QA8E1B,CAAC"}