@varlet/ui 3.5.1 → 3.5.2

package/es/bottom-navigation/props.mjs

@@ -0,0 +1,26 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  active: {
+    type: [Number, String],
+    default: 0
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 1
+  },
+  fixed: Boolean,
+  border: Boolean,
+  variant: Boolean,
+  safeArea: Boolean,
+  activeColor: String,
+  inactiveColor: String,
+  placeholder: Boolean,
+  fabProps: Object,
+  onChange: defineListenerProp(),
+  onBeforeChange: defineListenerProp(),
+  onFabClick: defineListenerProp(),
+  "onUpdate:active": defineListenerProp()
+};
+export {
+  props
+};

package/es/bottom-navigation/provide.mjs

@@ -0,0 +1,18 @@
+import { useChildren } from "@varlet/use";
+const BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY = Symbol(
+  "BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY"
+);
+function useBottomNavigationItems() {
+  const { childProviders, length, bindChildren } = useChildren(
+    BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY
+  );
+  return {
+    length,
+    bottomNavigationItems: childProviders,
+    bindBottomNavigationItem: bindChildren
+  };
+}
+export {
+  BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY,
+  useBottomNavigationItems
+};

package/es/bottom-navigation/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../ripple/ripple.css'
+import '../../loading/loading.css'
+import '../../button/button.css'
+import '../bottomNavigation.css'
+import '../BottomNavigationSfc.css'

package/es/bottom-navigation-item/BottomNavigationItem.mjs

@@ -0,0 +1,139 @@
+import Ripple from "../ripple/index.mjs";
+import VarBadge from "../badge/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import { defineComponent, computed } from "vue";
+import { props } from "./props.mjs";
+import { useBottomNavigation } from "./provide.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { call } from "@varlet/shared";
+const { name, n, classes } = createNamespace("bottom-navigation-item");
+const defaultBadgeProps = {
+  type: "danger",
+  dot: true
+};
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, withCtx as _withCtx, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_badge = _resolveComponent("var-badge");
+  const _directive_ripple = _resolveDirective("ripple");
+  return _withDirectives((_openBlock(), _createElementBlock(
+    "button",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.variant, _ctx.n("--variant-padding")], [_ctx.isActive && !_ctx.variant, _ctx.n("--active")])),
+      style: _normalizeStyle({
+        color: _ctx.isActive ? _ctx.activeColor : _ctx.inactiveColor
+      }),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(
+            _ctx.classes(
+              _ctx.n("icon-container"),
+              [_ctx.variant, _ctx.n("--variant-icon-container")],
+              [_ctx.isActive && _ctx.variant, _ctx.n("--variant-active")]
+            )
+          )
+        },
+        [
+          _ctx.badge ? (_openBlock(), _createBlock(_component_var_badge, _mergeProps({ key: 0 }, _ctx.badgeProps, {
+            class: _ctx.n("badge"),
+            "var-bottom-navigation-item-cover": ""
+          }), {
+            default: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
+                _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+                  key: 0,
+                  name: _ctx.icon,
+                  namespace: _ctx.namespace,
+                  class: _normalizeClass(_ctx.n("icon")),
+                  "var-bottom-navigation-item-cover": ""
+                }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true)
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["class"])) : _renderSlot(_ctx.$slots, "icon", {
+            key: 1,
+            active: _ctx.isActive
+          }, () => [
+            _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+              key: 0,
+              name: _ctx.icon,
+              namespace: _ctx.namespace,
+              class: _normalizeClass(_ctx.n("icon")),
+              "var-bottom-navigation-item-cover": ""
+            }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true)
+          ])
+        ],
+        2
+        /* CLASS */
+      ),
+      _createElementVNode(
+        "span",
+        {
+          class: _normalizeClass(_ctx.n("label"))
+        },
+        [
+          _renderSlot(_ctx.$slots, "default", {}, () => [
+            _createTextVNode(
+              _toDisplayString(_ctx.label),
+              1
+              /* TEXT */
+            )
+          ])
+        ],
+        2
+        /* CLASS */
+      )
+    ],
+    6
+    /* CLASS, STYLE */
+  )), [
+    [_directive_ripple]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarBadge,
+    VarIcon
+  },
+  directives: { Ripple },
+  props,
+  setup(props2) {
+    const name2 = computed(() => props2.name);
+    const isActive = computed(() => [name2.value, index.value].includes(active.value));
+    const badgeProps = computed(() => props2.badge === true ? defaultBadgeProps : props2.badge);
+    const { index, bottomNavigation, bindBottomNavigation } = useBottomNavigation();
+    const { active, activeColor, inactiveColor, variant } = bottomNavigation;
+    const bottomNavigationItemProvider = {
+      name: name2,
+      index
+    };
+    bindBottomNavigation(bottomNavigationItemProvider);
+    function handleClick() {
+      var _a;
+      const active2 = (_a = name2.value) != null ? _a : index.value;
+      call(props2.onClick, active2);
+      call(bottomNavigation.onToggle, active2);
+    }
+    return {
+      activeColor,
+      inactiveColor,
+      badgeProps,
+      isActive,
+      variant,
+      n,
+      classes,
+      handleClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/bottom-navigation-item/bottomNavigationItem.css

@@ -0,0 +1 @@
+:root { --bottom-navigation-item-font-size: var(--font-size-sm); --bottom-navigation-item-inactive-color: #646566; --bottom-navigation-item-active-color: var(--color-primary); --bottom-navigation-item-active-background-color: var(--color-surface-container-high); --bottom-navigation-item-variant-active-background-color: var(--color-primary-container); --bottom-navigation-item-variant-active-color: var(--color-on-primary-container); --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px; --bottom-navigation-item-variant-icon-container-height: 30px; --bottom-navigation-item-variant-icon-container-border-radius: 100px; --bottom-navigation-item-variant-icon-container-max-width: 58px;}.var-bottom-navigation-item { height: 100%; padding-bottom: 2px; position: relative; display: inline-flex; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: center; line-height: var(--bottom-navigation-item-line-height); color: var(--bottom-navigation-item-inactive-color); cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; background-color: transparent; outline: 0; border: 0; transition: color 250ms, margin 250ms;}.var-bottom-navigation-item--variant-padding { padding-bottom: 6px;}.var-bottom-navigation-item--active { color: var(--bottom-navigation-item-active-color); background-color: var(--bottom-navigation-item-active-background-color); transition: background-color 250ms;}.var-bottom-navigation-item--active .var-bottom-navigation-item__label { font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);}.var-bottom-navigation-item--variant-icon-container { display: flex; justify-content: center; align-items: center; width: 0; height: var(--bottom-navigation-item-variant-icon-container-height); border-radius: var(--bottom-navigation-item-variant-icon-container-border-radius); max-width: var(--bottom-navigation-item-variant-icon-container-max-width);}.var-bottom-navigation-item--variant-active { color: var(--bottom-navigation-item-variant-active-color); background-color: var(--bottom-navigation-item-variant-active-background-color); width: 100%; transition: background-color 0.25s, width 0.5s;}.var-bottom-navigation-item--right-half-space { margin-right: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--left-half-space { margin-left: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--right-space { margin-right: calc(var(--bottom-navigation-height) + var(--bottom-navigation-fab-offset));}.var-bottom-navigation-item__icon[var-bottom-navigation-item-cover] { font-size: var(--bottom-navigation-item-icon-size);}.var-bottom-navigation-item__badge[var-bottom-navigation-item-cover] { margin-top: 6px; margin-right: -4px;}.var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-icon-margin-bottom); font-size: var(--bottom-navigation-item-font-size); transition: font-size 0.2s ease 0.1s; white-space: nowrap;}

package/es/bottom-navigation-item/index.mjs

@@ -0,0 +1,12 @@
+import BottomNavigationItem from "./BottomNavigationItem.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as bottomNavigationItemProps } from "./props.mjs";
+withInstall(BottomNavigationItem);
+withPropsDefaultsSetter(BottomNavigationItem, bottomNavigationItemProps);
+const _BottomNavigationItemComponent = BottomNavigationItem;
+var stdin_default = BottomNavigationItem;
+export {
+  _BottomNavigationItemComponent,
+  bottomNavigationItemProps,
+  stdin_default as default
+};

package/es/bottom-navigation-item/props.mjs

@@ -0,0 +1,16 @@
+import { iconProps } from "../icon/index.mjs";
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+const props = {
+  name: String,
+  label: String,
+  icon: pickProps(iconProps, "name"),
+  namespace: pickProps(iconProps, "namespace"),
+  badge: {
+    type: [Boolean, Object],
+    default: false
+  },
+  onClick: defineListenerProp()
+};
+export {
+  props
+};

package/es/bottom-navigation-item/provide.mjs

@@ -0,0 +1,21 @@
+import { useParent } from "@varlet/use";
+import { error } from "../utils/logger.mjs";
+import {
+  BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY
+} from "../bottom-navigation/provide.mjs";
+function useBottomNavigation() {
+  const { parentProvider, index, bindParent } = useParent(
+    BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY
+  );
+  if (!bindParent) {
+    error("BottomNavigationItem", "<var-bottom-navigation-item/> must in <var-bottom-navigation/>");
+  }
+  return {
+    index,
+    bottomNavigation: parentProvider,
+    bindBottomNavigation: bindParent
+  };
+}
+export {
+  useBottomNavigation
+};

package/es/bottom-navigation-item/style/index.mjs

@@ -0,0 +1,6 @@
+import '../../styles/common.css'
+import '../../ripple/ripple.css'
+import '../../badge/badge.css'
+import '../../icon/icon.css'
+import '../bottomNavigationItem.css'
+import '../BottomNavigationItemSfc.css'

package/es/breadcrumb/Breadcrumb.mjs

@@ -0,0 +1,74 @@
+import { defineComponent, computed } from "vue";
+import { props } from "./props.mjs";
+import { useBreadcrumb } from "./provide.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { call } from "@varlet/shared";
+const { name, n, classes } = createNamespace("breadcrumb");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n())
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.classes(_ctx.n("content"), [!_ctx.isLast, _ctx.n("--active")])),
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+        },
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      ),
+      !_ctx.isLast ? _renderSlot(_ctx.$slots, "separator", { key: 0 }, () => {
+        var _a;
+        return [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("separator")),
+              "aria-hidden": "true"
+            },
+            _toDisplayString((_a = _ctx.separator) != null ? _a : _ctx.parentSeparator),
+            3
+            /* TEXT, CLASS */
+          )
+        ];
+      }) : _createCommentVNode("v-if", true)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const { index, breadcrumb, bindBreadcrumb } = useBreadcrumb();
+    const isLast = computed(() => index.value === breadcrumb.length.value - 1);
+    const parentSeparator = computed(() => breadcrumb.separator.value);
+    bindBreadcrumb(null);
+    function handleClick(e) {
+      if (isLast.value) {
+        return;
+      }
+      call(props2.onClick, e);
+    }
+    return {
+      n,
+      classes,
+      isLast,
+      parentSeparator,
+      handleClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/breadcrumb/breadcrumb.css

@@ -0,0 +1 @@
+:root { --breadcrumb-active-color: var(--color-primary); --breadcrumb-inactive-color: #888; --breadcrumb-separator-margin: 0 10px; --breadcrumb-separator-font-size: 14px;}.var-breadcrumb { display: flex; align-items: center; color: var(--breadcrumb-inactive-color);}.var-breadcrumb__separator { margin: var(--breadcrumb-separator-margin); font-size: var(--breadcrumb-separator-font-size);}.var-breadcrumb--active { color: var(--breadcrumb-active-color); transition: opacity 0.25s;}.var-breadcrumb--active:hover { opacity: 0.7; cursor: pointer;}

package/es/breadcrumb/index.mjs

@@ -0,0 +1,12 @@
+import Breadcrumb from "./Breadcrumb.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as breadcrumbProps } from "./props.mjs";
+withInstall(Breadcrumb);
+withPropsDefaultsSetter(Breadcrumb, breadcrumbProps);
+const _BreadcrumbComponent = Breadcrumb;
+var stdin_default = Breadcrumb;
+export {
+  _BreadcrumbComponent,
+  breadcrumbProps,
+  stdin_default as default
+};

package/es/breadcrumb/props.mjs

@@ -0,0 +1,8 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  separator: String,
+  onClick: defineListenerProp()
+};
+export {
+  props
+};

package/es/breadcrumb/provide.mjs

@@ -0,0 +1,19 @@
+import { useParent } from "@varlet/use";
+import { error } from "../utils/logger.mjs";
+import { BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY } from "../breadcrumbs/provide.mjs";
+function useBreadcrumb() {
+  const { parentProvider, bindParent, index } = useParent(
+    BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY
+  );
+  if (!bindParent) {
+    error("Breadcrumb", "<var-breadcrumb/> must in <var-breadcrumbs/>");
+  }
+  return {
+    index,
+    breadcrumb: parentProvider,
+    bindBreadcrumb: bindParent
+  };
+}
+export {
+  useBreadcrumb
+};

package/es/breadcrumb/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../breadcrumb.css'
+import '../BreadcrumbSfc.css'

package/es/breadcrumbs/Breadcrumbs.mjs

@@ -0,0 +1,40 @@
+import { defineComponent, computed } from "vue";
+import { props } from "./props.mjs";
+import { useBreadcrumbsList } from "./provide.mjs";
+import { createNamespace } from "../utils/components.mjs";
+const { name, n } = createNamespace("breadcrumbs");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n()),
+      role: "navigation",
+      "aria-label": "Breadcrumbs"
+    },
+    [
+      _renderSlot(_ctx.$slots, "default")
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const separator = computed(() => props2.separator);
+    const { bindBreadcrumbList, length } = useBreadcrumbsList();
+    const breadcrumbsProvider = {
+      length,
+      separator
+    };
+    bindBreadcrumbList(breadcrumbsProvider);
+    return { n };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/breadcrumbs/breadcrumbs.css

@@ -0,0 +1 @@
+.var-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center;}

package/es/breadcrumbs/index.mjs

@@ -0,0 +1,12 @@
+import Breadcrumbs from "./Breadcrumbs.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as breadcrumbsProps } from "./props.mjs";
+withInstall(Breadcrumbs);
+withPropsDefaultsSetter(Breadcrumbs, breadcrumbsProps);
+const _BreadcrumbsComponent = Breadcrumbs;
+var stdin_default = Breadcrumbs;
+export {
+  _BreadcrumbsComponent,
+  breadcrumbsProps,
+  stdin_default as default
+};

package/es/breadcrumbs/props.mjs

@@ -0,0 +1,9 @@
+const props = {
+  separator: {
+    type: String,
+    default: "/"
+  }
+};
+export {
+  props
+};

package/es/breadcrumbs/provide.mjs

@@ -0,0 +1,16 @@
+import { useChildren } from "@varlet/use";
+const BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY = Symbol("BREADCRUMBS_BIND_BREADCRUMB_KEY");
+function useBreadcrumbsList() {
+  const { childProviders, bindChildren, length } = useChildren(
+    BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY
+  );
+  return {
+    length,
+    breadcrumbList: childProviders,
+    bindBreadcrumbList: bindChildren
+  };
+}
+export {
+  BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY,
+  useBreadcrumbsList
+};

package/es/breadcrumbs/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../breadcrumbs.css'
+import '../BreadcrumbsSfc.css'

package/es/button/Button.mjs

@@ -0,0 +1,164 @@
+import Ripple from "../ripple/index.mjs";
+import VarLoading from "../loading/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
+import Hover from "../hover/index.mjs";
+import { computed, defineComponent, ref } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace, formatElevation } from "../utils/components.mjs";
+import { useButtonGroup } from "./provide.mjs";
+import { call, normalizeToArray } from "@varlet/shared";
+const { name, n, classes } = createNamespace("button");
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+const _hoisted_1 = ["tabindex", "type", "disabled"];
+function __render__(_ctx, _cache) {
+  const _component_var_loading = _resolveComponent("var-loading");
+  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+  const _directive_ripple = _resolveDirective("ripple");
+  const _directive_hover = _resolveDirective("hover");
+  return _withDirectives((_openBlock(), _createElementBlock("button", {
+    class: _normalizeClass(
+      _ctx.classes(
+        _ctx.n(),
+        _ctx.n("$--box"),
+        _ctx.n(`--${_ctx.states.size}`),
+        [_ctx.block, `${_ctx.n("$--flex")} ${_ctx.n("--block")}`, _ctx.n("$--inline-flex")],
+        [!_ctx.states.text, _ctx.states.elevation],
+        [!_ctx.states.iconContainer && !_ctx.states.text, _ctx.n(`--${_ctx.states.type}`)],
+        [_ctx.states.text, `${_ctx.n("--text")} ${_ctx.n(`--text-${_ctx.states.type}`)}`],
+        [_ctx.states.iconContainer, _ctx.n(`--icon-container-${_ctx.states.type}`)],
+        [_ctx.round, _ctx.n("--round")],
+        [_ctx.states.outline, _ctx.n("--outline")],
+        [_ctx.loading || _ctx.pending, _ctx.n("--loading")],
+        [_ctx.disabled, _ctx.n("--disabled")],
+        [_ctx.states.text && _ctx.disabled, _ctx.n("--text-disabled")]
+      )
+    ),
+    tabindex: _ctx.focusable ? void 0 : "-1",
+    style: _normalizeStyle({
+      color: _ctx.states.textColor,
+      background: _ctx.states.color
+    }),
+    type: _ctx.nativeType,
+    disabled: _ctx.disabled,
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
+    onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+    onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = false)
+  }, [
+    _ctx.loading || _ctx.pending ? (_openBlock(), _createBlock(_component_var_loading, {
+      key: 0,
+      class: _normalizeClass(_ctx.n("loading")),
+      "var-button-cover": "",
+      color: _ctx.loadingColor,
+      type: _ctx.loadingType,
+      size: _ctx.loadingSize || _ctx.states.size,
+      radius: _ctx.loadingRadius
+    }, null, 8, ["class", "color", "type", "size", "radius"])) : _createCommentVNode("v-if", true),
+    _createElementVNode(
+      "div",
+      {
+        class: _normalizeClass(_ctx.classes(_ctx.n("content"), [_ctx.loading || _ctx.pending, _ctx.n("--hidden")]))
+      },
+      [
+        _renderSlot(_ctx.$slots, "default")
+      ],
+      2
+      /* CLASS */
+    ),
+    _createVNode(_component_var_hover_overlay, {
+      hovering: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.hovering,
+      focusing: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.isFocusing
+    }, null, 8, ["hovering", "focusing"])
+  ], 46, _hoisted_1)), [
+    [_directive_ripple, { disabled: _ctx.disabled || !_ctx.ripple || _ctx.loading || _ctx.pending }],
+    [_directive_hover, _ctx.handleHovering, "desktop"]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarLoading,
+    VarHoverOverlay
+  },
+  directives: { Ripple, Hover },
+  props,
+  setup(props2) {
+    const isFocusing = ref(false);
+    const pending = ref(false);
+    const { buttonGroup } = useButtonGroup();
+    const { hovering, handleHovering } = useHoverOverlay();
+    const states = computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      if (!buttonGroup) {
+        return {
+          elevation: formatElevation(props2.elevation, 2),
+          type: (_a = props2.type) != null ? _a : "default",
+          size: (_b = props2.size) != null ? _b : "normal",
+          color: props2.color,
+          text: props2.text,
+          textColor: props2.textColor,
+          outline: props2.outline,
+          iconContainer: props2.iconContainer
+        };
+      }
+      const { type, size, color, textColor, mode } = buttonGroup;
+      return {
+        elevation: "",
+        type: (_c = props2.type) != null ? _c : type.value,
+        size: (_d = props2.size) != null ? _d : size.value,
+        color: (_e = props2.color) != null ? _e : color.value,
+        textColor: (_f = props2.textColor) != null ? _f : textColor.value,
+        text: mode.value === "text" || mode.value === "outline",
+        outline: mode.value === "outline",
+        iconContainer: mode.value === "icon-container"
+      };
+    });
+    function attemptAutoLoading(result) {
+      if (props2.autoLoading) {
+        pending.value = true;
+        Promise.all(normalizeToArray(result)).then(() => {
+          pending.value = false;
+        }).catch(() => {
+          pending.value = false;
+        });
+      }
+    }
+    function handleClick(e) {
+      const { loading, disabled, onClick } = props2;
+      if (!onClick || loading || disabled || pending.value) {
+        return;
+      }
+      attemptAutoLoading(call(onClick, e));
+    }
+    function handleTouchstart(e) {
+      const { loading, disabled, onTouchstart } = props2;
+      if (!onTouchstart || loading || disabled || pending.value) {
+        return;
+      }
+      attemptAutoLoading(call(onTouchstart, e));
+    }
+    function handleFocus() {
+      if (!props2.focusable) {
+        return;
+      }
+      isFocusing.value = true;
+    }
+    return {
+      pending,
+      states,
+      hovering,
+      isFocusing,
+      n,
+      classes,
+      handleHovering,
+      handleClick,
+      handleTouchstart,
+      handleFocus
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/button/button.css

@@ -0,0 +1 @@
+:root { --button-default-text-color: #555; --button-primary-text-color: var(--color-on-primary); --button-danger-text-color: var(--color-on-danger); --button-success-text-color: var(--color-on-success); --button-warning-text-color: var(--color-on-warning); --button-info-text-color: var(--color-on-info); --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-default-icon-color: #555; --button-primary-icon-color: var(--color-on-primary-container); --button-danger-icon-color: var(--color-on-danger-container); --button-success-icon-color: var(--color-on-success-container); --button-warning-icon-color: var(--color-on-warning-container); --button-info-icon-color: var(--color-on-info-container); --button-default-icon-container-color: #f5f5f5; --button-primary-icon-container-color: var(--color-primary-container); --button-danger-icon-container-color: var(--color-danger-container); --button-success-icon-container-color: var(--color-success-container); --button-warning-icon-container-color: var(--color-warning-container); --button-info-icon-container-color: var(--color-info-container); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 8px; --button-small-padding: 0 12px; --button-normal-padding: 0 16px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s, border-radius 0.2s; will-change: box-shadow; -webkit-tap-highlight-color: transparent; white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: var(--button-default-text-color); background-color: var(--button-default-color);}.var-button--primary { color: var(--button-primary-text-color); background-color: var(--button-primary-color);}.var-button--info { color: var(--button-info-text-color); background-color: var(--button-info-color);}.var-button--success { color: var(--button-success-text-color); background-color: var(--button-success-color);}.var-button--warning { color: var(--button-warning-text-color); background-color: var(--button-warning-color);}.var-button--danger { color: var(--button-danger-text-color); background-color: var(--button-danger-color);}.var-button--loading { cursor: default;}.var-button--block { width: 100%;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--icon-container-default { color: var(--button-default-icon-color); background-color: var(--button-default-icon-container-color);}.var-button--icon-container-primary { color: var(--button-primary-icon-color); background-color: var(--button-primary-icon-container-color);}.var-button--icon-container-info { color: var(--button-info-icon-color); background-color: var(--button-info-icon-container-color);}.var-button--icon-container-success { color: var(--button-success-icon-color); background-color: var(--button-success-icon-container-color);}.var-button--icon-container-warning { color: var(--button-warning-icon-color); background-color: var(--button-warning-icon-container-color);}.var-button--icon-container-danger { color: var(--button-danger-icon-color); background-color: var(--button-danger-icon-container-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}