kdutify 0.16.9-rc.0 → 2.6.0

package/es5/components/KDialog/KDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KDialog/KDialog.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KDialog.sass'\n\n// Components\nimport { KThemeProvider } from '../KThemeProvider'\n\n// Mixins\nimport Activatable from '../../mixins/activatable'\nimport Dependent from '../../mixins/dependent'\nimport Detachable from '../../mixins/detachable'\nimport Overlayable from '../../mixins/overlayable'\nimport Returnable from '../../mixins/returnable'\nimport Stackable from '../../mixins/stackable'\nimport Toggleable from '../../mixins/toggleable'\n\n// Directives\nimport ClickOutside from '../../directives/click-outside'\n\n// Helpers\nimport mixins from '../../util/mixins'\nimport { removed } from '../../util/console'\nimport {\n  convertToUnit,\n  keyCodes,\n} from '../../util/helpers'\n\n// Types\nimport { KNode, KNodeData } from 'kdu'\n\nconst baseMixins = mixins(\n  Activatable,\n  Dependent,\n  Detachable,\n  Overlayable,\n  Returnable,\n  Stackable,\n  Toggleable\n)\n\n/* @kdujs/component */\nexport default baseMixins.extend({\n  name: 'k-dialog',\n\n  directives: { ClickOutside },\n\n  props: {\n    dark: Boolean,\n    disabled: Boolean,\n    fullscreen: Boolean,\n    light: Boolean,\n    maxWidth: {\n      type: [String, Number],\n      default: 'none',\n    },\n    noClickAnimation: Boolean,\n    origin: {\n      type: String,\n      default: 'center center',\n    },\n    persistent: Boolean,\n    retainFocus: {\n      type: Boolean,\n      default: true,\n    },\n    scrollable: Boolean,\n    transition: {\n      type: [String, Boolean],\n      default: 'dialog-transition',\n    },\n    width: {\n      type: [String, Number],\n      default: 'auto',\n    },\n  },\n\n  data () {\n    return {\n      activatedBy: null as EventTarget | null,\n      animate: false,\n      animateTimeout: -1,\n      isActive: !!this.value,\n      stackMinZIndex: 200,\n      previousActiveElement: null as HTMLElement | null,\n    }\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        [(`k-dialog ${this.contentClass}`).trim()]: true,\n        'k-dialog--active': this.isActive,\n        'k-dialog--persistent': this.persistent,\n        'k-dialog--fullscreen': this.fullscreen,\n        'k-dialog--scrollable': this.scrollable,\n        'k-dialog--animated': this.animate,\n      }\n    },\n    contentClasses (): object {\n      return {\n        'k-dialog__content': true,\n        'k-dialog__content--active': this.isActive,\n      }\n    },\n    hasActivator (): boolean {\n      return Boolean(\n        !!this.$slots.activator ||\n        !!this.$scopedSlots.activator\n      )\n    },\n  },\n\n  watch: {\n    isActive (val) {\n      if (val) {\n        this.show()\n        this.hideScroll()\n      } else {\n        this.removeOverlay()\n        this.unbind()\n        this.previousActiveElement?.focus()\n      }\n    },\n    fullscreen (val) {\n      if (!this.isActive) return\n\n      if (val) {\n        this.hideScroll()\n        this.removeOverlay(false)\n      } else {\n        this.showScroll()\n        this.genOverlay()\n      }\n    },\n  },\n\n  created () {\n    /* istanbul ignore next */\n    if (this.$attrs.hasOwnProperty('full-width')) {\n      removed('full-width', this)\n    }\n  },\n\n  beforeMount () {\n    this.$nextTick(() => {\n      this.isBooted = this.isActive\n      this.isActive && this.show()\n    })\n  },\n\n  beforeDestroy () {\n    if (typeof window !== 'undefined') this.unbind()\n  },\n\n  methods: {\n    animateClick () {\n      this.animate = false\n      // Needed for when clicking very fast\n      // outside of the dialog\n      this.$nextTick(() => {\n        this.animate = true\n        window.clearTimeout(this.animateTimeout)\n        this.animateTimeout = window.setTimeout(() => (this.animate = false), 150)\n      })\n    },\n    closeConditional (e: Event) {\n      const target = e.target as HTMLElement\n      // Ignore the click if the dialog is closed or destroyed,\n      // if it was on an element inside the content,\n      // if it was dragged onto the overlay (#6969),\n      // or if this isn't the topmost dialog (#9907)\n      return !(\n        this._isDestroyed ||\n        !this.isActive ||\n        this.$refs.content.contains(target) ||\n        (this.overlay && target && !this.overlay.$el.contains(target))\n      ) && this.activeZIndex >= this.getMaxZIndex()\n    },\n    hideScroll () {\n      if (this.fullscreen) {\n        document.documentElement.classList.add('overflow-y-hidden')\n      } else {\n        Overlayable.options.methods.hideScroll.call(this)\n      }\n    },\n    show () {\n      !this.fullscreen && !this.hideOverlay && this.genOverlay()\n      // Double nextTick to wait for lazy content to be generated\n      this.$nextTick(() => {\n        this.$nextTick(() => {\n          if (!this.$refs.content.contains(document.activeElement)) {\n            this.previousActiveElement = document.activeElement as HTMLElement\n            this.$refs.content.focus()\n          }\n          this.bind()\n        })\n      })\n    },\n    bind () {\n      window.addEventListener('focusin', this.onFocusin)\n    },\n    unbind () {\n      window.removeEventListener('focusin', this.onFocusin)\n    },\n    onClickOutside (e: Event) {\n      this.$emit('click:outside', e)\n\n      if (this.persistent) {\n        this.noClickAnimation || this.animateClick()\n      } else {\n        this.isActive = false\n      }\n    },\n    onKeydown (e: KeyboardEvent) {\n      if (e.keyCode === keyCodes.esc && !this.getOpenDependents().length) {\n        if (!this.persistent) {\n          this.isActive = false\n          const activator = this.getActivator()\n          this.$nextTick(() => activator && (activator as HTMLElement).focus())\n        } else if (!this.noClickAnimation) {\n          this.animateClick()\n        }\n      }\n      this.$emit('keydown', e)\n    },\n    // On focus change, wrap focus to stay inside the dialog\n    onFocusin (e: Event) {\n      if (!e || !this.retainFocus) return\n\n      const target = e.target as HTMLElement\n\n      if (\n        !!target &&\n        // It isn't the document or the dialog body\n        ![document, this.$refs.content].includes(target) &&\n        // It isn't inside the dialog body\n        !this.$refs.content.contains(target) &&\n        // We're the topmost dialog\n        this.activeZIndex >= this.getMaxZIndex() &&\n        // It isn't inside a dependent element (like a menu)\n        !this.getOpenDependentElements().some(el => el.contains(target))\n        // So we must have focused something outside the dialog and its children\n      ) {\n        // Find and focus the first available element inside the dialog\n        const focusable = this.$refs.content.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\n        const el = [...focusable].find(el => !el.hasAttribute('disabled')) as HTMLElement | undefined\n        el && el.focus()\n      }\n    },\n    genContent () {\n      return this.showLazyContent(() => [\n        this.$createElement(KThemeProvider, {\n          props: {\n            root: true,\n            light: this.light,\n            dark: this.dark,\n          },\n        }, [\n          this.$createElement('div', {\n            class: this.contentClasses,\n            attrs: {\n              role: 'document',\n              tabindex: this.isActive ? 0 : undefined,\n              ...this.getScopeIdAttrs(),\n            },\n            on: { keydown: this.onKeydown },\n            style: { zIndex: this.activeZIndex },\n            ref: 'content',\n          }, [this.genTransition()]),\n        ]),\n      ])\n    },\n    genTransition () {\n      const content = this.genInnerContent()\n\n      if (!this.transition) return content\n\n      return this.$createElement('transition', {\n        props: {\n          name: this.transition,\n          origin: this.origin,\n          appear: true,\n        },\n      }, [content])\n    },\n    genInnerContent () {\n      const data: KNodeData = {\n        class: this.classes,\n        ref: 'dialog',\n        directives: [\n          {\n            name: 'click-outside',\n            value: {\n              handler: this.onClickOutside,\n              closeConditional: this.closeConditional,\n              include: this.getOpenDependentElements,\n            },\n          },\n          { name: 'show', value: this.isActive },\n        ],\n        style: {\n          transformOrigin: this.origin,\n        },\n      }\n\n      if (!this.fullscreen) {\n        data.style = {\n          ...data.style as object,\n          maxWidth: this.maxWidth === 'none' ? undefined : convertToUnit(this.maxWidth),\n          width: this.width === 'auto' ? undefined : convertToUnit(this.width),\n        }\n      }\n\n      return this.$createElement('div', data, this.getContentSlot())\n    },\n  },\n\n  render (h): KNode {\n    return h('div', {\n      staticClass: 'k-dialog__container',\n      class: {\n        'k-dialog__container--attached':\n          this.attach === '' ||\n          this.attach === true ||\n          this.attach === 'attach',\n      },\n      attrs: { role: 'dialog' },\n    }, [\n      this.genActivator(),\n      this.genContent(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"KDialog.js"}

package/es5/components/KDialog/index.js

@@ -1,7 +1,20 @@
-import KDialog from './KDialog';
+"use strict";
 
-KDialog.install = function install(Kdu) {
-  Kdu.component(KDialog.name, KDialog);
-};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KDialog", {
+  enumerable: true,
+  get: function get() {
+    return _KDialog.default;
+  }
+});
+exports.default = void 0;
 
-export default KDialog;
+var _KDialog = _interopRequireDefault(require("./KDialog"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _KDialog.default;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/es5/components/KDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KDialog/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;;;eAGe,gB","sourcesContent":["import KDialog from './KDialog'\n\nexport { KDialog }\nexport default KDialog\n"],"sourceRoot":"","file":"index.js"}

package/es5/components/KDivider/KDivider.js

@@ -1,29 +1,50 @@
-require('../../../src/stylus/components/_dividers.styl');
+"use strict";
 
-import Themeable from '../../mixins/themeable';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-export default {
-  name: 'k-divider',
-
-  functional: true,
+require("..\\..\\..\\src\\components\\KDivider\\KDivider.sass");
 
-  mixins: [Themeable],
+var _themeable = _interopRequireDefault(require("../../mixins/themeable"));
 
-  props: {
-    inset: Boolean
-  },
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-  render: function render(h, _ref) {
-    var props = _ref.props,
-        data = _ref.data,
-        children = _ref.children;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-    data.staticClass = ('divider ' + (data.staticClass || '')).trim();
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-    if (props.inset) data.staticClass += ' divider--inset';
-    if (props.light) data.staticClass += ' theme--light';
-    if (props.dark) data.staticClass += ' theme--dark';
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-    return h('hr', data);
+var _default = _themeable.default.extend({
+  name: 'k-divider',
+  props: {
+    inset: Boolean,
+    vertical: Boolean
+  },
+  render: function render(h) {
+    // WAI-ARIA attributes
+    var orientation;
+
+    if (!this.$attrs.role || this.$attrs.role === 'separator') {
+      orientation = this.vertical ? 'vertical' : 'horizontal';
+    }
+
+    return h('hr', {
+      class: _objectSpread({
+        'k-divider': true,
+        'k-divider--inset': this.inset,
+        'k-divider--vertical': this.vertical
+      }, this.themeClasses),
+      attrs: _objectSpread({
+        role: 'separator',
+        'aria-orientation': orientation
+      }, this.$attrs),
+      on: this.$listeners
+    });
   }
-};
+});
+
+exports.default = _default;
+//# sourceMappingURL=KDivider.js.map

package/es5/components/KDivider/KDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KDivider/KDivider.ts"],"names":[],"mappings":";;;;;;;AACA;;AAMA;;;;;;;;;;eAEe,mBAAU,MAAV,CAAiB;AAC9B,EAAA,IAAI,EAAE,WADwB;AAG9B,EAAA,KAAK,EAAE;AACL,IAAA,KAAK,EAAE,OADF;AAEL,IAAA,QAAQ,EAAE;AAFL,GAHuB;AAQ9B,EAAA,MAR8B,kBAQtB,CARsB,EAQrB;AACP;AACA,QAAI,WAAJ;;AACA,QAAI,CAAC,KAAK,MAAL,CAAY,IAAb,IAAqB,KAAK,MAAL,CAAY,IAAZ,KAAqB,WAA9C,EAA2D;AACzD,MAAA,WAAW,GAAG,KAAK,QAAL,GAAgB,UAAhB,GAA6B,YAA3C;AACD;;AACD,WAAO,CAAC,CAAC,IAAD,EAAO;AACb,MAAA,KAAK;AACH,qBAAa,IADV;AAEH,4BAAoB,KAAK,KAFtB;AAGH,+BAAuB,KAAK;AAHzB,SAIA,KAAK,YAJL,CADQ;AAOb,MAAA,KAAK;AACH,QAAA,IAAI,EAAE,WADH;AAEH,4BAAoB;AAFjB,SAGA,KAAK,MAHL,CAPQ;AAYb,MAAA,EAAE,EAAE,KAAK;AAZI,KAAP,CAAR;AAcD;AA5B6B,CAAjB,C","sourcesContent":["// Styles\nimport './KDivider.sass'\n\n// Types\nimport { KNode } from 'kdu'\n\n// Mixins\nimport Themeable from '../../mixins/themeable'\n\nexport default Themeable.extend({\n  name: 'k-divider',\n\n  props: {\n    inset: Boolean,\n    vertical: Boolean,\n  },\n\n  render (h): KNode {\n    // WAI-ARIA attributes\n    let orientation\n    if (!this.$attrs.role || this.$attrs.role === 'separator') {\n      orientation = this.vertical ? 'vertical' : 'horizontal'\n    }\n    return h('hr', {\n      class: {\n        'k-divider': true,\n        'k-divider--inset': this.inset,\n        'k-divider--vertical': this.vertical,\n        ...this.themeClasses,\n      },\n      attrs: {\n        role: 'separator',\n        'aria-orientation': orientation,\n        ...this.$attrs,\n      },\n      on: this.$listeners,\n    })\n  },\n})\n"],"sourceRoot":"","file":"KDivider.js"}

package/es5/components/KDivider/index.js

@@ -1,7 +1,20 @@
-import KDivider from './KDivider';
+"use strict";
 
-KDivider.install = function install(Kdu) {
-  Kdu.component(KDivider.name, KDivider);
-};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KDivider", {
+  enumerable: true,
+  get: function get() {
+    return _KDivider.default;
+  }
+});
+exports.default = void 0;
 
-export default KDivider;
+var _KDivider = _interopRequireDefault(require("./KDivider"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _KDivider.default;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/es5/components/KDivider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KDivider/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;;;eAGe,iB","sourcesContent":["import KDivider from './KDivider'\n\nexport { KDivider }\nexport default KDivider\n"],"sourceRoot":"","file":"index.js"}

package/es5/components/KExpansionPanel/KExpansionPanel.js

@@ -1,60 +1,93 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+"use strict";
 
-require('../../../src/stylus/components/_expansion-panel.styl');
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-import Themeable from '../../mixins/themeable';
+var _groupable = require("../../mixins/groupable");
 
-export default {
-  name: 'k-expansion-panel',
+var _registrable = require("../../mixins/registrable");
 
-  mixins: [Themeable],
+var _helpers = require("../../util/helpers");
 
-  provide: function provide() {
-    return {
-      panelClick: this.panelClick,
-      focusable: this.focusable
-    };
-  },
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var _default = (0, _mixins.default)((0, _groupable.factory)('expansionPanels', 'k-expansion-panel', 'k-expansion-panels'), (0, _registrable.provide)('expansionPanel', true)
+/* @kdujs/component */
+).extend({
+  name: 'k-expansion-panel',
   props: {
-    expand: Boolean,
-    focusable: Boolean,
-    inset: Boolean,
-    popout: Boolean
+    disabled: Boolean,
+    readonly: Boolean
+  },
+  data: function data() {
+    return {
+      content: null,
+      header: null,
+      nextIsActive: false
+    };
+  },
+  computed: {
+    classes: function classes() {
+      return _objectSpread({
+        'k-expansion-panel--active': this.isActive,
+        'k-expansion-panel--next-active': this.nextIsActive,
+        'k-expansion-panel--disabled': this.isDisabled
+      }, this.groupClasses);
+    },
+    isDisabled: function isDisabled() {
+      return this.expansionPanels.disabled || this.disabled;
+    },
+    isReadonly: function isReadonly() {
+      return this.expansionPanels.readonly || this.readonly;
+    }
   },
-
   methods: {
-    getChildren: function getChildren() {
-      return this.$children.filter(function (c) {
-        if (!c.$options) return;
-
-        return c.$options._componentTag === 'k-expansion-panel-content';
-      });
+    registerContent: function registerContent(vm) {
+      this.content = vm;
     },
-    panelClick: function panelClick(uid) {
-      if (!this.expand) {
-        return this.getChildren().forEach(function (e) {
-          return e.toggle(uid);
-        });
-      }
+    unregisterContent: function unregisterContent() {
+      this.content = null;
+    },
+    registerHeader: function registerHeader(vm) {
+      this.header = vm;
+      vm.$on('click', this.onClick);
+    },
+    unregisterHeader: function unregisterHeader() {
+      this.header = null;
+    },
+    onClick: function onClick(e) {
+      if (e.detail) this.header.$el.blur();
+      this.$emit('click', e);
+      this.isReadonly || this.isDisabled || this.toggle();
+    },
+    toggle: function toggle() {
+      var _this = this;
 
-      var panel = this.$children.find(function (e) {
-        return e._uid === uid;
+      this.$nextTick(function () {
+        return _this.$emit('change');
       });
-
-      panel && panel.toggle(uid);
     }
   },
-
   render: function render(h) {
-    return h('ul', {
-      staticClass: 'expansion-panel',
-      'class': _extends({
-        'expansion-panel--focusable': this.focusable,
-        'expansion-panel--popout': this.popout,
-        'expansion-panel--inset': this.inset
-      }, this.themeClasses)
-    }, this.$slots.default);
+    return h('div', {
+      staticClass: 'k-expansion-panel',
+      class: this.classes,
+      attrs: {
+        'aria-expanded': String(this.isActive)
+      }
+    }, (0, _helpers.getSlot)(this));
   }
-};
+});
+
+exports.default = _default;
+//# sourceMappingURL=KExpansionPanel.js.map

package/es5/components/KExpansionPanel/KExpansionPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KExpansionPanel/KExpansionPanel.ts"],"names":[],"mappings":";;;;;;;AAMA;;AACA;;AAGA;;AACA;;;;;;;;;;eAQe,qBACb,wBAA6D,iBAA7D,EAAgF,mBAAhF,EAAqG,oBAArG,CADa,EAEb,0BAAmB,gBAAnB,EAAqC,IAArC;AACA;AAHa,EAIb,MAJa,CAIN;AACP,EAAA,IAAI,EAAE,mBADC;AAGP,EAAA,KAAK,EAAE;AACL,IAAA,QAAQ,EAAE,OADL;AAEL,IAAA,QAAQ,EAAE;AAFL,GAHA;AAQP,EAAA,IARO,kBAQH;AACF,WAAO;AACL,MAAA,OAAO,EAAE,IADJ;AAEL,MAAA,MAAM,EAAE,IAFH;AAGL,MAAA,YAAY,EAAE;AAHT,KAAP;AAKD,GAdM;AAgBP,EAAA,QAAQ,EAAE;AACR,IAAA,OADQ,qBACD;AACL;AACE,qCAA6B,KAAK,QADpC;AAEE,0CAAkC,KAAK,YAFzC;AAGE,uCAA+B,KAAK;AAHtC,SAIK,KAAK,YAJV;AAMD,KARO;AASR,IAAA,UATQ,wBASE;AACR,aAAO,KAAK,eAAL,CAAqB,QAArB,IAAiC,KAAK,QAA7C;AACD,KAXO;AAYR,IAAA,UAZQ,wBAYE;AACR,aAAO,KAAK,eAAL,CAAqB,QAArB,IAAiC,KAAK,QAA7C;AACD;AAdO,GAhBH;AAiCP,EAAA,OAAO,EAAE;AACP,IAAA,eADO,2BACU,EADV,EAC4C;AACjD,WAAK,OAAL,GAAe,EAAf;AACD,KAHM;AAIP,IAAA,iBAJO,+BAIU;AACf,WAAK,OAAL,GAAe,IAAf;AACD,KANM;AAOP,IAAA,cAPO,0BAOS,EAPT,EAO0C;AAC/C,WAAK,MAAL,GAAc,EAAd;AACA,MAAA,EAAE,CAAC,GAAH,CAAO,OAAP,EAAgB,KAAK,OAArB;AACD,KAVM;AAWP,IAAA,gBAXO,8BAWS;AACd,WAAK,MAAL,GAAc,IAAd;AACD,KAbM;AAcP,IAAA,OAdO,mBAcE,CAdF,EAce;AACpB,UAAI,CAAC,CAAC,MAAN,EAAc,KAAK,MAAL,CAAa,GAAb,CAAiB,IAAjB;AAEd,WAAK,KAAL,CAAW,OAAX,EAAoB,CAApB;AAEA,WAAK,UAAL,IAAmB,KAAK,UAAxB,IAAsC,KAAK,MAAL,EAAtC;AACD,KApBM;AAqBP,IAAA,MArBO,oBAqBD;AAAA;;AACJ,WAAK,SAAL,CAAe;AAAA,eAAM,KAAI,CAAC,KAAL,CAAW,QAAX,CAAN;AAAA,OAAf;AACD;AAvBM,GAjCF;AA2DP,EAAA,MA3DO,kBA2DC,CA3DD,EA2DE;AACP,WAAO,CAAC,CAAC,KAAD,EAAQ;AACd,MAAA,WAAW,EAAE,mBADC;AAEd,MAAA,KAAK,EAAE,KAAK,OAFE;AAGd,MAAA,KAAK,EAAE;AACL,yBAAiB,MAAM,CAAC,KAAK,QAAN;AADlB;AAHO,KAAR,EAML,sBAAQ,IAAR,CANK,CAAR;AAOD;AAnEM,CAJM,C","sourcesContent":["// Components\nimport KExpansionPanels from './KExpansionPanels'\nimport KExpansionPanelHeader from './KExpansionPanelHeader'\nimport KExpansionPanelContent from './KExpansionPanelContent'\n\n// Mixins\nimport { factory as GroupableFactory } from '../../mixins/groupable'\nimport { provide as RegistrableProvide } from '../../mixins/registrable'\n\n// Utilities\nimport { getSlot } from '../../util/helpers'\nimport mixins from '../../util/mixins'\n\n// Types\nimport { KNode } from 'kdu'\n\ntype KExpansionPanelHeaderInstance = InstanceType<typeof KExpansionPanelHeader>\ntype KExpansionPanelContentInstance = InstanceType<typeof KExpansionPanelContent>\n\nexport default mixins(\n  GroupableFactory<'expansionPanels', typeof KExpansionPanels>('expansionPanels', 'k-expansion-panel', 'k-expansion-panels'),\n  RegistrableProvide('expansionPanel', true)\n  /* @kdujs/component */\n).extend({\n  name: 'k-expansion-panel',\n\n  props: {\n    disabled: Boolean,\n    readonly: Boolean,\n  },\n\n  data () {\n    return {\n      content: null as KExpansionPanelContentInstance | null,\n      header: null as KExpansionPanelHeaderInstance | null,\n      nextIsActive: false,\n    }\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'k-expansion-panel--active': this.isActive,\n        'k-expansion-panel--next-active': this.nextIsActive,\n        'k-expansion-panel--disabled': this.isDisabled,\n        ...this.groupClasses,\n      }\n    },\n    isDisabled (): boolean {\n      return this.expansionPanels.disabled || this.disabled\n    },\n    isReadonly (): boolean {\n      return this.expansionPanels.readonly || this.readonly\n    },\n  },\n\n  methods: {\n    registerContent (vm: KExpansionPanelContentInstance) {\n      this.content = vm\n    },\n    unregisterContent () {\n      this.content = null\n    },\n    registerHeader (vm: KExpansionPanelHeaderInstance) {\n      this.header = vm\n      vm.$on('click', this.onClick)\n    },\n    unregisterHeader () {\n      this.header = null\n    },\n    onClick (e: MouseEvent) {\n      if (e.detail) this.header!.$el.blur()\n\n      this.$emit('click', e)\n\n      this.isReadonly || this.isDisabled || this.toggle()\n    },\n    toggle () {\n      this.$nextTick(() => this.$emit('change'))\n    },\n  },\n\n  render (h): KNode {\n    return h('div', {\n      staticClass: 'k-expansion-panel',\n      class: this.classes,\n      attrs: {\n        'aria-expanded': String(this.isActive),\n      },\n    }, getSlot(this))\n  },\n})\n"],"sourceRoot":"","file":"KExpansionPanel.js"}

package/es5/components/KExpansionPanel/KExpansionPanelContent.js

@@ -1,114 +1,76 @@
-import { KExpandTransition } from '../transitions';
+"use strict";
 
-import Bootable from '../../mixins/bootable';
-import Toggleable from '../../mixins/toggleable';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-import KIcon from '../KIcon';
+var _transitions = require("../transitions");
 
-import Ripple from '../../directives/ripple';
-import ClickOutside from '../../directives/click-outside';
+var _bootable = _interopRequireDefault(require("../../mixins/bootable"));
 
-export default {
-  name: 'k-expansion-panel-content',
+var _colorable = _interopRequireDefault(require("../../mixins/colorable"));
 
-  mixins: [Bootable, Toggleable],
+var _registrable = require("../../mixins/registrable");
 
-  components: {
-    KIcon: KIcon
-  },
+var _helpers = require("../../util/helpers");
 
-  directives: {
-    Ripple: Ripple,
-    ClickOutside: ClickOutside
-  },
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-  inject: ['focusable', 'panelClick'],
+// Mixins
+// Utilities
+var baseMixins = (0, _mixins.default)(_bootable.default, _colorable.default, (0, _registrable.inject)('expansionPanel', 'k-expansion-panel-content', 'k-expansion-panel'));
+/* @kdujs/component */
 
+var _default = baseMixins.extend().extend({
+  name: 'k-expansion-panel-content',
   data: function data() {
     return {
-      height: 'auto'
+      isActive: false
     };
   },
-
-
-  props: {
-    hideActions: Boolean,
-    ripple: Boolean
+  computed: {
+    parentIsActive: function parentIsActive() {
+      return this.expansionPanel.isActive;
+    }
   },
-
-  methods: {
-    genBody: function genBody() {
-      return this.$createElement('div', {
-        ref: 'body',
-        class: 'expansion-panel__body',
-        directives: [{
-          name: 'show',
-          value: this.isActive
-        }]
-      }, this.showLazyContent(this.$slots.default));
-    },
-    genHeader: function genHeader() {
-      var _this = this;
-
-      return this.$createElement('div', {
-        staticClass: 'expansion-panel__header',
-        directives: [{
-          name: 'ripple',
-          value: this.ripple
-        }],
-        on: {
-          click: function click() {
-            return _this.panelClick(_this._uid);
-          }
-        }
-      }, [this.$slots.header, this.genIcon()]);
-    },
-    genIcon: function genIcon(h) {
-      if (this.hideActions) return null;
-
-      var icon = this.$slots.actions || this.$createElement('k-icon', 'keyboard_arrow_down');
-
-      return this.$createElement('div', {
-        staticClass: 'header__icon'
-      }, [icon]);
-    },
-    toggle: function toggle(uid) {
-      var _this2 = this;
-
-      var isActive = this._uid === uid && !this.isActive;
-
-      if (isActive) this.isBooted = true;
-
-      // We treat bootable differently
-      // Needs time to calc height
-      this.$nextTick(function () {
-        return _this2.isActive = isActive;
-      });
+  watch: {
+    parentIsActive: {
+      immediate: true,
+      handler: function handler(val, oldVal) {
+        var _this = this;
+
+        if (val) this.isBooted = true;
+        if (oldVal == null) this.isActive = val;else this.$nextTick(function () {
+          return _this.isActive = val;
+        });
+      }
     }
   },
-
+  created: function created() {
+    this.expansionPanel.registerContent(this);
+  },
+  beforeDestroy: function beforeDestroy() {
+    this.expansionPanel.unregisterContent();
+  },
   render: function render(h) {
-    var _this3 = this;
+    var _this2 = this;
 
-    var children = [];
-
-    this.$slots.header && children.push(this.genHeader());
-    children.push(h(KExpandTransition, [this.genBody()]));
-
-    return h('li', {
-      staticClass: 'expansion-panel__container',
-      'class': {
-        'expansion-panel__container--active': this.isActive
-      },
-      attrs: {
-        tabindex: 0
-      },
-      on: {
-        keydown: function keydown(e) {
-          // Ensure element is focusable and the activeElement
-          if (_this3.focusable && _this3.$el === document.activeElement && e.keyCode === 13) _this3.panelClick(_this3._uid);
-        }
-      }
-    }, children);
+    return h(_transitions.KExpandTransition, this.showLazyContent(function () {
+      return [h('div', _this2.setBackgroundColor(_this2.color, {
+        staticClass: 'k-expansion-panel-content',
+        directives: [{
+          name: 'show',
+          value: _this2.isActive
+        }]
+      }), [h('div', {
+        class: 'k-expansion-panel-content__wrap'
+      }, (0, _helpers.getSlot)(_this2))])];
+    }));
   }
-};
+});
+
+exports.default = _default;
+//# sourceMappingURL=KExpansionPanelContent.js.map

package/es5/components/KExpansionPanel/KExpansionPanelContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KExpansionPanel/KExpansionPanelContent.ts"],"names":[],"mappings":";;;;;;;AAEA;;AAGA;;AACA;;AACA;;AAGA;;AACA;;;;AAPA;AAKA;AAOA,IAAM,UAAU,GAAG,qBACjB,iBADiB,EAEjB,kBAFiB,EAGjB,yBAAyD,gBAAzD,EAA2E,2BAA3E,EAAwG,mBAAxG,CAHiB,CAAnB;AAUA;;eACe,UAAU,CAAC,MAAX,GAA6B,MAA7B,CAAoC;AACjD,EAAA,IAAI,EAAE,2BAD2C;AAGjD,EAAA,IAAI,EAAE;AAAA,WAAO;AACX,MAAA,QAAQ,EAAE;AADC,KAAP;AAAA,GAH2C;AAOjD,EAAA,QAAQ,EAAE;AACR,IAAA,cADQ,4BACM;AACZ,aAAO,KAAK,cAAL,CAAoB,QAA3B;AACD;AAHO,GAPuC;AAajD,EAAA,KAAK,EAAE;AACL,IAAA,cAAc,EAAE;AACd,MAAA,SAAS,EAAE,IADG;AAEd,MAAA,OAFc,mBAEL,GAFK,EAEA,MAFA,EAEM;AAAA;;AAClB,YAAI,GAAJ,EAAS,KAAK,QAAL,GAAgB,IAAhB;AAET,YAAI,MAAM,IAAI,IAAd,EAAoB,KAAK,QAAL,GAAgB,GAAhB,CAApB,KACK,KAAK,SAAL,CAAe;AAAA,iBAAM,KAAI,CAAC,QAAL,GAAgB,GAAtB;AAAA,SAAf;AACN;AAPa;AADX,GAb0C;AAyBjD,EAAA,OAzBiD,qBAyB1C;AACL,SAAK,cAAL,CAAoB,eAApB,CAAoC,IAApC;AACD,GA3BgD;AA6BjD,EAAA,aA7BiD,2BA6BpC;AACX,SAAK,cAAL,CAAoB,iBAApB;AACD,GA/BgD;AAiCjD,EAAA,MAjCiD,kBAiCzC,CAjCyC,EAiCxC;AAAA;;AACP,WAAO,CAAC,CAAC,8BAAD,EAAoB,KAAK,eAAL,CAAqB;AAAA,aAAM,CACrD,CAAC,CAAC,KAAD,EAAQ,MAAI,CAAC,kBAAL,CAAwB,MAAI,CAAC,KAA7B,EAAoC;AAC3C,QAAA,WAAW,EAAE,2BAD8B;AAE3C,QAAA,UAAU,EAAE,CAAC;AACX,UAAA,IAAI,EAAE,MADK;AAEX,UAAA,KAAK,EAAE,MAAI,CAAC;AAFD,SAAD;AAF+B,OAApC,CAAR,EAMG,CACF,CAAC,CAAC,KAAD,EAAQ;AAAE,QAAA,KAAK,EAAE;AAAT,OAAR,EAAsD,sBAAQ,MAAR,CAAtD,CADC,CANH,CADoD,CAAN;AAAA,KAArB,CAApB,CAAR;AAWD;AA7CgD,CAApC,C","sourcesContent":["// Components\nimport KExpansionPanel from './KExpansionPanel'\nimport { KExpandTransition } from '../transitions'\n\n// Mixins\nimport Bootable from '../../mixins/bootable'\nimport Colorable from '../../mixins/colorable'\nimport { inject as RegistrableInject } from '../../mixins/registrable'\n\n// Utilities\nimport { getSlot } from '../../util/helpers'\nimport mixins, { ExtractKdu } from '../../util/mixins'\n\n// Types\nimport Kdu, { KNode, KduConstructor } from 'kdu'\n\nconst baseMixins = mixins(\n  Bootable,\n  Colorable,\n  RegistrableInject<'expansionPanel', KduConstructor<Kdu>>('expansionPanel', 'k-expansion-panel-content', 'k-expansion-panel')\n)\n\ninterface options extends ExtractKdu<typeof baseMixins> {\n  expansionPanel: InstanceType<typeof KExpansionPanel>\n}\n\n/* @kdujs/component */\nexport default baseMixins.extend<options>().extend({\n  name: 'k-expansion-panel-content',\n\n  data: () => ({\n    isActive: false,\n  }),\n\n  computed: {\n    parentIsActive (): boolean {\n      return this.expansionPanel.isActive\n    },\n  },\n\n  watch: {\n    parentIsActive: {\n      immediate: true,\n      handler (val, oldVal) {\n        if (val) this.isBooted = true\n\n        if (oldVal == null) this.isActive = val\n        else this.$nextTick(() => this.isActive = val)\n      },\n    },\n  },\n\n  created () {\n    this.expansionPanel.registerContent(this)\n  },\n\n  beforeDestroy () {\n    this.expansionPanel.unregisterContent()\n  },\n\n  render (h): KNode {\n    return h(KExpandTransition, this.showLazyContent(() => [\n      h('div', this.setBackgroundColor(this.color, {\n        staticClass: 'k-expansion-panel-content',\n        directives: [{\n          name: 'show',\n          value: this.isActive,\n        }],\n      }), [\n        h('div', { class: 'k-expansion-panel-content__wrap' }, getSlot(this)),\n      ]),\n    ]))\n  },\n})\n"],"sourceRoot":"","file":"KExpansionPanelContent.js"}

package/es5/components/KExpansionPanel/KExpansionPanelHeader.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _transitions = require("../transitions");
+
+var _KIcon = _interopRequireDefault(require("../KIcon"));
+
+var _colorable = _interopRequireDefault(require("../../mixins/colorable"));
+
+var _registrable = require("../../mixins/registrable");
+
+var _ripple = _interopRequireDefault(require("../../directives/ripple"));
+
+var _helpers = require("../../util/helpers");
+
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var baseMixins = (0, _mixins.default)(_colorable.default, (0, _registrable.inject)('expansionPanel', 'k-expansion-panel-header', 'k-expansion-panel'));
+
+var _default = baseMixins.extend().extend({
+  name: 'k-expansion-panel-header',
+  directives: {
+    ripple: _ripple.default
+  },
+  props: {
+    disableIconRotate: Boolean,
+    expandIcon: {
+      type: String,
+      default: '$expand'
+    },
+    hideActions: Boolean,
+    ripple: {
+      type: [Boolean, Object],
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      hasMousedown: false
+    };
+  },
+  computed: {
+    classes: function classes() {
+      return {
+        'k-expansion-panel-header--active': this.isActive,
+        'k-expansion-panel-header--mousedown': this.hasMousedown
+      };
+    },
+    isActive: function isActive() {
+      return this.expansionPanel.isActive;
+    },
+    isDisabled: function isDisabled() {
+      return this.expansionPanel.isDisabled;
+    },
+    isReadonly: function isReadonly() {
+      return this.expansionPanel.isReadonly;
+    }
+  },
+  created: function created() {
+    this.expansionPanel.registerHeader(this);
+  },
+  beforeDestroy: function beforeDestroy() {
+    this.expansionPanel.unregisterHeader();
+  },
+  methods: {
+    onClick: function onClick(e) {
+      this.$emit('click', e);
+    },
+    genIcon: function genIcon() {
+      var icon = (0, _helpers.getSlot)(this, 'actions') || [this.$createElement(_KIcon.default, this.expandIcon)];
+      return this.$createElement(_transitions.KFadeTransition, [this.$createElement('div', {
+        staticClass: 'k-expansion-panel-header__icon',
+        class: {
+          'k-expansion-panel-header__icon--disable-rotate': this.disableIconRotate
+        },
+        directives: [{
+          name: 'show',
+          value: !this.isDisabled
+        }]
+      }, icon)]);
+    }
+  },
+  render: function render(h) {
+    var _this = this;
+
+    return h('button', this.setBackgroundColor(this.color, {
+      staticClass: 'k-expansion-panel-header',
+      class: this.classes,
+      attrs: {
+        tabindex: this.isDisabled ? -1 : null,
+        type: 'button',
+        'aria-expanded': this.isActive
+      },
+      directives: [{
+        name: 'ripple',
+        value: this.ripple
+      }],
+      on: _objectSpread(_objectSpread({}, this.$listeners), {}, {
+        click: this.onClick,
+        mousedown: function mousedown() {
+          return _this.hasMousedown = true;
+        },
+        mouseup: function mouseup() {
+          return _this.hasMousedown = false;
+        }
+      })
+    }), [(0, _helpers.getSlot)(this, 'default', {
+      open: this.isActive
+    }, true), this.hideActions || this.genIcon()]);
+  }
+});
+
+exports.default = _default;
+//# sourceMappingURL=KExpansionPanelHeader.js.map