@prof-dev/improved-select - npm Package Compare versions

Comparing version 1.1.9 to 1.1.10

lib/ImprovedSelect.d.ts

@@ -14,2 +14,3 @@ import { EventEmitter } from "@prof-dev/event-emitter";
     strategy?: Strategy;
+    style?: () => Record<string, string>;
 }>;
@@ -19,3 +20,3 @@ declare class Select extends EventEmitter<SelectEventType, ImprovedSelect> {
 export declare class ImprovedSelect extends Select {
-    private element;
+    readonly element: HTMLElement;
     private isActive;
@@ -27,3 +28,3 @@ private isSearchActive;
     private closeElements;
-    private select;
+    readonly select: HTMLSelectElement | null;
     private selectBody;
@@ -38,4 +39,6 @@ private searchInput;
     private options;
+    private selectObserver;
     private cleanup?;
     constructor(element: HTMLElement, options?: SelectOptions);
+    private onSelectAttributesChange;
     private initChangeStateBehavior;
@@ -45,2 +48,4 @@ private initToggleBehavior;
     private initSelectBehavior;
+    private initLinkedOptions;
+    private onLinkedOptionClick;
     private initSearchBehavior;
@@ -52,2 +57,3 @@ private initResetBehavior;
     private resetSearchState;
+    updateOptions(): void;
     info(): ImprovedSelectInfo;
@@ -64,5 +70,5 @@ private update;
     static initAllAvailableOnPage(options?: SelectOptions): void;
-    static getInstance(element: HTMLElement): ImprovedSelect | undefined;
+    static getInstance(element: HTMLElement | null): ImprovedSelect | undefined;
     static blurSimulationHandler(event: MouseEvent | TouchEvent): void;
 }
 export {};

lib/ImprovedSelect.js

@@ -109,3 +109,3 @@ "use strict";
         var _this = this;
-        var _a, _b;
+        var _a;
         _this = _super.call(this) || this;
@@ -125,16 +125,43 @@ _this.element = element;
         _this.options = {};
+        _this.onSelectAttributesChange = function () {
+            var _a, _b;
+            _this.element.classList.toggle("is-disabled", ((_a = _this.select) === null || _a === void 0 ? void 0 : _a.disabled) === true);
+            _this.element.classList.toggle("is-multiple", ((_b = _this.select) === null || _b === void 0 ? void 0 : _b.multiple) === true);
+        };
+        _this.onLinkedOptionClick = function (event) {
+            var _a, _b, _c, _d, _e;
+            var linkedOption = event.currentTarget;
+            var value = linkedOption.dataset.selectOption;
+            var option = Array.from((_b = (_a = _this.select) === null || _a === void 0 ? void 0 : _a.options) !== null && _b !== void 0 ? _b : []).find(function (option) { return option.value === value; });
+            if (option !== undefined) {
+                if (((_c = _this.select) === null || _c === void 0 ? void 0 : _c.multiple) === true) {
+                    option.selected = !option.selected;
+                }
+                else {
+                    option.selected = true;
+                }
+            }
+            (_d = _this.select) === null || _d === void 0 ? void 0 : _d.dispatchEvent(new Event("change", {
+                bubbles: true,
+            }));
+            if (((_e = _this.select) === null || _e === void 0 ? void 0 : _e.multiple) === false) {
+                _this.close();
+            }
+        };
         _this.update = function () { return __awaiter(_this, void 0, void 0, function () {
             var _a, x, y;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var _b, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
                         if (!(this.activeToggleElement !== undefined && this.selectBody !== null)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, (0, dom_1.computePosition)(this.activeToggleElement, this.selectBody, __assign(__assign({}, this.options), { middleware: [(0, dom_1.offset)(8), (0, dom_1.flip)(), (0, dom_1.shift)({ padding: 12 })] }))];
+                        return [4 /*yield*/, (0, dom_1.computePosition)(this.activeToggleElement, this.selectBody, {
+                                strategy: this.options.strategy,
+                                placement: this.options.placement,
+                                middleware: [(0, dom_1.offset)(8), (0, dom_1.flip)(), (0, dom_1.shift)({ padding: 12 })],
+                            })];
                     case 1:
-                        _a = _b.sent(), x = _a.x, y = _a.y;
-                        Object.assign(this.selectBody.style, {
-                            left: "".concat(x, "px"),
-                            top: "".concat(y, "px"),
-                        });
-                        _b.label = 2;
+                        _a = _d.sent(), x = _a.x, y = _a.y;
+                        Object.assign(this.selectBody.style, __assign({ left: "".concat(x, "px"), top: "".concat(y, "px") }, (_c = (_b = this.options).style) === null || _c === void 0 ? void 0 : _c.call(_b)));
+                        _d.label = 2;
                     case 2: return [2 /*return*/];
@@ -172,2 +199,3 @@ }
         _this.options = __assign(__assign({}, _this.options), options);
+        _this.selectObserver = new MutationObserver(_this.onSelectAttributesChange);
         _this.isActive = _this.element.classList.contains("is-active");
@@ -185,2 +213,3 @@ _this.isHtmlValue = _this.element.hasAttribute("data-select-html-value");
         _this.initCloseBehavior();
+        _this.initLinkedOptions();
         _this.initSelectBehavior();
@@ -191,4 +220,4 @@ _this.initSearchBehavior();
         _this.updateActiveState();
+        _this.onSelectAttributesChange();
         _this.element.setAttribute("data-improved-select", "initialized");
-        _this.element.classList.toggle("is-multiple", ((_b = _this.select) === null || _b === void 0 ? void 0 : _b.multiple) === true);
         improvedSelectElementsMap.set(element, _this);
@@ -259,23 +288,2 @@ return _this;
         var _this = this;
-        this.linkedOptions.forEach(function (linkedOption, index) {
-            linkedOption.addEventListener("click", function () {
-                if (_this.select !== null && _this.select.options[index] !== undefined) {
-                    var option = _this.select.options[index];
-                    if (option !== undefined) {
-                        if (_this.select.multiple) {
-                            option.selected = !option.selected;
-                        }
-                        else {
-                            option.selected = true;
-                        }
-                    }
-                    _this.select.dispatchEvent(new Event("change", {
-                        bubbles: true,
-                    }));
-                }
-                if (_this.select === null || _this.select.multiple === false) {
-                    _this.close();
-                }
-            });
-        });
         if (this.select) {
@@ -285,2 +293,5 @@ this.select.addEventListener("change", function () {
             });
+            this.selectObserver.observe(this.select, {
+                attributes: true,
+            });
         }
@@ -291,2 +302,12 @@ this.on("change", function () {
     };
+    ImprovedSelect.prototype.initLinkedOptions = function () {
+        var _this = this;
+        this.linkedOptions.forEach(function (linkedOption, index) {
+            var _a, _b;
+            var value = (_b = (_a = _this.select) === null || _a === void 0 ? void 0 : _a.options[index]) === null || _b === void 0 ? void 0 : _b.value;
+            linkedOption.dataset.selectOption = value;
+            linkedOption.removeEventListener("click", _this.onLinkedOptionClick);
+            linkedOption.addEventListener("click", _this.onLinkedOptionClick);
+        });
+    };
     ImprovedSelect.prototype.initSearchBehavior = function () {
@@ -369,2 +390,6 @@ var _this = this;
     };
+    ImprovedSelect.prototype.updateOptions = function () {
+        this.linkedOptions = Array.from(this.element.querySelectorAll("[data-select-option]"));
+        this.initLinkedOptions();
+    };
     ImprovedSelect.prototype.info = function () {
@@ -446,2 +471,5 @@ return {
     ImprovedSelect.getInstance = function (element) {
+        if (element == null) {
+            return undefined;
+        }
         return improvedSelectElementsMap.get(element);
@@ -448,0 +476,0 @@ };

package.json

 {
   "name": "@prof-dev/improved-select",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "Helper for live clicks events management",
@@ -5,0 +5,0 @@ "main": "lib/ImprovedSelect.js",

README.md

@@ -0,0 +0,0 @@ # improved-select

src/ImprovedSelect.ts

@@ -24,2 +24,3 @@ import { EventEmitter } from "@prof-dev/event-emitter";
   strategy?: Strategy;
+  style?: () => Record<string, string>;
 }>;
@@ -38,3 +39,3 @@
   private closeElements: HTMLElement[] = [];
-  private select: HTMLSelectElement | null;
+  public readonly select: HTMLSelectElement | null;
   private selectBody: HTMLElement | null;
@@ -49,5 +50,9 @@ private searchInput: HTMLInputElement | null;
   private options: SelectOptions = {};
+  private selectObserver: MutationObserver;
   private cleanup?: () => void;
 
-  constructor(private element: HTMLElement, options: SelectOptions = {}) {
+  constructor(
+    public readonly element: HTMLElement,
+    options: SelectOptions = {},
+  ) {
     super();
@@ -59,2 +64,3 @@
     };
+    this.selectObserver = new MutationObserver(this.onSelectAttributesChange);
 
@@ -81,2 +87,3 @@ this.isActive = this.element.classList.contains("is-active");
     this.initCloseBehavior();
+    this.initLinkedOptions();
     this.initSelectBehavior();
@@ -87,9 +94,17 @@ this.initSearchBehavior();
     this.updateActiveState();
+    this.onSelectAttributesChange();
     this.element.setAttribute("data-improved-select", "initialized");
+    improvedSelectElementsMap.set(element, this);
+  }
+
+  private onSelectAttributesChange = () => {
     this.element.classList.toggle(
+      "is-disabled",
+      this.select?.disabled === true,
+    );
+    this.element.classList.toggle(
       "is-multiple",
       this.select?.multiple === true,
     );
-    improvedSelectElementsMap.set(element, this);
-  }
+  };
 
@@ -141,28 +156,2 @@ private initChangeStateBehavior() {
   private initSelectBehavior() {
-    this.linkedOptions.forEach((linkedOption, index) => {
-      linkedOption.addEventListener("click", () => {
-        if (this.select !== null && this.select.options[index] !== undefined) {
-          const option = this.select.options[index];
-
-          if (option !== undefined) {
-            if (this.select.multiple) {
-              option.selected = !option.selected;
-            } else {
-              option.selected = true;
-            }
-          }
-
-          this.select.dispatchEvent(
-            new Event("change", {
-              bubbles: true,
-            }),
-          );
-        }
-
-        if (this.select === null || this.select.multiple === false) {
-          this.close();
-        }
-      });
-    });
-
     if (this.select) {
@@ -172,2 +161,6 @@ this.select.addEventListener("change", () => {
       });
+
+      this.selectObserver.observe(this.select, {
+        attributes: true,
+      });
     }
@@ -180,2 +173,37 @@
 
+  private initLinkedOptions() {
+    this.linkedOptions.forEach((linkedOption, index) => {
+      const value = this.select?.options[index]?.value;
+      linkedOption.dataset.selectOption = value;
+      linkedOption.removeEventListener("click", this.onLinkedOptionClick);
+      linkedOption.addEventListener("click", this.onLinkedOptionClick);
+    });
+  }
+
+  private onLinkedOptionClick = (event: MouseEvent) => {
+    const linkedOption = event.currentTarget as HTMLElement;
+    const value = linkedOption.dataset.selectOption;
+    const option = Array.from(this.select?.options ?? []).find(
+      (option) => option.value === value,
+    );
+
+    if (option !== undefined) {
+      if (this.select?.multiple === true) {
+        option.selected = !option.selected;
+      } else {
+        option.selected = true;
+      }
+    }
+
+    this.select?.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+      }),
+    );
+
+    if (this.select?.multiple === false) {
+      this.close();
+    }
+  };
+
   private initSearchBehavior() {
@@ -295,2 +323,10 @@ if (this.searchInput) {
 
+  public updateOptions() {
+    this.linkedOptions = Array.from(
+      this.element.querySelectorAll("[data-select-option]"),
+    );
+
+    this.initLinkedOptions();
+  }
+
   public info(): ImprovedSelectInfo {
@@ -312,3 +348,4 @@ return {
         {
-          ...this.options,
+          strategy: this.options.strategy,
+          placement: this.options.placement,
           middleware: [offset(8), flip(), shift({ padding: 12 })],
@@ -321,2 +358,3 @@ },
         top: `${y}px`,
+        ...this.options.style?.(),
       });
@@ -436,3 +474,7 @@ }
 
-  static getInstance(element: HTMLElement) {
+  static getInstance(element: HTMLElement | null): ImprovedSelect | undefined {
+    if (element == null) {
+      return undefined;
+    }
+
     return improvedSelectElementsMap.get(element);
@@ -439,0 +481,0 @@ }

tsconfig.json

@@ -0,0 +0,0 @@ {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88402

increased by4.73%

Lines of code

1554

increased by4.72%

No dependency changes