@xlabs-store/core 0.0.1 → 0.0.3

package/dist/collection/components/x-tree-select/x-tree-select.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-tree-select/x-tree-select.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { PortalController } from "../x-portal/portal-controller";
 import { getIcon } from "../../utils/config";
 import { translate } from "../../locales/locale.service";
@@ -339,7 +339,7 @@ export class XTreeSelect {
     get treeService() {
         return new TreeService({
             id: this.fieldNames?.value || 'key',
-            children: this.fieldNames?.children || 'children'
+            children: this.fieldNames?.children || 'children',
         });
     }
     /**
@@ -604,7 +604,7 @@ export class XTreeSelect {
      */
     syncValueToState() {
         if (this.treeCheckable) {
-            const rawValues = Array.isArray(this.value) ? [...this.value] : (this.value ? [this.value] : []);
+            const rawValues = Array.isArray(this.value) ? [...this.value] : this.value ? [this.value] : [];
             this.checkedKeys = this.expandCheckedKeys(rawValues);
             if (!this.treeCheckStrictly) {
                 // Recalculate to ensure consistency (e.g. if parent provided, ensure children added)
@@ -614,7 +614,7 @@ export class XTreeSelect {
             }
         }
         else if (this.multiple) {
-            this.selectedKeys = Array.isArray(this.value) ? [...this.value] : (this.value ? [this.value] : []);
+            this.selectedKeys = Array.isArray(this.value) ? [...this.value] : this.value ? [this.value] : [];
         }
         else {
             this.selectedKeys = this.value ? [this.value] : [];
@@ -705,7 +705,7 @@ export class XTreeSelect {
         const result = [];
         const checkedSet = new Set(checkedKeys);
         const traverse = (node) => {
-            const key = node.key;
+            const key = node.key ?? this.getNodeValue(node);
             const isChecked = checkedSet.has(key);
             const children = this.getNodeChildren(node);
             if (isChecked) {
@@ -775,9 +775,7 @@ export class XTreeSelect {
      * @returns Array of labels.
      */
     getSelectedLabels() {
-        const keys = this.treeCheckable
-            ? (Array.isArray(this.value) ? this.value : [])
-            : this.selectedKeys;
+        const keys = this.treeCheckable ? (Array.isArray(this.value) ? this.value : []) : this.selectedKeys;
         return keys.map(key => {
             const node = this.findNode(key);
             return node ? this.getNodeTitle(node) : key;
@@ -1153,9 +1151,7 @@ export class XTreeSelect {
             [`x-tree-select-dropdown-placement-${this.placement}`]: true,
         };
         // Get filtered tree data if showSearch and has searchValue
-        const filteredTreeData = this.showSearch && this.searchValue
-            ? this.filterTree(this.treeData, this.searchValue)
-            : this.treeData;
+        const filteredTreeData = this.showSearch && this.searchValue ? this.filterTree(this.treeData, this.searchValue) : this.treeData;
         dropdownEl.dropdownClasses = classes;
         dropdownEl.dropdownStyle = {};
         dropdownEl.treeData = filteredTreeData;
@@ -1430,7 +1426,7 @@ export class XTreeSelect {
         // <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
         //   <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
         // </svg>
-        h("x-icon", { name: getIcon('checkSmall') })), halfChecked && !checked && (h("span", { class: "x-tree-select-checkbox-inner-indeterminate" }))));
+        h("x-icon", { name: getIcon('checkSmall') })), halfChecked && !checked && h("span", { class: "x-tree-select-checkbox-inner-indeterminate" })));
     }
     /**
      * Render remove icon for tags.
@@ -1483,13 +1479,13 @@ export class XTreeSelect {
             }, key: i }))))), h("span", { class: {
                 'x-tree-select-switcher': true,
                 'x-tree-select-switcher-leaf': !hasChildren,
-            }, onClick: (e) => hasChildren && this.handleNodeExpand(node, e) }, hasChildren && this.renderSwitcherIcon(isExpanded)), this.treeCheckable && (h("span", { class: {
+            }, onClick: e => hasChildren && this.handleNodeExpand(node, e) }, hasChildren && this.renderSwitcherIcon(isExpanded)), this.treeCheckable && (h("span", { class: {
                 'x-tree-select-checkbox-wrapper': true,
                 'x-tree-select-checkbox-wrapper-disabled': isDisabled || node.disableCheckbox,
-            }, onClick: (e) => !isDisabled && !node.disableCheckbox && this.handleNodeClick(node, e) }, this.renderCheckbox(isChecked, isHalfChecked))), h("span", { class: {
+            }, onClick: e => !isDisabled && !node.disableCheckbox && this.handleNodeClick(node, e) }, this.renderCheckbox(isChecked, isHalfChecked))), h("span", { class: {
                 'x-tree-select-node-content': true,
                 'x-tree-select-node-content-wrapper': true,
-            }, onClick: (e) => !isDisabled && this.handleNodeClick(node, e) }, h("span", { class: "x-tree-select-title" }, this.renderHighlightedTitle(this.getNodeTitle(node))))), hasChildren && isExpanded && (h("div", { class: "x-tree-select-child-tree" }, children.map(child => this.renderTreeNode(child, level + 1))))));
+            }, onClick: e => !isDisabled && this.handleNodeClick(node, e) }, h("span", { class: "x-tree-select-title" }, this.renderHighlightedTitle(this.getNodeTitle(node))))), hasChildren && isExpanded && h("div", { class: "x-tree-select-child-tree" }, children.map(child => this.renderTreeNode(child, level + 1)))));
     }
     /**
      * Render title with search highlight.
@@ -1507,11 +1503,7 @@ export class XTreeSelect {
         const before = title.slice(0, index);
         const match = title.slice(index, index + this.searchValue.length);
         const after = title.slice(index + this.searchValue.length);
-        return [
-            before,
-            h("span", { class: "x-tree-select-title-highlight" }, match),
-            after,
-        ];
+        return [before, h("span", { class: "x-tree-select-title-highlight" }, match), after];
     }
     // ========================================
     // RENDER METHODS - Selector
@@ -1537,8 +1529,8 @@ export class XTreeSelect {
         return (h("div", { class: "x-tree-select-selection-overflow" }, displayKeys.map(key => {
             const node = this.findNode(key);
             const title = node ? this.getNodeTitle(node) : key;
-            return (h("span", { class: "x-tree-select-selection-item", key: key }, h("span", { class: "x-tree-select-selection-item-content" }, title), h("span", { class: "x-tree-select-selection-item-remove", onClick: (e) => this.removeTag(key, e) }, this.renderRemoveIcon())));
-        }), restCount > 0 && (h("span", { class: "x-tree-select-selection-item x-tree-select-selection-item-rest" }, h("span", { class: "x-tree-select-selection-item-content" }, this.maxTagPlaceholder || `+ ${restCount} ...`))), h("span", { class: "x-tree-select-selection-search" }, h("input", { ref: el => (this.inputRef = el), class: "x-tree-select-selection-search-input", value: this.searchValue, disabled: this.disabled, onInput: (e) => this.handleSearch(e), onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, style: { width: this.searchValue ? `${this.searchValue.length + 1}ch` : '4px' } }))));
+            return (h("span", { class: "x-tree-select-selection-item", key: key }, h("span", { class: "x-tree-select-selection-item-content" }, title), h("span", { class: "x-tree-select-selection-item-remove", onClick: e => this.removeTag(key, e) }, this.renderRemoveIcon())));
+        }), restCount > 0 && (h("span", { class: "x-tree-select-selection-item x-tree-select-selection-item-rest" }, h("span", { class: "x-tree-select-selection-item-content" }, this.maxTagPlaceholder || `+ ${restCount} ...`))), h("span", { class: "x-tree-select-selection-search" }, h("input", { ref: el => (this.inputRef = el), class: "x-tree-select-selection-search-input", value: this.searchValue, disabled: this.disabled, onInput: e => this.handleSearch(e), onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, style: { width: this.searchValue ? `${this.searchValue.length + 1}ch` : '4px' } }))));
     }
     /**
      * Render selector for single selection mode.
@@ -1555,8 +1547,8 @@ export class XTreeSelect {
                 bottom: '0',
                 pointerEvents: 'none',
                 display: 'flex',
-                alignItems: 'center'
-            } }, label)), h("input", { ref: el => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-tree-select-selection-search-input", value: this.showSearch ? this.searchValue : '', placeholder: "", readOnly: !this.showSearch, disabled: this.disabled, autoComplete: "off", onInput: (e) => this.handleSearch(e), onFocus: this.handleInputFocus, onBlur: this.handleInputBlur }), !hasValue && !this.searchValue && (h("span", { class: "x-tree-select-selection-placeholder", style: {
+                alignItems: 'center',
+            } }, label)), h("input", { ref: el => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-tree-select-selection-search-input", value: this.showSearch ? this.searchValue : '', placeholder: "", readOnly: !this.showSearch, disabled: this.disabled, autoComplete: "off", onInput: e => this.handleSearch(e), onFocus: this.handleInputFocus, onBlur: this.handleInputBlur }), !hasValue && !this.searchValue && (h("span", { class: "x-tree-select-selection-placeholder", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -1564,7 +1556,7 @@ export class XTreeSelect {
                 bottom: '0',
                 pointerEvents: 'none',
                 display: 'flex',
-                alignItems: 'center'
+                alignItems: 'center',
             } }, this.placeholder))));
     }
     // ========================================
@@ -1576,9 +1568,7 @@ export class XTreeSelect {
      */
     render() {
         const isMultiple = this.isMultiple();
-        const hasValue = isMultiple
-            ? (this.treeCheckable ? this.checkedKeys.length > 0 : this.selectedKeys.length > 0)
-            : this.selectedKeys.length > 0;
+        const hasValue = isMultiple ? (this.treeCheckable ? this.checkedKeys.length > 0 : this.selectedKeys.length > 0) : this.selectedKeys.length > 0;
         const showClear = this.allowClear && !this.disabled && this.hovering && hasValue;
         const hostClasses = {
             'x-tree-select': true,
@@ -1595,13 +1585,13 @@ export class XTreeSelect {
             [`x-tree-select-${this.variant}`]: true,
             [`x-tree-select-status-${this.status}`]: !!this.status,
         };
-        return (h(Host, { key: 'c2189c02f2ec226991b0a268872a2480706cfe1e', class: hostClasses }, h("div", { key: 'bc108e641fc9644e564cbabb8158367d739710ac', ref: el => (this.wrapperRef = el), class: {
+        return (h(Host, { key: '24d1db303090a1735429a491af24e3f7c01ffa57', class: hostClasses }, h("div", { key: '7efdb43fb9252ef2ae63c667708ad355728c0232', ref: el => (this.wrapperRef = el), class: {
                 'x-tree-select-wrapper': true,
                 'disabled': this.disabled,
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'f647380e9ee4c0c1d09f504997f25a18cb09da16', class: {
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '140223564a70c5dc43315ce7e78e5c20c32e0a2c', class: {
                 'x-tree-select-selector': true,
                 'disabled': this.disabled,
-            }, onClick: this.handleSelectorClick }, isMultiple ? this.renderTags() : this.renderSingleSelector()), h("span", { key: 'b3256f205894e25fca6f6ce0b0de29e000d0c4d6', class: "x-tree-select-suffix" }, showClear && (h("span", { key: '39189ead6d64ec3a126327b152e70d25eb9405c3', class: "x-tree-select-clear", onClick: (e) => this.handleClear(e) }, this.renderClearIcon())), this.loading ? (h("span", { class: "x-tree-select-arrow", part: "arrow" }, this.renderLoadingIcon())) : this.showArrow ? (h("span", { class: { 'x-tree-select-arrow': true, 'x-tree-select-arrow-open': this.open }, part: "arrow" }, this.renderArrowIcon())) : null))));
+            }, onClick: this.handleSelectorClick }, isMultiple ? this.renderTags() : this.renderSingleSelector()), h("span", { key: '0909210bbaee3a80b581b5241b15b6e0127b4c21', class: "x-tree-select-suffix" }, showClear && (h("span", { key: '6874b98d2e236af16a3ac53c05b447f30f0ff372', class: "x-tree-select-clear", onClick: e => this.handleClear(e) }, this.renderClearIcon())), this.loading ? (h("span", { class: "x-tree-select-arrow", part: "arrow" }, this.renderLoadingIcon())) : this.showArrow ? (h("span", { class: { 'x-tree-select-arrow': true, 'x-tree-select-arrow-open': this.open }, part: "arrow" }, this.renderArrowIcon())) : null))));
     }
     static get is() { return "x-tree-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-typography/x-typography.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;
@@ -341,7 +344,11 @@
   user-select: none;
 }
 
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
   margin-top: var(--x-typography-title-margin-top, 1.2em);
   margin-bottom: var(--x-typography-title-margin-bottom, 0.5em);
   font-weight: var(--x-typography-title-font-weight, var(--x-font-weight-semibold, 600));

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

@@ -107,24 +107,24 @@ export class XTypography {
             Tag = 'a';
         }
         // Default content from slot and apply decoration wrappers.
-        let content = h("slot", { key: '05bce1a95e6eed612afbb8aa4d69b319bb9e1548' });
+        let content = h("slot", { key: 'bf3775b29a575cc302f533e99ba8dc1aa1293609' });
         if (mark)
-            content = h("mark", { key: '138b85fd01b2b9e31bb0e5d76451d18da536652c' }, content);
+            content = h("mark", { key: '78f658826288cbb495b1c335931dc0f8d0899c07' }, content);
         if (code)
-            content = h("code", { key: 'c7084c61c1ee5cad8310f55f8de0521dae3e9697' }, content);
+            content = h("code", { key: '3252651579d39d35d3c840e2ddd392b228737a2d' }, content);
         if (keyboard)
-            content = h("kbd", { key: '571019489e33ad4f777324af357124ba68f44888' }, content);
+            content = h("kbd", { key: 'e90f4de121a2cd50a4df83fd7bc1d6ef39c657c6' }, content);
         if (underline)
-            content = h("u", { key: '9088854ca72d97b1a5c61eedbcc788ca049de147' }, content);
+            content = h("u", { key: '25041e47b975cba959cadd4273704fdeb98ee10a' }, content);
         if (del)
-            content = h("del", { key: '3336e3f668cf8fa266668c4f1c220e1473f403ea' }, content);
+            content = h("del", { key: 'cc0d2c7b45a563fd664ce9c0b3fbdddab4fe324c' }, content);
         if (strong)
-            content = h("strong", { key: '028028a6c56ff57e8cc20f5ee98a45c6023d7103' }, content);
+            content = h("strong", { key: '7c9dfdc3ffe95d4b12f62d0dedad7d87bba4bc13' }, content);
         if (italic)
-            content = h("i", { key: '73f02f0cb0c196892a8d83270d5378a25ca16df3' }, content);
+            content = h("i", { key: '76bc07862936c829903f0f41ee9b1e20bfa29924' }, content);
         // Add link attributes only for link types.
-        const attrs = (type === 'link' || href) ? { href, target } : {};
-        return (h(Host, { key: 'be336a90f2f693bbbecff37fffb6e75f40f62a23' }, h(Tag, { key: 'a8e2f60c78077316df7cd3edb7394ec9b55f6b80', class: classes, ...attrs }, content)));
+        const attrs = type === 'link' || href ? { href, target } : {};
+        return (h(Host, { key: '5619fe70485007275d2aa62af58ea5b101b24ac0' }, h(Tag, { key: 'b489c2de1cf2c09b1822bdc8b1b7fdb2c853509a', class: classes, ...attrs }, content)));
     }
     static get is() { return "x-typography"; }
     static get encapsulation() { return "shadow"; }
@@ -149,7 +149,7 @@ export class XTypography {
                     "references": {
                         "TypographyType": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-typography/x-typography.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-typography/x-typography.tsx",
                             "id": "src/components/x-typography/x-typography.tsx::TypographyType"
                         }
                     }
@@ -178,7 +178,7 @@ export class XTypography {
                     "references": {
                         "TypographyLevel": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-typography/x-typography.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-typography/x-typography.tsx",
                             "id": "src/components/x-typography/x-typography.tsx::TypographyLevel"
                         }
                     }

package/dist/collection/components/x-upload/x-upload.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;