@fastkit/vui 0.6.10 → 0.6.14

package/dist/vui.esm-bundler.js

@@ -1,7 +1,11 @@
 import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useInjectTheme, VStackRoot, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
-export { VStackBtn as VButton, VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';
-import { inject, computed, provide, defineComponent, createVNode, isVNode, ref, withDirectives, vModelSelect } from 'vue';
+export { VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';
+import { inject, computed, provide, defineComponent, createVNode, mergeProps, isVNode, ref, withDirectives, vModelSelect, createTextVNode } from 'vue';
+import { useScopeColorClass, colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
+import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableProps, navigationableEmits, useNavigationable } from '@fastkit/vue-utils';
+import { VProgressCircular } from '@fastkit/vue-loading';
+export * from '@fastkit/vue-loading';
 export { ICON_NAMES } from '@fastkit/icon-font';
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
@@ -35,8 +39,8 @@ function useVuiColorProvider() {
         return parent;
     }
     const vui = useVui();
-    const primary = computed(() => vui.color('primary'));
-    const error = computed(() => vui.color('error'));
+    const primary = computed(() => vui.setting('primaryScope'));
+    const error = computed(() => vui.setting('errorScope'));
     const provider = {
         primary,
         error,
@@ -231,16 +235,137 @@ function defineFormSelectorComponent(opts) {
   });
 }
 
-const VIcon = defineComponent({
-  name: 'VIcon',
-  props: {
-    name: {
+function createElevationProps() {
+    return createPropsOptions$1({
+        elevation: Number,
+    });
+}
+function useElevation(props, opts = {}) {
+    const elevationValue = computed(() => props.elevation == null ? opts.defaultValue : props.elevation);
+    const elevationClassName = computed(() => {
+        const v = elevationValue.value;
+        return v == null ? undefined : `elevation-${v}`;
+    });
+    return {
+        elevationValue,
+        elevationClassName,
+    };
+}
+
+function createPaperProps() {
+  return { ...createElevationProps(),
+    square: Boolean,
+    color: String,
+    tag: {
       type: String,
-      required: true
+      default: 'div'
     },
-    rotate: {
-      type: Number
-    }
+    ...defineSlotsProps$1()
+  }; //
+}
+const VPaper = defineComponent({
+  name: 'VPaper',
+  props: createPaperProps(),
+
+  setup(props, ctx) {
+    const tag = computed(() => props.tag);
+    const elevation = useElevation(props, {
+      defaultValue: 1
+    });
+    const scope = useScopeColorClass(props);
+    const classes = 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
+    }]);
+    return () => {
+      const TagName = tag.value;
+      const header = renderSlotOrEmpty$1(ctx.slots, 'header');
+      const footer = renderSlotOrEmpty$1(ctx.slots, 'footer');
+      return createVNode(TagName, {
+        "class": ['v-paper', classes.value]
+      }, {
+        default: () => [header && createVNode("div", {
+          "class": "v-paper__header"
+        }, [header]), createVNode("div", {
+          "class": "v-paper__body"
+        }, [renderSlotOrEmpty$1(ctx.slots, 'default')]), footer && createVNode("div", {
+          "class": "v-paper__footer"
+        }, [footer])]
+      });
+    };
+  }
+
+});
+
+function createCardProps() {
+  return { ...createPaperProps()
+  };
+}
+const VCard = defineComponent({
+  name: 'VCard',
+  props: createCardProps(),
+
+  setup(props, ctx) {
+    const _props = computed(() => props);
+
+    return () => {
+      return createVNode(VPaper, mergeProps({
+        "class": "v-card"
+      }, _props.value), ctx.slots);
+    };
+  }
+
+});
+
+const VCardContent = defineComponent({
+  name: 'VCardContent',
+
+  setup(props, ctx) {
+    return () => {
+      return createVNode("div", {
+        "class": "v-card-content"
+      }, [renderSlotOrEmpty$1(ctx.slots, 'default')]);
+    };
+  }
+
+});
+
+const VCardActions = defineComponent({
+  name: 'VCardActions',
+
+  setup(props, ctx) {
+    return () => {
+      return createVNode("div", {
+        "class": "v-card-actions"
+      }, [renderSlotOrEmpty$1(ctx.slots, 'default')]);
+    };
+  }
+
+});
+
+const _rawRawIconProp = [String, Function];
+function rawRawIconProp() {
+  return _rawRawIconProp;
+}
+function resolveRawIconProp(prop, extraProps) {
+  if (!prop) return;
+  return typeof prop === 'function' ? prop(input => createVNode(VIcon, mergeProps(input, extraProps), null)) : createVNode(VIcon, mergeProps(extraProps, {
+    "name": prop
+  }), null);
+}
+const iconProps = createPropsOptions$1({
+  name: {
+    type: String,
+    required: true
+  },
+  rotate: {
+    type: Number
+  }
+});
+const VIcon = defineComponent({
+  name: 'VIcon',
+  props: { ...iconProps
   },
   emits: {},
 
@@ -270,6 +395,243 @@ const VIcon = defineComponent({
 
 });
 
+function resolveRawVButtonIcon(raw, type = 'main') {
+  if (!raw) return;
+  return typeof raw === 'function' ? raw : () => createVNode(VIcon, {
+    "class": ['v-button__icon', `v-button__icon--${type}`],
+    "name": raw
+  }, null);
+}
+
+const vueButtonProps = createPropsOptions$1({ ...colorSchemeProps(),
+  ...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 = defineComponent({
+  name: 'VButton',
+  props: vueButtonProps,
+  emits: { ...navigationableEmits.emits
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const control = useControl(props);
+    const defaults = vui.setting('buttonDefault');
+    const icon = computed(() => {
+      const _icon = resolveRawVButtonIcon(props.icon);
+
+      return _icon && _icon();
+    });
+    const startIcon = computed(() => {
+      const _icon = resolveRawVButtonIcon(props.startIcon, 'start');
+
+      return _icon && _icon();
+    });
+    const endIcon = computed(() => {
+      const _icon = resolveRawVButtonIcon(props.endIcon, 'end');
+
+      return _icon && _icon();
+    });
+    const color = useColorClasses({
+      color: () => props.color || defaults.color,
+      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 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}`, {
+      '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({
+        "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"
+        }, [startIcon.value, children, icon.value, endIcon.value]), isLoading.value && createVNode(VProgressCircular, {
+          "class": "v-button__loading",
+          "indeterminate": true,
+          "size": LOADING_SIZE_MAP[control.size.value]
+        }, null)]
+      });
+    };
+  }
+
+});
+
+function createListTileProps() {
+  const icon = rawRawIconProp();
+  return createPropsOptions$1({ ...navigationableProps,
+    startIcon: icon,
+    endIcon: icon,
+    fallbackTag: {
+      type: String,
+      default: 'div'
+    }
+  });
+}
+const listTileEmits = { ...navigationableEmits.emits
+};
+const VListTile = defineComponent({
+  name: 'VListTile',
+  props: createListTileProps(),
+  emits: { ...listTileEmits
+  },
+
+  setup(props, ctx) {
+    const startIcon = computed(() => resolveRawIconProp(props.startIcon));
+    const endIcon = computed(() => resolveRawIconProp(props.endIcon));
+    const navigationable = useNavigationable(props, () => props.fallbackTag);
+    return () => {
+      const _startIcon = startIcon.value;
+      const _endIcon = endIcon.value;
+      const {
+        Tag,
+        attrs,
+        classes
+      } = navigationable.value;
+      return createVNode(Tag, mergeProps({
+        "class": ['v-list-tile', classes]
+      }, attrs), {
+        default: () => [_startIcon && createVNode("span", {
+          "class": "v-list-tile__icon v-list-tile__icon--start"
+        }, [_startIcon]), createVNode("span", {
+          "class": "v-list-tile__body"
+        }, [renderSlotOrEmpty$1(ctx.slots, 'default')]), _endIcon && createVNode("span", {
+          "class": "v-list-tile__icon v-list-tile__icon--end"
+        }, [_endIcon])]
+      });
+    };
+  }
+
+});
+
+const VAccordion = defineComponent({
+  name: 'VAccordion'
+});
+
+function _isSlot$6(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+function createNavigationItemProps() {
+  return { ...createListTileProps()
+  };
+}
+const VNavigationItem = defineComponent({
+  name: 'VNavigationItem',
+  props: createNavigationItemProps(),
+  emits: { ...listTileEmits
+  },
+
+  setup(props, ctx) {
+    const _props = computed(() => ({ ...props
+    }));
+
+    return () => {
+      let _slot;
+
+      return createVNode(VListTile, mergeProps(_props.value, {
+        "class": "v-navigation-item"
+      }), _isSlot$6(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+
+});
+
+function _isSlot$5(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const VNavigation = defineComponent({
+  name: 'VNavigation',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
+  },
+
+  setup(props, ctx) {
+    const items = computed(() => props.items);
+    const $items = computed(() => items.value.map(item => {
+      let label = item.label;
+      const _props = { ...item
+      };
+
+      if (typeof label === 'function') {
+        label = label();
+      }
+
+      delete _props.label;
+      return {
+        label,
+        props: _props
+      };
+    }));
+    return () => {
+      return createVNode("nav", {
+        "class": "v-navigation"
+      }, [$items.value.map(({
+        label,
+        props
+      }) => createVNode(VNavigationItem, mergeProps(props, {
+        "class": "v-navigation__item"
+      }), _isSlot$5(label) ? label : {
+        default: () => [label]
+      }))]);
+    };
+  }
+
+});
+
 const VCheckable = defineComponent({
   name: 'VCheckable',
   props: {
@@ -363,7 +725,7 @@ const VCheckbox = defineComponent({
 
 });
 
-function _isSlot$3(s) {
+function _isSlot$4(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -375,7 +737,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VCheckbox, attrs, _isSlot$3(slots) ? slots : {
+  }) => createVNode(VCheckbox, attrs, _isSlot$4(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -427,7 +789,7 @@ const VRadio = defineComponent({
 
 });
 
-function _isSlot$2(s) {
+function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -438,7 +800,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VRadio, attrs, _isSlot$2(slots) ? slots : {
+  }) => createVNode(VRadio, attrs, _isSlot$3(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -500,7 +862,7 @@ const VSwitch = defineComponent({
 
 });
 
-function _isSlot$1(s) {
+function _isSlot$2(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -512,7 +874,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VSwitch, attrs, _isSlot$1(slots) ? slots : {
+  }) => createVNode(VSwitch, attrs, _isSlot$2(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1055,7 +1417,7 @@ const VForm = defineComponent({
 
 });
 
-function _isSlot(s) {
+function _isSlot$1(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1067,7 +1429,93 @@ const VApp = defineComponent({
     return () => {
       let _slot;
 
-      return createVNode(VStackRoot, null, _isSlot(_slot = renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+      return createVNode(VStackRoot, null, _isSlot$1(_slot = renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+
+});
+
+const VToolbar = defineComponent({
+  name: 'VToolbar',
+  props: { ...createElevationProps(),
+    ...colorSchemeProps(),
+    dense: Boolean
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const elevation = useElevation(props, {
+      defaultValue: 4
+    });
+    const dense = computed(() => props.dense);
+    const color = useColorClasses({
+      color: () => props.color,
+      variant: () => props.variant || vui.setting('containedVariant')
+    });
+    const classes = computed(() => {
+      return [elevation.elevationClassName.value, color.colorClasses.value, {
+        'v-toolbar--plain': !color.color.value.value,
+        'v-toolbar--dense': dense.value
+      }];
+    });
+    return () => {
+      return createVNode("div", {
+        "class": ['v-toolbar', classes.value]
+      }, [renderSlotOrEmpty$1(ctx.slots, 'default')]);
+    };
+  }
+
+});
+
+const VToolbarMenu = defineComponent({
+  name: 'VToolbarMenu',
+  props: {
+    edge: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup(props, ctx) {
+    const edge = computed(() => props.edge);
+    return () => {
+      const children = renderSlotOrEmpty$1(ctx.slots, 'default');
+      const hasChildren = !!children && children.length > 0;
+      return createVNode("div", {
+        "class": ['v-toolbar-menu', `v-toolbar-menu--${edge.value}`, {
+          [`v-toolbar-menu--empty`]: !hasChildren
+        }]
+      }, [children]);
+    };
+  }
+
+});
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const VToolbarTitle = defineComponent({
+  name: 'VToolbarTitle',
+  props: {
+    tag: {
+      type: String,
+      default: 'span'
+    }
+  },
+
+  setup(props, ctx) {
+    const _TagName = computed(() => props.tag);
+
+    return () => {
+      let _slot;
+
+      const TagName = _TagName.value;
+      return createVNode(TagName, {
+        "class": "v-toolbar-title"
+      }, _isSlot(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       });
     };
@@ -1091,8 +1539,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];
@@ -1110,36 +1558,61 @@ 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 VueColorSchemePlugin(colorScheme);
-        app.use(vueColorSchemePlugin);
-        // Stack
-        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 VueColorSchemePlugin(colorScheme);
+    app.use(vueColorSchemePlugin); // Stack
+
+    installVueStackPlugin(app, {
+      actions: {
+        ok: ({
+          bindings
+        }) => createVNode(VButton, mergeProps(uiSettings.dialogOk, bindings), {
+          default: () => [createTextVNode("OK")]
+        }),
+        cancel: ({
+          bindings
+        }) => createVNode(VButton, mergeProps(uiSettings.dialogCancel, bindings), {
+          default: () => [createTextVNode("CANCEL")]
+        }),
+        close: ({
+          bindings
+        }) => createVNode(VButton, mergeProps(uiSettings.dialogClose, bindings), {
+          default: () => [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);
 }
 
-export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, VApp, VCheckbox, VCheckboxGroup, VForm, VIcon, VOption, VOptionGroup, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTextField, VTextarea, VuiInjectionKey, VuiPlugin, VuiService, createControlFieldProviderProps, createControlProps, defineFormSelectorComponent, installVuiPlugin, useControl, useControlField };
+export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, VAccordion, VApp, VButton, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VForm, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTextField, VTextarea, VToolbar, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, rawRawIconProp, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };