@varlet/ui 3.5.1 → 3.5.2

package/es/swipe-item/SwipeItem.mjs

@@ -0,0 +1,56 @@
+import { computed, defineComponent, ref } from "vue";
+import { useSwipe } from "./provide.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+const { name, n } = createNamespace("swipe-item");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["aria-hidden"];
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n()),
+    style: _normalizeStyle({
+      width: !_ctx.vertical ? _ctx.toSizeUnit(_ctx.size) : void 0,
+      height: _ctx.vertical ? _ctx.toSizeUnit(_ctx.size) : void 0,
+      transform: `translate${_ctx.vertical ? "Y" : "X"}(${_ctx.toSizeUnit(_ctx.translate)})`
+    }),
+    tabindex: "-1",
+    "aria-hidden": _ctx.currentIndex !== _ctx.index,
+    onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
+  }, [
+    _renderSlot(_ctx.$slots, "default")
+  ], 46, _hoisted_1);
+}
+const __sfc__ = defineComponent({
+  name,
+  setup() {
+    const translate = ref(0);
+    const isFocusing = ref(false);
+    const { swipe, bindSwipe, index } = useSwipe();
+    const { size, currentIndex, vertical } = swipe;
+    const swipeItemProvider = {
+      index,
+      isFocusing: computed(() => isFocusing.value),
+      setTranslate
+    };
+    bindSwipe(swipeItemProvider);
+    function setTranslate(x) {
+      translate.value = x;
+    }
+    return {
+      isFocusing,
+      size,
+      index,
+      currentIndex,
+      vertical,
+      translate,
+      n,
+      toSizeUnit
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/swipe-item/index.mjs

@@ -0,0 +1,9 @@
+import SwipeItem from "./SwipeItem.mjs";
+import { withInstall } from "../utils/components.mjs";
+withInstall(SwipeItem);
+const _SwipeItemComponent = SwipeItem;
+var stdin_default = SwipeItem;
+export {
+  _SwipeItemComponent,
+  stdin_default as default
+};

package/es/swipe-item/provide.mjs

@@ -0,0 +1,17 @@
+import { useParent } from "@varlet/use";
+import { error } from "../utils/logger.mjs";
+import { SWIPE_BIND_SWIPE_ITEM_KEY } from "../swipe/provide.mjs";
+function useSwipe() {
+  const { bindParent, index, parentProvider } = useParent(SWIPE_BIND_SWIPE_ITEM_KEY);
+  if (!bindParent) {
+    error("SwipeItem", "<var-swipe-item/> must in <var-swipe/>");
+  }
+  return {
+    index,
+    swipe: parentProvider,
+    bindSwipe: bindParent
+  };
+}
+export {
+  useSwipe
+};

package/es/swipe-item/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../swipeItem.css'
+import '../SwipeItemSfc.css'

package/es/swipe-item/swipeItem.css

@@ -0,0 +1 @@
+.var-swipe-item { flex-shrink: 0; width: 100%; height: 100%;}.var-swipe-item:focus { outline: none;}

package/es/switch/Switch.mjs

@@ -0,0 +1,263 @@
+import VarFormDetails from "../form-details/index.mjs";
+import Ripple from "../ripple/index.mjs";
+import Hover from "../hover/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
+import { defineComponent, computed, nextTick, ref } from "vue";
+import { useValidation, createNamespace, formatElevation } from "../utils/components.mjs";
+import { multiplySizeUnit } from "../utils/elements.mjs";
+import { useForm } from "../form/provide.mjs";
+import { props } from "./props.mjs";
+import { call, preventDefault } from "@varlet/shared";
+import { useEventListener } from "@varlet/use";
+const { name, n, classes } = createNamespace("switch");
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
+const _hoisted_1 = ["aria-checked"];
+const _hoisted_2 = ["tabindex"];
+function __render__(_ctx, _cache) {
+  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  const _directive_ripple = _resolveDirective("ripple");
+  const _directive_hover = _resolveDirective("hover");
+  return _withDirectives((_openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.variant, _ctx.n("--variant")])),
+    role: "switch",
+    "aria-checked": _ctx.modelValue
+  }, [
+    _createElementVNode(
+      "div",
+      {
+        ref: "switchRef",
+        class: _normalizeClass(_ctx.classes(_ctx.n("block"), [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")], [_ctx.isActive, _ctx.n("block--active")])),
+        style: _normalizeStyle(_ctx.styleComputed.switch),
+        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.switchActive && _ctx.switchActive(...args))
+      },
+      [
+        _createElementVNode(
+          "div",
+          {
+            style: _normalizeStyle(_ctx.styleComputed.track),
+            class: _normalizeClass(_ctx.classes(_ctx.n("track"), [_ctx.isActive, _ctx.n("track--active")], [_ctx.errorMessage && !_ctx.variant, _ctx.n("track--error")]))
+          },
+          null,
+          6
+          /* CLASS, STYLE */
+        ),
+        _withDirectives((_openBlock(), _createElementBlock("div", {
+          class: _normalizeClass(_ctx.classes(_ctx.n("ripple"), [_ctx.isActive, _ctx.n("ripple--active")])),
+          style: _normalizeStyle(_ctx.styleComputed.ripple),
+          tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
+          onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+          onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
+        }, [
+          _createElementVNode(
+            "div",
+            {
+              style: _normalizeStyle(_ctx.styleComputed.handle),
+              class: _normalizeClass(
+                _ctx.classes(
+                  _ctx.n("handle"),
+                  _ctx.formatElevation(_ctx.buttonElevation, 2),
+                  [_ctx.isActive, _ctx.n("handle--active")],
+                  [_ctx.errorMessage && !_ctx.variant, _ctx.n("handle--error")],
+                  [_ctx.hovering, _ctx.n("handle--hover")]
+                )
+              )
+            },
+            [
+              _ctx.loading ? (_openBlock(), _createElementBlock(
+                "span",
+                {
+                  key: 0,
+                  class: _normalizeClass(_ctx.n("loading")),
+                  style: _normalizeStyle({
+                    width: _ctx.radius,
+                    height: _ctx.radius
+                  })
+                },
+                _cache[3] || (_cache[3] = [
+                  _createElementVNode(
+                    "svg",
+                    { viewBox: "25 25 50 50" },
+                    [
+                      _createElementVNode("circle", {
+                        cx: "50",
+                        cy: "50",
+                        r: "20",
+                        fill: "none"
+                      })
+                    ],
+                    -1
+                    /* HOISTED */
+                  )
+                ]),
+                6
+                /* CLASS, STYLE */
+              )) : _createCommentVNode("v-if", true)
+            ],
+            6
+            /* CLASS, STYLE */
+          ),
+          _createVNode(_component_var_hover_overlay, {
+            hovering: _ctx.hovering && !_ctx.disabled && !_ctx.formDisabled,
+            focusing: _ctx.isFocusing && !_ctx.disabled && !_ctx.formDisabled
+          }, null, 8, ["hovering", "focusing"])
+        ], 46, _hoisted_2)), [
+          [_directive_ripple, {
+            disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly
+          }]
+        ])
+      ],
+      6
+      /* CLASS, STYLE */
+    ),
+    _createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
+  ], 10, _hoisted_1)), [
+    [_directive_hover, _ctx.hover, "desktop"]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarFormDetails,
+    VarHoverOverlay
+  },
+  directives: { Ripple, Hover },
+  props,
+  setup(props2) {
+    const switchRef = ref(null);
+    const isFocusing = ref(false);
+    const { bindForm, form } = useForm();
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
+    const { hovering, handleHovering } = useHoverOverlay();
+    const isActive = computed(() => props2.modelValue === props2.activeValue);
+    const styleComputed = computed(() => {
+      const { size, color, closeColor, loadingColor, variant } = props2;
+      return {
+        handle: {
+          width: multiplySizeUnit(size),
+          height: multiplySizeUnit(size),
+          backgroundColor: isActive.value ? color : closeColor,
+          color: loadingColor
+        },
+        ripple: {
+          left: isActive.value ? multiplySizeUnit(size, 0.5) : `-${multiplySizeUnit(size, variant ? 1 / 3 : 0.5)}`,
+          color: isActive.value ? color : closeColor || "currentColor",
+          width: multiplySizeUnit(size, 2),
+          height: multiplySizeUnit(size, 2)
+        },
+        track: {
+          width: multiplySizeUnit(size, variant ? 13 / 6 : 1.9),
+          height: multiplySizeUnit(size, variant ? 4 / 3 : 0.72),
+          borderRadius: multiplySizeUnit(size, 2 / 3),
+          filter: isActive.value || (errorMessage == null ? void 0 : errorMessage.value) ? void 0 : `brightness(${variant ? 1 : 0.6})`,
+          backgroundColor: isActive.value ? color : closeColor,
+          borderWidth: variant && !isActive.value ? multiplySizeUnit(size, 1 / 12) : void 0
+        },
+        switch: {
+          width: multiplySizeUnit(size, variant ? 13 / 6 : 2),
+          height: multiplySizeUnit(size, variant ? 4 / 3 : 1.2)
+        }
+      };
+    });
+    const radius = computed(() => multiplySizeUnit(props2.size, 0.8));
+    const switchProvider = {
+      reset,
+      validate,
+      resetValidation
+    };
+    call(bindForm, switchProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " " || event.key === "Enter") {
+        preventDefault(event);
+      }
+      if (event.key === "Enter") {
+        switchRef.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value || event.key !== " ") {
+        return;
+      }
+      preventDefault(event);
+      switchRef.value.click();
+    }
+    function validate() {
+      return v(props2.rules, props2.modelValue);
+    }
+    function validateWithTrigger(trigger) {
+      nextTick(() => {
+        const { validateTrigger, rules, modelValue } = props2;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    }
+    function switchActive(event) {
+      const {
+        onClick,
+        onChange,
+        disabled,
+        loading,
+        readonly,
+        activeValue,
+        inactiveValue,
+        lazyChange,
+        "onUpdate:modelValue": updateModelValue,
+        onBeforeChange
+      } = props2;
+      if (disabled || (form == null ? void 0 : form.disabled.value)) {
+        return;
+      }
+      call(onClick, event);
+      if (loading || readonly || (form == null ? void 0 : form.readonly.value)) {
+        return;
+      }
+      const newValue = isActive.value ? inactiveValue : activeValue;
+      if (lazyChange) {
+        call(onBeforeChange, newValue, (value) => {
+          call(updateModelValue, value);
+          validateWithTrigger("onLazyChange");
+        });
+      } else {
+        call(onChange, newValue);
+        call(updateModelValue, newValue);
+        validateWithTrigger("onChange");
+      }
+    }
+    function hover(value) {
+      if (props2.disabled || (form == null ? void 0 : form.disabled.value)) {
+        return;
+      }
+      handleHovering(value);
+    }
+    function reset() {
+      call(props2["onUpdate:modelValue"], props2.inactiveValue);
+      resetValidation();
+    }
+    return {
+      isActive,
+      switchRef,
+      hovering,
+      isFocusing,
+      radius,
+      styleComputed,
+      errorMessage,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      n,
+      classes,
+      formatElevation,
+      multiplySizeUnit,
+      switchActive,
+      hover
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/switch/index.mjs

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

package/es/switch/props.mjs

@@ -0,0 +1,41 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  modelValue: {
+    default: false
+  },
+  activeValue: {
+    default: true
+  },
+  inactiveValue: {
+    default: false
+  },
+  lazyChange: Boolean,
+  disabled: Boolean,
+  readonly: Boolean,
+  loading: Boolean,
+  color: String,
+  loadingColor: String,
+  closeColor: String,
+  size: [String, Number],
+  variant: Boolean,
+  rules: [Array, Function, Object],
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  buttonElevation: {
+    type: [Boolean, String, Number],
+    default: true
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onChange", "onLazyChange"]
+  },
+  onClick: defineListenerProp(),
+  onBeforeChange: defineListenerProp(),
+  onChange: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+};
+export {
+  props
+};

package/es/switch/style/index.mjs

@@ -0,0 +1,8 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../ripple/ripple.css'
+import '../../loading/loading.css'
+import '../../form-details/formDetails.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../switch.css'
+import '../SwitchSfc.css'

package/es/switch/switch.css

@@ -0,0 +1 @@
+:root { --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-handle-background: var(--color-on-primary); --switch-handle-color: var(--color-primary); --switch-handle-active-color: var(--color-on-primary); --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger); --switch-disabled-opacity: var(--opacity-disabled); --switch-variant-width: 52px; --switch-variant-height: 32px; --switch-variant-track-border-color: #888; --switch-variant-track-background: var(--color-surface-container-highest); --switch-variant-handle-width: 24px; --switch-variant-handle-height: 24px; --switch-variant-handle-color: var(--color-on-primary); --switch-variant-handle-active-color: var(--color-primary); --switch-variant-handle-background: #888; --switch-variant-handle-active-background: var(--color-on-primary);}.var-switch { display: inline-block;}.var-switch__block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: transparent; align-items: center; justify-content: center; height: 24px; width: 40px; transition: filter 0.25s;}.var-switch--disabled { filter: opacity(var(--switch-disabled-opacity)); cursor: not-allowed;}.var-switch__track { background-color: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(var(--switch-disabled-opacity)); height: 14.4px; width: 38px; border-radius: calc(20px * 2 / 3);}.var-switch__track--active { background-color: var(--switch-track-active-background);}.var-switch__track--error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; outline: none; transition: 0.3s var(--cubic-bezier); width: 40px; height: 40px; left: -10px;}.var-switch__ripple--active { left: 10px;}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s; width: 20px; height: 20px; outline: none;}.var-switch__handle--active { background-color: var(--switch-handle-active-background); color: var(--switch-handle-active-color);}.var-switch__handle--error { background-color: var(--switch-handle-error-background) !important;}.var-switch--variant .var-switch__block { width: var(--switch-variant-width); height: var(--switch-variant-height);}.var-switch--variant .var-switch__block:active .var-switch__handle { transform: scale(1.16666667);}.var-switch--variant .var-switch__track { width: 100%; height: 100%; border-radius: calc(var(--switch-variant-height) / 2); background-color: var(--switch-variant-track-background); border: 2px solid var(--switch-variant-track-border-color); filter: none;}.var-switch--variant .var-switch__track--active { background-color: var(--switch-track-active-background); border: none;}.var-switch--variant .var-switch__ripple { left: -4px;}.var-switch--variant .var-switch__ripple--active { left: 16px;}.var-switch--variant .var-switch__handle { width: var(--switch-variant-handle-width); height: var(--switch-variant-handle-height); color: var(--switch-variant-handle-color); transform: scale(0.66666667); background-color: var(--switch-variant-handle-background); transition: transform 0.2s;}.var-switch--variant .var-switch__handle--active { color: var(--switch-variant-handle-active-color); background-color: var(--switch-variant-handle-active-background); transform: none;}.var-switch--variant .var-switch--disabled:active .var-switch__handle { transform: none;}.var-switch__loading { display: inline-block; width: 16px; height: 16px; animation: circle 1.8s linear infinite;}.var-switch__loading svg { display: block; width: 100%; height: 100%;}.var-switch__loading svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}

package/es/tab/Tab.mjs

@@ -0,0 +1,87 @@
+import Ripple from "../ripple/index.mjs";
+import { defineComponent, ref, computed, watch } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { useTabs } from "./provide.mjs";
+import { call } from "@varlet/shared";
+const { name, n, classes } = createNamespace("tab");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+function __render__(_ctx, _cache) {
+  const _directive_ripple = _resolveDirective("ripple");
+  return _withDirectives((_openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.computeColorClass(), _ctx.n(`--${_ctx.itemDirection}`))),
+      ref: "tabEl",
+      style: _normalizeStyle({
+        color: _ctx.computeColorStyle()
+      }),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    },
+    [
+      _renderSlot(_ctx.$slots, "default")
+    ],
+    6
+    /* CLASS, STYLE */
+  )), [
+    [_directive_ripple, { disabled: _ctx.disabled || !_ctx.ripple }]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Ripple },
+  props,
+  setup(props2) {
+    const tabEl = ref(null);
+    const element = computed(() => tabEl.value);
+    const name2 = computed(() => props2.name);
+    const disabled = computed(() => props2.disabled);
+    const { index, tabs, bindTabs } = useTabs();
+    const { onTabClick, active, activeColor, inactiveColor, disabledColor, itemDirection, resize } = tabs;
+    const tabProvider = {
+      name: name2,
+      index,
+      disabled,
+      element
+    };
+    bindTabs(tabProvider);
+    watch(() => [props2.name, props2.disabled], resize);
+    function shouldActive() {
+      if (props2.name != null) {
+        return active.value === props2.name;
+      }
+      return active.value === (index == null ? void 0 : index.value);
+    }
+    function computeColorStyle() {
+      return props2.disabled ? disabledColor.value : shouldActive() ? activeColor.value : inactiveColor.value;
+    }
+    function computeColorClass() {
+      return props2.disabled ? n("$-tab--disabled") : shouldActive() ? n("$-tab--active") : n("$-tab--inactive");
+    }
+    function handleClick(event) {
+      const { disabled: disabled2, name: name3, onClick } = props2;
+      if (disabled2) {
+        return;
+      }
+      call(onClick, name3 != null ? name3 : index.value, event);
+      onTabClick(tabProvider);
+    }
+    return {
+      tabEl,
+      active,
+      activeColor,
+      inactiveColor,
+      itemDirection,
+      n,
+      classes,
+      computeColorStyle,
+      computeColorClass,
+      handleClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/tab/index.mjs

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

package/es/tab/props.mjs

@@ -0,0 +1,13 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  name: [String, Number],
+  disabled: Boolean,
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  onClick: defineListenerProp()
+};
+export {
+  props
+};

package/es/tab/provide.mjs

@@ -0,0 +1,17 @@
+import { useParent } from "@varlet/use";
+import { error } from "../utils/logger.mjs";
+import { TABS_BIND_TAB_KEY } from "../tabs/provide.mjs";
+function useTabs() {
+  const { parentProvider, bindParent, index } = useParent(TABS_BIND_TAB_KEY);
+  if (!bindParent) {
+    error("Tab", "<var-tab/> must in <var-tabs/>");
+  }
+  return {
+    index,
+    tabs: parentProvider,
+    bindTabs: bindParent
+  };
+}
+export {
+  useTabs
+};

package/es/tab/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../ripple/ripple.css'
+import '../tab.css'
+import '../TabSfc.css'

package/es/tab/tab.css

@@ -0,0 +1 @@
+:root { --tab-padding: 12px; --tab-active-color: var(--color-primary); --tab-inactive-color: #646566; --tab-disabled-color: var(--color-text-disabled); --tab-font-size: var(--font-size-md); --tab-font-weight: 400; --tab-active-font-size: var(--font-size-md); --tab-active-font-weight: 400;}.var-tab { display: flex; justify-content: center; align-items: center; flex: 1 0 auto; padding: 0 var(--tab-padding); font-size: var(--tab-font-size); font-weight: var(--tab-font-weight); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;}.var-tab--active { color: var(--tab-active-color); font-size: var(--tab-active-font-size); font-weight: var(--tab-active-font-weight);}.var-tab--inactive { color: var(--tab-inactive-color);}.var-tab--disabled { color: var(--tab-disabled-color); cursor: not-allowed;}.var-tab--horizontal { flex-direction: row;}.var-tab--vertical { flex-direction: column;}

package/es/tab-item/TabItem.mjs

@@ -0,0 +1,52 @@
+import VarSwipeItem from "../swipe-item/index.mjs";
+import { defineComponent, ref, computed } from "vue";
+import { useTabsItems, useLists } from "./provide.mjs";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+const { name, n, classes } = createNamespace("tab-item");
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_swipe_item = _resolveComponent("var-swipe-item");
+  return _openBlock(), _createBlock(_component_var_swipe_item, {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [!_ctx.current, _ctx.n("--inactive")])),
+    "var-tab-item-cover": ""
+  }, {
+    default: _withCtx(() => [
+      _renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["class"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarSwipeItem },
+  props,
+  setup(props2) {
+    const current = ref(false);
+    const name2 = computed(() => props2.name);
+    const { index, bindTabsItems } = useTabsItems();
+    const { bindLists } = useLists();
+    const tabItemProvider = {
+      index,
+      name: name2,
+      current: computed(() => current.value),
+      setCurrent
+    };
+    bindTabsItems(tabItemProvider);
+    bindLists(tabItemProvider);
+    function setCurrent(value) {
+      current.value = value;
+    }
+    return {
+      current,
+      n,
+      classes
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/tab-item/index.mjs

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

package/es/tab-item/props.mjs

@@ -0,0 +1,6 @@
+const props = {
+  name: [String, Number]
+};
+export {
+  props
+};