@studiometa/ui 0.1.1 → 0.2.2

package/primitives/Sentinel/Sentinel.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base, withIntersectionObserver } from "@studiometa/js-toolkit";
+class Sentinel extends withIntersectionObserver(Base, { threshold: [0, 1] }) {
+}
+__publicField(Sentinel, "config", {
+  name: "Sentinel"
+});
+export {
+  Sentinel as default
+};

package/primitives/Transition/Transition.cjs

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/primitives/Transition/Transition.js
+var Transition_exports = {};
+__export(Transition_exports, {
+  default: () => Transition
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var Transition = class extends import_js_toolkit.Base {
+  get target() {
+    return this.$el;
+  }
+  enter() {
+    const { enterFrom, enterActive, enterTo, enterKeep } = this.$options;
+    return (0, import_utils.transition)(this.target, {
+      from: enterFrom,
+      active: enterActive,
+      to: enterTo
+    }, enterKeep && "keep");
+  }
+  leave() {
+    const { leaveFrom, leaveActive, leaveTo, leaveKeep } = this.$options;
+    return (0, import_utils.transition)(this.target, {
+      from: leaveFrom,
+      active: leaveActive,
+      to: leaveTo
+    }, leaveKeep && "keep");
+  }
+};
+__publicField(Transition, "config", {
+  name: "Transition",
+  options: {
+    enterFrom: String,
+    enterActive: String,
+    enterTo: String,
+    enterKeep: Boolean,
+    leaveFrom: String,
+    leaveActive: String,
+    leaveTo: String,
+    leaveKeep: Boolean
+  }
+});
+module.exports = __toCommonJS(Transition_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/primitives/Transition/Transition.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @typedef {Object} TransitionOptions
+ * @property {string} enterFrom
+ * @property {string} enterActive
+ * @property {string} enterTo
+ * @property {boolean} enterKeep
+ * @property {string} leaveFrom
+ * @property {string} leaveActive
+ * @property {string} leaveTo
+ * @property {boolean} leaveKeep
+ */
+/**
+ * Transition class.
+ * @typedef {Transition & { $options: TransitionOptions }} TransitionInterface
+ */
+export default class Transition extends Base {
+    static config: {
+        name: string;
+        options: {
+            enterFrom: StringConstructor;
+            enterActive: StringConstructor;
+            enterTo: StringConstructor;
+            enterKeep: BooleanConstructor;
+            leaveFrom: StringConstructor;
+            leaveActive: StringConstructor;
+            leaveTo: StringConstructor;
+            leaveKeep: BooleanConstructor;
+        };
+    };
+    /**
+     * Get the transition target.
+     *
+     * @returns {HTMLElement}
+     */
+    get target(): HTMLElement;
+    /**
+     * Trigger the enter transition.
+     *
+     * @todo merge leaveTo and enterFrom classes when leaveKeep is active
+     * @this {TransitionInterface}
+     * @returns {Promise<void>}
+     */
+    enter(): Promise<void>;
+    /**
+     * Trigger the leave transition.
+     *
+     * @todo merge enterTo and leaveTo classes when enterKeep is active
+     * @this {TransitionInterface}
+     * @returns {Promise<void>}
+     */
+    leave(): Promise<void>;
+}
+export type TransitionOptions = {
+    enterFrom: string;
+    enterActive: string;
+    enterTo: string;
+    enterKeep: boolean;
+    leaveFrom: string;
+    leaveActive: string;
+    leaveTo: string;
+    leaveKeep: boolean;
+};
+/**
+ * Transition class.
+ */
+export type TransitionInterface = Transition & {
+    $options: TransitionOptions;
+};
+import { Base } from "@studiometa/js-toolkit";

package/primitives/Transition/Transition.js

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base } from "@studiometa/js-toolkit";
+import { transition } from "@studiometa/js-toolkit/utils";
+class Transition extends Base {
+  get target() {
+    return this.$el;
+  }
+  enter() {
+    const { enterFrom, enterActive, enterTo, enterKeep } = this.$options;
+    return transition(this.target, {
+      from: enterFrom,
+      active: enterActive,
+      to: enterTo
+    }, enterKeep && "keep");
+  }
+  leave() {
+    const { leaveFrom, leaveActive, leaveTo, leaveKeep } = this.$options;
+    return transition(this.target, {
+      from: leaveFrom,
+      active: leaveActive,
+      to: leaveTo
+    }, leaveKeep && "keep");
+  }
+}
+__publicField(Transition, "config", {
+  name: "Transition",
+  options: {
+    enterFrom: String,
+    enterActive: String,
+    enterTo: String,
+    enterKeep: Boolean,
+    leaveFrom: String,
+    leaveActive: String,
+    leaveTo: String,
+    leaveKeep: Boolean
+  }
+});
+export {
+  Transition as default
+};

package/primitives/index.cjs

@@ -0,0 +1,40 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/ui/primitives/index.js
+var primitives_exports = {};
+__export(primitives_exports, {
+  Draggable: () => import_Draggable.default,
+  Sentinel: () => import_Sentinel.default,
+  Transition: () => import_Transition.default
+});
+var import_Draggable = __toESM(require("./Draggable/Draggable.cjs"), 1);
+var import_Sentinel = __toESM(require("./Sentinel/Sentinel.cjs"), 1);
+var import_Transition = __toESM(require("./Transition/Transition.cjs"), 1);
+module.exports = __toCommonJS(primitives_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/primitives/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Draggable } from "./Draggable/Draggable.js";
+export { default as Sentinel } from "./Sentinel/Sentinel.js";
+export { default as Transition } from "./Transition/Transition.js";

package/primitives/index.js

@@ -0,0 +1,8 @@
+import { default as default2 } from "./Draggable/Draggable.js";
+import { default as default3 } from "./Sentinel/Sentinel.js";
+import { default as default4 } from "./Transition/Transition.js";
+export {
+  default2 as Draggable,
+  default3 as Sentinel,
+  default4 as Transition
+};

package/Accordion/Accordion.js

@@ -1,29 +0,0 @@
-import { Base } from '@studiometa/js-toolkit';
-export default class Accordion extends Base {
-  static config = {
-    name: 'Accordion',
-    emits: ['open', 'close'],
-    options: {
-      autoclose: Boolean,
-      item: {
-        type: Object,
-        default: () => ({})
-      }
-    }
-  };
-
-  onAccordionItemOpen(index) {
-    const accordionItem = this.$children.AccordionItem[index];
-    this.$emit('open', accordionItem, index);
-
-    if (this.$options.autoclose) {
-      this.$children.AccordionItem.filter((el, i) => index !== i).forEach(item => item.close());
-    }
-  }
-
-  onAccordionItemClose(index) {
-    const accordionItem = this.$children.AccordionItem[index];
-    this.$emit('close', accordionItem, index);
-  }
-
-}

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