@fastkit/vui 0.6.16 → 0.6.20

package/dist/tool/index.js

@@ -25,6 +25,7 @@ const TEMPLATE = `
 <% if (!it.__dev) { %>
 import '@fastkit/vue-stack/dist/vue-stack.css';
 import '@fastkit/vue-app-layout/dist/vue-app-layout.css';
+import '@fastkit/vue-loading/dist/vue-loading.css';
 import '@fastkit/vui/dist/vui.css';
 <% } %>
 import './setup.scss';

package/dist/tool/vite-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkF/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAuIrB"}
+{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAmF/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAuIrB"}

package/dist/vui.cjs.js

@@ -8,7 +8,9 @@ var vueColorScheme = require('@fastkit/vue-color-scheme');
 var vueUtils = require('@fastkit/vue-utils');
 var vueLoading = require('@fastkit/vue-loading');
 var iconFont = require('@fastkit/icon-font');
+var helpers = require('@fastkit/helpers');
 var vueRouter = require('vue-router');
+var vueAppLayout = require('@fastkit/vue-app-layout');
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
 const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
@@ -531,6 +533,296 @@ const VButton = vue.defineComponent({
 
 });
 
+function _isSlot$8(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const PAGINATION_ALIGNS = ['left', 'center', 'right'];
+function paginationProps() {
+  return vueUtils.createPropsOptions({
+    /**
+     * Active Pages
+     */
+    modelValue: {
+      type: vueUtils.rawNumberPropType,
+      default: 1
+    },
+
+    /**
+     * Total number of pages
+     */
+    length: {
+      type: vueUtils.rawNumberPropType,
+      default: 0
+    },
+
+    /**
+     * Maximum number of links to display.
+     */
+    totalVisible: vueUtils.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 = vue.defineComponent({
+  name: 'VPagination',
+  props: paginationProps(),
+  emits: {
+    change: page => true
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const elRef = vue.ref(null);
+    const router = vueRouter.useRouter();
+    const route = vueRouter.useRoute();
+    const internalValue = vue.ref(1);
+    const containerWidth = vue.ref(0);
+    const itemSize = vue.ref(0);
+    const capacityLength = vue.computed(() => {
+      const _itemSize = itemSize.value;
+      if (!_itemSize) return 0;
+      return Math.floor(containerWidth.value / _itemSize);
+    });
+    const colorScope = vueColorScheme.useScopeColorClass({
+      color: () => props.color || vui.setting('primaryScope')
+    });
+    const computedLength = vue.computed(() => vueUtils.resolveNumberish(props.length));
+    const computedTotalVisible = vue.computed(() => vueUtils.resolveNumberish(props.totalVisible));
+    const computedNumbersLength = vue.computed(() => capacityLength.value - 2 - 2);
+    const computedPage = vue.computed(() => {
+      const {
+        routeQuery
+      } = props;
+
+      if (routeQuery) {
+        return vueUtils.getRouteQuery(route.query, routeQuery, Number, 1);
+      }
+
+      return internalValue.value;
+    });
+
+    const _range = (from, to) => helpers.range(to - from, from);
+
+    const computedItems = vue.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 = vue.computed(() => computedLength.value > 1);
+    const isTransitioning = vue.computed(() => {
+      const {
+        routeQuery
+      } = props;
+      if (!routeQuery) return false; // @TODO
+      // return this.$location.isQueryOnlyTransitioning(routeQuery);
+
+      return false;
+    });
+    const isDisabled = vue.computed(() => props.disabled || isTransitioning.value);
+    const classes = vue.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 = vueUtils.resolveNumberish(value);
+      if (computedPage.value === newPage) return;
+
+      if (beforeChange) {
+        try {
+          let result = beforeChange(newPage);
+          if (helpers.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 vueUtils.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 vue.createVNode("span", null, [vue.createTextVNode("...")]);
+        }
+
+        const isPrev = type === 'prev';
+        const name = isPrev ? 'chevron-left' : 'chevron-right';
+        return vue.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 vue.createVNode(vueRouter.RouterLink, {
+          "class": classes,
+          "to": to,
+          "key": key
+        }, _isSlot$8(children) ? children : {
+          default: () => [children]
+        });
+      } else {
+        return vue.createVNode("button", {
+          "class": classes,
+          "type": "button",
+          "value": page,
+          "onClick": onClick,
+          "key": key
+        }, [children]);
+      }
+    }
+
+    vue.watch(() => props.modelValue, modelValue => {
+      internalValue.value = vueUtils.resolveNumberish(modelValue);
+    }, {
+      immediate: true
+    });
+    return () => {
+      if (!isActive.value) return undefined;
+      const $items = ['prev', ...computedItems.value, 'next'].map((i, index) => genItem(i, index));
+      return vue.withDirectives(vue.createVNode("nav", {
+        "class": ['v-pagination', classes.value],
+        "ref": elRef
+      }, [$items]), [vueUtils.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 { ...vueUtils.navigationableProps,
@@ -542,7 +834,8 @@ function createListTileProps() {
         default: 'div'
       },
       startIconEmptySpace: Boolean,
-      color: String
+      color: String,
+      exactMatch: Boolean
     })
   };
 }
@@ -573,7 +866,7 @@ const VListTile = vue.defineComponent({
     });
     const isActive = vue.computed(() => {
       if (!hasTo.value) return false;
-      return link.isActive.value;
+      return props.exactMatch ? link.isExactActive.value : link.isActive.value;
     });
     const color = vueColorScheme.useScopeColorClass(props);
     const classes = vue.computed(() => {
@@ -650,7 +943,52 @@ const VDrawerLayout = vue.defineComponent({
 
 });
 
-function _isSlot$5(s) {
+function _isSlot$7(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VHero = vue.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 vue.createVNode(vueAppLayout.VAppContainer, {
+        "pulled": true
+      }, {
+        default: () => [vue.createVNode(TagName, {
+          "class": ['v-hero', vueColorScheme.toScopeColorClass(props.color)]
+        }, {
+          default: () => [vue.createVNode(HTagName, {
+            "class": "v-hero__title"
+          }, _isSlot$7(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+            default: () => [_slot]
+          })]
+        })]
+      });
+    };
+  }
+
+});
+
+function _isSlot$6(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -681,7 +1019,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return vue.createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$5(label) ? label : {
+  }, _isSlot$6(label) ? label : {
     default: () => [label]
   });
 }
@@ -825,7 +1163,7 @@ const VNavigationItem = vue.defineComponent({
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$5(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$6(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && vue.createVNode(vueUtils.VExpandTransition, null, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
@@ -973,7 +1311,7 @@ const VCheckbox = vue.defineComponent({
 
 });
 
-function _isSlot$4(s) {
+function _isSlot$5(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -985,7 +1323,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VCheckbox, attrs, _isSlot$4(slots) ? slots : {
+  }) => vue.createVNode(VCheckbox, attrs, _isSlot$5(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1037,7 +1375,7 @@ const VRadio = vue.defineComponent({
 
 });
 
-function _isSlot$3(s) {
+function _isSlot$4(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1048,7 +1386,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VRadio, attrs, _isSlot$3(slots) ? slots : {
+  }) => vue.createVNode(VRadio, attrs, _isSlot$4(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1110,7 +1448,7 @@ const VSwitch = vue.defineComponent({
 
 });
 
-function _isSlot$2(s) {
+function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1122,7 +1460,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VSwitch, attrs, _isSlot$2(slots) ? slots : {
+  }) => vue.createVNode(VSwitch, attrs, _isSlot$3(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1665,7 +2003,7 @@ const VForm = vue.defineComponent({
 
 });
 
-function _isSlot$1(s) {
+function _isSlot$2(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1677,7 +2015,7 @@ const VApp = vue.defineComponent({
     return () => {
       let _slot;
 
-      return vue.createVNode(vueKit.VStackRoot, null, _isSlot$1(_slot = vueKit.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+      return vue.createVNode(vueKit.VStackRoot, null, _isSlot$2(_slot = vueKit.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       });
     };
@@ -1717,8 +2055,35 @@ const VToolbar = vue.defineComponent({
 
 });
 
+function _isSlot$1(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
 const VToolbarMenu = vue.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 vue.createVNode(VButton, vue.mergeProps(ctx.attrs, {
+        "variant": variant,
+        "class": ['v-toolbar-menu']
+      }), _isSlot$1(_slot = vueUtils.renderSlotOrEmpty(ctx.slots)) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+
+});
+
+const VToolbarEdge = vue.defineComponent({
+  name: 'VToolbarEdge',
   props: {
     edge: {
       type: String,
@@ -1732,8 +2097,8 @@ const VToolbarMenu = vue.defineComponent({
       const children = vueUtils.renderSlotOrEmpty(ctx.slots, 'default');
       const hasChildren = !!children && children.length > 0;
       return vue.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]);
     };
@@ -1869,6 +2234,7 @@ exports.VSnackbar = vueKit.VSnackbar;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
 exports.CONTROL_SIZES = CONTROL_SIZES;
+exports.PAGINATION_ALIGNS = PAGINATION_ALIGNS;
 exports.VApp = VApp;
 exports.VButton = VButton;
 exports.VCard = VCard;
@@ -1878,12 +2244,14 @@ exports.VCheckbox = VCheckbox;
 exports.VCheckboxGroup = VCheckboxGroup;
 exports.VDrawerLayout = VDrawerLayout;
 exports.VForm = VForm;
+exports.VHero = VHero;
 exports.VIcon = VIcon;
 exports.VListTile = VListTile;
 exports.VNavigation = VNavigation;
 exports.VNavigationItem = VNavigationItem;
 exports.VOption = VOption;
 exports.VOptionGroup = VOptionGroup;
+exports.VPagination = VPagination;
 exports.VPaper = VPaper;
 exports.VRadio = VRadio;
 exports.VRadioGroup = VRadioGroup;
@@ -1893,6 +2261,7 @@ exports.VSwitchGroup = VSwitchGroup;
 exports.VTextField = VTextField;
 exports.VTextarea = VTextarea;
 exports.VToolbar = VToolbar;
+exports.VToolbarEdge = VToolbarEdge;
 exports.VToolbarMenu = VToolbarMenu;
 exports.VToolbarTitle = VToolbarTitle;
 exports.VUI_CHECKBOX_GROUP_SYMBOL = VUI_CHECKBOX_GROUP_SYMBOL;
@@ -1924,6 +2293,7 @@ exports.defineFormSelectorComponent = defineFormSelectorComponent;
 exports.iconProps = iconProps;
 exports.installVuiPlugin = installVuiPlugin;
 exports.listTileEmits = listTileEmits;
+exports.paginationProps = paginationProps;
 exports.rawIconProp = rawIconProp;
 exports.renderNavigationItemInput = renderNavigationItemInput;
 exports.resolveNavigationItemInput = resolveNavigationItemInput;