@mekari/pixel3-transition 0.0.1

package/dist/animate-height.d.mts

@@ -0,0 +1,84 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpAnimateHeight: vue.DefineComponent<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isOpen: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    initialHeight: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    enterEasing: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    leaveEasing: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    finalHeight: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    animateOpacity: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("enter" | "leave")[], "enter" | "leave", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isOpen: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    initialHeight: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    enterEasing: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    leaveEasing: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    finalHeight: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    animateOpacity: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onEnter?: ((...args: any[]) => any) | undefined;
+    onLeave?: ((...args: any[]) => any) | undefined;
+}, {
+    as: keyof HTMLElementTagNameMap;
+    isOpen: boolean;
+    initialHeight: number;
+    duration: number;
+    enterEasing: string;
+    leaveEasing: string;
+    finalHeight: number;
+    animateOpacity: boolean;
+}>;
+
+export { MpAnimateHeight };

package/dist/animate-height.d.ts

@@ -0,0 +1,84 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpAnimateHeight: vue.DefineComponent<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isOpen: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    initialHeight: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    enterEasing: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    leaveEasing: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    finalHeight: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    animateOpacity: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("enter" | "leave")[], "enter" | "leave", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isOpen: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    initialHeight: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    enterEasing: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    leaveEasing: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    finalHeight: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    animateOpacity: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onEnter?: ((...args: any[]) => any) | undefined;
+    onLeave?: ((...args: any[]) => any) | undefined;
+}, {
+    as: keyof HTMLElementTagNameMap;
+    isOpen: boolean;
+    initialHeight: number;
+    duration: number;
+    enterEasing: string;
+    leaveEasing: string;
+    finalHeight: number;
+    animateOpacity: boolean;
+}>;
+
+export { MpAnimateHeight };

package/dist/animate-height.js

@@ -0,0 +1,184 @@
+"use strict";
+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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/animate-height.tsx
+var animate_height_exports = {};
+__export(animate_height_exports, {
+  MpAnimateHeight: () => MpAnimateHeight
+});
+module.exports = __toCommonJS(animate_height_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+
+// src/modules/transition.props.ts
+var animateHeightProps = {
+  as: {
+    type: String,
+    default: "div"
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  initialHeight: {
+    type: Number,
+    default: 0
+  },
+  duration: {
+    type: Number,
+    default: 250
+  },
+  enterEasing: {
+    type: String,
+    default: "easeInOutSine"
+  },
+  leaveEasing: {
+    type: String,
+    default: "easeInOutSine"
+  },
+  finalHeight: {
+    type: Number,
+    default: 0
+  },
+  animateOpacity: {
+    type: Boolean,
+    default: true
+  }
+};
+
+// src/modules/useAnimateHeight.ts
+var import_animejs = __toESM(require("animejs"));
+var import_vue = require("vue");
+function useAnimateHeight(props, emit) {
+  const currentEl = (0, import_vue.ref)();
+  const isFirstRender = (0, import_vue.ref)(true);
+  function enter() {
+    const el = currentEl.value;
+    emit("enter", currentEl);
+    el.style.visibility = "hidden";
+    el.style.height = props.finalHeight || "auto";
+    const {
+      height
+    } = getComputedStyle(el);
+    el.style.height = props.initialHeight || 0;
+    requestAnimationFrame(() => {
+      el.style.visibility = "visible";
+      (0, import_animejs.default)({
+        targets: el,
+        ...props.animateOpacity && {
+          opacity: [0, 1]
+        },
+        height: [props.initialHeight || 0, props.finalHeight || height],
+        easing: props.enterEasing,
+        duration: isFirstRender.value ? 0 : props.duration,
+        complete: () => {
+          isFirstRender.value = false;
+          el.style.height = props.finalHeight || "auto";
+        }
+      });
+    });
+  }
+  __name(enter, "enter");
+  function leave() {
+    const el = currentEl.value;
+    emit("leave", currentEl);
+    const {
+      height
+    } = getComputedStyle(el);
+    requestAnimationFrame(() => {
+      (0, import_animejs.default)({
+        targets: el,
+        ...props.animateOpacity && {
+          opacity: [1, 0]
+        },
+        height: [props.finalHeight || height, props.initialHeight || 0],
+        easing: props.leaveEasing,
+        duration: isFirstRender.value ? 0 : props.duration,
+        complete: () => {
+          isFirstRender.value = false;
+        }
+      });
+    });
+  }
+  __name(leave, "leave");
+  (0, import_vue.watch)(() => props.isOpen, (isOpen) => {
+    if (isOpen) {
+      (0, import_vue.nextTick)(() => {
+        enter();
+      });
+    } else {
+      (0, import_vue.nextTick)(() => {
+        leave();
+      });
+    }
+  }, {
+    immediate: true
+  });
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      ref: currentEl,
+      "data-pixel-component": "MpAnimateHeight",
+      style: {
+        overflow: props.isOpen ? "visible" : "hidden"
+      }
+    };
+  });
+  return {
+    rootAttrs
+  };
+}
+__name(useAnimateHeight, "useAnimateHeight");
+
+// src/animate-height.tsx
+var MpAnimateHeight = (0, import_vue3.defineComponent)({
+  name: "MpAnimateHeight",
+  props: animateHeightProps,
+  emits: ["enter", "leave"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs
+    } = useAnimateHeight(props, emit);
+    return () => {
+      const {
+        as: Component
+      } = props;
+      return (0, import_vue2.createVNode)(Component, rootAttrs.value, {
+        default: () => [slots.default && slots.default()]
+      });
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpAnimateHeight
+});

package/dist/animate-height.mjs

@@ -0,0 +1,9 @@
+import {
+  MpAnimateHeight
+} from "./chunk-7BE634W2.mjs";
+import "./chunk-SQMYD3AJ.mjs";
+import "./chunk-F65UX7S5.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpAnimateHeight
+};

package/dist/chunk-7BE634W2.mjs

@@ -0,0 +1,35 @@
+import {
+  animateHeightProps
+} from "./chunk-SQMYD3AJ.mjs";
+import {
+  useAnimateHeight
+} from "./chunk-F65UX7S5.mjs";
+
+// src/animate-height.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+var MpAnimateHeight = defineComponent({
+  name: "MpAnimateHeight",
+  props: animateHeightProps,
+  emits: ["enter", "leave"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs
+    } = useAnimateHeight(props, emit);
+    return () => {
+      const {
+        as: Component
+      } = props;
+      return _createVNode(Component, rootAttrs.value, {
+        default: () => [slots.default && slots.default()]
+      });
+    };
+  }
+});
+
+export {
+  MpAnimateHeight
+};

package/dist/chunk-F65UX7S5.mjs

@@ -0,0 +1,90 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/useAnimateHeight.ts
+import anime from "animejs";
+import { computed, nextTick, ref, watch } from "vue";
+function useAnimateHeight(props, emit) {
+  const currentEl = ref();
+  const isFirstRender = ref(true);
+  function enter() {
+    const el = currentEl.value;
+    emit("enter", currentEl);
+    el.style.visibility = "hidden";
+    el.style.height = props.finalHeight || "auto";
+    const {
+      height
+    } = getComputedStyle(el);
+    el.style.height = props.initialHeight || 0;
+    requestAnimationFrame(() => {
+      el.style.visibility = "visible";
+      anime({
+        targets: el,
+        ...props.animateOpacity && {
+          opacity: [0, 1]
+        },
+        height: [props.initialHeight || 0, props.finalHeight || height],
+        easing: props.enterEasing,
+        duration: isFirstRender.value ? 0 : props.duration,
+        complete: () => {
+          isFirstRender.value = false;
+          el.style.height = props.finalHeight || "auto";
+        }
+      });
+    });
+  }
+  __name(enter, "enter");
+  function leave() {
+    const el = currentEl.value;
+    emit("leave", currentEl);
+    const {
+      height
+    } = getComputedStyle(el);
+    requestAnimationFrame(() => {
+      anime({
+        targets: el,
+        ...props.animateOpacity && {
+          opacity: [1, 0]
+        },
+        height: [props.finalHeight || height, props.initialHeight || 0],
+        easing: props.leaveEasing,
+        duration: isFirstRender.value ? 0 : props.duration,
+        complete: () => {
+          isFirstRender.value = false;
+        }
+      });
+    });
+  }
+  __name(leave, "leave");
+  watch(() => props.isOpen, (isOpen) => {
+    if (isOpen) {
+      nextTick(() => {
+        enter();
+      });
+    } else {
+      nextTick(() => {
+        leave();
+      });
+    }
+  }, {
+    immediate: true
+  });
+  const rootAttrs = computed(() => {
+    return {
+      ref: currentEl,
+      "data-pixel-component": "MpAnimateHeight",
+      style: {
+        overflow: props.isOpen ? "visible" : "hidden"
+      }
+    };
+  });
+  return {
+    rootAttrs
+  };
+}
+__name(useAnimateHeight, "useAnimateHeight");
+
+export {
+  useAnimateHeight
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/chunk-SQMYD3AJ.mjs

@@ -0,0 +1,39 @@
+// src/modules/transition.props.ts
+var animateHeightProps = {
+  as: {
+    type: String,
+    default: "div"
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  initialHeight: {
+    type: Number,
+    default: 0
+  },
+  duration: {
+    type: Number,
+    default: 250
+  },
+  enterEasing: {
+    type: String,
+    default: "easeInOutSine"
+  },
+  leaveEasing: {
+    type: String,
+    default: "easeInOutSine"
+  },
+  finalHeight: {
+    type: Number,
+    default: 0
+  },
+  animateOpacity: {
+    type: Boolean,
+    default: true
+  }
+};
+
+export {
+  animateHeightProps
+};

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+export { MpAnimateHeight } from './animate-height.mjs';
+import 'vue/jsx-runtime';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { MpAnimateHeight } from './animate-height.js';
+import 'vue/jsx-runtime';
+import 'vue';

package/dist/index.js

@@ -0,0 +1,186 @@
+"use strict";
+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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  MpAnimateHeight: () => MpAnimateHeight
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/animate-height.tsx
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+
+// src/modules/transition.props.ts
+var animateHeightProps = {
+  as: {
+    type: String,
+    default: "div"
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  initialHeight: {
+    type: Number,
+    default: 0
+  },
+  duration: {
+    type: Number,
+    default: 250
+  },
+  enterEasing: {
+    type: String,
+    default: "easeInOutSine"
+  },
+  leaveEasing: {
+    type: String,
+    default: "easeInOutSine"
+  },
+  finalHeight: {
+    type: Number,
+    default: 0
+  },
+  animateOpacity: {
+    type: Boolean,
+    default: true
+  }
+};
+
+// src/modules/useAnimateHeight.ts
+var import_animejs = __toESM(require("animejs"));
+var import_vue = require("vue");
+function useAnimateHeight(props, emit) {
+  const currentEl = (0, import_vue.ref)();
+  const isFirstRender = (0, import_vue.ref)(true);
+  function enter() {
+    const el = currentEl.value;
+    emit("enter", currentEl);
+    el.style.visibility = "hidden";
+    el.style.height = props.finalHeight || "auto";
+    const {
+      height
+    } = getComputedStyle(el);
+    el.style.height = props.initialHeight || 0;
+    requestAnimationFrame(() => {
+      el.style.visibility = "visible";
+      (0, import_animejs.default)({
+        targets: el,
+        ...props.animateOpacity && {
+          opacity: [0, 1]
+        },
+        height: [props.initialHeight || 0, props.finalHeight || height],
+        easing: props.enterEasing,
+        duration: isFirstRender.value ? 0 : props.duration,
+        complete: () => {
+          isFirstRender.value = false;
+          el.style.height = props.finalHeight || "auto";
+        }
+      });
+    });
+  }
+  __name(enter, "enter");
+  function leave() {
+    const el = currentEl.value;
+    emit("leave", currentEl);
+    const {
+      height
+    } = getComputedStyle(el);
+    requestAnimationFrame(() => {
+      (0, import_animejs.default)({
+        targets: el,
+        ...props.animateOpacity && {
+          opacity: [1, 0]
+        },
+        height: [props.finalHeight || height, props.initialHeight || 0],
+        easing: props.leaveEasing,
+        duration: isFirstRender.value ? 0 : props.duration,
+        complete: () => {
+          isFirstRender.value = false;
+        }
+      });
+    });
+  }
+  __name(leave, "leave");
+  (0, import_vue.watch)(() => props.isOpen, (isOpen) => {
+    if (isOpen) {
+      (0, import_vue.nextTick)(() => {
+        enter();
+      });
+    } else {
+      (0, import_vue.nextTick)(() => {
+        leave();
+      });
+    }
+  }, {
+    immediate: true
+  });
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      ref: currentEl,
+      "data-pixel-component": "MpAnimateHeight",
+      style: {
+        overflow: props.isOpen ? "visible" : "hidden"
+      }
+    };
+  });
+  return {
+    rootAttrs
+  };
+}
+__name(useAnimateHeight, "useAnimateHeight");
+
+// src/animate-height.tsx
+var MpAnimateHeight = (0, import_vue3.defineComponent)({
+  name: "MpAnimateHeight",
+  props: animateHeightProps,
+  emits: ["enter", "leave"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs
+    } = useAnimateHeight(props, emit);
+    return () => {
+      const {
+        as: Component
+      } = props;
+      return (0, import_vue2.createVNode)(Component, rootAttrs.value, {
+        default: () => [slots.default && slots.default()]
+      });
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpAnimateHeight
+});

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import {
+  MpAnimateHeight
+} from "./chunk-7BE634W2.mjs";
+import "./chunk-SQMYD3AJ.mjs";
+import "./chunk-F65UX7S5.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpAnimateHeight
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/transition.props.ts":{"bytes":1007,"imports":[],"format":"esm"},"src/modules/useAnimateHeight.ts":{"bytes":2238,"imports":[{"path":"animejs","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/animate-height.tsx":{"bytes":758,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/transition.props.ts","kind":"import-statement","original":"./modules/transition.props"},{"path":"src/modules/useAnimateHeight.ts","kind":"import-statement","original":"./modules/useAnimateHeight"}],"format":"esm"},"src/index.tsx":{"bytes":118,"imports":[{"path":"src/animate-height.tsx","kind":"import-statement","original":"./animate-height"}],"format":"esm"}},"outputs":{"dist/animate-height.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"animejs","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/animate-height.tsx","inputs":{"src/animate-height.tsx":{"bytesInOutput":716},"src/modules/transition.props.ts":{"bytesInOutput":500},"src/modules/useAnimateHeight.ts":{"bytesInOutput":2202}},"bytes":5139},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"animejs","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.tsx","inputs":{"src/index.tsx":{"bytesInOutput":135},"src/animate-height.tsx":{"bytesInOutput":548},"src/modules/transition.props.ts":{"bytesInOutput":500},"src/modules/useAnimateHeight.ts":{"bytesInOutput":2202}},"bytes":5124},"dist/modules/transition.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/transition.props.ts","inputs":{"src/modules/transition.props.ts":{"bytesInOutput":680}},"bytes":1627},"dist/modules/useAnimateHeight.js":{"imports":[{"path":"animejs","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/useAnimateHeight.ts","inputs":{"src/modules/useAnimateHeight.ts":{"bytesInOutput":2378}},"bytes":4010}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/transition.props.ts":{"bytes":1007,"imports":[],"format":"esm"},"src/modules/useAnimateHeight.ts":{"bytes":2238,"imports":[{"path":"animejs","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/animate-height.tsx":{"bytes":758,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/transition.props.ts","kind":"import-statement","original":"./modules/transition.props"},{"path":"src/modules/useAnimateHeight.ts","kind":"import-statement","original":"./modules/useAnimateHeight"}],"format":"esm"},"src/index.tsx":{"bytes":118,"imports":[{"path":"src/animate-height.tsx","kind":"import-statement","original":"./animate-height"}],"format":"esm"}},"outputs":{"dist/animate-height.mjs":{"imports":[{"path":"dist/chunk-7BE634W2.mjs","kind":"import-statement"},{"path":"dist/chunk-SQMYD3AJ.mjs","kind":"import-statement"},{"path":"dist/chunk-F65UX7S5.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpAnimateHeight"],"entryPoint":"src/animate-height.tsx","inputs":{},"bytes":181},"dist/index.mjs":{"imports":[{"path":"dist/chunk-7BE634W2.mjs","kind":"import-statement"},{"path":"dist/chunk-SQMYD3AJ.mjs","kind":"import-statement"},{"path":"dist/chunk-F65UX7S5.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpAnimateHeight"],"entryPoint":"src/index.tsx","inputs":{"src/index.tsx":{"bytesInOutput":0}},"bytes":181},"dist/chunk-7BE634W2.mjs":{"imports":[{"path":"dist/chunk-SQMYD3AJ.mjs","kind":"import-statement"},{"path":"dist/chunk-F65UX7S5.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["MpAnimateHeight"],"inputs":{"src/animate-height.tsx":{"bytesInOutput":537}},"bytes":715},"dist/modules/transition.props.mjs":{"imports":[{"path":"dist/chunk-SQMYD3AJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["animateHeightProps"],"entryPoint":"src/modules/transition.props.ts","inputs":{},"bytes":127},"dist/chunk-SQMYD3AJ.mjs":{"imports":[],"exports":["animateHeightProps"],"inputs":{"src/modules/transition.props.ts":{"bytesInOutput":500}},"bytes":569},"dist/modules/useAnimateHeight.mjs":{"imports":[{"path":"dist/chunk-F65UX7S5.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useAnimateHeight"],"entryPoint":"src/modules/useAnimateHeight.ts","inputs":{},"bytes":123},"dist/chunk-F65UX7S5.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"animejs","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["useAnimateHeight"],"inputs":{"src/modules/useAnimateHeight.ts":{"bytesInOutput":2062}},"bytes":2179},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}

package/dist/modules/transition.props.d.mts

@@ -0,0 +1,40 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+declare const animateHeightProps: {
+    as: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    initialHeight: {
+        type: PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: PropType<number>;
+        default: number;
+    };
+    enterEasing: {
+        type: PropType<string>;
+        default: string;
+    };
+    leaveEasing: {
+        type: PropType<string>;
+        default: string;
+    };
+    finalHeight: {
+        type: PropType<number>;
+        default: number;
+    };
+    animateOpacity: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+type AnimateHeightProps = ExtractPropTypes<typeof animateHeightProps>;
+type AnimateHeightEmits = (e: 'enter' | 'leave', value?: unknown) => void;
+
+export { AnimateHeightEmits, AnimateHeightProps, animateHeightProps };

package/dist/modules/transition.props.d.ts

@@ -0,0 +1,40 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+declare const animateHeightProps: {
+    as: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    initialHeight: {
+        type: PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: PropType<number>;
+        default: number;
+    };
+    enterEasing: {
+        type: PropType<string>;
+        default: string;
+    };
+    leaveEasing: {
+        type: PropType<string>;
+        default: string;
+    };
+    finalHeight: {
+        type: PropType<number>;
+        default: number;
+    };
+    animateOpacity: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+type AnimateHeightProps = ExtractPropTypes<typeof animateHeightProps>;
+type AnimateHeightEmits = (e: 'enter' | 'leave', value?: unknown) => void;
+
+export { AnimateHeightEmits, AnimateHeightProps, animateHeightProps };

package/dist/modules/transition.props.js

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/transition.props.ts
+var transition_props_exports = {};
+__export(transition_props_exports, {
+  animateHeightProps: () => animateHeightProps
+});
+module.exports = __toCommonJS(transition_props_exports);
+var animateHeightProps = {
+  as: {
+    type: String,
+    default: "div"
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  initialHeight: {
+    type: Number,
+    default: 0
+  },
+  duration: {
+    type: Number,
+    default: 250
+  },
+  enterEasing: {
+    type: String,
+    default: "easeInOutSine"
+  },
+  leaveEasing: {
+    type: String,
+    default: "easeInOutSine"
+  },
+  finalHeight: {
+    type: Number,
+    default: 0
+  },
+  animateOpacity: {
+    type: Boolean,
+    default: true
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  animateHeightProps
+});

package/dist/modules/transition.props.mjs

@@ -0,0 +1,7 @@
+import {
+  animateHeightProps
+} from "../chunk-SQMYD3AJ.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  animateHeightProps
+};

package/dist/modules/useAnimateHeight.d.mts

@@ -0,0 +1,9 @@
+import * as vue from 'vue';
+import { HTMLAttributes } from 'vue';
+import { AnimateHeightProps, AnimateHeightEmits } from './transition.props.mjs';
+
+declare function useAnimateHeight(props: AnimateHeightProps, emit: AnimateHeightEmits): {
+    rootAttrs: vue.ComputedRef<HTMLAttributes>;
+};
+
+export { useAnimateHeight };

package/dist/modules/useAnimateHeight.d.ts

@@ -0,0 +1,9 @@
+import * as vue from 'vue';
+import { HTMLAttributes } from 'vue';
+import { AnimateHeightProps, AnimateHeightEmits } from './transition.props.js';
+
+declare function useAnimateHeight(props: AnimateHeightProps, emit: AnimateHeightEmits): {
+    rootAttrs: vue.ComputedRef<HTMLAttributes>;
+};
+
+export { useAnimateHeight };

package/dist/modules/useAnimateHeight.js

@@ -0,0 +1,121 @@
+"use strict";
+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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/useAnimateHeight.ts
+var useAnimateHeight_exports = {};
+__export(useAnimateHeight_exports, {
+  useAnimateHeight: () => useAnimateHeight
+});
+module.exports = __toCommonJS(useAnimateHeight_exports);
+var import_animejs = __toESM(require("animejs"));
+var import_vue = require("vue");
+function useAnimateHeight(props, emit) {
+  const currentEl = (0, import_vue.ref)();
+  const isFirstRender = (0, import_vue.ref)(true);
+  function enter() {
+    const el = currentEl.value;
+    emit("enter", currentEl);
+    el.style.visibility = "hidden";
+    el.style.height = props.finalHeight || "auto";
+    const {
+      height
+    } = getComputedStyle(el);
+    el.style.height = props.initialHeight || 0;
+    requestAnimationFrame(() => {
+      el.style.visibility = "visible";
+      (0, import_animejs.default)({
+        targets: el,
+        ...props.animateOpacity && {
+          opacity: [0, 1]
+        },
+        height: [props.initialHeight || 0, props.finalHeight || height],
+        easing: props.enterEasing,
+        duration: isFirstRender.value ? 0 : props.duration,
+        complete: () => {
+          isFirstRender.value = false;
+          el.style.height = props.finalHeight || "auto";
+        }
+      });
+    });
+  }
+  __name(enter, "enter");
+  function leave() {
+    const el = currentEl.value;
+    emit("leave", currentEl);
+    const {
+      height
+    } = getComputedStyle(el);
+    requestAnimationFrame(() => {
+      (0, import_animejs.default)({
+        targets: el,
+        ...props.animateOpacity && {
+          opacity: [1, 0]
+        },
+        height: [props.finalHeight || height, props.initialHeight || 0],
+        easing: props.leaveEasing,
+        duration: isFirstRender.value ? 0 : props.duration,
+        complete: () => {
+          isFirstRender.value = false;
+        }
+      });
+    });
+  }
+  __name(leave, "leave");
+  (0, import_vue.watch)(() => props.isOpen, (isOpen) => {
+    if (isOpen) {
+      (0, import_vue.nextTick)(() => {
+        enter();
+      });
+    } else {
+      (0, import_vue.nextTick)(() => {
+        leave();
+      });
+    }
+  }, {
+    immediate: true
+  });
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      ref: currentEl,
+      "data-pixel-component": "MpAnimateHeight",
+      style: {
+        overflow: props.isOpen ? "visible" : "hidden"
+      }
+    };
+  });
+  return {
+    rootAttrs
+  };
+}
+__name(useAnimateHeight, "useAnimateHeight");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAnimateHeight
+});

package/dist/modules/useAnimateHeight.mjs

@@ -0,0 +1,7 @@
+import {
+  useAnimateHeight
+} from "../chunk-F65UX7S5.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useAnimateHeight
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@mekari/pixel3-transition",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "animejs": "^3.2.2",
+    "@mekari/pixel3-icon": "0.0.2",
+    "@mekari/pixel3-styled-system": "0.0.1",
+    "@mekari/pixel3-utils": "0.0.2"
+  },
+  "peerDependencies": {
+    "vue": "3.2.47"
+  },
+  "devDependencies": {
+    "@types/animejs": "^3.1.12",
+    "vue": "3.2.47"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "build:external": "tsup src/index.tsx --external @acme-org/styled-system",
+    "types:check": "tsc --noEmit",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}