@studiometa/ui 0.1.1 → 0.2.0

package/Accordion/AccordionItem.js

@@ -1,197 +0,0 @@
-import deepmerge from 'deepmerge';
-import { Base } from '@studiometa/js-toolkit';
-import * as styles from '@studiometa/js-toolkit/utils/css/styles.js';
-import transition from '@studiometa/js-toolkit/utils/css/transition.js';
-import Accordion from './Accordion.js';
-export default class AccordionItem extends Base {
-  static config = {
-    name: 'AccordionItem',
-    refs: ['btn', 'content', 'container'],
-    emits: ['open', 'close'],
-    options: {
-      isOpen: Boolean,
-      styles: {
-        type: Object,
-        default: () => ({
-          container: {
-            open: '',
-            active: '',
-            closed: ''
-          }
-        })
-      }
-    }
-  };
-
-  mounted() {
-    if (this.$parent && this.$parent instanceof Accordion && this.$parent.$options.item) {
-      Object.entries(this.$parent.$options.item).forEach(([key, value]) => {
-        if (key in this.$options) {
-          const type = AccordionItem.config.options[key].type || AccordionItem.config.options[key];
-
-          if (type === Array || type === Object) {
-            this.$options[key] = deepmerge(this.$options[key], value);
-          } else {
-            this.$options[key] = value;
-          }
-        }
-      });
-    }
-
-    this.$refs.btn.setAttribute('id', this.$id);
-    this.$refs.btn.setAttribute('aria-controls', this.contentId);
-    this.$refs.content.setAttribute('aria-labelledby', this.$id);
-    this.$refs.content.setAttribute('id', this.contentId);
-    const {
-      isOpen
-    } = this.$options;
-    this.updateAttributes(isOpen);
-
-    if (!isOpen) {
-      styles.add(this.$refs.container, {
-        visibility: 'invisible',
-        height: '0'
-      });
-    }
-
-    const {
-      container,
-      ...otherStyles
-    } = this.$options.styles;
-    const refs = this.$refs;
-    Object.entries(otherStyles).filter(([refName]) => refs[refName]).forEach(([refName, {
-      open,
-      closed
-    } = {
-      open: '',
-      closed: ''
-    }]) => {
-      transition(refs[refName], {
-        to: isOpen ? open : closed
-      }, 'keep');
-    });
-  }
-
-  destroyed() {
-    styles.remove(this.$refs.container, {
-      visibility: '',
-      height: ''
-    });
-  }
-
-  onBtnClick() {
-    if (this.$options.isOpen) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-
-  get contentId() {
-    return `content-${this.$id}`;
-  }
-
-  updateAttributes(isOpen) {
-    this.$refs.content.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
-    this.$refs.btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-  }
-
-  async open() {
-    if (this.$options.isOpen) {
-      return;
-    }
-
-    this.$log('open');
-    this.$emit('open');
-    this.$options.isOpen = true;
-    this.updateAttributes(this.$options.isOpen);
-    styles.remove(this.$refs.container, {
-      visibility: 'invisible'
-    });
-    const {
-      container,
-      ...otherStyles
-    } = this.$options.styles;
-    const refs = this.$refs;
-    await Promise.all([transition(refs.container, {
-      from: {
-        height: 0
-      },
-      active: container.active,
-      to: {
-        height: `${refs.content.offsetHeight}px`
-      }
-    }).then(() => {
-      if (this.$options.isOpen) {
-        styles.remove(refs.content, {
-          position: 'absolute'
-        });
-      }
-
-      return Promise.resolve();
-    }), ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, {
-      open,
-      active,
-      closed
-    } = {
-      open: '',
-      active: '',
-      closed: ''
-    }]) => transition(refs[refName], {
-      from: closed,
-      active,
-      to: open
-    }, 'keep'))]);
-  }
-
-  async close() {
-    if (!this.$options.isOpen) {
-      return;
-    }
-
-    this.$log('close');
-    this.$emit('close');
-    this.$options.isOpen = false;
-    const height = this.$refs.container.offsetHeight;
-    styles.add(this.$refs.content, {
-      position: 'absolute'
-    });
-    const {
-      container,
-      ...otherStyles
-    } = this.$options.styles;
-    const refs = this.$refs;
-    await Promise.all([transition(refs.container, {
-      from: {
-        height: `${height}px`
-      },
-      active: container.active,
-      to: {
-        height: '0'
-      }
-    }).then(() => {
-      if (!this.$options.isOpen) {
-        styles.add(refs.container, {
-          height: '0',
-          visibility: 'invisible'
-        });
-        this.updateAttributes(this.$options.isOpen);
-      }
-
-      return Promise.resolve();
-    }), ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, {
-      open,
-      active,
-      closed
-    } = {
-      open: '',
-      active: '',
-      closed: ''
-    }]) => transition(refs[refName], {
-      from: open,
-      active,
-      to: closed
-    }, 'keep'))]);
-  }
-
-}

package/Accordion/index.js

@@ -1,12 +0,0 @@
-import AccordionCore from './Accordion.js';
-import AccordionItem from './AccordionItem.js';
-
-class Accordion extends AccordionCore {
-  static config = { ...AccordionCore.config,
-    components: {
-      AccordionItem
-    }
-  };
-}
-
-export default Accordion;

package/Cursor.js

@@ -1,121 +0,0 @@
-import { Base } from '@studiometa/js-toolkit';
-import damp from '@studiometa/js-toolkit/utils/math/damp.js';
-import matrix from '@studiometa/js-toolkit/utils/css/matrix.js';
-export default class Cursor extends Base {
-  static config = {
-    name: 'Cursor',
-    options: {
-      growSelectors: {
-        type: String,
-        default: 'a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *'
-      },
-      shrinkSelectors: {
-        type: String,
-        default: '[data-cursor-shrink], [data-cursor-shrink] *'
-      },
-      growTo: {
-        type: Number,
-        default: 2
-      },
-      shrinkTo: {
-        type: Number,
-        default: 0.5
-      },
-      translateDampFactor: {
-        type: Number,
-        default: 0.25
-      },
-      growDampFactor: {
-        type: Number,
-        default: 0.25
-      },
-      shrinkDampFactor: {
-        type: Number,
-        default: 0.25
-      }
-    }
-  };
-  x = 0;
-  y = 0;
-  scale = 0;
-  pointerX = 0;
-  pointerY = 0;
-  pointerScale = 0;
-
-  mounted() {
-    this.x = 0;
-    this.y = 0;
-    this.scale = 0;
-    this.pointerX = 0;
-    this.pointerY = 0;
-    this.pointerScale = 0;
-    this.render({
-      x: this.x,
-      y: this.y,
-      scale: this.scale
-    });
-  }
-
-  moved({
-    event,
-    x,
-    y,
-    isDown
-  }) {
-    if (!this.$services.has('ticked')) {
-      this.$services.enable('ticked');
-    }
-
-    this.pointerX = x;
-    this.pointerY = y;
-    let scale = 1;
-
-    if (!event) {
-      this.pointerScale = scale;
-      return;
-    }
-
-    const shouldGrow = event.target instanceof Element && event.target.matches(this.$options.growSelectors) || false;
-    const shouldReduce = isDown || event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors) || false;
-
-    if (shouldGrow) {
-      scale = this.$options.growTo;
-    }
-
-    if (shouldReduce) {
-      scale = this.$options.shrinkTo;
-    }
-
-    this.pointerScale = scale;
-  }
-
-  ticked() {
-    this.x = damp(this.pointerX, this.x, this.$options.translateDampFactor);
-    this.y = damp(this.pointerY, this.y, this.$options.translateDampFactor);
-    this.scale = damp(this.pointerScale, this.scale, this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor);
-    this.render({
-      x: this.x,
-      y: this.y,
-      scale: this.scale
-    });
-
-    if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {
-      this.$services.disable('ticked');
-    }
-  }
-
-  render({
-    x,
-    y,
-    scale
-  }) {
-    const transform = matrix({
-      translateX: x,
-      translateY: y,
-      scaleX: scale,
-      scaleY: scale
-    });
-    this.$el.style.transform = `translateZ(0) ${transform}`;
-  }
-
-}

package/Draggable.js

@@ -1,31 +0,0 @@
-import { animate } from 'motion';
-import { Base, withDrag } from '@studiometa/js-toolkit';
-export default class Draggable extends withDrag(Base) {
-  static config = {
-    name: 'DraggableElement'
-  };
-  static animateOptions = {
-    easing: 'linear',
-    duration: 0
-  };
-  x = 0;
-  y = 0;
-  originX = 0;
-  originY = 0;
-
-  dragged(props) {
-    if (props.mode === 'start') {
-      this.originX = this.x;
-      this.originY = this.y;
-      return;
-    }
-
-    this.x = this.originX + props.x - props.origin.x;
-    this.y = this.originY + props.y - props.origin.y;
-    animate(this.$el, {
-      x: this.x,
-      y: this.y
-    }, Draggable.animateOptions);
-  }
-
-}

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));
-  }
-
-}