@studiometa/ui 0.1.1 → 0.2.2

package/Modal.js

@@ -1,167 +0,0 @@
-import { Base } from '@studiometa/js-toolkit';
-import transition from '@studiometa/js-toolkit/utils/css/transition.js';
-import { trap, untrap, saveActiveElement } from '@studiometa/js-toolkit/utils/focusTrap.js';
-export default class Modal extends Base {
-  static config = {
-    name: 'Modal',
-    refs: ['close', 'container', 'content', 'modal', 'open', 'overlay'],
-    emits: ['open', 'close'],
-    options: {
-      move: String,
-      autofocus: {
-        type: String,
-        default: '[autofocus]'
-      },
-      styles: {
-        type: Object,
-        default: () => ({
-          modal: {
-            closed: {
-              opacity: '0',
-              pointerEvents: 'none',
-              visibility: 'hidden'
-            }
-          }
-        })
-      }
-    }
-  };
-
-  get onOpenClick() {
-    return this.open;
-  }
-
-  get onCloseClick() {
-    return this.close;
-  }
-
-  get onOverlayClick() {
-    return this.close;
-  }
-
-  mounted() {
-    this.isOpen = false;
-    this.close();
-
-    if (this.$options.move) {
-      const target = document.querySelector(this.$options.move) || document.body;
-      this.__refsBackup = this.$refs;
-      this.__refModalPlaceholder = document.createComment('');
-      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;
-
-      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);
-
-      target.appendChild(this.$refs.modal);
-    }
-
-    return this;
-  }
-
-  get $refs() {
-    const $refs = super.$refs;
-
-    if (this.$options.move && this.__refsBackup) {
-      Object.entries(this.__refsBackup).forEach(([key, ref]) => {
-        if (!$refs[key]) {
-          $refs[key] = ref;
-        }
-      });
-    }
-
-    return $refs;
-  }
-
-  destroyed() {
-    this.close();
-
-    if (this.$options.move && this.__refModalParentBackup) {
-      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);
-
-      this.__refModalPlaceholder.remove();
-
-      delete this.__refModalPlaceholder;
-      delete this.__refModalParentBackup;
-    }
-
-    return this;
-  }
-
-  keyed({
-    event,
-    isUp,
-    isDown,
-    ESC
-  }) {
-    if (!this.isOpen) {
-      return;
-    }
-
-    if (isDown) {
-      trap(this.$refs.modal, event);
-    }
-
-    if (ESC && isUp) {
-      this.close();
-    }
-  }
-
-  async open() {
-    if (this.isOpen) {
-      return Promise.resolve(this);
-    }
-
-    this.$refs.modal.setAttribute('aria-hidden', 'false');
-    document.documentElement.style.overflow = 'hidden';
-    this.isOpen = true;
-    this.$emit('open');
-    const refs = this.$refs;
-    return Promise.all(Object.entries(this.$options.styles).map(([refName, {
-      open,
-      active,
-      closed
-    } = {
-      open: '',
-      active: '',
-      closed: ''
-    }]) => transition(refs[refName], {
-      from: closed,
-      active,
-      to: open
-    }, 'keep'))).then(() => {
-      if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
-        saveActiveElement();
-        const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
-        autofocusElement.focus();
-      }
-
-      return Promise.resolve(this);
-    });
-  }
-
-  async close() {
-    if (!this.isOpen) {
-      return Promise.resolve(this);
-    }
-
-    this.$refs.modal.setAttribute('aria-hidden', 'true');
-    document.documentElement.style.overflow = '';
-    this.isOpen = false;
-    untrap();
-    this.$emit('close');
-    const refs = this.$refs;
-    return Promise.all(Object.entries(this.$options.styles).map(([refName, {
-      open,
-      active,
-      closed
-    } = {
-      open: '',
-      active: '',
-      closed: ''
-    }]) => transition(refs[refName], {
-      from: open,
-      active,
-      to: closed
-    }, 'keep'))).then(() => Promise.resolve(this));
-  }
-
-}

package/Tabs.js

@@ -1,106 +0,0 @@
-import { Base } from '@studiometa/js-toolkit';
-import transition from '@studiometa/js-toolkit/utils/css/transition.js';
-export default class Tabs extends Base {
-  static config = {
-    name: 'Tabs',
-    refs: ['btn[]', 'content[]'],
-    emits: ['enable', 'disable'],
-    options: {
-      styles: {
-        type: Object,
-        default: () => ({
-          content: {
-            closed: {
-              position: 'absolute',
-              opacity: '0',
-              pointerEvents: 'none',
-              visibility: 'hidden'
-            }
-          }
-        })
-      }
-    }
-  };
-
-  mounted() {
-    this.items = this.$refs.btn.map((btn, index) => {
-      const id = `${this.$id}-${index}`;
-      const content = this.$refs.content[index];
-      btn.setAttribute('id', id);
-      content.setAttribute('aria-labelledby', id);
-      const item = {
-        btn,
-        content,
-        isEnabled: index > 0
-      };
-
-      if (index > 0) {
-        this.disableItem(item);
-      } else {
-        this.enableItem(item);
-      }
-
-      return item;
-    });
-  }
-
-  onBtnClick(event, index) {
-    this.items.forEach((item, i) => {
-      if (i !== index) {
-        this.disableItem(item);
-      }
-    });
-    this.enableItem(this.items[index]);
-  }
-
-  async enableItem(item) {
-    if (!item || item.isEnabled) {
-      return Promise.resolve(this);
-    }
-
-    item.isEnabled = true;
-    const {
-      btn,
-      content
-    } = item;
-    const btnStyles = this.$options.styles.btn || {};
-    const contentStyles = this.$options.styles.content || {};
-    content.setAttribute('aria-hidden', 'false');
-    this.$emit('enable', item);
-    return Promise.all([transition(btn, {
-      from: btnStyles.closed,
-      active: btnStyles.active,
-      to: btnStyles.open
-    }, 'keep'), transition(content, {
-      from: contentStyles.closed,
-      active: contentStyles.active,
-      to: contentStyles.open
-    }, 'keep')]).then(() => Promise.resolve(this));
-  }
-
-  async disableItem(item) {
-    if (!item || !item.isEnabled) {
-      return Promise.resolve(this);
-    }
-
-    item.isEnabled = false;
-    const {
-      btn,
-      content
-    } = item;
-    const btnStyles = this.$options.styles.btn || {};
-    const contentStyles = this.$options.styles.content || {};
-    content.setAttribute('aria-hidden', 'true');
-    this.$emit('disable', item);
-    return Promise.all([transition(btn, {
-      from: btnStyles.open,
-      active: btnStyles.active,
-      to: btnStyles.closed
-    }, 'keep'), transition(content, {
-      from: contentStyles.open,
-      active: contentStyles.active,
-      to: contentStyles.closed
-    }, 'keep')]).then(() => Promise.resolve(this));
-  }
-
-}