kdutify 0.16.9-rc.0 → 2.6.1

package/lib/components/transitions/createTransition.js

@@ -0,0 +1,124 @@
+import mergeData from '../../util/mergeData';
+
+function mergeTransitions(dest = [], ...transitions) {
+  /* eslint-disable-next-line no-array-constructor */
+  return Array().concat(dest, ...transitions);
+}
+
+export function createSimpleTransition(name, origin = 'top center 0', mode) {
+  return {
+    name,
+    functional: true,
+    props: {
+      group: {
+        type: Boolean,
+        default: false
+      },
+      hideOnLeave: {
+        type: Boolean,
+        default: false
+      },
+      leaveAbsolute: {
+        type: Boolean,
+        default: false
+      },
+      mode: {
+        type: String,
+        default: mode
+      },
+      origin: {
+        type: String,
+        default: origin
+      }
+    },
+
+    render(h, context) {
+      const tag = `transition${context.props.group ? '-group' : ''}`;
+      const data = {
+        props: {
+          name,
+          mode: context.props.mode
+        },
+        on: {
+          beforeEnter(el) {
+            el.style.transformOrigin = context.props.origin;
+            el.style.webkitTransformOrigin = context.props.origin;
+          }
+
+        }
+      };
+
+      if (context.props.leaveAbsolute) {
+        data.on.leave = mergeTransitions(data.on.leave, el => {
+          const {
+            offsetTop,
+            offsetLeft,
+            offsetWidth,
+            offsetHeight
+          } = el;
+          el._transitionInitialStyles = {
+            position: el.style.position,
+            top: el.style.top,
+            left: el.style.left,
+            width: el.style.width,
+            height: el.style.height
+          };
+          el.style.position = 'absolute';
+          el.style.top = offsetTop + 'px';
+          el.style.left = offsetLeft + 'px';
+          el.style.width = offsetWidth + 'px';
+          el.style.height = offsetHeight + 'px';
+        });
+        data.on.afterLeave = mergeTransitions(data.on.afterLeave, el => {
+          if (el && el._transitionInitialStyles) {
+            const {
+              position,
+              top,
+              left,
+              width,
+              height
+            } = el._transitionInitialStyles;
+            delete el._transitionInitialStyles;
+            el.style.position = position || '';
+            el.style.top = top || '';
+            el.style.left = left || '';
+            el.style.width = width || '';
+            el.style.height = height || '';
+          }
+        });
+      }
+
+      if (context.props.hideOnLeave) {
+        data.on.leave = mergeTransitions(data.on.leave, el => {
+          el.style.setProperty('display', 'none', 'important');
+        });
+      }
+
+      return h(tag, mergeData(context.data, data), context.children);
+    }
+
+  };
+}
+export function createJavascriptTransition(name, functions, mode = 'in-out') {
+  return {
+    name,
+    functional: true,
+    props: {
+      mode: {
+        type: String,
+        default: mode
+      }
+    },
+
+    render(h, context) {
+      return h('transition', mergeData(context.data, {
+        props: {
+          name
+        },
+        on: functions
+      }), context.children);
+    }
+
+  };
+}
+//# sourceMappingURL=createTransition.js.map

package/lib/components/transitions/createTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/transitions/createTransition.ts"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponentOptions, KNode, KNodeData } from 'kdu'\nimport mergeData from '../../util/mergeData'\n\nfunction mergeTransitions (\n  dest: Function | Function[] = [],\n  ...transitions: (Function | Function[])[]\n) {\n  /* eslint-disable-next-line no-array-constructor */\n  return Array<Function>().concat(dest, ...transitions)\n}\n\nexport function createSimpleTransition (\n  name: string,\n  origin = 'top center 0',\n  mode?: string\n): FunctionalComponentOptions {\n  return {\n    name,\n\n    functional: true,\n\n    props: {\n      group: {\n        type: Boolean,\n        default: false,\n      },\n      hideOnLeave: {\n        type: Boolean,\n        default: false,\n      },\n      leaveAbsolute: {\n        type: Boolean,\n        default: false,\n      },\n      mode: {\n        type: String,\n        default: mode,\n      },\n      origin: {\n        type: String,\n        default: origin,\n      },\n    },\n\n    render (h, context): KNode {\n      const tag = `transition${context.props.group ? '-group' : ''}`\n      const data: KNodeData = {\n        props: {\n          name,\n          mode: context.props.mode,\n        },\n        on: {\n          beforeEnter (el: HTMLElement) {\n            el.style.transformOrigin = context.props.origin\n            el.style.webkitTransformOrigin = context.props.origin\n          },\n        },\n      }\n\n      if (context.props.leaveAbsolute) {\n        data.on!.leave = mergeTransitions(data.on!.leave, (el: HTMLElement) => {\n          const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = el\n          el._transitionInitialStyles = {\n            position: el.style.position,\n            top: el.style.top,\n            left: el.style.left,\n            width: el.style.width,\n            height: el.style.height,\n          }\n          el.style.position = 'absolute'\n          el.style.top = offsetTop + 'px'\n          el.style.left = offsetLeft + 'px'\n          el.style.width = offsetWidth + 'px'\n          el.style.height = offsetHeight + 'px'\n        })\n        data.on!.afterLeave = mergeTransitions(data.on!.afterLeave, (el?: HTMLElement) => {\n          if (el && el._transitionInitialStyles) {\n            const { position, top, left, width, height } = el._transitionInitialStyles\n            delete el._transitionInitialStyles\n            el.style.position = position || ''\n            el.style.top = top || ''\n            el.style.left = left || ''\n            el.style.width = width || ''\n            el.style.height = height || ''\n          }\n        })\n      }\n      if (context.props.hideOnLeave) {\n        data.on!.leave = mergeTransitions(data.on!.leave, (el: HTMLElement) => {\n          el.style.setProperty('display', 'none', 'important')\n        })\n      }\n\n      return h(tag, mergeData(context.data, data), context.children)\n    },\n  }\n}\n\nexport function createJavascriptTransition (\n  name: string,\n  functions: Record<string, any>,\n  mode = 'in-out'\n): FunctionalComponentOptions {\n  return {\n    name,\n\n    functional: true,\n\n    props: {\n      mode: {\n        type: String,\n        default: mode,\n      },\n    },\n\n    render (h, context): KNode {\n      return h(\n        'transition',\n        mergeData(context.data, {\n          props: { name },\n          on: functions,\n        }),\n        context.children\n      )\n    },\n  }\n}\n"],"sourceRoot":"","file":"createTransition.js"}

package/lib/components/transitions/expand-transition.js

@@ -0,0 +1,70 @@
+import { upperFirst } from '../../util/helpers';
+export default function (expandedParentClass = '', x = false) {
+  const sizeProperty = x ? 'width' : 'height';
+  const offsetProperty = `offset${upperFirst(sizeProperty)}`;
+  return {
+    beforeEnter(el) {
+      el._parent = el.parentNode;
+      el._initialStyle = {
+        transition: el.style.transition,
+        overflow: el.style.overflow,
+        [sizeProperty]: el.style[sizeProperty]
+      };
+    },
+
+    enter(el) {
+      const initialStyle = el._initialStyle;
+      el.style.setProperty('transition', 'none', 'important'); // Hide overflow to account for collapsed margins in the calculated height
+
+      el.style.overflow = 'hidden';
+      const offset = `${el[offsetProperty]}px`;
+      el.style[sizeProperty] = '0';
+      void el.offsetHeight; // force reflow
+
+      el.style.transition = initialStyle.transition;
+
+      if (expandedParentClass && el._parent) {
+        el._parent.classList.add(expandedParentClass);
+      }
+
+      requestAnimationFrame(() => {
+        el.style[sizeProperty] = offset;
+      });
+    },
+
+    afterEnter: resetStyles,
+    enterCancelled: resetStyles,
+
+    leave(el) {
+      el._initialStyle = {
+        transition: '',
+        overflow: el.style.overflow,
+        [sizeProperty]: el.style[sizeProperty]
+      };
+      el.style.overflow = 'hidden';
+      el.style[sizeProperty] = `${el[offsetProperty]}px`;
+      void el.offsetHeight; // force reflow
+
+      requestAnimationFrame(() => el.style[sizeProperty] = '0');
+    },
+
+    afterLeave,
+    leaveCancelled: afterLeave
+  };
+
+  function afterLeave(el) {
+    if (expandedParentClass && el._parent) {
+      el._parent.classList.remove(expandedParentClass);
+    }
+
+    resetStyles(el);
+  }
+
+  function resetStyles(el) {
+    const size = el._initialStyle[sizeProperty];
+    el.style.overflow = el._initialStyle.overflow;
+    if (size != null) el.style[sizeProperty] = size;
+    delete el._initialStyle;
+  }
+}
+//# sourceMappingURL=expand-transition.js.map

package/lib/components/transitions/expand-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/transitions/expand-transition.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,oBAA3B;AAYA,eAAc,UAAW,mBAAmB,GAAG,EAAjC,EAAqC,CAAC,GAAG,KAAzC,EAA8C;AAC1D,QAAM,YAAY,GAAG,CAAC,GAAG,OAAH,GAAa,QAAnC;AACA,QAAM,cAAc,GAAG,SAAS,UAAU,CAAC,YAAD,CAAc,EAAxD;AAEA,SAAO;AACL,IAAA,WAAW,CAAE,EAAF,EAAuB;AAChC,MAAA,EAAE,CAAC,OAAH,GAAa,EAAE,CAAC,UAAhB;AACA,MAAA,EAAE,CAAC,aAAH,GAAmB;AACjB,QAAA,UAAU,EAAE,EAAE,CAAC,KAAH,CAAS,UADJ;AAEjB,QAAA,QAAQ,EAAE,EAAE,CAAC,KAAH,CAAS,QAFF;AAGjB,SAAC,YAAD,GAAgB,EAAE,CAAC,KAAH,CAAS,YAAT;AAHC,OAAnB;AAKD,KARI;;AAUL,IAAA,KAAK,CAAE,EAAF,EAAuB;AAC1B,YAAM,YAAY,GAAG,EAAE,CAAC,aAAxB;AAEA,MAAA,EAAE,CAAC,KAAH,CAAS,WAAT,CAAqB,YAArB,EAAmC,MAAnC,EAA2C,WAA3C,EAH0B,CAI1B;;AACA,MAAA,EAAE,CAAC,KAAH,CAAS,QAAT,GAAoB,QAApB;AACA,YAAM,MAAM,GAAG,GAAG,EAAE,CAAC,cAAD,CAAgB,IAApC;AAEA,MAAA,EAAE,CAAC,KAAH,CAAS,YAAT,IAAyB,GAAzB;AAEA,WAAK,EAAE,CAAC,YAAR,CAV0B,CAUL;;AAErB,MAAA,EAAE,CAAC,KAAH,CAAS,UAAT,GAAsB,YAAY,CAAC,UAAnC;;AAEA,UAAI,mBAAmB,IAAI,EAAE,CAAC,OAA9B,EAAuC;AACrC,QAAA,EAAE,CAAC,OAAH,CAAW,SAAX,CAAqB,GAArB,CAAyB,mBAAzB;AACD;;AAED,MAAA,qBAAqB,CAAC,MAAK;AACzB,QAAA,EAAE,CAAC,KAAH,CAAS,YAAT,IAAyB,MAAzB;AACD,OAFoB,CAArB;AAGD,KA/BI;;AAiCL,IAAA,UAAU,EAAE,WAjCP;AAkCL,IAAA,cAAc,EAAE,WAlCX;;AAoCL,IAAA,KAAK,CAAE,EAAF,EAAuB;AAC1B,MAAA,EAAE,CAAC,aAAH,GAAmB;AACjB,QAAA,UAAU,EAAE,EADK;AAEjB,QAAA,QAAQ,EAAE,EAAE,CAAC,KAAH,CAAS,QAFF;AAGjB,SAAC,YAAD,GAAgB,EAAE,CAAC,KAAH,CAAS,YAAT;AAHC,OAAnB;AAMA,MAAA,EAAE,CAAC,KAAH,CAAS,QAAT,GAAoB,QAApB;AACA,MAAA,EAAE,CAAC,KAAH,CAAS,YAAT,IAAyB,GAAG,EAAE,CAAC,cAAD,CAAgB,IAA9C;AACA,WAAK,EAAE,CAAC,YAAR,CAT0B,CASL;;AAErB,MAAA,qBAAqB,CAAC,MAAO,EAAE,CAAC,KAAH,CAAS,YAAT,IAAyB,GAAjC,CAArB;AACD,KAhDI;;AAkDL,IAAA,UAlDK;AAmDL,IAAA,cAAc,EAAE;AAnDX,GAAP;;AAsDA,WAAS,UAAT,CAAqB,EAArB,EAA0C;AACxC,QAAI,mBAAmB,IAAI,EAAE,CAAC,OAA9B,EAAuC;AACrC,MAAA,EAAE,CAAC,OAAH,CAAW,SAAX,CAAqB,MAArB,CAA4B,mBAA5B;AACD;;AACD,IAAA,WAAW,CAAC,EAAD,CAAX;AACD;;AAED,WAAS,WAAT,CAAsB,EAAtB,EAA2C;AACzC,UAAM,IAAI,GAAG,EAAE,CAAC,aAAH,CAAkB,YAAlB,CAAb;AACA,IAAA,EAAE,CAAC,KAAH,CAAS,QAAT,GAAoB,EAAE,CAAC,aAAH,CAAkB,QAAtC;AACA,QAAI,IAAI,IAAI,IAAZ,EAAkB,EAAE,CAAC,KAAH,CAAS,YAAT,IAAyB,IAAzB;AAClB,WAAO,EAAE,CAAC,aAAV;AACD;AACF","sourcesContent":["import { upperFirst } from '../../util/helpers'\n\ninterface HTMLExpandElement extends HTMLElement {\n  _parent?: (Node & ParentNode & HTMLElement) | null\n  _initialStyle?: {\n    transition: string\n    overflow: string\n    height?: string | null\n    width?: string | null\n  }\n}\n\nexport default function (expandedParentClass = '', x = false) {\n  const sizeProperty = x ? 'width' : 'height' as 'width' | 'height'\n  const offsetProperty = `offset${upperFirst(sizeProperty)}` as 'offsetHeight' | 'offsetWidth'\n\n  return {\n    beforeEnter (el: HTMLExpandElement) {\n      el._parent = el.parentNode as (Node & ParentNode & HTMLElement) | null\n      el._initialStyle = {\n        transition: el.style.transition,\n        overflow: el.style.overflow,\n        [sizeProperty]: el.style[sizeProperty],\n      }\n    },\n\n    enter (el: HTMLExpandElement) {\n      const initialStyle = el._initialStyle!\n\n      el.style.setProperty('transition', 'none', 'important')\n      // Hide overflow to account for collapsed margins in the calculated height\n      el.style.overflow = 'hidden'\n      const offset = `${el[offsetProperty]}px`\n\n      el.style[sizeProperty] = '0'\n\n      void el.offsetHeight // force reflow\n\n      el.style.transition = initialStyle.transition\n\n      if (expandedParentClass && el._parent) {\n        el._parent.classList.add(expandedParentClass)\n      }\n\n      requestAnimationFrame(() => {\n        el.style[sizeProperty] = offset\n      })\n    },\n\n    afterEnter: resetStyles,\n    enterCancelled: resetStyles,\n\n    leave (el: HTMLExpandElement) {\n      el._initialStyle = {\n        transition: '',\n        overflow: el.style.overflow,\n        [sizeProperty]: el.style[sizeProperty],\n      }\n\n      el.style.overflow = 'hidden'\n      el.style[sizeProperty] = `${el[offsetProperty]}px`\n      void el.offsetHeight // force reflow\n\n      requestAnimationFrame(() => (el.style[sizeProperty] = '0'))\n    },\n\n    afterLeave,\n    leaveCancelled: afterLeave,\n  }\n\n  function afterLeave (el: HTMLExpandElement) {\n    if (expandedParentClass && el._parent) {\n      el._parent.classList.remove(expandedParentClass)\n    }\n    resetStyles(el)\n  }\n\n  function resetStyles (el: HTMLExpandElement) {\n    const size = el._initialStyle![sizeProperty]\n    el.style.overflow = el._initialStyle!.overflow\n    if (size != null) el.style[sizeProperty] = size\n    delete el._initialStyle\n  }\n}\n"],"sourceRoot":"","file":"expand-transition.js"}

package/lib/components/transitions/index.js

@@ -0,0 +1,52 @@
+import { createSimpleTransition, createJavascriptTransition } from './createTransition';
+import ExpandTransitionGenerator from './expand-transition'; // Component specific transitions
+
+export const KCarouselTransition = createSimpleTransition('carousel-transition');
+export const KCarouselReverseTransition = createSimpleTransition('carousel-reverse-transition');
+export const KTabTransition = createSimpleTransition('tab-transition');
+export const KTabReverseTransition = createSimpleTransition('tab-reverse-transition');
+export const KMenuTransition = createSimpleTransition('menu-transition');
+export const KFabTransition = createSimpleTransition('fab-transition', 'center center', 'out-in'); // Generic transitions
+
+export const KDialogTransition = createSimpleTransition('dialog-transition');
+export const KDialogBottomTransition = createSimpleTransition('dialog-bottom-transition');
+export const KDialogTopTransition = createSimpleTransition('dialog-top-transition');
+export const KFadeTransition = createSimpleTransition('fade-transition');
+export const KScaleTransition = createSimpleTransition('scale-transition');
+export const KScrollXTransition = createSimpleTransition('scroll-x-transition');
+export const KScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition');
+export const KScrollYTransition = createSimpleTransition('scroll-y-transition');
+export const KScrollYReverseTransition = createSimpleTransition('scroll-y-reverse-transition');
+export const KSlideXTransition = createSimpleTransition('slide-x-transition');
+export const KSlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition');
+export const KSlideYTransition = createSimpleTransition('slide-y-transition');
+export const KSlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition'); // Javascript transitions
+
+export const KExpandTransition = createJavascriptTransition('expand-transition', ExpandTransitionGenerator());
+export const KExpandXTransition = createJavascriptTransition('expand-x-transition', ExpandTransitionGenerator('', true));
+export default {
+  $_kdutify_subcomponents: {
+    KCarouselTransition,
+    KCarouselReverseTransition,
+    KDialogTransition,
+    KDialogBottomTransition,
+    KDialogTopTransition,
+    KFabTransition,
+    KFadeTransition,
+    KMenuTransition,
+    KScaleTransition,
+    KScrollXTransition,
+    KScrollXReverseTransition,
+    KScrollYTransition,
+    KScrollYReverseTransition,
+    KSlideXTransition,
+    KSlideXReverseTransition,
+    KSlideYTransition,
+    KSlideYReverseTransition,
+    KTabReverseTransition,
+    KTabTransition,
+    KExpandTransition,
+    KExpandXTransition
+  }
+};
+//# sourceMappingURL=index.js.map

package/lib/components/transitions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/transitions/index.ts"],"names":[],"mappings":"AAAA,SACE,sBADF,EAEE,0BAFF,QAGO,oBAHP;AAKA,OAAO,yBAAP,MAAsC,qBAAtC,C,CAEA;;AACA,OAAO,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,qBAAD,CAAlD;AACP,OAAO,MAAM,0BAA0B,GAAG,sBAAsB,CAAC,6BAAD,CAAzD;AACP,OAAO,MAAM,cAAc,GAAG,sBAAsB,CAAC,gBAAD,CAA7C;AACP,OAAO,MAAM,qBAAqB,GAAG,sBAAsB,CAAC,wBAAD,CAApD;AACP,OAAO,MAAM,eAAe,GAAG,sBAAsB,CAAC,iBAAD,CAA9C;AACP,OAAO,MAAM,cAAc,GAAG,sBAAsB,CAAC,gBAAD,EAAmB,eAAnB,EAAoC,QAApC,CAA7C,C,CAEP;;AACA,OAAO,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,mBAAD,CAAhD;AACP,OAAO,MAAM,uBAAuB,GAAG,sBAAsB,CAAC,0BAAD,CAAtD;AACP,OAAO,MAAM,oBAAoB,GAAG,sBAAsB,CAAC,uBAAD,CAAnD;AACP,OAAO,MAAM,eAAe,GAAG,sBAAsB,CAAC,iBAAD,CAA9C;AACP,OAAO,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,kBAAD,CAA/C;AACP,OAAO,MAAM,kBAAkB,GAAG,sBAAsB,CAAC,qBAAD,CAAjD;AACP,OAAO,MAAM,yBAAyB,GAAG,sBAAsB,CAAC,6BAAD,CAAxD;AACP,OAAO,MAAM,kBAAkB,GAAG,sBAAsB,CAAC,qBAAD,CAAjD;AACP,OAAO,MAAM,yBAAyB,GAAG,sBAAsB,CAAC,6BAAD,CAAxD;AACP,OAAO,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,oBAAD,CAAhD;AACP,OAAO,MAAM,wBAAwB,GAAG,sBAAsB,CAAC,4BAAD,CAAvD;AACP,OAAO,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,oBAAD,CAAhD;AACP,OAAO,MAAM,wBAAwB,GAAG,sBAAsB,CAAC,4BAAD,CAAvD,C,CAEP;;AACA,OAAO,MAAM,iBAAiB,GAAG,0BAA0B,CAAC,mBAAD,EAAsB,yBAAyB,EAA/C,CAApD;AACP,OAAO,MAAM,kBAAkB,GAAG,0BAA0B,CAAC,qBAAD,EAAwB,yBAAyB,CAAC,EAAD,EAAK,IAAL,CAAjD,CAArD;AAEP,eAAe;AACb,EAAA,uBAAuB,EAAE;AACvB,IAAA,mBADuB;AAEvB,IAAA,0BAFuB;AAGvB,IAAA,iBAHuB;AAIvB,IAAA,uBAJuB;AAKvB,IAAA,oBALuB;AAMvB,IAAA,cANuB;AAOvB,IAAA,eAPuB;AAQvB,IAAA,eARuB;AASvB,IAAA,gBATuB;AAUvB,IAAA,kBAVuB;AAWvB,IAAA,yBAXuB;AAYvB,IAAA,kBAZuB;AAavB,IAAA,yBAbuB;AAcvB,IAAA,iBAduB;AAevB,IAAA,wBAfuB;AAgBvB,IAAA,iBAhBuB;AAiBvB,IAAA,wBAjBuB;AAkBvB,IAAA,qBAlBuB;AAmBvB,IAAA,cAnBuB;AAoBvB,IAAA,iBApBuB;AAqBvB,IAAA;AArBuB;AADZ,CAAf","sourcesContent":["import {\n  createSimpleTransition,\n  createJavascriptTransition,\n} from './createTransition'\n\nimport ExpandTransitionGenerator from './expand-transition'\n\n// Component specific transitions\nexport const KCarouselTransition = createSimpleTransition('carousel-transition')\nexport const KCarouselReverseTransition = createSimpleTransition('carousel-reverse-transition')\nexport const KTabTransition = createSimpleTransition('tab-transition')\nexport const KTabReverseTransition = createSimpleTransition('tab-reverse-transition')\nexport const KMenuTransition = createSimpleTransition('menu-transition')\nexport const KFabTransition = createSimpleTransition('fab-transition', 'center center', 'out-in')\n\n// Generic transitions\nexport const KDialogTransition = createSimpleTransition('dialog-transition')\nexport const KDialogBottomTransition = createSimpleTransition('dialog-bottom-transition')\nexport const KDialogTopTransition = createSimpleTransition('dialog-top-transition')\nexport const KFadeTransition = createSimpleTransition('fade-transition')\nexport const KScaleTransition = createSimpleTransition('scale-transition')\nexport const KScrollXTransition = createSimpleTransition('scroll-x-transition')\nexport const KScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition')\nexport const KScrollYTransition = createSimpleTransition('scroll-y-transition')\nexport const KScrollYReverseTransition = createSimpleTransition('scroll-y-reverse-transition')\nexport const KSlideXTransition = createSimpleTransition('slide-x-transition')\nexport const KSlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition')\nexport const KSlideYTransition = createSimpleTransition('slide-y-transition')\nexport const KSlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition')\n\n// Javascript transitions\nexport const KExpandTransition = createJavascriptTransition('expand-transition', ExpandTransitionGenerator())\nexport const KExpandXTransition = createJavascriptTransition('expand-x-transition', ExpandTransitionGenerator('', true))\n\nexport default {\n  $_kdutify_subcomponents: {\n    KCarouselTransition,\n    KCarouselReverseTransition,\n    KDialogTransition,\n    KDialogBottomTransition,\n    KDialogTopTransition,\n    KFabTransition,\n    KFadeTransition,\n    KMenuTransition,\n    KScaleTransition,\n    KScrollXTransition,\n    KScrollXReverseTransition,\n    KScrollYTransition,\n    KScrollYReverseTransition,\n    KSlideXTransition,\n    KSlideXReverseTransition,\n    KSlideYTransition,\n    KSlideYReverseTransition,\n    KTabReverseTransition,\n    KTabTransition,\n    KExpandTransition,\n    KExpandXTransition,\n  },\n}\n"],"sourceRoot":"","file":"index.js"}

package/lib/directives/click-outside/index.js

@@ -0,0 +1,101 @@
+import { attachedRoot } from '../../util/dom';
+
+function defaultConditional() {
+  return true;
+}
+
+function checkEvent(e, el, binding) {
+  // The include element callbacks below can be expensive
+  // so we should avoid calling them when we're not active.
+  // Explicitly check for false to allow fallback compatibility
+  // with non-toggleable components
+  if (!e || checkIsActive(e, binding) === false) return false; // If we're clicking inside the shadowroot, then the app root doesn't get the same
+  // level of introspection as to _what_ we're clicking. We want to check to see if
+  // our target is the shadowroot parent container, and if it is, ignore.
+
+  const root = attachedRoot(el);
+  if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot && root.host === e.target) return false; // Check if additional elements were passed to be included in check
+  // (click must be outside all included elements, if any)
+
+  const elements = (typeof binding.value === 'object' && binding.value.include || (() => []))(); // Add the root element for the component this directive was defined on
+
+
+  elements.push(el); // Check if it's a click outside our elements, and then if our callback returns true.
+  // Non-toggleable components should take action in their callback and return falsy.
+  // Toggleable can return true if it wants to deactivate.
+  // Note that, because we're in the capture phase, this callback will occur before
+  // the bubbling click event on any outside elements.
+
+  return !elements.some(el => el.contains(e.target));
+}
+
+function checkIsActive(e, binding) {
+  const isActive = typeof binding.value === 'object' && binding.value.closeConditional || defaultConditional;
+  return isActive(e);
+}
+
+function directive(e, el, binding, knode) {
+  const handler = typeof binding.value === 'function' ? binding.value : binding.value.handler;
+  el._clickOutside.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
+    checkIsActive(e, binding) && handler && handler(e);
+  }, 0);
+}
+
+function handleShadow(el, callback) {
+  const root = attachedRoot(el);
+  callback(document);
+
+  if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {
+    callback(root);
+  }
+}
+
+export const ClickOutside = {
+  // [data-app] may not be found
+  // if using bind, inserted makes
+  // sure that the root element is
+  // available, iOS does not support
+  // clicks on body
+  inserted(el, binding, knode) {
+    const onClick = e => directive(e, el, binding, knode);
+
+    const onMousedown = e => {
+      el._clickOutside.lastMousedownWasOutside = checkEvent(e, el, binding);
+    };
+
+    handleShadow(el, app => {
+      app.addEventListener('click', onClick, true);
+      app.addEventListener('mousedown', onMousedown, true);
+    });
+
+    if (!el._clickOutside) {
+      el._clickOutside = {
+        lastMousedownWasOutside: true
+      };
+    }
+
+    el._clickOutside[knode.context._uid] = {
+      onClick,
+      onMousedown
+    };
+  },
+
+  unbind(el, binding, knode) {
+    if (!el._clickOutside) return;
+    handleShadow(el, app => {
+      var _el$_clickOutside;
+
+      if (!app || !((_el$_clickOutside = el._clickOutside) != null && _el$_clickOutside[knode.context._uid])) return;
+      const {
+        onClick,
+        onMousedown
+      } = el._clickOutside[knode.context._uid];
+      app.removeEventListener('click', onClick, true);
+      app.removeEventListener('mousedown', onMousedown, true);
+    });
+    delete el._clickOutside[knode.context._uid];
+  }
+
+};
+export default ClickOutside;
+//# sourceMappingURL=index.js.map

package/lib/directives/click-outside/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/directives/click-outside/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attachedRoot } from '../../util/dom'\nimport { KNodeDirective } from 'kdu/types/knode'\nimport { KNode } from 'kdu'\n\ninterface ClickOutsideBindingArgs {\n  handler: (e: Event) => void\n  closeConditional?: (e: Event) => boolean\n  include?: () => HTMLElement[]\n}\n\ninterface ClickOutsideDirective extends KNodeDirective {\n  value?: ((e: Event) => void) | ClickOutsideBindingArgs\n}\n\nfunction defaultConditional () {\n  return true\n}\n\nfunction checkEvent (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective): boolean {\n  // The include element callbacks below can be expensive\n  // so we should avoid calling them when we're not active.\n  // Explicitly check for false to allow fallback compatibility\n  // with non-toggleable components\n  if (!e || checkIsActive(e, binding) === false) return false\n\n  // If we're clicking inside the shadowroot, then the app root doesn't get the same\n  // level of introspection as to _what_ we're clicking. We want to check to see if\n  // our target is the shadowroot parent container, and if it is, ignore.\n  const root = attachedRoot(el)\n  if (\n    typeof ShadowRoot !== 'undefined' &&\n    root instanceof ShadowRoot &&\n    root.host === e.target\n  ) return false\n\n  // Check if additional elements were passed to be included in check\n  // (click must be outside all included elements, if any)\n  const elements = ((typeof binding.value === 'object' && binding.value.include) || (() => []))()\n  // Add the root element for the component this directive was defined on\n  elements.push(el)\n\n  // Check if it's a click outside our elements, and then if our callback returns true.\n  // Non-toggleable components should take action in their callback and return falsy.\n  // Toggleable can return true if it wants to deactivate.\n  // Note that, because we're in the capture phase, this callback will occur before\n  // the bubbling click event on any outside elements.\n  return !elements.some(el => el.contains(e.target as Node))\n}\n\nfunction checkIsActive (e: PointerEvent, binding: ClickOutsideDirective): boolean | void {\n  const isActive = (typeof binding.value === 'object' && binding.value.closeConditional) || defaultConditional\n\n  return isActive(e)\n}\n\nfunction directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective, knode: KNode) {\n  const handler = typeof binding.value === 'function' ? binding.value : binding.value!.handler\n\n  el._clickOutside!.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {\n    checkIsActive(e, binding) && handler && handler(e)\n  }, 0)\n}\n\nfunction handleShadow (el: HTMLElement, callback: Function): void {\n  const root = attachedRoot(el)\n\n  callback(document)\n\n  if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {\n    callback(root)\n  }\n}\n\nexport const ClickOutside = {\n  // [data-app] may not be found\n  // if using bind, inserted makes\n  // sure that the root element is\n  // available, iOS does not support\n  // clicks on body\n  inserted (el: HTMLElement, binding: ClickOutsideDirective, knode: KNode) {\n    const onClick = (e: Event) => directive(e as PointerEvent, el, binding, knode)\n    const onMousedown = (e: Event) => {\n      el._clickOutside!.lastMousedownWasOutside = checkEvent(e as PointerEvent, el, binding)\n    }\n\n    handleShadow(el, (app: HTMLElement) => {\n      app.addEventListener('click', onClick, true)\n      app.addEventListener('mousedown', onMousedown, true)\n    })\n\n    if (!el._clickOutside) {\n      el._clickOutside = {\n        lastMousedownWasOutside: true,\n      }\n    }\n\n    el._clickOutside[knode.context!._uid] = {\n      onClick,\n      onMousedown,\n    }\n  },\n\n  unbind (el: HTMLElement, binding: ClickOutsideDirective, knode: KNode) {\n    if (!el._clickOutside) return\n\n    handleShadow(el, (app: HTMLElement) => {\n      if (!app || !el._clickOutside?.[knode.context!._uid]) return\n\n      const { onClick, onMousedown } = el._clickOutside[knode.context!._uid]!\n\n      app.removeEventListener('click', onClick, true)\n      app.removeEventListener('mousedown', onMousedown, true)\n    })\n\n    delete el._clickOutside[knode.context!._uid]\n  },\n}\n\nexport default ClickOutside\n"],"sourceRoot":"","file":"index.js"}

package/lib/directives/color/index.js

@@ -0,0 +1,59 @@
+// Utilities
+import { classToHex, isCssColor, parseGradient } from '../../util/colorUtils';
+import colors from '../../util/colors';
+
+function setTextColor(el, color, currentTheme) {
+  const cssColor = !isCssColor(color) ? classToHex(color, colors, currentTheme) : color;
+  el.style.color = cssColor;
+  el.style.caretColor = cssColor;
+}
+
+function setBackgroundColor(el, color, currentTheme) {
+  const cssColor = !isCssColor(color) ? classToHex(color, colors, currentTheme) : color;
+  el.style.backgroundColor = cssColor;
+  el.style.borderColor = cssColor;
+}
+
+function setBorderColor(el, color, currentTheme, modifiers) {
+  const cssColor = !isCssColor(color) ? classToHex(color, colors, currentTheme) : color;
+
+  if (!modifiers || !Object.keys(modifiers).length) {
+    el.style.borderColor = cssColor;
+    return;
+  }
+
+  if (modifiers.top) el.style.borderTopColor = cssColor;
+  if (modifiers.right) el.style.borderRightColor = cssColor;
+  if (modifiers.bottom) el.style.borderBottomColor = cssColor;
+  if (modifiers.left) el.style.borderLeftColor = cssColor;
+}
+
+function setGradientColor(el, gradient, currentTheme) {
+  el.style.backgroundImage = `linear-gradient(${parseGradient(gradient, colors, currentTheme)})`;
+}
+
+function updateColor(el, binding, node) {
+  const currentTheme = node.context.$kdutify.theme.currentTheme;
+
+  if (binding.arg === undefined) {
+    setBackgroundColor(el, binding.value, currentTheme);
+  } else if (binding.arg === 'text') {
+    setTextColor(el, binding.value, currentTheme);
+  } else if (binding.arg === 'border') {
+    setBorderColor(el, binding.value, currentTheme, binding.modifiers);
+  } else if (binding.arg === 'gradient') {
+    setGradientColor(el, binding.value, currentTheme);
+  }
+}
+
+function update(el, binding, node) {
+  if (binding.value === binding.oldValue) return;
+  updateColor(el, binding, node);
+}
+
+export const Color = {
+  bind: updateColor,
+  update
+};
+export default Color;
+//# sourceMappingURL=index.js.map

package/lib/directives/color/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/directives/color/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Utilities\nimport {\n  classToHex,\n  isCssColor,\n  parseGradient,\n} from '../../util/colorUtils'\nimport colors from '../../util/colors'\n\n// Types\nimport { KdutifyThemeVariant } from 'types/services/theme'\nimport { KNode, KNodeDirective } from 'kdu'\n\ninterface BorderModifiers {\n  top?: Boolean\n  right?: Boolean\n  bottom?: Boolean\n  left?: Boolean\n}\n\nfunction setTextColor (\n  el: HTMLElement,\n  color: string,\n  currentTheme: Partial<KdutifyThemeVariant>,\n) {\n  const cssColor = !isCssColor(color) ? classToHex(color, colors, currentTheme) : color\n\n  el.style.color = cssColor\n  el.style.caretColor = cssColor\n}\n\nfunction setBackgroundColor (\n  el: HTMLElement,\n  color: string,\n  currentTheme: Partial<KdutifyThemeVariant>,\n) {\n  const cssColor = !isCssColor(color) ? classToHex(color, colors, currentTheme) : color\n\n  el.style.backgroundColor = cssColor\n  el.style.borderColor = cssColor\n}\n\nfunction setBorderColor (\n  el: HTMLElement,\n  color: string,\n  currentTheme: Partial<KdutifyThemeVariant>,\n  modifiers?: BorderModifiers,\n) {\n  const cssColor = !isCssColor(color) ? classToHex(color, colors, currentTheme) : color\n\n  if (!modifiers || !Object.keys(modifiers).length) {\n    el.style.borderColor = cssColor\n    return\n  }\n\n  if (modifiers.top) el.style.borderTopColor = cssColor\n  if (modifiers.right) el.style.borderRightColor = cssColor\n  if (modifiers.bottom) el.style.borderBottomColor = cssColor\n  if (modifiers.left) el.style.borderLeftColor = cssColor\n}\n\nfunction setGradientColor (\n  el: HTMLElement,\n  gradient: string,\n  currentTheme: Partial<KdutifyThemeVariant>,\n) {\n  el.style.backgroundImage = `linear-gradient(${\n    parseGradient(gradient, colors, currentTheme)\n  })`\n}\n\nfunction updateColor (\n  el: HTMLElement,\n  binding: KNodeDirective,\n  node: KNode\n) {\n  const currentTheme = node.context!.$kdutify.theme.currentTheme\n\n  if (binding.arg === undefined) {\n    setBackgroundColor(el, binding.value, currentTheme)\n  } else if (binding.arg === 'text') {\n    setTextColor(el, binding.value, currentTheme)\n  } else if (binding.arg === 'border') {\n    setBorderColor(el, binding.value, currentTheme, binding.modifiers)\n  } else if (binding.arg === 'gradient') {\n    setGradientColor(el, binding.value, currentTheme)\n  }\n}\n\nfunction update (\n  el: HTMLElement,\n  binding: KNodeDirective,\n  node: KNode\n) {\n  if (binding.value === binding.oldValue) return\n\n  updateColor(el, binding, node)\n}\n\nexport const Color = {\n  bind: updateColor,\n  update,\n}\n\nexport default Color\n"],"sourceRoot":"","file":"index.js"}

package/lib/directives/index.js

@@ -0,0 +1,8 @@
+export { ClickOutside } from './click-outside';
+export { Intersect } from './intersect';
+export { Mutate } from './mutate';
+export { Resize } from './resize';
+export { Ripple } from './ripple';
+export { Scroll } from './scroll';
+export { Touch } from './touch';
+//# sourceMappingURL=index.js.map

package/lib/directives/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/directives/index.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,iBAA7B;AACA,SAAS,SAAT,QAA0B,aAA1B;AACA,SAAS,MAAT,QAAuB,UAAvB;AACA,SAAS,MAAT,QAAuB,UAAvB;AACA,SAAS,MAAT,QAAuB,UAAvB;AACA,SAAS,MAAT,QAAuB,UAAvB;AACA,SAAS,KAAT,QAAsB,SAAtB","sourcesContent":["export { ClickOutside } from './click-outside'\nexport { Intersect } from './intersect'\nexport { Mutate } from './mutate'\nexport { Resize } from './resize'\nexport { Ripple } from './ripple'\nexport { Scroll } from './scroll'\nexport { Touch } from './touch'\n"],"sourceRoot":"","file":"index.js"}

package/lib/directives/intersect/index.js

@@ -0,0 +1,50 @@
+function inserted(el, binding, knode) {
+  if (typeof window === 'undefined' || !('IntersectionObserver' in window)) return;
+  const modifiers = binding.modifiers || {};
+  const value = binding.value;
+  const {
+    handler,
+    options
+  } = typeof value === 'object' ? value : {
+    handler: value,
+    options: {}
+  };
+  const observer = new IntersectionObserver((entries = [], observer) => {
+    var _el$_observe;
+
+    const _observe = (_el$_observe = el._observe) == null ? void 0 : _el$_observe[knode.context._uid];
+
+    if (!_observe) return; // Just in case, should never fire
+
+    const isIntersecting = entries.some(entry => entry.isIntersecting); // If is not quiet or has already been
+    // initted, invoke the user callback
+
+    if (handler && (!modifiers.quiet || _observe.init) && (!modifiers.once || isIntersecting || _observe.init)) {
+      handler(entries, observer, isIntersecting);
+    }
+
+    if (isIntersecting && modifiers.once) unbind(el, binding, knode);else _observe.init = true;
+  }, options);
+  el._observe = Object(el._observe);
+  el._observe[knode.context._uid] = {
+    init: false,
+    observer
+  };
+  observer.observe(el);
+}
+
+function unbind(el, binding, knode) {
+  var _el$_observe2;
+
+  const observe = (_el$_observe2 = el._observe) == null ? void 0 : _el$_observe2[knode.context._uid];
+  if (!observe) return;
+  observe.observer.unobserve(el);
+  delete el._observe[knode.context._uid];
+}
+
+export const Intersect = {
+  inserted,
+  unbind
+};
+export default Intersect;
+//# sourceMappingURL=index.js.map

package/lib/directives/intersect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/directives/intersect/index.ts"],"names":[],"mappings":"AAiBA,SAAS,QAAT,CAAmB,EAAnB,EAAoC,OAApC,EAAoE,KAApE,EAAgF;AAC9E,MAAI,OAAO,MAAP,KAAkB,WAAlB,IAAiC,EAAE,0BAA0B,MAA5B,CAArC,EAA0E;AAE1E,QAAM,SAAS,GAAG,OAAO,CAAC,SAAR,IAAqB,EAAvC;AACA,QAAM,KAAK,GAAG,OAAO,CAAC,KAAtB;AACA,QAAM;AAAE,IAAA,OAAF;AAAW,IAAA;AAAX,MAAuB,OAAO,KAAP,KAAiB,QAAjB,GACzB,KADyB,GAEzB;AAAE,IAAA,OAAO,EAAE,KAAX;AAAkB,IAAA,OAAO,EAAE;AAA3B,GAFJ;AAGA,QAAM,QAAQ,GAAG,IAAI,oBAAJ,CAAyB,CACxC,OAAA,GAAuC,EADC,EAExC,QAFwC,KAGtC;AAAA;;AACF,UAAM,QAAQ,mBAAG,EAAE,CAAC,QAAN,qBAAG,aAAc,KAAK,CAAC,OAAN,CAAe,IAA7B,CAAjB;;AACA,QAAI,CAAC,QAAL,EAAe,OAFb,CAEoB;;AAEtB,UAAM,cAAc,GAAG,OAAO,CAAC,IAAR,CAAa,KAAK,IAAI,KAAK,CAAC,cAA5B,CAAvB,CAJE,CAMF;AACA;;AACA,QACE,OAAO,KACL,CAAC,SAAS,CAAC,KAAX,IACA,QAAQ,CAAC,IAFJ,CAAP,KAIE,CAAC,SAAS,CAAC,IAAX,IACA,cADA,IAEA,QAAQ,CAAC,IANX,CADF,EASE;AACA,MAAA,OAAO,CAAC,OAAD,EAAU,QAAV,EAAoB,cAApB,CAAP;AACD;;AAED,QAAI,cAAc,IAAI,SAAS,CAAC,IAAhC,EAAsC,MAAM,CAAC,EAAD,EAAK,OAAL,EAAc,KAAd,CAAN,CAAtC,KACK,QAAQ,CAAC,IAAT,GAAgB,IAAhB;AACN,GA1BgB,EA0Bd,OA1Bc,CAAjB;AA4BA,EAAA,EAAE,CAAC,QAAH,GAAc,MAAM,CAAC,EAAE,CAAC,QAAJ,CAApB;AACA,EAAA,EAAE,CAAC,QAAH,CAAa,KAAK,CAAC,OAAN,CAAe,IAA5B,IAAoC;AAAE,IAAA,IAAI,EAAE,KAAR;AAAe,IAAA;AAAf,GAApC;AAEA,EAAA,QAAQ,CAAC,OAAT,CAAiB,EAAjB;AACD;;AAED,SAAS,MAAT,CAAiB,EAAjB,EAAkC,OAAlC,EAAkE,KAAlE,EAA8E;AAAA;;AAC5E,QAAM,OAAO,oBAAG,EAAE,CAAC,QAAN,qBAAG,cAAc,KAAK,CAAC,OAAN,CAAe,IAA7B,CAAhB;AACA,MAAI,CAAC,OAAL,EAAc;AAEd,EAAA,OAAO,CAAC,QAAR,CAAiB,SAAjB,CAA2B,EAA3B;AACA,SAAO,EAAE,CAAC,QAAH,CAAa,KAAK,CAAC,OAAN,CAAe,IAA5B,CAAP;AACD;;AAED,OAAO,MAAM,SAAS,GAAG;AACvB,EAAA,QADuB;AAEvB,EAAA;AAFuB,CAAlB;AAKP,eAAe,SAAf","sourcesContent":["import { KNodeDirective } from 'kdu/types/knode'\nimport { KNode } from 'kdu'\n\ntype ObserveHandler = (\n  entries: IntersectionObserverEntry[],\n  observer: IntersectionObserver,\n  isIntersecting: boolean,\n) => void\n\ninterface ObserveKNodeDirective extends Omit<KNodeDirective, 'modifiers'> {\n  value?: ObserveHandler | { handler: ObserveHandler, options?: IntersectionObserverInit }\n  modifiers?: {\n    once?: boolean\n    quiet?: boolean\n  }\n}\n\nfunction inserted (el: HTMLElement, binding: ObserveKNodeDirective, knode: KNode) {\n  if (typeof window === 'undefined' || !('IntersectionObserver' in window)) return\n\n  const modifiers = binding.modifiers || {}\n  const value = binding.value\n  const { handler, options } = typeof value === 'object'\n    ? value\n    : { handler: value, options: {} }\n  const observer = new IntersectionObserver((\n    entries: IntersectionObserverEntry[] = [],\n    observer: IntersectionObserver\n  ) => {\n    const _observe = el._observe?.[knode.context!._uid]\n    if (!_observe) return // Just in case, should never fire\n\n    const isIntersecting = entries.some(entry => entry.isIntersecting)\n\n    // If is not quiet or has already been\n    // initted, invoke the user callback\n    if (\n      handler && (\n        !modifiers.quiet ||\n        _observe.init\n      ) && (\n        !modifiers.once ||\n        isIntersecting ||\n        _observe.init\n      )\n    ) {\n      handler(entries, observer, isIntersecting)\n    }\n\n    if (isIntersecting && modifiers.once) unbind(el, binding, knode)\n    else _observe.init = true\n  }, options)\n\n  el._observe = Object(el._observe)\n  el._observe![knode.context!._uid] = { init: false, observer }\n\n  observer.observe(el)\n}\n\nfunction unbind (el: HTMLElement, binding: ObserveKNodeDirective, knode: KNode) {\n  const observe = el._observe?.[knode.context!._uid]\n  if (!observe) return\n\n  observe.observer.unobserve(el)\n  delete el._observe![knode.context!._uid]\n}\n\nexport const Intersect = {\n  inserted,\n  unbind,\n}\n\nexport default Intersect\n"],"sourceRoot":"","file":"index.js"}

package/lib/directives/mutate/index.js

@@ -0,0 +1,54 @@
+function inserted(el, binding, knode) {
+  const modifiers = binding.modifiers || {};
+  const value = binding.value;
+  const callback = typeof value === 'object' ? value.handler : value;
+  const {
+    once,
+    ...modifierKeys
+  } = modifiers;
+  const hasModifiers = Object.keys(modifierKeys).length > 0; // Options take top priority
+
+  const options = typeof value === 'object' && value.options ? value.options : hasModifiers // If we have modifiers, use only those provided
+  ? {
+    attributes: modifierKeys.attr,
+    childList: modifierKeys.child,
+    subtree: modifierKeys.sub,
+    characterData: modifierKeys.char
+  } // Defaults to everything on
+  : {
+    attributes: true,
+    childList: true,
+    subtree: true,
+    characterData: true
+  };
+  const observer = new MutationObserver((mutationsList, observer) => {
+    /* istanbul ignore if */
+    if (!el._mutate) return; // Just in case, should never fire
+
+    callback(mutationsList, observer); // If has the once modifier, unbind
+
+    once && unbind(el, binding, knode);
+  });
+  observer.observe(el, options);
+  el._mutate = Object(el._mutate);
+  el._mutate[knode.context._uid] = {
+    observer
+  };
+}
+
+function unbind(el, binding, knode) {
+  var _el$_mutate;
+
+  if (!((_el$_mutate = el._mutate) != null && _el$_mutate[knode.context._uid])) return;
+
+  el._mutate[knode.context._uid].observer.disconnect();
+
+  delete el._mutate[knode.context._uid];
+}
+
+export const Mutate = {
+  inserted,
+  unbind
+};
+export default Mutate;
+//# sourceMappingURL=index.js.map

package/lib/directives/mutate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/directives/mutate/index.ts"],"names":[],"mappings":"AAkBA,SAAS,QAAT,CAAmB,EAAnB,EAAoC,OAApC,EAAmE,KAAnE,EAA+E;AAC7E,QAAM,SAAS,GAAG,OAAO,CAAC,SAAR,IAAqB,EAAvC;AACA,QAAM,KAAK,GAAG,OAAO,CAAC,KAAtB;AACA,QAAM,QAAQ,GAAG,OAAO,KAAP,KAAiB,QAAjB,GAA4B,KAAK,CAAC,OAAlC,GAA4C,KAA7D;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,OAAG;AAAX,MAA4B,SAAlC;AACA,QAAM,YAAY,GAAG,MAAM,CAAC,IAAP,CAAY,YAAZ,EAA0B,MAA1B,GAAmC,CAAxD,CAL6E,CAO7E;;AACA,QAAM,OAAO,GAAG,OAAO,KAAP,KAAiB,QAAjB,IAA6B,KAAK,CAAC,OAAnC,GACZ,KAAK,CAAC,OADM,GAEZ,YAAY,CACZ;AADY,IAEV;AACA,IAAA,UAAU,EAAE,YAAY,CAAC,IADzB;AAEA,IAAA,SAAS,EAAE,YAAY,CAAC,KAFxB;AAGA,IAAA,OAAO,EAAE,YAAY,CAAC,GAHtB;AAIA,IAAA,aAAa,EAAE,YAAY,CAAC;AAJ5B,GAFU,CAQZ;AARY,IASV;AACA,IAAA,UAAU,EAAE,IADZ;AAEA,IAAA,SAAS,EAAE,IAFX;AAGA,IAAA,OAAO,EAAE,IAHT;AAIA,IAAA,aAAa,EAAE;AAJf,GAXN;AAkBA,QAAM,QAAQ,GAAG,IAAI,gBAAJ,CAAqB,CACpC,aADoC,EAEpC,QAFoC,KAGlC;AACF;AACA,QAAI,CAAC,EAAE,CAAC,OAAR,EAAiB,OAFf,CAEsB;;AAExB,IAAA,QAAQ,CAAC,aAAD,EAAgB,QAAhB,CAAR,CAJE,CAMF;;AACA,IAAA,IAAI,IAAI,MAAM,CAAC,EAAD,EAAK,OAAL,EAAc,KAAd,CAAd;AACD,GAXgB,CAAjB;AAaA,EAAA,QAAQ,CAAC,OAAT,CAAiB,EAAjB,EAAqB,OAArB;AACA,EAAA,EAAE,CAAC,OAAH,GAAa,MAAM,CAAC,EAAE,CAAC,OAAJ,CAAnB;AACA,EAAA,EAAE,CAAC,OAAH,CAAY,KAAK,CAAC,OAAN,CAAe,IAA3B,IAAmC;AAAE,IAAA;AAAF,GAAnC;AACD;;AAED,SAAS,MAAT,CAAiB,EAAjB,EAAkC,OAAlC,EAAiE,KAAjE,EAA6E;AAAA;;AAC3E,MAAI,iBAAC,EAAE,CAAC,OAAJ,aAAC,YAAa,KAAK,CAAC,OAAN,CAAe,IAA5B,CAAD,CAAJ,EAAwC;;AAExC,EAAA,EAAE,CAAC,OAAH,CAAW,KAAK,CAAC,OAAN,CAAe,IAA1B,EAAiC,QAAjC,CAA0C,UAA1C;;AACA,SAAO,EAAE,CAAC,OAAH,CAAW,KAAK,CAAC,OAAN,CAAe,IAA1B,CAAP;AACD;;AAED,OAAO,MAAM,MAAM,GAAG;AACpB,EAAA,QADoB;AAEpB,EAAA;AAFoB,CAAf;AAKP,eAAe,MAAf","sourcesContent":["import { KNode, KNodeDirective } from 'kdu'\n\ntype MutateHandler = (\n  mutationsList: MutationRecord[],\n  observer: MutationObserver,\n) => void\n\ninterface MutateKNodeDirective extends Omit<KNodeDirective, 'modifiers'> {\n  value?: MutateHandler | { handler: MutateHandler, options?: MutationObserverInit }\n  modifiers?: {\n    once?: boolean\n    attr?: boolean\n    child?: boolean\n    sub?: boolean\n    char?: boolean\n  }\n}\n\nfunction inserted (el: HTMLElement, binding: MutateKNodeDirective, knode: KNode) {\n  const modifiers = binding.modifiers || {}\n  const value = binding.value\n  const callback = typeof value === 'object' ? value.handler : value!\n  const { once, ...modifierKeys } = modifiers\n  const hasModifiers = Object.keys(modifierKeys).length > 0\n\n  // Options take top priority\n  const options = typeof value === 'object' && value.options\n    ? value.options\n    : hasModifiers\n      // If we have modifiers, use only those provided\n      ? {\n        attributes: modifierKeys.attr,\n        childList: modifierKeys.child,\n        subtree: modifierKeys.sub,\n        characterData: modifierKeys.char,\n      }\n      // Defaults to everything on\n      : {\n        attributes: true,\n        childList: true,\n        subtree: true,\n        characterData: true,\n      }\n\n  const observer = new MutationObserver((\n    mutationsList: MutationRecord[],\n    observer: MutationObserver\n  ) => {\n    /* istanbul ignore if */\n    if (!el._mutate) return // Just in case, should never fire\n\n    callback(mutationsList, observer)\n\n    // If has the once modifier, unbind\n    once && unbind(el, binding, knode)\n  })\n\n  observer.observe(el, options)\n  el._mutate = Object(el._mutate)\n  el._mutate![knode.context!._uid] = { observer }\n}\n\nfunction unbind (el: HTMLElement, binding: MutateKNodeDirective, knode: KNode) {\n  if (!el._mutate?.[knode.context!._uid]) return\n\n  el._mutate[knode.context!._uid]!.observer.disconnect()\n  delete el._mutate[knode.context!._uid]\n}\n\nexport const Mutate = {\n  inserted,\n  unbind,\n}\n\nexport default Mutate\n"],"sourceRoot":"","file":"index.js"}

package/lib/directives/resize/index.js

@@ -0,0 +1,35 @@
+function inserted(el, binding, knode) {
+  const callback = binding.value;
+  const options = binding.options || {
+    passive: true
+  };
+  window.addEventListener('resize', callback, options);
+  el._onResize = Object(el._onResize);
+  el._onResize[knode.context._uid] = {
+    callback,
+    options
+  };
+
+  if (!binding.modifiers || !binding.modifiers.quiet) {
+    callback();
+  }
+}
+
+function unbind(el, binding, knode) {
+  var _el$_onResize;
+
+  if (!((_el$_onResize = el._onResize) != null && _el$_onResize[knode.context._uid])) return;
+  const {
+    callback,
+    options
+  } = el._onResize[knode.context._uid];
+  window.removeEventListener('resize', callback, options);
+  delete el._onResize[knode.context._uid];
+}
+
+export const Resize = {
+  inserted,
+  unbind
+};
+export default Resize;
+//# sourceMappingURL=index.js.map