vant 3.6.14 → 3.6.16

package/lib/tabs/index.less

@@ -0,0 +1,173 @@
+@import './var.less';
+
+:root {
+  --van-tab-text-color: @tab-text-color;
+  --van-tab-active-text-color: @tab-active-text-color;
+  --van-tab-disabled-text-color: @tab-disabled-text-color;
+  --van-tab-font-size: @tab-font-size;
+  --van-tab-line-height: @tab-line-height;
+  --van-tabs-default-color: @tabs-default-color;
+  --van-tabs-line-height: @tabs-line-height;
+  --van-tabs-card-height: @tabs-card-height;
+  --van-tabs-nav-background-color: @tabs-nav-background-color;
+  --van-tabs-bottom-bar-width: @tabs-bottom-bar-width;
+  --van-tabs-bottom-bar-height: @tabs-bottom-bar-height;
+  --van-tabs-bottom-bar-color: @tabs-bottom-bar-color;
+}
+
+.van-tab {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0 var(--van-padding-base);
+  color: var(--van-tab-text-color);
+  font-size: var(--van-tab-font-size);
+  line-height: var(--van-tab-line-height);
+  cursor: pointer;
+
+  &--active {
+    color: var(--van-tab-active-text-color);
+    font-weight: var(--van-font-weight-bold);
+  }
+
+  &--disabled {
+    color: var(--van-tab-disabled-text-color);
+    cursor: not-allowed;
+  }
+
+  &--grow {
+    flex: 1 0 auto;
+    padding: 0 var(--van-padding-sm);
+  }
+
+  &--shrink {
+    flex: none;
+    padding: 0 var(--van-padding-xs);
+  }
+
+  &--card {
+    color: var(--van-tabs-default-color);
+    border-right: var(--van-border-width-base) solid
+      var(--van-tabs-default-color);
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &.van-tab--active {
+      color: var(--van-white);
+      background-color: var(--van-tabs-default-color);
+    }
+
+    &--disabled {
+      color: var(--van-tab-disabled-text-color);
+    }
+  }
+
+  &__text {
+    &--ellipsis {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+
+.van-tabs {
+  position: relative;
+
+  &__wrap {
+    overflow: hidden;
+
+    &--page-top {
+      position: fixed;
+    }
+
+    &--content-bottom {
+      top: auto;
+      bottom: 0;
+    }
+  }
+
+  &__nav {
+    position: relative;
+    display: flex;
+    background: var(--van-tabs-nav-background-color);
+    user-select: none;
+
+    &--complete {
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    &--line {
+      box-sizing: content-box;
+      height: 100%;
+      padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
+    }
+
+    &--line&--shrink,
+    &--line&--complete {
+      padding-right: var(--van-padding-xs);
+      padding-left: var(--van-padding-xs);
+    }
+
+    &--card {
+      box-sizing: border-box;
+      height: var(--van-tabs-card-height);
+      margin: 0 var(--van-padding-md);
+      border: var(--van-border-width-base) solid var(--van-tabs-default-color);
+      border-radius: var(--van-border-radius-sm);
+    }
+
+    &--card&--shrink {
+      display: inline-flex;
+    }
+  }
+
+  &__line {
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    z-index: 1;
+    width: var(--van-tabs-bottom-bar-width);
+    height: var(--van-tabs-bottom-bar-height);
+    background: var(--van-tabs-bottom-bar-color);
+    border-radius: var(--van-tabs-bottom-bar-height);
+  }
+
+  &__track {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    will-change: left;
+  }
+
+  &__content {
+    &--animated {
+      overflow: hidden;
+    }
+  }
+
+  &--line {
+    .van-tabs__wrap {
+      height: var(--van-tabs-line-height);
+    }
+  }
+
+  &--card {
+    > .van-tabs__wrap {
+      height: var(--van-tabs-card-height);
+    }
+  }
+}

package/lib/tabs/style/index.js

@@ -1,4 +1,5 @@
 require("../../style/base.css");
+require("../../badge/index.css");
 require("../../sticky/index.css");
 require("../../swipe/index.css");
 require("../index.css");

package/lib/tabs/style/less.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/tabs/style/less.js

@@ -0,0 +1,5 @@
+require("../../style/base.less");
+require("../../badge/index.less");
+require("../../sticky/index.less");
+require("../../swipe/index.less");
+require("../index.less");

package/lib/tabs/types.d.ts

@@ -1,39 +1,23 @@
 import type { ComponentPublicInstance, ComputedRef } from 'vue';
 import type { Numeric } from '../utils';
 import type { TabsProps } from './Tabs';
-export type TabsType = 'line' | 'card';
-export type TabsClickTabEventParams = {
+export declare type TabsType = 'line' | 'card';
+export declare type TabsClickTabEventParams = {
     name: Numeric;
     title: string;
     event: MouseEvent;
     disabled: boolean;
 };
-export type TabsProvide = {
+export declare type TabsProvide = {
     id: string;
     props: TabsProps;
     setLine: () => void;
-    scrollable: ComputedRef<boolean>;
     onRendered: (name: Numeric, title?: string) => void;
-    currentName: ComputedRef<Numeric | undefined>;
-    setTitleRefs: (index: number) => (el: unknown) => void;
     scrollIntoView: (immediate?: boolean) => void;
+    currentName: ComputedRef<Numeric | undefined>;
 };
-export type TabsExpose = {
+export declare type TabsExpose = {
     resize: () => void;
     scrollTo: (name: Numeric) => void;
 };
-export type TabsInstance = ComponentPublicInstance<TabsProps, TabsExpose>;
-export type TabsThemeVars = {
-    tabTextColor?: string;
-    tabActiveTextColor?: string;
-    tabDisabledTextColor?: string;
-    tabFontSize?: string;
-    tabLineHeight?: number | string;
-    tabsDefaultColor?: string;
-    tabsLineHeight?: number | string;
-    tabsCardHeight?: string;
-    tabsNavBackground?: string;
-    tabsBottomBarWidth?: string;
-    tabsBottomBarHeight?: string;
-    tabsBottomBarColor?: string;
-};
+export declare type TabsInstance = ComponentPublicInstance<TabsProps, TabsExpose>;

package/lib/tabs/utils.d.ts

@@ -1,3 +1,3 @@
 import { ScrollElement } from '../utils';
-export declare function scrollLeftTo(scroller: HTMLElement, to: number, duration: number): () => void;
-export declare function scrollTopTo(scroller: ScrollElement, to: number, duration: number, callback: () => void): () => void;
+export declare function scrollLeftTo(scroller: HTMLElement, to: number, duration: number): void;
+export declare function scrollTopTo(scroller: ScrollElement, to: number, duration: number, callback: () => void): void;

package/lib/tabs/utils.js

@@ -24,33 +24,22 @@ module.exports = __toCommonJS(stdin_exports);
 var import_use = require("@vant/use");
 var import_utils = require("../utils");
 function scrollLeftTo(scroller, to, duration) {
-  let rafId;
   let count = 0;
   const from = scroller.scrollLeft;
   const frames = duration === 0 ? 1 : Math.round(duration * 1e3 / 16);
-  let scrollLeft = from;
-  function cancel() {
-    (0, import_use.cancelRaf)(rafId);
-  }
   function animate() {
-    scrollLeft += (to - from) / frames;
-    scroller.scrollLeft = scrollLeft;
+    scroller.scrollLeft += (to - from) / frames;
     if (++count < frames) {
-      rafId = (0, import_use.raf)(animate);
+      (0, import_use.raf)(animate);
     }
   }
   animate();
-  return cancel;
 }
 function scrollTopTo(scroller, to, duration, callback) {
-  let rafId;
   let current = (0, import_utils.getScrollTop)(scroller);
   const isDown = current < to;
   const frames = duration === 0 ? 1 : Math.round(duration * 1e3 / 16);
   const step = (to - current) / frames;
-  function cancel() {
-    (0, import_use.cancelRaf)(rafId);
-  }
   function animate() {
     current += step;
     if (isDown && current > to || !isDown && current < to) {
@@ -58,11 +47,10 @@ function scrollTopTo(scroller, to, duration, callback) {
     }
     (0, import_utils.setScrollTop)(scroller, current);
     if (isDown && current < to || !isDown && current > to) {
-      rafId = (0, import_use.raf)(animate);
+      (0, import_use.raf)(animate);
     } else if (callback) {
-      rafId = (0, import_use.raf)(callback);
+      (0, import_use.raf)(callback);
     }
   }
   animate();
-  return cancel;
 }

package/lib/tabs/var.less

@@ -0,0 +1,14 @@
+@import '../style/var.less';
+
+@tab-text-color: var(--van-gray-7);
+@tab-active-text-color: var(--van-text-color);
+@tab-disabled-text-color: var(--van-text-color-3);
+@tab-font-size: var(--van-font-size-md);
+@tab-line-height: var(--van-line-height-md);
+@tabs-default-color: var(--van-danger-color);
+@tabs-line-height: 44px;
+@tabs-card-height: 30px;
+@tabs-nav-background-color: var(--van-background-color-light);
+@tabs-bottom-bar-width: 40px;
+@tabs-bottom-bar-height: 3px;
+@tabs-bottom-bar-color: @tabs-default-color;

package/lib/tag/Tag.d.ts

@@ -1,6 +1,7 @@
 import { type PropType, type ExtractPropTypes } from 'vue';
-import type { TagType, TagSize } from './types';
-export declare const tagProps: {
+export declare type TagSize = 'large' | 'medium';
+export declare type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+declare const tagProps: {
     size: PropType<TagSize>;
     mark: BooleanConstructor;
     show: {
@@ -8,7 +9,7 @@ export declare const tagProps: {
         default: true;
     };
     type: {
-        type: PropType<T>;
+        type: PropType<TagType>;
         default: TagType;
     };
     color: StringConstructor;
@@ -17,8 +18,8 @@ export declare const tagProps: {
     textColor: StringConstructor;
     closeable: BooleanConstructor;
 };
-export type TagProps = ExtractPropTypes<typeof tagProps>;
-declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
+export declare type TagProps = ExtractPropTypes<typeof tagProps>;
+declare const _default: import("vue").DefineComponent<{
     size: PropType<TagSize>;
     mark: BooleanConstructor;
     show: {
@@ -26,7 +27,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: true;
     };
     type: {
-        type: PropType<T>;
+        type: PropType<TagType>;
         default: TagType;
     };
     color: StringConstructor;
@@ -34,7 +35,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     round: BooleanConstructor;
     textColor: StringConstructor;
     closeable: BooleanConstructor;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     size: PropType<TagSize>;
     mark: BooleanConstructor;
     show: {
@@ -42,7 +43,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: true;
     };
     type: {
-        type: PropType<T>;
+        type: PropType<TagType>;
         default: TagType;
     };
     color: StringConstructor;
@@ -50,14 +51,14 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     round: BooleanConstructor;
     textColor: StringConstructor;
     closeable: BooleanConstructor;
-}>> & Readonly<{
+}>> & {
     onClose?: ((...args: any[]) => any) | undefined;
-}>, {
+}, {
     type: TagType;
     mark: boolean;
     round: boolean;
     show: boolean;
     plain: boolean;
     closeable: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>;
 export default _default;

package/lib/tag/Tag.js

@@ -17,11 +17,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
-  default: () => stdin_default,
-  tagProps: () => tagProps
+  default: () => stdin_default
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
+var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_icon = require("../icon");
 const [name, bem] = (0, import_utils.createNamespace)("tag");
@@ -36,7 +36,7 @@ const tagProps = {
   textColor: String,
   closeable: Boolean
 };
-var stdin_default = (0, import_vue.defineComponent)({
+var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: tagProps,
   emits: ["close"],
@@ -88,7 +88,7 @@ var stdin_default = (0, import_vue.defineComponent)({
         "class": bem([classes, type])
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots), CloseIcon]);
     };
-    return () => (0, import_vue.createVNode)(import_vue.Transition, {
+    return () => (0, import_vue.createVNode)(import_vue2.Transition, {
       "name": props.closeable ? "van-fade" : void 0
     }, {
       default: () => [props.show ? renderTag() : null]

package/lib/tag/index.css

@@ -1 +1 @@
-:root,:host{--van-tag-padding: 0 var(--van-padding-base);--van-tag-text-color: var(--van-white);--van-tag-font-size: var(--van-font-size-sm);--van-tag-radius: 2px;--van-tag-line-height: 16px;--van-tag-medium-padding: 2px 6px;--van-tag-large-padding: var(--van-padding-base) var(--van-padding-xs);--van-tag-large-radius: var(--van-radius-md);--van-tag-large-font-size: var(--van-font-size-md);--van-tag-round-radius: var(--van-radius-max);--van-tag-danger-color: var(--van-danger-color);--van-tag-primary-color: var(--van-primary-color);--van-tag-success-color: var(--van-success-color);--van-tag-warning-color: var(--van-warning-color);--van-tag-default-color: var(--van-gray-6);--van-tag-plain-background: var(--van-background-2)}.van-tag{position:relative;display:inline-flex;align-items:center;padding:var(--van-tag-padding);color:var(--van-tag-text-color);font-size:var(--van-tag-font-size);line-height:var(--van-tag-line-height);border-radius:var(--van-tag-radius)}.van-tag--default{background:var(--van-tag-default-color)}.van-tag--default.van-tag--plain{color:var(--van-tag-default-color)}.van-tag--danger{background:var(--van-tag-danger-color)}.van-tag--danger.van-tag--plain{color:var(--van-tag-danger-color)}.van-tag--primary{background:var(--van-tag-primary-color)}.van-tag--primary.van-tag--plain{color:var(--van-tag-primary-color)}.van-tag--success{background:var(--van-tag-success-color)}.van-tag--success.van-tag--plain{color:var(--van-tag-success-color)}.van-tag--warning{background:var(--van-tag-warning-color)}.van-tag--warning.van-tag--plain{color:var(--van-tag-warning-color)}.van-tag--plain{background:var(--van-tag-plain-background);border-color:currentColor}.van-tag--plain:before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-color:inherit;border-radius:inherit;content:"";pointer-events:none}.van-tag--medium{padding:var(--van-tag-medium-padding)}.van-tag--large{padding:var(--van-tag-large-padding);font-size:var(--van-tag-large-font-size);border-radius:var(--van-tag-large-radius)}.van-tag--mark{border-radius:0 var(--van-tag-round-radius) var(--van-tag-round-radius) 0}.van-tag--mark:after{display:block;width:2px;content:""}.van-tag--round{border-radius:var(--van-tag-round-radius)}.van-tag__close{margin-left:2px}
+:root{--van-tag-padding: 0 var(--van-padding-base);--van-tag-text-color: var(--van-white);--van-tag-font-size: var(--van-font-size-sm);--van-tag-border-radius: 2px;--van-tag-line-height: 16px;--van-tag-medium-padding: 2px 6px;--van-tag-large-padding: var(--van-padding-base) var(--van-padding-xs);--van-tag-large-border-radius: var(--van-border-radius-md);--van-tag-large-font-size: var(--van-font-size-md);--van-tag-round-border-radius: var(--van-border-radius-max);--van-tag-danger-color: var(--van-danger-color);--van-tag-primary-color: var(--van-primary-color);--van-tag-success-color: var(--van-success-color);--van-tag-warning-color: var(--van-warning-color);--van-tag-default-color: var(--van-gray-6);--van-tag-plain-background-color: var(--van-background-color-light)}.van-tag{position:relative;display:inline-flex;align-items:center;padding:var(--van-tag-padding);color:var(--van-tag-text-color);font-size:var(--van-tag-font-size);line-height:var(--van-tag-line-height);border-radius:var(--van-tag-border-radius)}.van-tag--default{background:var(--van-tag-default-color)}.van-tag--default.van-tag--plain{color:var(--van-tag-default-color)}.van-tag--danger{background:var(--van-tag-danger-color)}.van-tag--danger.van-tag--plain{color:var(--van-tag-danger-color)}.van-tag--primary{background:var(--van-tag-primary-color)}.van-tag--primary.van-tag--plain{color:var(--van-tag-primary-color)}.van-tag--success{background:var(--van-tag-success-color)}.van-tag--success.van-tag--plain{color:var(--van-tag-success-color)}.van-tag--warning{background:var(--van-tag-warning-color)}.van-tag--warning.van-tag--plain{color:var(--van-tag-warning-color)}.van-tag--plain{background:var(--van-tag-plain-background-color);border-color:currentColor}.van-tag--plain:before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-color:inherit;border-radius:inherit;content:"";pointer-events:none}.van-tag--medium{padding:var(--van-tag-medium-padding)}.van-tag--large{padding:var(--van-tag-large-padding);font-size:var(--van-tag-large-font-size);border-radius:var(--van-tag-large-border-radius)}.van-tag--mark{border-radius:0 var(--van-tag-round-border-radius) var(--van-tag-round-border-radius) 0}.van-tag--mark:after{display:block;width:2px;content:""}.van-tag--round{border-radius:var(--van-tag-round-border-radius)}.van-tag__close{margin-left:2px}

package/lib/tag/index.d.ts

@@ -1,49 +1,47 @@
-export declare const Tag: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    size: import("vue").PropType<import("./types").TagSize>;
+export declare const Tag: import("../utils").WithInstall<import("vue").DefineComponent<{
+    size: import("vue").PropType<import("./Tag").TagSize>;
     mark: BooleanConstructor;
     show: {
         type: BooleanConstructor;
         default: true;
     };
     type: {
-        type: import("vue").PropType<T>;
-        default: import("./types").TagType;
+        type: import("vue").PropType<import("./Tag").TagType>;
+        default: import("./Tag").TagType;
     };
     color: StringConstructor;
     plain: BooleanConstructor;
     round: BooleanConstructor;
     textColor: StringConstructor;
     closeable: BooleanConstructor;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    size: import("vue").PropType<import("./types").TagSize>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: import("vue").PropType<import("./Tag").TagSize>;
     mark: BooleanConstructor;
     show: {
         type: BooleanConstructor;
         default: true;
     };
     type: {
-        type: import("vue").PropType<T>;
-        default: import("./types").TagType;
+        type: import("vue").PropType<import("./Tag").TagType>;
+        default: import("./Tag").TagType;
     };
     color: StringConstructor;
     plain: BooleanConstructor;
     round: BooleanConstructor;
     textColor: StringConstructor;
     closeable: BooleanConstructor;
-}>> & Readonly<{
+}>> & {
     onClose?: ((...args: any[]) => any) | undefined;
-}>, {
-    type: import("./types").TagType;
+}, {
+    type: import("./Tag").TagType;
     mark: boolean;
     round: boolean;
     show: boolean;
     plain: boolean;
     closeable: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+}>>;
 export default Tag;
-export { tagProps } from './Tag';
-export type { TagProps } from './Tag';
-export type { TagSize, TagType, TagThemeVars } from './types';
+export type { TagSize, TagType, TagProps } from './Tag';
 declare module 'vue' {
     interface GlobalComponents {
         VanTag: typeof Tag;

package/lib/tag/index.js

@@ -17,10 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -28,12 +24,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var stdin_exports = {};
 __export(stdin_exports, {
   Tag: () => Tag,
-  default: () => stdin_default,
-  tagProps: () => import_Tag2.tagProps
+  default: () => stdin_default
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_utils = require("../utils");
 var import_Tag = __toESM(require("./Tag"));
-var import_Tag2 = require("./Tag");
 const Tag = (0, import_utils.withInstall)(import_Tag.default);
 var stdin_default = Tag;

package/lib/tag/index.less

@@ -0,0 +1,118 @@
+@import './var.less';
+
+:root {
+  --van-tag-padding: @tag-padding;
+  --van-tag-text-color: @tag-text-color;
+  --van-tag-font-size: @tag-font-size;
+  --van-tag-border-radius: @tag-border-radius;
+  --van-tag-line-height: @tag-line-height;
+  --van-tag-medium-padding: @tag-medium-padding;
+  --van-tag-large-padding: @tag-large-padding;
+  --van-tag-large-border-radius: @tag-large-border-radius;
+  --van-tag-large-font-size: @tag-large-font-size;
+  --van-tag-round-border-radius: @tag-round-border-radius;
+  --van-tag-danger-color: @tag-danger-color;
+  --van-tag-primary-color: @tag-primary-color;
+  --van-tag-success-color: @tag-success-color;
+  --van-tag-warning-color: @tag-warning-color;
+  --van-tag-default-color: @tag-default-color;
+  --van-tag-plain-background-color: @tag-plain-background-color;
+}
+
+.van-tag {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: var(--van-tag-padding);
+  color: var(--van-tag-text-color);
+  font-size: var(--van-tag-font-size);
+  line-height: var(--van-tag-line-height);
+  border-radius: var(--van-tag-border-radius);
+
+  &--default {
+    background: var(--van-tag-default-color);
+
+    &.van-tag--plain {
+      color: var(--van-tag-default-color);
+    }
+  }
+
+  &--danger {
+    background: var(--van-tag-danger-color);
+
+    &.van-tag--plain {
+      color: var(--van-tag-danger-color);
+    }
+  }
+
+  &--primary {
+    background: var(--van-tag-primary-color);
+
+    &.van-tag--plain {
+      color: var(--van-tag-primary-color);
+    }
+  }
+
+  &--success {
+    background: var(--van-tag-success-color);
+
+    &.van-tag--plain {
+      color: var(--van-tag-success-color);
+    }
+  }
+
+  &--warning {
+    background: var(--van-tag-warning-color);
+
+    &.van-tag--plain {
+      color: var(--van-tag-warning-color);
+    }
+  }
+
+  &--plain {
+    background: var(--van-tag-plain-background-color);
+    border-color: currentColor;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: 1px solid;
+      border-color: inherit;
+      border-radius: inherit;
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  &--medium {
+    padding: var(--van-tag-medium-padding);
+  }
+
+  &--large {
+    padding: var(--van-tag-large-padding);
+    font-size: var(--van-tag-large-font-size);
+    border-radius: var(--van-tag-large-border-radius);
+  }
+
+  &--mark {
+    border-radius: 0 var(--van-tag-round-border-radius)
+      var(--van-tag-round-border-radius) 0;
+
+    &::after {
+      display: block;
+      width: 2px;
+      content: '';
+    }
+  }
+
+  &--round {
+    border-radius: var(--van-tag-round-border-radius);
+  }
+
+  &__close {
+    margin-left: 2px;
+  }
+}

package/lib/tag/style/less.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/tag/style/less.js

@@ -0,0 +1,4 @@
+require("../../style/base.less");
+require("../../badge/index.less");
+require("../../icon/index.less");
+require("../index.less");

package/lib/tag/var.less

@@ -0,0 +1,18 @@
+@import '../style/var.less';
+
+@tag-padding: 0 var(--van-padding-base);
+@tag-text-color: var(--van-white);
+@tag-font-size: var(--van-font-size-sm);
+@tag-border-radius: 2px;
+@tag-line-height: 16px;
+@tag-medium-padding: 2px 6px;
+@tag-large-padding: var(--van-padding-base) var(--van-padding-xs);
+@tag-large-border-radius: var(--van-border-radius-md);
+@tag-large-font-size: var(--van-font-size-md);
+@tag-round-border-radius: var(--van-border-radius-max);
+@tag-danger-color: var(--van-danger-color);
+@tag-primary-color: var(--van-primary-color);
+@tag-success-color: var(--van-success-color);
+@tag-warning-color: var(--van-warning-color);
+@tag-default-color: var(--van-gray-6);
+@tag-plain-background-color: var(--van-background-color-light);