@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/form-item/index.js

@@ -0,0 +1,318 @@
+import './css.js'
+import { B as y, C as Pn, D as S, F as m, I as on, M as f, N as gn, R as tn, _ as E, b as Ln, g as A, k as Wn, w as Qn, y as Ge, z as v } from "../vendor.js";
+import { a as isUrl } from "../share/util/common.js";
+import { t as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { a as FORM_PROVIDE, i as FORM_ITEM_PROVIDE } from "../share/const/provide-key.js";
+import { t as createProvideComputed } from "../share/util/reactivity.js";
+import { t as row_default } from "../row/index.js";
+import { t as col_default } from "../col/index.js";
+import { r as throwError } from "../share/util/console.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeProps, nextTick, normalizeClass, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderSlot, shallowRef, toDisplayString, unref, useId, useSlots, withCtx } from "vue";
+var _hoisted_1 = {
+	key: 0,
+	class: "px-form-item-asterisk"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "px-form-item-asterisk"
+};
+var _hoisted_3 = {
+	key: 0,
+	class: "px-form-item-asterisk"
+};
+var _hoisted_4 = { class: "px-form-item-addition" };
+var _hoisted_5 = {
+	key: 1,
+	class: "px-form-item-extra"
+};
+var form_item_default = /* @__PURE__ */ defineComponent({
+	name: "FormItem",
+	__name: "index",
+	props: {
+		field: null,
+		label: null,
+		rule: null,
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		labelAlign: { default: void 0 },
+		showAsterisk: {
+			type: Boolean,
+			default: void 0
+		},
+		asteriskPlacement: { default: void 0 },
+		rowProps: { default: void 0 },
+		labelProps: { default: void 0 },
+		contentProps: { default: void 0 }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const formContext = inject(FORM_PROVIDE, void 0);
+		if (!formContext) throwError("FormItem must be used inside Form.");
+		const disabledComputed = createProvideComputed("disabled", [formContext, props], "or");
+		const readonlyComputed = createProvideComputed("readonly", [formContext, props], "or");
+		const id = useId();
+		const slots = useSlots();
+		const IGNORE_CONTEXT_FIELDS = [
+			"model",
+			"rule",
+			"registerField",
+			"unregisterField",
+			"collectLabelWidth",
+			"removeLabelWidth"
+		];
+		const mergedProps = computed(() => {
+			return Qn(gn(Wn(formContext, IGNORE_CONTEXT_FIELDS), (e) => e.value), props);
+		});
+		const labelRef = shallowRef(null);
+		useResizeObserver(labelRef, () => {
+			if (!labelRef.value) return;
+			formContext.collectLabelWidth({
+				id,
+				width: labelRef.value.clientWidth
+			});
+		}, true);
+		onBeforeUnmount(() => {
+			formContext.removeLabelWidth(id);
+		});
+		let initValue = null;
+		const reset = async () => {
+			if (!props.field) return;
+			on(formContext.model.value, props.field, initValue);
+			await nextTick();
+			clearValidation();
+		};
+		const createFieldItem = () => {
+			return {
+				field: props.field,
+				validate: doValidate,
+				reset,
+				clearValidation
+			};
+		};
+		onMounted(() => {
+			if (props.field) {
+				formContext.registerField(createFieldItem());
+				initValue = f(formContext.model.value, props.field);
+			}
+		});
+		onUnmounted(() => {
+			if (props.field) formContext.unregisterField(props.field);
+		});
+		const shouldShowAsterisk = computed(() => {
+			var _formContext$rules$va;
+			if (!mergedProps.value.showAsterisk) return;
+			if (!props.field) return false;
+			let rules = props.rule || ((_formContext$rules$va = formContext.rules.value) === null || _formContext$rules$va === void 0 ? void 0 : _formContext$rules$va[props.field]);
+			if (!rules) return false;
+			if (!S(rules)) rules = [rules];
+			return rules.some((rule) => rule.required);
+		});
+		const inputHandler = async () => {
+			if (!props.field) return;
+			await nextTick();
+			doValidate("input");
+		};
+		const blurHandler = async () => {
+			if (!props.field) return;
+			await nextTick();
+			doValidate("blur");
+		};
+		const changeHandler = async () => {
+			if (!props.field) return;
+			await nextTick();
+			doValidate("change");
+		};
+		const formatTipMessage = (nextMessage) => {
+			return {
+				message: (nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.message) || "",
+				level: !(nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.message) ? "normal" : (nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.level) || "normal"
+			};
+		};
+		const tipMessage = ref(formatTipMessage());
+		const clearValidation = () => {
+			tipMessage.value = formatTipMessage();
+		};
+		const provideStatus = computed(() => {
+			return tipMessage.value.level;
+		});
+		provide(FORM_ITEM_PROVIDE, {
+			size: formContext.size,
+			disabled: disabledComputed,
+			readonly: readonlyComputed,
+			changeHandler,
+			blurHandler,
+			inputHandler,
+			status: provideStatus
+		});
+		const doValidate = async (trigger) => {
+			var _formContext$rules$va2;
+			if (!props.field) {
+				tipMessage.value = formatTipMessage();
+				return tipMessage.value;
+			}
+			let rules = props.rule || ((_formContext$rules$va2 = formContext.rules.value) === null || _formContext$rules$va2 === void 0 ? void 0 : _formContext$rules$va2[props.field]);
+			if (!rules) {
+				tipMessage.value = formatTipMessage();
+				return tipMessage.value;
+			}
+			if (!S(rules)) rules = [rules];
+			const value = f(formContext.model.value, props.field);
+			const currentRules = trigger ? rules.filter((rule) => rule.trigger ? S(rule.trigger) ? rule.trigger.includes(trigger) : rule.trigger === trigger : trigger === "change" || trigger === "blur") : rules;
+			if (currentRules.length === 0) return tipMessage.value;
+			for (const rule of currentRules) {
+				if (rule.validator) try {
+					tipMessage.value = formatTipMessage({
+						message: await Promise.resolve(rule.validator(value, formContext.model)),
+						level: rule.level || "error"
+					});
+					return tipMessage.value;
+				} catch {
+					tipMessage.value = formatTipMessage({
+						message: rule.message ?? `${props.field} didn't pass the check.`,
+						level: rule.level || "error"
+					});
+					return tipMessage.value;
+				}
+				if (rule.required && Ln(value)) {
+					tipMessage.value = formatTipMessage({
+						message: rule.message ?? `${props.field} is required`,
+						level: rule.level || "error"
+					});
+					return tipMessage.value;
+				}
+				if (rule.type) {
+					if (!(Array.isArray(rule.type) ? rule.type : [rule.type]).some((t) => {
+						switch (t) {
+							case "number": return A(value) && !isNaN(value);
+							case "string": return y(value);
+							case "boolean": return Pn(value);
+							case "array": return S(value);
+							case "dict": return tn(value) && !S(value);
+							case "function": return m(value);
+							case "date": return value instanceof Date && !isNaN(value.getTime());
+							default: return true;
+						}
+					})) {
+						tipMessage.value = formatTipMessage({
+							message: rule.message ?? `${props.field} type mismatch`,
+							level: rule.level || "error"
+						});
+						return tipMessage.value;
+					}
+				}
+				if (A(value)) {
+					if (!E(rule.min) && value < rule.min) {
+						tipMessage.value = formatTipMessage({
+							message: rule.message ?? `${props.field} must be >= ${rule.min}`,
+							level: rule.level || "error"
+						});
+						return tipMessage.value;
+					}
+					if (!E(rule.max) && value > rule.max) {
+						tipMessage.value = formatTipMessage({
+							message: rule.message ?? `${props.field} must be <= ${rule.max}`,
+							level: rule.level || "error"
+						});
+						return tipMessage.value;
+					}
+				}
+				if (y(value) || S(value)) {
+					const len = value.length;
+					if (!E(rule.minLength) && len < rule.minLength) {
+						tipMessage.value = formatTipMessage({
+							message: rule.message ?? `${props.field} length must be >= ${rule.minLength}`,
+							level: rule.level || "error"
+						});
+						return tipMessage.value;
+					}
+					if (!E(rule.maxLength) && len > rule.maxLength) {
+						tipMessage.value = formatTipMessage({
+							message: rule.message ?? `${props.field} length must be <= ${rule.maxLength}`,
+							level: rule.level || "error"
+						});
+						return tipMessage.value;
+					}
+				}
+				if (rule.email && !Ge(value)) {
+					tipMessage.value = formatTipMessage({
+						message: rule.message ?? `${props.field} is not a valid email.`,
+						level: rule.level || "error"
+					});
+					return tipMessage.value;
+				}
+				if (rule.url && !isUrl(value)) {
+					tipMessage.value = formatTipMessage({
+						message: rule.message ?? `${props.field} is not a valid URL.`,
+						level: rule.level || "error"
+					});
+					return tipMessage.value;
+				}
+				if (rule.numberString && !v(value)) {
+					tipMessage.value = formatTipMessage({
+						message: rule.message ?? `${props.field} is not a valid numeric string.`,
+						level: rule.level || "error"
+					});
+					return tipMessage.value;
+				}
+			}
+			tipMessage.value = formatTipMessage();
+			return tipMessage.value;
+		};
+		__expose({ validate: doValidate });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(row_default, mergeProps({
+				class: "px-form-item",
+				gutter: {
+					x: 16,
+					y: 8
+				}
+			}, mergedProps.value.rowProps), {
+				default: withCtx(() => [__props.label || unref(slots).label ? (openBlock(), createBlock(col_default, mergeProps({
+					key: 0,
+					span: mergedProps.value.labelAlign === "top" ? 24 : 6,
+					class: ["px-form-item-label-wrapper", { "px-form-item-label-wrapper__auto": mergedProps.value.labelAutoWidth }],
+					style: { width: mergedProps.value.labelAutoWidth ? `${unref(formContext).maxLabelWidth.value}px` : void 0 }
+				}, mergedProps.value.labelProps), {
+					default: withCtx(() => [createElementVNode("label", {
+						class: normalizeClass(["px-form-item-label", {
+							"px-form-item-label__auto": mergedProps.value.labelAutoWidth,
+							[`px-form-item-label__${mergedProps.value.labelAlign}`]: mergedProps.value.labelAlign && mergedProps.value.labelAlign !== "top",
+							[`px-form-item-label__${mergedProps.value.size}`]: mergedProps.value.size
+						}]),
+						ref_key: "labelRef",
+						ref: labelRef
+					}, [
+						shouldShowAsterisk.value && mergedProps.value.asteriskPlacement === "left" ? (openBlock(), createElementBlock("span", _hoisted_1, " *\xA0 ")) : createCommentVNode("v-if", true),
+						renderSlot(_ctx.$slots, "label", {}, () => [createElementVNode("span", null, toDisplayString(__props.label), 1)]),
+						shouldShowAsterisk.value && mergedProps.value.asteriskPlacement === "right" ? (openBlock(), createElementBlock("span", _hoisted_2, " \xA0* ")) : createCommentVNode("v-if", true)
+					], 2)]),
+					_: 3
+				}, 16, [
+					"span",
+					"class",
+					"style"
+				])) : createCommentVNode("v-if", true), createVNode(col_default, mergeProps({
+					span: mergedProps.value.labelAlign === "top" || !__props.label && !unref(slots).label ? 24 : 18,
+					class: ["px-form-item-content-wrapper", { "px-form-item-content-wrapper__auto": mergedProps.value.labelAutoWidth }]
+				}, mergedProps.value.contentProps), {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["px-form-item-content", { [`px-form-item-content__${mergedProps.value.size}`]: mergedProps.value.size }]) }, [renderSlot(_ctx.$slots, "default"), shouldShowAsterisk.value && mergedProps.value.asteriskPlacement === "end" ? (openBlock(), createElementBlock("span", _hoisted_3, " \xA0* ")) : createCommentVNode("v-if", true)], 2), createElementVNode("div", _hoisted_4, [tipMessage.value.message || unref(slots).tip ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(["px-form-item-tip", { [`px-form-item-tip__${tipMessage.value.level}`]: tipMessage.value.level }])
+					}, [renderSlot(_ctx.$slots, "tip", {
+						message: tipMessage.value.message,
+						level: tipMessage.value.level
+					}, () => [createTextVNode(toDisplayString(tipMessage.value.message), 1)])], 2)) : createCommentVNode("v-if", true), unref(slots).extra ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "extra")])) : createCommentVNode("v-if", true)])]),
+					_: 3
+				}, 16, ["span", "class"])]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+export { form_item_default as t };

package/es/form-item/type.d.ts

@@ -0,0 +1,96 @@
+import type { Ref, ToRefs } from 'vue';
+import type { ColProps } from '../col/type';
+import type { RuleItem, RuleLevel } from '../form/type';
+import type { RowProps } from '../row/type';
+import type { LooseRequired } from '../share/type';
+export type FormItemProps = {
+    /**
+     * @property {string} [field]
+     * @version 0.0.3
+     */
+    field?: string;
+    /**
+     * @property {string} [label]
+     * @version 0.0.3
+     */
+    label?: string;
+    /**
+     * @property {RuleItem | RuleItem[]} [rule]
+     * @version 0.0.3
+     */
+    rule?: RuleItem | RuleItem[];
+    /**
+     * @property {boolean} [disabled]
+     * @version 0.0.3
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly]
+     * @version 0.0.3
+     */
+    readonly?: boolean;
+    /**
+     * @property {'left' | 'right' | 'top'} [labelAlign]
+     * @version 0.0.3
+     */
+    labelAlign?: 'left' | 'right' | 'top';
+    /**
+     * @property {boolean} [showAsterisk]
+     * @version 0.0.3
+     */
+    showAsterisk?: boolean;
+    /**
+     * @property {'left' | 'right' | 'end'} [asteriskPlacement]
+     * @version 0.0.3
+     */
+    asteriskPlacement?: 'left' | 'right' | 'end';
+    /**
+     * @property {RowProps} [rowProps]
+     * @version 0.0.3
+     */
+    rowProps?: RowProps;
+    /**
+     * @property {ColProps} [labelProps]
+     * @version 0.0.3
+     */
+    labelProps?: ColProps;
+    /**
+     * @property {ColProps} [contentProps]
+     * @version 0.0.3
+     */
+    contentProps?: ColProps;
+};
+export type FormItemSlots = {
+    /**
+     * @slot tip
+     * @param {string} message
+     * @param {RuleLevel} level
+     * @version 0.0.3
+     */
+    tip: {};
+    /**
+     * @slot extra
+     * @version 0.0.3
+     */
+    extra: {};
+    /**
+     * @slot label
+     * @version 0.0.3
+     */
+    label: {};
+    /**
+     * @slot default
+     * @version 0.0.3
+     */
+    default: {};
+};
+export type FormItemProvide = {
+    changeHandler: () => Promise<void>;
+    blurHandler: () => Promise<void>;
+    inputHandler: () => Promise<void>;
+    status: Ref<RuleLevel>;
+} & ToRefs<LooseRequired<{
+    size: 'small' | 'medium' | 'large' | undefined;
+    disabled?: boolean;
+    readonly?: boolean;
+}>>;

package/es/grid/index.js

@@ -1,77 +1,58 @@
 import './css.js'
-import { defineComponent, computed, ref, provide, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
-import { u as useScreenWidth } from "../share/hook/use-screen-width.js";
-import { k, G as Gn } from "../aside/index.js";
-import { e as emitParentUpdate } from "../share/hook/use-index-of-children.js";
-import { G as GRID_UPDATE } from "../share/const/event-bus-key.js";
-import { G as GRID_PROVIDE } from "../share/const/provide-key.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Grid"
-  },
-  __name: "index",
-  props: {
-    column: { default: 24 },
-    gutter: { default: 0 }
-  },
-  setup(__props) {
-    const props = __props;
-    const [widthType] = useScreenWidth();
-    const gutterComputed = computed(() => {
-      if (k(props.gutter)) {
-        return {
-          x: props.gutter,
-          y: props.gutter
-        };
-      }
-      if ("x" in props.gutter || "y" in props.gutter) {
-        return {
-          x: props.gutter.x || 0,
-          y: props.gutter.y || 0
-        };
-      }
-      const currentGutter = props.gutter[widthType.value];
-      if (k(currentGutter)) {
-        return {
-          x: currentGutter,
-          y: currentGutter
-        };
-      }
-      return Gn({ x: 0, y: 0 }, currentGutter);
-    });
-    const columnComputed = computed(() => {
-      if (k(props.column)) {
-        return props.column;
-      }
-      const currentColumn = props.column[widthType.value];
-      return currentColumn || 24;
-    });
-    const itemsStat = ref([]);
-    provide(GRID_PROVIDE, {
-      column: columnComputed,
-      gutter: gutterComputed,
-      itemsStat
-    });
-    emitParentUpdate(GRID_UPDATE);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: "pixelium px-grid",
-          style: normalizeStyle({
-            gridTemplateColumns: `repeat(${columnComputed.value}, minmax(0, 1fr))`,
-            gap: gutterComputed.value ? `${gutterComputed.value.y}px ${gutterComputed.value.x}px` : void 0
-          })
-        },
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        4
-        /* STYLE */
-      );
-    };
-  }
+import { g as A, w as Qn } from "../vendor.js";
+import { r as GRID_UPDATE } from "../share/const/event-bus-key.js";
+import { t as emitParentUpdate } from "../share/hook/use-index-of-children.js";
+import { o as GRID_PROVIDE } from "../share/const/provide-key.js";
+import { t as useScreenWidth } from "../share/hook/use-screen-width.js";
+import { computed, createElementBlock, defineComponent, normalizeStyle, openBlock, provide, ref, renderSlot } from "vue";
+var grid_default = /* @__PURE__ */ defineComponent({
+	name: "Grid",
+	__name: "index",
+	props: {
+		column: { default: 24 },
+		gutter: { default: 0 }
+	},
+	setup(__props) {
+		const props = __props;
+		const [widthType] = useScreenWidth();
+		const gutterComputed = computed(() => {
+			if (A(props.gutter)) return {
+				x: props.gutter,
+				y: props.gutter
+			};
+			if ("x" in props.gutter || "y" in props.gutter) return {
+				x: props.gutter.x || 0,
+				y: props.gutter.y || 0
+			};
+			const currentGutter = props.gutter[widthType.value];
+			if (A(currentGutter)) return {
+				x: currentGutter,
+				y: currentGutter
+			};
+			return Qn({
+				x: 0,
+				y: 0
+			}, currentGutter);
+		});
+		const columnComputed = computed(() => {
+			if (A(props.column)) return props.column;
+			return props.column[widthType.value] || 24;
+		});
+		provide(GRID_PROVIDE, {
+			column: columnComputed,
+			gutter: gutterComputed,
+			itemsStat: ref([])
+		});
+		emitParentUpdate(GRID_UPDATE);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "pixelium px-grid",
+				style: normalizeStyle({
+					gridTemplateColumns: `repeat(${columnComputed.value}, minmax(0, 1fr))`,
+					gap: gutterComputed.value ? `${gutterComputed.value.y}px ${gutterComputed.value.x}px` : void 0
+				})
+			}, [renderSlot(_ctx.$slots, "default")], 4);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { grid_default as t };

package/es/grid-item/css.js

@@ -1,2 +1 @@
 import '../index.css'
-import './index.css'

package/es/grid-item/index.d.ts

@@ -4,7 +4,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<GridItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GridItemProps> & Readonly<{}>, {
-    offset: number | import("../index.ts").ValueWithDeviceWidth<number>;
+    offset: number | import("..").ValueWithDeviceWidth<number>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;