@xlabs-store/core 0.0.1

package/dist/collection/components/x-form/x-form.js

@@ -0,0 +1,355 @@
+import { Host, h } from "@stencil/core";
+import { FormGroup } from "../../utils/form/core/form-group";
+export class XForm {
+    /**
+     * Form layout
+     * @example
+     * <x-form layout="vertical"></x-form>
+     */
+    layout = 'horizontal';
+    /**
+     * The name of the form
+     * @example
+     * <x-form name="profile"></x-form>
+     */
+    name;
+    /**
+     * Whether to show colon after label
+     * @example
+     * <x-form colon={false}></x-form>
+     */
+    colon = true;
+    /**
+     * Form size
+     * @example
+     * <x-form size="small"></x-form>
+     */
+    size = 'middle';
+    /**
+     * Form instance
+     */
+    form;
+    /**
+     * Initial values of form
+     */
+    initialValues;
+    /**
+     * Hide required mark of all form items
+     */
+    hideRequiredMark = false;
+    /**
+     * Trigger after submitting the form and verifying data successfully
+     */
+    xFinish;
+    /**
+     * Trigger after submitting the form and verifying data failed
+     */
+    xFinishFailed;
+    /**
+     * Submit the form
+     */
+    async submit() {
+        if (this.form) {
+            this.form.markAllAsTouched();
+            if (this.form.valid) {
+                this.xFinish.emit(this.form.value);
+            }
+            else {
+                this.xFinishFailed.emit({
+                    values: this.form.value,
+                    errorFields: this.getErrorFields(),
+                    outOfDate: false,
+                });
+            }
+        }
+    }
+    getErrorFields() {
+        if (!this.form)
+            return [];
+        const errorFields = [];
+        const controls = this.form.controls;
+        for (const name in controls) {
+            if (controls[name].invalid) {
+                errorFields.push({
+                    name: [name],
+                    errors: Object.values(controls[name].errors || {}),
+                });
+            }
+        }
+        return errorFields;
+    }
+    handleSubmit = (e) => {
+        e.preventDefault();
+        this.submit();
+    };
+    handleInitialValuesChange(newValue) {
+        if (this.form && newValue) {
+            this.form.patchValue(newValue, { emitEvent: true });
+        }
+    }
+    componentWillLoad() {
+        if (!this.form) {
+            this.form = new FormGroup({});
+        }
+        this.handleInitialValuesChange(this.initialValues);
+    }
+    render() {
+        return (h(Host, { key: 'ebb7831eae382b4924a330a515ce6fbcd5740a5e', class: {
+                'x-form': true,
+                [`x-form-${this.layout}`]: true,
+                [`x-form-${this.size}`]: true,
+                'x-form-hide-required-mark': this.hideRequiredMark,
+            } }, h("form", { key: 'fdce9f05232a5f9323bd10264d078cc6c6f25bcf', name: this.name, onSubmit: this.handleSubmit }, h("slot", { key: '12fbc506ce06538757fa6e51846108ddb886235a' }))));
+    }
+    static get is() { return "x-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical' | 'inline'",
+                    "resolved": "\"horizontal\" | \"inline\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form layout=\"vertical\"></x-form>"
+                        }],
+                    "text": "Form layout"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'horizontal'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form name=\"profile\"></x-form>"
+                        }],
+                    "text": "The name of the form"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "colon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form colon={false}></x-form>"
+                        }],
+                    "text": "Whether to show colon after label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "colon",
+                "defaultValue": "true"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'middle' | 'small'",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-form size=\"small\"></x-form>"
+                        }],
+                    "text": "Form size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "form": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormGroup",
+                    "resolved": "FormGroup<FormGroupControls>",
+                    "references": {
+                        "FormGroup": {
+                            "location": "import",
+                            "path": "../../utils/form/core/form-group",
+                            "id": "src/utils/form/core/form-group.ts::FormGroup",
+                            "referenceLocation": "FormGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Form instance"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "initialValues": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial values of form"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "hideRequiredMark": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide required mark of all form items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-required-mark",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xFinish",
+                "name": "xFinish",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger after submitting the form and verifying data successfully"
+                },
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }, {
+                "method": "xFinishFailed",
+                "name": "xFinishFailed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger after submitting the form and verifying data failed"
+                },
+                "complexType": {
+                    "original": "{\r\n    values: Record<string, unknown>;\r\n    errorFields: Array<{ name: string[]; errors: string[] }>;\r\n    outOfDate: boolean;\r\n  }",
+                    "resolved": "{ values: Record<string, unknown>; errorFields: { name: string[]; errors: string[]; }[]; outOfDate: boolean; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "submit": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Submit the form",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "initialValues",
+                "methodName": "handleInitialValuesChange"
+            }];
+    }
+}

package/dist/collection/components/x-form-builder/services/apis/api-client.js

@@ -0,0 +1,240 @@
+export class ApiClient {
+    config;
+    abortController = null;
+    constructor(config) {
+        this.config = config;
+    }
+    /**
+     * Execute API request với retry logic
+     */
+    async execute() {
+        let lastError = null;
+        const maxAttempts = (this.config.retries ?? 0) + 1;
+        for (let attempt = 0; attempt < maxAttempts; attempt++) {
+            try {
+                const response = await this.makeRequest();
+                if (response.ok) {
+                    const data = await this.parseResponse(response);
+                    this.config.onSuccess?.(response);
+                    return data;
+                }
+                throw new Error(`HTTP Error: ${response.status} ${response.statusText}`);
+            }
+            catch (error) {
+                lastError = error;
+                if (error?.name === 'AbortError') {
+                    this.config.onTimeout?.(error);
+                }
+                else {
+                    this.config.onError?.(error);
+                }
+                if (attempt < maxAttempts - 1) {
+                    await this.delay(2 ** attempt * 1000);
+                }
+            }
+        }
+        throw lastError ?? new Error('Request failed after all retries');
+    }
+    /**
+     * Thực hiện request
+     */
+    async makeRequest() {
+        this.abortController = new AbortController();
+        const url = this.buildUrl();
+        const options = this.buildRequestOptions();
+        const timeoutId = setTimeout(() => this.abortController?.abort(), this.config.timeout ?? 10000);
+        try {
+            const response = await fetch(url, { ...options, signal: this.abortController.signal });
+            clearTimeout(timeoutId);
+            return response;
+        }
+        catch (error) {
+            clearTimeout(timeoutId);
+            throw error;
+        }
+    }
+    /**
+     * Build URL với query parameters
+     */
+    buildUrl() {
+        const { url, queryParams } = this.config;
+        if (!queryParams?.length)
+            return url;
+        const urlObj = new URL(url);
+        queryParams.forEach((p) => {
+            if (p.enabled)
+                urlObj.searchParams.append(p.key, p.value);
+        });
+        return urlObj.toString();
+    }
+    /**
+     * Build request options
+     */
+    buildRequestOptions() {
+        const { method } = this.config;
+        const options = {
+            method,
+            headers: this.buildHeaders(),
+            ...(method && !['GET', 'HEAD'].includes(method) ? { body: this.buildBody() } : {})
+        };
+        return options;
+    }
+    /**
+     * Build headers
+     */
+    buildHeaders() {
+        const headers = {};
+        this.config.headers?.forEach((h) => {
+            if (h.enabled)
+                headers[h.key] = h.value;
+        });
+        this.addAuthenticationHeaders(headers);
+        if (this.config.bodyType !== 'none' && !headers['Content-Type']) {
+            headers['Content-Type'] = this.getContentType();
+        }
+        return headers;
+    }
+    /**
+     * Thêm authentication headers
+     */
+    addAuthenticationHeaders(headers) {
+        const { authentication } = this.config;
+        if (!authentication || authentication.type === 'none')
+            return;
+        if (authentication.type === 'bearer' && authentication.token) {
+            headers['Authorization'] = `Bearer ${authentication.token}`;
+        }
+        else if (authentication.type === 'basic' && authentication.username && authentication.password) {
+            headers['Authorization'] = `Basic ${btoa(`${authentication.username}:${authentication.password}`)}`;
+        }
+        else if (authentication.type === 'api-key' && authentication.apiKey && authentication.apiKeyHeader) {
+            headers[authentication.apiKeyHeader] = authentication.apiKey;
+        }
+    }
+    /**
+     * Get Content-Type based on bodyType
+     */
+    getContentType() {
+        switch (this.config.bodyType) {
+            case 'form-data': return 'multipart/form-data';
+            case 'x-www-form-urlencoded': return 'application/x-www-form-urlencoded';
+            case 'raw': return 'application/json';
+            default: return 'application/json';
+        }
+    }
+    /**
+     * Build request body
+     */
+    buildBody() {
+        const { bodyType, bodyContent } = this.config;
+        switch (bodyType) {
+            case 'none': return null;
+            case 'raw': return bodyContent ?? '';
+            case 'form-data': return this.buildFormData();
+            case 'x-www-form-urlencoded': return this.buildUrlEncoded();
+            default: return null;
+        }
+    }
+    /**
+     * Build FormData
+     */
+    buildFormData() {
+        const formData = new FormData();
+        this.config.bodyParams?.forEach((param) => {
+            if (param.enabled) {
+                if (param.type === 'file') {
+                    // Xử lý file upload - giá trị phải là File object
+                }
+                else {
+                    formData.append(param.key, param.value);
+                }
+            }
+        });
+        return formData;
+    }
+    /**
+     * Build URL encoded body
+     */
+    buildUrlEncoded() {
+        const params = new URLSearchParams();
+        this.config.bodyParams?.forEach((param) => {
+            if (param.enabled)
+                params.append(param.key, param.value);
+        });
+        return params.toString();
+    }
+    /**
+     * Parse response based on content type
+     */
+    async parseResponse(response) {
+        const contentType = response.headers.get('content-type') ?? '';
+        if (contentType.includes('application/json'))
+            return response.json();
+        if (contentType.includes('text/'))
+            return response.text();
+        if (contentType.includes('application/octet-stream'))
+            return response.blob();
+        return response.text();
+    }
+    /**
+     * Delay helper for retry
+     */
+    delay(ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+    /**
+     * Cancel request
+     */
+    cancel() {
+        this.abortController?.abort();
+    }
+    /**
+     * Update configuration
+     */
+    updateConfig(config) {
+        this.config = { ...this.config, ...config };
+    }
+}
+// Factory function để tạo ApiClient
+export function createApiClient(config) {
+    return new ApiClient(config);
+}
+// Example usage:
+/*
+const config: ApiConfiguration = {
+  name: 'Get Users',
+  url: 'https://api.example.com/users',
+  method: 'GET',
+  headers: [
+    { key: 'Accept', value: 'application/json', enabled: true }
+  ],
+  queryParams: [],
+  bodyType: 'none',
+  timeout: 10000,
+  retries: 2,
+  authentication: {
+    type: 'bearer',
+    token: 'your-token-here'
+  },
+  responses: [],
+  onSuccess: (response) => {
+    console.log('Request successful:', response.status);
+  },
+  onError: (error) => {
+    console.error('Request failed:', error);
+  },
+  onMapping: (response) => {
+    // Transform response data
+    return response;
+  }
+};
+
+const client = createApiClient(config);
+
+try {
+  const data = await client.execute();
+  console.log('Response data:', data);
+} catch (error) {
+  console.error('Error:', error);
+}
+*/

package/dist/collection/components/x-form-builder/services/constants/index.js

@@ -0,0 +1,33 @@
+export const FORM_INPUT_TYPE = [
+    'text',
+    'password',
+    'email',
+    'number',
+    'phone',
+    'url',
+    'date',
+    'datetime',
+    'time',
+    'color',
+    'checkbox',
+    'radio',
+    'file',
+    'range',
+    'textarea',
+    'select',
+    'switch',
+    'slider',
+    'rate',
+    'tags',
+    'daterange',
+    'tree-select',
+    'transfer',
+    'cascader',
+    'auto-complete',
+    'editor',
+    'location',
+    'input',
+    'captcha',
+    'address',
+    'table',
+];