@studiometa/ui 0.2.3 → 0.2.6

package/molecules/Modal/Modal.twig

@@ -0,0 +1,108 @@
+{#
+/**
+ * @file
+ * Modal component.
+ *
+ * @param array $attr
+ *   Use it to customize the root element attributes.
+ * @param array $modal_attr
+ *   Use it to customize the modal element attributes.
+ * @param array $overlay_attr
+ *   Use it to customize the overlay element attributes.
+ * @param array $wrapper_attr
+ *   Use it to customize the wrapper element attributes.
+ * @param array $container_atrr
+ *   Use it to customize the container element attributes.
+ * @param array $content_atrr
+ *   Use it to customize the content element attributes.
+ *
+ * @block $open
+ *   Use this block to customize the open trigger button.
+ * @block $close
+ *   Use this block to customize the close trigger button.
+ * @block $content
+ *   Use this block to set the modal's content.
+ */
+#}
+
+{# Root attributes #}
+{% set attributes = merge_html_attributes(attr ?? null, { data_component: 'Modal' }) %}
+
+{# Modal attributes #}
+{% set modal_attributes =
+  merge_html_attributes(
+    modal_attr ?? null,
+    { class: 'z-goku fixed inset-0' },
+    {
+      data_ref: 'modal',
+      role: 'dialog',
+      aria_modal: true,
+      aria_hidden: true,
+      style: { opacity: '0', pointer_events: 'none', visibility: 'hidden' }
+    }
+  )
+%}
+
+{# Overlay attributes #}
+{% set overlay_attributes =
+  merge_html_attributes(
+    overlay_attr ?? null,
+    { class: 'z-under absolute inset-0 bg-black bg-opacity-75' },
+    { data_ref: 'overlay', tabindex: '-1' }
+  )
+%}
+
+{% set wrapper_attributes =
+  merge_html_attributes(
+    wrapper_attr ?? null,
+    { class: 'absolute inset-0 flex items-center justify-center' },
+    { class: 'pointer-events-none' }
+  )
+%}
+
+{# Container attributes #}
+{% set container_attributes =
+  merge_html_attributes(
+    container_attr ?? null,
+    { class: 'bg-white rounded shadow-l' },
+    {
+      data_ref: 'container',
+      class: 'z-above relative max-h-full overflow-x-hidden overflow-y-auto pointer-events-auto'
+    }
+  )
+%}
+
+{# Content attributes #}
+{% set content_attributes =
+  merge_html_attributes(
+    content_attr ?? null,
+    { class: 'max-w-3xl p-16 pt-20' },
+    { data_ref: 'content' }
+  )
+%}
+
+<div {{ html_attributes(attributes) }}>
+  {% block open %}
+    {% include '@ui/atoms/Button/Button.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+  {% endblock %}
+  <div {{ html_attributes(modal_attributes) }}>
+    <div {{ html_attributes(overlay_attributes) }}></div>
+    <div {{ html_attributes(wrapper_attributes) }}>
+      <div {{ html_attributes(container_attributes) }}>
+        {% block close %}
+          <div class="absolute top-0 right-0 m-2">
+            {% include '@ui/atoms/Button/Button.twig' with {
+              label: 'Close',
+              attr: { data_ref: 'close' }
+            } %}
+          </div>
+        {% endblock %}
+        <div {{ html_attributes(content_attributes) }}>
+          {% block content %}
+            No content.
+          {% endblock %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/molecules/Modal/ModalWithTransition.cjs

@@ -5,70 +5,41 @@ 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 __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 });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-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);
+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;
 };
-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());
-  });
-};
 
 // packages/ui/molecules/Modal/ModalWithTransition.js
 var ModalWithTransition_exports = {};
 __export(ModalWithTransition_exports, {
   default: () => ModalWithTransition
 });
+module.exports = __toCommonJS(ModalWithTransition_exports);
 var import_Modal = __toESM(require("./Modal.cjs"), 1);
 var ModalWithTransition = class extends import_Modal.default {
   open() {
     this.$refs.modal.style.visibility = "";
     return super.open();
   }
-  close() {
-    var __superGet = (key) => super[key];
-    return __async(this, null, function* () {
-      yield __superGet("close").call(this);
-      this.$refs.modal.style.visibility = "hidden";
-      return Promise.resolve();
-    });
+  async close() {
+    await super.close();
+    this.$refs.modal.style.visibility = "hidden";
+    return Promise.resolve();
   }
 };
 __publicField(ModalWithTransition, "config", {
@@ -96,5 +67,4 @@ __publicField(ModalWithTransition, "config", {
     }
   }
 });
-module.exports = __toCommonJS(ModalWithTransition_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Modal/ModalWithTransition.js

@@ -1,69 +1 @@
-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 Modal from "./Modal.js";
-class ModalWithTransition extends Modal {
-  open() {
-    this.$refs.modal.style.visibility = "";
-    return super.open();
-  }
-  close() {
-    var __superGet = (key) => super[key];
-    return __async(this, null, function* () {
-      yield __superGet("close").call(this);
-      this.$refs.modal.style.visibility = "hidden";
-      return Promise.resolve();
-    });
-  }
-}
-__publicField(ModalWithTransition, "config", {
-  name: "ModalWithTransition",
-  options: {
-    styles: {
-      type: Object,
-      default: () => ({
-        modal: {
-          closed: {
-            opacity: "0",
-            pointerEvents: "none"
-          },
-          active: "transition duration-500 ease-out-expo"
-        },
-        overlay: {
-          closed: "opacity-0",
-          active: "transition duration-500 ease-out-expo"
-        },
-        container: {
-          closed: "transform scale-95 opacity-0",
-          active: "transition duration-500 ease-out-expo"
-        }
-      })
-    }
-  }
-});
-export {
-  ModalWithTransition as default
-};
+import e from"./Modal.js";class t extends e{static config={name:"ModalWithTransition",options:{styles:{type:Object,default:()=>({modal:{closed:{opacity:"0",pointerEvents:"none"},active:"transition duration-500 ease-out-expo"},overlay:{closed:"opacity-0",active:"transition duration-500 ease-out-expo"},container:{closed:"transform scale-95 opacity-0",active:"transition duration-500 ease-out-expo"}})}}};open(){return this.$refs.modal.style.visibility="",super.open()}async close(){return await super.close(),this.$refs.modal.style.visibility="hidden",Promise.resolve()}}export{t as default};

package/molecules/Modal/StyledModal.twig

@@ -0,0 +1,39 @@
+{#
+/**
+ * @file
+ * Modal component.
+ *
+ * @param array $attr
+ *   Use it to customize the root element attributes.
+ * @param array $modal_attr
+ *   Use it to customize the modal element attributes.
+ * @param array $overlay_attr
+ *   Use it to customize the overlay element attributes.
+ * @param array $container_atrr
+ *   Use it to customize the container element attributes.
+ * @param array $content_atrr
+ *   Use it to customize the content element attributes.
+ *
+ * @block $open
+ *   Use this block to customize the open trigger button.
+ * @block $close
+ *   Use this block to customize the close trigger button.
+ * @block $content
+ *   Use this block to set the modal's content.
+ */
+#}
+
+{% extends '@ui/molecules/Modal/Modal.twig' %}
+
+{% block open %}
+  {% include '@ui/atoms/Button/StyledButton.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+{% endblock %}
+
+{% block close %}
+  <div class="absolute top-0 right-0 m-2">
+    {% include '@ui/atoms/Button/StyledButton.twig' with {
+      label: 'Close',
+      attr: { data_ref: 'close' }
+    } %}
+  </div>
+{% endblock %}

package/molecules/Panel/Panel.cjs

@@ -5,63 +5,36 @@ 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 __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 });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-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);
+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;
 };
-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());
-  });
-};
 
 // packages/ui/molecules/Panel/Panel.js
 var Panel_exports = {};
 __export(Panel_exports, {
   default: () => Panel
 });
+module.exports = __toCommonJS(Panel_exports);
 var import_utils = require("@studiometa/js-toolkit/utils");
 var import_Modal = __toESM(require("../Modal/Modal.cjs"), 1);
 var _Panel = class extends import_Modal.default {
   get translateClass() {
-    var _a;
-    return (_a = _Panel.translateClasses[this.$options.position]) != null ? _a : _Panel.translateClasses[_Panel.config.options.position.default];
+    return _Panel.translateClasses[this.$options.position] ?? _Panel.translateClasses[_Panel.config.options.position.default];
   }
   get containerOffset() {
     const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;
@@ -81,51 +54,45 @@ var _Panel = class extends import_Modal.default {
     };
     return (0, import_utils.matrix)(store[this.$options.position]);
   }
-  open() {
-    var __superGet = (key) => super[key];
-    return __async(this, null, function* () {
-      if (this.isOpen) {
-        return Promise.resolve();
+  async open() {
+    if (this.isOpen) {
+      return Promise.resolve();
+    }
+    this.$refs.modal.classList.remove("pointer-events-none");
+    (0, import_utils.transition)(this.$refs.container, {
+      from: {
+        transform: this.containerOffset
+      },
+      to: {
+        transform: "none"
       }
-      this.$refs.modal.classList.remove("pointer-events-none");
+    }, "keep");
+    (0, import_utils.transition)(this.$refs.overlay, {
+      from: "opacity-0"
+    });
+    return super.open();
+  }
+  async close() {
+    if (!this.isOpen || this.isClosing) {
+      return Promise.resolve();
+    }
+    this.isClosing = true;
+    this.$refs.modal.classList.add("pointer-events-none");
+    await Promise.all([
       (0, import_utils.transition)(this.$refs.container, {
         from: {
-          transform: this.containerOffset
+          transform: "none"
         },
         to: {
-          transform: "none"
+          transform: this.containerOffset
         }
-      }, "keep");
+      }, "keep"),
       (0, import_utils.transition)(this.$refs.overlay, {
-        from: "opacity-0"
-      });
-      return __superGet("open").call(this);
-    });
-  }
-  close() {
-    var __superGet = (key) => super[key];
-    return __async(this, null, function* () {
-      if (!this.isOpen || this.isClosing) {
-        return Promise.resolve();
-      }
-      this.isClosing = true;
-      this.$refs.modal.classList.add("pointer-events-none");
-      yield Promise.all([
-        (0, import_utils.transition)(this.$refs.container, {
-          from: {
-            transform: "none"
-          },
-          to: {
-            transform: this.containerOffset
-          }
-        }, "keep"),
-        (0, import_utils.transition)(this.$refs.overlay, {
-          to: "opacity-0"
-        }, "keep")
-      ]);
-      this.isClosing = false;
-      return __superGet("close").call(this);
-    });
+        to: "opacity-0"
+      }, "keep")
+    ]);
+    this.isClosing = false;
+    return super.close();
   }
 };
 var Panel = _Panel;
@@ -144,5 +111,4 @@ __publicField(Panel, "translateClasses", {
   bottom: "translate-y-full",
   left: "-translate-x-full"
 });
-module.exports = __toCommonJS(Panel_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Panel/Panel.js

@@ -1,117 +1 @@
-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 { transition, matrix } from "@studiometa/js-toolkit/utils";
-import Modal from "../Modal/Modal.js";
-const _Panel = class extends Modal {
-  get translateClass() {
-    var _a;
-    return (_a = _Panel.translateClasses[this.$options.position]) != null ? _a : _Panel.translateClasses[_Panel.config.options.position.default];
-  }
-  get containerOffset() {
-    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;
-    const store = {
-      top: {
-        translateY: (offsetTop + offsetHeight) * -1
-      },
-      right: {
-        translateX: window.innerWidth - offsetLeft + offsetWidth * 2
-      },
-      bottom: {
-        translateY: window.innerHeight - offsetTop + offsetHeight * 2
-      },
-      left: {
-        translateX: (offsetLeft + offsetWidth) * -1
-      }
-    };
-    return matrix(store[this.$options.position]);
-  }
-  open() {
-    var __superGet = (key) => super[key];
-    return __async(this, null, function* () {
-      if (this.isOpen) {
-        return Promise.resolve();
-      }
-      this.$refs.modal.classList.remove("pointer-events-none");
-      transition(this.$refs.container, {
-        from: {
-          transform: this.containerOffset
-        },
-        to: {
-          transform: "none"
-        }
-      }, "keep");
-      transition(this.$refs.overlay, {
-        from: "opacity-0"
-      });
-      return __superGet("open").call(this);
-    });
-  }
-  close() {
-    var __superGet = (key) => super[key];
-    return __async(this, null, function* () {
-      if (!this.isOpen || this.isClosing) {
-        return Promise.resolve();
-      }
-      this.isClosing = true;
-      this.$refs.modal.classList.add("pointer-events-none");
-      yield Promise.all([
-        transition(this.$refs.container, {
-          from: {
-            transform: "none"
-          },
-          to: {
-            transform: this.containerOffset
-          }
-        }, "keep"),
-        transition(this.$refs.overlay, {
-          to: "opacity-0"
-        }, "keep")
-      ]);
-      this.isClosing = false;
-      return __superGet("close").call(this);
-    });
-  }
-};
-let Panel = _Panel;
-__publicField(Panel, "config", {
-  name: "Panel",
-  options: {
-    position: {
-      type: String,
-      default: "left"
-    }
-  }
-});
-__publicField(Panel, "translateClasses", {
-  top: "-translate-y-full",
-  right: "translate-x-full",
-  bottom: "translate-y-full",
-  left: "-translate-x-full"
-});
-export {
-  Panel as default
-};
+import{transition as s,matrix as a}from"@studiometa/js-toolkit/utils";import l from"../Modal/Modal.js";class t extends l{static config={name:"Panel",options:{position:{type:String,default:"left"}}};static translateClasses={top:"-translate-y-full",right:"translate-x-full",bottom:"translate-y-full",left:"-translate-x-full"};get translateClass(){return t.translateClasses[this.$options.position]??t.translateClasses[t.config.options.position.default]}get containerOffset(){const{offsetTop:e,offsetLeft:o,offsetWidth:n,offsetHeight:i}=this.$refs.container,r={top:{translateY:(e+i)*-1},right:{translateX:window.innerWidth-o+n*2},bottom:{translateY:window.innerHeight-e+i*2},left:{translateX:(o+n)*-1}};return a(r[this.$options.position])}async open(){return this.isOpen?Promise.resolve():(this.$refs.modal.classList.remove("pointer-events-none"),s(this.$refs.container,{from:{transform:this.containerOffset},to:{transform:"none"}},"keep"),s(this.$refs.overlay,{from:"opacity-0"}),super.open())}async close(){return!this.isOpen||this.isClosing?Promise.resolve():(this.isClosing=!0,this.$refs.modal.classList.add("pointer-events-none"),await Promise.all([s(this.$refs.container,{from:{transform:"none"},to:{transform:this.containerOffset}},"keep"),s(this.$refs.overlay,{to:"opacity-0"},"keep")]),this.isClosing=!1,super.close())}}export{t as default};

package/molecules/Panel/Panel.twig

@@ -0,0 +1,73 @@
+{#
+/**
+ * @file
+ *   Panel component.
+ *
+ * @param 'top'|'right'|'bottom'|'left' $position
+ *   Position of the panel.
+ * @param array $wrapper_attr
+ *   Custom attributes for the wrapper element.
+ */
+#}
+
+{% extends '@ui/molecules/Modal/Modal.twig' %}
+
+{% set position = position ?? 'left' %}
+
+{% set attr =
+  merge_html_attributes(attr ?? null, { data_component: 'Panel', data_option_position: position })
+%}
+
+{% set overlay_attr =
+  merge_html_attributes(
+    overlay_attr ?? null,
+    { class: 'z-under absolute inset-0 bg-black bg-opacity-75' },
+    { class: 'transition duration-500 opacity-0' }
+  )
+%}
+
+{% set wrapper_attr =
+  merge_html_attributes(
+    wrapper_attr ?? null,
+    {},
+    {
+      class: [
+        'z-above absolute top-0 w-full h-full flex pointer-events-none',
+        {
+          'top-0 left-0 items-start justify-center': position == 'top',
+          'top-0 right-0 items-center justify-end': position == 'right',
+          'bottom-0 left-0 items-end justify-center': position == 'bottom',
+          'top-0 left-0 items-center justify-start': position == 'left'
+        }
+      ]
+    }
+  )
+%}
+
+{% set container_attr =
+  merge_html_attributes(
+    container_attr ?? null,
+    {
+      class: [
+        'max-w-2xl',
+        {
+          'w-full': position == 'top',
+          'h-full': position == 'right',
+          'w-full': position == 'bottom',
+          'h-full': position == 'left'
+        }
+      ]
+    },
+    {
+      class: [
+        'transform transition duration-500',
+        {
+          '-translate-y-full': position == 'top',
+          'translate-x-full': position == 'right',
+          'translate-y-full': position == 'bottom',
+          '-translate-x-full': position == 'left'
+        }
+      ]
+    }
+  )
+%}