kdutify 0.16.9-rc.0 → 2.6.0

package/es5/components/KTabs/KTabs.js

@@ -1,272 +1,316 @@
-require('../../../src/stylus/components/_tabs.styl');
+"use strict";
 
-import Themeable from '../../mixins/themeable';
-import Resize from '../../directives/resize';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-export default {
-  name: 'k-tabs',
+require("..\\..\\..\\src\\components\\KTabs\\KTabs.sass");
 
-  directives: {
-    Resize: Resize
-  },
+var _KTabsBar = _interopRequireDefault(require("./KTabsBar"));
 
-  mixins: [Themeable],
+var _KTabsItems = _interopRequireDefault(require("./KTabsItems"));
 
-  provide: function provide() {
-    var _this = this;
+var _KTabsSlider = _interopRequireDefault(require("./KTabsSlider"));
 
-    return {
-      registerContent: this.registerContent,
-      unregisterContent: this.unregisterContent,
-      registerTabItem: this.registerTabItem,
-      unregisterTabItem: this.unregisterTabItem,
-      next: this.next,
-      prev: this.prev,
-      slider: this.slider,
-      tabClick: this.tabClick,
-      isScrollable: function isScrollable() {
-        return _this.scrollable;
-      },
-      isMobile: function isMobile() {
-        return _this.isMobile;
-      }
-    };
-  },
-  data: function data() {
-    return {
-      content: [],
-      tabItems: [],
-      activeIndex: null,
-      isBooted: false,
-      isMobile: false,
-      resizeTimeout: null,
-      reverse: false,
-      target: null,
-      tabsSlider: null,
-      targetEl: null,
-      tabsContainer: null,
-      transitionTime: 300
-    };
-  },
+var _colorable = _interopRequireDefault(require("../../mixins/colorable"));
 
+var _proxyable = _interopRequireDefault(require("../../mixins/proxyable"));
 
+var _themeable = _interopRequireDefault(require("../../mixins/themeable"));
+
+var _resize = _interopRequireDefault(require("../../directives/resize"));
+
+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, _proxyable.default, _themeable.default);
+
+var _default = baseMixins.extend().extend({
+  name: 'k-tabs',
+  directives: {
+    Resize: _resize.default
+  },
   props: {
+    activeClass: {
+      type: String,
+      default: ''
+    },
+    alignWithTitle: Boolean,
+    backgroundColor: String,
+    centerActive: Boolean,
     centered: Boolean,
-    fixed: Boolean,
+    fixedTabs: Boolean,
     grow: Boolean,
-    icons: Boolean,
-    mobileBreakPoint: {
+    height: {
       type: [Number, String],
-      default: 1280
+      default: undefined
     },
-    value: String,
-    scrollable: {
-      type: Boolean,
-      default: true
-    }
+    hideSlider: Boolean,
+    iconsAndText: Boolean,
+    mobileBreakpoint: [String, Number],
+    nextIcon: {
+      type: String,
+      default: '$next'
+    },
+    optional: Boolean,
+    prevIcon: {
+      type: String,
+      default: '$prev'
+    },
+    right: Boolean,
+    showArrows: [Boolean, String],
+    sliderColor: String,
+    sliderSize: {
+      type: [Number, String],
+      default: 2
+    },
+    vertical: Boolean
+  },
+  data: function data() {
+    return {
+      resizeTimeout: 0,
+      slider: {
+        height: null,
+        left: null,
+        right: null,
+        top: null,
+        width: null
+      },
+      transitionTime: 300
+    };
   },
-
   computed: {
     classes: function classes() {
+      return _objectSpread({
+        'k-tabs--align-with-title': this.alignWithTitle,
+        'k-tabs--centered': this.centered,
+        'k-tabs--fixed-tabs': this.fixedTabs,
+        'k-tabs--grow': this.grow,
+        'k-tabs--icons-and-text': this.iconsAndText,
+        'k-tabs--right': this.right,
+        'k-tabs--vertical': this.vertical
+      }, this.themeClasses);
+    },
+    isReversed: function isReversed() {
+      return this.$kdutify.rtl && this.vertical;
+    },
+    sliderStyles: function sliderStyles() {
       return {
-        'tabs': true,
-        'tabs--centered': this.centered,
-        'tabs--fixed': this.fixed,
-        'tabs--grow': this.grow,
-        'tabs--icons': this.icons,
-        'tabs--mobile': this.isMobile,
-        'tabs--scroll-bars': this.scrollable,
-        'theme--dark': this.dark,
-        'theme--light': this.light
+        height: (0, _helpers.convertToUnit)(this.slider.height),
+        left: this.isReversed ? undefined : (0, _helpers.convertToUnit)(this.slider.left),
+        right: this.isReversed ? (0, _helpers.convertToUnit)(this.slider.right) : undefined,
+        top: this.vertical ? (0, _helpers.convertToUnit)(this.slider.top) : undefined,
+        transition: this.slider.left != null ? null : 'none',
+        width: (0, _helpers.convertToUnit)(this.slider.width)
       };
+    },
+    computedColor: function computedColor() {
+      if (this.color) return this.color;else if (this.isDark && !this.appIsDark) return 'white';else return 'primary';
     }
   },
-
   watch: {
-    value: function value() {
-      this.tabClick(this.value);
-    },
-    activeIndex: function activeIndex() {
-      var _this2 = this;
-
-      this.updateTabs();
-      this.$nextTick(function () {
-        return _this2.isBooted = true;
-      });
-    },
-    tabItems: function tabItems(newItems, oldItems) {
-      var _this3 = this;
-
-      // Tab item got removed
-      if (oldItems.length > newItems.length) {
-        if (!newItems.find(function (o) {
-          return o.id === _this3.target;
-        })) {
-          var i = oldItems.findIndex(function (o) {
-            return o.id === _this3.target;
-          });
-
-          this.$nextTick(function () {
-            _this3.activeIndex = _this3.tabItems[i > 0 ? i - 1 : 0].id;
-            _this3.target = _this3.activeIndex;
-          });
-        }
-      }
-      this.slider();
-    },
-    '$kdutify.application.left': function $kdutifyApplicationLeft() {
-      this.onContainerResize();
-    },
-    '$kdutify.application.right': function $kdutifyApplicationRight() {
-      this.onContainerResize();
-    }
+    alignWithTitle: 'callSlider',
+    centered: 'callSlider',
+    centerActive: 'callSlider',
+    fixedTabs: 'callSlider',
+    grow: 'callSlider',
+    iconsAndText: 'callSlider',
+    right: 'callSlider',
+    showArrows: 'callSlider',
+    vertical: 'callSlider',
+    '$kdutify.application.left': 'onResize',
+    '$kdutify.application.right': 'onResize',
+    '$kdutify.rtl': 'onResize'
   },
-
   mounted: function mounted() {
-    var _this4 = this;
-
-    this.$kdutify.load(function () {
-      // // This is a workaround to detect if link is active
-      // // when being used as a router or nuxt link
-      var i = _this4.tabItems.findIndex(function (_ref) {
-        var el = _ref.el;
-
-        return el.firstChild.classList.contains('tabs__item--active');
-      });
-
-      var tab = _this4.value || (_this4.tabItems[i !== -1 ? i : 0] || {}).id;
+    var _this = this;
 
-      tab && _this4.tabClick(tab) && _this4.onResize();
+    this.$nextTick(function () {
+      window.setTimeout(_this.callSlider, 30);
     });
   },
-
-
   methods: {
-    registerContent: function registerContent(id, toggle) {
-      this.content.push({ id: id, toggle: toggle });
-    },
-    registerTabItem: function registerTabItem(id, toggle, el) {
-      this.tabItems.push({ id: id, toggle: toggle, el: el });
-    },
-    unregisterContent: function unregisterContent(id) {
-      this.content = this.content.filter(function (o) {
-        return o.id !== id;
-      });
-    },
-    unregisterTabItem: function unregisterTabItem(id) {
-      this.tabItems = this.tabItems.filter(function (o) {
-        return o.id !== id;
-      });
-    },
-    next: function next(cycle) {
-      var nextIndex = this.activeIndex + 1;
+    callSlider: function callSlider() {
+      var _this2 = this;
 
-      if (!this.content[nextIndex]) {
-        if (!cycle) return;
-        nextIndex = 0;
+      if (this.hideSlider || !this.$refs.items || !this.$refs.items.selectedItems.length) {
+        this.slider.width = 0;
+        return false;
       }
 
-      this.tabClick(this.tabItems[nextIndex].id);
+      this.$nextTick(function () {
+        // Give screen time to paint
+        var activeTab = _this2.$refs.items.selectedItems[0];
+        /* istanbul ignore if */
+
+        if (!activeTab || !activeTab.$el) {
+          _this2.slider.width = 0;
+          _this2.slider.left = 0;
+          return;
+        }
+
+        var el = activeTab.$el;
+        _this2.slider = {
+          height: !_this2.vertical ? Number(_this2.sliderSize) : el.scrollHeight,
+          left: _this2.vertical ? 0 : el.offsetLeft,
+          right: _this2.vertical ? 0 : el.offsetLeft + el.offsetWidth,
+          top: el.offsetTop,
+          width: _this2.vertical ? Number(_this2.sliderSize) : el.scrollWidth
+        };
+      });
+      return true;
     },
-    prev: function prev(cycle) {
-      var prevIndex = this.activeIndex - 1;
+    genBar: function genBar(items, slider) {
+      var _this3 = this;
 
-      if (!this.content[prevIndex]) {
-        if (!cycle) return;
-        prevIndex = this.content.length - 1;
+      var data = {
+        style: {
+          height: (0, _helpers.convertToUnit)(this.height)
+        },
+        props: {
+          activeClass: this.activeClass,
+          centerActive: this.centerActive,
+          dark: this.dark,
+          light: this.light,
+          mandatory: !this.optional,
+          mobileBreakpoint: this.mobileBreakpoint,
+          nextIcon: this.nextIcon,
+          prevIcon: this.prevIcon,
+          showArrows: this.showArrows,
+          value: this.internalValue
+        },
+        on: {
+          'call:slider': this.callSlider,
+          change: function change(val) {
+            _this3.internalValue = val;
+          }
+        },
+        ref: 'items'
+      };
+      this.setTextColor(this.computedColor, data);
+      this.setBackgroundColor(this.backgroundColor, data);
+      return this.$createElement(_KTabsBar.default, data, [this.genSlider(slider), items]);
+    },
+    genItems: function genItems(items, item) {
+      var _this4 = this;
+
+      // If user provides items
+      // opt to use theirs
+      if (items) return items; // If no tabs are provided
+      // render nothing
+
+      if (!item.length) return null;
+      return this.$createElement(_KTabsItems.default, {
+        props: {
+          value: this.internalValue
+        },
+        on: {
+          change: function change(val) {
+            _this4.internalValue = val;
+          }
+        }
+      }, item);
+    },
+    genSlider: function genSlider(slider) {
+      if (this.hideSlider) return null;
+
+      if (!slider) {
+        slider = this.$createElement(_KTabsSlider.default, {
+          props: {
+            color: this.sliderColor
+          }
+        });
       }
 
-      this.tabClick(this.tabItems[prevIndex].id);
+      return this.$createElement('div', {
+        staticClass: 'k-tabs-slider-wrapper',
+        style: this.sliderStyles
+      }, [slider]);
     },
     onResize: function onResize() {
-      this.isMobile = window.innerWidth < this.mobileBreakPoint;
-      this.slider();
-    },
-
-    /**
-     * When k-navigation-drawer changes the
-     * width of the container, call resize
-     * after the transition is complete
-     *
-     * @return {Void}
-     */
-    onContainerResize: function onContainerResize() {
+      if (this._isDestroyed) return;
       clearTimeout(this.resizeTimeout);
-      this.resizeTimeout = setTimeout(this.onResize, this.transitionTime);
+      this.resizeTimeout = window.setTimeout(this.callSlider, 0);
     },
-    slider: function slider(el) {
-      var _this5 = this;
-
-      this.tabsSlider = this.tabsSlider || this.$el.querySelector('.tabs__slider');
-
-      this.tabsContainer = this.tabsContainer || this.$el.querySelector('.tabs__container');
-
-      if (!this.tabsSlider || !this.tabsContainer) return;
-
-      this.targetEl = el || this.targetEl;
-
-      if (!this.targetEl) return;
-
-      // Gives DOM time to paint when
-      // processing slider for
-      // dynamic tabs
-      this.$nextTick(function () {
-        // #684 Calculate width as %
-        var width = _this5.targetEl.scrollWidth / _this5.tabsContainer.clientWidth * 100;
-
-        _this5.tabsSlider.style.width = width + '%';
-        _this5.tabsSlider.style.left = _this5.targetEl.offsetLeft + 'px';
-      });
-    },
-    tabClick: function tabClick(target) {
-      var _this6 = this;
-
-      var setActiveIndex = function setActiveIndex(index) {
-        if (_this6.activeIndex === index) {
-          // #762 update tabs display
-          // In case tabs count got changed but activeIndex didn't
-          _this6.updateTabs();
+    parseNodes: function parseNodes() {
+      var items = null;
+      var slider = null;
+      var item = [];
+      var tab = [];
+      var slot = this.$slots.default || [];
+      var length = slot.length;
+
+      for (var i = 0; i < length; i++) {
+        var knode = slot[i];
+
+        if (knode.componentOptions) {
+          switch (knode.componentOptions.Ctor.options.name) {
+            case 'k-tabs-slider':
+              slider = knode;
+              break;
+
+            case 'k-tabs-items':
+              items = knode;
+              break;
+
+            case 'k-tab-item':
+              item.push(knode);
+              break;
+            // case 'k-tab' - intentionally omitted
+
+            default:
+              tab.push(knode);
+          }
         } else {
-          _this6.activeIndex = index;
+          tab.push(knode);
         }
-      };
-
-      this.target = target;
-
-      this.$nextTick(function () {
-        var nextIndex = _this6.content.findIndex(function (o) {
-          return o.id === target;
-        });
-        _this6.reverse = nextIndex < _this6.activeIndex;
-        setActiveIndex(nextIndex);
-
-        _this6.$emit('input', _this6.target);
-      });
-    },
-    updateTabs: function updateTabs() {
-      var _this7 = this;
-
-      this.content.forEach(function (_ref2) {
-        var toggle = _ref2.toggle;
-
-        toggle(_this7.target, _this7.reverse, _this7.isBooted);
-      });
+      }
+      /**
+       * tab: array of `k-tab`
+       * slider: single `k-tabs-slider`
+       * items: single `k-tabs-items`
+       * item: array of `k-tab-item`
+       */
 
-      this.tabItems.forEach(function (_ref3) {
-        var toggle = _ref3.toggle;
 
-        toggle(_this7.target);
-      });
+      return {
+        tab: tab,
+        slider: slider,
+        items: items,
+        item: item
+      };
     }
   },
-
   render: function render(h) {
+    var _this$parseNodes = this.parseNodes(),
+        tab = _this$parseNodes.tab,
+        slider = _this$parseNodes.slider,
+        items = _this$parseNodes.items,
+        item = _this$parseNodes.item;
+
     return h('div', {
-      'class': this.classes,
+      staticClass: 'k-tabs',
+      class: this.classes,
       directives: [{
         name: 'resize',
+        modifiers: {
+          quiet: true
+        },
         value: this.onResize
       }]
-    }, this.$slots.default);
+    }, [this.genBar(tab, slider), this.genItems(items, item)]);
   }
-};
+});
+
+exports.default = _default;
+//# sourceMappingURL=KTabs.js.map

package/es5/components/KTabs/KTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KTabs/KTabs.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KTabs.sass'\n\n// Components\nimport KTabsBar from './KTabsBar'\nimport KTabsItems from './KTabsItems'\nimport KTabsSlider from './KTabsSlider'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Proxyable from '../../mixins/proxyable'\nimport Themeable from '../../mixins/themeable'\n\n// Directives\nimport Resize from '../../directives/resize'\n\n// Utilities\nimport { convertToUnit } from '../../util/helpers'\nimport { ExtractKdu } from './../../util/mixins'\nimport mixins from '../../util/mixins'\n\n// Types\nimport { KNode } from 'kdu/types'\n\nconst baseMixins = mixins(\n  Colorable,\n  Proxyable,\n  Themeable\n)\n\ninterface options extends ExtractKdu<typeof baseMixins> {\n  $refs: {\n    items: InstanceType<typeof KTabsBar>\n  }\n}\n\nexport default baseMixins.extend<options>().extend({\n  name: 'k-tabs',\n\n  directives: {\n    Resize,\n  },\n\n  props: {\n    activeClass: {\n      type: String,\n      default: '',\n    },\n    alignWithTitle: Boolean,\n    backgroundColor: String,\n    centerActive: Boolean,\n    centered: Boolean,\n    fixedTabs: Boolean,\n    grow: Boolean,\n    height: {\n      type: [Number, String],\n      default: undefined,\n    },\n    hideSlider: Boolean,\n    iconsAndText: Boolean,\n    mobileBreakpoint: [String, Number],\n    nextIcon: {\n      type: String,\n      default: '$next',\n    },\n    optional: Boolean,\n    prevIcon: {\n      type: String,\n      default: '$prev',\n    },\n    right: Boolean,\n    showArrows: [Boolean, String],\n    sliderColor: String,\n    sliderSize: {\n      type: [Number, String],\n      default: 2,\n    },\n    vertical: Boolean,\n  },\n\n  data () {\n    return {\n      resizeTimeout: 0,\n      slider: {\n        height: null as null | number,\n        left: null as null | number,\n        right: null as null | number,\n        top: null as null | number,\n        width: null as null | number,\n      },\n      transitionTime: 300,\n    }\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'k-tabs--align-with-title': this.alignWithTitle,\n        'k-tabs--centered': this.centered,\n        'k-tabs--fixed-tabs': this.fixedTabs,\n        'k-tabs--grow': this.grow,\n        'k-tabs--icons-and-text': this.iconsAndText,\n        'k-tabs--right': this.right,\n        'k-tabs--vertical': this.vertical,\n        ...this.themeClasses,\n      }\n    },\n    isReversed (): boolean {\n      return this.$kdutify.rtl && this.vertical\n    },\n    sliderStyles (): object {\n      return {\n        height: convertToUnit(this.slider.height),\n        left: this.isReversed ? undefined : convertToUnit(this.slider.left),\n        right: this.isReversed ? convertToUnit(this.slider.right) : undefined,\n        top: this.vertical ? convertToUnit(this.slider.top) : undefined,\n        transition: this.slider.left != null ? null : 'none',\n        width: convertToUnit(this.slider.width),\n      }\n    },\n    computedColor (): string {\n      if (this.color) return this.color\n      else if (this.isDark && !this.appIsDark) return 'white'\n      else return 'primary'\n    },\n  },\n\n  watch: {\n    alignWithTitle: 'callSlider',\n    centered: 'callSlider',\n    centerActive: 'callSlider',\n    fixedTabs: 'callSlider',\n    grow: 'callSlider',\n    iconsAndText: 'callSlider',\n    right: 'callSlider',\n    showArrows: 'callSlider',\n    vertical: 'callSlider',\n    '$kdutify.application.left': 'onResize',\n    '$kdutify.application.right': 'onResize',\n    '$kdutify.rtl': 'onResize',\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      window.setTimeout(this.callSlider, 30)\n    })\n  },\n\n  methods: {\n    callSlider () {\n      if (\n        this.hideSlider ||\n        !this.$refs.items ||\n        !this.$refs.items.selectedItems.length\n      ) {\n        this.slider.width = 0\n        return false\n      }\n\n      this.$nextTick(() => {\n        // Give screen time to paint\n        const activeTab = this.$refs.items.selectedItems[0]\n        /* istanbul ignore if */\n        if (!activeTab || !activeTab.$el) {\n          this.slider.width = 0\n          this.slider.left = 0\n          return\n        }\n        const el = activeTab.$el as HTMLElement\n\n        this.slider = {\n          height: !this.vertical ? Number(this.sliderSize) : el.scrollHeight,\n          left: this.vertical ? 0 : el.offsetLeft,\n          right: this.vertical ? 0 : el.offsetLeft + el.offsetWidth,\n          top: el.offsetTop,\n          width: this.vertical ? Number(this.sliderSize) : el.scrollWidth,\n        }\n      })\n\n      return true\n    },\n    genBar (items: KNode[], slider: KNode | null) {\n      const data = {\n        style: {\n          height: convertToUnit(this.height),\n        },\n        props: {\n          activeClass: this.activeClass,\n          centerActive: this.centerActive,\n          dark: this.dark,\n          light: this.light,\n          mandatory: !this.optional,\n          mobileBreakpoint: this.mobileBreakpoint,\n          nextIcon: this.nextIcon,\n          prevIcon: this.prevIcon,\n          showArrows: this.showArrows,\n          value: this.internalValue,\n        },\n        on: {\n          'call:slider': this.callSlider,\n          change: (val: any) => {\n            this.internalValue = val\n          },\n        },\n        ref: 'items',\n      }\n\n      this.setTextColor(this.computedColor, data)\n      this.setBackgroundColor(this.backgroundColor, data)\n\n      return this.$createElement(KTabsBar, data, [\n        this.genSlider(slider),\n        items,\n      ])\n    },\n    genItems (items: KNode | null, item: KNode[]) {\n      // If user provides items\n      // opt to use theirs\n      if (items) return items\n\n      // If no tabs are provided\n      // render nothing\n      if (!item.length) return null\n\n      return this.$createElement(KTabsItems, {\n        props: {\n          value: this.internalValue,\n        },\n        on: {\n          change: (val: any) => {\n            this.internalValue = val\n          },\n        },\n      }, item)\n    },\n    genSlider (slider: KNode | null) {\n      if (this.hideSlider) return null\n\n      if (!slider) {\n        slider = this.$createElement(KTabsSlider, {\n          props: { color: this.sliderColor },\n        })\n      }\n\n      return this.$createElement('div', {\n        staticClass: 'k-tabs-slider-wrapper',\n        style: this.sliderStyles,\n      }, [slider])\n    },\n    onResize () {\n      if (this._isDestroyed) return\n\n      clearTimeout(this.resizeTimeout)\n      this.resizeTimeout = window.setTimeout(this.callSlider, 0)\n    },\n    parseNodes () {\n      let items = null\n      let slider = null\n      const item = []\n      const tab = []\n      const slot = this.$slots.default || []\n      const length = slot.length\n\n      for (let i = 0; i < length; i++) {\n        const knode = slot[i]\n\n        if (knode.componentOptions) {\n          switch (knode.componentOptions.Ctor.options.name) {\n            case 'k-tabs-slider': slider = knode\n              break\n            case 'k-tabs-items': items = knode\n              break\n            case 'k-tab-item': item.push(knode)\n              break\n            // case 'k-tab' - intentionally omitted\n            default: tab.push(knode)\n          }\n        } else {\n          tab.push(knode)\n        }\n      }\n\n      /**\n       * tab: array of `k-tab`\n       * slider: single `k-tabs-slider`\n       * items: single `k-tabs-items`\n       * item: array of `k-tab-item`\n       */\n      return { tab, slider, items, item }\n    },\n  },\n\n  render (h): KNode {\n    const { tab, slider, items, item } = this.parseNodes()\n\n    return h('div', {\n      staticClass: 'k-tabs',\n      class: this.classes,\n      directives: [{\n        name: 'resize',\n        modifiers: { quiet: true },\n        value: this.onResize,\n      }],\n    }, [\n      this.genBar(tab, slider),\n      this.genItems(items, item),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"KTabs.js"}