@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/cascader/interface.d.ts

@@ -0,0 +1,116 @@
+import type { CSSProperties, VNodeChild } from 'vue';
+import type { RenderNodeFn, VueNode } from '../_util/type';
+import type { PickerFieldProps, PickerTriggerSlotProps } from '../picker/interface';
+export type CascaderValue = string | number;
+export interface CascaderOption {
+    label?: string | number;
+    value?: CascaderValue;
+    disabled?: boolean;
+    /** `false` + `loadData`: children are loaded when the option is selected */
+    isLeaf?: boolean;
+    children?: CascaderOption[];
+    [key: string]: any;
+}
+export interface CascaderFieldNames {
+    label?: string;
+    value?: string;
+    children?: string;
+}
+export interface CascaderOptionRenderInfo {
+    option: CascaderOption;
+    /** 0-based level of the option */
+    level: number;
+    selected: boolean;
+}
+export interface CascaderViewSemanticClassNames {
+    root?: string;
+    tabs?: string;
+    tab?: string;
+    list?: string;
+    option?: string;
+}
+export interface CascaderViewSemanticStyles {
+    root?: CSSProperties;
+    tabs?: CSSProperties;
+    tab?: CSSProperties;
+    list?: CSSProperties;
+    option?: CSSProperties;
+}
+export interface CascaderBaseProps {
+    options?: CascaderOption[];
+    fieldNames?: CascaderFieldNames;
+    /** Emit `change` on every level instead of only when a leaf is selected */
+    changeOnSelect?: boolean;
+    /** Lazy load children of an option with `isLeaf: false`. Set `children` on the target option, optionally return a promise. */
+    loadData?: (selectedOptions: CascaderOption[]) => void | Promise<void>;
+    /** Custom option content, the `option` slot wins */
+    optionRender?: RenderNodeFn<CascaderOptionRenderInfo>;
+    /** Content shown when a level has no options, the `notFoundContent` slot wins */
+    notFoundContent?: VueNode;
+    /** Only mount the options around the visible window of a level (through `VirtualList`). `false` renders every option. Default `true`. */
+    virtual?: boolean;
+    /** Height of the option list. Default: the rest of `--am-cascader-view-height` (360px) below the tabs. */
+    listHeight?: number | string;
+    /** Height of one option in px: the min-height of an option and the estimate used before a row is measured. Default `48`. */
+    listItemHeight?: number;
+}
+export interface CascaderViewProps extends CascaderBaseProps {
+    /** Path of values. Supports `v-model:value`. */
+    value?: CascaderValue[];
+    defaultValue?: CascaderValue[];
+    /** Text of the tab of a level that has no selection yet */
+    placeholder?: string;
+    rootClass?: string;
+    classes?: CascaderViewSemanticClassNames;
+    styles?: CascaderViewSemanticStyles;
+}
+export interface CascaderViewEmits {
+    'update:value': [value: CascaderValue[]];
+    'change': [value: CascaderValue[], selectedOptions: CascaderOption[]];
+    /** An option was tapped (fires for every level) */
+    'select': [option: CascaderOption, level: number];
+    /** A leaf was selected: the path is complete */
+    'finish': [value: CascaderValue[], selectedOptions: CascaderOption[]];
+    'tabChange': [index: number];
+}
+export interface CascaderViewSlots {
+    option?: (info: CascaderOptionRenderInfo) => any;
+    notFoundContent?: () => any;
+}
+export interface CascaderViewExpose {
+    /** Scroll the selected option of the active level into view */
+    scrollToSelected: () => void;
+}
+export interface CascaderProps extends CascaderBaseProps, PickerFieldProps {
+    /** Committed path of values. Supports `v-model:value`. */
+    value?: CascaderValue[];
+    defaultValue?: CascaderValue[];
+    /** Text of the trigger, default joins the labels with ` / `. The `displayRender` slot wins. */
+    displayRender?: (labels: string[], selectedOptions: CascaderOption[]) => VNodeChild;
+}
+export interface CascaderEmits {
+    'update:value': [value: CascaderValue[]];
+    'update:open': [open: boolean];
+    'openChange': [open: boolean];
+    /** The committed value changed */
+    'change': [value: CascaderValue[], selectedOptions: CascaderOption[]];
+    'select': [option: CascaderOption, level: number];
+    'confirm': [value: CascaderValue[], selectedOptions: CascaderOption[]];
+    'cancel': [];
+    'clear': [];
+    'tabChange': [index: number];
+}
+export interface CascaderSlots {
+    /** Custom trigger */
+    default?: (props: PickerTriggerSlotProps<CascaderValue[]> & {
+        selectedOptions: CascaderOption[];
+    }) => any;
+    title?: () => any;
+    suffixIcon?: () => any;
+    displayRender?: (props: {
+        labels: string[];
+        selectedOptions: CascaderOption[];
+    }) => any;
+    option?: (info: CascaderOptionRenderInfo) => any;
+    notFoundContent?: () => any;
+}

package/dist/cascader/style/index.css

@@ -0,0 +1,119 @@
+.am-cascader-view {
+  --am-cascader-view-height: 360px;
+  --am-cascader-view-font-size: var(--am-font-size-lg);
+  --am-cascader-view-tab-height: 44px;
+  --am-cascader-view-tab-color: var(--am-color-text);
+  --am-cascader-view-tab-placeholder-color: var(--am-color-text-tertiary);
+  --am-cascader-view-active-color: var(--am-color-primary);
+  --am-cascader-view-option-height: 48px;
+  --am-cascader-view-option-padding-inline: var(--am-padding);
+  --am-cascader-view-disabled-color: var(--am-color-text-disabled);
+
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: var(--am-cascader-view-height);
+  color: var(--am-color-text);
+  font-size: var(--am-cascader-view-font-size);
+  font-family: var(--am-font-family);
+  line-height: var(--am-line-height);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.am-cascader-view-tabs {
+  display: flex;
+  flex: none;
+  gap: var(--am-padding-md);
+  padding: 0 var(--am-cascader-view-option-padding-inline);
+  overflow-x: auto;
+  box-shadow: inset 0 -1px 0 var(--am-color-split);
+  scrollbar-width: none;
+}
+
+.am-cascader-view-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.am-cascader-view-tab {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  max-width: 40%;
+  height: var(--am-cascader-view-tab-height);
+  overflow: hidden;
+  color: var(--am-cascader-view-tab-color);
+  font-weight: var(--am-font-weight-strong);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.am-cascader-view-tab-placeholder {
+  color: var(--am-cascader-view-tab-placeholder-color);
+  font-weight: 400;
+}
+
+.am-cascader-view-tab-active {
+  color: var(--am-cascader-view-active-color);
+}
+
+.am-cascader-view-tab-active::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: var(--am-cascader-view-active-color);
+  border-radius: 2px;
+  content: '';
+}
+
+/* the scroll container is a VirtualList: it owns overflow / scrolling */
+.am-cascader-view-list {
+  flex: 1;
+  min-height: 0;
+}
+
+.am-cascader-view-option {
+  display: flex;
+  gap: var(--am-padding-xs);
+  align-items: center;
+  box-sizing: border-box;
+  min-height: var(--am-cascader-view-option-height);
+  padding: var(--am-padding-xs) var(--am-cascader-view-option-padding-inline);
+  cursor: pointer;
+}
+
+.am-cascader-view-option:active {
+  background: var(--am-color-fill-tertiary);
+}
+
+.am-cascader-view-option-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.am-cascader-view-option-icon {
+  flex: none;
+  color: var(--am-cascader-view-active-color);
+}
+
+.am-cascader-view-option-selected {
+  color: var(--am-cascader-view-active-color);
+  font-weight: var(--am-font-weight-strong);
+}
+
+.am-cascader-view-option-disabled,
+.am-cascader-view-option-disabled:active {
+  color: var(--am-cascader-view-disabled-color);
+  background: transparent;
+  cursor: not-allowed;
+}
+
+.am-cascader-view-empty {
+  padding: var(--am-padding-xl) var(--am-padding);
+  color: var(--am-color-text-tertiary);
+  font-size: var(--am-font-size);
+  text-align: center;
+}

package/dist/cascader/util.d.ts

@@ -0,0 +1,6 @@
+import type { CascaderFieldNames, CascaderOption, CascaderValue } from './interface';
+export declare function resolveFieldNames(fieldNames?: CascaderFieldNames): Required<CascaderFieldNames>;
+/** Options along `path`; stops at the first value that is not found (e.g. not loaded yet). */
+export declare function getSelectedOptions(options: CascaderOption[] | undefined, path: CascaderValue[], fieldNames?: CascaderFieldNames): CascaderOption[];
+/** Labels of `path`; values without a matching option fall back to the value itself. */
+export declare function getLabels(options: CascaderOption[] | undefined, path: CascaderValue[], fieldNames?: CascaderFieldNames): string[];

package/dist/cascader/util.js

@@ -0,0 +1,29 @@
+// src/cascader/util.ts
+function resolveFieldNames(fieldNames) {
+	return {
+		label: "label",
+		value: "value",
+		children: "children",
+		...fieldNames
+	};
+}
+/** Options along `path`; stops at the first value that is not found (e.g. not loaded yet). */
+function getSelectedOptions(options, path, fieldNames) {
+	const names = resolveFieldNames(fieldNames);
+	const selected = [];
+	let level = options ?? [];
+	for (const value of path) {
+		const option = level.find((item) => item[names.value] === value);
+		if (!option) break;
+		selected.push(option);
+		level = option[names.children] ?? [];
+	}
+	return selected;
+}
+/** Labels of `path`; values without a matching option fall back to the value itself. */
+function getLabels(options, path, fieldNames) {
+	const names = resolveFieldNames(fieldNames);
+	const selected = getSelectedOptions(options, path, fieldNames);
+	return path.map((value, index) => String(selected[index]?.[names.label] ?? value));
+}
+export { getLabels, getSelectedOptions, resolveFieldNames };

package/dist/checkbox/Checkbox.js

@@ -0,0 +1,4 @@
+import Checkbox_vue_vue_type_script_setup_true_lang_default from "./Checkbox.vue_vue_type_script_setup_true_lang.js";
+// src/checkbox/Checkbox.vue
+var Checkbox_default = Checkbox_vue_vue_type_script_setup_true_lang_default;
+export { Checkbox_default as default };

package/dist/checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,42 @@
+import type { CheckboxChangeEvent, CheckboxIconContext, CheckboxProps, CheckboxSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = CheckboxSlots;
+declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    readonly input: HTMLInputElement | null;
+    readonly nativeElement: HTMLElement | null;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (event: FocusEvent) => any;
+    change: (event: CheckboxChangeEvent) => any;
+    click: (event: MouseEvent) => any;
+    focus: (event: FocusEvent) => any;
+    "update:checked": (checked: any) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((event: CheckboxChangeEvent) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:checked"?: ((checked: any) => any) | undefined;
+}>, {
+    block: boolean;
+    icon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | ((ctx: CheckboxIconContext) => import("vue").VNodeChild) | null;
+    disabled: boolean;
+    checked: import("./interface").CheckboxCheckedValue;
+    defaultChecked: import("./interface").CheckboxCheckedValue;
+    checkedValue: import("./interface").CheckboxCheckedValue;
+    unCheckedValue: import("./interface").CheckboxCheckedValue;
+    indeterminate: boolean;
+    skipGroup: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/checkbox/Checkbox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,262 @@
+import { useControlled } from "../_util/hooks/useControlled.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { useDisabled } from "../config-provider/context.js";
+import { useFormItemInputContext } from "../form/context.js";
+import { useCheckboxGroupContext } from "./context.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, watch } from "vue";
+// src/checkbox/Checkbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["title"];
+var _hoisted_2 = [
+	"id",
+	"name",
+	"checked",
+	"disabled",
+	"required",
+	"tabindex",
+	"aria-checked"
+];
+var _hoisted_3 = {
+	key: 2,
+	class: "am-checkbox-inner"
+};
+var Checkbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmCheckbox",
+	inheritAttrs: false,
+	__name: "Checkbox",
+	props: {
+		checked: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			default: void 0
+		},
+		defaultChecked: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			default: void 0
+		},
+		checkedValue: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			default: void 0
+		},
+		unCheckedValue: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			default: void 0
+		},
+		indeterminate: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		value: {},
+		name: {},
+		id: {},
+		title: {},
+		tabIndex: {},
+		autoFocus: { type: Boolean },
+		required: { type: Boolean },
+		skipGroup: {
+			type: Boolean,
+			default: false
+		},
+		block: {
+			type: Boolean,
+			default: void 0
+		},
+		shape: {},
+		icon: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"change",
+		"update:checked",
+		"click",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const injectedGroup = useCheckboxGroupContext();
+		const group = computed(() => props.skipGroup ? void 0 : injectedGroup);
+		const formItem = useFormItemInputContext();
+		const inputRef = ref(null);
+		const rootRef = ref(null);
+		const mergedCheckedValue = computed(() => props.checkedValue ?? true);
+		const mergedUnCheckedValue = computed(() => props.unCheckedValue ?? false);
+		const [innerChecked, setInnerChecked] = useControlled(props, "checked", {
+			defaultValue: () => props.defaultChecked ?? mergedUnCheckedValue.value,
+			onChange: (val) => emit("update:checked", val)
+		});
+		const checked = computed(() => {
+			if (group.value) return group.value.value.value.includes(props.value);
+			return innerChecked.value === mergedCheckedValue.value;
+		});
+		const disabled = useDisabled(() => {
+			if (props.disabled !== void 0) return props.disabled;
+			const g = group.value;
+			if (g && (g.disabled.value || g.isFull.value && !checked.value)) return true;
+		});
+		const mergedBlock = computed(() => props.block ?? group.value?.block.value ?? false);
+		const mergedShape = computed(() => props.shape ?? group.value?.shape.value ?? "square");
+		const mergedName = computed(() => props.name ?? group.value?.name.value);
+		const mergedId = computed(() => props.id ?? (group.value ? void 0 : formItem.id.value));
+		const groupIconSlot = computed(() => group.value?.iconSlot());
+		const iconContext = computed(() => ({
+			checked: checked.value,
+			indeterminate: props.indeterminate && !checked.value,
+			disabled: disabled.value
+		}));
+		onMounted(() => {
+			group.value?.register(props.value);
+			if (props.autoFocus) inputRef.value?.focus();
+		});
+		watch(() => props.value, (val, prev) => {
+			group.value?.unregister(prev);
+			group.value?.register(val);
+		});
+		onBeforeUnmount(() => group.value?.unregister(props.value));
+		function syncNative() {
+			nextTick(() => {
+				if (inputRef.value) {
+					inputRef.value.checked = checked.value;
+					inputRef.value.indeterminate = iconContext.value.indeterminate;
+				}
+			});
+		}
+		watch(iconContext, syncNative, { flush: "post" });
+		onMounted(syncNative);
+		function handleChange(event) {
+			if (disabled.value) {
+				syncNative();
+				return;
+			}
+			const nextChecked = !checked.value;
+			const changeEvent = {
+				target: {
+					...props,
+					checked: nextChecked
+				},
+				stopPropagation: () => event.stopPropagation(),
+				preventDefault: () => event.preventDefault(),
+				nativeEvent: event
+			};
+			if (group.value) {
+				group.value.toggle(props.value);
+				emit("change", changeEvent);
+			} else {
+				setInnerChecked(nextChecked ? mergedCheckedValue.value : mergedUnCheckedValue.value);
+				emit("change", changeEvent);
+				formItem.onFieldChange();
+			}
+			syncNative();
+		}
+		function handleBlur(event) {
+			emit("blur", event);
+			if (!group.value) formItem.onFieldBlur();
+		}
+		const classNames = computed(() => [
+			"am-checkbox",
+			{
+				"am-checkbox-checked": checked.value,
+				"am-checkbox-indeterminate": iconContext.value.indeterminate,
+				"am-checkbox-disabled": disabled.value,
+				"am-checkbox-block": mergedBlock.value,
+				"am-checkbox-round": mergedShape.value === "round"
+			},
+			group.value?.classes.value?.item,
+			props.rootClass,
+			props.classes?.root
+		]);
+		__expose({
+			focus: () => inputRef.value?.focus(),
+			blur: () => inputRef.value?.blur(),
+			get input() {
+				return inputRef.value;
+			},
+			get nativeElement() {
+				return rootRef.value;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", mergeProps(_ctx.$attrs, {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: classNames.value,
+				style: [group.value?.styles.value?.item, __props.styles?.root],
+				title: __props.title
+			}), [
+				createElementVNode("input", {
+					id: mergedId.value,
+					ref_key: "inputRef",
+					ref: inputRef,
+					class: "am-checkbox-input",
+					type: "checkbox",
+					name: mergedName.value,
+					checked: checked.value,
+					disabled: unref(disabled),
+					required: __props.required,
+					tabindex: __props.tabIndex,
+					"aria-checked": iconContext.value.indeterminate ? "mixed" : checked.value,
+					onChange: handleChange,
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event)),
+					onFocus: _cache[1] || (_cache[1] = ($event) => emit("focus", $event)),
+					onBlur: handleBlur
+				}, null, 40, _hoisted_2),
+				createElementVNode("span", {
+					class: normalizeClass(["am-checkbox-icon", [group.value?.classes.value?.itemIcon, __props.classes?.icon]]),
+					style: normalizeStyle([group.value?.styles.value?.itemIcon, __props.styles?.icon])
+				}, [renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(iconContext.value)), () => [groupIconSlot.value ? (openBlock(), createBlock(unref(RenderNode_default), {
+					key: 0,
+					node: groupIconSlot.value,
+					params: iconContext.value
+				}, null, 8, ["node", "params"])) : __props.icon !== void 0 && __props.icon !== null && __props.icon !== false ? (openBlock(), createBlock(unref(RenderNode_default), {
+					key: 1,
+					node: __props.icon,
+					params: iconContext.value
+				}, null, 8, ["node", "params"])) : (openBlock(), createElementBlock("span", _hoisted_3))])], 6),
+				_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(["am-checkbox-label", [group.value?.classes.value?.itemLabel, __props.classes?.label]]),
+					style: normalizeStyle([group.value?.styles.value?.itemLabel, __props.styles?.label])
+				}, [renderSlot(_ctx.$slots, "default")], 6)) : createCommentVNode("", true)
+			], 16, _hoisted_1);
+		};
+	}
+});
+export { Checkbox_vue_vue_type_script_setup_true_lang_default as default };

package/dist/checkbox/CheckboxGroup.js

@@ -0,0 +1,4 @@
+import CheckboxGroup_vue_vue_type_script_setup_true_lang_default from "./CheckboxGroup.vue_vue_type_script_setup_true_lang.js";
+// src/checkbox/CheckboxGroup.vue
+var CheckboxGroup_default = CheckboxGroup_vue_vue_type_script_setup_true_lang_default;
+export { CheckboxGroup_default as default };

package/dist/checkbox/CheckboxGroup.vue.d.ts

@@ -0,0 +1,23 @@
+import type { CheckboxGroupProps, CheckboxGroupSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = CheckboxGroupSlots;
+declare const __VLS_base: import("vue").DefineComponent<CheckboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (checkedValue: any[]) => any;
+    "update:value": (checkedValue: any[]) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxGroupProps> & Readonly<{
+    onChange?: ((checkedValue: any[]) => any) | undefined;
+    "onUpdate:value"?: ((checkedValue: any[]) => any) | undefined;
+}>, {
+    block: boolean;
+    disabled: boolean;
+    role: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};