@fastkit/vui 0.6.12 → 0.6.16

package/dist/vui.cjs.js

@@ -4,7 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vueKit = require('@fastkit/vue-kit');
 var vue = require('vue');
+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 vueRouter = require('vue-router');
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
 const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
@@ -37,8 +41,8 @@ function useVuiColorProvider() {
         return parent;
     }
     const vui = useVui();
-    const primary = vue.computed(() => vui.color('primary'));
-    const error = vue.computed(() => vui.color('error'));
+    const primary = vue.computed(() => vui.setting('primaryScope'));
+    const error = vue.computed(() => vui.setting('errorScope'));
     const provider = {
         primary,
         error,
@@ -233,16 +237,162 @@ function defineFormSelectorComponent(opts) {
   });
 }
 
-const VIcon = vue.defineComponent({
-  name: 'VIcon',
-  props: {
-    name: {
+function createElevationProps() {
+    return vueUtils.createPropsOptions({
+        elevation: Number,
+    });
+}
+function useElevation(props, opts = {}) {
+    const elevationValue = vue.computed(() => props.elevation == null ? opts.defaultValue : props.elevation);
+    const elevationClassName = vue.computed(() => {
+        const v = elevationValue.value;
+        return v == null ? undefined : `elevation-${v}`;
+    });
+    return {
+        elevationValue,
+        elevationClassName,
+    };
+}
+
+function createPaperBaseProps() {
+  return {
+    color: String,
+    tag: {
       type: String,
-      required: true
+      default: 'div'
     },
-    rotate: {
-      type: Number
-    }
+    ...vueUtils.defineSlotsProps()
+  };
+}
+function createPaperProps() {
+  return { ...createElevationProps(),
+    ...createPaperBaseProps(),
+    square: Boolean,
+    headerProps: Object,
+    bodyProps: Object,
+    footerProps: Object
+  };
+}
+const VPaper = vue.defineComponent({
+  name: 'VPaper',
+  props: createPaperProps(),
+
+  setup(props, ctx) {
+    const tag = vue.computed(() => props.tag);
+    const elevation = useElevation(props, {
+      defaultValue: 1
+    });
+    const scope = vueColorScheme.useScopeColorClass(props);
+    const classes = vue.computed(() => [elevation.elevationClassName.value, scope.value.className, {
+      'v-paper--plain': !scope.value.value,
+      'v-paper--has-color': !!scope.value.value,
+      'v-paper--square': props.square
+    }]);
+    const headerProps = vue.computed(() => props.headerProps);
+    const bodyProps = vue.computed(() => props.bodyProps);
+    const footerProps = vue.computed(() => props.footerProps);
+    return () => {
+      const TagName = tag.value;
+      const header = vueUtils.renderSlotOrEmpty(ctx.slots, 'header');
+      const footer = vueUtils.renderSlotOrEmpty(ctx.slots, 'footer');
+      return vue.createVNode(TagName, {
+        "class": ['v-paper', classes.value]
+      }, {
+        default: () => [header && vue.createVNode("div", vue.mergeProps({
+          "class": "v-paper__header"
+        }, headerProps.value), [header]), vue.createVNode("div", vue.mergeProps({
+          "class": "v-paper__body"
+        }, bodyProps.value), [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]), footer && vue.createVNode("div", vue.mergeProps({
+          "class": "v-paper__footer"
+        }, footerProps.value), [footer])]
+      });
+    };
+  }
+
+});
+
+function createCardProps() {
+  return { ...createPaperProps()
+  };
+}
+const VCard = vue.defineComponent({
+  name: 'VCard',
+  props: createCardProps(),
+
+  setup(props, ctx) {
+    const _props = vue.computed(() => props);
+
+    return () => {
+      return vue.createVNode(VPaper, vue.mergeProps({
+        "class": "v-card"
+      }, _props.value), ctx.slots);
+    };
+  }
+
+});
+
+const VCardContent = vue.defineComponent({
+  name: 'VCardContent',
+
+  setup(props, ctx) {
+    return () => {
+      return vue.createVNode("div", {
+        "class": "v-card-content"
+      }, [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]);
+    };
+  }
+
+});
+
+const VCardActions = vue.defineComponent({
+  name: 'VCardActions',
+
+  setup(props, ctx) {
+    return () => {
+      return vue.createVNode("div", {
+        "class": "v-card-actions"
+      }, [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]);
+    };
+  }
+
+});
+
+//   prop: RawIconProp<T>,
+//   payload: () => T,
+// ): RawIconProp {
+//   if (!prop || typeof prop !== 'function') {
+//     return prop;
+//   }
+//   const fn = (gen: IconGenerator): VNodeChild => {
+//     const t = payload();
+//     return prop(gen, t);
+//   };
+//   return fn;
+// }
+// export const rawRawIconProp = [String, Function] as PropType<RawIconProp>;
+
+const _rawIconProp = [String, Function];
+function rawIconProp() {
+  return _rawIconProp;
+}
+function resolveRawIconProp(payload, prop, extraProps) {
+  if (!prop) return;
+  return typeof prop === 'function' ? prop(input => vue.createVNode(VIcon, vue.mergeProps(input, extraProps), null), payload) : vue.createVNode(VIcon, vue.mergeProps(extraProps, {
+    "name": prop
+  }), null);
+}
+const iconProps = vueUtils.createPropsOptions({
+  name: {
+    type: String,
+    required: true
+  },
+  rotate: {
+    type: Number
+  }
+});
+const VIcon = vue.defineComponent({
+  name: 'VIcon',
+  props: { ...iconProps
   },
   emits: {},
 
@@ -272,6 +422,464 @@ const VIcon = vue.defineComponent({
 
 });
 
+function resolveRawVButtonIcon(raw, type = 'main') {
+  if (!raw) return;
+  return typeof raw === 'function' ? raw : () => vue.createVNode(VIcon, {
+    "class": ['v-button__icon', `v-button__icon--${type}`],
+    "name": raw
+  }, null);
+}
+
+const vueButtonProps = vueUtils.createPropsOptions({ ...vueColorScheme.colorSchemeProps(),
+  ...vueUtils.navigationableProps,
+  spacer: [Boolean, String],
+  loading: Boolean,
+  rounded: Boolean,
+  icon: [String, Function],
+  startIcon: [String, Function],
+  endIcon: [String, Function],
+  ...createControlProps()
+});
+const LOADING_SIZE_MAP = {
+  sm: 14,
+  md: 20,
+  lg: 28
+};
+const VButton = vue.defineComponent({
+  name: 'VButton',
+  props: vueButtonProps,
+  emits: { ...vueUtils.navigationableEmits
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const control = useControl(props);
+    const defaults = vui.setting('buttonDefault');
+    const icon = vue.computed(() => {
+      const _icon = resolveRawVButtonIcon(props.icon);
+
+      return _icon && _icon();
+    });
+    const startIcon = vue.computed(() => {
+      const _icon = resolveRawVButtonIcon(props.startIcon, 'start');
+
+      return _icon && _icon();
+    });
+    const endIcon = vue.computed(() => {
+      const _icon = resolveRawVButtonIcon(props.endIcon, 'end');
+
+      return _icon && _icon();
+    });
+    const color = vueColorScheme.useColorClasses({
+      color: () => props.color || defaults.color,
+      variant: () => props.variant || (icon.value ? vui.setting('plainVariant') : defaults.variant)
+    });
+    const isPlain = vue.computed(() => color.variant.value.value === vui.setting('plainVariant') && color.color.value.value === defaults.color);
+    const navigationable = vueUtils.useNavigationable(props);
+    const isLoading = vue.computed(() => props.loading);
+    const isDisabled = vue.computed(() => props.disabled);
+    const isRounded = vue.computed(() => props.rounded || !!icon.value);
+    const spacer = vue.computed(() => {
+      const _spacer = props.spacer;
+      if (!_spacer) return;
+      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}`, {
+      '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 = vueUtils.renderSlotOrEmpty(ctx.slots, 'default');
+      const _attrs = { ...attrs
+      };
+
+      if (isDisabled.value) {
+        _attrs.disabled = true;
+      }
+
+      return vue.createVNode(Tag, vue.mergeProps({
+        "class": ['v-button', classes.value]
+      }, _attrs, {
+        "onClick": ev => {
+          if (isDisabled.value || isLoading.value) {
+            ev.preventDefault();
+
+            if (isDisabled.value) {
+              return;
+            }
+          }
+
+          ctx.emit('click', ev);
+        }
+      }), {
+        default: () => [vue.createVNode("span", {
+          "class": "v-button__content"
+        }, [startIcon.value, children, icon.value, endIcon.value]), isLoading.value && vue.createVNode(vueLoading.VProgressCircular, {
+          "class": "v-button__loading",
+          "indeterminate": true,
+          "size": LOADING_SIZE_MAP[control.size.value]
+        }, null)]
+      });
+    };
+  }
+
+});
+
+function createListTileProps() {
+  const icon = rawIconProp();
+  return { ...vueUtils.navigationableProps,
+    ...vueUtils.createPropsOptions({
+      startIcon: icon,
+      endIcon: icon,
+      fallbackTag: {
+        type: String,
+        default: 'div'
+      },
+      startIconEmptySpace: Boolean,
+      color: String
+    })
+  };
+}
+const listTileEmits = { ...vueUtils.navigationableEmits,
+  changeActive: isActive => true
+};
+const VListTile = vue.defineComponent({
+  name: 'VListTile',
+  props: createListTileProps(),
+  emits: { ...listTileEmits
+  },
+
+  setup(props, ctx) {
+    const startIcon = vue.computed(() => {
+      let icon = resolveRawIconProp(false, props.startIcon);
+
+      if (!icon && props.startIconEmptySpace) {
+        icon = resolveRawIconProp(false, '$empty');
+      }
+
+      return icon;
+    });
+    const endIcon = vue.computed(() => resolveRawIconProp(false, props.endIcon));
+    const navigationable = vueUtils.useNavigationable(props, () => props.fallbackTag, ctx);
+    const hasTo = vue.computed(() => !!props.to);
+    const link = vueRouter.useLink({
+      to: props.to || ''
+    });
+    const isActive = vue.computed(() => {
+      if (!hasTo.value) return false;
+      return link.isActive.value;
+    });
+    const color = vueColorScheme.useScopeColorClass(props);
+    const classes = vue.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,
+        'v-list-tile--plain': !hasColor,
+        'v-list-tile--has-color': hasColor,
+        'v-list-tile--active': isActive.value
+      }];
+    });
+    vue.watch(() => isActive.value, isActive => {
+      ctx.emit('changeActive', isActive);
+    }, {
+      immediate: true
+    });
+    return () => {
+      const _startIcon = startIcon.value;
+      const _endIcon = endIcon.value;
+      const {
+        Tag,
+        attrs
+      } = navigationable.value;
+      return vue.createVNode(Tag, vue.mergeProps({
+        "class": ['v-list-tile', classes.value]
+      }, attrs, {
+        "onClick": ev => {
+          ctx.emit('click', ev);
+        }
+      }), {
+        default: () => [_startIcon && vue.createVNode("span", {
+          "class": "v-list-tile__icon v-list-tile__icon--start"
+        }, [_startIcon]), vue.createVNode("span", {
+          "class": "v-list-tile__body"
+        }, [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]), _endIcon && vue.createVNode("span", {
+          "class": "v-list-tile__icon v-list-tile__icon--end"
+        }, [_endIcon])]
+      });
+    };
+  }
+
+});
+
+const VDrawerLayout = vue.defineComponent({
+  name: 'VDrawerLayout',
+  props: { ...createPaperBaseProps()
+  },
+
+  setup(props, ctx) {
+    return () => {
+      const paperProps = vue.computed(() => ({
+        color: props.color,
+        tag: props.tag
+      }));
+      return vue.createVNode(VPaper, vue.mergeProps({
+        "class": "v-drawer-layout"
+      }, paperProps.value, {
+        "square": true,
+        "headerProps": {
+          class: 'v-drawer-layout__header'
+        },
+        "bodyProps": {
+          class: 'v-drawer-layout__body'
+        },
+        "footerProps": {
+          class: 'v-drawer-layout__footer'
+        }
+      }), ctx.slots);
+    };
+  }
+
+});
+
+function _isSlot$5(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+function createNavigationItemProps() {
+  return { ...createListTileProps(),
+    match: String
+  };
+}
+function resolveNavigationItemInput(input) {
+  let label = input.label;
+  const props = { ...input
+  };
+
+  if (typeof label === 'function') {
+    label = label();
+  }
+
+  delete props.label;
+  return {
+    label,
+    props
+  };
+}
+function renderNavigationItemInput(input, extraProps) {
+  const {
+    label,
+    props
+  } = resolveNavigationItemInput(input);
+  return vue.createVNode(VNavigationItem, { ...props,
+    ...extraProps
+  }, _isSlot$5(label) ? label : {
+    default: () => [label]
+  });
+}
+const VNavigationItem = vue.defineComponent({
+  name: 'VNavigationItem',
+  inheritAttrs: false,
+  props: { ...createNavigationItemProps(),
+    children: Array
+  },
+  emits: { ...listTileEmits
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const opened = vue.ref(false);
+    const children = vue.computed(() => {
+      const c = props.children;
+      return c && c.length ? c : undefined;
+    });
+    const to = vue.computed(() => props.to);
+    const match = vue.computed(() => {
+      const {
+        match,
+        to
+      } = props;
+      if (match) return match;
+      if (!to) return;
+      if (typeof to === 'string') return to;
+      return to.path;
+    });
+    const classes = vue.computed(() => [{
+      'v-navigation-item--opened': opened.value
+    }]);
+    const route = vueRouter.useRoute(); // const classes = computed(() => [
+    //   // {
+    //   //   'v-navigation-item--matched': matched.value,
+    //   // },
+    // ]);
+
+    vue.watch(() => route.path, newPath => {
+      const c = children.value;
+      const m = match.value;
+
+      if (!c || !m) {
+        // matched.value = false;
+        return;
+      }
+
+      if (newPath.match(m)) {
+        open(); // matched.value = true;
+      } else {
+        close(); // matched.value = false;
+      }
+    }, {
+      immediate: true
+    }); // const iconPayload = () => opened.value;
+
+    const _props = vue.computed(() => {
+      const c = children.value;
+      let {
+        endIcon
+      } = props;
+
+      if (c && !endIcon) {
+        endIcon = vui.icon('navigationExpand');
+
+        if (typeof endIcon === 'string') {
+          const name = endIcon;
+
+          endIcon = gen => {
+            return gen({
+              name,
+              rotate: opened.value ? 180 : 0
+            });
+          };
+        }
+      }
+
+      const __props = { ...props,
+        endIcon
+      };
+      delete __props.children; // const _activeClass = props.activeClass;
+      // const activeClass = `v-navigation-item--active${
+      //   _activeClass ? ` ${_activeClass}` : ''
+      // }`;
+
+      return { ...__props // activeClass,
+        // startIcon: toRawIconProp(__props.startIcon, iconPayload),
+        // endIcon: toRawIconProp(__props.endIcon, iconPayload),
+
+      };
+    });
+
+    function open() {
+      opened.value = true;
+    }
+
+    function close() {
+      opened.value = false;
+    }
+
+    function toggle() {
+      return opened.value ? close() : open();
+    }
+
+    const onClick = ev => {
+      if (!to.value) {
+        toggle();
+      }
+
+      ctx.emit('click', ev);
+    };
+
+    const onChangeActive = isActive => {
+      // if (isActive) {
+      //   // open();
+      //   // if (typeof window !== 'undefined') {
+      //   //   // open();
+      //   //   // console.log('hoge', window);
+      //   //   setTimeout(() => {
+      //   //     open();
+      //   //   }, 1000);
+      //   // }
+      //   // open();
+      //   // console.log(props);
+      //   // setTimeout(() => {
+      //   //   open();
+      //   // }, 500);
+      // }
+      ctx.emit('changeActive', isActive);
+    };
+
+    return () => {
+      let _slot;
+
+      const _children = children.value;
+      const fallbackTag = _children ? 'button' : undefined;
+      return vue.createVNode(vue.Fragment, null, [vue.createVNode(VListTile, vue.mergeProps(_props.value, {
+        "fallbackTag": fallbackTag,
+        "endIcon": _props.value.endIcon,
+        "class": ['v-navigation-item', classes.value],
+        "onClick": onClick,
+        "onChangeActive": onChangeActive
+      }), _isSlot$5(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+        default: () => [_slot]
+      }), _children && vue.createVNode(vueUtils.VExpandTransition, null, {
+        default: () => [vue.withDirectives(vue.createVNode("div", {
+          "class": "v-navigation-item__expand"
+        }, [_children.map(child => renderNavigationItemInput(child, {
+          startIconEmptySpace: _props.value.startIconEmptySpace // onClick,
+          // onChangeActive,
+
+        }))]), [[vue.vShow, opened.value]])]
+      })]);
+    };
+  }
+
+});
+
+const VNavigation = vue.defineComponent({
+  name: 'VNavigation',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    color: String,
+    startIconEmptySpace: {
+      type: Boolean,
+      default: true
+    },
+    caption: [String, Function]
+  },
+
+  setup(props, ctx) {
+    const items = vue.computed(() => props.items);
+    const color = vueColorScheme.useScopeColorClass(props);
+    const classes = vue.computed(() => [color.value.className]);
+    const startIconEmptySpace = vue.computed(() => props.startIconEmptySpace);
+    const caption = vue.computed(() => {
+      const c = props.caption;
+      return typeof c === 'function' ? c() : c;
+    });
+    return () => {
+      const $caption = caption.value;
+      return vue.createVNode("nav", {
+        "class": ['v-navigation', classes.value]
+      }, [!!$caption && vue.createVNode("div", {
+        "class": "v-navigation__caption"
+      }, [$caption]), items.value.map(item => renderNavigationItemInput(item, {
+        class: 'v-navigation__item',
+        startIconEmptySpace: startIconEmptySpace.value
+      }))]);
+    };
+  }
+
+});
+
 const VCheckable = vue.defineComponent({
   name: 'VCheckable',
   props: {
@@ -365,7 +973,7 @@ const VCheckbox = vue.defineComponent({
 
 });
 
-function _isSlot$3(s) {
+function _isSlot$4(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -377,7 +985,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VCheckbox, attrs, _isSlot$3(slots) ? slots : {
+  }) => vue.createVNode(VCheckbox, attrs, _isSlot$4(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -429,7 +1037,7 @@ const VRadio = vue.defineComponent({
 
 });
 
-function _isSlot$2(s) {
+function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -440,7 +1048,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VRadio, attrs, _isSlot$2(slots) ? slots : {
+  }) => vue.createVNode(VRadio, attrs, _isSlot$3(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -502,7 +1110,7 @@ const VSwitch = vue.defineComponent({
 
 });
 
-function _isSlot$1(s) {
+function _isSlot$2(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -514,7 +1122,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VSwitch, attrs, _isSlot$1(slots) ? slots : {
+  }) => vue.createVNode(VSwitch, attrs, _isSlot$2(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1057,7 +1665,7 @@ const VForm = vue.defineComponent({
 
 });
 
-function _isSlot(s) {
+function _isSlot$1(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1069,7 +1677,93 @@ const VApp = vue.defineComponent({
     return () => {
       let _slot;
 
-      return vue.createVNode(vueKit.VStackRoot, null, _isSlot(_slot = vueKit.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+      return vue.createVNode(vueKit.VStackRoot, null, _isSlot$1(_slot = vueKit.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+
+});
+
+const VToolbar = vue.defineComponent({
+  name: 'VToolbar',
+  props: { ...createElevationProps(),
+    ...vueColorScheme.colorSchemeProps(),
+    dense: Boolean
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const elevation = useElevation(props, {
+      defaultValue: 4
+    });
+    const dense = vue.computed(() => props.dense);
+    const color = vueColorScheme.useColorClasses({
+      color: () => props.color,
+      variant: () => props.variant || vui.setting('containedVariant')
+    });
+    const classes = vue.computed(() => {
+      return [elevation.elevationClassName.value, color.colorClasses.value, {
+        'v-toolbar--plain': !color.color.value.value,
+        'v-toolbar--dense': dense.value
+      }];
+    });
+    return () => {
+      return vue.createVNode("div", {
+        "class": ['v-toolbar', classes.value]
+      }, [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]);
+    };
+  }
+
+});
+
+const VToolbarMenu = vue.defineComponent({
+  name: 'VToolbarMenu',
+  props: {
+    edge: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup(props, ctx) {
+    const edge = vue.computed(() => props.edge);
+    return () => {
+      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
+        }]
+      }, [children]);
+    };
+  }
+
+});
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VToolbarTitle = vue.defineComponent({
+  name: 'VToolbarTitle',
+  props: {
+    tag: {
+      type: String,
+      default: 'span'
+    }
+  },
+
+  setup(props, ctx) {
+    const _TagName = vue.computed(() => props.tag);
+
+    return () => {
+      let _slot;
+
+      const TagName = _TagName.value;
+      return vue.createVNode(TagName, {
+        "class": "v-toolbar-title"
+      }, _isSlot(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       });
     };
@@ -1093,8 +1787,8 @@ class VuiService {
         this.textareaRows = textareaRows;
         this.requiredChip = requiredChip;
     }
-    color(colorType) {
-        return this.options.colors[colorType];
+    setting(key) {
+        return this.options.uiSettings[key];
     }
     icon(iconType) {
         return this.options.icons[iconType];
@@ -1112,39 +1806,63 @@ class VuiService {
     }
 }
 
-class VuiPlugin {
-    static installedApps = new Set();
-    static install(app, opts) {
-        const { installedApps } = this;
-        if (installedApps.has(app))
-            return;
-        const unmountApp = app.unmount;
-        installedApps.add(app);
-        const { colors, colorScheme, stack } = opts;
-        // ColorScheme
-        const vueColorSchemePlugin = new vueKit.VueColorSchemePlugin(colorScheme);
-        app.use(vueColorSchemePlugin);
-        // Stack
-        vueKit.installVueStackPlugin(app, {
-            primaryColor: colors.primary,
-            ...stack,
-        });
-        // Vui
-        const $vui = new VuiService(opts);
-        app.provide(VuiInjectionKey, $vui);
-        app.config.globalProperties.$vui = $vui;
-        app.unmount = function () {
-            installedApps.delete(app);
-            delete app.config.globalProperties.$vui;
-            unmountApp();
-        };
-    }
-}
-function installVuiPlugin(app, opts) {
-    return app.use(VuiPlugin, opts);
+class VuiPlugin {
+  static installedApps = new Set();
+
+  static install(app, opts) {
+    const {
+      installedApps
+    } = this;
+    if (installedApps.has(app)) return;
+    const unmountApp = app.unmount;
+    installedApps.add(app);
+    const {
+      colorScheme,
+      stack,
+      uiSettings
+    } = opts; // ColorScheme
+
+    const vueColorSchemePlugin = new vueKit.VueColorSchemePlugin(colorScheme);
+    app.use(vueColorSchemePlugin); // Stack
+
+    vueKit.installVueStackPlugin(app, {
+      actions: {
+        ok: ({
+          bindings
+        }) => vue.createVNode(VButton, vue.mergeProps(uiSettings.dialogOk, bindings), {
+          default: () => [vue.createTextVNode("OK")]
+        }),
+        cancel: ({
+          bindings
+        }) => vue.createVNode(VButton, vue.mergeProps(uiSettings.dialogCancel, bindings), {
+          default: () => [vue.createTextVNode("CANCEL")]
+        }),
+        close: ({
+          bindings
+        }) => vue.createVNode(VButton, vue.mergeProps(uiSettings.dialogClose, bindings), {
+          default: () => [vue.createTextVNode("CLOSE")]
+        }),
+        ...(stack ? stack.actions : {})
+      },
+      ...stack
+    }); // Vui
+
+    const $vui = new VuiService(opts);
+    app.provide(VuiInjectionKey, $vui);
+    app.config.globalProperties.$vui = $vui;
+
+    app.unmount = function () {
+      installedApps.delete(app);
+      delete app.config.globalProperties.$vui;
+      unmountApp();
+    };
+  }
+
+}
+function installVuiPlugin(app, opts) {
+  return app.use(VuiPlugin, opts);
 }
 
-exports.VButton = vueKit.VStackBtn;
 exports.VDialog = vueKit.VDialog;
 exports.VMenu = vueKit.VMenu;
 exports.VSnackbar = vueKit.VSnackbar;
@@ -1152,12 +1870,21 @@ exports.ICON_NAMES = iconFont.ICON_NAMES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
 exports.CONTROL_SIZES = CONTROL_SIZES;
 exports.VApp = VApp;
+exports.VButton = VButton;
+exports.VCard = VCard;
+exports.VCardActions = VCardActions;
+exports.VCardContent = VCardContent;
 exports.VCheckbox = VCheckbox;
 exports.VCheckboxGroup = VCheckboxGroup;
+exports.VDrawerLayout = VDrawerLayout;
 exports.VForm = VForm;
 exports.VIcon = VIcon;
+exports.VListTile = VListTile;
+exports.VNavigation = VNavigation;
+exports.VNavigationItem = VNavigationItem;
 exports.VOption = VOption;
 exports.VOptionGroup = VOptionGroup;
+exports.VPaper = VPaper;
 exports.VRadio = VRadio;
 exports.VRadioGroup = VRadioGroup;
 exports.VSelect = VSelect;
@@ -1165,15 +1892,51 @@ exports.VSwitch = VSwitch;
 exports.VSwitchGroup = VSwitchGroup;
 exports.VTextField = VTextField;
 exports.VTextarea = VTextarea;
+exports.VToolbar = VToolbar;
+exports.VToolbarMenu = VToolbarMenu;
+exports.VToolbarTitle = VToolbarTitle;
+exports.VUI_CHECKBOX_GROUP_SYMBOL = VUI_CHECKBOX_GROUP_SYMBOL;
+exports.VUI_CHECKBOX_SYMBOL = VUI_CHECKBOX_SYMBOL;
+exports.VUI_FORM_SYMBOL = VUI_FORM_SYMBOL;
+exports.VUI_OPTION_SYMBOL = VUI_OPTION_SYMBOL;
+exports.VUI_RADIO_GROUP_SYMBOL = VUI_RADIO_GROUP_SYMBOL;
+exports.VUI_RADIO_SYMBOL = VUI_RADIO_SYMBOL;
+exports.VUI_SELECT_SYMBOL = VUI_SELECT_SYMBOL;
+exports.VUI_SWITCH_GROUP_SYMBOL = VUI_SWITCH_GROUP_SYMBOL;
+exports.VUI_SWITCH_SYMBOL = VUI_SWITCH_SYMBOL;
+exports.VUI_TEXTAREA_SYMBOL = VUI_TEXTAREA_SYMBOL;
+exports.VUI_TEXT_FIELD_SYMBOL = VUI_TEXT_FIELD_SYMBOL;
+exports.VuiColorProviderInjectionKey = VuiColorProviderInjectionKey;
+exports.VuiControlFieldInjectionKey = VuiControlFieldInjectionKey;
+exports.VuiControlInjectionKey = VuiControlInjectionKey;
 exports.VuiInjectionKey = VuiInjectionKey;
 exports.VuiPlugin = VuiPlugin;
 exports.VuiService = VuiService;
+exports.createCardProps = createCardProps;
 exports.createControlFieldProviderProps = createControlFieldProviderProps;
 exports.createControlProps = createControlProps;
+exports.createElevationProps = createElevationProps;
+exports.createListTileProps = createListTileProps;
+exports.createNavigationItemProps = createNavigationItemProps;
+exports.createPaperBaseProps = createPaperBaseProps;
+exports.createPaperProps = createPaperProps;
 exports.defineFormSelectorComponent = defineFormSelectorComponent;
+exports.iconProps = iconProps;
 exports.installVuiPlugin = installVuiPlugin;
+exports.listTileEmits = listTileEmits;
+exports.rawIconProp = rawIconProp;
+exports.renderNavigationItemInput = renderNavigationItemInput;
+exports.resolveNavigationItemInput = resolveNavigationItemInput;
+exports.resolveRawIconProp = resolveRawIconProp;
 exports.useControl = useControl;
 exports.useControlField = useControlField;
+exports.useElevation = useElevation;
+exports.useVui = useVui;
+exports.useVuiColorProvider = useVuiColorProvider;
+exports.vueButtonProps = vueButtonProps;
 for (var k in vueKit) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = vueKit[k];
 }
+for (var k in vueLoading) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = vueLoading[k];
+}