@dile/ui 2.0.1

package/mixins/selectable/src/DileSelectable.js

@@ -0,0 +1,154 @@
+/**
+ *
+ * # DileSelector
+ *
+ * Mixin to select one item from a list.
+ *
+ */
+ import { html } from "lit";
+
+export const DileSelectable = (SuperClass) =>
+  class extends SuperClass {
+
+    static get properties() {
+      return {
+        selected: { type: String },
+        attrForSelected: { type: String },
+        selectorId: { type: String },
+        hashSelection: { type: Boolean },
+      }
+    }
+
+    constructor() {
+      super();
+      this._items = [];
+      this.hashSelection = false;
+      this.itemSelectedChangedHandler = this._itemSelectedChanged.bind(this);
+      this.onHashChangeHandler = this._onHashChange.bind(this);
+    }
+
+    _onHashChange() {
+      if(this.hashSelection) {
+        let items = this.getItems();
+        let hashValue = this.getCleanHash();
+        let elementIndex;
+        let elem = items.find( (item, index) => {
+          let value = this.getItemValueComputed(item, index);
+          elementIndex = index;
+          return value == hashValue;
+        });
+        if(elem) {
+          let valueItem = this.getItemValueComputed(elem, elementIndex);
+          if(this.selected != valueItem) {
+            this.selected = valueItem;
+            this.setSelectedItem();
+            this.dispatchSelectedChanged();
+          }
+        }
+      }
+    }
+
+    getCleanHash() {
+      let hashValue = window.location.hash;
+      if(hashValue.length > 1) {
+        hashValue = hashValue.substring(1);
+      }
+      return hashValue;
+    }
+
+    getItemValueComputed(item, index) {
+      return this.attrForSelected ? item.getAttribute(this.attrForSelected) : index
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener('dile-item-selected', this.itemSelectedChangedHandler);
+      window.addEventListener("hashchange", this.onHashChangeHandler);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener('dile-item-selected', this.itemSelectedChangedHandler);
+      window.removeEventListener("hashchange", this.onHashChangeHandler);
+    }
+
+    firstUpdated() {
+      super.firstUpdated();
+      this._items = this.getItems()
+      let index = 0;
+      this._items.forEach(el => {
+        el._assignedIndex = index;
+        index++;
+      });
+      this._onHashChange();
+      this.setSelectedItem();
+      if(this.selected !== undefined) {
+        setTimeout( () => this.dispatchSelectedChanged(), 500);
+      }
+    }
+
+    render() {
+      return html`
+        <slot></slot>
+      `;
+    }
+
+    setSelectedItem() {
+      this._items = this.getItems();
+      if(this.attrForSelected) {
+        // Selected by attribute
+        this._items.forEach(el => {
+          if(el.getAttribute(this.attrForSelected) == this.selected) {
+            el.selected = true;
+          } else {
+            el.selected = false;
+          }
+        });
+      } else {
+        // Selected by index
+        let selectedIndex = parseInt(this.selected);
+        if(! isNaN(selectedIndex) && this._items[selectedIndex]) {
+          this._items.forEach((el, index) => {
+            if(index == selectedIndex) {
+              el.selected = true;
+            } else {
+              el.selected = false;
+            }
+          });
+        }
+      }
+      if(this.hashSelection && this.selected != undefined) {
+        window.location.hash = this.selected;
+      }
+    }
+
+    _itemSelectedChanged(e) {
+      if(! this.attrForSelected) {
+        // selected by index
+        this.selected = e.detail._assignedIndex;
+      } else {
+        // selected by attribute
+        this.selected = e.detail.getAttribute(this.attrForSelected);
+      }
+      this.dispatchSelectedChanged();
+    }
+  
+    dispatchSelectedChanged() {
+      this.dispatchEvent(new CustomEvent('dile-selected-changed', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          selected: this.selected,
+          selectorId: this.selectorId,
+        }
+      }));
+    }
+    
+    updated(changedProperties) {
+      this.setSelectedItem();
+    }
+
+    getItems() {
+      return this.shadowRoot.querySelector('slot').assignedElements({flatten: true});
+    }
+  }

package/mixins/selectable/src/DileSelectableItem.js

@@ -0,0 +1,30 @@
+/**
+ *
+ * # DileSelectorItem
+ *
+ * Mixin to implement a selector item.
+ *
+ */
+export const DileSelectableItem = (SuperClass) =>
+  class extends SuperClass {
+    static get properties() {
+      return {
+        selected: { 
+          type: Boolean,
+          reflect: true,
+        },
+        index: { type: Number },
+      };
+    }
+    constructor() {
+      super();
+      this.selected = false;
+    }
+    select() {
+      this.dispatchEvent(new CustomEvent('dile-item-selected', {
+        bubbles: true,
+        composed: true,
+        detail: this
+      }));
+    }
+  }

package/mixins/slide-down/index.js

@@ -0,0 +1 @@
+export { DileSlideDown } from "./src/DileSlideDown.js";

package/mixins/slide-down/src/DileSlideDown.js

@@ -0,0 +1,40 @@
+export const DileSlideDown = (SuperClass) => {
+  return class extends SuperClass {
+    _getElementHeight(elem, targetHeight = "0px") {
+      let height = 300;
+      elem.style.opacity = 0;
+      elem.style.height = "auto";
+      if (elem.offsetHeight) {
+        height = elem.offsetHeight;
+      }
+      elem.style.height = targetHeight;
+      elem.style.opacity = 1;
+      return height;
+    }
+
+    slideShow(elem, targetHeight = "0px") {
+      if (elem) {
+        let height = this._getElementHeight(elem, targetHeight);
+        setTimeout(() => {
+          elem.style.height = height + "px";
+        }, 50);
+        setTimeout(() => {
+          elem.style.height = "auto";
+          elem.style.overflow = "visible";
+        }, 600);
+      }
+    }
+    slideHide(elem, targetHeight = "0px") {
+      if (elem) {
+        let height = elem.offsetHeight;
+        elem.style.overflow = "hidden";
+        if (height) {
+          elem.style.height = height + "px";
+        }
+        setTimeout(() => {
+          elem.style.height = targetHeight;
+        }, 50);
+      }
+    }
+  };
+};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@dile/ui",
+  "version": "2.0.1",
+  "description": "UI Core components from dile-components.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Polydile/Components.git"
+  },
+  "keywords": [
+    "ui"
+  ],
+  "author": "EscuelaIT",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Polydile/Components/issues"
+  },
+  "homepage": "https://github.com/Polydile/Components#readme",
+  "dependencies": {
+    "lit": "^3.1.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "840c8bb284fd7504eb8a0eebd31b55f692f7f852"
+}