@varlet/ui 2.20.1 → 2.20.2

package/es/bottom-navigation/props.mjs

@@ -0,0 +1,24 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  active: {
+    type: [Number, String],
+    default: 0
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 1
+  },
+  fixed: Boolean,
+  border: Boolean,
+  safeArea: Boolean,
+  activeColor: String,
+  inactiveColor: String,
+  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,125 @@
+import Ripple from "../ripple/index.mjs";
+import VarBadge from "../badge/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import { defineComponent, computed, ref, watch } 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 { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, mergeProps as _mergeProps, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, Fragment as _Fragment, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, 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.active === _ctx.index || _ctx.active === _ctx.name, _ctx.n("--active")])),
+      style: _normalizeStyle({
+        color: _ctx.computeColorStyle()
+      }),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    },
+    [
+      _ctx.icon && !_ctx.$slots.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),
+      _renderSlot(_ctx.$slots, "icon", {
+        active: _ctx.active === _ctx.index || _ctx.active === _ctx.name
+      }),
+      _ctx.badge ? (_openBlock(), _createBlock(_component_var_badge, _mergeProps({ key: 1 }, _ctx.badgeProps, {
+        class: _ctx.n("badge"),
+        "var-bottom-navigation-item-cover": ""
+      }), null, 16, ["class"])) : _createCommentVNode("v-if", true),
+      _createElementVNode(
+        "span",
+        {
+          class: _normalizeClass(_ctx.n("label"))
+        },
+        [
+          !_ctx.$slots.default ? (_openBlock(), _createElementBlock(
+            _Fragment,
+            { key: 0 },
+            [
+              _createTextVNode(
+                _toDisplayString(_ctx.label),
+                1
+                /* TEXT */
+              )
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : _createCommentVNode("v-if", true),
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        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 badge = computed(() => props2.badge);
+    const badgeProps = ref({});
+    const { index, bottomNavigation, bindBottomNavigation } = useBottomNavigation();
+    const { active, activeColor, inactiveColor } = bottomNavigation;
+    const bottomNavigationItemProvider = {
+      name: name2,
+      index
+    };
+    bindBottomNavigation(bottomNavigationItemProvider);
+    watch(
+      () => badge.value,
+      (newValue) => {
+        badgeProps.value = newValue === true ? defaultBadgeProps : badge.value;
+      },
+      { immediate: true }
+    );
+    function computeColorStyle() {
+      return active.value === name2.value || active.value === index.value ? activeColor.value : inactiveColor.value;
+    }
+    function handleClick() {
+      var _a;
+      const active2 = (_a = name2.value) != null ? _a : index.value;
+      call(props2.onClick, active2);
+      call(bottomNavigation.onToggle, active2);
+    }
+    return {
+      index,
+      active,
+      badge,
+      badgeProps,
+      n,
+      classes,
+      computeColorStyle,
+      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: #fff; --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px;}.var-bottom-navigation-item { height: 100%; padding: 6px 12px 8px; 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--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--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] { position: absolute; left: 4px; transform: translateY(-22px);}.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,73 @@
+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"))
+            },
+            _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,38 @@
+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())
+    },
+    [
+      _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,147 @@
+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 { isArray, call } 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, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = ["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.disabled, _ctx.n("--disabled")],
+        [_ctx.states.text, `${_ctx.n(`--text-${_ctx.states.type}`)} ${_ctx.n("--text")}`, `${_ctx.n(`--${_ctx.states.type}`)} ${_ctx.states.elevation}`],
+        [_ctx.states.text && _ctx.disabled, _ctx.n("--text-disabled")],
+        [_ctx.round, _ctx.n("--round")],
+        [_ctx.states.outline, _ctx.n("--outline")],
+        [_ctx.loading || _ctx.pending, _ctx.n("--loading")]
+      )
+    ),
+    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))
+  }, [
+    _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,
+      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
+    }, null, 8, ["hovering"])
+  ], 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 pending = ref(false);
+    const { buttonGroup } = useButtonGroup();
+    const { hovering, handleHovering } = useHoverOverlay();
+    const states = computed(() => {
+      if (!buttonGroup) {
+        return {
+          elevation: formatElevation(props2.elevation, 2),
+          type: props2.type != null ? props2.type : "default",
+          size: props2.size != null ? props2.size : "normal",
+          color: props2.color,
+          text: props2.text,
+          textColor: props2.textColor,
+          outline: props2.outline
+        };
+      }
+      const { type, size, color, textColor, mode } = buttonGroup;
+      return {
+        elevation: "",
+        type: props2.type != null ? props2.type : type.value,
+        size: props2.size != null ? props2.size : size.value,
+        color: props2.color != null ? props2.color : color.value,
+        textColor: props2.textColor != null ? props2.textColor : textColor.value,
+        text: mode.value !== "normal",
+        outline: mode.value === "outline"
+      };
+    });
+    function attemptAutoLoading(result) {
+      if (props2.autoLoading) {
+        pending.value = true;
+        result = isArray(result) ? result : [result];
+        Promise.all(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));
+    }
+    return {
+      pending,
+      states,
+      hovering,
+      n,
+      classes,
+      handleHovering,
+      handleClick,
+      handleTouchstart
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/button/button.css

@@ -0,0 +1 @@
+:root { --button-default-color: #f5f5f5; --button-default-text-color: #555; --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-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --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; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 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: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--loading { cursor: default;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.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--text-disabled { color: var(--button-disabled-text-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;}

package/es/button/index.mjs

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