@xlabs-store/core 0.0.1 → 0.0.3

package/dist/collection/components/x-input-number/x-input-number.css

@@ -95,6 +95,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -137,8 +138,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-input-number/x-input-number.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { getIcon } from "../../utils/config";
 import { clampValue, addStep, formatWithPrecision } from "./types";
 /**
@@ -156,6 +156,10 @@ export class XInputNumber {
      * <x-input-number suffix="kg"></x-input-number>
      */
     suffix;
+    /**
+     * Currency code for formatting (e.g. 'VND', 'USD')
+     */
+    currency;
     /**
      * Current value
      * @example
@@ -321,11 +325,33 @@ export class XInputNumber {
                     input: this.inputValue,
                 });
             }
+            else if (this.currency) {
+                const currencyUpper = this.currency.toUpperCase();
+                const numValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value;
+                const hasAddon = !!this.addonAfter || !!this.addonBefore;
+                if (currencyUpper === 'VND') {
+                    const prec = this.precision ?? 0;
+                    const parts = numValue.toFixed(prec).split('.');
+                    const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+                    const decimalPart = parts[1] ? `,${parts[1]}` : '';
+                    displayValue = hasAddon ? `${integerPart}${decimalPart}` : `${integerPart}${decimalPart} ₫`;
+                }
+                else if (currencyUpper === 'USD' || currencyUpper === 'US') {
+                    const prec = this.precision ?? 2;
+                    const parts = numValue.toFixed(prec).split('.');
+                    const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+                    const decimalPart = parts[1] ? `.${parts[1]}` : '';
+                    displayValue = hasAddon ? `${integerPart}${decimalPart}` : `$${integerPart}${decimalPart}`;
+                }
+                else {
+                    displayValue = formatWithPrecision(this.value, this.precision);
+                }
+            }
             else {
                 displayValue = formatWithPrecision(this.value, this.precision);
             }
             // Apply custom decimal separator
-            if (this.decimalSeparator && this.decimalSeparator !== '.') {
+            if (this.decimalSeparator && this.decimalSeparator !== '.' && !this.currency) {
                 displayValue = displayValue.replace('.', this.decimalSeparator);
             }
         }
@@ -353,11 +379,23 @@ export class XInputNumber {
         if (this.parser) {
             return this.parser(value);
         }
-        // Replace custom decimal separator
-        if (this.decimalSeparator && this.decimalSeparator !== '.') {
+        if (this.currency) {
+            const currencyUpper = this.currency.toUpperCase();
+            if (currencyUpper === 'VND') {
+                value = value.replace(/[₫\s]/g, '');
+                value = value.replace(/\./g, '');
+                value = value.replace(/,/g, '.');
+            }
+            else if (currencyUpper === 'USD' || currencyUpper === 'US') {
+                value = value.replace(/[\$\s]/g, '');
+                value = value.replace(/,/g, '');
+            }
+        }
+        else if (this.decimalSeparator && this.decimalSeparator !== '.') {
+            // Replace custom decimal separator
             value = value.replace(new RegExp(`\\${this.decimalSeparator}`, 'g'), '.');
         }
-        // Remove non-numeric characters
+        // Remove non-numeric characters except minus and dot
         value = value.replace(/[^\d.-]/g, '');
         const numValue = parseFloat(value);
         return isNaN(numValue) ? null : numValue;
@@ -375,16 +413,54 @@ export class XInputNumber {
      * @param e - Input event.
      * @returns void
      */
+    formatOnType(input) {
+        if (!this.currency) {
+            return input;
+        }
+        if (!input || input === '' || input === '-') {
+            return input;
+        }
+        // Determine separators based on currency
+        const isVND = this.currency.toUpperCase() === 'VND';
+        const thousandSeparator = isVND ? '.' : ',';
+        const decimalSeparator = isVND ? ',' : '.';
+        // Split by decimal separator
+        const parts = input.split(decimalSeparator);
+        let integerPart = parts[0];
+        const decimalPart = parts.length > 1 ? decimalSeparator + parts.slice(1).join('') : '';
+        // Remove any non-digits from integer part except leading minus
+        const isNegative = integerPart.startsWith('-');
+        let digits = integerPart.replace(/[^\d]/g, '');
+        // Format integer part with thousand separators
+        if (digits) {
+            digits = digits.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
+        }
+        return (isNegative ? '-' : '') + digits + decimalPart;
+    }
     handleInput = (e) => {
         const target = e.target;
-        this.inputValue = target.value;
+        const selectionStart = target.selectionStart;
+        const oldLength = target.value.length;
         this.isTyping = true;
-        const parsedValue = this.parseValue(target.value);
+        // Format the typing value immediately
+        const formatted = this.formatOnType(target.value);
+        this.inputValue = formatted;
+        const parsedValue = this.parseValue(formatted);
         if (parsedValue !== null) {
-            // Don't clamp while typing, just update value
             this.value = this.stringMode ? String(parsedValue) : parsedValue;
             this.xChange.emit({ value: this.value });
         }
+        else {
+            this.value = null;
+            this.xChange.emit({ value: null });
+        }
+        // Sync to DOM immediately and restore cursor position
+        target.value = this.inputValue;
+        if (selectionStart !== null) {
+            const lengthDiff = this.inputValue.length - oldLength;
+            const newPos = Math.max(0, selectionStart + lengthDiff);
+            target.setSelectionRange(newPos, newPos);
+        }
     };
     /**
      * Handle input focus.
@@ -592,21 +668,21 @@ export class XInputNumber {
             'x-input-number-has-affix': hasAffix,
             [this.classNames?.root ?? '']: !!this.classNames?.root,
         };
-        return (h(Host, { key: '121ff396550785581268cf58bbba452398aa194e', class: {
+        return (h(Host, { key: 'f62b0f800e2c92c90b982d9aee5a82ce12518978', class: {
                 'x-input-number': true,
                 [`x-input-number-${this.size}`]: true,
-            } }, this.addonBefore && (h("span", { key: '65f9ebae015943f7748f625888a9257d3424d7de', class: "x-input-number-group-addon x-input-number-group-addon-before" }, h("slot", { key: 'eeaa2f4a4c22a04597109330901320ce5ca4d17a', name: "addonBefore" }, this.addonBefore))), h("div", { key: '4f13fea7319c6ea1520860a3eb62e758ed5f7e86', class: wrapperClasses, style: this.styles?.root }, this.prefixIcon && (h("span", { key: '5aef84bfd3445b9eba412a03c5bf3d6f4839849d', class: { 'x-input-number-prefix': true, [this.classNames?.prefix ?? '']: !!this.classNames?.prefix } }, h("slot", { key: 'e4d077e06a16fd89ea7e4d98767840b408123669', name: "prefix" }, this.prefixIcon))), h("div", { key: '95e44d6fb300e9a94c5bcbb64602523ee87bf26d', class: "x-input-number-input-wrap" }, h("input", { key: '9c416504c66b8ac7faa07dc2f83eca2867bb8d42', ref: (el) => (this.inputRef = el), class: {
+            } }, this.addonBefore && (h("span", { key: 'f4ef4cb2441de578abc3da009911174fa901fa0a', class: "x-input-number-group-addon x-input-number-group-addon-before" }, h("slot", { key: '18b9fedb623ac9dcac1f11f19cc73fcd9f237027', name: "addonBefore" }, this.addonBefore))), h("div", { key: 'c9e85432831504c8a53e2aa1fae3a66fa6e5fd04', class: wrapperClasses, style: this.styles?.root }, this.prefixIcon && (h("span", { key: '4094c458f1eb61fe34165d5f548d929d51e74f63', class: { 'x-input-number-prefix': true, [this.classNames?.prefix ?? '']: !!this.classNames?.prefix } }, h("slot", { key: '683e59d41f8ac3b2ce181031e23d0eac67a67c16', name: "prefix" }, this.prefixIcon))), h("div", { key: '58d0017dc659e57fda8bc10df19392a73e1126d2', class: "x-input-number-input-wrap" }, h("input", { key: 'e59fc58730fa510473e9adbdae833c8d45b96707', ref: el => (this.inputRef = el), class: {
                 'x-input-number-input': true,
                 [this.classNames?.input ?? '']: !!this.classNames?.input,
-            }, style: this.styles?.input, type: "text", inputMode: "decimal", autocomplete: "off", role: "spinbutton", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, value: this.inputValue, disabled: this.disabled, readOnly: this.readOnly, placeholder: this.placeholder, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel })), this.suffix && (h("span", { key: 'f5d9448d1dd2f00cc7c874230e7aa44ee08d9116', class: { 'x-input-number-suffix': true, [this.classNames?.suffix ?? '']: !!this.classNames?.suffix } }, h("slot", { key: 'f58380ae67766132439c8146d823e2a86b6bf32b', name: "suffix" }, this.suffix))), this.controls && (h("div", { key: '72e5024bf232d212300639b5b2030093b2149531', class: { 'x-input-number-handler-wrap': true, [this.classNames?.handlers ?? '']: !!this.classNames?.handlers } }, h("span", { key: '67968406dee6198ff1cc652351d39ac53e6043ef', class: {
+            }, style: this.styles?.input, type: "text", inputMode: "decimal", autocomplete: "off", role: "spinbutton", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, value: this.inputValue, disabled: this.disabled, readOnly: this.readOnly, placeholder: this.placeholder, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel })), this.suffix && (h("span", { key: 'fed091f66e2e67a848060ee9dfde6b2077d1bfcf', class: { 'x-input-number-suffix': true, [this.classNames?.suffix ?? '']: !!this.classNames?.suffix } }, h("slot", { key: '7a385b444c2523e7806c236f2ba8326d3055a740', name: "suffix" }, this.suffix))), this.controls && (h("div", { key: '0f28a143fb9309ad320aa42e94f3cd4db0e58cc3', class: { 'x-input-number-handler-wrap': true, [this.classNames?.handlers ?? '']: !!this.classNames?.handlers } }, h("span", { key: 'b5f53c1b099f5e71789fa8ba379463cec085cb38', class: {
                 'x-input-number-handler': true,
                 'x-input-number-handler-up': true,
                 'x-input-number-handler-disabled': this.isUpDisabled(),
-            }, onMouseDown: (e) => !this.isUpDisabled() && this.handleStepMouseDown('up', e), onMouseUp: this.handleStepMouseUp, onMouseLeave: this.handleStepMouseUp }, h("span", { key: 'fba5d46dc0b52db13e8315e3201c87f23fd08f84', class: "x-input-number-handler-up-inner" }, this.renderUpIcon())), h("span", { key: '3ecbdf11351a90ebc795f021f0cccb05cf1e08f9', class: {
+            }, onMouseDown: e => !this.isUpDisabled() && this.handleStepMouseDown('up', e), onMouseUp: this.handleStepMouseUp, onMouseLeave: this.handleStepMouseUp }, h("span", { key: 'ba72291ddcfec262e0e3ed77d18238b867485e93', class: "x-input-number-handler-up-inner" }, this.renderUpIcon())), h("span", { key: 'c38535ff1cd7efd7b950be075333dcf4396a2812', class: {
                 'x-input-number-handler': true,
                 'x-input-number-handler-down': true,
                 'x-input-number-handler-disabled': this.isDownDisabled(),
-            }, onMouseDown: (e) => !this.isDownDisabled() && this.handleStepMouseDown('down', e), onMouseUp: this.handleStepMouseUp, onMouseLeave: this.handleStepMouseUp }, h("span", { key: '4335fd45f1a1842d1419a8e5edc2449f45f3faf8', class: "x-input-number-handler-down-inner" }, this.renderDownIcon()))))), this.addonAfter && (h("span", { key: '0ca6d501421a7641e0ed055b1abd5f0d29e498d2', class: "x-input-number-group-addon x-input-number-group-addon-after" }, h("slot", { key: '41f103cb4fe2b0c7a6e6d2dccf82ac3b2a983f56', name: "addonAfter" }, this.addonAfter)))));
+            }, onMouseDown: e => !this.isDownDisabled() && this.handleStepMouseDown('down', e), onMouseUp: this.handleStepMouseUp, onMouseLeave: this.handleStepMouseUp }, h("span", { key: '70846d892123a3bda0a11c32016ab94c7e801516', class: "x-input-number-handler-down-inner" }, this.renderDownIcon()))))), this.addonAfter && (h("span", { key: '66b4dc172b7548401f8d9f772a5b4160b56f8a99', class: "x-input-number-group-addon x-input-number-group-addon-after" }, h("slot", { key: '06290cb66e73be3654876a1d64c8adc7aff5f7b3', name: "addonAfter" }, this.addonAfter)))));
     }
     static get is() { return "x-input-number"; }
     static get encapsulation() { return "shadow"; }
@@ -1155,6 +1231,25 @@ export class XInputNumber {
                 "reflect": false,
                 "attribute": "suffix"
             },
+            "currency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currency code for formatting (e.g. 'VND', 'USD')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "currency"
+            },
             "value": {
                 "type": "any",
                 "mutable": true,

package/dist/collection/components/x-layout/x-layout.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

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

@@ -11,7 +11,7 @@ export class XLayout {
      * Whether the layout is fixed in position.
      * @default true
      * @example
-      * <x-layout fixed="true">
+     * <x-layout fixed="true">
      *   <x-sider></x-sider>
      * </x-layout>
      */
@@ -31,6 +31,9 @@ export class XLayout {
      * </x-layout>
      */
     hasSiderProp;
+    watchHasSiderProp(newValue) {
+        this.hasSider = newValue;
+    }
     /**
      * ResizeObserver instance.
      */
@@ -107,7 +110,7 @@ export class XLayout {
             'x-layout-has-sider': this.hasSider,
             'x-layout-fixed': this.fixed === true,
         };
-        return (h(Host, { key: '505299aa8958b941278b0dbaf4ceccb9dc003623', class: classes }, h("slot", { key: '82dcb640440c287f8690d44b36931ad8cf223774' })));
+        return (h(Host, { key: 'a71ed881d4c39703bddc40c03f245127516576a8', class: classes }, h("slot", { key: '38a2c812bf5981224210530cf1560cb0638193f3' })));
     }
     static get is() { return "x-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -139,7 +142,7 @@ export class XLayout {
                             "text": "true"
                         }, {
                             "name": "example",
-                            "text": " <x-layout fixed=\"true\">\r\n  <x-sider></x-sider>\r\n</x-layout>"
+                            "text": "<x-layout fixed=\"true\">\n  <x-sider></x-sider>\n</x-layout>"
                         }],
                     "text": "Whether the layout is fixed in position."
                 },
@@ -162,13 +165,13 @@ export class XLayout {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-layout hasSiderProp>\r\n  <x-sider></x-sider>\r\n</x-layout>"
+                            "text": "<x-layout hasSiderProp>\n  <x-sider></x-sider>\n</x-layout>"
                         }],
                     "text": "Whether contain Sider."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "has-sider-prop"
             }
         };
@@ -183,6 +186,9 @@ export class XLayout {
         return [{
                 "propName": "fixed",
                 "methodName": "watchFixed"
+            }, {
+                "propName": "hasSiderProp",
+                "methodName": "watchHasSiderProp"
             }];
     }
 }