@phatvu/web-component-poc 1.0.6 → 1.0.8

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

@@ -0,0 +1,99 @@
+import { h } from "@stencil/core";
+export class FastForm {
+    el;
+    searchExecuted;
+    handleInputSubmit() {
+        this.submit();
+    }
+    async submit() {
+        const inputs = this.el.querySelectorAll('fast-input');
+        const params = {};
+        for (const input of Array.from(inputs)) {
+            const paramName = await input.getParamName();
+            const value = await input.getValue();
+            if (value) {
+                params[paramName] = value;
+            }
+        }
+        this.updateUrlParams(params);
+        document.dispatchEvent(new CustomEvent('search-executed', {
+            detail: params,
+            bubbles: true,
+            composed: true,
+        }));
+        this.searchExecuted.emit(params);
+    }
+    updateUrlParams(params) {
+        const urlParams = new URLSearchParams(window.location.search);
+        // Get all param names from inputs and clear them first
+        const inputs = this.el.querySelectorAll('fast-input');
+        for (const input of Array.from(inputs)) {
+            const paramName = input.paramName;
+            if (paramName) {
+                urlParams.delete(paramName);
+            }
+        }
+        // Set new values
+        for (const [key, value] of Object.entries(params)) {
+            if (value) {
+                urlParams.set(key, value);
+            }
+        }
+        const qs = urlParams.toString();
+        const newUrl = qs
+            ? `${window.location.pathname}?${qs}`
+            : window.location.pathname;
+        history.pushState({}, '', newUrl);
+    }
+    handleFormSubmit = (e) => {
+        e.preventDefault();
+        this.submit();
+    };
+    render() {
+        return (h("form", { key: '50436bb904e8b175ae0c23158812a4e4756544c0', class: "fast-form", onSubmit: this.handleFormSubmit }, h("slot", { key: '2f76c4c42c15ebf389d6e0fdbcb9a2098bf1156a' })));
+    }
+    static get is() { return "fast-form"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["fast-form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["fast-form.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "searchExecuted",
+                "name": "searchExecuted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Record<string, string>",
+                    "resolved": "string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "inputSubmit",
+                "method": "handleInputSubmit",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/fast-input/fast-input.css

@@ -0,0 +1,45 @@
+.fast-input {
+  position: relative;
+  display: inline-block;
+}
+
+.fast-input__field {
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.fast-input__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  z-index: 100;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.fast-input__dropdown-item {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+}
+
+.fast-input__dropdown-item:hover {
+  background: #f0f0f0;
+}
+
+.fast-input__dropdown-loading {
+  padding: 0.5rem 0.75rem;
+  color: #999;
+  font-style: italic;
+}

package/dist/collection/components/fast-input/fast-input.js

@@ -0,0 +1,359 @@
+import { h, } from "@stencil/core";
+export class FastInput {
+    placeholder = 'Search...';
+    value = '';
+    paramName = 'keyword';
+    enableAutocomplete = false;
+    autocompleteUrl = '/api/jobs/autocomplete';
+    targetPath;
+    debounceMs = 300;
+    minChars = 3;
+    inputSubmit;
+    inputChanged;
+    inputValue = '';
+    suggestions = [];
+    showDropdown = false;
+    autocompleteLoading = false;
+    debounceTimer;
+    popstateHandler;
+    async getValue() {
+        return this.inputValue;
+    }
+    async getParamName() {
+        return this.paramName;
+    }
+    connectedCallback() {
+        const urlValue = this.getUrlParam();
+        this.inputValue = urlValue !== null ? urlValue : this.value;
+        this.popstateHandler = () => {
+            this.inputValue = this.getUrlParam() ?? '';
+        };
+        window.addEventListener('popstate', this.popstateHandler);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('popstate', this.popstateHandler);
+        clearTimeout(this.debounceTimer);
+    }
+    getUrlParam() {
+        const params = new URLSearchParams(window.location.search);
+        return params.get(this.paramName);
+    }
+    handleInput = (e) => {
+        const value = e.target.value;
+        this.inputValue = value;
+        this.inputChanged.emit({ value });
+        if (this.enableAutocomplete) {
+            this.scheduleAutocomplete(value);
+        }
+    };
+    handleKeydown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.showDropdown = false;
+            this.inputSubmit.emit();
+        }
+        else if (e.key === 'Escape') {
+            this.showDropdown = false;
+        }
+    };
+    handleBlur = () => {
+        this.showDropdown = false;
+    };
+    scheduleAutocomplete(value) {
+        clearTimeout(this.debounceTimer);
+        if (value.length < this.minChars) {
+            this.showDropdown = false;
+            return;
+        }
+        this.debounceTimer = setTimeout(() => this.fetchSuggestions(value), this.debounceMs);
+    }
+    async fetchSuggestions(keyword) {
+        if (!this.targetPath) {
+            console.warn('[fast-input] target-path is required for autocomplete');
+            return;
+        }
+        this.autocompleteLoading = true;
+        this.showDropdown = true;
+        try {
+            const res = await fetch(this.autocompleteUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ keyword, target_path: this.targetPath }),
+            });
+            if (!res.ok)
+                throw new Error('autocomplete request failed');
+            const data = await res.json();
+            this.suggestions = data;
+        }
+        catch {
+            this.showDropdown = false;
+            this.suggestions = [];
+        }
+        finally {
+            this.autocompleteLoading = false;
+        }
+    }
+    selectSuggestion(title) {
+        this.inputValue = title;
+        this.showDropdown = false;
+        this.inputSubmit.emit();
+    }
+    render() {
+        return (h("div", { key: 'ea03f3dd68d0da4fc30cbc18a1ef66b5974a4f89', class: "fast-input" }, h("input", { key: '31d85c4c90dde0e10ea9424b960c5e4f4a3ca54a', type: "text", class: "fast-input__field", placeholder: this.placeholder, value: this.inputValue, onInput: this.handleInput, onKeyDown: this.handleKeydown, onBlur: this.handleBlur }), this.enableAutocomplete && this.showDropdown && (h("ul", { key: '0de6fd68709d906bafd2fec684f0a73045be3705', class: "fast-input__dropdown" }, this.autocompleteLoading ? (h("li", { class: "fast-input__dropdown-loading" }, "Loading...")) : (this.suggestions.map(s => (h("li", { class: "fast-input__dropdown-item", onMouseDown: e => {
+                e.preventDefault();
+            }, onClick: () => this.selectSuggestion(s.title) }, s.title))))))));
+    }
+    static get is() { return "fast-input"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["fast-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["fast-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Search...'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "paramName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "param-name",
+                "defaultValue": "'keyword'"
+            },
+            "enableAutocomplete": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-autocomplete",
+                "defaultValue": "false"
+            },
+            "autocompleteUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete-url",
+                "defaultValue": "'/api/jobs/autocomplete'"
+            },
+            "targetPath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target-path"
+            },
+            "debounceMs": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce-ms",
+                "defaultValue": "300"
+            },
+            "minChars": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-chars",
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputValue": {},
+            "suggestions": {},
+            "showDropdown": {},
+            "autocompleteLoading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "inputSubmit",
+                "name": "inputSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "inputChanged",
+                "name": "inputChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getParamName": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}