import layui from '../core.js';
import $ from 'jquery';
import { component as component$1 } from './component.js';

/**
 * tabs
 * 标签页组件
 */


  // 创建组件
  var component = component$1({
    name: 'tabs', // 组件名

    // 默认配置
    config: {
      elem: '.layui-tabs',
      trigger: 'click', // 标签切换的触发事件
      headerMode: 'auto' // 标签头部的显示模式 auto | scroll | normal
    },

    CONST: {
      ELEM: 'layui-tabs',
      HEADER: 'layui-tabs-header',
      CLOSE: 'layui-tabs-close',
      BODY: 'layui-tabs-body',
      ITEM: 'layui-tabs-item',
      CARD: 'layui-tabs-card'
    },

    // 渲染
    render: function() {
      var that = this;
      var options = that.config;

      // 标签页元素项
      that.headerElem = ['.'+ component.CONST.HEADER + ':eq(0)', '>li'];
      that.bodyElem = ['.'+ component.CONST.BODY + ':eq(0)', '>.'+ component.CONST.ITEM];

      // 获取标签容器中的 header body 相关元素
      that.getContainer = function() {
        var elem = that.documentElem || options.elem;
        return {
          header: {
            elem: elem.find(that.headerElem[0]),
            items: elem.find(that.headerElem.join(''))
          },
          body: {
            elem: elem.find(that.bodyElem[0]),
            items: elem.find(that.bodyElem.join(''))
          }
        };
      };

      // 若 header 选项类型为数组
      if (layui.type(options.header) === 'array') {
        // if (options.header.length === 0) return;

        // 给任意元素绑定 tabs 切换功能
        if (typeof options.header[0] === 'string') {
          that.headerElem = options.header.concat();
          that.documentElem = $(document);
        } else { // 方法传值渲染
          that.elemView = $('<div class="layui-tabs"></div>');
          if (options.className) that.elemView.addClass(options.className);

          var headerElem = $('<ul class="layui-tabs-header"></ul>');
          var bodyElem = $('<div class="layui-tabs-body"></div>');

          // 生成标签项
          layui.each(options.header, function(i, item){
            var elemHeaderItem = that.renderHeaderItem(item);
            headerElem.append(elemHeaderItem);
          });
          layui.each(options.body, function(i, item){
            var elemBodyItem = that.renderBodyItem(item);
            bodyElem.append(elemBodyItem);
          });

          that.elemView.append(headerElem).append(bodyElem);
          options.elem.html(that.elemView);
        }
      } else {
        that.renderClose(); // 初始化标签关闭结构
      }

      // 若 body 选项类型为数组
      if (layui.type(options.body) === 'array') {
        if (typeof options.body[0] === 'string') {
          that.documentElem = $(document);
          that.bodyElem = options.body.concat();
        }
      }

      // 初始选中项
      var data = that.data();
      if ('index' in options && data.index != options.index) {
        that.change(that.findHeaderItem(options.index), true);
      } else if (data.index === -1) { // 初始选中项为空时，默认选中第一个
        that.change(that.findHeaderItem(0), true);
      }

      // 初始化滚动结构
      that.roll('auto');

      // 清除隐藏占位
      if (options.elem.hasClass(component.CONST.CLASS_HIDEV)) {
        options.elem.removeClass(component.CONST.CLASS_HIDEV);
      }

      // 回调
      typeof options.afterRender === 'function' && options.afterRender(data);

      // 渲染成功后的事件
      layui.event.call(
        options.elem[0],
        component.CONST.MOD_NAME,
        'afterRender('+ options.id +')',
        data
      );
    },

    // 事件
    events: function() {
      var that = this;
      var options = that.config;
      var container = that.getContainer();
      var MOD_NAME = component.CONST.MOD_NAME;
      var TRIGGER_NAMESPACE = '.lay_'+ MOD_NAME + '_trigger';
      var delegatedElement = that.documentElem ? container.header.elem : options.elem;

      // 标签头部事件
      var trigger = options.trigger + TRIGGER_NAMESPACE;
      var elemHeaderItem = that.documentElem ? that.headerElem[1] : that.headerElem.join('');
      delegatedElement.off(trigger).on(trigger, elemHeaderItem, function() {
        that.change($(this));
      });

      // 窗口 resize 事件
      if (!inner.onresize) {
        var timer;
        $(window).on('resize', function() {
          clearTimeout(timer);
          timer = setTimeout(function(){
            layui.each(component.cache.id, function(key) {
              var that = component.getInst(key);
              if(!that) return;
              that.roll('init');
            });
          }, 50);
        });
        inner.onresize = true;
      }
    }
  });

  // 内部变量集
  var inner = {};

  /**
   * 扩展组件原型方法
   */

  var Class = component.Class;

  /**
   * 增加标签
   * @param {Object} opts
   * @param {string} opts.title - 标签标题
   * @param {string} opts.content - 标签内容
   * @param {string} opts.id - 标签的 lay-id 属性值
   * @param {string} [opts.index] - 活动标签索引，默认取当前选中标签的索引
   * @param {('append'|'prepend'|'after'|'before')} [opts.mode='append'] - 标签插入方式
   * @param {boolean} [opts.active] - 是否将新增项设置为活动标签
   * @param {boolean} [opts.closable] - 标签是否可关闭。初始值取决于 options.closable
   * @param {string} [opts.headerItem] - 自定义标签头部元素
   * @param {string} [opts.bodyItem] - 自定义标签内容元素
   * @param {Function} [opts.done] - 标签添加成功后执行的回调函数
   */
  Class.prototype.add = function(opts) {
    var that = this;
    that.config;
    var container = that.getContainer();
    var newHeaderItem = that.renderHeaderItem(opts);
    var newBodyItem = that.renderBodyItem(opts);
    var data = that.data();

    // 选项默认值
    opts = $.extend({
      active: true
    }, opts);

    // 插入方式
    if (/(before|after)/.test(opts.mode)) { // 在活动标签前后插入
      var hasOwnIndex = opts.hasOwnProperty('index');
      var headerItem = hasOwnIndex ? that.findHeaderItem(opts.index) : data.thisHeaderItem;
      var bodyItem = hasOwnIndex ? that.findBodyItem(opts.index) : data.thisHeaderItem;
      headerItem[opts.mode](newHeaderItem);
      bodyItem[opts.mode](newBodyItem);
    } else { // 在标签最前后插入
      var mode = ({
        prepend: 'prepend', // 插入标签到最前
        append: 'append' // 插入标签到最后
      })[opts.mode || 'append'] || 'append';
      container.header.elem[mode](newHeaderItem);
      container.body.elem[mode](newBodyItem);
    }

    // 是否将新增项设置为活动标签
    if (opts.active) {
      that.change(newHeaderItem, true);
    } else {
      that.roll('auto');
    }

    // 回调
    typeof opts.done === 'function' && opts.done(
      $.extend(data, {
        headerItem: newHeaderItem,
        bodyItem: newBodyItem
      })
    );
  };

  /**
   * 关闭指定标签
   * @param {Object} thisHeaderItem - 当前标签头部项元素
   * @param {boolean} force - 是否强制删除
   */
  Class.prototype.close = function(thisHeaderItem, force) {
    if (!thisHeaderItem || !thisHeaderItem[0]) return;

    var that = this;
    var options = that.config;
    var layid = thisHeaderItem.attr('lay-id');
    var index = thisHeaderItem.index();

    // 标签是否不可关闭
    if (thisHeaderItem.attr('lay-closable') === 'false') {
      return;
    }

     // 当前标签相关数据
     var data = that.data();

    // 标签关闭前的事件。若非强制关闭，可则根据事件的返回结果决定是否关闭
    if (!force) {
      var closable = layui.event.call(
        thisHeaderItem[0],
        component.CONST.MOD_NAME,
        'beforeClose('+ options.id +')',
        $.extend(data, {
          index: index
        })
      );

      // 是否阻止关闭
      if (closable === false) {
        return;
      }
    }

    // 如果关闭的是当前标签，则更换当前标签索引
    if (thisHeaderItem.hasClass(component.CONST.CLASS_THIS)) {
      if (thisHeaderItem.next()[0]) {
        that.change(thisHeaderItem.next(), true);
      } else if(thisHeaderItem.prev()[0]) {
        that.change(thisHeaderItem.prev(), true);
      }
    }

    // 移除元素
    that.findBodyItem(layid || index).remove();
    thisHeaderItem.remove();

    that.roll('auto', index);

    // 获取当前标签相关数据
    var data = that.data();

    // 标签关闭后的事件
    layui.event.call(
      data.thisHeaderItem[0],
      component.CONST.MOD_NAME,
      'afterClose('+ options.id +')',
      data
    );
  };

  /**
   * 批量关闭标签
   * @see tabs.close
   */
  Class.prototype.closeMult = function(mode, index) {
    var that = this;
    var options = that.config;
    var container = that.getContainer();
    var data = that.data();
    var headers = container.header.items;
    container.body.items;
    var DISABLED_CLOSE_SELECTOR = '[lay-closable="false"]'; // 不可关闭标签选择器

    index = index === undefined ? data.index : index;

    var headerItem = that.findHeaderItem(index);
    that.findBodyItem(index);
    var itemIndex = headerItem.index();

    // 若当前选中标签也允许关闭，则尝试寻找不可关闭的标签并将其选中
    if (data.thisHeaderItem.attr('lay-closable') !== 'false') {
      if(mode === 'all' || !mode){
        var nextHeader = headers.filter(':gt('+ data.index +')'+ DISABLED_CLOSE_SELECTOR).eq(0);
        var prevHeader = $(headers.filter(':lt('+ data.index +')'+ DISABLED_CLOSE_SELECTOR).get().reverse()).eq(0);
        if (nextHeader[0]) {
          that.change(nextHeader, true);
        } else if(prevHeader[0]) {
          that.change(prevHeader, true);
        }
      } else if(index !== data.index) { // 自动切换到活动标签
        that.change(headerItem, true);
      }
    }

    // 执行批量关闭标签
    headers.each(function(i) {
      var $this = $(this);
      var layid = $this.attr('lay-id');
      var bodyItem = that.findBodyItem(layid || i);

      // 标签是否不可关闭
      if ($this.attr('lay-closable') === 'false') {
        return;
      }

      // 批量关闭方式
      var isCloseOther = mode === 'other' && i !== itemIndex; // 关闭其他标签
      var isCloseRight = mode === 'right' && i > itemIndex; // 关闭右侧标签
      var isCloseLeft = mode === 'left' && i < itemIndex; // 关闭左侧标签（不推荐）
      var isCloseAll = mode === 'all'; // 关闭所有标签

      if (isCloseOther || isCloseRight || isCloseLeft || isCloseAll) {
        $this.remove();
        bodyItem.remove();
      }
    });

    that.roll('auto');

    // 回调
    var data = that.data();

    // 标签关闭后的事件
    layui.event.call(
      data.thisHeaderItem[0],
      component.CONST.MOD_NAME,
      'afterClose('+ options.id +')',
      data
    );
  };

  /**
   * 切换标签
   * @param {Object} thisHeaderItem - 当前标签头部项元素
   * @param {boolean} [force=false] - 是否强制切换
   * @returns
   */
  Class.prototype.change = function(thisHeaderItem, force) {
    if (!thisHeaderItem || !thisHeaderItem[0]) return;

    var that = this;
    var options = that.config;
    var layid = thisHeaderItem.attr('lay-id');
    var index = thisHeaderItem.index();
    var thatA = thisHeaderItem.find('a');
    // 是否存在跳转链接
    var isLink = typeof thatA.attr('href') === 'string' && thatA.attr('target') === '_blank';
    // 是否不允许选中
    var unselect = typeof thisHeaderItem.attr('lay-unselect') === 'string';

    // 不满足切换的条件
    if (isLink || unselect) {
      return;
    }

    // 当前标签相关数据
    var data = that.data();

    // 标签关闭前的事件。若非强制关闭，可则根据事件的返回结果决定是否关闭
    if (!force) {
      var enable = layui.event.call(
        thisHeaderItem[0],
        component.CONST.MOD_NAME,
        'beforeChange('+ options.id +')',
        $.extend(data, {
          from: {
            index: data.index,
            headerItem: data.thisHeaderItem
          },
          to: {
            index: index,
            headerItem: thisHeaderItem
          }
        })
      );

      // 是否阻止切换
      if (enable === false) {
        return;
      }
    }

    // 执行标签头部切换
    thisHeaderItem.addClass(component.CONST.CLASS_THIS).siblings()
    .removeClass(component.CONST.CLASS_THIS);

    // 执行标签内容切换
    that.findBodyItem(layid || index).addClass(component.CONST.CLASS_SHOW)
    .siblings().removeClass(component.CONST.CLASS_SHOW);

    that.roll('auto', index);

    // 重新获取标签相关数据
    var data = that.data();

    // 标签切换后的事件
    layui.event.call(
      data.thisHeaderItem[0],
      component.CONST.MOD_NAME,
      'afterChange('+ options.id +')',
      data
    );
  };

  /**
   * 渲染标签头部项
   * @param {Object} opts - 标签项配置信息
   */
  Class.prototype.renderHeaderItem = function(opts) {
    var that = this;
    var options = that.config;
    var headerItem = $(opts.headerItem || options.headerItem || '<li></li>');

    headerItem.html(opts.title || 'New Tab').attr('lay-id', opts.id);
    that.appendClose(headerItem, opts); // 追加标签关闭元素
    return headerItem;
  };

  /**
   * 渲染标签内容项
   * @param {Object} opts - 标签项配置信息
   */
  Class.prototype.renderBodyItem = function(opts) {
    var that = this;
    var options = that.config;
    var bodyItem = $(opts.bodyItem || options.bodyItem || '<div class="'+ component.CONST.ITEM +'"></div>');

    bodyItem.html(opts.content || '').attr('lay-id', opts.id);
    return bodyItem;
  };

  /**
   * 给某一个标签项追加可关闭元素
   * @param {Object} headerItem - 标签项元素
   * @param {Object} opts - 标签项配置信息
   */
  Class.prototype.appendClose = function(headerItem, opts) {
    var that = this;
    var options = that.config;

    if (!options.closable) return;

    opts = opts || {};

    // 不可关闭项
    if (opts.closable == false) {
      headerItem.attr('lay-closable', 'false');
    }

    if (headerItem.attr('lay-closable') === 'false') {
      return;
    }

    // 可关闭项追加关闭按钮
    if (!headerItem.find('.'+ component.CONST.CLOSE)[0]) {
      var close = $('<i class="layui-icon layui-icon-close layui-unselect '+ component.CONST.CLOSE +'"></i>');
      close.on('click', function(){
        that.close($(this).parent());
        return false;
      });
      headerItem.append(close);
    }
  };

  // 渲染标签可关闭元素
  Class.prototype.renderClose = function() {
    var that = this;
    var options = that.config;
    var container = that.getContainer();

    container.header.items.each(function() {
      var $this = $(this);
      // 是否开启关闭
      if (options.closable) {
        that.appendClose($this);
      } else {
        $this.find('.'+ component.CONST.CLOSE).remove();
      }
    });
  };

  /**
   * 标签头滚动
   * @param {('auto'|'prev'|'next'|'init')} [mode='next'] - 滚动方式
   * @param {number} index - 标签索引。默认取当前选中标签的索引值
   * @returns
   */
  Class.prototype.roll = function(mode, index) {
    var that = this;
    var options = that.config;
    var container = that.getContainer();
    var headerElem = container.header.elem;
    var headerItems = container.header.items;
    var scrollWidth = headerElem.prop('scrollWidth'); // 实际总长度
    var outerWidth = Math.ceil(headerElem.outerWidth()); // 可视区域的长度
    var tabsLeft = headerElem.data('left') || 0;
    var scrollMode = options.headerMode === 'scroll'; // 标签头部是否始终保持滚动模式

    // 让选中标签始终保持在可视区域
    var rollToVisibleArea = function() {
      index = isNaN(index) ? that.data().index : index;

      var thisItemElem = headerItems.eq(index);
      if (!thisItemElem[0]) return;

      // 当前标签的相对水平坐标值
      var thisLeft = Math.ceil(thisItemElem.position().left);
      var padding = 1; // 让边界额外保持一定间距

      // 当选中标签溢出在可视区域「左侧」时
      var countWidth = thisLeft - (thisItemElem.prev().outerWidth() || 0);  // 始终空出上一个标签
      if (countWidth > 0) countWidth = countWidth - padding;

      // 左侧临界值
      if (tabsLeft + countWidth < 0) {
        tabsLeft = countWidth >= 0 ? countWidth : 0; // 标签的复原位移不能超出 0
        return headerElem.css('left', -tabsLeft).data('left', -tabsLeft);
      }

      // 当选中标签溢出在可视区域「右侧」时，
      var countWidth = thisLeft + thisItemElem.outerWidth()
      + (thisItemElem.next().outerWidth() || 0) + padding; // 始终空出下一个标签

      // 右侧临界值
      if (tabsLeft + countWidth - outerWidth > 0) {
        tabsLeft = countWidth - outerWidth;
        headerElem.css('left', -tabsLeft).data('left', -tabsLeft);
      }
    };

    // css 类名
    var CLASS_SCROLL = 'layui-tabs-scroll';
    var CLASS_BAR = 'layui-tabs-bar';
    var CLASS_BAR_ICON = ['layui-icon-prev', 'layui-icon-next'];

    // 滚动结构
    var rollElem = {
      elem: $('<div class="'+ CLASS_SCROLL +' layui-border-box layui-unselect"></div>'),
      bar: $([
        '<div class="'+ CLASS_BAR +'">',
          '<i class="layui-icon '+ CLASS_BAR_ICON[0] +'" lay-mode="prev"></i>',
          '<i class="layui-icon '+ CLASS_BAR_ICON[1] +'" lay-mode="next"></i>',
        '</div>'
      ].join(''))
    };

    // 不渲染头部滚动结构
    if (options.headerMode === 'normal') return;

    // 是否渲染滚动结构
    var elemScroll = headerElem.parent('.'+ CLASS_SCROLL);
    if (scrollMode || (!scrollMode && scrollWidth > outerWidth)) {
      if (!elemScroll[0]) {
        if (options.elem.hasClass(component.CONST.CARD)) {
          rollElem.elem.addClass(component.CONST.CARD);
        }
        headerElem.wrap(rollElem.elem);
        headerElem.after(rollElem.bar);

        // 点击左右箭头
        rollElem.bar.children().on('click', function(){
          var othis = $(this);
          var mode = othis.attr('lay-mode');
          if ($(this).hasClass(component.CONST.CLASS_DISABLED)) return;
          mode && that.roll(mode);
        });
      }
    } else if(!scrollMode) {
      if (elemScroll[0]) {
        elemScroll.find('.'+ CLASS_BAR).remove();
        headerElem.unwrap().css('left', 0).data('left', 0);
      } else {
        return;
      }
    }

    // 初始化滚动模式
    if (mode === 'init') return;

    // 重新获取
    scrollWidth = headerElem.prop('scrollWidth'); // 实际总长度
    outerWidth = headerElem.outerWidth(); // 可视区域的长度
    elemScroll = headerElem.parent('.'+ CLASS_SCROLL);

    // 左箭头（往右滚动）
    if (mode === 'prev') {
      // 当前的 left 减去可视宽度，用于与上一轮的页签比较
      var  prevLeft = -tabsLeft - outerWidth;
      if(prevLeft < 0) prevLeft = 0;
      headerItems.each(function(i, item){
        var li = $(item);
        var left = Math.ceil(li.position().left);

        if (left >= prevLeft) {
          headerElem.css('left', -left).data('left', -left);
          return false;
        }
      });
    } else if(mode === 'auto') { // 自动识别滚动
      rollToVisibleArea();
    } else { // 右箭头（往左滚动） 默认 next
      headerItems.each(function(i, item){
        var li = $(item);
        var left = Math.ceil(li.position().left);

        if (left + li.outerWidth() >= outerWidth - tabsLeft) {
          headerElem.css('left', -left).data('left', -left);
          return false;
        }
      });
    }

    // 同步箭头状态
    tabsLeft = headerElem.data('left') || 0;

     // 左
    elemScroll.find('.'+ CLASS_BAR_ICON[0])[
      tabsLeft < 0 ? 'removeClass' : 'addClass'
    ](component.CONST.CLASS_DISABLED);
     // 右
    elemScroll.find('.'+ CLASS_BAR_ICON[1])[
      parseFloat(tabsLeft + scrollWidth) - outerWidth > 0
        ? 'removeClass'
      : 'addClass'
    ](component.CONST.CLASS_DISABLED);
  };

  /**
   * 获取标签头部项
   * @param {number|string} index - 标签索引或 lay-id
   */
  Class.prototype.findHeaderItem = function(index) {
    var container = this.getContainer();
    var headerItems = container.header.items;

    // 根据 lay-id 匹配
    if (typeof index === 'string') {
      return headerItems.filter('[lay-id="'+ index +'"]');
    }

    return headerItems.eq(index);
  };

  /**
   * 获取标签内容项
   * @param {number|string} index - 标签索引或 lay-id
   */
  Class.prototype.findBodyItem = function(index) {
    var container = this.getContainer();
    var bodyItems = container.body.items;

    // 根据 lay-id 匹配
    if (typeof index === 'string') {
      var bodyItem = bodyItems.filter('[lay-id="'+ index +'"]');
      return bodyItem[0] ? bodyItem : function() {
        // 若未匹配到 lay-id 对应内容项，则通过对应头部项的索引匹配内容项
        var headerItems = container.header.items;
        var headerItemIndex = headerItems.filter('[lay-id="'+ index +'"]').index();
        
        return headerItemIndex !== -1 ? bodyItems.eq(headerItemIndex) : bodyItem;
      }();
    }

    return bodyItems.eq(index);
  };

  /**
   * 返回给回调的公共信息
   * @returns
   */
  Class.prototype.data = function() {
    var that = this;
    var options = that.config;
    var container = that.getContainer();
    var thisHeaderItem = container.header.items.filter('.'+ component.CONST.CLASS_THIS);
    var index = thisHeaderItem.index();
    var layid = thisHeaderItem.attr('lay-id');

    return {
      options: options, // 标签配置信息
      container: container, // 标签容器的相关元素
      thisHeaderItem: thisHeaderItem, // 当前活动标签头部项
      thisBodyItem: that.findBodyItem(layid || index), // 当前活动标签内容项
      index: index, // 当前活动标签索引
      length: container.header.items.length // 标签数量
    };
  };

  // 扩展组件接口
  $.extend(component, {
    /**
     * 添加标签
     * @param {string} id - 渲染时的实例 ID
     * @param {Object} opts - 添加标签的配置项，详见 Class.prototype.add
     */
    add: function(id, opts) {
      var that = component.getInst(id);
      if(!that) return;
      that.add(opts);
    },

    /**
     * 关闭标签
     * @param {string} id - 渲染时的实例 ID
     * @param {number} index - 标签索引
     * @param {boolean} [force=false] - 是否强制关闭
     */
    close: function(id, index, force) {
      var that = component.getInst(id);
      if (!that) return;
      // index 若不传，则表示关闭当前标签
      if (index === undefined) {
        index = that.data().index;
      }
      that.close(that.findHeaderItem(index), force);
    },

    /**
     * 关闭多个标签
     * @param {string} id - 渲染时的实例 ID
     * @param {('other'|'right'|'all')} [mode="all"] - 关闭方式
     * @param {number} index - 活动标签的索引，默认取当前选中标签的索引。一般用于标签右键事件
     */
    closeMult: function(id, mode, index) {
      var that = component.getInst(id);
      if(!that) return;
      that.closeMult(mode, index);
    },

    /**
     * 切换标签
     * @param {string} id - 渲染时的实例 ID
     * @param {number} index - 标签索引
     */
    change: function(id, index, force) {
      var that = component.getInst(id);
      if(!that) return;
      that.change(that.findHeaderItem(index), force);
    },

    /**
     * 获取标签信息
     * @param {string} id - 渲染时的实例 ID
     */
    data: function(id) {
      var that = component.getInst(id);
      return that ? that.data() : {};
    },

    /**
     * 获取标签指定头部项
     * @param {string} id - 渲染时的实例 ID
     * @param {number} index - 标签索引或 lay-id 值
     * @returns
     */
    getHeaderItem: function(id, index) {
      var that = component.getInst(id);
      if(!that) return;
      return that.findHeaderItem(index);
    },

    /**
     * 获取标签指定内容项
     * @param {string} id - 渲染时的实例 ID
     * @param {number} index - 标签索引或 lay-id 值
     * @returns
     */
    getBodyItem: function(id, index) {
      var that = component.getInst(id);
      if(!that) return;
      return that.findBodyItem(index);
    },

    /**
     * 刷新标签视图结构
     * @param {string} id - 渲染时的实例 ID
     */
    refresh: function(id) {
      var that = component.getInst(id);
      if (!that) return;
      that.roll('auto');
    }
  });

  // 初始化渲染
  $(function() {
    component.render();
  });

export { component as default, component as tabs };
//# sourceMappingURL=tabs.js.map