vuikit/lib/tabs.js

A responsive Vue UI library for web site interfaces based on UIkit

/**
 * Vuikit 0.8.10
 * (c) 2018 Miljan Aleksic
 * @license MIT
**/

/* Substantial part of the code is adapted from UIkit,
  Copyright (c) 2013-2018 YOOtheme GmbH, getuikit.com */

import { mergeData } from './util/vue';
import { ElementIcon } from './icon';
import IconMore from './icons/more';
import IconTriangeDown from './icons/triangle-down';
import { get } from './util/misc';
import { warn } from './util/debug';
import { assign } from './util/lang';
import EventsMixin from './mixins/events';
import { Transition } from './core/transition';

var TAB_ID = '__vkTabs_id';

var constants = /*#__PURE__*/Object.freeze({
TAB_ID: TAB_ID
});

var ElementTabs = {
  functional: true,
  props: {
    align: {
      type: String,
      default: 'left',
      validator: function (val) { return !val || /^(left|right|center|justify)$/.test(val); }
    },
    flipped: {
      type: Boolean,
      default: false
    }
  },
  render: function (h, ref) {
    var obj;
    var children = ref.children;
    var props = ref.props;
    var data = ref.data;
    var align = props.align;
    var flipped = props.flipped;
    return h('ul', mergeData(data, {
      class: ['uk-tab', ( obj = {
        'uk-tab-bottom': flipped,
        'uk-child-width-expand': align === 'justify'
      }, obj[("uk-flex-" + align)] = /^(right|center)$/.test(align), obj)]
    }), children)
  }
}

var ElementTabsVertical = {
  functional: true,
  props: {
    align: {
      type: String,
      default: 'left',
      validator: function (val) { return !val || /^(left|right)$/.test(val); }
    }
  },
  render: function (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    var align = props.align;
    return h('ul', mergeData(data, {
      class: ['uk-tab', ("uk-tab-" + align)]
    }), children)
  }
}

var ElementTabsItem = {
  functional: true,
  props: {
    icon: {},
    title: {
      type: String,
      required: true
    },
    active: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var listeners = ref.listeners;
    var children = ref.children;
    var active = props.active;
    var disabled = props.disabled;
    var title = props.title;
    var icon = props.icon;
    delete data.on;
    return h('li', mergeData(data, {
      class: {
        'uk-active': active && !disabled,
        'uk-disabled': disabled
      }
    }), [
      h('a', { on: listeners }, [
        title,
        icon && h(ElementIcon, {
          class: 'uk-margin-small-left'
        }, [ icon ])
      ]),
      children
    ])
  }
}

var tabs_ItemDropdown = {
  functional: true,
  props: {
    title: {
      type: String
    },
    active: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var listeners = ref.listeners;
    var children = ref.children;
    var title = props.title;
    var active = props.active;
    var disabled = props.disabled;
    delete data.on;
    return h('li', mergeData(data, {
      class: {
        'uk-active': active && !disabled,
        'uk-disabled': disabled
      }
    }), [
      h('a', [
        title || h(ElementIcon, [ h(IconMore) ]),
        title && h(ElementIcon, {
          class: 'uk-margin-small-left'
        }, [
          h(IconTriangeDown)
        ])
      ]),
      children
    ])
  }
}

var isNotProd = process.env.NODE_ENV !== 'production';
var core = {
  props: {
    activeTab: {},
    animation: {
      type: String,
      default: ''
    },
    keepAlive: {
      type: Boolean,
      default: false
    }
  },
  data: function (vm) { return ({
    state: {
      activeTab: vm.activeTab || filterTabs(vm).shift().data.key || 0
    }
  }); },
  watch: {
    activeTab: function activeTab (val) {
      this.state.activeTab = val;
    }
  },
  computed: {
    activeTabContent: {
      get: function get$$1 () {
        var this$1 = this;
        return filterTabs(this)
          .filter(function (node) { return this$1.isActive(node.data[TAB_ID]); })[0]
      },
      cache: false
    }
  },
  methods: {
    getTabs: function getTabs () {
      var this$1 = this;
      return filterTabs(this)
        .filter(function (node, index) {
          if (!node.componentOptions) {
            isNotProd && warn(("vk-tabs -> failed to process '" + (node.tag) + "', seems is not a stateful component"), this$1);
            return false
          }
          node.key = get(node, 'data.key', index);
          node.data[TAB_ID] = node.key;
          return true
        })
    },
    setActiveTab: function setActiveTab (id) {
      this.state.activeTab = id;
      this.$emit('update:activeTab', id);
    },
    isActive: function isActive (id) {
      return JSON.stringify(this.state.activeTab) === JSON.stringify(id)
    }
  }
}
function filterTabs (vm) {
  return vm.$slots.default.filter(function (n) { return n.tag; })
}

var tabs = {
  name: 'VkTabs',
  extends: core,
  mixins: [EventsMixin],
  props: ElementTabs.props,
  render: function render (h) {
    var this$1 = this;
    var ref = this;
    var flipped = ref.flipped;
    var animation = ref.animation;
    var keepAlive = ref.keepAlive;
    var $props = ref.$props;
    var Tabs = this.getTabs();
    Tabs = Tabs.map(function (node, index) {
      var obj;
      var Tab = {
        functional: true,
        render: node.componentOptions.Ctor.options.tabRender
      };
      return h(Tab, ( obj = {}, obj[TAB_ID] = node.data[TAB_ID], obj.props = assign({}, node.componentOptions.propsData, {
          active: this$1.isActive(node.data[TAB_ID])
        }), obj))
    });
    return h('div', {
      class: {
        'uk-flex uk-flex-column-reverse': flipped
      }
    }, [
      h(ElementTabs, { props: $props }, Tabs),
      h('div', {
        class: { 'uk-margin': flipped }
      }, [
        h(Transition, {
          props: { name: animation }
        }, [
          keepAlive
            ? h('keep-alive', [ this.activeTabContent ])
            : this.activeTabContent
        ])
      ])
    ])
  }
}

var tabsVertical = {
  name: 'VkTabsVertical',
  extends: core,
  props: ElementTabsVertical.props,
  render: function render (h) {
    var this$1 = this;
    var ref = this;
    var align = ref.align;
    var animation = ref.animation;
    var keepAlive = ref.keepAlive;
    var $props = ref.$props;
    var Tabs = this.getTabs().map(function (node, index) {
      var obj;
      var Tab = {
        functional: true,
        render: node.componentOptions.Ctor.options.tabRender
      };
      return h(Tab, ( obj = {}, obj[TAB_ID] = node.data[TAB_ID], obj.props = assign({}, node.componentOptions.propsData, {
          active: this$1.isActive(node.data[TAB_ID])
        }), obj))
    });
    return h('div', {
      class: ['uk-grid', {
        'uk-flex uk-flex-row-reverse': align === 'right'
      }]
    }, [
      h('div', { class: 'uk-width-auto' }, [
        h(ElementTabsVertical, { props: $props }, Tabs)
      ]),
      h('div', { class: 'uk-width-expand' }, [
        h(Transition, {
          props: { name: animation }
        }, [
          keepAlive
            ? h('keep-alive', [ this.activeTabContent ])
            : this.activeTabContent
        ])
      ])
    ])
  }
}

var tabs_Item = {
  name: 'VkTabsItem',
  props: assign({}, ElementTabsItem.props, {
    icon: {
      type: String
    }
  }),
  render: function render (h) {
    return h('div', this.$slots.default)
  },
  tabRender: function tabRender (h, ref) {
    var data = ref.data;
    var props = ref.props;
    var children = ref.children;
    var parent = ref.parent;
    props.icon = props.icon && h(("vk-icons-" + (props.icon)));
    return h(ElementTabsItem, mergeData(data, {
      props: props,
      on: {
        click: function (e) {
          e.preventDefault();
          parent.setActiveTab(data[TAB_ID]);
        }
      }
    }), children)
  }
}

export { constants, ElementTabs, ElementTabsVertical, ElementTabsItem, tabs_ItemDropdown as ElementTabsItemDropdown, tabs as Tabs, tabsVertical as TabsVertical, tabs_Item as TabsItem };