Initial commit: GamePortrait 竖屏版 - 深色豪华主题

This commit is contained in:
li
2026-01-16 17:47:53 +08:00
commit 40976e4b45
26611 changed files with 2843638 additions and 0 deletions
+43
View File
@@ -0,0 +1,43 @@
import { type PropType, type ExtractPropTypes } from 'vue';
import { ButtonType } from '../button';
export declare const actionBarButtonProps: {
to: PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
type: PropType<ButtonType>;
text: StringConstructor;
icon: StringConstructor;
color: StringConstructor;
loading: BooleanConstructor;
disabled: BooleanConstructor;
};
export type ActionBarButtonProps = ExtractPropTypes<typeof actionBarButtonProps>;
declare const _default: import("vue").DefineComponent<{
to: PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
type: PropType<ButtonType>;
text: StringConstructor;
icon: StringConstructor;
color: StringConstructor;
loading: BooleanConstructor;
disabled: BooleanConstructor;
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
to: PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
type: PropType<ButtonType>;
text: StringConstructor;
icon: StringConstructor;
color: StringConstructor;
loading: BooleanConstructor;
disabled: BooleanConstructor;
}>>, {
replace: boolean;
disabled: boolean;
loading: boolean;
}>;
export default _default;
+74
View File
@@ -0,0 +1,74 @@
import { createVNode as _createVNode } from "vue";
import { computed, defineComponent } from "vue";
import { extend, createNamespace } from "../utils/index.mjs";
import { ACTION_BAR_KEY } from "../action-bar/ActionBar.mjs";
import { useParent } from "@vant/use";
import { useExpose } from "../composables/use-expose.mjs";
import { useRoute, routeProps } from "../composables/use-route.mjs";
import { Button } from "../button/index.mjs";
const [name, bem] = createNamespace("action-bar-button");
const actionBarButtonProps = extend({}, routeProps, {
type: String,
text: String,
icon: String,
color: String,
loading: Boolean,
disabled: Boolean
});
var stdin_default = defineComponent({
name,
props: actionBarButtonProps,
setup(props, {
slots
}) {
const route = useRoute();
const {
parent,
index
} = useParent(ACTION_BAR_KEY);
const isFirst = computed(() => {
if (parent) {
const prev = parent.children[index.value - 1];
return !(prev && "isButton" in prev);
}
});
const isLast = computed(() => {
if (parent) {
const next = parent.children[index.value + 1];
return !(next && "isButton" in next);
}
});
useExpose({
isButton: true
});
return () => {
const {
type,
icon,
text,
color,
loading,
disabled
} = props;
return _createVNode(Button, {
"class": bem([type, {
last: isLast.value,
first: isFirst.value
}]),
"size": "large",
"type": type,
"icon": icon,
"color": color,
"loading": loading,
"disabled": disabled,
"onClick": route
}, {
default: () => [slots.default ? slots.default() : text]
});
};
}
});
export {
actionBarButtonProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
:root{--van-action-bar-button-height: 40px;--van-action-bar-button-warning-color: var(--van-gradient-orange);--van-action-bar-button-danger-color: var(--van-gradient-red)}.van-action-bar-button{flex:1;height:var(--van-action-bar-button-height);font-weight:var(--van-font-bold);font-size:var(--van-font-size-md);border:none;border-radius:0}.van-action-bar-button--first{margin-left:5px;border-top-left-radius:var(--van-radius-max);border-bottom-left-radius:var(--van-radius-max)}.van-action-bar-button--last{margin-right:5px;border-top-right-radius:var(--van-radius-max);border-bottom-right-radius:var(--van-radius-max)}.van-action-bar-button--warning{background:var(--van-action-bar-button-warning-color)}.van-action-bar-button--danger{background:var(--van-action-bar-button-danger-color)}@media (max-width: 321px){.van-action-bar-button{font-size:13px}}
+36
View File
@@ -0,0 +1,36 @@
export declare const ActionBarButton: import("../utils").WithInstall<import("vue").DefineComponent<{
to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
type: import("vue").PropType<import("..").ButtonType>;
text: StringConstructor;
icon: StringConstructor;
color: StringConstructor;
loading: BooleanConstructor;
disabled: BooleanConstructor;
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
type: import("vue").PropType<import("..").ButtonType>;
text: StringConstructor;
icon: StringConstructor;
color: StringConstructor;
loading: BooleanConstructor;
disabled: BooleanConstructor;
}>>, {
replace: boolean;
disabled: boolean;
loading: boolean;
}>>;
export default ActionBarButton;
export { actionBarButtonProps } from './ActionBarButton';
export type { ActionBarButtonProps } from './ActionBarButton';
export type { ActionBarButtonThemeVars } from './types';
declare module 'vue' {
interface GlobalComponents {
VanActionBarButton: typeof ActionBarButton;
}
}
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../utils/index.mjs";
import _ActionBarButton from "./ActionBarButton.mjs";
const ActionBarButton = withInstall(_ActionBarButton);
var stdin_default = ActionBarButton;
import { actionBarButtonProps } from "./ActionBarButton.mjs";
export {
ActionBarButton,
actionBarButtonProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
export {};
+7
View File
@@ -0,0 +1,7 @@
import "../../style/base.css";
import "../../action-bar/index.css";
import "../../badge/index.css";
import "../../icon/index.css";
import "../../loading/index.css";
import "../../button/index.css";
import "../index.css";
+5
View File
@@ -0,0 +1,5 @@
export type ActionBarButtonThemeVars = {
actionBarButtonHeight?: string;
actionBarButtonWarningColor?: string;
actionBarButtonDangerColor?: string;
};
View File
+48
View File
@@ -0,0 +1,48 @@
import { type PropType, type ExtractPropTypes } from 'vue';
import { type BadgeProps } from '../badge';
export declare const actionBarIconProps: {
to: PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
dot: BooleanConstructor;
text: StringConstructor;
icon: StringConstructor;
color: StringConstructor;
badge: (NumberConstructor | StringConstructor)[];
iconClass: PropType<unknown>;
badgeProps: PropType<Partial<BadgeProps>>;
iconPrefix: StringConstructor;
};
export type ActionBarIconProps = ExtractPropTypes<typeof actionBarIconProps>;
declare const _default: import("vue").DefineComponent<{
to: PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
dot: BooleanConstructor;
text: StringConstructor;
icon: StringConstructor;
color: StringConstructor;
badge: (NumberConstructor | StringConstructor)[];
iconClass: PropType<unknown>;
badgeProps: PropType<Partial<BadgeProps>>;
iconPrefix: StringConstructor;
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
to: PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
dot: BooleanConstructor;
text: StringConstructor;
icon: StringConstructor;
color: StringConstructor;
badge: (NumberConstructor | StringConstructor)[];
iconClass: PropType<unknown>;
badgeProps: PropType<Partial<BadgeProps>>;
iconPrefix: StringConstructor;
}>>, {
replace: boolean;
dot: boolean;
}>;
export default _default;
+69
View File
@@ -0,0 +1,69 @@
import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
import { defineComponent } from "vue";
import { extend, createNamespace, unknownProp, numericProp } from "../utils/index.mjs";
import { ACTION_BAR_KEY } from "../action-bar/ActionBar.mjs";
import { useParent } from "@vant/use";
import { useRoute, routeProps } from "../composables/use-route.mjs";
import { Icon } from "../icon/index.mjs";
import { Badge } from "../badge/index.mjs";
const [name, bem] = createNamespace("action-bar-icon");
const actionBarIconProps = extend({}, routeProps, {
dot: Boolean,
text: String,
icon: String,
color: String,
badge: numericProp,
iconClass: unknownProp,
badgeProps: Object,
iconPrefix: String
});
var stdin_default = defineComponent({
name,
props: actionBarIconProps,
setup(props, {
slots
}) {
const route = useRoute();
useParent(ACTION_BAR_KEY);
const renderIcon = () => {
const {
dot,
badge,
icon,
color,
iconClass,
badgeProps,
iconPrefix
} = props;
if (slots.icon) {
return _createVNode(Badge, _mergeProps({
"dot": dot,
"class": bem("icon"),
"content": badge
}, badgeProps), {
default: slots.icon
});
}
return _createVNode(Icon, {
"tag": "div",
"dot": dot,
"name": icon,
"badge": badge,
"color": color,
"class": [bem("icon"), iconClass],
"badgeProps": badgeProps,
"classPrefix": iconPrefix
}, null);
};
return () => _createVNode("div", {
"role": "button",
"class": bem(),
"tabindex": 0,
"onClick": route
}, [renderIcon(), slots.default ? slots.default() : props.text]);
}
});
export {
actionBarIconProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
:root{--van-action-bar-icon-width: 48px;--van-action-bar-icon-height: 100%;--van-action-bar-icon-color: var(--van-text-color);--van-action-bar-icon-size: 18px;--van-action-bar-icon-font-size: var(--van-font-size-xs);--van-action-bar-icon-active-color: var(--van-active-color);--van-action-bar-icon-text-color: var(--van-text-color);--van-action-bar-icon-background: var(--van-background-2)}.van-action-bar-icon{display:flex;flex-direction:column;justify-content:center;min-width:var(--van-action-bar-icon-width);height:var(--van-action-bar-icon-height);color:var(--van-action-bar-icon-text-color);font-size:var(--van-action-bar-icon-font-size);line-height:1;text-align:center;background:var(--van-action-bar-icon-background);cursor:pointer}.van-action-bar-icon:active{background-color:var(--van-action-bar-icon-active-color)}.van-action-bar-icon__icon{margin:0 auto var(--van-padding-base);color:var(--van-action-bar-icon-color);font-size:var(--van-action-bar-icon-size)}
+39
View File
@@ -0,0 +1,39 @@
export declare const ActionBarIcon: import("../utils").WithInstall<import("vue").DefineComponent<{
to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
dot: BooleanConstructor;
text: StringConstructor;
icon: StringConstructor;
color: StringConstructor;
badge: (NumberConstructor | StringConstructor)[];
iconClass: import("vue").PropType<unknown>;
badgeProps: import("vue").PropType<Partial<import("..").BadgeProps>>;
iconPrefix: StringConstructor;
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
dot: BooleanConstructor;
text: StringConstructor;
icon: StringConstructor;
color: StringConstructor;
badge: (NumberConstructor | StringConstructor)[];
iconClass: import("vue").PropType<unknown>;
badgeProps: import("vue").PropType<Partial<import("..").BadgeProps>>;
iconPrefix: StringConstructor;
}>>, {
replace: boolean;
dot: boolean;
}>>;
export default ActionBarIcon;
export { actionBarIconProps } from './ActionBarIcon';
export type { ActionBarIconProps } from './ActionBarIcon';
export type { ActionBarIconThemeVars } from './types';
declare module 'vue' {
interface GlobalComponents {
VanActionBarIcon: typeof ActionBarIcon;
}
}
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../utils/index.mjs";
import _ActionBarIcon from "./ActionBarIcon.mjs";
const ActionBarIcon = withInstall(_ActionBarIcon);
var stdin_default = ActionBarIcon;
import { actionBarIconProps } from "./ActionBarIcon.mjs";
export {
ActionBarIcon,
actionBarIconProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
export {};
+5
View File
@@ -0,0 +1,5 @@
import "../../style/base.css";
import "../../action-bar/index.css";
import "../../badge/index.css";
import "../../icon/index.css";
import "../index.css";
+10
View File
@@ -0,0 +1,10 @@
export type ActionBarIconThemeVars = {
actionBarIconWidth?: string;
actionBarIconHeight?: string;
actionBarIconColor?: string;
actionBarIconSize?: string;
actionBarIconFontSize?: string;
actionBarIconActiveColor?: string;
actionBarIconTextColor?: string;
actionBarIconBackground?: string;
};
View File
+27
View File
@@ -0,0 +1,27 @@
import { type ExtractPropTypes } from 'vue';
export declare const ACTION_BAR_KEY: unique symbol;
export declare const actionBarProps: {
placeholder: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
};
export type ActionBarProps = ExtractPropTypes<typeof actionBarProps>;
declare const _default: import("vue").DefineComponent<{
placeholder: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
placeholder: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
}>>, {
placeholder: boolean;
safeAreaInsetBottom: boolean;
}>;
export default _default;
+45
View File
@@ -0,0 +1,45 @@
import { createVNode as _createVNode } from "vue";
import { defineComponent, ref } from "vue";
import { truthProp, createNamespace } from "../utils/index.mjs";
import { useChildren } from "@vant/use";
import { usePlaceholder } from "../composables/use-placeholder.mjs";
const [name, bem] = createNamespace("action-bar");
const ACTION_BAR_KEY = Symbol(name);
const actionBarProps = {
placeholder: Boolean,
safeAreaInsetBottom: truthProp
};
var stdin_default = defineComponent({
name,
props: actionBarProps,
setup(props, {
slots
}) {
const root = ref();
const renderPlaceholder = usePlaceholder(root, bem);
const {
linkChildren
} = useChildren(ACTION_BAR_KEY);
linkChildren();
const renderActionBar = () => {
var _a;
return _createVNode("div", {
"ref": root,
"class": [bem(), {
"van-safe-area-bottom": props.safeAreaInsetBottom
}]
}, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
};
return () => {
if (props.placeholder) {
return renderPlaceholder(renderActionBar);
}
return renderActionBar();
};
}
});
export {
ACTION_BAR_KEY,
actionBarProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
:root{--van-action-bar-background: var(--van-background-2);--van-action-bar-height: 50px}.van-action-bar{position:fixed;right:0;bottom:0;left:0;display:flex;align-items:center;box-sizing:content-box;height:var(--van-action-bar-height);background:var(--van-action-bar-background)}
+25
View File
@@ -0,0 +1,25 @@
export declare const ActionBar: import("../utils").WithInstall<import("vue").DefineComponent<{
placeholder: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
placeholder: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
}>>, {
placeholder: boolean;
safeAreaInsetBottom: boolean;
}>>;
export default ActionBar;
export { actionBarProps } from './ActionBar';
export type { ActionBarProps } from './ActionBar';
export type { ActionBarThemeVars } from './types';
declare module 'vue' {
interface GlobalComponents {
VanActionBar: typeof ActionBar;
}
}
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../utils/index.mjs";
import _ActionBar from "./ActionBar.mjs";
const ActionBar = withInstall(_ActionBar);
var stdin_default = ActionBar;
import { actionBarProps } from "./ActionBar.mjs";
export {
ActionBar,
actionBarProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
export {};
+2
View File
@@ -0,0 +1,2 @@
import "../../style/base.css";
import "../index.css";
+4
View File
@@ -0,0 +1,4 @@
export type ActionBarThemeVars = {
actionBarBackground?: string;
actionBarHeight?: string;
};
View File
+194
View File
@@ -0,0 +1,194 @@
import { type ExtractPropTypes } from 'vue';
export type ActionSheetAction = {
name?: string;
color?: string;
subname?: string;
loading?: boolean;
disabled?: boolean;
callback?: (action: ActionSheetAction) => void;
className?: unknown;
};
export declare const actionSheetProps: {
show: BooleanConstructor;
zIndex: (NumberConstructor | StringConstructor)[];
overlay: {
type: BooleanConstructor;
default: true;
};
duration: (NumberConstructor | StringConstructor)[];
teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
lockScroll: {
type: BooleanConstructor;
default: true;
};
lazyRender: {
type: BooleanConstructor;
default: true;
};
beforeClose: import("vue").PropType<import("../utils").Interceptor>;
overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
overlayClass: import("vue").PropType<unknown>;
transitionAppear: BooleanConstructor;
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
} & {
title: StringConstructor;
round: {
type: BooleanConstructor;
default: true;
};
actions: {
type: import("vue").PropType<ActionSheetAction[]>;
default: () => never[];
};
closeIcon: {
type: import("vue").PropType<string>;
default: string;
};
closeable: {
type: BooleanConstructor;
default: true;
};
cancelText: StringConstructor;
description: StringConstructor;
closeOnPopstate: {
type: BooleanConstructor;
default: true;
};
closeOnClickAction: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
};
export type ActionSheetProps = ExtractPropTypes<typeof actionSheetProps>;
declare const _default: import("vue").DefineComponent<{
show: BooleanConstructor;
zIndex: (NumberConstructor | StringConstructor)[];
overlay: {
type: BooleanConstructor;
default: true;
};
duration: (NumberConstructor | StringConstructor)[];
teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
lockScroll: {
type: BooleanConstructor;
default: true;
};
lazyRender: {
type: BooleanConstructor;
default: true;
};
beforeClose: import("vue").PropType<import("../utils").Interceptor>;
overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
overlayClass: import("vue").PropType<unknown>;
transitionAppear: BooleanConstructor;
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
} & {
title: StringConstructor;
round: {
type: BooleanConstructor;
default: true;
};
actions: {
type: import("vue").PropType<ActionSheetAction[]>;
default: () => never[];
};
closeIcon: {
type: import("vue").PropType<string>;
default: string;
};
closeable: {
type: BooleanConstructor;
default: true;
};
cancelText: StringConstructor;
description: StringConstructor;
closeOnPopstate: {
type: BooleanConstructor;
default: true;
};
closeOnClickAction: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "cancel" | "update:show")[], "select" | "cancel" | "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
show: BooleanConstructor;
zIndex: (NumberConstructor | StringConstructor)[];
overlay: {
type: BooleanConstructor;
default: true;
};
duration: (NumberConstructor | StringConstructor)[];
teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
lockScroll: {
type: BooleanConstructor;
default: true;
};
lazyRender: {
type: BooleanConstructor;
default: true;
};
beforeClose: import("vue").PropType<import("../utils").Interceptor>;
overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
overlayClass: import("vue").PropType<unknown>;
transitionAppear: BooleanConstructor;
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
} & {
title: StringConstructor;
round: {
type: BooleanConstructor;
default: true;
};
actions: {
type: import("vue").PropType<ActionSheetAction[]>;
default: () => never[];
};
closeIcon: {
type: import("vue").PropType<string>;
default: string;
};
closeable: {
type: BooleanConstructor;
default: true;
};
cancelText: StringConstructor;
description: StringConstructor;
closeOnPopstate: {
type: BooleanConstructor;
default: true;
};
closeOnClickAction: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
}>> & {
onSelect?: ((...args: any[]) => any) | undefined;
"onUpdate:show"?: ((...args: any[]) => any) | undefined;
onCancel?: ((...args: any[]) => any) | undefined;
}, {
round: boolean;
safeAreaInsetBottom: boolean;
overlay: boolean;
show: boolean;
lockScroll: boolean;
lazyRender: boolean;
transitionAppear: boolean;
closeOnClickOverlay: boolean;
closeIcon: string;
closeable: boolean;
closeOnPopstate: boolean;
actions: ActionSheetAction[];
closeOnClickAction: boolean;
}>;
export default _default;
+132
View File
@@ -0,0 +1,132 @@
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
import { nextTick, defineComponent } from "vue";
import { pick, extend, truthProp, makeArrayProp, makeStringProp, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
import { Icon } from "../icon/index.mjs";
import { Popup } from "../popup/index.mjs";
import { Loading } from "../loading/index.mjs";
import { popupSharedProps, popupSharedPropKeys } from "../popup/shared.mjs";
const [name, bem] = createNamespace("action-sheet");
const actionSheetProps = extend({}, popupSharedProps, {
title: String,
round: truthProp,
actions: makeArrayProp(),
closeIcon: makeStringProp("cross"),
closeable: truthProp,
cancelText: String,
description: String,
closeOnPopstate: truthProp,
closeOnClickAction: Boolean,
safeAreaInsetBottom: truthProp
});
const popupInheritKeys = [...popupSharedPropKeys, "round", "closeOnPopstate", "safeAreaInsetBottom"];
var stdin_default = defineComponent({
name,
props: actionSheetProps,
emits: ["select", "cancel", "update:show"],
setup(props, {
slots,
emit
}) {
const updateShow = (show) => emit("update:show", show);
const onCancel = () => {
updateShow(false);
emit("cancel");
};
const renderHeader = () => {
if (props.title) {
return _createVNode("div", {
"class": bem("header")
}, [props.title, props.closeable && _createVNode(Icon, {
"name": props.closeIcon,
"class": [bem("close"), HAPTICS_FEEDBACK],
"onClick": onCancel
}, null)]);
}
};
const renderCancel = () => {
if (slots.cancel || props.cancelText) {
return [_createVNode("div", {
"class": bem("gap")
}, null), _createVNode("button", {
"type": "button",
"class": bem("cancel"),
"onClick": onCancel
}, [slots.cancel ? slots.cancel() : props.cancelText])];
}
};
const renderActionContent = (action, index) => {
if (action.loading) {
return _createVNode(Loading, {
"class": bem("loading-icon")
}, null);
}
if (slots.action) {
return slots.action({
action,
index
});
}
return [_createVNode("span", {
"class": bem("name")
}, [action.name]), action.subname && _createVNode("div", {
"class": bem("subname")
}, [action.subname])];
};
const renderAction = (action, index) => {
const {
color,
loading,
callback,
disabled,
className
} = action;
const onClick = () => {
if (disabled || loading) {
return;
}
if (callback) {
callback(action);
}
if (props.closeOnClickAction) {
updateShow(false);
}
nextTick(() => emit("select", action, index));
};
return _createVNode("button", {
"type": "button",
"style": {
color
},
"class": [bem("item", {
loading,
disabled
}), className],
"onClick": onClick
}, [renderActionContent(action, index)]);
};
const renderDescription = () => {
if (props.description || slots.description) {
const content = slots.description ? slots.description() : props.description;
return _createVNode("div", {
"class": bem("description")
}, [content]);
}
};
return () => _createVNode(Popup, _mergeProps({
"class": bem(),
"position": "bottom",
"onUpdate:show": updateShow
}, pick(props, popupInheritKeys)), {
default: () => {
var _a;
return [renderHeader(), renderDescription(), _createVNode("div", {
"class": bem("content")
}, [props.actions.map(renderAction), (_a = slots.default) == null ? void 0 : _a.call(slots)]), renderCancel()];
}
});
}
});
export {
actionSheetProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
:root{--van-action-sheet-max-height: 80%;--van-action-sheet-header-height: 48px;--van-action-sheet-header-font-size: var(--van-font-size-lg);--van-action-sheet-description-color: var(--van-text-color-2);--van-action-sheet-description-font-size: var(--van-font-size-md);--van-action-sheet-description-line-height: var(--van-line-height-md);--van-action-sheet-item-background: var(--van-background-2);--van-action-sheet-item-font-size: var(--van-font-size-lg);--van-action-sheet-item-line-height: var(--van-line-height-lg);--van-action-sheet-item-text-color: var(--van-text-color);--van-action-sheet-item-disabled-text-color: var(--van-text-color-3);--van-action-sheet-subname-color: var(--van-text-color-2);--van-action-sheet-subname-font-size: var(--van-font-size-sm);--van-action-sheet-subname-line-height: var(--van-line-height-sm);--van-action-sheet-close-icon-size: 22px;--van-action-sheet-close-icon-color: var(--van-gray-5);--van-action-sheet-close-icon-padding: 0 var(--van-padding-md);--van-action-sheet-cancel-text-color: var(--van-gray-7);--van-action-sheet-cancel-padding-top: var(--van-padding-xs);--van-action-sheet-cancel-padding-color: var(--van-background);--van-action-sheet-loading-icon-size: 22px}.van-action-sheet{display:flex;flex-direction:column;max-height:var(--van-action-sheet-max-height);overflow:hidden;color:var(--van-action-sheet-item-text-color)}.van-action-sheet__content{flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.van-action-sheet__item,.van-action-sheet__cancel{display:block;width:100%;padding:14px var(--van-padding-md);font-size:var(--van-action-sheet-item-font-size);background:var(--van-action-sheet-item-background);border:none;cursor:pointer}.van-action-sheet__item:active,.van-action-sheet__cancel:active{background-color:var(--van-active-color)}.van-action-sheet__item{line-height:var(--van-action-sheet-item-line-height)}.van-action-sheet__item--loading,.van-action-sheet__item--disabled{color:var(--van-action-sheet-item-disabled-text-color)}.van-action-sheet__item--loading:active,.van-action-sheet__item--disabled:active{background-color:var(--van-action-sheet-item-background)}.van-action-sheet__item--disabled{cursor:not-allowed}.van-action-sheet__item--loading{cursor:default}.van-action-sheet__cancel{flex-shrink:0;box-sizing:border-box;color:var(--van-action-sheet-cancel-text-color)}.van-action-sheet__subname{margin-top:var(--van-padding-xs);color:var(--van-action-sheet-subname-color);font-size:var(--van-action-sheet-subname-font-size);line-height:var(--van-action-sheet-subname-line-height)}.van-action-sheet__gap{display:block;height:var(--van-action-sheet-cancel-padding-top);background:var(--van-action-sheet-cancel-padding-color)}.van-action-sheet__header{flex-shrink:0;font-weight:var(--van-font-bold);font-size:var(--van-action-sheet-header-font-size);line-height:var(--van-action-sheet-header-height);text-align:center}.van-action-sheet__description{position:relative;flex-shrink:0;padding:20px var(--van-padding-md);color:var(--van-action-sheet-description-color);font-size:var(--van-action-sheet-description-font-size);line-height:var(--van-action-sheet-description-line-height);text-align:center}.van-action-sheet__description:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);border-bottom:1px solid var(--van-border-color);transform:scaleY(.5)}.van-action-sheet__loading-icon .van-loading__spinner{width:var(--van-action-sheet-loading-icon-size);height:var(--van-action-sheet-loading-icon-size)}.van-action-sheet__close{position:absolute;top:0;right:0;z-index:1;padding:var(--van-action-sheet-close-icon-padding);color:var(--van-action-sheet-close-icon-color);font-size:var(--van-action-sheet-close-icon-size);line-height:inherit}
+136
View File
@@ -0,0 +1,136 @@
export declare const ActionSheet: import("../utils").WithInstall<import("vue").DefineComponent<{
show: BooleanConstructor;
zIndex: (NumberConstructor | StringConstructor)[];
overlay: {
type: BooleanConstructor;
default: true;
};
duration: (NumberConstructor | StringConstructor)[];
teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
lockScroll: {
type: BooleanConstructor;
default: true;
};
lazyRender: {
type: BooleanConstructor;
default: true;
};
beforeClose: import("vue").PropType<import("../utils").Interceptor>;
overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
overlayClass: import("vue").PropType<unknown>;
transitionAppear: BooleanConstructor;
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
} & {
title: StringConstructor;
round: {
type: BooleanConstructor;
default: true;
};
actions: {
type: import("vue").PropType<import("./ActionSheet").ActionSheetAction[]>;
default: () => never[];
};
closeIcon: {
type: import("vue").PropType<string>;
default: string;
};
closeable: {
type: BooleanConstructor;
default: true;
};
cancelText: StringConstructor;
description: StringConstructor;
closeOnPopstate: {
type: BooleanConstructor;
default: true;
};
closeOnClickAction: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "cancel" | "update:show")[], "select" | "cancel" | "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
show: BooleanConstructor;
zIndex: (NumberConstructor | StringConstructor)[];
overlay: {
type: BooleanConstructor;
default: true;
};
duration: (NumberConstructor | StringConstructor)[];
teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
lockScroll: {
type: BooleanConstructor;
default: true;
};
lazyRender: {
type: BooleanConstructor;
default: true;
};
beforeClose: import("vue").PropType<import("../utils").Interceptor>;
overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
overlayClass: import("vue").PropType<unknown>;
transitionAppear: BooleanConstructor;
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
} & {
title: StringConstructor;
round: {
type: BooleanConstructor;
default: true;
};
actions: {
type: import("vue").PropType<import("./ActionSheet").ActionSheetAction[]>;
default: () => never[];
};
closeIcon: {
type: import("vue").PropType<string>;
default: string;
};
closeable: {
type: BooleanConstructor;
default: true;
};
cancelText: StringConstructor;
description: StringConstructor;
closeOnPopstate: {
type: BooleanConstructor;
default: true;
};
closeOnClickAction: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
}>> & {
onSelect?: ((...args: any[]) => any) | undefined;
"onUpdate:show"?: ((...args: any[]) => any) | undefined;
onCancel?: ((...args: any[]) => any) | undefined;
}, {
round: boolean;
safeAreaInsetBottom: boolean;
overlay: boolean;
show: boolean;
lockScroll: boolean;
lazyRender: boolean;
transitionAppear: boolean;
closeOnClickOverlay: boolean;
closeIcon: string;
closeable: boolean;
closeOnPopstate: boolean;
actions: import("./ActionSheet").ActionSheetAction[];
closeOnClickAction: boolean;
}>>;
export default ActionSheet;
export { actionSheetProps } from './ActionSheet';
export type { ActionSheetProps, ActionSheetAction } from './ActionSheet';
export type { ActionSheetThemeVars } from './types';
declare module 'vue' {
interface GlobalComponents {
VanActionSheet: typeof ActionSheet;
}
}
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../utils/index.mjs";
import _ActionSheet from "./ActionSheet.mjs";
const ActionSheet = withInstall(_ActionSheet);
var stdin_default = ActionSheet;
import { actionSheetProps } from "./ActionSheet.mjs";
export {
ActionSheet,
actionSheetProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
export {};
+7
View File
@@ -0,0 +1,7 @@
import "../../style/base.css";
import "../../badge/index.css";
import "../../icon/index.css";
import "../../loading/index.css";
import "../../overlay/index.css";
import "../../popup/index.css";
import "../index.css";
+23
View File
@@ -0,0 +1,23 @@
export type ActionSheetThemeVars = {
actionSheetMaxHeight?: string;
actionSheetHeaderHeight?: string;
actionSheetHeaderFontSize?: string;
actionSheetDescriptionColor?: string;
actionSheetDescriptionFontSize?: string;
actionSheetDescriptionLineHeight?: number | string;
actionSheetItemBackground?: string;
actionSheetItemFontSize?: string;
actionSheetItemLineHeight?: number | string;
actionSheetItemTextColor?: string;
actionSheetItemDisabledTextColor?: string;
actionSheetSubnameColor?: string;
actionSheetSubnameFontSize?: string;
actionSheetSubnameLineHeight?: number | string;
actionSheetCloseIconSize?: string;
actionSheetCloseIconColor?: string;
actionSheetCloseIconPadding?: string;
actionSheetCancelTextColor?: string;
actionSheetCancelPaddingTop?: string;
actionSheetCancelPaddingColor?: string;
actionSheetLoadingIconSize?: string;
};
View File
+157
View File
@@ -0,0 +1,157 @@
import { type PropType, type ExtractPropTypes } from 'vue';
import { isMobile } from '../utils';
import { AreaList } from '../area';
import type { AddressEditInfo, AddressEditSearchItem } from './types';
export declare const addressEditProps: {
areaList: PropType<AreaList>;
isSaving: BooleanConstructor;
isDeleting: BooleanConstructor;
validator: PropType<(key: string, value: string) => string | undefined>;
showArea: {
type: BooleanConstructor;
default: true;
};
showDetail: {
type: BooleanConstructor;
default: true;
};
showDelete: BooleanConstructor;
disableArea: BooleanConstructor;
searchResult: PropType<AddressEditSearchItem[]>;
telMaxlength: (NumberConstructor | StringConstructor)[];
showSetDefault: BooleanConstructor;
saveButtonText: StringConstructor;
areaPlaceholder: StringConstructor;
deleteButtonText: StringConstructor;
showSearchResult: BooleanConstructor;
detailRows: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
detailMaxlength: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
areaColumnsPlaceholder: {
type: PropType<string[]>;
default: () => never[];
};
addressInfo: {
type: PropType<Partial<AddressEditInfo>>;
default: () => AddressEditInfo;
};
telValidator: {
type: PropType<(val: string) => boolean>;
default: typeof isMobile;
};
};
export type AddressEditProps = ExtractPropTypes<typeof addressEditProps>;
declare const _default: import("vue").DefineComponent<{
areaList: PropType<AreaList>;
isSaving: BooleanConstructor;
isDeleting: BooleanConstructor;
validator: PropType<(key: string, value: string) => string | undefined>;
showArea: {
type: BooleanConstructor;
default: true;
};
showDetail: {
type: BooleanConstructor;
default: true;
};
showDelete: BooleanConstructor;
disableArea: BooleanConstructor;
searchResult: PropType<AddressEditSearchItem[]>;
telMaxlength: (NumberConstructor | StringConstructor)[];
showSetDefault: BooleanConstructor;
saveButtonText: StringConstructor;
areaPlaceholder: StringConstructor;
deleteButtonText: StringConstructor;
showSearchResult: BooleanConstructor;
detailRows: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
detailMaxlength: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
areaColumnsPlaceholder: {
type: PropType<string[]>;
default: () => never[];
};
addressInfo: {
type: PropType<Partial<AddressEditInfo>>;
default: () => AddressEditInfo;
};
telValidator: {
type: PropType<(val: string) => boolean>;
default: typeof isMobile;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "selectSearch" | "save" | "delete" | "clickArea" | "changeArea" | "changeDetail" | "changeDefault")[], "focus" | "selectSearch" | "save" | "delete" | "clickArea" | "changeArea" | "changeDetail" | "changeDefault", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
areaList: PropType<AreaList>;
isSaving: BooleanConstructor;
isDeleting: BooleanConstructor;
validator: PropType<(key: string, value: string) => string | undefined>;
showArea: {
type: BooleanConstructor;
default: true;
};
showDetail: {
type: BooleanConstructor;
default: true;
};
showDelete: BooleanConstructor;
disableArea: BooleanConstructor;
searchResult: PropType<AddressEditSearchItem[]>;
telMaxlength: (NumberConstructor | StringConstructor)[];
showSetDefault: BooleanConstructor;
saveButtonText: StringConstructor;
areaPlaceholder: StringConstructor;
deleteButtonText: StringConstructor;
showSearchResult: BooleanConstructor;
detailRows: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
detailMaxlength: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
areaColumnsPlaceholder: {
type: PropType<string[]>;
default: () => never[];
};
addressInfo: {
type: PropType<Partial<AddressEditInfo>>;
default: () => AddressEditInfo;
};
telValidator: {
type: PropType<(val: string) => boolean>;
default: typeof isMobile;
};
}>> & {
onFocus?: ((...args: any[]) => any) | undefined;
onSelectSearch?: ((...args: any[]) => any) | undefined;
onSave?: ((...args: any[]) => any) | undefined;
onDelete?: ((...args: any[]) => any) | undefined;
onClickArea?: ((...args: any[]) => any) | undefined;
onChangeArea?: ((...args: any[]) => any) | undefined;
onChangeDetail?: ((...args: any[]) => any) | undefined;
onChangeDefault?: ((...args: any[]) => any) | undefined;
}, {
isSaving: boolean;
isDeleting: boolean;
showArea: boolean;
showDetail: boolean;
showDelete: boolean;
disableArea: boolean;
showSetDefault: boolean;
showSearchResult: boolean;
detailRows: string | number;
detailMaxlength: string | number;
areaColumnsPlaceholder: string[];
addressInfo: Partial<AddressEditInfo>;
telValidator: (val: string) => boolean;
}>;
export default _default;
+289
View File
@@ -0,0 +1,289 @@
import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
import { ref, watch, computed, nextTick, reactive, defineComponent } from "vue";
import { extend, isObject, isMobile, truthProp, numericProp, makeArrayProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
import { useExpose } from "../composables/use-expose.mjs";
import { Area } from "../area/index.mjs";
import { Cell } from "../cell/index.mjs";
import { Form } from "../form/index.mjs";
import { Field } from "../field/index.mjs";
import { Popup } from "../popup/index.mjs";
import { showToast } from "../toast/index.mjs";
import { Button } from "../button/index.mjs";
import { Switch } from "../switch/index.mjs";
import AddressEditDetail from "./AddressEditDetail.mjs";
import { AREA_EMPTY_CODE } from "../area/utils.mjs";
const [name, bem, t] = createNamespace("address-edit");
const DEFAULT_DATA = {
name: "",
tel: "",
city: "",
county: "",
country: "",
province: "",
areaCode: "",
isDefault: false,
addressDetail: ""
};
const addressEditProps = {
areaList: Object,
isSaving: Boolean,
isDeleting: Boolean,
validator: Function,
showArea: truthProp,
showDetail: truthProp,
showDelete: Boolean,
disableArea: Boolean,
searchResult: Array,
telMaxlength: numericProp,
showSetDefault: Boolean,
saveButtonText: String,
areaPlaceholder: String,
deleteButtonText: String,
showSearchResult: Boolean,
detailRows: makeNumericProp(1),
detailMaxlength: makeNumericProp(200),
areaColumnsPlaceholder: makeArrayProp(),
addressInfo: {
type: Object,
default: () => extend({}, DEFAULT_DATA)
},
telValidator: {
type: Function,
default: isMobile
}
};
var stdin_default = defineComponent({
name,
props: addressEditProps,
emits: ["save", "focus", "delete", "clickArea", "changeArea", "changeDetail", "selectSearch", "changeDefault"],
setup(props, {
emit,
slots
}) {
const areaRef = ref();
const data = reactive({});
const showAreaPopup = ref(false);
const detailFocused = ref(false);
const areaListLoaded = computed(() => isObject(props.areaList) && Object.keys(props.areaList).length);
const areaText = computed(() => {
const {
province,
city,
county,
areaCode
} = data;
if (areaCode) {
const arr = [province, city, county];
if (province && province === city) {
arr.splice(1, 1);
}
return arr.filter(Boolean).join("/");
}
return "";
});
const hideBottomFields = computed(() => {
var _a;
return ((_a = props.searchResult) == null ? void 0 : _a.length) && detailFocused.value;
});
const onFocus = (key) => {
detailFocused.value = key === "addressDetail";
emit("focus", key);
};
const rules = computed(() => {
const {
validator,
telValidator
} = props;
const makeRule = (name2, emptyMessage) => ({
validator: (value) => {
if (validator) {
const message = validator(name2, value);
if (message) {
return message;
}
}
if (!value) {
return emptyMessage;
}
return true;
}
});
return {
name: [makeRule("name", t("nameEmpty"))],
tel: [makeRule("tel", t("telInvalid")), {
validator: telValidator,
message: t("telInvalid")
}],
areaCode: [makeRule("areaCode", t("areaEmpty"))],
addressDetail: [makeRule("addressDetail", t("addressEmpty"))]
};
});
const onSave = () => emit("save", data);
const onChangeDetail = (val) => {
data.addressDetail = val;
emit("changeDetail", val);
};
const assignAreaText = (options) => {
data.province = options[0].text;
data.city = options[1].text;
data.county = options[2].text;
};
const onAreaConfirm = ({
selectedValues,
selectedOptions
}) => {
if (selectedValues.some((value) => value === AREA_EMPTY_CODE)) {
showToast(t("areaEmpty"));
} else {
showAreaPopup.value = false;
assignAreaText(selectedOptions);
emit("changeArea", selectedOptions);
}
};
const onDelete = () => emit("delete", data);
const setAreaCode = (code) => {
data.areaCode = code || "";
};
const onDetailBlur = () => {
setTimeout(() => {
detailFocused.value = false;
});
};
const setAddressDetail = (value) => {
data.addressDetail = value;
};
const renderSetDefaultCell = () => {
if (props.showSetDefault) {
const slots2 = {
"right-icon": () => _createVNode(Switch, {
"modelValue": data.isDefault,
"onUpdate:modelValue": ($event) => data.isDefault = $event,
"onChange": (event) => emit("changeDefault", event)
}, null)
};
return _withDirectives(_createVNode(Cell, {
"center": true,
"title": t("defaultAddress"),
"class": bem("default")
}, slots2), [[_vShow, !hideBottomFields.value]]);
}
};
useExpose({
setAreaCode,
setAddressDetail
});
watch(() => props.addressInfo, (value) => {
extend(data, DEFAULT_DATA, value);
nextTick(() => {
var _a;
const options = (_a = areaRef.value) == null ? void 0 : _a.getSelectedOptions();
if (options && options.every((option) => option && option.value !== AREA_EMPTY_CODE)) {
assignAreaText(options);
}
});
}, {
deep: true,
immediate: true
});
return () => {
const {
disableArea
} = props;
return _createVNode(Form, {
"class": bem(),
"onSubmit": onSave
}, {
default: () => {
var _a;
return [_createVNode("div", {
"class": bem("fields")
}, [_createVNode(Field, {
"modelValue": data.name,
"onUpdate:modelValue": ($event) => data.name = $event,
"clearable": true,
"label": t("name"),
"rules": rules.value.name,
"placeholder": t("name"),
"onFocus": () => onFocus("name")
}, null), _createVNode(Field, {
"modelValue": data.tel,
"onUpdate:modelValue": ($event) => data.tel = $event,
"clearable": true,
"type": "tel",
"label": t("tel"),
"rules": rules.value.tel,
"maxlength": props.telMaxlength,
"placeholder": t("tel"),
"onFocus": () => onFocus("tel")
}, null), _withDirectives(_createVNode(Field, {
"readonly": true,
"label": t("area"),
"is-link": !disableArea,
"modelValue": areaText.value,
"rules": rules.value.areaCode,
"placeholder": props.areaPlaceholder || t("area"),
"onFocus": () => onFocus("areaCode"),
"onClick": () => {
emit("clickArea");
showAreaPopup.value = !disableArea;
}
}, null), [[_vShow, props.showArea]]), _createVNode(AddressEditDetail, {
"show": props.showDetail,
"rows": props.detailRows,
"rules": rules.value.addressDetail,
"value": data.addressDetail,
"focused": detailFocused.value,
"maxlength": props.detailMaxlength,
"searchResult": props.searchResult,
"showSearchResult": props.showSearchResult,
"onBlur": onDetailBlur,
"onFocus": () => onFocus("addressDetail"),
"onInput": onChangeDetail,
"onSelectSearch": (event) => emit("selectSearch", event)
}, null), (_a = slots.default) == null ? void 0 : _a.call(slots)]), renderSetDefaultCell(), _withDirectives(_createVNode("div", {
"class": bem("buttons")
}, [_createVNode(Button, {
"block": true,
"round": true,
"type": "primary",
"text": props.saveButtonText || t("save"),
"class": bem("button"),
"loading": props.isSaving,
"nativeType": "submit"
}, null), props.showDelete && _createVNode(Button, {
"block": true,
"round": true,
"class": bem("button"),
"loading": props.isDeleting,
"text": props.deleteButtonText || t("delete"),
"onClick": onDelete
}, null)]), [[_vShow, !hideBottomFields.value]]), _createVNode(Popup, {
"show": showAreaPopup.value,
"onUpdate:show": ($event) => showAreaPopup.value = $event,
"round": true,
"teleport": "body",
"position": "bottom",
"lazyRender": false
}, {
default: () => [_createVNode(Area, {
"modelValue": data.areaCode,
"onUpdate:modelValue": ($event) => data.areaCode = $event,
"ref": areaRef,
"loading": !areaListLoaded.value,
"areaList": props.areaList,
"columnsPlaceholder": props.areaColumnsPlaceholder,
"onConfirm": onAreaConfirm,
"onCancel": () => {
showAreaPopup.value = false;
}
}, null)]
})];
}
});
};
}
});
export {
addressEditProps,
stdin_default as default
};
+32
View File
@@ -0,0 +1,32 @@
import { type PropType } from 'vue';
import type { AddressEditSearchItem } from './types';
import type { FieldRule } from '../field/types';
declare const _default: import("vue").DefineComponent<{
show: BooleanConstructor;
rows: (NumberConstructor | StringConstructor)[];
value: StringConstructor;
rules: PropType<FieldRule[]>;
focused: BooleanConstructor;
maxlength: (NumberConstructor | StringConstructor)[];
searchResult: PropType<AddressEditSearchItem[]>;
showSearchResult: BooleanConstructor;
}, () => JSX.Element | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "focus" | "blur" | "selectSearch")[], "input" | "focus" | "blur" | "selectSearch", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
show: BooleanConstructor;
rows: (NumberConstructor | StringConstructor)[];
value: StringConstructor;
rules: PropType<FieldRule[]>;
focused: BooleanConstructor;
maxlength: (NumberConstructor | StringConstructor)[];
searchResult: PropType<AddressEditSearchItem[]>;
showSearchResult: BooleanConstructor;
}>> & {
onFocus?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
onInput?: ((...args: any[]) => any) | undefined;
onSelectSearch?: ((...args: any[]) => any) | undefined;
}, {
focused: boolean;
show: boolean;
showSearchResult: boolean;
}>;
export default _default;
+76
View File
@@ -0,0 +1,76 @@
import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
import { ref, defineComponent } from "vue";
import { createNamespace, numericProp } from "../utils/index.mjs";
import { Cell } from "../cell/index.mjs";
import { Field } from "../field/index.mjs";
const [name, bem] = createNamespace("address-edit-detail");
const t = createNamespace("address-edit")[2];
var stdin_default = defineComponent({
name,
props: {
show: Boolean,
rows: numericProp,
value: String,
rules: Array,
focused: Boolean,
maxlength: numericProp,
searchResult: Array,
showSearchResult: Boolean
},
emits: ["blur", "focus", "input", "selectSearch"],
setup(props, {
emit
}) {
const field = ref();
const showSearchResult = () => props.focused && props.searchResult && props.showSearchResult;
const onSelect = (express) => {
emit("selectSearch", express);
emit("input", `${express.address || ""} ${express.name || ""}`.trim());
};
const renderSearchResult = () => {
if (!showSearchResult()) {
return;
}
const {
searchResult
} = props;
return searchResult.map((express) => _createVNode(Cell, {
"clickable": true,
"key": (express.name || "") + (express.address || ""),
"icon": "location-o",
"title": express.name,
"label": express.address,
"class": bem("search-item"),
"border": false,
"onClick": () => onSelect(express)
}, null));
};
const onBlur = (event) => emit("blur", event);
const onFocus = (event) => emit("focus", event);
const onInput = (value) => emit("input", value);
return () => {
if (props.show) {
return _createVNode(_Fragment, null, [_createVNode(Field, {
"autosize": true,
"clearable": true,
"ref": field,
"class": bem(),
"rows": props.rows,
"type": "textarea",
"rules": props.rules,
"label": t("addressDetail"),
"border": !showSearchResult(),
"maxlength": props.maxlength,
"modelValue": props.value,
"placeholder": t("addressDetail"),
"onBlur": onBlur,
"onFocus": onFocus,
"onUpdate:modelValue": onInput
}, null), renderSearchResult()]);
}
};
}
});
export {
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
:root{--van-address-edit-padding: var(--van-padding-sm);--van-address-edit-buttons-padding: var(--van-padding-xl) var(--van-padding-base);--van-address-edit-button-margin-bottom: var(--van-padding-sm);--van-address-edit-button-font-size: var(--van-font-size-lg)}.van-address-edit{padding:var(--van-address-edit-padding)}.van-address-edit__fields{overflow:hidden;border-radius:var(--van-padding-xs)}.van-address-edit__fields .van-field__label{width:4.1em}.van-address-edit__default{margin-top:var(--van-padding-sm);overflow:hidden;border-radius:var(--van-padding-xs)}.van-address-edit__buttons{padding:var(--van-address-edit-buttons-padding)}.van-address-edit__button{margin-bottom:var(--van-address-edit-button-margin-bottom);font-size:var(--van-address-edit-button-font-size)}.van-address-edit-detail__search-item{background:var(--van-gray-2)}
+118
View File
@@ -0,0 +1,118 @@
import { AddressEditProps } from './AddressEdit';
export declare const AddressEdit: import("../utils").WithInstall<import("vue").DefineComponent<{
areaList: import("vue").PropType<import("..").AreaList>;
isSaving: BooleanConstructor;
isDeleting: BooleanConstructor;
validator: import("vue").PropType<(key: string, value: string) => string | undefined>;
showArea: {
type: BooleanConstructor;
default: true;
};
showDetail: {
type: BooleanConstructor;
default: true;
};
showDelete: BooleanConstructor;
disableArea: BooleanConstructor;
searchResult: import("vue").PropType<import("./types").AddressEditSearchItem[]>;
telMaxlength: (NumberConstructor | StringConstructor)[];
showSetDefault: BooleanConstructor;
saveButtonText: StringConstructor;
areaPlaceholder: StringConstructor;
deleteButtonText: StringConstructor;
showSearchResult: BooleanConstructor;
detailRows: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
detailMaxlength: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
areaColumnsPlaceholder: {
type: import("vue").PropType<string[]>;
default: () => never[];
};
addressInfo: {
type: import("vue").PropType<Partial<import("./types").AddressEditInfo>>;
default: () => import("./types").AddressEditInfo;
};
telValidator: {
type: import("vue").PropType<(val: string) => boolean>;
default: typeof import("../utils").isMobile;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "selectSearch" | "save" | "delete" | "clickArea" | "changeArea" | "changeDetail" | "changeDefault")[], "focus" | "selectSearch" | "save" | "delete" | "clickArea" | "changeArea" | "changeDetail" | "changeDefault", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
areaList: import("vue").PropType<import("..").AreaList>;
isSaving: BooleanConstructor;
isDeleting: BooleanConstructor;
validator: import("vue").PropType<(key: string, value: string) => string | undefined>;
showArea: {
type: BooleanConstructor;
default: true;
};
showDetail: {
type: BooleanConstructor;
default: true;
};
showDelete: BooleanConstructor;
disableArea: BooleanConstructor;
searchResult: import("vue").PropType<import("./types").AddressEditSearchItem[]>;
telMaxlength: (NumberConstructor | StringConstructor)[];
showSetDefault: BooleanConstructor;
saveButtonText: StringConstructor;
areaPlaceholder: StringConstructor;
deleteButtonText: StringConstructor;
showSearchResult: BooleanConstructor;
detailRows: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
detailMaxlength: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
areaColumnsPlaceholder: {
type: import("vue").PropType<string[]>;
default: () => never[];
};
addressInfo: {
type: import("vue").PropType<Partial<import("./types").AddressEditInfo>>;
default: () => import("./types").AddressEditInfo;
};
telValidator: {
type: import("vue").PropType<(val: string) => boolean>;
default: typeof import("../utils").isMobile;
};
}>> & {
onFocus?: ((...args: any[]) => any) | undefined;
onSelectSearch?: ((...args: any[]) => any) | undefined;
onSave?: ((...args: any[]) => any) | undefined;
onDelete?: ((...args: any[]) => any) | undefined;
onClickArea?: ((...args: any[]) => any) | undefined;
onChangeArea?: ((...args: any[]) => any) | undefined;
onChangeDetail?: ((...args: any[]) => any) | undefined;
onChangeDefault?: ((...args: any[]) => any) | undefined;
}, {
isSaving: boolean;
isDeleting: boolean;
showArea: boolean;
showDetail: boolean;
showDelete: boolean;
disableArea: boolean;
showSetDefault: boolean;
showSearchResult: boolean;
detailRows: string | number;
detailMaxlength: string | number;
areaColumnsPlaceholder: string[];
addressInfo: Partial<import("./types").AddressEditInfo>;
telValidator: (val: string) => boolean;
}>>;
export default AddressEdit;
export { addressEditProps } from './AddressEdit';
export type { AddressEditProps };
export type { AddressEditInfo, AddressEditInstance, AddressEditThemeVars, AddressEditSearchItem, } from './types';
declare module 'vue' {
interface GlobalComponents {
VanAddressEdit: typeof AddressEdit;
}
}
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../utils/index.mjs";
import _AddressEdit from "./AddressEdit.mjs";
const AddressEdit = withInstall(_AddressEdit);
var stdin_default = AddressEdit;
import { addressEditProps } from "./AddressEdit.mjs";
export {
AddressEdit,
addressEditProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
export {};
+19
View File
@@ -0,0 +1,19 @@
import "../../style/base.css";
import "../../badge/index.css";
import "../../icon/index.css";
import "../../cell/index.css";
import "../../field/index.css";
import "../../loading/index.css";
import "../../switch/index.css";
import "../../button/index.css";
import "../../overlay/index.css";
import "../../popup/index.css";
import "../../toast/index.css";
import "../../sticky/index.css";
import "../../swipe/index.css";
import "../../swipe-item/index.css";
import "../../tabs/index.css";
import "../../tab/index.css";
import "../../picker/index.css";
import "../../picker-group/index.css";
import "../index.css";
+28
View File
@@ -0,0 +1,28 @@
import type { ComponentPublicInstance } from 'vue';
import type { AddressEditProps } from './AddressEdit';
export type AddressEditSearchItem = {
name?: string;
address?: string;
};
export type AddressEditInfo = {
tel: string;
name: string;
city: string;
county: string;
country: string;
province: string;
areaCode: string;
isDefault?: boolean;
addressDetail: string;
};
export type AddressEditExpose = {
setAreaCode: (code?: string | undefined) => void;
setAddressDetail: (value: string) => void;
};
export type AddressEditInstance = ComponentPublicInstance<AddressEditProps, AddressEditExpose>;
export type AddressEditThemeVars = {
addressEditPadding?: string;
addressEditButtonsPadding?: string;
addressEditButtonMarginBottom?: string;
addressEditButtonFontSize?: string;
};
View File
+69
View File
@@ -0,0 +1,69 @@
import { type ExtractPropTypes } from 'vue';
import { AddressListAddress } from './AddressListItem';
export declare const addressListProps: {
list: {
type: import("vue").PropType<AddressListAddress[]>;
default: () => never[];
};
modelValue: (NumberConstructor | StringConstructor)[];
switchable: {
type: BooleanConstructor;
default: true;
};
disabledText: StringConstructor;
disabledList: {
type: import("vue").PropType<AddressListAddress[]>;
default: () => never[];
};
addButtonText: StringConstructor;
defaultTagText: StringConstructor;
};
export type AddressListProps = ExtractPropTypes<typeof addressListProps>;
declare const _default: import("vue").DefineComponent<{
list: {
type: import("vue").PropType<AddressListAddress[]>;
default: () => never[];
};
modelValue: (NumberConstructor | StringConstructor)[];
switchable: {
type: BooleanConstructor;
default: true;
};
disabledText: StringConstructor;
disabledList: {
type: import("vue").PropType<AddressListAddress[]>;
default: () => never[];
};
addButtonText: StringConstructor;
defaultTagText: StringConstructor;
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:modelValue" | "add" | "edit" | "clickItem" | "editDisabled" | "selectDisabled")[], "select" | "update:modelValue" | "add" | "edit" | "clickItem" | "editDisabled" | "selectDisabled", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
list: {
type: import("vue").PropType<AddressListAddress[]>;
default: () => never[];
};
modelValue: (NumberConstructor | StringConstructor)[];
switchable: {
type: BooleanConstructor;
default: true;
};
disabledText: StringConstructor;
disabledList: {
type: import("vue").PropType<AddressListAddress[]>;
default: () => never[];
};
addButtonText: StringConstructor;
defaultTagText: StringConstructor;
}>> & {
onSelect?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onEdit?: ((...args: any[]) => any) | undefined;
onAdd?: ((...args: any[]) => any) | undefined;
onClickItem?: ((...args: any[]) => any) | undefined;
onEditDisabled?: ((...args: any[]) => any) | undefined;
onSelectDisabled?: ((...args: any[]) => any) | undefined;
}, {
switchable: boolean;
list: AddressListAddress[];
disabledList: AddressListAddress[];
}>;
export default _default;
+83
View File
@@ -0,0 +1,83 @@
import { createVNode as _createVNode } from "vue";
import { defineComponent } from "vue";
import { truthProp, numericProp, makeArrayProp, createNamespace } from "../utils/index.mjs";
import { Button } from "../button/index.mjs";
import { RadioGroup } from "../radio-group/index.mjs";
import AddressListItem from "./AddressListItem.mjs";
const [name, bem, t] = createNamespace("address-list");
const addressListProps = {
list: makeArrayProp(),
modelValue: numericProp,
switchable: truthProp,
disabledText: String,
disabledList: makeArrayProp(),
addButtonText: String,
defaultTagText: String
};
var stdin_default = defineComponent({
name,
props: addressListProps,
emits: ["add", "edit", "select", "clickItem", "editDisabled", "selectDisabled", "update:modelValue"],
setup(props, {
slots,
emit
}) {
const renderItem = (item, index, disabled) => {
const onEdit = () => emit(disabled ? "editDisabled" : "edit", item, index);
const onClick = () => emit("clickItem", item, index);
const onSelect = () => {
emit(disabled ? "selectDisabled" : "select", item, index);
if (!disabled) {
emit("update:modelValue", item.id);
}
};
return _createVNode(AddressListItem, {
"key": item.id,
"address": item,
"disabled": disabled,
"switchable": props.switchable,
"defaultTagText": props.defaultTagText,
"onEdit": onEdit,
"onClick": onClick,
"onSelect": onSelect
}, {
bottom: slots["item-bottom"],
tag: slots.tag
});
};
const renderList = (list, disabled) => {
if (list) {
return list.map((item, index) => renderItem(item, index, disabled));
}
};
const renderBottom = () => _createVNode("div", {
"class": [bem("bottom"), "van-safe-area-bottom"]
}, [_createVNode(Button, {
"round": true,
"block": true,
"type": "primary",
"text": props.addButtonText || t("add"),
"class": bem("add"),
"onClick": () => emit("add")
}, null)]);
return () => {
var _a, _b;
const List = renderList(props.list);
const DisabledList = renderList(props.disabledList, true);
const DisabledText = props.disabledText && _createVNode("div", {
"class": bem("disabled-text")
}, [props.disabledText]);
return _createVNode("div", {
"class": bem()
}, [(_a = slots.top) == null ? void 0 : _a.call(slots), _createVNode(RadioGroup, {
"modelValue": props.modelValue
}, {
default: () => [List]
}), DisabledText, DisabledList, (_b = slots.default) == null ? void 0 : _b.call(slots), renderBottom()]);
};
}
});
export {
addressListProps,
stdin_default as default
};
+34
View File
@@ -0,0 +1,34 @@
import { type PropType } from 'vue';
import { type Numeric } from '../utils';
export type AddressListAddress = {
id: Numeric;
tel: Numeric;
name: string;
address: string;
isDefault?: boolean;
};
declare const _default: import("vue").DefineComponent<{
address: {
type: PropType<AddressListAddress>;
required: true;
};
disabled: BooleanConstructor;
switchable: BooleanConstructor;
defaultTagText: StringConstructor;
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "click" | "edit")[], "select" | "click" | "edit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
address: {
type: PropType<AddressListAddress>;
required: true;
};
disabled: BooleanConstructor;
switchable: BooleanConstructor;
defaultTagText: StringConstructor;
}>> & {
onClick?: ((...args: any[]) => any) | undefined;
onSelect?: ((...args: any[]) => any) | undefined;
onEdit?: ((...args: any[]) => any) | undefined;
}, {
disabled: boolean;
switchable: boolean;
}>;
export default _default;
+96
View File
@@ -0,0 +1,96 @@
import { createVNode as _createVNode } from "vue";
import { defineComponent } from "vue";
import { extend, createNamespace, makeRequiredProp } from "../utils/index.mjs";
import { Tag } from "../tag/index.mjs";
import { Icon } from "../icon/index.mjs";
import { Cell } from "../cell/index.mjs";
import { Radio } from "../radio/index.mjs";
const [name, bem] = createNamespace("address-item");
var stdin_default = defineComponent({
name,
props: {
address: makeRequiredProp(Object),
disabled: Boolean,
switchable: Boolean,
defaultTagText: String
},
emits: ["edit", "click", "select"],
setup(props, {
slots,
emit
}) {
const onClick = () => {
if (props.switchable) {
emit("select");
}
emit("click");
};
const renderRightIcon = () => _createVNode(Icon, {
"name": "edit",
"class": bem("edit"),
"onClick": (event) => {
event.stopPropagation();
emit("edit");
emit("click");
}
}, null);
const renderTag = () => {
if (slots.tag) {
return slots.tag(props.address);
}
if (props.address.isDefault && props.defaultTagText) {
return _createVNode(Tag, {
"type": "primary",
"round": true,
"class": bem("tag")
}, {
default: () => [props.defaultTagText]
});
}
};
const renderContent = () => {
const {
address,
disabled,
switchable
} = props;
const Info = [_createVNode("div", {
"class": bem("name")
}, [`${address.name} ${address.tel}`, renderTag()]), _createVNode("div", {
"class": bem("address")
}, [address.address])];
if (switchable && !disabled) {
return _createVNode(Radio, {
"name": address.id,
"iconSize": 18
}, {
default: () => [Info]
});
}
return Info;
};
return () => {
var _a;
const {
disabled
} = props;
return _createVNode("div", {
"class": bem({
disabled
}),
"onClick": onClick
}, [_createVNode(Cell, {
"border": false,
"titleClass": bem("title")
}, {
title: renderContent,
"right-icon": renderRightIcon
}), (_a = slots.bottom) == null ? void 0 : _a.call(slots, extend({}, props.address, {
disabled
}))]);
};
}
});
export {
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
:root{--van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;--van-address-list-disabled-text-color: var(--van-text-color-2);--van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;--van-address-list-disabled-text-font-size: var(--van-font-size-md);--van-address-list-disabled-text-line-height: var(--van-line-height-md);--van-address-list-add-button-z-index: 999;--van-address-list-item-padding: var(--van-padding-sm);--van-address-list-item-text-color: var(--van-text-color);--van-address-list-item-disabled-text-color: var(--van-text-color-3);--van-address-list-item-font-size: 13px;--van-address-list-item-line-height: var(--van-line-height-sm);--van-address-list-radio-color: var(--van-primary-color);--van-address-list-edit-icon-size: 20px}.van-address-list{box-sizing:border-box;height:100%;padding:var(--van-address-list-padding)}.van-address-list__bottom{position:fixed;bottom:0;left:0;z-index:var(--van-address-list-add-button-z-index);box-sizing:border-box;width:100%;padding-left:var(--van-padding-md);padding-right:var(--van-padding-md);background-color:var(--van-background-2)}.van-address-list__add{height:40px;margin:5px 0}.van-address-list__disabled-text{padding:var(--van-address-list-disabled-text-padding);color:var(--van-address-list-disabled-text-color);font-size:var(--van-address-list-disabled-text-font-size);line-height:var(--van-address-list-disabled-text-line-height)}.van-address-item{padding:var(--van-address-list-item-padding);background-color:var(--van-background-2);border-radius:var(--van-radius-lg)}.van-address-item:not(:last-child){margin-bottom:var(--van-padding-sm)}.van-address-item__title{padding-right:44px}.van-address-item__name{display:flex;align-items:center;margin-bottom:var(--van-padding-xs);font-size:var(--van-font-size-lg);line-height:var(--van-line-height-lg)}.van-address-item__tag{flex:none;margin-left:var(--van-padding-xs);padding-top:0;padding-bottom:0;line-height:1.4em}.van-address-item__address{color:var(--van-address-list-item-text-color);font-size:var(--van-address-list-item-font-size);line-height:var(--van-address-list-item-line-height)}.van-address-item--disabled .van-address-item__name,.van-address-item--disabled .van-address-item__address{color:var(--van-address-list-item-disabled-text-color)}.van-address-item__edit{position:absolute;top:50%;right:var(--van-padding-md);color:var(--van-gray-6);font-size:var(--van-address-list-edit-icon-size);transform:translateY(-50%)}.van-address-item .van-cell{padding:0}.van-address-item .van-radio__label{margin-left:var(--van-padding-sm)}.van-address-item .van-radio__icon--checked .van-icon{background-color:var(--van-address-list-radio-color);border-color:var(--van-address-list-radio-color)}
+57
View File
@@ -0,0 +1,57 @@
export declare const AddressList: import("../utils").WithInstall<import("vue").DefineComponent<{
list: {
type: import("vue").PropType<import("./AddressListItem").AddressListAddress[]>;
default: () => never[];
};
modelValue: (NumberConstructor | StringConstructor)[];
switchable: {
type: BooleanConstructor;
default: true;
};
disabledText: StringConstructor;
disabledList: {
type: import("vue").PropType<import("./AddressListItem").AddressListAddress[]>;
default: () => never[];
};
addButtonText: StringConstructor;
defaultTagText: StringConstructor;
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:modelValue" | "add" | "edit" | "clickItem" | "editDisabled" | "selectDisabled")[], "select" | "update:modelValue" | "add" | "edit" | "clickItem" | "editDisabled" | "selectDisabled", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
list: {
type: import("vue").PropType<import("./AddressListItem").AddressListAddress[]>;
default: () => never[];
};
modelValue: (NumberConstructor | StringConstructor)[];
switchable: {
type: BooleanConstructor;
default: true;
};
disabledText: StringConstructor;
disabledList: {
type: import("vue").PropType<import("./AddressListItem").AddressListAddress[]>;
default: () => never[];
};
addButtonText: StringConstructor;
defaultTagText: StringConstructor;
}>> & {
onSelect?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onEdit?: ((...args: any[]) => any) | undefined;
onAdd?: ((...args: any[]) => any) | undefined;
onClickItem?: ((...args: any[]) => any) | undefined;
onEditDisabled?: ((...args: any[]) => any) | undefined;
onSelectDisabled?: ((...args: any[]) => any) | undefined;
}, {
switchable: boolean;
list: import("./AddressListItem").AddressListAddress[];
disabledList: import("./AddressListItem").AddressListAddress[];
}>>;
export default AddressList;
export { addressListProps } from './AddressList';
export type { AddressListProps } from './AddressList';
export type { AddressListAddress } from './AddressListItem';
export type { AddressListThemeVars } from './types';
declare module 'vue' {
interface GlobalComponents {
VanAddressList: typeof AddressList;
}
}
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../utils/index.mjs";
import _AddressList from "./AddressList.mjs";
const AddressList = withInstall(_AddressList);
var stdin_default = AddressList;
import { addressListProps } from "./AddressList.mjs";
export {
AddressList,
addressListProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
export {};
+11
View File
@@ -0,0 +1,11 @@
import "../../style/base.css";
import "../../badge/index.css";
import "../../icon/index.css";
import "../../tag/index.css";
import "../../cell/index.css";
import "../../loading/index.css";
import "../../button/index.css";
import "../../radio-group/index.css";
import "../../checkbox/index.css";
import "../../radio/index.css";
import "../index.css";
+15
View File
@@ -0,0 +1,15 @@
export type AddressListThemeVars = {
addressListPadding?: string;
addressListDisabledTextColor?: string;
addressListDisabledTextPadding?: string;
addressListDisabledTextFontSize?: string;
addressListDisabledTextLineHeight?: number | string;
addressListAddButtonZIndex?: number | string;
addressListItemPadding?: string;
addressListItemTextColor?: string;
addressListItemDisabledTextColor?: string;
addressListItemFontSize?: string;
addressListItemLineHeight?: number | string;
addressListRadioColor?: string;
addressListEditIconSize?: string;
};
View File
+136
View File
@@ -0,0 +1,136 @@
import { type PropType, type ExtractPropTypes } from 'vue';
import type { AreaList } from './types';
export declare const areaProps: {
loading: BooleanConstructor;
readonly: BooleanConstructor;
allowHtml: BooleanConstructor;
optionHeight: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
showToolbar: {
type: BooleanConstructor;
default: true;
};
swipeDuration: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
visibleOptionNum: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
} & {
title: StringConstructor;
cancelButtonText: StringConstructor;
confirmButtonText: StringConstructor;
} & {
modelValue: StringConstructor;
columnsNum: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
columnsPlaceholder: {
type: PropType<string[]>;
default: () => never[];
};
areaList: {
type: PropType<AreaList>;
default: () => {};
};
};
export type AreaProps = ExtractPropTypes<typeof areaProps>;
declare const _default: import("vue").DefineComponent<{
loading: BooleanConstructor;
readonly: BooleanConstructor;
allowHtml: BooleanConstructor;
optionHeight: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
showToolbar: {
type: BooleanConstructor;
default: true;
};
swipeDuration: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
visibleOptionNum: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
} & {
title: StringConstructor;
cancelButtonText: StringConstructor;
confirmButtonText: StringConstructor;
} & {
modelValue: StringConstructor;
columnsNum: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
columnsPlaceholder: {
type: PropType<string[]>;
default: () => never[];
};
areaList: {
type: PropType<AreaList>;
default: () => {};
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "confirm")[], "update:modelValue" | "cancel" | "change" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
loading: BooleanConstructor;
readonly: BooleanConstructor;
allowHtml: BooleanConstructor;
optionHeight: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
showToolbar: {
type: BooleanConstructor;
default: true;
};
swipeDuration: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
visibleOptionNum: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
} & {
title: StringConstructor;
cancelButtonText: StringConstructor;
confirmButtonText: StringConstructor;
} & {
modelValue: StringConstructor;
columnsNum: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
columnsPlaceholder: {
type: PropType<string[]>;
default: () => never[];
};
areaList: {
type: PropType<AreaList>;
default: () => {};
};
}>> & {
onChange?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onCancel?: ((...args: any[]) => any) | undefined;
onConfirm?: ((...args: any[]) => any) | undefined;
}, {
readonly: boolean;
loading: boolean;
allowHtml: boolean;
optionHeight: string | number;
showToolbar: boolean;
swipeDuration: string | number;
visibleOptionNum: string | number;
columnsNum: string | number;
columnsPlaceholder: string[];
areaList: AreaList;
}>;
export default _default;
+77
View File
@@ -0,0 +1,77 @@
import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
import { ref, watch, computed, defineComponent } from "vue";
import { pick, extend, makeArrayProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
import { pickerSharedProps } from "../picker/Picker.mjs";
import { INHERIT_PROPS, INHERIT_SLOTS, formatDataForCascade } from "./utils.mjs";
import { useExpose } from "../composables/use-expose.mjs";
import { Picker } from "../picker/index.mjs";
const [name, bem] = createNamespace("area");
const areaProps = extend({}, pickerSharedProps, {
modelValue: String,
columnsNum: makeNumericProp(3),
columnsPlaceholder: makeArrayProp(),
areaList: {
type: Object,
default: () => ({})
}
});
var stdin_default = defineComponent({
name,
props: areaProps,
emits: ["change", "confirm", "cancel", "update:modelValue"],
setup(props, {
emit,
slots
}) {
const codes = ref([]);
const picker = ref();
const columns = computed(() => formatDataForCascade(props));
const onChange = (...args) => emit("change", ...args);
const onCancel = (...args) => emit("cancel", ...args);
const onConfirm = (...args) => emit("confirm", ...args);
watch(codes, (newCodes) => {
const lastCode = newCodes.length ? newCodes[newCodes.length - 1] : "";
if (lastCode && lastCode !== props.modelValue) {
emit("update:modelValue", lastCode);
}
}, {
deep: true
});
watch(() => props.modelValue, (newCode) => {
if (newCode) {
const lastCode = codes.value.length ? codes.value[codes.value.length - 1] : "";
if (newCode !== lastCode) {
codes.value = [`${newCode.slice(0, 2)}0000`, `${newCode.slice(0, 4)}00`, newCode].slice(0, +props.columnsNum);
}
} else {
codes.value = [];
}
}, {
immediate: true
});
useExpose({
confirm: () => {
var _a;
return (_a = picker.value) == null ? void 0 : _a.confirm();
},
getSelectedOptions: () => {
var _a;
return ((_a = picker.value) == null ? void 0 : _a.getSelectedOptions()) || [];
}
});
return () => _createVNode(Picker, _mergeProps({
"ref": picker,
"modelValue": codes.value,
"onUpdate:modelValue": ($event) => codes.value = $event,
"class": bem(),
"columns": columns.value,
"onChange": onChange,
"onCancel": onCancel,
"onConfirm": onConfirm
}, pick(props, INHERIT_PROPS)), pick(slots, INHERIT_SLOTS));
}
});
export {
areaProps,
stdin_default as default
};
+102
View File
@@ -0,0 +1,102 @@
export declare const Area: import("../utils").WithInstall<import("vue").DefineComponent<{
loading: BooleanConstructor;
readonly: BooleanConstructor;
allowHtml: BooleanConstructor;
optionHeight: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
showToolbar: {
type: BooleanConstructor;
default: true;
};
swipeDuration: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
visibleOptionNum: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
} & {
title: StringConstructor;
cancelButtonText: StringConstructor;
confirmButtonText: StringConstructor;
} & {
modelValue: StringConstructor;
columnsNum: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
columnsPlaceholder: {
type: import("vue").PropType<string[]>;
default: () => never[];
};
areaList: {
type: import("vue").PropType<import("./types").AreaList>;
default: () => {};
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "confirm")[], "update:modelValue" | "cancel" | "change" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
loading: BooleanConstructor;
readonly: BooleanConstructor;
allowHtml: BooleanConstructor;
optionHeight: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
showToolbar: {
type: BooleanConstructor;
default: true;
};
swipeDuration: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
visibleOptionNum: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
} & {
title: StringConstructor;
cancelButtonText: StringConstructor;
confirmButtonText: StringConstructor;
} & {
modelValue: StringConstructor;
columnsNum: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
columnsPlaceholder: {
type: import("vue").PropType<string[]>;
default: () => never[];
};
areaList: {
type: import("vue").PropType<import("./types").AreaList>;
default: () => {};
};
}>> & {
onChange?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onCancel?: ((...args: any[]) => any) | undefined;
onConfirm?: ((...args: any[]) => any) | undefined;
}, {
readonly: boolean;
loading: boolean;
allowHtml: boolean;
optionHeight: string | number;
showToolbar: boolean;
swipeDuration: string | number;
visibleOptionNum: string | number;
columnsNum: string | number;
columnsPlaceholder: string[];
areaList: import("./types").AreaList;
}>>;
export default Area;
export { areaProps } from './Area';
export type { AreaProps } from './Area';
export type { AreaList, AreaInstance } from './types';
declare module 'vue' {
interface GlobalComponents {
VanArea: typeof Area;
}
}
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../utils/index.mjs";
import _Area from "./Area.mjs";
const Area = withInstall(_Area);
var stdin_default = Area;
import { areaProps } from "./Area.mjs";
export {
Area,
areaProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
export {};
+10
View File
@@ -0,0 +1,10 @@
import "../../style/base.css";
import "../../badge/index.css";
import "../../loading/index.css";
import "../../sticky/index.css";
import "../../swipe/index.css";
import "../../swipe-item/index.css";
import "../../tabs/index.css";
import "../../tab/index.css";
import "../../picker/index.css";
import "../../picker-group/index.css";
+9
View File
@@ -0,0 +1,9 @@
import type { ComponentPublicInstance } from 'vue';
import { PickerExpose } from '../picker/types';
import type { AreaProps } from './Area';
export type AreaList = {
city_list: Record<string, string>;
county_list: Record<string, string>;
province_list: Record<string, string>;
};
export type AreaInstance = ComponentPublicInstance<AreaProps, PickerExpose>;
View File
+6
View File
@@ -0,0 +1,6 @@
import type { AreaProps } from '.';
import type { PickerOption } from '../picker';
export declare const AREA_EMPTY_CODE = "000000";
export declare const INHERIT_SLOTS: readonly ["title", "cancel", "confirm", "toolbar", "columns-top", "columns-bottom"];
export declare const INHERIT_PROPS: readonly ["title", "loading", "readonly", "optionHeight", "swipeDuration", "visibleOptionNum", "cancelButtonText", "confirmButtonText"];
export declare function formatDataForCascade({ areaList, columnsNum, columnsPlaceholder: placeholder, }: AreaProps): PickerOption[];
+92
View File
@@ -0,0 +1,92 @@
const AREA_EMPTY_CODE = "000000";
const INHERIT_SLOTS = [
"title",
"cancel",
"confirm",
"toolbar",
"columns-top",
"columns-bottom"
];
const INHERIT_PROPS = [
"title",
"loading",
"readonly",
"optionHeight",
"swipeDuration",
"visibleOptionNum",
"cancelButtonText",
"confirmButtonText"
];
const makeOption = (text = "", value = AREA_EMPTY_CODE, children = void 0) => ({
text,
value,
children
});
function formatDataForCascade({
areaList,
columnsNum,
columnsPlaceholder: placeholder
}) {
const {
city_list: city = {},
county_list: county = {},
province_list: province = {}
} = areaList;
const showCity = +columnsNum > 1;
const showCounty = +columnsNum > 2;
const getProvinceChildren = () => {
if (showCity) {
return placeholder.length ? [
makeOption(
placeholder[0],
AREA_EMPTY_CODE,
showCounty ? [] : void 0
)
] : [];
}
};
const provinceMap = /* @__PURE__ */ new Map();
Object.keys(province).forEach((code) => {
provinceMap.set(
code.slice(0, 2),
makeOption(province[code], code, getProvinceChildren())
);
});
const cityMap = /* @__PURE__ */ new Map();
if (showCity) {
const getCityChildren = () => {
if (showCounty) {
return placeholder.length ? [makeOption(placeholder[1])] : [];
}
};
Object.keys(city).forEach((code) => {
const option = makeOption(city[code], code, getCityChildren());
cityMap.set(code.slice(0, 4), option);
const province2 = provinceMap.get(code.slice(0, 2));
if (province2) {
province2.children.push(option);
}
});
}
if (showCounty) {
Object.keys(county).forEach((code) => {
const city2 = cityMap.get(code.slice(0, 4));
if (city2) {
city2.children.push(makeOption(county[code], code));
}
});
}
const options = Array.from(provinceMap.values());
if (placeholder.length) {
const county2 = showCounty ? [makeOption(placeholder[2])] : void 0;
const city2 = showCity ? [makeOption(placeholder[1], AREA_EMPTY_CODE, county2)] : void 0;
options.unshift(makeOption(placeholder[0], AREA_EMPTY_CODE, city2));
}
return options;
}
export {
AREA_EMPTY_CODE,
INHERIT_PROPS,
INHERIT_SLOTS,
formatDataForCascade
};
+53
View File
@@ -0,0 +1,53 @@
import { type PropType, type ExtractPropTypes } from 'vue';
export declare const backTopProps: {
right: (NumberConstructor | StringConstructor)[];
bottom: (NumberConstructor | StringConstructor)[];
zIndex: (NumberConstructor | StringConstructor)[];
target: PropType<string | import("vue").RendererElement | null | undefined>;
offset: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
immediate: BooleanConstructor;
teleport: {
type: PropType<string | import("vue").RendererElement | null | undefined>;
default: string;
};
};
export type BackTopProps = ExtractPropTypes<typeof backTopProps>;
declare const _default: import("vue").DefineComponent<{
right: (NumberConstructor | StringConstructor)[];
bottom: (NumberConstructor | StringConstructor)[];
zIndex: (NumberConstructor | StringConstructor)[];
target: PropType<string | import("vue").RendererElement | null | undefined>;
offset: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
immediate: BooleanConstructor;
teleport: {
type: PropType<string | import("vue").RendererElement | null | undefined>;
default: string;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
right: (NumberConstructor | StringConstructor)[];
bottom: (NumberConstructor | StringConstructor)[];
zIndex: (NumberConstructor | StringConstructor)[];
target: PropType<string | import("vue").RendererElement | null | undefined>;
offset: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
immediate: BooleanConstructor;
teleport: {
type: PropType<string | import("vue").RendererElement | null | undefined>;
default: string;
};
}>> & {
onClick?: ((...args: any[]) => any) | undefined;
}, {
offset: string | number;
immediate: boolean;
teleport: string | import("vue").RendererElement | null | undefined;
}>;
export default _default;
+103
View File
@@ -0,0 +1,103 @@
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
import { ref, watch, computed, Teleport, nextTick, onMounted, defineComponent } from "vue";
import { extend, addUnit, inBrowser, numericProp, getScrollTop, getZIndexStyle, createNamespace, makeNumericProp } from "../utils/index.mjs";
import { throttle } from "../lazyload/vue-lazyload/util.mjs";
import { useEventListener, getScrollParent } from "@vant/use";
import { Icon } from "../icon/index.mjs";
const [name, bem] = createNamespace("back-top");
const backTopProps = {
right: numericProp,
bottom: numericProp,
zIndex: numericProp,
target: [String, Object],
offset: makeNumericProp(200),
immediate: Boolean,
teleport: {
type: [String, Object],
default: "body"
}
};
var stdin_default = defineComponent({
name,
inheritAttrs: false,
props: backTopProps,
emits: ["click"],
setup(props, {
emit,
slots,
attrs
}) {
const show = ref(false);
const root = ref();
const scrollParent = ref();
const style = computed(() => extend(getZIndexStyle(props.zIndex), {
right: addUnit(props.right),
bottom: addUnit(props.bottom)
}));
const onClick = (event) => {
var _a;
emit("click", event);
(_a = scrollParent.value) == null ? void 0 : _a.scrollTo({
top: 0,
behavior: props.immediate ? "auto" : "smooth"
});
};
const scroll = () => {
show.value = scrollParent.value ? getScrollTop(scrollParent.value) >= +props.offset : false;
};
const getTarget = () => {
const {
target
} = props;
if (typeof target === "string") {
const el = document.querySelector(target);
if (el) {
return el;
}
if (process.env.NODE_ENV !== "production") {
console.error(`[Vant] BackTop: target element "${target}" was not found, the BackTop component will not be rendered.`);
}
} else {
return target;
}
};
const updateTarget = () => {
if (inBrowser) {
nextTick(() => {
scrollParent.value = props.target ? getTarget() : getScrollParent(root.value);
scroll();
});
}
};
useEventListener("scroll", throttle(scroll, 100), {
target: scrollParent
});
onMounted(updateTarget);
watch(() => props.target, updateTarget);
return () => {
const Content = _createVNode("div", _mergeProps({
"ref": root,
"class": bem({
active: show.value
}),
"style": style.value,
"onClick": onClick
}, attrs), [slots.default ? slots.default() : _createVNode(Icon, {
"name": "back-top",
"class": bem("icon")
}, null)]);
if (props.teleport) {
return _createVNode(Teleport, {
"to": props.teleport
}, {
default: () => [Content]
});
}
return Content;
};
}
});
export {
backTopProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
:root{--van-back-top-size: 40px;--van-back-top-right: 30px;--van-back-top-bottom: 40px;--van-back-top-z-index: 100;--van-back-top-icon-size: 20px;--van-back-top-text-color: #fff;--van-back-top-background: var(--van-blue)}.van-back-top{position:fixed;display:flex;align-items:center;justify-content:center;width:var(--van-back-top-size);height:var(--van-back-top-size);right:var(--van-back-top-right);bottom:var(--van-back-top-bottom);z-index:var(--van-back-top-z-index);cursor:pointer;color:var(--van-back-top-text-color);border-radius:var(--van-radius-max);box-shadow:0 2px 8px rgba(0,0,0,.12);transform:scale(0);transition:var(--van-duration-base) cubic-bezier(.25,.8,.5,1);background-color:var(--van-back-top-background)}.van-back-top:active{opacity:var(--van-active-opacity)}.van-back-top--active{transform:scale(1)}.van-back-top__icon{font-size:var(--van-back-top-icon-size);font-weight:var(--van-font-bold)}
+44
View File
@@ -0,0 +1,44 @@
export declare const BackTop: import("../utils").WithInstall<import("vue").DefineComponent<{
right: (NumberConstructor | StringConstructor)[];
bottom: (NumberConstructor | StringConstructor)[];
zIndex: (NumberConstructor | StringConstructor)[];
target: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
offset: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
immediate: BooleanConstructor;
teleport: {
type: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
default: string;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
right: (NumberConstructor | StringConstructor)[];
bottom: (NumberConstructor | StringConstructor)[];
zIndex: (NumberConstructor | StringConstructor)[];
target: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
offset: {
type: (NumberConstructor | StringConstructor)[];
default: number;
};
immediate: BooleanConstructor;
teleport: {
type: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
default: string;
};
}>> & {
onClick?: ((...args: any[]) => any) | undefined;
}, {
offset: string | number;
immediate: boolean;
teleport: string | import("vue").RendererElement | null | undefined;
}>>;
export default BackTop;
export { backTopProps } from './BackTop';
export type { BackTopProps } from './BackTop';
export type { BackTopThemeVars } from './types';
declare module 'vue' {
interface GlobalComponents {
VanBackTop: typeof BackTop;
}
}
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../utils/index.mjs";
import _BackTop from "./BackTop.mjs";
const BackTop = withInstall(_BackTop);
var stdin_default = BackTop;
import { backTopProps } from "./BackTop.mjs";
export {
BackTop,
backTopProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
export {};
+4
View File
@@ -0,0 +1,4 @@
import "../../style/base.css";
import "../../badge/index.css";
import "../../icon/index.css";
import "../index.css";
+9
View File
@@ -0,0 +1,9 @@
export type BackTopThemeVars = {
backTopSize?: string;
backTopRight?: string;
backTopBottom?: string;
backTopZIndex?: number | string;
backTopIconSize?: string;
backTopTextColor?: string;
backTopBackground?: string;
};
View File
+66
View File
@@ -0,0 +1,66 @@
import { type PropType, type ExtractPropTypes } from 'vue';
import { type Numeric } from '../utils';
export type BadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
export declare const badgeProps: {
dot: BooleanConstructor;
max: (NumberConstructor | StringConstructor)[];
tag: {
type: PropType<keyof HTMLElementTagNameMap>;
default: keyof HTMLElementTagNameMap;
};
color: StringConstructor;
offset: PropType<[Numeric, Numeric]>;
content: (NumberConstructor | StringConstructor)[];
showZero: {
type: BooleanConstructor;
default: true;
};
position: {
type: PropType<BadgePosition>;
default: BadgePosition;
};
};
export type BadgeProps = ExtractPropTypes<typeof badgeProps>;
declare const _default: import("vue").DefineComponent<{
dot: BooleanConstructor;
max: (NumberConstructor | StringConstructor)[];
tag: {
type: PropType<keyof HTMLElementTagNameMap>;
default: keyof HTMLElementTagNameMap;
};
color: StringConstructor;
offset: PropType<[Numeric, Numeric]>;
content: (NumberConstructor | StringConstructor)[];
showZero: {
type: BooleanConstructor;
default: true;
};
position: {
type: PropType<BadgePosition>;
default: BadgePosition;
};
}, () => JSX.Element | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
dot: BooleanConstructor;
max: (NumberConstructor | StringConstructor)[];
tag: {
type: PropType<keyof HTMLElementTagNameMap>;
default: keyof HTMLElementTagNameMap;
};
color: StringConstructor;
offset: PropType<[Numeric, Numeric]>;
content: (NumberConstructor | StringConstructor)[];
showZero: {
type: BooleanConstructor;
default: true;
};
position: {
type: PropType<BadgePosition>;
default: BadgePosition;
};
}>>, {
dot: boolean;
tag: keyof HTMLElementTagNameMap;
showZero: boolean;
position: BadgePosition;
}>;
export default _default;
+105
View File
@@ -0,0 +1,105 @@
import { createVNode as _createVNode } from "vue";
import { computed, defineComponent } from "vue";
import { isDef, addUnit, isNumeric, truthProp, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
const [name, bem] = createNamespace("badge");
const badgeProps = {
dot: Boolean,
max: numericProp,
tag: makeStringProp("div"),
color: String,
offset: Array,
content: numericProp,
showZero: truthProp,
position: makeStringProp("top-right")
};
var stdin_default = defineComponent({
name,
props: badgeProps,
setup(props, {
slots
}) {
const hasContent = () => {
if (slots.content) {
return true;
}
const {
content,
showZero
} = props;
return isDef(content) && content !== "" && (showZero || content !== 0 && content !== "0");
};
const renderContent = () => {
const {
dot,
max,
content
} = props;
if (!dot && hasContent()) {
if (slots.content) {
return slots.content();
}
if (isDef(max) && isNumeric(content) && +content > +max) {
return `${max}+`;
}
return content;
}
};
const getOffsetWithMinusString = (val) => val.startsWith("-") ? val.replace("-", "") : `-${val}`;
const style = computed(() => {
const style2 = {
background: props.color
};
if (props.offset) {
const [x, y] = props.offset;
const {
position
} = props;
const [offsetY, offsetX] = position.split("-");
if (slots.default) {
if (typeof y === "number") {
style2[offsetY] = addUnit(offsetY === "top" ? y : -y);
} else {
style2[offsetY] = offsetY === "top" ? addUnit(y) : getOffsetWithMinusString(y);
}
if (typeof x === "number") {
style2[offsetX] = addUnit(offsetX === "left" ? x : -x);
} else {
style2[offsetX] = offsetX === "left" ? addUnit(x) : getOffsetWithMinusString(x);
}
} else {
style2.marginTop = addUnit(y);
style2.marginLeft = addUnit(x);
}
}
return style2;
});
const renderBadge = () => {
if (hasContent() || props.dot) {
return _createVNode("div", {
"class": bem([props.position, {
dot: props.dot,
fixed: !!slots.default
}]),
"style": style.value
}, [renderContent()]);
}
};
return () => {
if (slots.default) {
const {
tag
} = props;
return _createVNode(tag, {
"class": bem("wrapper")
}, {
default: () => [slots.default(), renderBadge()]
});
}
return renderBadge();
};
}
});
export {
badgeProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
:root{--van-badge-size: 16px;--van-badge-color: var(--van-white);--van-badge-padding: 0 3px;--van-badge-font-size: var(--van-font-size-sm);--van-badge-font-weight: var(--van-font-bold);--van-badge-border-width: var(--van-border-width);--van-badge-background: var(--van-danger-color);--van-badge-dot-color: var(--van-danger-color);--van-badge-dot-size: 8px;--van-badge-font: -apple-system-font, helvetica neue, arial, sans-serif}.van-badge{display:inline-block;box-sizing:border-box;min-width:var(--van-badge-size);padding:var(--van-badge-padding);color:var(--van-badge-color);font-weight:var(--van-badge-font-weight);font-size:var(--van-badge-font-size);font-family:var(--van-badge-font);line-height:1.2;text-align:center;background:var(--van-badge-background);border:var(--van-badge-border-width) solid var(--van-background-2);border-radius:var(--van-radius-max)}.van-badge--fixed{position:absolute;transform-origin:100%}.van-badge--top-left{top:0;left:0;transform:translate(-50%,-50%)}.van-badge--top-right{top:0;right:0;transform:translate(50%,-50%)}.van-badge--bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.van-badge--bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.van-badge--dot{width:var(--van-badge-dot-size);min-width:0;height:var(--van-badge-dot-size);background:var(--van-badge-dot-color);border-radius:100%;border:none;padding:0}.van-badge__wrapper{position:relative;display:inline-block}
+51
View File
@@ -0,0 +1,51 @@
export declare const Badge: import("../utils").WithInstall<import("vue").DefineComponent<{
dot: BooleanConstructor;
max: (NumberConstructor | StringConstructor)[];
tag: {
type: import("vue").PropType<keyof HTMLElementTagNameMap>;
default: keyof HTMLElementTagNameMap;
};
color: StringConstructor;
offset: import("vue").PropType<[import("../utils").Numeric, import("../utils").Numeric]>;
content: (NumberConstructor | StringConstructor)[];
showZero: {
type: BooleanConstructor;
default: true;
};
position: {
type: import("vue").PropType<import("./Badge").BadgePosition>;
default: import("./Badge").BadgePosition;
};
}, () => JSX.Element | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
dot: BooleanConstructor;
max: (NumberConstructor | StringConstructor)[];
tag: {
type: import("vue").PropType<keyof HTMLElementTagNameMap>;
default: keyof HTMLElementTagNameMap;
};
color: StringConstructor;
offset: import("vue").PropType<[import("../utils").Numeric, import("../utils").Numeric]>;
content: (NumberConstructor | StringConstructor)[];
showZero: {
type: BooleanConstructor;
default: true;
};
position: {
type: import("vue").PropType<import("./Badge").BadgePosition>;
default: import("./Badge").BadgePosition;
};
}>>, {
dot: boolean;
tag: keyof HTMLElementTagNameMap;
showZero: boolean;
position: import("./Badge").BadgePosition;
}>>;
export default Badge;
export { badgeProps } from './Badge';
export type { BadgeProps, BadgePosition } from './Badge';
export type { BadgeThemeVars } from './types';
declare module 'vue' {
interface GlobalComponents {
VanBadge: typeof Badge;
}
}
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../utils/index.mjs";
import _Badge from "./Badge.mjs";
const Badge = withInstall(_Badge);
var stdin_default = Badge;
import { badgeProps } from "./Badge.mjs";
export {
Badge,
badgeProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
export {};
+2
View File
@@ -0,0 +1,2 @@
import "../../style/base.css";
import "../index.css";
+12
View File
@@ -0,0 +1,12 @@
export type BadgeThemeVars = {
badgeSize?: string;
badgeColor?: string;
badgePadding?: string;
badgeFontSize?: string;
badgeFontWeight?: string;
badgeBorderWidth?: string;
badgeBackground?: string;
badgeDotColor?: string;
badgeDotSize?: string;
badgeFont?: string;
};
View File
+140
View File
@@ -0,0 +1,140 @@
import { type PropType, type ExtractPropTypes } from 'vue';
import { LoadingType } from '../loading';
import { ButtonSize, ButtonType, ButtonNativeType, ButtonIconPosition } from './types';
export declare const buttonProps: {
to: PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
tag: {
type: PropType<keyof HTMLElementTagNameMap>;
default: keyof HTMLElementTagNameMap;
};
text: StringConstructor;
icon: StringConstructor;
type: {
type: PropType<ButtonType>;
default: ButtonType;
};
size: {
type: PropType<ButtonSize>;
default: ButtonSize;
};
color: StringConstructor;
block: BooleanConstructor;
plain: BooleanConstructor;
round: BooleanConstructor;
square: BooleanConstructor;
loading: BooleanConstructor;
hairline: BooleanConstructor;
disabled: BooleanConstructor;
iconPrefix: StringConstructor;
nativeType: {
type: PropType<ButtonNativeType>;
default: ButtonNativeType;
};
loadingSize: (NumberConstructor | StringConstructor)[];
loadingText: StringConstructor;
loadingType: PropType<LoadingType>;
iconPosition: {
type: PropType<ButtonIconPosition>;
default: ButtonIconPosition;
};
};
export type ButtonProps = ExtractPropTypes<typeof buttonProps>;
declare const _default: import("vue").DefineComponent<{
to: PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
tag: {
type: PropType<keyof HTMLElementTagNameMap>;
default: keyof HTMLElementTagNameMap;
};
text: StringConstructor;
icon: StringConstructor;
type: {
type: PropType<ButtonType>;
default: ButtonType;
};
size: {
type: PropType<ButtonSize>;
default: ButtonSize;
};
color: StringConstructor;
block: BooleanConstructor;
plain: BooleanConstructor;
round: BooleanConstructor;
square: BooleanConstructor;
loading: BooleanConstructor;
hairline: BooleanConstructor;
disabled: BooleanConstructor;
iconPrefix: StringConstructor;
nativeType: {
type: PropType<ButtonNativeType>;
default: ButtonNativeType;
};
loadingSize: (NumberConstructor | StringConstructor)[];
loadingText: StringConstructor;
loadingType: PropType<LoadingType>;
iconPosition: {
type: PropType<ButtonIconPosition>;
default: ButtonIconPosition;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
to: PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
tag: {
type: PropType<keyof HTMLElementTagNameMap>;
default: keyof HTMLElementTagNameMap;
};
text: StringConstructor;
icon: StringConstructor;
type: {
type: PropType<ButtonType>;
default: ButtonType;
};
size: {
type: PropType<ButtonSize>;
default: ButtonSize;
};
color: StringConstructor;
block: BooleanConstructor;
plain: BooleanConstructor;
round: BooleanConstructor;
square: BooleanConstructor;
loading: BooleanConstructor;
hairline: BooleanConstructor;
disabled: BooleanConstructor;
iconPrefix: StringConstructor;
nativeType: {
type: PropType<ButtonNativeType>;
default: ButtonNativeType;
};
loadingSize: (NumberConstructor | StringConstructor)[];
loadingText: StringConstructor;
loadingType: PropType<LoadingType>;
iconPosition: {
type: PropType<ButtonIconPosition>;
default: ButtonIconPosition;
};
}>> & {
onClick?: ((...args: any[]) => any) | undefined;
}, {
replace: boolean;
type: ButtonType;
tag: keyof HTMLElementTagNameMap;
round: boolean;
disabled: boolean;
size: ButtonSize;
loading: boolean;
block: boolean;
plain: boolean;
square: boolean;
hairline: boolean;
nativeType: ButtonNativeType;
iconPosition: ButtonIconPosition;
}>;
export default _default;
+149
View File
@@ -0,0 +1,149 @@
import { createVNode as _createVNode } from "vue";
import { defineComponent } from "vue";
import { extend, numericProp, preventDefault, makeStringProp, createNamespace, BORDER_SURROUND } from "../utils/index.mjs";
import { useRoute, routeProps } from "../composables/use-route.mjs";
import { Icon } from "../icon/index.mjs";
import { Loading } from "../loading/index.mjs";
const [name, bem] = createNamespace("button");
const buttonProps = extend({}, routeProps, {
tag: makeStringProp("button"),
text: String,
icon: String,
type: makeStringProp("default"),
size: makeStringProp("normal"),
color: String,
block: Boolean,
plain: Boolean,
round: Boolean,
square: Boolean,
loading: Boolean,
hairline: Boolean,
disabled: Boolean,
iconPrefix: String,
nativeType: makeStringProp("button"),
loadingSize: numericProp,
loadingText: String,
loadingType: String,
iconPosition: makeStringProp("left")
});
var stdin_default = defineComponent({
name,
props: buttonProps,
emits: ["click"],
setup(props, {
emit,
slots
}) {
const route = useRoute();
const renderLoadingIcon = () => {
if (slots.loading) {
return slots.loading();
}
return _createVNode(Loading, {
"size": props.loadingSize,
"type": props.loadingType,
"class": bem("loading")
}, null);
};
const renderIcon = () => {
if (props.loading) {
return renderLoadingIcon();
}
if (slots.icon) {
return _createVNode("div", {
"class": bem("icon")
}, [slots.icon()]);
}
if (props.icon) {
return _createVNode(Icon, {
"name": props.icon,
"class": bem("icon"),
"classPrefix": props.iconPrefix
}, null);
}
};
const renderText = () => {
let text;
if (props.loading) {
text = props.loadingText;
} else {
text = slots.default ? slots.default() : props.text;
}
if (text) {
return _createVNode("span", {
"class": bem("text")
}, [text]);
}
};
const getStyle = () => {
const {
color,
plain
} = props;
if (color) {
const style = {
color: plain ? color : "white"
};
if (!plain) {
style.background = color;
}
if (color.includes("gradient")) {
style.border = 0;
} else {
style.borderColor = color;
}
return style;
}
};
const onClick = (event) => {
if (props.loading) {
preventDefault(event);
} else if (!props.disabled) {
emit("click", event);
route();
}
};
return () => {
const {
tag,
type,
size,
block,
round,
plain,
square,
loading,
disabled,
hairline,
nativeType,
iconPosition
} = props;
const classes = [bem([type, size, {
plain,
block,
round,
square,
loading,
disabled,
hairline
}]), {
[BORDER_SURROUND]: hairline
}];
return _createVNode(tag, {
"type": nativeType,
"class": classes,
"style": getStyle(),
"disabled": disabled,
"onClick": onClick
}, {
default: () => [_createVNode("div", {
"class": bem("content")
}, [iconPosition === "left" && renderIcon(), renderText(), iconPosition === "right" && renderIcon()])]
});
};
}
});
export {
buttonProps,
stdin_default as default
};
+1
View File
File diff suppressed because one or more lines are too long
+104
View File
@@ -0,0 +1,104 @@
export declare const Button: import("../utils").WithInstall<import("vue").DefineComponent<{
to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
tag: {
type: import("vue").PropType<keyof HTMLElementTagNameMap>;
default: keyof HTMLElementTagNameMap;
};
text: StringConstructor;
icon: StringConstructor;
type: {
type: import("vue").PropType<import("./types").ButtonType>;
default: import("./types").ButtonType;
};
size: {
type: import("vue").PropType<import("./types").ButtonSize>;
default: import("./types").ButtonSize;
};
color: StringConstructor;
block: BooleanConstructor;
plain: BooleanConstructor;
round: BooleanConstructor;
square: BooleanConstructor;
loading: BooleanConstructor;
hairline: BooleanConstructor;
disabled: BooleanConstructor;
iconPrefix: StringConstructor;
nativeType: {
type: import("vue").PropType<import("./types").ButtonNativeType>;
default: import("./types").ButtonNativeType;
};
loadingSize: (NumberConstructor | StringConstructor)[];
loadingText: StringConstructor;
loadingType: import("vue").PropType<import("..").LoadingType>;
iconPosition: {
type: import("vue").PropType<import("./types").ButtonIconPosition>;
default: import("./types").ButtonIconPosition;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
url: StringConstructor;
replace: BooleanConstructor;
} & {
tag: {
type: import("vue").PropType<keyof HTMLElementTagNameMap>;
default: keyof HTMLElementTagNameMap;
};
text: StringConstructor;
icon: StringConstructor;
type: {
type: import("vue").PropType<import("./types").ButtonType>;
default: import("./types").ButtonType;
};
size: {
type: import("vue").PropType<import("./types").ButtonSize>;
default: import("./types").ButtonSize;
};
color: StringConstructor;
block: BooleanConstructor;
plain: BooleanConstructor;
round: BooleanConstructor;
square: BooleanConstructor;
loading: BooleanConstructor;
hairline: BooleanConstructor;
disabled: BooleanConstructor;
iconPrefix: StringConstructor;
nativeType: {
type: import("vue").PropType<import("./types").ButtonNativeType>;
default: import("./types").ButtonNativeType;
};
loadingSize: (NumberConstructor | StringConstructor)[];
loadingText: StringConstructor;
loadingType: import("vue").PropType<import("..").LoadingType>;
iconPosition: {
type: import("vue").PropType<import("./types").ButtonIconPosition>;
default: import("./types").ButtonIconPosition;
};
}>> & {
onClick?: ((...args: any[]) => any) | undefined;
}, {
replace: boolean;
type: import("./types").ButtonType;
tag: keyof HTMLElementTagNameMap;
round: boolean;
disabled: boolean;
size: import("./types").ButtonSize;
loading: boolean;
block: boolean;
plain: boolean;
square: boolean;
hairline: boolean;
nativeType: import("./types").ButtonNativeType;
iconPosition: import("./types").ButtonIconPosition;
}>>;
export default Button;
export { buttonProps } from './Button';
export type { ButtonProps } from './Button';
export type { ButtonType, ButtonSize, ButtonThemeVars, ButtonNativeType, ButtonIconPosition, } from './types';
declare module 'vue' {
interface GlobalComponents {
VanButton: typeof Button;
}
}
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../utils/index.mjs";
import _Button from "./Button.mjs";
const Button = withInstall(_Button);
var stdin_default = Button;
import { buttonProps } from "./Button.mjs";
export {
Button,
buttonProps,
stdin_default as default
};
+1
View File
@@ -0,0 +1 @@
export {};
+5
View File
@@ -0,0 +1,5 @@
import "../../style/base.css";
import "../../badge/index.css";
import "../../icon/index.css";
import "../../loading/index.css";
import "../index.css";
+41
View File
@@ -0,0 +1,41 @@
import type { ButtonHTMLAttributes } from 'vue';
export type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
export type ButtonNativeType = NonNullable<ButtonHTMLAttributes['type']>;
export type ButtonIconPosition = 'left' | 'right';
export type ButtonThemeVars = {
buttonMiniHeight?: string;
buttonMiniPadding?: string;
buttonMiniFontSize?: string;
buttonSmallHeight?: string;
buttonSmallPadding?: string;
buttonSmallFontSize?: string;
buttonNormalPadding?: string;
buttonNormalFontSize?: string;
buttonLargeHeight?: string;
buttonDefaultHeight?: string;
buttonDefaultLineHeight?: number | string;
buttonDefaultFontSize?: string;
buttonDefaultColor?: string;
buttonDefaultBackground?: string;
buttonDefaultBorderColor?: string;
buttonPrimaryColor?: string;
buttonPrimaryBackground?: string;
buttonPrimaryBorderColor?: string;
buttonSuccessColor?: string;
buttonSuccessBackground?: string;
buttonSuccessBorderColor?: string;
buttonDangerColor?: string;
buttonDangerBackground?: string;
buttonDangerBorderColor?: string;
buttonWarningColor?: string;
buttonWarningBackground?: string;
buttonWarningBorderColor?: string;
buttonBorderWidth?: string;
buttonRadius?: string;
buttonRoundRadius?: string;
buttonPlainBackground?: string;
buttonDisabledOpacity?: number | string;
buttonIconSize?: string;
buttonLoadingIconSize?: string;
};
View File
+292
View File
@@ -0,0 +1,292 @@
import { type PropType, type ExtractPropTypes } from 'vue';
import { PopupPosition } from '../popup';
import type { CalendarType, CalendarDayItem } from './types';
export declare const calendarProps: {
show: BooleanConstructor;
type: {
type: PropType<CalendarType>;
default: CalendarType;
};
title: StringConstructor;
color: StringConstructor;
round: {
type: BooleanConstructor;
default: true;
};
readonly: BooleanConstructor;
poppable: {
type: BooleanConstructor;
default: true;
};
maxRange: {
type: (NumberConstructor | StringConstructor)[];
default: null;
};
position: {
type: PropType<PopupPosition>;
default: PopupPosition;
};
teleport: PropType<string | import("vue").RendererElement | null | undefined>;
showMark: {
type: BooleanConstructor;
default: true;
};
showTitle: {
type: BooleanConstructor;
default: true;
};
formatter: PropType<(item: CalendarDayItem) => CalendarDayItem>;
rowHeight: (NumberConstructor | StringConstructor)[];
confirmText: StringConstructor;
rangePrompt: StringConstructor;
lazyRender: {
type: BooleanConstructor;
default: true;
};
showConfirm: {
type: BooleanConstructor;
default: true;
};
defaultDate: PropType<Date | Date[] | null>;
allowSameDay: BooleanConstructor;
showSubtitle: {
type: BooleanConstructor;
default: true;
};
closeOnPopstate: {
type: BooleanConstructor;
default: true;
};
showRangePrompt: {
type: BooleanConstructor;
default: true;
};
confirmDisabledText: StringConstructor;
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
safeAreaInsetTop: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
minDate: {
type: DateConstructor;
validator: (val: unknown) => val is Date;
default: () => Date;
};
maxDate: {
type: DateConstructor;
validator: (val: unknown) => val is Date;
default: () => Date;
};
firstDayOfWeek: {
type: (NumberConstructor | StringConstructor)[];
default: number;
validator: (val: number) => boolean;
};
};
export type CalendarProps = ExtractPropTypes<typeof calendarProps>;
declare const _default: import("vue").DefineComponent<{
show: BooleanConstructor;
type: {
type: PropType<CalendarType>;
default: CalendarType;
};
title: StringConstructor;
color: StringConstructor;
round: {
type: BooleanConstructor;
default: true;
};
readonly: BooleanConstructor;
poppable: {
type: BooleanConstructor;
default: true;
};
maxRange: {
type: (NumberConstructor | StringConstructor)[];
default: null;
};
position: {
type: PropType<PopupPosition>;
default: PopupPosition;
};
teleport: PropType<string | import("vue").RendererElement | null | undefined>;
showMark: {
type: BooleanConstructor;
default: true;
};
showTitle: {
type: BooleanConstructor;
default: true;
};
formatter: PropType<(item: CalendarDayItem) => CalendarDayItem>;
rowHeight: (NumberConstructor | StringConstructor)[];
confirmText: StringConstructor;
rangePrompt: StringConstructor;
lazyRender: {
type: BooleanConstructor;
default: true;
};
showConfirm: {
type: BooleanConstructor;
default: true;
};
defaultDate: PropType<Date | Date[] | null>;
allowSameDay: BooleanConstructor;
showSubtitle: {
type: BooleanConstructor;
default: true;
};
closeOnPopstate: {
type: BooleanConstructor;
default: true;
};
showRangePrompt: {
type: BooleanConstructor;
default: true;
};
confirmDisabledText: StringConstructor;
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
safeAreaInsetTop: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
minDate: {
type: DateConstructor;
validator: (val: unknown) => val is Date;
default: () => Date;
};
maxDate: {
type: DateConstructor;
validator: (val: unknown) => val is Date;
default: () => Date;
};
firstDayOfWeek: {
type: (NumberConstructor | StringConstructor)[];
default: number;
validator: (val: number) => boolean;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:show" | "confirm" | "clickSubtitle" | "unselect" | "monthShow" | "overRange")[], "select" | "update:show" | "confirm" | "clickSubtitle" | "unselect" | "monthShow" | "overRange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
show: BooleanConstructor;
type: {
type: PropType<CalendarType>;
default: CalendarType;
};
title: StringConstructor;
color: StringConstructor;
round: {
type: BooleanConstructor;
default: true;
};
readonly: BooleanConstructor;
poppable: {
type: BooleanConstructor;
default: true;
};
maxRange: {
type: (NumberConstructor | StringConstructor)[];
default: null;
};
position: {
type: PropType<PopupPosition>;
default: PopupPosition;
};
teleport: PropType<string | import("vue").RendererElement | null | undefined>;
showMark: {
type: BooleanConstructor;
default: true;
};
showTitle: {
type: BooleanConstructor;
default: true;
};
formatter: PropType<(item: CalendarDayItem) => CalendarDayItem>;
rowHeight: (NumberConstructor | StringConstructor)[];
confirmText: StringConstructor;
rangePrompt: StringConstructor;
lazyRender: {
type: BooleanConstructor;
default: true;
};
showConfirm: {
type: BooleanConstructor;
default: true;
};
defaultDate: PropType<Date | Date[] | null>;
allowSameDay: BooleanConstructor;
showSubtitle: {
type: BooleanConstructor;
default: true;
};
closeOnPopstate: {
type: BooleanConstructor;
default: true;
};
showRangePrompt: {
type: BooleanConstructor;
default: true;
};
confirmDisabledText: StringConstructor;
closeOnClickOverlay: {
type: BooleanConstructor;
default: true;
};
safeAreaInsetTop: BooleanConstructor;
safeAreaInsetBottom: {
type: BooleanConstructor;
default: true;
};
minDate: {
type: DateConstructor;
validator: (val: unknown) => val is Date;
default: () => Date;
};
maxDate: {
type: DateConstructor;
validator: (val: unknown) => val is Date;
default: () => Date;
};
firstDayOfWeek: {
type: (NumberConstructor | StringConstructor)[];
default: number;
validator: (val: number) => boolean;
};
}>> & {
onSelect?: ((...args: any[]) => any) | undefined;
"onUpdate:show"?: ((...args: any[]) => any) | undefined;
onConfirm?: ((...args: any[]) => any) | undefined;
onClickSubtitle?: ((...args: any[]) => any) | undefined;
onUnselect?: ((...args: any[]) => any) | undefined;
onMonthShow?: ((...args: any[]) => any) | undefined;
onOverRange?: ((...args: any[]) => any) | undefined;
}, {
type: CalendarType;
position: PopupPosition;
round: boolean;
readonly: boolean;
safeAreaInsetBottom: boolean;
show: boolean;
lazyRender: boolean;
closeOnClickOverlay: boolean;
closeOnPopstate: boolean;
safeAreaInsetTop: boolean;
poppable: boolean;
maxRange: string | number;
showMark: boolean;
showTitle: boolean;
showConfirm: boolean;
allowSameDay: boolean;
showSubtitle: boolean;
showRangePrompt: boolean;
minDate: Date;
maxDate: Date;
firstDayOfWeek: string | number;
}>;
export default _default;
+414
View File
@@ -0,0 +1,414 @@
import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
import { ref, watch, computed, defineComponent } from "vue";
import { pick, isDate, truthProp, numericProp, getScrollTop, makeStringProp, makeNumericProp } from "../utils/index.mjs";
import { t, bem, name, getToday, cloneDate, cloneDates, getPrevDay, getNextDay, compareDay, calcDateNum, compareMonth, getDayByOffset } from "./utils.mjs";
import { raf, useRect, onMountedOrActivated } from "@vant/use";
import { useRefs } from "../composables/use-refs.mjs";
import { useExpose } from "../composables/use-expose.mjs";
import { Popup } from "../popup/index.mjs";
import { Button } from "../button/index.mjs";
import { showToast } from "../toast/index.mjs";
import CalendarMonth from "./CalendarMonth.mjs";
import CalendarHeader from "./CalendarHeader.mjs";
const calendarProps = {
show: Boolean,
type: makeStringProp("single"),
title: String,
color: String,
round: truthProp,
readonly: Boolean,
poppable: truthProp,
maxRange: makeNumericProp(null),
position: makeStringProp("bottom"),
teleport: [String, Object],
showMark: truthProp,
showTitle: truthProp,
formatter: Function,
rowHeight: numericProp,
confirmText: String,
rangePrompt: String,
lazyRender: truthProp,
showConfirm: truthProp,
defaultDate: [Date, Array],
allowSameDay: Boolean,
showSubtitle: truthProp,
closeOnPopstate: truthProp,
showRangePrompt: truthProp,
confirmDisabledText: String,
closeOnClickOverlay: truthProp,
safeAreaInsetTop: Boolean,
safeAreaInsetBottom: truthProp,
minDate: {
type: Date,
validator: isDate,
default: getToday
},
maxDate: {
type: Date,
validator: isDate,
default: () => {
const now = getToday();
return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
}
},
firstDayOfWeek: {
type: numericProp,
default: 0,
validator: (val) => val >= 0 && val <= 6
}
};
var stdin_default = defineComponent({
name,
props: calendarProps,
emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle"],
setup(props, {
emit,
slots
}) {
const limitDateRange = (date, minDate = props.minDate, maxDate = props.maxDate) => {
if (compareDay(date, minDate) === -1) {
return minDate;
}
if (compareDay(date, maxDate) === 1) {
return maxDate;
}
return date;
};
const getInitialDate = (defaultDate = props.defaultDate) => {
const {
type,
minDate,
maxDate,
allowSameDay
} = props;
if (defaultDate === null) {
return defaultDate;
}
const now = getToday();
if (type === "range") {
if (!Array.isArray(defaultDate)) {
defaultDate = [];
}
const start = limitDateRange(defaultDate[0] || now, minDate, allowSameDay ? maxDate : getPrevDay(maxDate));
const end = limitDateRange(defaultDate[1] || now, allowSameDay ? minDate : getNextDay(minDate));
return [start, end];
}
if (type === "multiple") {
if (Array.isArray(defaultDate)) {
return defaultDate.map((date) => limitDateRange(date));
}
return [limitDateRange(now)];
}
if (!defaultDate || Array.isArray(defaultDate)) {
defaultDate = now;
}
return limitDateRange(defaultDate);
};
let bodyHeight;
const bodyRef = ref();
const subtitle = ref({
text: "",
date: void 0
});
const currentDate = ref(getInitialDate());
const [monthRefs, setMonthRefs] = useRefs();
const dayOffset = computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
const months = computed(() => {
const months2 = [];
const cursor = new Date(props.minDate);
cursor.setDate(1);
do {
months2.push(new Date(cursor));
cursor.setMonth(cursor.getMonth() + 1);
} while (compareMonth(cursor, props.maxDate) !== 1);
return months2;
});
const buttonDisabled = computed(() => {
if (currentDate.value) {
if (props.type === "range") {
return !currentDate.value[0] || !currentDate.value[1];
}
if (props.type === "multiple") {
return !currentDate.value.length;
}
}
return !currentDate.value;
});
const getSelectedDate = () => currentDate.value;
const onScroll = () => {
const top = getScrollTop(bodyRef.value);
const bottom = top + bodyHeight;
const heights = months.value.map((item, index) => monthRefs.value[index].getHeight());
const heightSum = heights.reduce((a, b) => a + b, 0);
if (bottom > heightSum && top > 0) {
return;
}
let height = 0;
let currentMonth;
const visibleRange = [-1, -1];
for (let i = 0; i < months.value.length; i++) {
const month = monthRefs.value[i];
const visible = height <= bottom && height + heights[i] >= top;
if (visible) {
visibleRange[1] = i;
if (!currentMonth) {
currentMonth = month;
visibleRange[0] = i;
}
if (!monthRefs.value[i].showed) {
monthRefs.value[i].showed = true;
emit("monthShow", {
date: month.date,
title: month.getTitle()
});
}
}
height += heights[i];
}
months.value.forEach((month, index) => {
const visible = index >= visibleRange[0] - 1 && index <= visibleRange[1] + 1;
monthRefs.value[index].setVisible(visible);
});
if (currentMonth) {
subtitle.value = {
text: currentMonth.getTitle(),
date: currentMonth.date
};
}
};
const scrollToDate = (targetDate) => {
raf(() => {
months.value.some((month, index) => {
if (compareMonth(month, targetDate) === 0) {
if (bodyRef.value) {
monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
}
return true;
}
return false;
});
onScroll();
});
};
const scrollToCurrentDate = () => {
if (props.poppable && !props.show) {
return;
}
if (currentDate.value) {
const targetDate = props.type === "single" ? currentDate.value : currentDate.value[0];
if (isDate(targetDate)) {
scrollToDate(targetDate);
}
} else {
raf(onScroll);
}
};
const init = () => {
if (props.poppable && !props.show) {
return;
}
raf(() => {
bodyHeight = Math.floor(useRect(bodyRef).height);
});
scrollToCurrentDate();
};
const reset = (date = getInitialDate()) => {
currentDate.value = date;
scrollToCurrentDate();
};
const checkRange = (date) => {
const {
maxRange,
rangePrompt,
showRangePrompt
} = props;
if (maxRange && calcDateNum(date) > +maxRange) {
if (showRangePrompt) {
showToast(rangePrompt || t("rangePrompt", maxRange));
}
emit("overRange");
return false;
}
return true;
};
const onConfirm = () => {
var _a;
return emit("confirm", (_a = currentDate.value) != null ? _a : cloneDates(currentDate.value));
};
const select = (date, complete) => {
const setCurrentDate = (date2) => {
currentDate.value = date2;
emit("select", cloneDates(date2));
};
if (complete && props.type === "range") {
const valid = checkRange(date);
if (!valid) {
setCurrentDate([date[0], getDayByOffset(date[0], +props.maxRange - 1)]);
return;
}
}
setCurrentDate(date);
if (complete && !props.showConfirm) {
onConfirm();
}
};
const getDisabledDate = (disabledDays2, startDay, date) => {
var _a;
return (_a = disabledDays2.find((day) => compareDay(startDay, day.date) === -1 && compareDay(day.date, date) === -1)) == null ? void 0 : _a.date;
};
const disabledDays = computed(() => monthRefs.value.reduce((arr, ref2) => {
var _a, _b;
arr.push(...(_b = (_a = ref2.disabledDays) == null ? void 0 : _a.value) != null ? _b : []);
return arr;
}, []));
const onClickDay = (item) => {
if (props.readonly || !item.date) {
return;
}
const {
date
} = item;
const {
type
} = props;
if (type === "range") {
if (!currentDate.value) {
select([date]);
return;
}
const [startDay, endDay] = currentDate.value;
if (startDay && !endDay) {
const compareToStart = compareDay(date, startDay);
if (compareToStart === 1) {
const disabledDay = getDisabledDate(disabledDays.value, startDay, date);
if (disabledDay) {
const endDay2 = getPrevDay(disabledDay);
if (compareDay(startDay, endDay2) === -1) {
select([startDay, endDay2]);
} else {
select([date]);
}
} else {
select([startDay, date], true);
}
} else if (compareToStart === -1) {
select([date]);
} else if (props.allowSameDay) {
select([date, date], true);
}
} else {
select([date]);
}
} else if (type === "multiple") {
if (!currentDate.value) {
select([date]);
return;
}
const dates = currentDate.value;
const selectedIndex = dates.findIndex((dateItem) => compareDay(dateItem, date) === 0);
if (selectedIndex !== -1) {
const [unselectedDate] = dates.splice(selectedIndex, 1);
emit("unselect", cloneDate(unselectedDate));
} else if (props.maxRange && dates.length >= +props.maxRange) {
showToast(props.rangePrompt || t("rangePrompt", props.maxRange));
} else {
select([...dates, date]);
}
} else {
select(date, true);
}
};
const updateShow = (value) => emit("update:show", value);
const renderMonth = (date, index) => {
const showMonthTitle = index !== 0 || !props.showSubtitle;
return _createVNode(CalendarMonth, _mergeProps({
"ref": setMonthRefs(index),
"date": date,
"currentDate": currentDate.value,
"showMonthTitle": showMonthTitle,
"firstDayOfWeek": dayOffset.value
}, pick(props, ["type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay"]), {
"onClick": onClickDay
}), pick(slots, ["top-info", "bottom-info", "month-title"]));
};
const renderFooterButton = () => {
if (slots.footer) {
return slots.footer();
}
if (props.showConfirm) {
const slot = slots["confirm-text"];
const disabled = buttonDisabled.value;
const text = disabled ? props.confirmDisabledText : props.confirmText;
return _createVNode(Button, {
"round": true,
"block": true,
"type": "primary",
"color": props.color,
"class": bem("confirm"),
"disabled": disabled,
"nativeType": "button",
"onClick": onConfirm
}, {
default: () => [slot ? slot({
disabled
}) : text || t("confirm")]
});
}
};
const renderFooter = () => _createVNode("div", {
"class": [bem("footer"), {
"van-safe-area-bottom": props.safeAreaInsetBottom
}]
}, [renderFooterButton()]);
const renderCalendar = () => _createVNode("div", {
"class": bem()
}, [_createVNode(CalendarHeader, {
"date": subtitle.value.date,
"title": props.title,
"subtitle": subtitle.value.text,
"showTitle": props.showTitle,
"showSubtitle": props.showSubtitle,
"firstDayOfWeek": dayOffset.value,
"onClickSubtitle": (event) => emit("clickSubtitle", event)
}, pick(slots, ["title", "subtitle"])), _createVNode("div", {
"ref": bodyRef,
"class": bem("body"),
"onScroll": onScroll
}, [months.value.map(renderMonth)]), renderFooter()]);
watch(() => props.show, init);
watch(() => [props.type, props.minDate, props.maxDate], () => reset(getInitialDate(currentDate.value)));
watch(() => props.defaultDate, (value = null) => {
currentDate.value = value;
scrollToCurrentDate();
});
useExpose({
reset,
scrollToDate,
getSelectedDate
});
onMountedOrActivated(init);
return () => {
if (props.poppable) {
return _createVNode(Popup, {
"show": props.show,
"class": bem("popup"),
"round": props.round,
"position": props.position,
"closeable": props.showTitle || props.showSubtitle,
"teleport": props.teleport,
"closeOnPopstate": props.closeOnPopstate,
"safeAreaInsetTop": props.safeAreaInsetTop,
"closeOnClickOverlay": props.closeOnClickOverlay,
"onUpdate:show": updateShow
}, {
default: renderCalendar
});
}
return renderCalendar();
};
}
});
export {
calendarProps,
stdin_default as default
};
+32
View File
@@ -0,0 +1,32 @@
import { type PropType } from 'vue';
import type { CalendarDayItem } from './types';
declare const _default: import("vue").DefineComponent<{
item: {
type: PropType<CalendarDayItem>;
required: true;
};
color: StringConstructor;
index: NumberConstructor;
offset: {
type: NumberConstructor;
default: number;
};
rowHeight: StringConstructor;
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
item: {
type: PropType<CalendarDayItem>;
required: true;
};
color: StringConstructor;
index: NumberConstructor;
offset: {
type: NumberConstructor;
default: number;
};
rowHeight: StringConstructor;
}>> & {
onClick?: ((...args: any[]) => any) | undefined;
}, {
offset: number;
}>;
export default _default;
+129
View File
@@ -0,0 +1,129 @@
import { createVNode as _createVNode } from "vue";
import { computed, defineComponent } from "vue";
import { makeNumberProp, createNamespace, makeRequiredProp } from "../utils/index.mjs";
import { bem } from "./utils.mjs";
const [name] = createNamespace("calendar-day");
var stdin_default = defineComponent({
name,
props: {
item: makeRequiredProp(Object),
color: String,
index: Number,
offset: makeNumberProp(0),
rowHeight: String
},
emits: ["click"],
setup(props, {
emit,
slots
}) {
const style = computed(() => {
var _a;
const {
item,
index,
color,
offset,
rowHeight
} = props;
const style2 = {
height: rowHeight
};
if (item.type === "placeholder") {
style2.width = "100%";
return style2;
}
if (index === 0) {
style2.marginLeft = `${100 * offset / 7}%`;
}
if (color) {
switch (item.type) {
case "end":
case "start":
case "start-end":
case "multiple-middle":
case "multiple-selected":
style2.background = color;
break;
case "middle":
style2.color = color;
break;
}
}
if (offset + (((_a = item.date) == null ? void 0 : _a.getDate()) || 1) > 28) {
style2.marginBottom = 0;
}
return style2;
});
const onClick = () => {
if (props.item.type !== "disabled") {
emit("click", props.item);
}
};
const renderTopInfo = () => {
const {
topInfo
} = props.item;
if (topInfo || slots["top-info"]) {
return _createVNode("div", {
"class": bem("top-info")
}, [slots["top-info"] ? slots["top-info"](props.item) : topInfo]);
}
};
const renderBottomInfo = () => {
const {
bottomInfo
} = props.item;
if (bottomInfo || slots["bottom-info"]) {
return _createVNode("div", {
"class": bem("bottom-info")
}, [slots["bottom-info"] ? slots["bottom-info"](props.item) : bottomInfo]);
}
};
const renderContent = () => {
const {
item,
color,
rowHeight
} = props;
const {
type,
text
} = item;
const Nodes = [renderTopInfo(), text, renderBottomInfo()];
if (type === "selected") {
return _createVNode("div", {
"class": bem("selected-day"),
"style": {
width: rowHeight,
height: rowHeight,
background: color
}
}, [Nodes]);
}
return Nodes;
};
return () => {
const {
type,
className
} = props.item;
if (type === "placeholder") {
return _createVNode("div", {
"class": bem("day"),
"style": style.value
}, null);
}
return _createVNode("div", {
"role": "gridcell",
"style": style.value,
"class": [bem("day", type), className],
"tabindex": type === "disabled" ? void 0 : -1,
"onClick": onClick
}, [renderContent()]);
};
}
});
export {
stdin_default as default
};
+21
View File
@@ -0,0 +1,21 @@
declare const _default: import("vue").DefineComponent<{
date: DateConstructor;
title: StringConstructor;
subtitle: StringConstructor;
showTitle: BooleanConstructor;
showSubtitle: BooleanConstructor;
firstDayOfWeek: NumberConstructor;
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickSubtitle"[], "clickSubtitle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
date: DateConstructor;
title: StringConstructor;
subtitle: StringConstructor;
showTitle: BooleanConstructor;
showSubtitle: BooleanConstructor;
firstDayOfWeek: NumberConstructor;
}>> & {
onClickSubtitle?: ((...args: any[]) => any) | undefined;
}, {
showTitle: boolean;
showSubtitle: boolean;
}>;
export default _default;

Some files were not shown because too many files have changed in this diff Show More