@fastkit/vui 0.6.16 → 0.6.20

package/dist/vui.esm-bundler.js

@@ -1,13 +1,15 @@
 import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useInjectTheme, VStackRoot, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';
-import { inject, computed, provide, defineComponent, createVNode, mergeProps, watch, isVNode, ref, Fragment, withDirectives, vShow, vModelSelect, createTextVNode } from 'vue';
-import { useScopeColorClass, colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
-import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableProps, navigationableEmits, useNavigationable, VExpandTransition } from '@fastkit/vue-utils';
+import { inject, computed, provide, defineComponent, createVNode, mergeProps, ref, watch, withDirectives, createTextVNode, isVNode, Fragment, vShow, vModelSelect } from 'vue';
+import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
+import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableProps, navigationableEmits, useNavigationable, rawNumberPropType, resolveNumberish, getRouteQuery, resizeDirectiveArgument, getQueryMergedLocation, VExpandTransition } from '@fastkit/vue-utils';
 import { VProgressCircular } from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
 export { ICON_NAMES } from '@fastkit/icon-font';
-import { useLink, useRoute } from 'vue-router';
+import { range, isPromise } from '@fastkit/helpers';
+import { useRouter, useRoute, RouterLink, useLink } from 'vue-router';
+import { VAppContainer } from '@fastkit/vue-app-layout';
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
 const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
@@ -530,6 +532,296 @@ const VButton = defineComponent({
 
 });
 
+function _isSlot$8(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const PAGINATION_ALIGNS = ['left', 'center', 'right'];
+function paginationProps() {
+  return createPropsOptions$1({
+    /**
+     * Active Pages
+     */
+    modelValue: {
+      type: rawNumberPropType,
+      default: 1
+    },
+
+    /**
+     * Total number of pages
+     */
+    length: {
+      type: rawNumberPropType,
+      default: 0
+    },
+
+    /**
+     * Maximum number of links to display.
+     */
+    totalVisible: rawNumberPropType,
+
+    /**
+     * true when narrowing
+     */
+    dense: Boolean,
+    disabled: Boolean,
+    align: {
+      type: String,
+      default: 'center'
+    },
+
+    /**
+     * To synchronize with a query, use the query name
+     */
+    routeQuery: String,
+    beforeChange: Function,
+    color: String
+  });
+}
+const VPagination = defineComponent({
+  name: 'VPagination',
+  props: paginationProps(),
+  emits: {
+    change: page => true
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const elRef = ref(null);
+    const router = useRouter();
+    const route = useRoute();
+    const internalValue = ref(1);
+    const containerWidth = ref(0);
+    const itemSize = ref(0);
+    const capacityLength = computed(() => {
+      const _itemSize = itemSize.value;
+      if (!_itemSize) return 0;
+      return Math.floor(containerWidth.value / _itemSize);
+    });
+    const colorScope = useScopeColorClass({
+      color: () => props.color || vui.setting('primaryScope')
+    });
+    const computedLength = computed(() => resolveNumberish(props.length));
+    const computedTotalVisible = computed(() => resolveNumberish(props.totalVisible));
+    const computedNumbersLength = computed(() => capacityLength.value - 2 - 2);
+    const computedPage = computed(() => {
+      const {
+        routeQuery
+      } = props;
+
+      if (routeQuery) {
+        return getRouteQuery(route.query, routeQuery, Number, 1);
+      }
+
+      return internalValue.value;
+    });
+
+    const _range = (from, to) => range(to - from, from);
+
+    const computedItems = computed(() => {
+      const maxButtons = computedNumbersLength.value;
+      const totalVisible = computedTotalVisible.value;
+      const length = computedLength.value;
+      const pageValue = computedPage.value;
+      const maxLength = Math.min(Math.max(0, totalVisible || 0) || length, Math.max(0, maxButtons) || length, length);
+
+      if (length <= maxLength) {
+        return _range(1, length);
+      }
+
+      const even = maxLength % 2 === 0 ? 1 : 0;
+      const left = Math.floor(maxLength / 2);
+      const right = length - left + 1 + even;
+
+      if (pageValue > left && pageValue < right) {
+        const start = pageValue - left + 2;
+        const end = pageValue + left - 2 - even;
+        return [1, 'truncate', ..._range(start, end), 'truncate', length];
+      } else if (pageValue === left) {
+        const end = pageValue + left - 1 - even;
+        return [..._range(1, end), 'truncate', length];
+      } else if (pageValue === right) {
+        const start = pageValue - left + 1;
+        return [1, 'truncate', ..._range(start, length)];
+      } else {
+        return [..._range(1, left), 'truncate', ..._range(right, length)];
+      }
+    });
+    const isActive = computed(() => computedLength.value > 1);
+    const isTransitioning = computed(() => {
+      const {
+        routeQuery
+      } = props;
+      if (!routeQuery) return false; // @TODO
+      // return this.$location.isQueryOnlyTransitioning(routeQuery);
+
+      return false;
+    });
+    const isDisabled = computed(() => props.disabled || isTransitioning.value);
+    const classes = computed(() => [{
+      'v-pagination--disabled': isDisabled.value,
+      'v-pagination--dense': props.dense,
+      [`v-pagination--${props.align}`]: true
+    }, colorScope.value.className]);
+
+    async function setPage(value) {
+      if (isDisabled.value) return;
+      const {
+        beforeChange,
+        routeQuery
+      } = props;
+      const newPage = resolveNumberish(value);
+      if (computedPage.value === newPage) return;
+
+      if (beforeChange) {
+        try {
+          let result = beforeChange(newPage);
+          if (isPromise(result)) result = await result;
+          if (result === false) return;
+        } catch (e) {}
+      }
+
+      if (routeQuery) {
+        const to = createRoutableLocationByPage(newPage, routeQuery);
+        return router.push(to).then(failure => {
+          !failure && ctx.emit('change', newPage);
+        });
+      } else {
+        internalValue.value = newPage;
+        ctx.emit('update:modelValue', newPage);
+        ctx.emit('change', newPage);
+      }
+    }
+
+    function createPageInfo(source) {
+      const currentPage = computedPage.value;
+      const length = computedLength.value;
+      let number;
+      let page;
+      let active;
+      let disabled;
+
+      if (typeof source === 'number') {
+        number = true;
+        page = source;
+        active = currentPage === page;
+        disabled = false;
+      } else if (source === 'truncate') {
+        number = false;
+        active = false;
+        disabled = false;
+      } else {
+        number = false;
+        const isPrev = source === 'prev';
+        const ammount = isPrev ? -1 : 1;
+        page = currentPage + ammount;
+        active = false;
+        disabled = page < 1 || page > length;
+      }
+
+      return {
+        number,
+        page,
+        active,
+        disabled
+      };
+    }
+
+    function createRoutableLocationByPage(page, routeQuery) {
+      return getQueryMergedLocation({
+        [routeQuery]: page
+      }, route);
+    }
+
+    function genItem(source, index) {
+      const {
+        number,
+        page,
+        active,
+        disabled
+      } = createPageInfo(source);
+      const type = number ? 'num' : source; // const staticClass = `pagination__item`;
+
+      const classes = ['v-pagination__item', {
+        [`v-pagination__item--${type}`]: true,
+        'v-pagination__item--active': active,
+        'v-pagination__item--disabled': disabled
+      }];
+      const children = number ? page : (() => {
+        if (type === 'truncate') {
+          return createVNode("span", null, [createTextVNode("...")]);
+        }
+
+        const isPrev = type === 'prev';
+        const name = isPrev ? 'chevron-left' : 'chevron-right';
+        return createVNode(VIcon, {
+          "class": "v-pagination__item__icon",
+          "name": name
+        }, null);
+      })();
+
+      const onClick = ev => {
+        ev.preventDefault();
+        if (page === undefined || active || disabled) return;
+        setPage(page);
+      };
+
+      const key = `${source}-${index}`;
+      const {
+        routeQuery
+      } = props;
+
+      if (page !== undefined && routeQuery) {
+        const to = createRoutableLocationByPage(page, routeQuery);
+        return createVNode(RouterLink, {
+          "class": classes,
+          "to": to,
+          "key": key
+        }, _isSlot$8(children) ? children : {
+          default: () => [children]
+        });
+      } else {
+        return createVNode("button", {
+          "class": classes,
+          "type": "button",
+          "value": page,
+          "onClick": onClick,
+          "key": key
+        }, [children]);
+      }
+    }
+
+    watch(() => props.modelValue, modelValue => {
+      internalValue.value = resolveNumberish(modelValue);
+    }, {
+      immediate: true
+    });
+    return () => {
+      if (!isActive.value) return undefined;
+      const $items = ['prev', ...computedItems.value, 'next'].map((i, index) => genItem(i, index));
+      return withDirectives(createVNode("nav", {
+        "class": ['v-pagination', classes.value],
+        "ref": elRef
+      }, [$items]), [resizeDirectiveArgument(({
+        width
+      }) => {
+        const el = elRef.value;
+
+        if (el) {
+          const style = window.getComputedStyle(el, 'before');
+          const width = style.getPropertyValue('width');
+          const margin = style.getPropertyValue('margin');
+          const size = parseFloat(width) + parseFloat(margin) * 0.5;
+          itemSize.value = size;
+        }
+
+        containerWidth.value = width;
+      })]);
+    };
+  }
+
+});
+
 function createListTileProps() {
   const icon = rawIconProp();
   return { ...navigationableProps,
@@ -541,7 +833,8 @@ function createListTileProps() {
         default: 'div'
       },
       startIconEmptySpace: Boolean,
-      color: String
+      color: String,
+      exactMatch: Boolean
     })
   };
 }
@@ -572,7 +865,7 @@ const VListTile = defineComponent({
     });
     const isActive = computed(() => {
       if (!hasTo.value) return false;
-      return link.isActive.value;
+      return props.exactMatch ? link.isExactActive.value : link.isActive.value;
     });
     const color = useScopeColorClass(props);
     const classes = computed(() => {
@@ -649,7 +942,52 @@ const VDrawerLayout = defineComponent({
 
 });
 
-function _isSlot$5(s) {
+function _isSlot$7(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const VHero = defineComponent({
+  name: 'VHero',
+  props: {
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    tag: {
+      type: String,
+      default: 'header'
+    },
+    hTag: {
+      type: String,
+      default: 'h1'
+    }
+  },
+
+  setup(props, ctx) {
+    return () => {
+      let _slot;
+
+      const TagName = props.tag;
+      const HTagName = props.hTag;
+      return createVNode(VAppContainer, {
+        "pulled": true
+      }, {
+        default: () => [createVNode(TagName, {
+          "class": ['v-hero', toScopeColorClass(props.color)]
+        }, {
+          default: () => [createVNode(HTagName, {
+            "class": "v-hero__title"
+          }, _isSlot$7(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+            default: () => [_slot]
+          })]
+        })]
+      });
+    };
+  }
+
+});
+
+function _isSlot$6(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -680,7 +1018,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$5(label) ? label : {
+  }, _isSlot$6(label) ? label : {
     default: () => [label]
   });
 }
@@ -824,7 +1162,7 @@ const VNavigationItem = defineComponent({
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$5(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$6(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && createVNode(VExpandTransition, null, {
         default: () => [withDirectives(createVNode("div", {
@@ -972,7 +1310,7 @@ const VCheckbox = defineComponent({
 
 });
 
-function _isSlot$4(s) {
+function _isSlot$5(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -984,7 +1322,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VCheckbox, attrs, _isSlot$4(slots) ? slots : {
+  }) => createVNode(VCheckbox, attrs, _isSlot$5(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1036,7 +1374,7 @@ const VRadio = defineComponent({
 
 });
 
-function _isSlot$3(s) {
+function _isSlot$4(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1047,7 +1385,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VRadio, attrs, _isSlot$3(slots) ? slots : {
+  }) => createVNode(VRadio, attrs, _isSlot$4(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1109,7 +1447,7 @@ const VSwitch = defineComponent({
 
 });
 
-function _isSlot$2(s) {
+function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1121,7 +1459,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VSwitch, attrs, _isSlot$2(slots) ? slots : {
+  }) => createVNode(VSwitch, attrs, _isSlot$3(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1664,7 +2002,7 @@ const VForm = defineComponent({
 
 });
 
-function _isSlot$1(s) {
+function _isSlot$2(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1676,7 +2014,7 @@ const VApp = defineComponent({
     return () => {
       let _slot;
 
-      return createVNode(VStackRoot, null, _isSlot$1(_slot = renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+      return createVNode(VStackRoot, null, _isSlot$2(_slot = renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       });
     };
@@ -1716,8 +2054,35 @@ const VToolbar = defineComponent({
 
 });
 
+function _isSlot$1(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
 const VToolbarMenu = defineComponent({
   name: 'VToolbarMenu',
+  inheritAttrs: false,
+  props: {},
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const plain = vui.setting('plainVariant');
+    return () => {
+      let _slot;
+
+      const variant = props.variant || plain;
+      return createVNode(VButton, mergeProps(ctx.attrs, {
+        "variant": variant,
+        "class": ['v-toolbar-menu']
+      }), _isSlot$1(_slot = renderSlotOrEmpty$1(ctx.slots)) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+
+});
+
+const VToolbarEdge = defineComponent({
+  name: 'VToolbarEdge',
   props: {
     edge: {
       type: String,
@@ -1731,8 +2096,8 @@ const VToolbarMenu = defineComponent({
       const children = renderSlotOrEmpty$1(ctx.slots, 'default');
       const hasChildren = !!children && children.length > 0;
       return createVNode("div", {
-        "class": ['v-toolbar-menu', `v-toolbar-menu--${edge.value}`, {
-          [`v-toolbar-menu--empty`]: !hasChildren
+        "class": ['v-toolbar-edge', `v-toolbar-edge--${edge.value}`, {
+          [`v-toolbar-edge--empty`]: !hasChildren
         }]
       }, [children]);
     };
@@ -1862,4 +2227,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, VApp, VButton, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VDrawerLayout, VForm, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTextField, VTextarea, VToolbar, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VButton, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VDrawerLayout, VForm, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };