@antdv-next/mobile 0.0.0-stage → 0.1.1

package/dist/notice-bar/NoticeBar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,221 @@
+import { cancelRaf, doubleRaf, isRenderable, raf } from "../_util/index.js";
+import { useEventListener } from "../_util/hooks/useEventListener.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { useConfig } 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, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onActivated, onBeforeUnmount, onMounted, openBlock, reactive, ref, renderSlot, unref, useSlots, watch } from "vue";
+import { CloseOutlined, SoundOutlined } from "@antdv-next/icons";
+// src/notice-bar/NoticeBar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var NoticeBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmNoticeBar",
+	inheritAttrs: false,
+	__name: "NoticeBar",
+	props: {
+		content: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		color: { default: "warning" },
+		icon: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		extra: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		closable: { type: Boolean },
+		closeIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		wrap: { type: Boolean },
+		scrollable: {
+			type: Boolean,
+			default: void 0
+		},
+		delay: { default: 2e3 },
+		speed: { default: 50 },
+		shape: { default: "rectangular" },
+		bordered: {
+			type: [Boolean, String],
+			default: "block"
+		},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"close",
+		"click",
+		"replay"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const config = useConfig();
+		const commonLocale = useLocale("common");
+		const visible = ref(true);
+		const wrapRef = ref();
+		const contentRef = ref();
+		const state = reactive({
+			offset: 0,
+			duration: 0,
+			scrolling: false
+		});
+		let wrapWidth = 0;
+		let contentWidth = 0;
+		let startTimer;
+		let rafId = -1;
+		const showIcon = computed(() => !!slots.icon || props.icon === void 0 || isRenderable(props.icon));
+		const hasExtra = computed(() => !!slots.extra || isRenderable(props.extra));
+		const sign = computed(() => config.direction.value === "rtl" ? 1 : -1);
+		const classNames = computed(() => [
+			"am-notice-bar",
+			`am-notice-bar-${props.color}`,
+			`am-notice-bar-${props.shape}`,
+			{
+				"am-notice-bar-wrap": props.wrap,
+				"am-notice-bar-bordered": props.bordered === true,
+				"am-notice-bar-bordered-block": props.bordered === "block",
+				"am-notice-bar-scrolling": state.scrolling
+			},
+			props.rootClass,
+			props.classes?.root
+		]);
+		const contentStyle = computed(() => {
+			if (!state.scrolling) return void 0;
+			return {
+				transform: `translate3d(${state.offset}px, 0, 0)`,
+				transitionDuration: `${state.duration}s`
+			};
+		});
+		function stop() {
+			clearTimeout(startTimer);
+			cancelRaf(rafId);
+			state.offset = 0;
+			state.duration = 0;
+			state.scrolling = false;
+		}
+		function run(from) {
+			state.offset = from;
+			state.duration = 0;
+			rafId = raf(() => {
+				rafId = raf(() => {
+					state.offset = sign.value * contentWidth;
+					state.duration = (Math.abs(from) + contentWidth) / props.speed;
+				});
+			});
+		}
+		function reset() {
+			stop();
+			const wrap = wrapRef.value;
+			const content = contentRef.value;
+			if (!wrap || !content || props.wrap || props.scrollable === false) return;
+			wrapWidth = wrap.offsetWidth;
+			contentWidth = Math.max(content.scrollWidth, content.offsetWidth);
+			if (!contentWidth || !(props.speed > 0)) return;
+			if (props.scrollable || contentWidth > wrapWidth) startTimer = setTimeout(() => {
+				state.scrolling = true;
+				run(0);
+			}, Math.max(props.delay, 0));
+		}
+		function onTransitionEnd(event) {
+			if (!state.scrolling || event.target !== contentRef.value) return;
+			emit("replay");
+			run(-sign.value * wrapWidth);
+		}
+		function handleClose(event) {
+			event.stopPropagation();
+			visible.value = false;
+			stop();
+			emit("close", event);
+		}
+		onMounted(() => doubleRaf(reset));
+		onActivated(reset);
+		onBeforeUnmount(stop);
+		useEventListener("pageshow", reset);
+		useEventListener("resize", reset);
+		watch(() => [
+			props.content,
+			props.wrap,
+			props.scrollable,
+			props.speed,
+			props.delay,
+			config.direction.value
+		], () => nextTick(reset));
+		__expose({ reset });
+		return (_ctx, _cache) => {
+			return visible.value ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, _ctx.$attrs, {
+				class: classNames.value,
+				style: __props.styles?.root,
+				role: "alert",
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
+			}), [
+				showIcon.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(["am-notice-bar-icon", __props.classes?.icon]),
+					style: normalizeStyle(__props.styles?.icon)
+				}, [renderSlot(_ctx.$slots, "icon", {}, () => [unref(isRenderable)(__props.icon) ? (openBlock(), createBlock(unref(RenderNode_default), {
+					key: 0,
+					node: __props.icon
+				}, null, 8, ["node"])) : (openBlock(), createBlock(unref(SoundOutlined), { key: 1 }))])], 6)) : createCommentVNode("", true),
+				createElementVNode("div", {
+					ref_key: "wrapRef",
+					ref: wrapRef,
+					class: "am-notice-bar-wrapper"
+				}, [createElementVNode("span", {
+					ref_key: "contentRef",
+					ref: contentRef,
+					class: normalizeClass(["am-notice-bar-content", __props.classes?.content]),
+					style: normalizeStyle([contentStyle.value, __props.styles?.content]),
+					onTransitionend: onTransitionEnd
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(RenderNode_default), { node: __props.content }, null, 8, ["node"])])], 38)], 512),
+				hasExtra.value ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(["am-notice-bar-extra", __props.classes?.extra]),
+					style: normalizeStyle(__props.styles?.extra)
+				}, [renderSlot(_ctx.$slots, "extra", {}, () => [createVNode(unref(RenderNode_default), { node: __props.extra }, null, 8, ["node"])])], 6)) : createCommentVNode("", true),
+				__props.closable ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					type: "button",
+					class: normalizeClass(["am-notice-bar-close", __props.classes?.close]),
+					style: normalizeStyle(__props.styles?.close),
+					"aria-label": unref(commonLocale).close,
+					onClick: handleClose
+				}, [renderSlot(_ctx.$slots, "closeIcon", {}, () => [unref(isRenderable)(__props.closeIcon) ? (openBlock(), createBlock(unref(RenderNode_default), {
+					key: 0,
+					node: __props.closeIcon
+				}, null, 8, ["node"])) : (openBlock(), createBlock(unref(CloseOutlined), { key: 1 }))])], 14, _hoisted_1)) : createCommentVNode("", true)
+			], 16)) : createCommentVNode("", true);
+		};
+	}
+});
+export { NoticeBar_vue_vue_type_script_setup_true_lang_default as default };

package/dist/notice-bar/index.d.ts

@@ -0,0 +1,67 @@
+export type * from './interface';
+declare const NoticeBar: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").NoticeBarProps> & Readonly<{
+        onClick?: ((event: MouseEvent) => any) | undefined;
+        onClose?: ((event: MouseEvent) => any) | undefined;
+        onReplay?: (() => any) | undefined;
+    }>, import("./interface").NoticeBarExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        click: (event: MouseEvent) => any;
+        close: (event: MouseEvent) => any;
+        replay: () => any;
+    }, import("vue").PublicProps, {
+        bordered: boolean | "block";
+        color: import("./interface").NoticeBarColor;
+        icon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+        shape: import("./interface").NoticeBarShape;
+        delay: number;
+        speed: number;
+        scrollable: boolean;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").NoticeBarProps> & Readonly<{
+        onClick?: ((event: MouseEvent) => any) | undefined;
+        onClose?: ((event: MouseEvent) => any) | undefined;
+        onReplay?: (() => any) | undefined;
+    }>, import("./interface").NoticeBarExpose, {}, {}, {}, {
+        bordered: boolean | "block";
+        color: import("./interface").NoticeBarColor;
+        icon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+        shape: import("./interface").NoticeBarShape;
+        delay: number;
+        speed: number;
+        scrollable: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").NoticeBarProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onClose?: ((event: MouseEvent) => any) | undefined;
+    onReplay?: (() => any) | undefined;
+}>, import("./interface").NoticeBarExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+    close: (event: MouseEvent) => any;
+    replay: () => any;
+}, string, {
+    bordered: boolean | "block";
+    color: import("./interface").NoticeBarColor;
+    icon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    shape: import("./interface").NoticeBarShape;
+    delay: number;
+    speed: number;
+    scrollable: boolean;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").NoticeBarSlots;
+}), object>;
+export default NoticeBar;

package/dist/notice-bar/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "../_util/withInstall.js";
+import NoticeBar_default from "./NoticeBar.js";
+// src/notice-bar/index.ts
+var NoticeBar = withInstall(NoticeBar_default, "AmNoticeBar");
+export { NoticeBar as default };

package/dist/notice-bar/interface.d.ts

@@ -0,0 +1,59 @@
+import type { CSSProperties } from 'vue';
+import type { VueNode } from '../_util/type';
+export type NoticeBarColor = 'default' | 'info' | 'success' | 'warning' | 'error';
+export type NoticeBarShape = 'neutral' | 'rounded' | 'rectangular';
+export interface NoticeBarSemanticClassNames {
+    root?: string;
+    icon?: string;
+    content?: string;
+    extra?: string;
+    close?: string;
+}
+export interface NoticeBarSemanticStyles {
+    root?: CSSProperties;
+    icon?: CSSProperties;
+    content?: CSSProperties;
+    extra?: CSSProperties;
+    close?: CSSProperties;
+}
+export interface NoticeBarProps {
+    /** Notice text, the default slot wins */
+    content?: VueNode;
+    color?: NoticeBarColor;
+    /** Icon on the start side, pass `null` / `false` to hide it */
+    icon?: VueNode;
+    /** Extra area on the end side (before the close button) */
+    extra?: VueNode;
+    closable?: boolean;
+    closeIcon?: VueNode;
+    /** Wrap long text into multiple lines instead of scrolling */
+    wrap?: boolean;
+    /** Force (`true`) or disable (`false`) the marquee; by default it scrolls only when the text overflows */
+    scrollable?: boolean;
+    /** Delay in milliseconds before the marquee starts */
+    delay?: number;
+    /** Scrolling speed in px/s */
+    speed?: number;
+    shape?: NoticeBarShape;
+    /** `true`: full border, `'block'`: top and bottom borders only, `false`: none */
+    bordered?: boolean | 'block';
+    rootClass?: string;
+    classes?: NoticeBarSemanticClassNames;
+    styles?: NoticeBarSemanticStyles;
+}
+export interface NoticeBarEmits {
+    close: [event: MouseEvent];
+    click: [event: MouseEvent];
+    /** Fired every time the marquee finishes one round */
+    replay: [];
+}
+export interface NoticeBarSlots {
+    default?: () => any;
+    icon?: () => any;
+    extra?: () => any;
+    closeIcon?: () => any;
+}
+export interface NoticeBarExpose {
+    /** Re-measure and restart the marquee */
+    reset: () => void;
+}

package/dist/notice-bar/style/index.css

@@ -0,0 +1,171 @@
+.am-notice-bar {
+  /* component tokens */
+  --am-notice-bar-height: var(--am-control-height);
+  --am-notice-bar-font-size: var(--am-font-size);
+  --am-notice-bar-icon-size: 16px;
+  --am-notice-bar-padding-inline: var(--am-padding-sm);
+  --am-notice-bar-gap: var(--am-margin-xs);
+  --am-notice-bar-border-radius: var(--am-border-radius);
+  /* resolved by color classes */
+  --am-notice-bar-color: var(--am-color-warning-active);
+  --am-notice-bar-bg: var(--am-color-warning-bg);
+  --am-notice-bar-border-color: var(--am-color-warning-border);
+
+  display: flex;
+  gap: var(--am-notice-bar-gap);
+  align-items: center;
+  box-sizing: border-box;
+  min-height: var(--am-notice-bar-height);
+  padding: 0 var(--am-notice-bar-padding-inline);
+  color: var(--am-notice-bar-color);
+  font-size: var(--am-notice-bar-font-size);
+  font-family: var(--am-font-family);
+  line-height: var(--am-line-height);
+  background: var(--am-notice-bar-bg);
+  border: 0 var(--am-line-type) var(--am-notice-bar-border-color);
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* ---------- colors ---------- */
+.am-notice-bar-default {
+  --am-notice-bar-color: var(--am-color-text);
+  --am-notice-bar-bg: var(--am-color-fill-tertiary);
+  --am-notice-bar-border-color: var(--am-color-border);
+}
+
+.am-notice-bar-info {
+  --am-notice-bar-color: var(--am-color-info);
+  --am-notice-bar-bg: var(--am-color-info-bg);
+  --am-notice-bar-border-color: var(--am-color-info-border);
+}
+
+.am-notice-bar-success {
+  --am-notice-bar-color: var(--am-color-success-active);
+  --am-notice-bar-bg: var(--am-color-success-bg);
+  --am-notice-bar-border-color: var(--am-color-success-border);
+}
+
+.am-notice-bar-error {
+  --am-notice-bar-color: var(--am-color-error);
+  --am-notice-bar-bg: var(--am-color-error-bg);
+  --am-notice-bar-border-color: var(--am-color-error-border);
+}
+
+/* ---------- border & shape ---------- */
+.am-notice-bar-bordered {
+  border-width: var(--am-line-width);
+}
+
+.am-notice-bar-bordered-block {
+  border-block-width: var(--am-line-width);
+}
+
+.am-notice-bar-neutral {
+  border-radius: var(--am-notice-bar-border-radius);
+}
+
+.am-notice-bar-rounded {
+  border-radius: 999px;
+}
+
+.am-notice-bar-neutral.am-notice-bar-bordered-block,
+.am-notice-bar-rounded.am-notice-bar-bordered-block {
+  border-width: var(--am-line-width);
+}
+
+/* ---------- parts ---------- */
+.am-notice-bar-icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  font-size: var(--am-notice-bar-icon-size);
+  line-height: 1;
+}
+
+.am-notice-bar-wrapper {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.am-notice-bar-content {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition-timing-function: linear;
+  transition-property: transform;
+}
+
+.am-notice-bar-scrolling .am-notice-bar-content {
+  max-width: none;
+  overflow: visible;
+  text-overflow: clip;
+  will-change: transform;
+}
+
+.am-notice-bar-wrap {
+  padding-block: var(--am-padding-xs);
+}
+
+.am-notice-bar-wrap .am-notice-bar-content {
+  white-space: normal;
+  word-break: break-word;
+}
+
+.am-notice-bar-wrap .am-notice-bar-icon,
+.am-notice-bar-wrap .am-notice-bar-close {
+  align-self: flex-start;
+  height: calc(var(--am-notice-bar-font-size) * var(--am-line-height));
+}
+
+.am-notice-bar-extra {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.am-notice-bar-close {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font-size: var(--am-font-size-sm);
+  line-height: 1;
+  background: transparent;
+  border: 0;
+  outline: none;
+  opacity: 0.75;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  appearance: none;
+}
+
+.am-notice-bar-close::after {
+  position: absolute;
+  inset: -12px;
+  content: '';
+}
+
+.am-notice-bar-close:active {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .am-notice-bar-scrolling .am-notice-bar-content {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transform: none !important;
+    transition: none;
+  }
+}

package/dist/notification/Notification.js

@@ -0,0 +1,4 @@
+import Notification_vue_vue_type_script_setup_true_lang_default from "./Notification.vue_vue_type_script_setup_true_lang.js";
+// src/notification/Notification.vue
+var Notification_default = Notification_vue_vue_type_script_setup_true_lang_default;
+export { Notification_default as default };

package/dist/notification/Notification.vue.d.ts

@@ -0,0 +1,45 @@
+import type { NotificationProps, NotificationSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = NotificationSlots;
+declare const __VLS_base: import("vue").DefineComponent<NotificationProps, {
+    nativeElement: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<NotificationProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    title: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    icon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    role: "alert" | "status";
+    closable: boolean;
+    duration: number;
+    placement: import("./interface").NotificationEdge;
+    closeIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    actions: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    description: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    times: number;
+    showProgress: boolean;
+    pauseOnHover: boolean;
+    closeDisabled: 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;
+    };
+};