@studiometa/ui 0.2.13 → 0.2.14

package/decorators/withTransition.d.ts

@@ -1,35 +1,5 @@
-/**
- * @typedef {{
- *   $options: {
- *     enterFrom: string,
- *     enterActive: string,
- *     enterTo: string,
- *     enterKeep: boolean,
- *     leaveFrom: string,
- *     leaveActive: string,
- *     leaveTo: string,
- *     leaveKeep: boolean,
- *   }
- * }} TransitionInterface
- */
-/**
- * Extend a class to add transition capabilities.
- * @template {typeof import('@studiometa/js-toolkit').Base} T
- * @param    {T} BaseClass
- * @returns  {T & {
- *   new(...a: any[]): {
- *     get target(): HTMLElement|HTMLElement[];
- *     enter(target?: HTMLElement|HTMLElement[]): Promise<void|void[]>;
- *     leave(target?: HTMLElement|HTMLElement[]): Promise<void|void[]>;
- *   }
- * }}
- */
-export default function withTransition<T extends typeof import("@studiometa/js-toolkit").Base>(BaseClass: T): T & (new (...a: any[]) => {
-    readonly target: HTMLElement | HTMLElement[];
-    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
-    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
-});
-export type TransitionInterface = {
+import type { Base, BaseDecorator, BaseProps, BaseInterface } from '@studiometa/js-toolkit';
+export interface TransitionProps extends BaseProps {
     $options: {
         enterFrom: string;
         enterActive: string;
@@ -40,4 +10,22 @@ export type TransitionInterface = {
         leaveTo: string;
         leaveKeep: boolean;
     };
-};
+}
+export interface TransitionInterface extends BaseInterface {
+    /**
+     * Get the transition target.
+     */
+    get target(): HTMLElement | HTMLElement[];
+    /**
+     * Trigger the enter transition.
+     */
+    enter(target?: HTMLElement | HTMLElement[]): Promise<void>;
+    /**
+     * Trigger the leave transition.
+     */
+    leave(target?: HTMLElement | HTMLElement[]): Promise<void>;
+}
+/**
+ * Extend a class to add transition capabilities.
+ */
+export declare function withTransition<S extends Base>(BaseClass: typeof Base): BaseDecorator<TransitionInterface, S, TransitionProps>;

package/decorators/withTransition.js

@@ -1 +1,60 @@
-import{transition as v,isArray as g}from"@studiometa/js-toolkit/utils";function c(e,r,n){return g(e)?Promise.all(e.map(t=>v(t,r,n))):v(e,r,n)}function p(e){class r extends e{static config={name:"Transition",options:{enterFrom:String,enterActive:String,enterTo:String,enterKeep:Boolean,leaveFrom:String,leaveActive:String,leaveTo:String,leaveKeep:Boolean}};get target(){return this.$el}enter(t){const{enterFrom:i,enterActive:o,enterTo:a,enterKeep:s,leaveTo:l}=this.$options;return c(t??this.target,{from:(l+" "+i).trim(),active:o,to:a},s&&"keep")}leave(t){const{leaveFrom:i,leaveActive:o,leaveTo:a,leaveKeep:s,enterTo:l}=this.$options;return c(t??this.target,{from:(l+" "+i).trim(),active:o,to:a},s&&"keep")}}return r}export{p as default};
+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 { transition, isArray } from "@studiometa/js-toolkit/utils";
+function delegateTransition(elementOrElements, name, endMode) {
+  return isArray(elementOrElements) || elementOrElements instanceof NodeList ? Promise.all(
+    Array.from(elementOrElements).map((el) => transition(el, name, endMode))
+  ) : transition(elementOrElements, name, endMode);
+}
+function withTransition(BaseClass) {
+  class Transition extends BaseClass {
+    get target() {
+      return this.$el;
+    }
+    async enter(target) {
+      const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;
+      await delegateTransition(
+        target != null ? target : this.target,
+        {
+          from: (leaveTo + " " + enterFrom).trim(),
+          active: enterActive,
+          to: enterTo
+        },
+        enterKeep && "keep"
+      );
+    }
+    async leave(target) {
+      const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;
+      await delegateTransition(
+        target != null ? target : this.target,
+        {
+          from: (enterTo + " " + leaveFrom).trim(),
+          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
+    }
+  });
+  return Transition;
+}
+export {
+  withTransition
+};

package/index.cjs

@@ -13,7 +13,7 @@ var __copyProps = (to, from, except, desc) => {
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/ui/index.js
+// packages/ui/index.ts
 var ui_exports = {};
 module.exports = __toCommonJS(ui_exports);
 __reExport(ui_exports, require("./primitives/index.cjs"), module.exports);

package/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./primitives/index.js";
-export * from "./atoms/index.js";
-export * from "./molecules/index.js";
-export * from "./organisms/index.js";
-export * from "./decorators/index.js";
+export * from './primitives/index.js';
+export * from './atoms/index.js';
+export * from './molecules/index.js';
+export * from './organisms/index.js';
+export * from './decorators/index.js';

package/index.js

@@ -1 +1,5 @@
-export*from"./primitives/index.js";export*from"./atoms/index.js";export*from"./molecules/index.js";export*from"./organisms/index.js";export*from"./decorators/index.js";
+export * from "./primitives/index.js";
+export * from "./atoms/index.js";
+export * from "./molecules/index.js";
+export * from "./organisms/index.js";
+export * from "./decorators/index.js";

package/molecules/Accordion/Accordion.cjs

@@ -1,8 +1,6 @@
-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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,27 +15,26 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Accordion/Accordion.js
+// packages/ui/molecules/Accordion/Accordion.ts
 var Accordion_exports = {};
 __export(Accordion_exports, {
-  default: () => Accordion
+  Accordion: () => Accordion
 });
 module.exports = __toCommonJS(Accordion_exports);
-var import_AccordionCore = __toESM(require("./AccordionCore.cjs"), 1);
-var import_AccordionItem = __toESM(require("./AccordionItem.cjs"), 1);
-var Accordion = class extends import_AccordionCore.default {
+var import_AccordionCore = require("./AccordionCore.cjs");
+var import_AccordionItem = require("./AccordionItem.cjs");
+var Accordion = class extends import_AccordionCore.AccordionCore {
 };
 __publicField(Accordion, "config", {
-  ...import_AccordionCore.default.config,
+  ...import_AccordionCore.AccordionCore.config,
   components: {
-    AccordionItem: import_AccordionItem.default
+    AccordionItem: import_AccordionItem.AccordionItem
   }
 });
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Accordion/Accordion.d.ts

@@ -1,27 +1,9 @@
-/**
- * @typedef {import('./AccordionCore.js').AccordionInterface} AccordionInterface
- * @typedef {import('./AccordionItem.js').AccordionItemInterface} AccordionItemInterface
- */
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { AccordionCore } from './AccordionCore.js';
+import type { AccordionProps } from './AccordionCore.js';
 /**
  * Accordion class.
  */
-export default class Accordion extends AccordionCore {
-    static config: {
-        components: {
-            AccordionItem: typeof AccordionItem;
-        };
-        name: string;
-        emits: string[];
-        options: {
-            autoclose: BooleanConstructor;
-            item: {
-                type: ObjectConstructor;
-                default: () => Partial<import("./AccordionItem.js").AccordionItemOptions>;
-            };
-        };
-    };
+export declare class Accordion<T extends BaseProps = BaseProps> extends AccordionCore<T & AccordionProps> {
+    static config: BaseConfig;
 }
-export type AccordionInterface = import('./AccordionCore.js').AccordionInterface;
-export type AccordionItemInterface = import('./AccordionItem.js').AccordionItemInterface;
-import AccordionCore from "./AccordionCore.js";
-import AccordionItem from "./AccordionItem.js";

package/molecules/Accordion/Accordion.js

@@ -1 +1,19 @@
-import o from"./AccordionCore.js";import c from"./AccordionItem.js";class r extends o{static config={...o.config,components:{AccordionItem:c}}}export{r as default};
+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 { AccordionCore } from "./AccordionCore.js";
+import { AccordionItem } from "./AccordionItem.js";
+class Accordion extends AccordionCore {
+}
+__publicField(Accordion, "config", {
+  ...AccordionCore.config,
+  components: {
+    AccordionItem
+  }
+});
+export {
+  Accordion
+};

package/molecules/Accordion/AccordionCore.cjs

@@ -21,27 +21,25 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/molecules/Accordion/AccordionCore.js
+// packages/ui/molecules/Accordion/AccordionCore.ts
 var AccordionCore_exports = {};
 __export(AccordionCore_exports, {
-  default: () => Accordion
+  AccordionCore: () => AccordionCore
 });
 module.exports = __toCommonJS(AccordionCore_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
-var Accordion = class extends import_js_toolkit.Base {
+var AccordionCore = class extends import_js_toolkit.Base {
   onAccordionItemOpen(index) {
-    const accordionItem = this.$children.AccordionItem[index];
-    this.$emit("open", accordionItem, index);
+    this.$emit("open", this.$children.AccordionItem[index], 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);
+    this.$emit("close", this.$children.AccordionItem[index], index);
   }
 };
-__publicField(Accordion, "config", {
+__publicField(AccordionCore, "config", {
   name: "Accordion",
   emits: ["open", "close"],
   options: {

package/molecules/Accordion/AccordionCore.d.ts

@@ -1,81 +1,33 @@
-/**
- * @typedef {import('./AccordionItem').default} AccordionItem
- * @typedef {import('./AccordionItem').AccordionItemOptions} AccordionItemOptions
- */
-/**
- * @typedef {Object} AccordionRefs
- * @property {HTMLElement[]} btn
- * @property {HTMLElement[]} content
- */
-/**
- * @typedef {Object} AccordionOptions
- * @property {Boolean} autoclose
- * @property {AccordionItemOptions} item
- */
-/**
- * @typedef {Object} AccordionChildren
- * @property {AccordionItem[]} AccordionItem
- */
-/**
- * @typedef {Object} AccordionPrivateInterface
- * @property {AccordionOptions} $options
- * @property {AccordionRefs} $refs
- * @property {AccordionChildren} $children
- */
-/**
- * @typedef {Accordion & AccordionPrivateInterface} AccordionInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import type { AccordionItem, AccordionItemProps } from './AccordionItem';
+export interface AccordionProps extends BaseProps {
+    $refs: {
+        btn: HTMLElement[];
+        content: HTMLElement[];
+    };
+    $options: {
+        autoclose: boolean;
+        item: AccordionItemProps['$options'];
+    };
+    $children: {
+        AccordionItem: AccordionItem[];
+    };
+}
 /**
  * Accordion class.
  */
-export default class Accordion extends Base {
+export declare class AccordionCore<T extends BaseProps = BaseProps> extends Base<T & AccordionProps> {
     /**
      * Accordion config.
      */
-    static config: {
-        name: string;
-        emits: string[];
-        options: {
-            autoclose: BooleanConstructor;
-            item: {
-                type: ObjectConstructor;
-                /**
-                 * @return {Partial<AccordionItemOptions>}
-                 */
-                default: () => Partial<AccordionItemOptions>;
-            };
-        };
-    };
+    static config: BaseConfig;
     /**
-     * @this {AccordionInterface}
-     * @param {number} index
-     * @return {void}
+     * Synchronize close on open.
      */
-    onAccordionItemOpen(this: AccordionInterface, index: number): void;
+    onAccordionItemOpen(index: number): void;
     /**
-     * @this {AccordionInterface}
-     * @param {number} index
-     * @return {void}
+     * Emit close event.
      */
-    onAccordionItemClose(this: AccordionInterface, index: number): void;
+    onAccordionItemClose(index: number): void;
 }
-export type AccordionItem = import('./AccordionItem').default;
-export type AccordionItemOptions = import('./AccordionItem').AccordionItemOptions;
-export type AccordionRefs = {
-    btn: HTMLElement[];
-    content: HTMLElement[];
-};
-export type AccordionOptions = {
-    autoclose: boolean;
-    item: AccordionItemOptions;
-};
-export type AccordionChildren = {
-    AccordionItem: AccordionItem[];
-};
-export type AccordionPrivateInterface = {
-    $options: AccordionOptions;
-    $refs: AccordionRefs;
-    $children: AccordionChildren;
-};
-export type AccordionInterface = Accordion & AccordionPrivateInterface;
-import { Base } from "@studiometa/js-toolkit";

package/molecules/Accordion/AccordionCore.js

@@ -1 +1,32 @@
-import{Base as i}from"@studiometa/js-toolkit";class n extends i{static config={name:"Accordion",emits:["open","close"],options:{autoclose:Boolean,item:{type:Object,default:()=>({})}}};onAccordionItemOpen(o){const c=this.$children.AccordionItem[o];this.$emit("open",c,o),this.$options.autoclose&&this.$children.AccordionItem.filter((t,e)=>o!==e).forEach(t=>t.close())}onAccordionItemClose(o){const c=this.$children.AccordionItem[o];this.$emit("close",c,o)}}export{n as default};
+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";
+class AccordionCore extends Base {
+  onAccordionItemOpen(index) {
+    this.$emit("open", this.$children.AccordionItem[index], index);
+    if (this.$options.autoclose) {
+      this.$children.AccordionItem.filter((el, i) => index !== i).forEach((item) => item.close());
+    }
+  }
+  onAccordionItemClose(index) {
+    this.$emit("close", this.$children.AccordionItem[index], index);
+  }
+}
+__publicField(AccordionCore, "config", {
+  name: "Accordion",
+  emits: ["open", "close"],
+  options: {
+    autoclose: Boolean,
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+});
+export {
+  AccordionCore
+};

package/molecules/Accordion/AccordionItem.cjs

@@ -17,29 +17,33 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Accordion/AccordionItem.js
+// packages/ui/molecules/Accordion/AccordionItem.ts
 var AccordionItem_exports = {};
 __export(AccordionItem_exports, {
-  default: () => AccordionItem
+  AccordionItem: () => AccordionItem
 });
 module.exports = __toCommonJS(AccordionItem_exports);
 var import_deepmerge = __toESM(require("deepmerge"), 1);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
-var import_AccordionCore = __toESM(require("./AccordionCore.cjs"), 1);
+var import_AccordionCore = require("./AccordionCore.cjs");
 var _AccordionItem = class extends import_js_toolkit.Base {
   mounted() {
-    if (this.$parent && this.$parent instanceof import_AccordionCore.default && this.$parent.$options.item) {
+    if (this.$parent && this.$parent instanceof import_AccordionCore.AccordionCore && this.$parent.$options.item) {
       Object.entries(this.$parent.$options.item).forEach(([key, value]) => {
+        var _a;
         if (key in this.$options) {
-          const type = _AccordionItem.config.options[key].type || _AccordionItem.config.options[key];
+          const type = (_a = _AccordionItem.config.options[key].type) != null ? _a : _AccordionItem.config.options[key];
           if (type === Array || type === Object) {
             this.$options[key] = (0, import_deepmerge.default)(this.$options[key], value);
           } else {
@@ -55,9 +59,9 @@ var _AccordionItem = class extends import_js_toolkit.Base {
     const { isOpen } = this.$options;
     this.updateAttributes(isOpen);
     const { container, ...otherStyles } = this.$options.styles;
-    const refs = this.$refs;
-    Object.entries(otherStyles).filter(([refName]) => refs[refName]).forEach(([refName, { open, closed } = { open: "", closed: "" }]) => {
-      (0, import_utils.transition)(refs[refName], { to: isOpen ? open : closed }, "keep");
+    const { $refs } = this;
+    Object.entries(otherStyles).filter(([refName]) => $refs[refName]).forEach(([refName, { open, closed } = { open: "", closed: "" }]) => {
+      (0, import_utils.transition)($refs[refName], { to: isOpen ? open : closed }, "keep");
     });
   }
   destroyed() {
@@ -90,23 +94,29 @@ var _AccordionItem = class extends import_js_toolkit.Base {
     this.updateAttributes(this.$options.isOpen);
     this.$refs.container.style.visibility = "";
     const { container, ...otherStyles } = this.$options.styles;
-    const refs = this.$refs;
+    const { $refs } = this;
     await Promise.all([
-      (0, import_utils.transition)(refs.container, {
+      (0, import_utils.transition)($refs.container, {
         from: { height: "0" },
         active: container.active,
-        to: { height: `${refs.content.offsetHeight}px` }
+        to: { height: `${$refs.content.offsetHeight}px` }
       }).then(() => {
         if (this.$options.isOpen) {
-          refs.content.style.position = "";
+          $refs.content.style.position = "";
         }
         return Promise.resolve();
       }),
-      ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
-        from: closed,
-        active,
-        to: open
-      }, "keep"))
+      ...Object.entries(otherStyles).filter(([refName]) => $refs[refName]).map(
+        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(
+          $refs[refName],
+          {
+            from: closed,
+            active,
+            to: open
+          },
+          "keep"
+        )
+      )
     ]);
   }
   async close() {
@@ -133,11 +143,17 @@ var _AccordionItem = class extends import_js_toolkit.Base {
         }
         return Promise.resolve();
       }),
-      ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
-        from: open,
-        active,
-        to: closed
-      }, "keep"))
+      ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(
+        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(
+          refs[refName],
+          {
+            from: open,
+            active,
+            to: closed
+          },
+          "keep"
+        )
+      )
     ]);
   }
 };