@studiometa/ui 0.1.1 → 0.2.0

package/molecules/Tabs/Tabs.js

@@ -0,0 +1,126 @@
+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;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { Base } from "@studiometa/js-toolkit";
+import { transition } from "@studiometa/js-toolkit/utils";
+class Tabs extends Base {
+  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]);
+  }
+  enableItem(item) {
+    return __async(this, null, function* () {
+      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));
+    });
+  }
+  disableItem(item) {
+    return __async(this, null, function* () {
+      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));
+    });
+  }
+}
+__publicField(Tabs, "config", {
+  name: "Tabs",
+  refs: ["btn[]", "content[]"],
+  emits: ["enable", "disable"],
+  options: {
+    styles: {
+      type: Object,
+      default: () => ({
+        content: {
+          closed: {
+            position: "absolute",
+            opacity: "0",
+            pointerEvents: "none",
+            visibility: "hidden"
+          }
+        }
+      })
+    }
+  }
+});
+export {
+  Tabs as default
+};

package/molecules/index.cjs

@@ -0,0 +1,44 @@
+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/molecules/index.js
+var molecules_exports = {};
+__export(molecules_exports, {
+  Accordion: () => import_Accordion.default,
+  AccordionItem: () => import_AccordionItem.default,
+  Modal: () => import_Modal.default,
+  Sticky: () => import_Sticky.default,
+  Tabs: () => import_Tabs.default
+});
+var import_Accordion = __toESM(require("./Accordion/Accordion.cjs"), 1);
+var import_AccordionItem = __toESM(require("./Accordion/AccordionItem.cjs"), 1);
+var import_Modal = __toESM(require("./Modal/Modal.cjs"), 1);
+var import_Tabs = __toESM(require("./Tabs/Tabs.cjs"), 1);
+var import_Sticky = __toESM(require("./Sticky/Sticky.cjs"), 1);
+module.exports = __toCommonJS(molecules_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Accordion } from "./Accordion/Accordion.js";
+export { default as AccordionItem } from "./Accordion/AccordionItem.js";
+export { default as Modal } from "./Modal/Modal.js";
+export { default as Tabs } from "./Tabs/Tabs.js";
+export { default as Sticky } from "./Sticky/Sticky.js";

package/molecules/index.js

@@ -0,0 +1,12 @@
+import { default as default2 } from "./Accordion/Accordion.js";
+import { default as default3 } from "./Accordion/AccordionItem.js";
+import { default as default4 } from "./Modal/Modal.js";
+import { default as default5 } from "./Tabs/Tabs.js";
+import { default as default6 } from "./Sticky/Sticky.js";
+export {
+  default2 as Accordion,
+  default3 as AccordionItem,
+  default4 as Modal,
+  default6 as Sticky,
+  default5 as Tabs
+};

package/organisms/index.cjs

@@ -0,0 +1,23 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: 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);
+
+// packages/ui/organisms/index.js
+var organisms_exports = {};
+module.exports = __toCommonJS(organisms_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/organisms/index.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
-    "@studiometa/js-toolkit": "^2.0.0-beta.8",
+    "@studiometa/js-toolkit": "^2.0.0-beta.15",
     "deepmerge": "^4.2.2",
     "motion": "^10.5.0"
   }

package/primitives/Draggable/Draggable.cjs

@@ -0,0 +1,64 @@
+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/Draggable/Draggable.js
+var Draggable_exports = {};
+__export(Draggable_exports, {
+  default: () => Draggable
+});
+var import_motion = require("motion");
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var _Draggable = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit.Base) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "x", 0);
+    __publicField(this, "y", 0);
+    __publicField(this, "originX", 0);
+    __publicField(this, "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;
+    (0, import_motion.animate)(this.$el, { x: this.x, y: this.y }, _Draggable.animateOptions);
+  }
+};
+var Draggable = _Draggable;
+__publicField(Draggable, "config", {
+  name: "DraggableElement"
+});
+__publicField(Draggable, "animateOptions", {
+  easing: "linear",
+  duration: 0
+});
+module.exports = __toCommonJS(Draggable_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/primitives/Draggable/Draggable.js

@@ -0,0 +1,38 @@
+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 { animate } from "motion";
+import { Base, withDrag } from "@studiometa/js-toolkit";
+const _Draggable = class extends withDrag(Base) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "x", 0);
+    __publicField(this, "y", 0);
+    __publicField(this, "originX", 0);
+    __publicField(this, "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);
+  }
+};
+let Draggable = _Draggable;
+__publicField(Draggable, "config", {
+  name: "DraggableElement"
+});
+__publicField(Draggable, "animateOptions", {
+  easing: "linear",
+  duration: 0
+});
+export {
+  Draggable as default
+};

package/primitives/Sentinel/Sentinel.cjs

@@ -0,0 +1,41 @@
+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/Sentinel/Sentinel.js
+var Sentinel_exports = {};
+__export(Sentinel_exports, {
+  default: () => Sentinel
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var Sentinel = class extends (0, import_js_toolkit.withIntersectionObserver)(import_js_toolkit.Base, { threshold: [0, 1] }) {
+};
+__publicField(Sentinel, "config", {
+  name: "Sentinel"
+});
+module.exports = __toCommonJS(Sentinel_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/primitives/Sentinel/Sentinel.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Sentinel class.
+ */
+export default class Sentinel extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+    };
+}
+import { Base } from "@studiometa/js-toolkit";

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/index.cjs

@@ -0,0 +1,38 @@
+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
+});
+var import_Draggable = __toESM(require("./Draggable/Draggable.cjs"), 1);
+var import_Sentinel = __toESM(require("./Sentinel/Sentinel.cjs"), 1);
+module.exports = __toCommonJS(primitives_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/primitives/index.d.ts

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

package/primitives/index.js

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

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