@fastkit/vui 0.8.17 → 0.9.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present, Ayumu Fujii (dadajam4) and Fastkit contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1 +1,4 @@
-# @fastkit/vui
+# @fastkit/vui
+
+## Documentation
+https://dadajam4.github.io/fastkit/vui/

package/dist/vui.cjs.js

@@ -528,7 +528,7 @@ const VBusyImage = vue.defineComponent({
   },
 
   setup(props, ctx) {
-    const loadStateRef = vue.ref(props.cover && isAvairableSrc(ctx.attrs.src) ? 'loading' : 'pending');
+    const loadStateRef = vue.ref(props.cover && isAvailableSrc(ctx.attrs.src) ? 'loading' : 'pending');
     const attrsRef = vue.computed(() => splitAttrs(ctx.attrs));
     const isPendingRef = vue.computed(() => loadStateRef.value === 'pending');
     const isLoadingRef = vue.computed(() => loadStateRef.value === 'loading');
@@ -598,7 +598,7 @@ const VBusyImage = vue.defineComponent({
     vue.watch(() => ctx.attrs.src, value => {
       coverImageRef.value = undefined;
 
-      if (isAvairableSrc(value)) {
+      if (isAvailableSrc(value)) {
         loadStateRef.value = 'loading';
 
         if (props.cover) {
@@ -690,7 +690,7 @@ function imageIsReady(image) {
   return image.naturalWidth + image.naturalHeight > 0 ? 'load' : 'error';
 }
 
-function isAvairableSrc(src) {
+function isAvailableSrc(src) {
   return typeof src === 'string' && src !== '';
 }
 
@@ -1143,6 +1143,8 @@ const VCardActions = vue.defineComponent({
 
 });
 
+const BUTTON_ALIGNS = ['left', 'center', 'right'];
+
 function resolveRawVButtonIcon(raw, type = 'main') {
   if (!raw) return;
   return typeof raw === 'function' ? raw : () => vue.createVNode(VIcon, {
@@ -1159,6 +1161,10 @@ const vueButtonProps = vueUtils.createPropsOptions({ ...vueUtils.htmlAttributesP
   icon: [String, Function],
   startIcon: [String, Function],
   endIcon: [String, Function],
+  align: {
+    type: String,
+    default: 'center'
+  },
   ...createControlProps()
 });
 const LOADING_SIZE_MAP = {
@@ -1206,7 +1212,7 @@ const VButton = vue.defineComponent({
       return _spacer === true ? 'left' : _spacer;
     });
     const classes = vue.computed(() => [color.colorClasses.value, // navigationable.value.classes,
-    spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, {
+    spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, `v-button--align-${props.align}`, {
       'v-button--loading': isLoading.value,
       'v-button--icon': !!icon.value,
       'v-button--rounded': props.rounded,
@@ -1617,6 +1623,7 @@ const VListTile = vue.defineComponent({
   },
 
   setup(props, ctx) {
+    const vui = useVui();
     const startIcon = vue.computed(() => {
       let icon = resolveRawIconProp(false, props.startIcon);
 
@@ -1628,7 +1635,7 @@ const VListTile = vue.defineComponent({
     });
     const endIcon = vue.computed(() => resolveRawIconProp(false, props.endIcon));
     const hasTo = vue.computed(() => !!ctx.attrs.to);
-    const link = vueRouter.useLink({
+    const link = vui.useLink({
       to: ctx.attrs.to || ''
     });
     const isActive = vue.computed(() => {
@@ -1756,7 +1763,7 @@ function _isSlot$c(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String,
+    match: [String, Array],
     depth: {
       type: Number,
       default: 0
@@ -1795,6 +1802,12 @@ function renderNavigationItemInput(input, extraProps) {
     default: () => [label]
   });
 }
+const TRIM_END_SLASH_RE = /\/$/;
+
+function trimEndSlash(sorce) {
+  return sorce ? sorce.replace(TRIM_END_SLASH_RE, '') : sorce;
+}
+
 const VNavigationItem = vue.defineComponent({
   name: 'VNavigationItem',
   inheritAttrs: false,
@@ -1819,10 +1832,15 @@ const VNavigationItem = vue.defineComponent({
       const {
         to
       } = ctx.attrs;
-      if (match) return match;
+
+      if (match) {
+        return (Array.isArray(match) ? match : [match]).map(trimEndSlash);
+      }
+
       if (!to) return;
-      if (typeof to === 'string') return to;
-      return to.path;
+      const toPath = typeof to === 'string' ? to : to.path;
+      if (!toPath) return;
+      return [trimEndSlash(toPath)];
     });
     const classes = vue.computed(() => [{
       'v-navigation-item--opened': opened.value,
@@ -1838,16 +1856,25 @@ const VNavigationItem = vue.defineComponent({
       const c = children.value;
       const m = match.value;
 
-      if (!c || !m) {
+      if (!c || !m || !m.length) {
         // matched.value = false;
         return;
       }
 
-      if (newPath.match(m)) {
+      const trimedNewPath = trimEndSlash(newPath);
+
+      if (m.some(_ => trimedNewPath.match(_))) {
         open(); // matched.value = true;
       } else {
         close(); // matched.value = false;
-      }
+      } // if (trimEndSlash(newPath).match(m)) {
+      //   open();
+      //   // matched.value = true;
+      // } else {
+      //   close();
+      //   // matched.value = false;
+      // }
+
     }, {
       immediate: true
     }); // const iconPayload = () => opened.value;
@@ -1966,9 +1993,8 @@ const VNavigationItem = vue.defineComponent({
 
 });
 
-const VNavigation = vue.defineComponent({
-  name: 'VNavigation',
-  props: {
+function createNavigationProps() {
+  return vueUtils.createPropsOptions({
     items: {
       type: Array,
       required: true
@@ -1979,7 +2005,11 @@ const VNavigation = vue.defineComponent({
       default: true
     },
     caption: [String, Function]
-  },
+  });
+}
+const VNavigation = vue.defineComponent({
+  name: 'VNavigation',
+  props: createNavigationProps(),
 
   setup(props, ctx) {
     const items = vue.computed(() => props.items);
@@ -2483,9 +2513,9 @@ function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
-const ARROW_KEY_TYPES = vueKit.useKeybord.Key(['ArrowUp', 'ArrowDown']);
-const CHOICE_KEY_TYPES = vueKit.useKeybord.Key(['Enter', ' ']);
-const KEYBORD_EVENT_TYPES = vueKit.useKeybord.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
+const ARROW_KEY_TYPES = vueKit.useKeyboard.Key(['ArrowUp', 'ArrowDown']);
+const CHOICE_KEY_TYPES = vueKit.useKeyboard.Key(['Enter', ' ']);
+const KEYBORD_EVENT_TYPES = vueKit.useKeyboard.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
 const {
   props: props$3,
   emits: emits$3
@@ -2502,7 +2532,8 @@ const VSelect = vue.defineComponent({
       placeholder: String,
       loadingMessage: {},
       failedToLoadItemsMessage: {}
-    })
+    }),
+    closeOnNavigation: Boolean
   },
   emits: emits$3,
 
@@ -2543,6 +2574,7 @@ const VSelect = vue.defineComponent({
     };
 
     const renderSelections = selectedItems => {
+      const selectionSlot = ctx.slots.selection;
       const children = [];
 
       if (inputControl.itemsLoadFailed) {
@@ -2559,7 +2591,11 @@ const VSelect = vue.defineComponent({
             children.push(vui.selectionSeparator());
           }
 
-          children.push(item.renderDefaultSlot());
+          const child = selectionSlot ? selectionSlot({
+            item,
+            index
+          }) : item.renderDefaultSlot();
+          children.push(child);
         });
       } else if (props.placeholder != null) {
         children.push(vue.createVNode("span", {
@@ -2660,14 +2696,14 @@ const VSelect = vue.defineComponent({
       }
     };
 
-    const keybordEventHandler = ev => {
+    const keyboardEventHandler = ev => {
       if (ARROW_KEY_TYPES.includes(ev.key)) return arrowKeyHandler(ev);
       if (CHOICE_KEY_TYPES.includes(ev.key)) return choiceKeyHandler(ev);
     };
 
-    vueKit.useKeybord([{
+    vueKit.useKeyboard([{
       key: KEYBORD_EVENT_TYPES,
-      handler: keybordEventHandler
+      handler: keyboardEventHandler
     }], {
       autorun: true
     });
@@ -2728,6 +2764,7 @@ const VSelect = vue.defineComponent({
       default: () => vue.createVNode(vueKit.VMenu, {
         "width": "fit",
         "maxWidth": "fit",
+        "closeOnNavigation": this.closeOnNavigation,
         "distance": 0,
         "alwaysRender": true,
         "modelValue": this.menuOpened,
@@ -4441,7 +4478,7 @@ const VBreadcrumbs = vue.defineComponent({
           text
         } = item;
         const {
-          disabled = vui.location.match(to) || !vui.location.isAvairable(to)
+          disabled = vui.location.match(to) || !vui.location.isAvailable(to)
         } = item;
         return { ...item,
           disabled,
@@ -4969,7 +5006,9 @@ const VDataTable = vue.defineComponent({
       }
 
       vui.location.pushQuery({ ...queries,
-        [props.pageQuery]: 1
+        ...(usePaigingRef.value ? {
+          [props.pageQuery]: 1
+        } : undefined)
       });
     }
 
@@ -5095,8 +5134,8 @@ const VDataTable = vue.defineComponent({
       const {
         defaultOrder,
         ascQueryValue
-      } = props;
-      const usePaiging = usePaigingRef.value;
+      } = props; // const usePaiging = usePaigingRef.value;
+
       const children = headersRef.value.map(header => {
         const {
           label,
@@ -5135,7 +5174,7 @@ const VDataTable = vue.defineComponent({
 
         const sortActive = sortBy === sortQuery;
 
-        if (sortQuery && usePaiging) {
+        if (sortQuery) {
           const isASC = sortActive ? isASCRef.value : defaultOrder === ascQueryValue;
           headerChildren.unshift(vue.createVNode(VIcon, {
             "class": "v-data-table__table__sort-icon v-data-table__table__sort-icon--empty",
@@ -5160,9 +5199,9 @@ const VDataTable = vue.defineComponent({
         return vue.createVNode("th", {
           "class": classes,
           "key": header.key,
-          "tabindex": sortQuery && usePaiging ? 0 : undefined,
+          "tabindex": sortQuery ? 0 : undefined,
           "onClick": ev => {
-            if (!sortQuery || !usePaiging) return;
+            if (!sortQuery) return;
             handleClickSortHeader(header);
           }
         }, [vue.createVNode("div", {
@@ -5542,6 +5581,7 @@ class VuiService {
       router: this.router
     });
     this.stack = stackService;
+    this.useLink = options.useLink || vueRouter.useLink;
   }
 
   configure(options) {
@@ -5747,6 +5787,7 @@ exports.VTooltip = vueKit.VTooltip;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
 exports.ARROW_KEY_TYPES = ARROW_KEY_TYPES;
 exports.AVATAR_SIZES = AVATAR_SIZES;
+exports.BUTTON_ALIGNS = BUTTON_ALIGNS;
 exports.CHIP_SIZES = CHIP_SIZES;
 exports.CHOICE_KEY_TYPES = CHOICE_KEY_TYPES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
@@ -5838,6 +5879,7 @@ exports.createControlProps = createControlProps;
 exports.createElevationProps = createElevationProps;
 exports.createListTileProps = createListTileProps;
 exports.createNavigationItemProps = createNavigationItemProps;
+exports.createNavigationProps = createNavigationProps;
 exports.createPaperBaseProps = createPaperBaseProps;
 exports.createPaperProps = createPaperProps;
 exports.createRequiredChipRenderer = createRequiredChipRenderer;

package/dist/vui.cjs.prod.js

@@ -528,7 +528,7 @@ const VBusyImage = vue.defineComponent({
   },
 
   setup(props, ctx) {
-    const loadStateRef = vue.ref(props.cover && isAvairableSrc(ctx.attrs.src) ? 'loading' : 'pending');
+    const loadStateRef = vue.ref(props.cover && isAvailableSrc(ctx.attrs.src) ? 'loading' : 'pending');
     const attrsRef = vue.computed(() => splitAttrs(ctx.attrs));
     const isPendingRef = vue.computed(() => loadStateRef.value === 'pending');
     const isLoadingRef = vue.computed(() => loadStateRef.value === 'loading');
@@ -598,7 +598,7 @@ const VBusyImage = vue.defineComponent({
     vue.watch(() => ctx.attrs.src, value => {
       coverImageRef.value = undefined;
 
-      if (isAvairableSrc(value)) {
+      if (isAvailableSrc(value)) {
         loadStateRef.value = 'loading';
 
         if (props.cover) {
@@ -690,7 +690,7 @@ function imageIsReady(image) {
   return image.naturalWidth + image.naturalHeight > 0 ? 'load' : 'error';
 }
 
-function isAvairableSrc(src) {
+function isAvailableSrc(src) {
   return typeof src === 'string' && src !== '';
 }
 
@@ -1143,6 +1143,8 @@ const VCardActions = vue.defineComponent({
 
 });
 
+const BUTTON_ALIGNS = ['left', 'center', 'right'];
+
 function resolveRawVButtonIcon(raw, type = 'main') {
   if (!raw) return;
   return typeof raw === 'function' ? raw : () => vue.createVNode(VIcon, {
@@ -1159,6 +1161,10 @@ const vueButtonProps = vueUtils.createPropsOptions({ ...vueUtils.htmlAttributesP
   icon: [String, Function],
   startIcon: [String, Function],
   endIcon: [String, Function],
+  align: {
+    type: String,
+    default: 'center'
+  },
   ...createControlProps()
 });
 const LOADING_SIZE_MAP = {
@@ -1206,7 +1212,7 @@ const VButton = vue.defineComponent({
       return _spacer === true ? 'left' : _spacer;
     });
     const classes = vue.computed(() => [color.colorClasses.value, // navigationable.value.classes,
-    spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, {
+    spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, `v-button--align-${props.align}`, {
       'v-button--loading': isLoading.value,
       'v-button--icon': !!icon.value,
       'v-button--rounded': props.rounded,
@@ -1617,6 +1623,7 @@ const VListTile = vue.defineComponent({
   },
 
   setup(props, ctx) {
+    const vui = useVui();
     const startIcon = vue.computed(() => {
       let icon = resolveRawIconProp(false, props.startIcon);
 
@@ -1628,7 +1635,7 @@ const VListTile = vue.defineComponent({
     });
     const endIcon = vue.computed(() => resolveRawIconProp(false, props.endIcon));
     const hasTo = vue.computed(() => !!ctx.attrs.to);
-    const link = vueRouter.useLink({
+    const link = vui.useLink({
       to: ctx.attrs.to || ''
     });
     const isActive = vue.computed(() => {
@@ -1756,7 +1763,7 @@ function _isSlot$c(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String,
+    match: [String, Array],
     depth: {
       type: Number,
       default: 0
@@ -1795,6 +1802,12 @@ function renderNavigationItemInput(input, extraProps) {
     default: () => [label]
   });
 }
+const TRIM_END_SLASH_RE = /\/$/;
+
+function trimEndSlash(sorce) {
+  return sorce ? sorce.replace(TRIM_END_SLASH_RE, '') : sorce;
+}
+
 const VNavigationItem = vue.defineComponent({
   name: 'VNavigationItem',
   inheritAttrs: false,
@@ -1819,10 +1832,15 @@ const VNavigationItem = vue.defineComponent({
       const {
         to
       } = ctx.attrs;
-      if (match) return match;
+
+      if (match) {
+        return (Array.isArray(match) ? match : [match]).map(trimEndSlash);
+      }
+
       if (!to) return;
-      if (typeof to === 'string') return to;
-      return to.path;
+      const toPath = typeof to === 'string' ? to : to.path;
+      if (!toPath) return;
+      return [trimEndSlash(toPath)];
     });
     const classes = vue.computed(() => [{
       'v-navigation-item--opened': opened.value,
@@ -1838,16 +1856,25 @@ const VNavigationItem = vue.defineComponent({
       const c = children.value;
       const m = match.value;
 
-      if (!c || !m) {
+      if (!c || !m || !m.length) {
         // matched.value = false;
         return;
       }
 
-      if (newPath.match(m)) {
+      const trimedNewPath = trimEndSlash(newPath);
+
+      if (m.some(_ => trimedNewPath.match(_))) {
         open(); // matched.value = true;
       } else {
         close(); // matched.value = false;
-      }
+      } // if (trimEndSlash(newPath).match(m)) {
+      //   open();
+      //   // matched.value = true;
+      // } else {
+      //   close();
+      //   // matched.value = false;
+      // }
+
     }, {
       immediate: true
     }); // const iconPayload = () => opened.value;
@@ -1966,9 +1993,8 @@ const VNavigationItem = vue.defineComponent({
 
 });
 
-const VNavigation = vue.defineComponent({
-  name: 'VNavigation',
-  props: {
+function createNavigationProps() {
+  return vueUtils.createPropsOptions({
     items: {
       type: Array,
       required: true
@@ -1979,7 +2005,11 @@ const VNavigation = vue.defineComponent({
       default: true
     },
     caption: [String, Function]
-  },
+  });
+}
+const VNavigation = vue.defineComponent({
+  name: 'VNavigation',
+  props: createNavigationProps(),
 
   setup(props, ctx) {
     const items = vue.computed(() => props.items);
@@ -2483,9 +2513,9 @@ function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
-const ARROW_KEY_TYPES = vueKit.useKeybord.Key(['ArrowUp', 'ArrowDown']);
-const CHOICE_KEY_TYPES = vueKit.useKeybord.Key(['Enter', ' ']);
-const KEYBORD_EVENT_TYPES = vueKit.useKeybord.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
+const ARROW_KEY_TYPES = vueKit.useKeyboard.Key(['ArrowUp', 'ArrowDown']);
+const CHOICE_KEY_TYPES = vueKit.useKeyboard.Key(['Enter', ' ']);
+const KEYBORD_EVENT_TYPES = vueKit.useKeyboard.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
 const {
   props: props$3,
   emits: emits$3
@@ -2502,7 +2532,8 @@ const VSelect = vue.defineComponent({
       placeholder: String,
       loadingMessage: {},
       failedToLoadItemsMessage: {}
-    })
+    }),
+    closeOnNavigation: Boolean
   },
   emits: emits$3,
 
@@ -2543,6 +2574,7 @@ const VSelect = vue.defineComponent({
     };
 
     const renderSelections = selectedItems => {
+      const selectionSlot = ctx.slots.selection;
       const children = [];
 
       if (inputControl.itemsLoadFailed) {
@@ -2559,7 +2591,11 @@ const VSelect = vue.defineComponent({
             children.push(vui.selectionSeparator());
           }
 
-          children.push(item.renderDefaultSlot());
+          const child = selectionSlot ? selectionSlot({
+            item,
+            index
+          }) : item.renderDefaultSlot();
+          children.push(child);
         });
       } else if (props.placeholder != null) {
         children.push(vue.createVNode("span", {
@@ -2660,14 +2696,14 @@ const VSelect = vue.defineComponent({
       }
     };
 
-    const keybordEventHandler = ev => {
+    const keyboardEventHandler = ev => {
       if (ARROW_KEY_TYPES.includes(ev.key)) return arrowKeyHandler(ev);
       if (CHOICE_KEY_TYPES.includes(ev.key)) return choiceKeyHandler(ev);
     };
 
-    vueKit.useKeybord([{
+    vueKit.useKeyboard([{
       key: KEYBORD_EVENT_TYPES,
-      handler: keybordEventHandler
+      handler: keyboardEventHandler
     }], {
       autorun: true
     });
@@ -2728,6 +2764,7 @@ const VSelect = vue.defineComponent({
       default: () => vue.createVNode(vueKit.VMenu, {
         "width": "fit",
         "maxWidth": "fit",
+        "closeOnNavigation": this.closeOnNavigation,
         "distance": 0,
         "alwaysRender": true,
         "modelValue": this.menuOpened,
@@ -4441,7 +4478,7 @@ const VBreadcrumbs = vue.defineComponent({
           text
         } = item;
         const {
-          disabled = vui.location.match(to) || !vui.location.isAvairable(to)
+          disabled = vui.location.match(to) || !vui.location.isAvailable(to)
         } = item;
         return { ...item,
           disabled,
@@ -4969,7 +5006,9 @@ const VDataTable = vue.defineComponent({
       }
 
       vui.location.pushQuery({ ...queries,
-        [props.pageQuery]: 1
+        ...(usePaigingRef.value ? {
+          [props.pageQuery]: 1
+        } : undefined)
       });
     }
 
@@ -5095,8 +5134,8 @@ const VDataTable = vue.defineComponent({
       const {
         defaultOrder,
         ascQueryValue
-      } = props;
-      const usePaiging = usePaigingRef.value;
+      } = props; // const usePaiging = usePaigingRef.value;
+
       const children = headersRef.value.map(header => {
         const {
           label,
@@ -5135,7 +5174,7 @@ const VDataTable = vue.defineComponent({
 
         const sortActive = sortBy === sortQuery;
 
-        if (sortQuery && usePaiging) {
+        if (sortQuery) {
           const isASC = sortActive ? isASCRef.value : defaultOrder === ascQueryValue;
           headerChildren.unshift(vue.createVNode(VIcon, {
             "class": "v-data-table__table__sort-icon v-data-table__table__sort-icon--empty",
@@ -5160,9 +5199,9 @@ const VDataTable = vue.defineComponent({
         return vue.createVNode("th", {
           "class": classes,
           "key": header.key,
-          "tabindex": sortQuery && usePaiging ? 0 : undefined,
+          "tabindex": sortQuery ? 0 : undefined,
           "onClick": ev => {
-            if (!sortQuery || !usePaiging) return;
+            if (!sortQuery) return;
             handleClickSortHeader(header);
           }
         }, [vue.createVNode("div", {
@@ -5542,6 +5581,7 @@ class VuiService {
       router: this.router
     });
     this.stack = stackService;
+    this.useLink = options.useLink || vueRouter.useLink;
   }
 
   configure(options) {
@@ -5747,6 +5787,7 @@ exports.VTooltip = vueKit.VTooltip;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
 exports.ARROW_KEY_TYPES = ARROW_KEY_TYPES;
 exports.AVATAR_SIZES = AVATAR_SIZES;
+exports.BUTTON_ALIGNS = BUTTON_ALIGNS;
 exports.CHIP_SIZES = CHIP_SIZES;
 exports.CHOICE_KEY_TYPES = CHOICE_KEY_TYPES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
@@ -5838,6 +5879,7 @@ exports.createControlProps = createControlProps;
 exports.createElevationProps = createElevationProps;
 exports.createListTileProps = createListTileProps;
 exports.createNavigationItemProps = createNavigationItemProps;
+exports.createNavigationProps = createNavigationProps;
 exports.createPaperBaseProps = createPaperBaseProps;
 exports.createPaperProps = createPaperProps;
 exports.createRequiredChipRenderer = createRequiredChipRenderer;

package/dist/vui.css

@@ -1288,6 +1288,12 @@ thead th {
   transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), color 1ms;
   appearance: none;
 }
+.v-button--align-left {
+  justify-content: flex-start;
+}
+.v-button--align-right {
+  justify-content: flex-end;
+}
 .v-button--plain {
   color: inherit !important;
 }