@antdv-next/mobile 0.0.0-stage → 0.1.1

package/dist/tabs/style/index.css

@@ -0,0 +1,252 @@
+.am-tabs {
+  /* component tokens */
+  --am-tabs-height: 44px;
+  --am-tabs-background: var(--am-color-bg-container);
+  --am-tabs-color: var(--am-color-text);
+  --am-tabs-active-color: var(--am-color-primary);
+  --am-tabs-font-size: var(--am-font-size-lg);
+  --am-tabs-tab-padding-inline: var(--am-padding-sm);
+  --am-tabs-ink-bar-width: 24px;
+  --am-tabs-ink-bar-height: 2px;
+  --am-tabs-ink-bar-color: var(--am-color-primary);
+  --am-tabs-ink-bar-radius: 2px;
+  --am-tabs-card-background: var(--am-color-fill-tertiary);
+  --am-tabs-capsule-height: 30px;
+  --am-tabs-capsule-background: var(--am-color-fill-tertiary);
+  --am-tabs-z-index: 99;
+
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  color: var(--am-tabs-color);
+  font-size: var(--am-font-size);
+  font-family: var(--am-font-family);
+  line-height: var(--am-line-height);
+}
+
+.am-tabs-bottom {
+  flex-direction: column-reverse;
+}
+
+/* ---------- header ---------- */
+.am-tabs-header {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  background: var(--am-tabs-background);
+}
+
+.am-tabs-line > .am-tabs-header::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-bottom: var(--am-line-width) var(--am-line-type) var(--am-color-split);
+  transform: scaleY(0.5);
+  transform-origin: bottom;
+  content: '';
+  pointer-events: none;
+}
+
+.am-tabs-line.am-tabs-bottom > .am-tabs-header::after {
+  top: 0;
+  bottom: auto;
+  transform-origin: top;
+}
+
+.am-tabs-sticky > .am-tabs-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--am-tabs-z-index);
+}
+
+.am-tabs-extra {
+  display: flex;
+  flex: none;
+  align-items: center;
+  padding: 0 var(--am-padding-sm);
+}
+
+.am-tabs-nav {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.am-tabs-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.am-tabs-nav-list {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+  height: var(--am-tabs-height);
+}
+
+.am-tabs-centered .am-tabs-nav-list {
+  justify-content: center;
+}
+
+.am-tabs-tab {
+  display: inline-flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0 var(--am-tabs-tab-padding-inline);
+  color: inherit;
+  font-size: var(--am-tabs-font-size);
+  white-space: nowrap;
+  outline: none;
+  cursor: pointer;
+  transition:
+    color var(--am-motion-duration-mid),
+    background-color var(--am-motion-duration-mid);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+.am-tabs-stretch .am-tabs-tab {
+  flex: 1 0 auto;
+}
+
+.am-tabs-tab:active {
+  opacity: var(--am-opacity-active);
+}
+
+.am-tabs-tab:focus-visible {
+  outline: 2px solid var(--am-color-primary-border);
+  outline-offset: -2px;
+}
+
+.am-tabs-tab-active {
+  color: var(--am-tabs-active-color);
+  font-weight: 500;
+}
+
+.am-tabs-tab-disabled,
+.am-tabs-tab-disabled:active {
+  color: var(--am-color-text-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.am-tabs-tab-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.am-tabs-ink-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: var(--am-tabs-ink-bar-width);
+  height: var(--am-tabs-ink-bar-height);
+  background: var(--am-tabs-ink-bar-color);
+  border-radius: var(--am-tabs-ink-bar-radius);
+  pointer-events: none;
+}
+
+.am-tabs-bottom .am-tabs-ink-bar {
+  top: 0;
+  bottom: auto;
+}
+
+.am-tabs-ink-bar-animated {
+  transition: transform var(--am-motion-duration-slow) var(--am-motion-ease-out);
+}
+
+/* ---------- type: card ---------- */
+.am-tabs-card .am-tabs-nav-list {
+  background: var(--am-tabs-card-background);
+}
+
+.am-tabs-card .am-tabs-tab-active {
+  background: var(--am-tabs-background);
+}
+
+/* ---------- type: capsule ---------- */
+.am-tabs-capsule .am-tabs-nav-list {
+  gap: var(--am-padding-xs);
+  align-items: center;
+  padding: 0 var(--am-padding-sm);
+}
+
+.am-tabs-capsule .am-tabs-tab {
+  height: var(--am-tabs-capsule-height);
+  font-size: var(--am-font-size);
+  background: var(--am-tabs-capsule-background);
+  border-radius: calc(var(--am-tabs-capsule-height) / 2);
+}
+
+.am-tabs-capsule .am-tabs-tab-active {
+  color: var(--am-color-text-light-solid);
+  background: var(--am-tabs-active-color);
+}
+
+.am-tabs-capsule .am-tabs-tab-disabled {
+  color: var(--am-color-text-disabled);
+}
+
+/* ---------- sizes ---------- */
+.am-tabs-sm {
+  --am-tabs-height: 36px;
+  --am-tabs-font-size: var(--am-font-size);
+  --am-tabs-capsule-height: 26px;
+}
+
+.am-tabs-lg {
+  --am-tabs-height: 52px;
+  --am-tabs-font-size: var(--am-font-size-xl);
+  --am-tabs-capsule-height: 34px;
+}
+
+/* ---------- content ---------- */
+.am-tabs-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.am-tabs-swipeable > .am-tabs-body {
+  touch-action: pan-y;
+}
+
+.am-tabs-content:not(.am-tabs-content-track) > .am-tabs-tabpane:not(.am-tabs-tabpane-active) {
+  display: none;
+}
+
+.am-tabs-content-track {
+  display: flex;
+  align-items: flex-start;
+  transition: transform var(--am-motion-duration-slow) var(--am-motion-ease-out);
+  will-change: transform;
+}
+
+.am-tabs-content-dragging {
+  transition: none;
+}
+
+.am-tabs-content-track > .am-tabs-tabpane {
+  flex: 0 0 100%;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .am-tabs-ink-bar-animated,
+  .am-tabs-content-track {
+    transition-duration: 0.01s;
+  }
+}

package/dist/tag/CheckableTag.js

@@ -0,0 +1,4 @@
+import CheckableTag_vue_vue_type_script_setup_true_lang_default from "./CheckableTag.vue_vue_type_script_setup_true_lang.js";
+// src/tag/CheckableTag.vue
+var CheckableTag_default = CheckableTag_vue_vue_type_script_setup_true_lang_default;
+export { CheckableTag_default as default };

package/dist/tag/CheckableTag.vue.d.ts

@@ -0,0 +1,26 @@
+import type { CheckableTagProps, CheckableTagSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = CheckableTagSlots;
+declare const __VLS_base: import("vue").DefineComponent<CheckableTagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (checked: boolean) => any;
+    click: (event: MouseEvent) => any;
+    "update:checked": (checked: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CheckableTagProps> & Readonly<{
+    onChange?: ((checked: boolean) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:checked"?: ((checked: boolean) => any) | undefined;
+}>, {
+    round: boolean;
+    disabled: boolean;
+    checked: boolean;
+    defaultChecked: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tag/CheckableTag.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,108 @@
+import { useControlled } from "../_util/hooks/useControlled.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { useDisabled, useSize } from "../config-provider/context.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, useSlots } from "vue";
+// src/tag/CheckableTag.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-checked",
+	"aria-disabled",
+	"tabindex"
+];
+var _hoisted_2 = {
+	key: 0,
+	class: "am-tag-icon"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "am-tag-content"
+};
+var CheckableTag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmCheckableTag",
+	inheritAttrs: false,
+	__name: "CheckableTag",
+	props: {
+		checked: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultChecked: {
+			type: Boolean,
+			default: false
+		},
+		icon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		size: {},
+		round: {
+			type: Boolean,
+			default: false
+		},
+		rootClass: {}
+	},
+	emits: [
+		"update:checked",
+		"change",
+		"click"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const size = useSize(() => props.size);
+		const disabled = useDisabled(() => props.disabled);
+		const [checked, setChecked] = useControlled(props, "checked", {
+			defaultValue: props.defaultChecked,
+			onChange: (value) => {
+				emit("update:checked", value);
+				emit("change", value);
+			}
+		});
+		const hasIcon = computed(() => !!slots.icon || props.icon !== void 0 && props.icon !== null && props.icon !== false);
+		const classNames = computed(() => [
+			"am-tag",
+			"am-tag-checkable",
+			{
+				"am-tag-checkable-checked": checked.value,
+				"am-tag-checkable-disabled": disabled.value,
+				"am-tag-sm": size.value === "small",
+				"am-tag-lg": size.value === "large",
+				"am-tag-round": props.round
+			},
+			props.rootClass
+		]);
+		function handleClick(event) {
+			if (disabled.value) return;
+			setChecked(!checked.value);
+			emit("click", event);
+		}
+		function handleKeydown(event) {
+			if (disabled.value || event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			setChecked(!checked.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+				class: classNames.value,
+				role: "checkbox",
+				"aria-checked": unref(checked),
+				"aria-disabled": unref(disabled) || void 0,
+				tabindex: unref(disabled) ? -1 : 0,
+				onClick: handleClick,
+				onKeydown: handleKeydown
+			}), [hasIcon.value ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(unref(RenderNode_default), { node: __props.icon }, null, 8, ["node"])])])) : createCommentVNode("", true), _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)], 16, _hoisted_1);
+		};
+	}
+});
+export { CheckableTag_vue_vue_type_script_setup_true_lang_default as default };

package/dist/tag/Tag.js

@@ -0,0 +1,4 @@
+import Tag_vue_vue_type_script_setup_true_lang_default from "./Tag.vue_vue_type_script_setup_true_lang.js";
+// src/tag/Tag.vue
+var Tag_default = Tag_vue_vue_type_script_setup_true_lang_default;
+export { Tag_default as default };

package/dist/tag/Tag.vue.d.ts

@@ -0,0 +1,22 @@
+import type { TagProps, TagSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = TagSlots;
+declare const __VLS_base: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{
+    onClose?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    round: boolean;
+    bordered: boolean;
+    disabled: boolean;
+    closable: boolean | import("./interface").TagClosableConfig;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tag/Tag.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,181 @@
+import RenderNode_default from "../_util/RenderNode.js";
+import { mergeAttrsStyle } from "../_util/vnode.js";
+import { useDisabled, useSize } from "../config-provider/context.js";
+import { useLocale } from "../locale/index.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, resolveDynamicComponent, unref, useSlots, withCtx } from "vue";
+import { CloseOutlined } from "@antdv-next/icons";
+// src/tag/Tag.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["tabindex", "aria-label"];
+var Tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmTag",
+	inheritAttrs: false,
+	__name: "Tag",
+	props: {
+		color: {},
+		variant: {},
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		closable: {
+			type: [Boolean, Object],
+			default: void 0
+		},
+		closeIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		icon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		href: {},
+		target: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		size: {},
+		round: {
+			type: Boolean,
+			default: false
+		},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const presetColors = [
+			"pink",
+			"red",
+			"yellow",
+			"orange",
+			"cyan",
+			"green",
+			"blue",
+			"purple",
+			"geekblue",
+			"magenta",
+			"volcano",
+			"gold",
+			"lime"
+		];
+		const statusColors = [
+			"success",
+			"processing",
+			"error",
+			"default",
+			"warning"
+		];
+		const size = useSize(() => props.size);
+		const disabled = useDisabled(() => props.disabled);
+		const commonLocale = useLocale("common");
+		const visible = ref(true);
+		const isNode = (node) => node !== void 0 && node !== null && node !== false;
+		const isInternalColor = computed(() => !!props.color && (presetColors.includes(props.color) || statusColors.includes(props.color)));
+		const hasColor = computed(() => !!props.color && props.color !== "default");
+		const variant = computed(() => props.variant ?? "filled");
+		const hasIcon = computed(() => !!slots.icon || isNode(props.icon));
+		const closableConfig = computed(() => typeof props.closable === "object" && props.closable ? props.closable : void 0);
+		const mergedCloseIcon = computed(() => closableConfig.value?.closeIcon ?? props.closeIcon);
+		const mergedClosable = computed(() => {
+			if (props.closable !== void 0) return !!props.closable;
+			return !!slots.closeIcon || isNode(props.closeIcon) && props.closeIcon !== "";
+		});
+		const hasCustomCloseIcon = computed(() => isNode(mergedCloseIcon.value) && mergedCloseIcon.value !== true && mergedCloseIcon.value !== "");
+		const classNames = computed(() => [
+			"am-tag",
+			`am-tag-${variant.value}`,
+			{
+				[`am-tag-${props.color}`]: isInternalColor.value,
+				"am-tag-has-color": hasColor.value,
+				"am-tag-borderless": !props.bordered,
+				"am-tag-sm": size.value === "small",
+				"am-tag-lg": size.value === "large",
+				"am-tag-round": props.round,
+				"am-tag-disabled": disabled.value
+			},
+			props.rootClass,
+			props.classes?.root
+		]);
+		const mergedStyle = computed(() => {
+			const style = {};
+			if (hasColor.value && !isInternalColor.value) style["--am-tag-c"] = props.color;
+			return {
+				...style,
+				...props.styles?.root
+			};
+		});
+		function handleClose(event) {
+			event.stopPropagation();
+			if (disabled.value) return;
+			emit("close", event);
+			if (!event.defaultPrevented) visible.value = false;
+		}
+		function handleClick(event) {
+			if (disabled.value) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}
+		return (_ctx, _cache) => {
+			return visible.value ? (openBlock(), createBlock(resolveDynamicComponent(__props.href !== void 0 ? "a" : "span"), mergeProps({ key: 0 }, _ctx.$attrs, {
+				class: classNames.value,
+				style: unref(mergeAttrsStyle)(mergedStyle.value, _ctx.$attrs.style),
+				href: __props.href !== void 0 && !unref(disabled) ? __props.href : void 0,
+				target: __props.href !== void 0 ? __props.target : void 0,
+				"aria-disabled": unref(disabled) || void 0,
+				onClickCapture: handleClick
+			}), {
+				default: withCtx(() => [
+					hasIcon.value ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(["am-tag-icon", __props.classes?.icon]),
+						style: normalizeStyle(__props.styles?.icon)
+					}, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(unref(RenderNode_default), { node: __props.icon }, null, 8, ["node"])])], 6)) : createCommentVNode("", true),
+					_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(["am-tag-content", __props.classes?.content]),
+						style: normalizeStyle(__props.styles?.content)
+					}, [renderSlot(_ctx.$slots, "default")], 6)) : createCommentVNode("", true),
+					mergedClosable.value ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: normalizeClass(["am-tag-close-icon", __props.classes?.close]),
+						style: normalizeStyle(__props.styles?.close),
+						role: "button",
+						tabindex: unref(disabled) ? -1 : 0,
+						"aria-label": closableConfig.value?.ariaLabel ?? unref(commonLocale).close,
+						onClick: handleClose
+					}, [renderSlot(_ctx.$slots, "closeIcon", {}, () => [hasCustomCloseIcon.value ? (openBlock(), createBlock(unref(RenderNode_default), {
+						key: 0,
+						node: mergedCloseIcon.value
+					}, null, 8, ["node"])) : (openBlock(), createBlock(unref(CloseOutlined), { key: 1 }))])], 14, _hoisted_1)) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 16, [
+				"class",
+				"style",
+				"href",
+				"target",
+				"aria-disabled"
+			])) : createCommentVNode("", true);
+		};
+	}
+});
+export { Tag_vue_vue_type_script_setup_true_lang_default as default };