@fastkit/vui 0.6.30 → 0.6.34

package/dist/vui.esm-bundler.js

@@ -1,14 +1,14 @@
 import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';
-import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableProps, navigationableEmits, useNavigationable, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService } from '@fastkit/vue-utils';
-import { inject, computed, provide, defineComponent, createVNode, mergeProps, ref, watch, withDirectives, createTextVNode, isVNode, Fragment, vShow, vModelSelect, onMounted, onBeforeUnmount, onBeforeUpdate, Transition } from 'vue';
+import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
+import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableInheritProps, VLink, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
+import { inject, computed, provide, defineComponent, createVNode, mergeProps, ref, watch, withDirectives, createTextVNode, isVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, onMounted, onBeforeUnmount, Transition } from 'vue';
 import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { VProgressCircular } from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
 export { ICON_NAMES } from '@fastkit/icon-font';
 import { isPromise } from '@fastkit/helpers';
-import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
 import { VAppContainer, VAppLayoutControl } from '@fastkit/vue-app-layout';
 import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scroller';
 
@@ -434,7 +434,7 @@ function resolveRawVButtonIcon(raw, type = 'main') {
 }
 
 const vueButtonProps = createPropsOptions$1({ ...colorSchemeProps(),
-  ...navigationableProps,
+  ...navigationableInheritProps,
   spacer: [Boolean, String],
   loading: Boolean,
   rounded: Boolean,
@@ -450,9 +450,8 @@ const LOADING_SIZE_MAP = {
 };
 const VButton = defineComponent({
   name: 'VButton',
+  inheritAttrs: false,
   props: vueButtonProps,
-  emits: { ...navigationableEmits
-  },
 
   setup(props, ctx) {
     const vui = useVui();
@@ -478,48 +477,25 @@ const VButton = defineComponent({
       variant: () => props.variant || (icon.value ? vui.setting('plainVariant') : defaults.variant)
     });
     const isPlain = computed(() => color.variant.value.value === vui.setting('plainVariant') && color.color.value.value === defaults.color);
-    const navigationable = useNavigationable(props);
-    const isLoading = computed(() => props.loading);
-    const isDisabled = computed(() => props.disabled);
+    const isLoading = computed(() => props.loading); // const isDisabled = computed(() => props.disabled);
+
     const isRounded = computed(() => props.rounded || !!icon.value);
     const spacer = computed(() => {
       const _spacer = props.spacer;
       if (!_spacer) return;
       return _spacer === true ? 'left' : _spacer;
     });
-    const classes = computed(() => [color.colorClasses.value, navigationable.value.classes, spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, {
+    const classes = computed(() => [color.colorClasses.value, // navigationable.value.classes,
+    spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, {
       'v-button--loading': isLoading.value,
       'v-button--icon': !!icon.value,
       'v-button--rounded': isRounded.value,
       'v-button--plain': isPlain.value
     }]);
     return () => {
-      const {
-        Tag,
-        attrs
-      } = navigationable.value;
-      const children = renderSlotOrEmpty$1(ctx.slots, 'default');
-      const _attrs = { ...attrs
-      };
-
-      if (isDisabled.value) {
-        _attrs.disabled = true;
-      }
-
-      return createVNode(Tag, mergeProps({
+      const children = renderSlotOrEmpty$1(ctx.slots);
+      return createVNode(VLink, mergeProps(ctx.attrs, {
         "class": ['v-button', classes.value]
-      }, _attrs, {
-        "onClick": ev => {
-          if (isDisabled.value || isLoading.value) {
-            ev.preventDefault();
-
-            if (isDisabled.value) {
-              return;
-            }
-          }
-
-          ctx.emit('click', ev);
-        }
       }), {
         default: () => [createVNode("span", {
           "class": "v-button__content"
@@ -534,7 +510,7 @@ const VButton = defineComponent({
 
 });
 
-function _isSlot$b(s) {
+function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -782,7 +758,7 @@ const VPagination = defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$b(children) ? children : {
+        }, _isSlot$c(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -829,11 +805,11 @@ const VPagination = defineComponent({
 
 function createListTileProps() {
   const icon = rawIconProp();
-  return { ...navigationableProps,
+  return { ...navigationableInheritProps,
     ...createPropsOptions$1({
       startIcon: icon,
       endIcon: icon,
-      fallbackTag: {
+      linkFallbackTag: {
         type: String,
         default: 'div'
       },
@@ -843,11 +819,12 @@ function createListTileProps() {
     })
   };
 }
-const listTileEmits = { ...navigationableEmits,
+const listTileEmits = {
   changeActive: isActive => true
 };
 const VListTile = defineComponent({
   name: 'VListTile',
+  inheritAttrs: false,
   props: createListTileProps(),
   emits: { ...listTileEmits
   },
@@ -863,10 +840,9 @@ const VListTile = defineComponent({
       return icon;
     });
     const endIcon = computed(() => resolveRawIconProp(false, props.endIcon));
-    const navigationable = useNavigationable(props, () => props.fallbackTag, ctx);
-    const hasTo = computed(() => !!props.to);
+    const hasTo = computed(() => !!ctx.attrs.to);
     const link = useLink({
-      to: props.to || ''
+      to: ctx.attrs.to || ''
     });
     const isActive = computed(() => {
       if (!hasTo.value) return false;
@@ -876,10 +852,7 @@ const VListTile = defineComponent({
     const classes = computed(() => {
       const _color = color.value;
       const hasColor = !!_color.value;
-      const _navigationable = navigationable.value;
-      const clickable = _navigationable.clickable;
-      return [color.value.className, _navigationable.classes, {
-        'v-list-tile--clickable': clickable,
+      return [color.value.className, {
         'v-list-tile--plain': !hasColor,
         'v-list-tile--has-color': hasColor,
         'v-list-tile--active': isActive.value
@@ -893,16 +866,9 @@ const VListTile = defineComponent({
     return () => {
       const _startIcon = startIcon.value;
       const _endIcon = endIcon.value;
-      const {
-        Tag,
-        attrs
-      } = navigationable.value;
-      return createVNode(Tag, mergeProps({
-        "class": ['v-list-tile', classes.value]
-      }, attrs, {
-        "onClick": ev => {
-          ctx.emit('click', ev);
-        }
+      return createVNode(VLink, mergeProps(ctx.attrs, {
+        "class": ['v-list-tile', classes.value],
+        "clickableClassName": "v-list-tile--clickable"
       }), {
         default: () => [_startIcon && createVNode("span", {
           "class": "v-list-tile__icon v-list-tile__icon--start"
@@ -947,7 +913,7 @@ const VDrawerLayout = defineComponent({
 
 });
 
-function _isSlot$a(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -982,7 +948,7 @@ const VHero = defineComponent({
         }, {
           default: () => [createVNode(HTagName, {
             "class": "v-hero__title"
-          }, _isSlot$a(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+          }, _isSlot$b(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
           })]
         })]
@@ -992,13 +958,17 @@ const VHero = defineComponent({
 
 });
 
-function _isSlot$9(s) {
+function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String
+    match: String // key: {
+    //   type: [String, Number],
+    //   required: true,
+    // },
+
   };
 }
 function resolveNavigationItemInput(input) {
@@ -1023,7 +993,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$9(label) ? label : {
+  }, _isSlot$a(label) ? label : {
     default: () => [label]
   });
 }
@@ -1043,7 +1013,7 @@ const VNavigationItem = defineComponent({
       const c = props.children;
       return c && c.length ? c : undefined;
     });
-    const to = computed(() => props.to);
+    const to = computed(() => ctx.attrs.to);
     const match = computed(() => {
       const {
         match,
@@ -1118,6 +1088,7 @@ const VNavigationItem = defineComponent({
     });
 
     function open() {
+      if (!children.value) return;
       opened.value = true;
     }
 
@@ -1131,10 +1102,13 @@ const VNavigationItem = defineComponent({
 
     const onClick = ev => {
       if (!to.value) {
-        toggle();
+        return toggle();
       }
 
-      ctx.emit('click', ev);
+      open(); // if (!to.value) {
+      //   toggle();
+      // }
+      // ctx.emit('click', ev);
     };
 
     const onChangeActive = isActive => {
@@ -1156,18 +1130,21 @@ const VNavigationItem = defineComponent({
       ctx.emit('changeActive', isActive);
     };
 
+    ctx.expose({
+      close
+    });
     return () => {
       let _slot;
 
       const _children = children.value;
       const fallbackTag = _children ? 'button' : undefined;
-      return createVNode(Fragment, null, [createVNode(VListTile, mergeProps(_props.value, {
+      return createVNode(Fragment, null, [createVNode(VListTile, mergeProps(ctx.attrs, _props.value, {
         "fallbackTag": fallbackTag,
         "endIcon": _props.value.endIcon,
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$9(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$a(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && createVNode(VExpandTransition, null, {
         default: () => [withDirectives(createVNode("div", {
@@ -1207,6 +1184,28 @@ const VNavigation = defineComponent({
       const c = props.caption;
       return typeof c === 'function' ? c() : c;
     });
+    const itemsRef = ref([]);
+    onBeforeUpdate(() => {
+      itemsRef.value = [];
+    });
+
+    function setItemRef(item, itemRef) {
+      itemsRef.value.push({
+        key: item.key,
+        ref: itemRef
+      });
+    }
+
+    function onItemActivated(item) {
+      itemsRef.value.forEach(({
+        key,
+        ref
+      }) => {
+        if (key === item.key) return;
+        ref.close();
+      });
+    }
+
     return () => {
       const $caption = caption.value;
       return createVNode("nav", {
@@ -1215,7 +1214,17 @@ const VNavigation = defineComponent({
         "class": "v-navigation__caption"
       }, [$caption]), items.value.map(item => renderNavigationItemInput(item, {
         class: 'v-navigation__item',
-        startIconEmptySpace: startIconEmptySpace.value
+        startIconEmptySpace: startIconEmptySpace.value,
+        ref: ref => {
+          setItemRef(item, ref);
+        },
+        onChangeActive: isActive => {
+          if (isActive
+          /* && item.children && item.children.length*/
+          ) {
+            onItemActivated(item);
+          }
+        }
       }))]);
     };
   }
@@ -1315,7 +1324,7 @@ const VCheckbox = defineComponent({
 
 });
 
-function _isSlot$8(s) {
+function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1327,7 +1336,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VCheckbox, attrs, _isSlot$8(slots) ? slots : {
+  }) => createVNode(VCheckbox, attrs, _isSlot$9(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1379,7 +1388,7 @@ const VRadio = defineComponent({
 
 });
 
-function _isSlot$7(s) {
+function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1390,7 +1399,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VRadio, attrs, _isSlot$7(slots) ? slots : {
+  }) => createVNode(VRadio, attrs, _isSlot$8(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1452,7 +1461,7 @@ const VSwitch = defineComponent({
 
 });
 
-function _isSlot$6(s) {
+function _isSlot$7(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1464,7 +1473,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VSwitch, attrs, _isSlot$6(slots) ? slots : {
+  }) => createVNode(VSwitch, attrs, _isSlot$7(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2023,7 +2032,7 @@ const VForm = defineComponent({
 
 });
 
-function _isSlot$5(s) {
+function _isSlot$6(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -2072,7 +2081,7 @@ const VTab = defineComponent({
           "class": classes,
           "to": to,
           "replace": replace
-        }, _isSlot$5(children) ? children : {
+        }, _isSlot$6(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -2090,7 +2099,7 @@ const VTab = defineComponent({
 
 });
 
-function _isSlot$4(s) {
+function _isSlot$5(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -2345,7 +2354,7 @@ const VTabs = defineComponent({
               to(value);
             }
           }
-        }, _isSlot$4(children) ? children : {
+        }, _isSlot$5(children) ? children : {
           default: () => [children]
         });
       });
@@ -2367,6 +2376,119 @@ const VTabs = defineComponent({
 
 });
 
+function _isSlot$4(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const VBreadcrumbs = defineComponent({
+  name: 'VBreadcrumbs',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    divider: [String, Function] // ...defineSlotsProps<{}>(),
+
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const computedItemsRef = computed(() => {
+      const items = props.items.map(rawItem => {
+        return typeof rawItem === 'string' ? {
+          text: rawItem
+        } : rawItem;
+      });
+      return items.map(item => {
+        const {
+          to,
+          text
+        } = item;
+        const {
+          disabled = vui.location.match(to) || !vui.location.isAvairable(to)
+        } = item;
+        return { ...item,
+          disabled,
+          text: typeof text === 'function' ? text(vui) : text
+        };
+      });
+    });
+    const lengthRef = computed(() => computedItemsRef.value.length);
+
+    const defaultDividerSlot = () => {
+      return [createVNode("i", {
+        "class": "v-breadcrumbs__divider__icon"
+      }, null)];
+    };
+
+    return () => {
+      if (lengthRef.value < 1) return;
+      let dividerSlot;
+      const propDivider = props.divider;
+
+      if (propDivider) {
+        dividerSlot = typeof propDivider === 'function' ? propDivider : () => propDivider;
+      } else {
+        dividerSlot = defaultDividerSlot;
+      }
+
+      const children = [];
+      computedItemsRef.value.forEach((item, index) => {
+        const {
+          text,
+          icon,
+          disabled,
+          to
+        } = item;
+
+        if (index > 0) {
+          const divider = dividerSlot(vui);
+
+          if (divider) {
+            children.push(createVNode("li", {
+              "class": "v-breadcrumbs__divider",
+              "key": `divider-${index}`
+            }, [divider]));
+          }
+        }
+
+        const myChildren = [];
+
+        if (icon) {
+          const $icon = resolveRawIconProp(false, icon, {
+            class: 'v-breadcrumbs__icon'
+          });
+
+          if ($icon) {
+            myChildren.push($icon);
+          }
+        }
+
+        if (text) myChildren.push(text);
+        const itemChild = to ? createVNode(VLink, {
+          "class": "v-breadcrumbs__link",
+          "to": to,
+          "exactActiveClass": "v-breadcrumbs__link--active"
+        }, _isSlot$4(myChildren) ? myChildren : {
+          default: () => [myChildren]
+        }) : myChildren;
+        children.push(createVNode("li", {
+          "class": ['v-breadcrumbs__item', {
+            'v-breadcrumbs__item--disabled': disabled
+          }],
+          "key": `link-${index}`
+        }, [itemChild]));
+      });
+      return createVNode("nav", {
+        "class": "v-breadcrumbs"
+      }, [createVNode("ul", {
+        "class": "v-breadcrumbs__list"
+      }, [children])]);
+    };
+  }
+
+});
+
 function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
@@ -3273,6 +3395,7 @@ class VuiService {
     location;
     constructor(options) {
         this.options = options;
+        this.configure();
         const { selectionSeparator = () => ', ', autoScrollToElementOffsetTop = DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP, textareaRows = DEFAULT_TEXTAREA_ROWS, requiredChip = () => '*', } = options;
         this.selectionSeparator = selectionSeparator;
         this.autoScrollToElementOffsetTop = autoScrollToElementOffsetTop;
@@ -3283,6 +3406,13 @@ class VuiService {
             router: this.router,
         });
     }
+    configure(options) {
+        options && Object.assign(this.options, options);
+        setDefaultRouterLink(this.getRouterLink());
+    }
+    getRouterLink() {
+        return this.options.RouterLink || RouterLink;
+    }
     setting(key) {
         return this.options.uiSettings[key];
     }
@@ -3359,4 +3489,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VButton, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, 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, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, 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, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };