vuikit/lib/pagination.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 Matrix from './util/pagination-matrix';
import VkMargin from './margin';
import { warn } from './util/debug';
import { assign, isNumber } from './util/lang';

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

var ElementPaginationPage = {
  functional: true,
  props: {
    active: {
      type: Boolean,
      default: false
    },
    title: {
      type: [String, Number],
      default: ''
    }
  },
  render: function (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var active = props.active;
    var title = props.title;
    return h('li', {
      class: {
        'uk-active': active
      }
    }, [
      active
        ? h('span', title)
        : h('a', { on: data.on }, title)
    ])
  }
}

var Icon = {
  functional: true,
  render: function (h, ctx) {
    var props = ctx.props;
    var ratio = props.ratio || 1;
    var width = props.width || 7;
    var height = props.height || 12;
    var viewBox = props.viewBox || '0 0 7 12';
    if (ratio !== 1) {
      width = width * ratio;
      height = height * ratio;
    }
    return h('svg', {
      attrs: {
        version: '1.1',
        meta: 'icon-pagination-next ratio-' + ratio,
        width: width,
        height: height,
        viewBox: viewBox
      },
      domProps: {
        innerHTML: '<path fill="none" stroke="#000" stroke-width="1.2" d="M1 1l5 5-5 5"/>'
      }
    })
  }
}

var ElementPaginationPageNext = {
  functional: true,
  props: {
    title: {
      type: String,
      default: ''
    },
    expanded: {
      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 title = props.title;
    var expanded = props.expanded;
    var disabled = props.disabled;
    delete data.on;
    return h('li', mergeData(data, {
      class: {
        'uk-disabled': disabled,
        'uk-margin-auto-left': expanded
      }
    }), [
      h('a', { on: listeners }, [
        title,
        h(ElementIcon, {
          class: ['uk-pagination-prev', {
            'uk-margin-small-left': title
          }]
        }, [ h(Icon) ])
      ])
    ])
  }
}

var Icon$1 = {
  functional: true,
  render: function (h, ctx) {
    var props = ctx.props;
    var ratio = props.ratio || 1;
    var width = props.width || 7;
    var height = props.height || 12;
    var viewBox = props.viewBox || '0 0 7 12';
    if (ratio !== 1) {
      width = width * ratio;
      height = height * ratio;
    }
    return h('svg', {
      attrs: {
        version: '1.1',
        meta: 'icon-pagination-prev ratio-' + ratio,
        width: width,
        height: height,
        viewBox: viewBox
      },
      domProps: {
        innerHTML: '<path fill="none" stroke="#000" stroke-width="1.2" d="M6 1L1 6l5 5"/>'
      }
    })
  }
}

var ElementPaginationPagePrev = {
  functional: true,
  props: {
    title: {
      type: String,
      default: ''
    },
    expanded: {
      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 title = props.title;
    var expanded = props.expanded;
    var disabled = props.disabled;
    delete data.on;
    return h('li', mergeData(data, {
      class: {
        'uk-disabled': disabled,
        'uk-margin-auto-right': expanded
      }
    }), [
      h('a', { on: listeners }, [
        h(ElementIcon, {
          class: ['uk-pagination-prev', {
            'uk-margin-small-right': title
          }]
        }, [ h(Icon$1) ]),
        title
      ])
    ])
  }
}

var pagination = {
  name: 'Pagination',
  directives: { VkMargin: VkMargin },
  props: assign({}, ElementPagination.props, {
    page: {
      type: Number,
      default: 1
    },
    perPage: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    range: {
      type: Number,
      default: 3
    }
  }),
  computed: {
    prevPage: function prevPage () {
      return this.page - 1
    },
    nextPage: function nextPage () {
      return this.page + 1
    },
    pages: function pages () {
      return Matrix({ total: this.total, page: this.page, perPage: this.perPage })
    },
    lastPage: function lastPage () {
      return this.pages[this.pages.length - 1]
    }
  },
  methods: {
    update: function update (page) {
      this.$emit('update:page', page);
    }
  },
  render: function render (h) {
    var this$1 = this;
    var nodes = (this.$slots.default || []).filter(function (node) { return node.tag; });
    return h(ElementPagination, {
      props: this.$props,
      directives: [{
        name: 'vk-margin'
      }]
    }, nodes.map(function (node) {
      if (!node.fnOptions) {
        process.env.NODE_ENV !== 'production' &&
          warn(("vk-pagination -> " + (node.tag) + " component is not functional"), this$1);
        return
      }
      return node.data.rerender
        ? h(node.fnOptions, mergeData(node.data, {
          rerendering: true
        }))
        : node
    }))
  }
}

var pagination_Pages = {
  functional: true,
  render: function (h, ref) {
    var data = ref.data;
    var props = ref.props;
    var parent = ref.parent;
    if (!data.rerendering) {
      return h('li', {
        rerender: true
      })
    }
    var currentPage = parent.page;
    return parent.pages.map(function (page) {
      var isPage = isNumber(page);
      return isPage
        ? h(ElementPaginationPage, {
          props: {
            title: page,
            active: currentPage === page
          },
          on: {
            click: function (e) { return parent.$emit('update:page', page); }
          }
        })
        : h('li', [ h('span', '...') ])
    })
  }
}

var pagination_PageFirst = {
  functional: true,
  props: ElementPaginationPagePrev.props,
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    var parent = ref.parent;
    var title = props.title;
    var expanded = props.expanded;
    if (!data.rerendering) {
      return h('li', mergeData(data, {
        rerender: true,
        props: props
      }))
    }
    return h(ElementPaginationPagePrev, {
      props: {
        title: title,
        expanded: expanded,
        disabled: parent.prevPage < 1
      },
      on: {
        click: function (e) { return parent.update(1); }
      }
    })
  }
}

var pagination_PagePrev = {
  functional: true,
  props: ElementPaginationPagePrev.props,
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    var parent = ref.parent;
    var title = props.title;
    var expanded = props.expanded;
    if (!data.rerendering) {
      return h('li', mergeData(data, {
        rerender: true,
        props: props
      }))
    }
    return h(ElementPaginationPagePrev, {
      props: {
        title: title,
        expanded: expanded,
        disabled: parent.prevPage < 1
      },
      on: {
        click: function (e) { return parent.update(parent.prevPage); }
      }
    })
  }
}

var pagination_PageNext = {
  functional: true,
  props: ElementPaginationPageNext.props,
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    var parent = ref.parent;
    var title = props.title;
    var expanded = props.expanded;
    if (!data.rerendering) {
      return h('li', mergeData(data, {
        rerender: true,
        props: props
      }))
    }
    return h(ElementPaginationPageNext, {
      props: {
        title: title,
        expanded: expanded,
        disabled: parent.nextPage > parent.lastPage
      },
      on: {
        click: function (e) { return parent.update(parent.nextPage); }
      }
    })
  }
}

var pagination_PageLast = {
  functional: true,
  props: ElementPaginationPageNext.props,
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    var parent = ref.parent;
    var title = props.title;
    var expanded = props.expanded;
    if (!data.rerendering) {
      return h('li', mergeData(data, {
        rerender: true,
        props: props
      }))
    }
    return h(ElementPaginationPageNext, {
      props: {
        title: title,
        expanded: expanded,
        disabled: parent.nextPage > parent.lastPage
      },
      on: {
        click: function (e) { return parent.update(parent.lastPage); }
      }
    })
  }
}

export { ElementPagination, ElementPaginationPage, ElementPaginationPageNext, ElementPaginationPagePrev, Icon as ElementPaginationIconNext, Icon$1 as ElementPaginationIconPrev, pagination as Pagination, pagination_Pages as PaginationPages, pagination_PageFirst as PaginationPageFirst, pagination_PagePrev as PaginationPagePrev, pagination_PageNext as PaginationPageNext, pagination_PageLast as PaginationPageLast };