@griddle/vue 0.1.0 → 0.1.2

package/README.md

@@ -39,6 +39,31 @@ const api = useGriddle({
 </template>
 ```
 
+## Animation configuration
+
+Tile repositioning and lift animations share `config.animation` with the other
+Griddle adapters. Repositioning defaults to a smooth 320 ms ease-out and rapid
+repacks continue from each tile's current visual position.
+
+```ts
+const api = useGriddle({
+  config: {
+    cols: 12, rows: 12, unitWidth: 75, unitHeight: 75,
+    animation: {
+      repositionDurationMs: 320,
+      repositionEasing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+      liftDurationMs: 160,
+      liftEasing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+      respectReducedMotion: true,
+    },
+  },
+  tiles,
+});
+```
+
+Use `animation.enabled: false` to disable all adapter animations. A duration of
+`0` disables only that transition.
+
 ## Loop mode (infinite gallery)
 
 Enable `loop` in the config and the content repeats endlessly with drag-to-pan

package/dist/GriddleGrid.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GriddleGrid.vue.d.ts","sourceRoot":"","sources":["../src/GriddleGrid.vue"],"names":[],"mappings":"AAwuBA,OAAO,KAAK,EAAE,WAAW,EAAU,IAAI,EAAE,MAAM,eAAe,CAAC;AAc/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,UAAU,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,CAAC;AAowBF,QAAA,IAAI,QAAQ;;;CAAW,EAAE,QAAQ;;;CAAY,CAAE;AAC/C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA8C7C,QAAA,MAAM,eAAe;;;;;;;;aAhzBY,MAAM;aAAO,MAAM;WAAK,MAAM;WAAK,MAAM;;;;;;;;;;aAAzC,MAAM;aAAO,MAAM;WAAK,MAAM;WAAK,MAAM;;kFAuzBxE,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"GriddleGrid.vue.d.ts","sourceRoot":"","sources":["../src/GriddleGrid.vue"],"names":[],"mappings":"AA6uBA,OAAO,KAAK,EAAE,WAAW,EAAU,IAAI,EAAE,MAAM,eAAe,CAAC;AAc/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,UAAU,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,CAAC;AAwwBF,QAAA,IAAI,QAAQ;;;CAAW,EAAE,QAAQ;;;CAAY,CAAE;AAC/C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA8C7C,QAAA,MAAM,eAAe;;;;;;;;aApzBY,MAAM;aAAO,MAAM;WAAK,MAAM;WAAK,MAAM;;;;;;;;;;aAAzC,MAAM;aAAO,MAAM;WAAK,MAAM;WAAK,MAAM;;kFA2zBxE,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/LoopGrid.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoopGrid.vue.d.ts","sourceRoot":"","sources":["../src/LoopGrid.vue"],"names":[],"mappings":"AA4nBA,OAAO,KAAK,EAAE,WAAW,EAAmB,IAAI,EAAE,MAAM,eAAe,CAAC;AASxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,UAAU,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,CAAC;AAqnBF,QAAA,IAAI,OAAO;;;CAAU,EAAE,OAAO;;;CAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA8C5C,QAAA,MAAM,eAAe;;;;;;;;;;;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"LoopGrid.vue.d.ts","sourceRoot":"","sources":["../src/LoopGrid.vue"],"names":[],"mappings":"AAynBA,OAAO,KAAK,EAAE,WAAW,EAAmB,IAAI,EAAE,MAAM,eAAe,CAAC;AASxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,UAAU,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,CAAC;AAinBF,QAAA,IAAI,OAAO;;;CAAU,EAAE,OAAO;;;CAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA8C5C,QAAA,MAAM,eAAe;;;;;;;;;;;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/animation.d.ts

@@ -0,0 +1,5 @@
+import { type GridAnimationConfig } from '@griddle/core';
+/** Continue rapid repacks from the tile's current visual position. */
+export declare function animateReposition(node: HTMLElement, deltaX: number, deltaY: number, config?: GridAnimationConfig): void;
+export declare function liftTransition(config?: GridAnimationConfig): string;
+//# sourceMappingURL=animation.d.ts.map

package/dist/animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../src/animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,eAAe,CAAC;AAoBvB,sEAAsE;AACtE,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,mBAAmB,GAC3B,IAAI,CAwBN;AAED,wBAAgB,cAAc,CAAC,MAAM,CAAC,EAAE,mBAAmB,GAAG,MAAM,CAMnE"}

package/dist/animation.js

@@ -0,0 +1,36 @@
+import { resolveAnimationConfig as r } from "@griddle/core";
+const o = /* @__PURE__ */ new WeakMap();
+function u(t) {
+  return r(t).respectReducedMotion && typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function p(t) {
+  if (typeof window > "u") return { x: 0, y: 0 };
+  const n = window.getComputedStyle(t).translate;
+  if (!n || n === "none") return { x: 0, y: 0 };
+  const [e = "0", i = "0"] = n.split(/\s+/);
+  return { x: Number.parseFloat(e) || 0, y: Number.parseFloat(i) || 0 };
+}
+function f(t, n, e, i) {
+  const s = o.get(t);
+  s !== void 0 && cancelAnimationFrame(s);
+  const a = r(i);
+  if (!a.enabled || a.repositionDurationMs === 0 || u(i)) {
+    t.style.transition = "none", t.style.translate = "0px 0px", o.delete(t);
+    return;
+  }
+  const l = p(t);
+  t.style.transition = "none", t.style.translate = `${n + l.x}px ${e + l.y}px`, t.offsetWidth;
+  const c = requestAnimationFrame(() => {
+    o.delete(t), t.style.transition = `translate ${a.repositionDurationMs}ms ${a.repositionEasing}`, t.style.translate = "0px 0px";
+  });
+  o.set(t, c);
+}
+function d(t) {
+  const n = r(t), e = !n.enabled || u(t) ? 0 : n.liftDurationMs;
+  return `filter ${e}ms ${n.liftEasing}, opacity ${e}ms ${n.liftEasing}`;
+}
+export {
+  f as animateReposition,
+  d as liftTransition
+};
+//# sourceMappingURL=animation.js.map

package/dist/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","sources":["../src/animation.ts"],"sourcesContent":["import {\n  resolveAnimationConfig,\n  type GridAnimationConfig,\n} from '@griddle/core';\n\nconst pendingFrames = new WeakMap<HTMLElement, number>();\n\nfunction reducedMotionRequested(config: GridAnimationConfig | undefined): boolean {\n  const animation = resolveAnimationConfig(config);\n  return animation.respectReducedMotion &&\n    typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function' &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\nfunction currentTranslation(node: HTMLElement): { x: number; y: number } {\n  if (typeof window === 'undefined') return { x: 0, y: 0 };\n  const translate = window.getComputedStyle(node).translate;\n  if (!translate || translate === 'none') return { x: 0, y: 0 };\n  const [x = '0', y = '0'] = translate.split(/\\s+/);\n  return { x: Number.parseFloat(x) || 0, y: Number.parseFloat(y) || 0 };\n}\n\n/** Continue rapid repacks from the tile's current visual position. */\nexport function animateReposition(\n  node: HTMLElement,\n  deltaX: number,\n  deltaY: number,\n  config?: GridAnimationConfig,\n): void {\n  const pending = pendingFrames.get(node);\n  if (pending !== undefined) cancelAnimationFrame(pending);\n\n  const animation = resolveAnimationConfig(config);\n  if (!animation.enabled || animation.repositionDurationMs === 0 || reducedMotionRequested(config)) {\n    node.style.transition = 'none';\n    node.style.translate = '0px 0px';\n    pendingFrames.delete(node);\n    return;\n  }\n\n  const current = currentTranslation(node);\n  node.style.transition = 'none';\n  node.style.translate = `${deltaX + current.x}px ${deltaY + current.y}px`;\n  void node.offsetWidth;\n\n  const frame = requestAnimationFrame(() => {\n    pendingFrames.delete(node);\n    node.style.transition =\n      `translate ${animation.repositionDurationMs}ms ${animation.repositionEasing}`;\n    node.style.translate = '0px 0px';\n  });\n  pendingFrames.set(node, frame);\n}\n\nexport function liftTransition(config?: GridAnimationConfig): string {\n  const animation = resolveAnimationConfig(config);\n  const duration = !animation.enabled || reducedMotionRequested(config)\n    ? 0\n    : animation.liftDurationMs;\n  return `filter ${duration}ms ${animation.liftEasing}, opacity ${duration}ms ${animation.liftEasing}`;\n}\n"],"names":["pendingFrames","reducedMotionRequested","config","resolveAnimationConfig","currentTranslation","node","translate","x","y","animateReposition","deltaX","deltaY","pending","animation","current","frame","liftTransition","duration"],"mappings":";AAKA,MAAMA,wBAAoB,QAAA;AAE1B,SAASC,EAAuBC,GAAkD;AAEhF,SADkBC,EAAuBD,CAAM,EAC9B,wBACf,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,cAC7B,OAAO,WAAW,kCAAkC,EAAE;AAC1D;AAEA,SAASE,EAAmBC,GAA6C;AACvE,MAAI,OAAO,SAAW,IAAa,QAAO,EAAE,GAAG,GAAG,GAAG,EAAA;AACrD,QAAMC,IAAY,OAAO,iBAAiBD,CAAI,EAAE;AAChD,MAAI,CAACC,KAAaA,MAAc,eAAe,EAAE,GAAG,GAAG,GAAG,EAAA;AAC1D,QAAM,CAACC,IAAI,KAAKC,IAAI,GAAG,IAAIF,EAAU,MAAM,KAAK;AAChD,SAAO,EAAE,GAAG,OAAO,WAAWC,CAAC,KAAK,GAAG,GAAG,OAAO,WAAWC,CAAC,KAAK,EAAA;AACpE;AAGO,SAASC,EACdJ,GACAK,GACAC,GACAT,GACM;AACN,QAAMU,IAAUZ,EAAc,IAAIK,CAAI;AACtC,EAAIO,MAAY,UAAW,qBAAqBA,CAAO;AAEvD,QAAMC,IAAYV,EAAuBD,CAAM;AAC/C,MAAI,CAACW,EAAU,WAAWA,EAAU,yBAAyB,KAAKZ,EAAuBC,CAAM,GAAG;AAChG,IAAAG,EAAK,MAAM,aAAa,QACxBA,EAAK,MAAM,YAAY,WACvBL,EAAc,OAAOK,CAAI;AACzB;AAAA,EACF;AAEA,QAAMS,IAAUV,EAAmBC,CAAI;AACvC,EAAAA,EAAK,MAAM,aAAa,QACxBA,EAAK,MAAM,YAAY,GAAGK,IAASI,EAAQ,CAAC,MAAMH,IAASG,EAAQ,CAAC,MAC/DT,EAAK;AAEV,QAAMU,IAAQ,sBAAsB,MAAM;AACxC,IAAAf,EAAc,OAAOK,CAAI,GACzBA,EAAK,MAAM,aACT,aAAaQ,EAAU,oBAAoB,MAAMA,EAAU,gBAAgB,IAC7ER,EAAK,MAAM,YAAY;AAAA,EACzB,CAAC;AACD,EAAAL,EAAc,IAAIK,GAAMU,CAAK;AAC/B;AAEO,SAASC,EAAed,GAAsC;AACnE,QAAMW,IAAYV,EAAuBD,CAAM,GACzCe,IAAW,CAACJ,EAAU,WAAWZ,EAAuBC,CAAM,IAChE,IACAW,EAAU;AACd,SAAO,UAAUI,CAAQ,MAAMJ,EAAU,UAAU,aAAaI,CAAQ,MAAMJ,EAAU,UAAU;AACpG;"}