@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/footer/index.js

@@ -1,42 +1,33 @@
 import './css.js'
-import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot } from "vue";
-import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
-import { N, k } from "../aside/index.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{ name: "Footer" },
-  __name: "index",
-  props: {
-    minHeight: null,
-    bordered: { type: Boolean },
-    dark: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    const props = __props;
-    const darkMode = useDarkMode();
-    const minHeight = computed(() => {
-      return N(props.minHeight) ? void 0 : k(props.minHeight) ? `${props.minHeight}px` : props.minHeight;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "footer",
-        {
-          class: normalizeClass(["pixelium px-footer", {
-            "px-footer__dark": !unref(darkMode) && !!props.dark,
-            "px-footer__bordered": !!props.bordered
-          }]),
-          style: normalizeStyle({
-            minHeight: minHeight.value
-          })
-        },
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        6
-        /* CLASS, STYLE */
-      );
-    };
-  }
+import { _ as E, g as A } from "../vendor.js";
+import { t as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+var footer_default = /* @__PURE__ */ defineComponent({
+	name: "Footer",
+	__name: "index",
+	props: {
+		minHeight: null,
+		bordered: { type: Boolean },
+		dark: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const darkMode = useDarkMode();
+		const minHeight = computed(() => {
+			return E(props.minHeight) ? void 0 : A(props.minHeight) ? `${props.minHeight}px` : props.minHeight;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("footer", {
+				class: normalizeClass(["pixelium px-footer", {
+					"px-footer__dark": !unref(darkMode) && !!props.dark,
+					"px-footer__bordered": !!props.bordered
+				}]),
+				style: normalizeStyle({ minHeight: minHeight.value })
+			}, [renderSlot(_ctx.$slots, "default")], 6);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { footer_default as t };

package/es/form/css.js

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

package/es/form/index.d.ts

@@ -0,0 +1,27 @@
+import type { FormExpose, FormProps } from './type';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<FormProps, FormExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (form: Record<string | number, any>, event: Event) => any;
+    reset: (form: Record<string | number, any>, event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<FormProps> & Readonly<{
+    onSubmit?: ((form: Record<string | number, any>, event: Event) => any) | undefined;
+    onReset?: ((form: Record<string | number, any>, event: Event) => any) | undefined;
+}>, {
+    size: "small" | "medium" | "large";
+    disabled: boolean;
+    readonly: boolean;
+    labelAlign: "left" | "right" | "top";
+    showAsterisk: boolean;
+    asteriskPlacement: "left" | "right" | "end";
+    labelAutoWidth: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/form/index.js

@@ -0,0 +1,125 @@
+import './css.js'
+import { B as y, S as Oe, _ as E } from "../vendor.js";
+import { a as FORM_PROVIDE } from "../share/const/provide-key.js";
+import { r as throwError } from "../share/util/console.js";
+import { computed, createElementBlock, defineComponent, nextTick, onMounted, openBlock, provide, ref, renderSlot, toRefs, withKeys, withModifiers } from "vue";
+var form_default = /* @__PURE__ */ defineComponent({
+	name: "Form",
+	__name: "index",
+	props: {
+		model: null,
+		form: null,
+		rules: null,
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: "medium" },
+		labelAlign: { default: "right" },
+		showAsterisk: {
+			type: Boolean,
+			default: true
+		},
+		asteriskPlacement: { default: "left" },
+		labelAutoWidth: {
+			type: Boolean,
+			default: false
+		},
+		rowProps: null,
+		labelProps: null,
+		contentProps: null
+	},
+	emits: ["submit", "reset"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const model = computed(() => {
+			if (props.form) return props.form.model.value;
+			else if (props.model) return props.model;
+			throwError("One of the model or form props must be provided to the Form component.");
+		});
+		const fields = ref([]);
+		const labelWidth = ref([]);
+		const maxLabelWidth = computed(() => {
+			return Oe(labelWidth.value.map((e) => e.width));
+		});
+		provide(FORM_PROVIDE, {
+			...toRefs(props),
+			model,
+			registerField: (fieldItem) => {
+				fields.value.push(fieldItem);
+			},
+			unregisterField: (field) => {
+				fields.value = fields.value.filter((f) => f.field !== field);
+			},
+			collectLabelWidth: (item) => {
+				labelWidth.value = labelWidth.value.filter((e) => e.id !== item.id);
+				labelWidth.value.push(item);
+			},
+			removeLabelWidth: (itemId) => {
+				labelWidth.value = labelWidth.value.filter((e) => e.id !== itemId);
+			},
+			maxLabelWidth
+		});
+		const emits = __emit;
+		const filterFieldItem = (fieldItem, field) => E(field) ? true : y(field) ? field === fieldItem.field : field.includes(fieldItem.field);
+		const validate = async (field) => {
+			const validateObj = {};
+			const validate$1 = fields.value.filter((fieldItem) => filterFieldItem(fieldItem, field)).map((fieldItem) => {
+				return fieldItem.validate().then((res) => {
+					validateObj[fieldItem.field] = {
+						status: "fulfilled",
+						value: res
+					};
+					return res;
+				}, (err) => {
+					validateObj[fieldItem.field] = {
+						status: "rejected",
+						reason: err
+					};
+					throw err;
+				});
+			});
+			return {
+				isValid: (await Promise.allSettled(validate$1)).every((result) => result.status === "fulfilled" && (result.value.level !== "error" || !result.value.level)),
+				results: validateObj
+			};
+		};
+		const formSubmitHandler = (e) => {
+			emits("submit", model.value, e);
+		};
+		const reset = (field) => {
+			fields.value.filter((fieldItem) => filterFieldItem(fieldItem, field)).forEach((field$1) => field$1.reset());
+			clearValidation(field);
+		};
+		const formResetHandler = async (e) => {
+			reset();
+			await nextTick();
+			emits("reset", model.value, e);
+		};
+		const clearValidation = async (field) => {
+			fields.value.filter((fieldItem) => filterFieldItem(fieldItem, field)).forEach((field$1) => field$1.clearValidation());
+		};
+		const expose = {
+			validate,
+			reset,
+			clearValidation
+		};
+		__expose(expose);
+		onMounted(() => {
+			if (props.form) props.form.register(expose);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				class: "px-form pixelium",
+				onSubmit: withModifiers(formSubmitHandler, ["stop", "prevent"]),
+				onReset: withModifiers(formResetHandler, ["stop"]),
+				onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers(() => {}, ["prevent"]), ["enter"]))
+			}, [renderSlot(_ctx.$slots, "default")], 32);
+		};
+	}
+});
+export { form_default as t };

package/es/form/type.d.ts

@@ -0,0 +1,238 @@
+import type { ComputedRef, Ref, ToRefs } from 'vue';
+import type { ColProps } from '../col/type';
+import type { RowProps } from '../row/type';
+import type { LooseRequired } from '../share/type';
+export type RuleLevel = 'error' | 'warning' | 'success' | 'normal';
+export type FieldItem = {
+    field: string;
+    reset: Function;
+    clearValidation: Function;
+    validate: () => Promise<{
+        message: string;
+        level: RuleLevel;
+    }>;
+};
+export type FieldType = 'number' | 'string' | 'boolean' | 'array' | 'dict' | 'function' | 'date';
+export type RuleTrigger = 'blur' | 'change' | 'input';
+export type FormProps = {
+    /**
+     * @property {Record<number | string, any>} [model]
+     * @version 0.0.3
+     */
+    model?: Record<number | string, any>;
+    /**
+     * @property {FormInstance} [form]
+     * @version 0.0.3
+     */
+    form?: UseFormReturn;
+    /**
+     * @property {Record<string, RuleItem | RuleItem[]>} [rules]
+     * @version 0.0.3
+     */
+    rules?: Record<string, RuleItem | RuleItem[]>;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.3
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.3
+     */
+    readonly?: boolean;
+    /**
+     * @property {'small' | 'medium' | 'large'} [size='medium']
+     * @version 0.0.3
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * @property {'left' | 'right' | 'top'} [labelAlign='right']
+     * @version 0.0.3
+     */
+    labelAlign?: 'left' | 'right' | 'top';
+    /**
+     * @property {boolean} [showAsterisk]
+     * @version 0.0.3
+     */
+    showAsterisk?: boolean;
+    /**
+     * @property {'left' | 'right' | 'end'} [asteriskPlacement='left']
+     * @version 0.0.3
+     */
+    asteriskPlacement?: 'left' | 'right' | 'end';
+    /**
+     * @property {boolean} [labelAutoWidth=false]
+     * @version 0.0.3
+     */
+    labelAutoWidth?: boolean;
+    /**
+     * @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 interface UseFormReturn<T extends Record<string | number, any> = Record<string | number, any>> {
+    /**
+     * @property {Ref<Record<string | number, any>>} model
+     * @version 0.0.3
+     */
+    model: Ref<T>;
+    /**
+     * @property {(field?: string | string[]) => FormValidateResult} validate
+     * @version 0.0.3
+     */
+    validate: (field?: string | string[]) => FormValidateResult;
+    /**
+     * @property {(field?: string | string[]) => void} reset
+     * @version 0.0.3
+     */
+    reset: (field?: string | string[]) => void;
+    /**
+     * @property {(field?: string | string[]) => void} clearValidation
+     * @version 0.0.3
+     */
+    clearValidation: (field?: string | string[]) => void;
+    /**
+     * @ignore
+     */
+    register: (registerOptions: UseFormRegisterOptions) => void;
+}
+export type FormEvents = {
+    /**
+     * @event submit
+     * @param {Record<number | string, any>} form
+     * @param {Event} event
+     * @version 0.0.3
+     */
+    submit: [form: Record<number | string, any>, event: Event];
+    /**
+     * @event reset
+     * @param {Record<number | string, any>} form
+     * @param {Event} event
+     * @version 0.0.3
+     */
+    reset: [form: Record<number | string, any>, event: Event];
+};
+export type FormSlots = {
+    /**
+     * @slot default
+     * @version 0.0.3
+     */
+    default: {};
+};
+export type FormValidateResult = Promise<{
+    isValid: boolean;
+    results: Record<string, PromiseSettledResult<{
+        message: string;
+        level: RuleLevel;
+    }>>;
+}>;
+export type FormExpose = {
+    /**
+     * @property {(field?: string | string[]) => FormValidateResult} validate
+     * @version 0.0.3
+     */
+    validate: (field?: string | string[]) => FormValidateResult;
+    /**
+     * @property {(field?: string | string[]) => void} reset
+     * @version 0.0.3
+     */
+    reset: (field?: string | string[]) => void;
+    /**
+     * @property {(field?: string | string[]) => void} clearValidation
+     * @version 0.0.3
+     */
+    clearValidation: (field?: string | string[]) => void;
+};
+export type RuleItem = {
+    /**
+     * @property {boolean} [required=false]
+     * @version 0.0.3
+     */
+    required?: boolean;
+    /**
+     * @property {string} [message]
+     * @version 0.0.3
+     */
+    message?: string;
+    /**
+     * @property {RuleTrigger | RuleTrigger[]} [trigger=['change', 'blur']]
+     * @version 0.0.3
+     */
+    trigger?: RuleTrigger | RuleTrigger[];
+    /**
+     * @property {FieldType | FieldType[]} [type]
+     * @version 0.0.3
+     */
+    type?: FieldType | FieldType[];
+    /**
+     * @property {number} [max]
+     * @version 0.0.3
+     */
+    max?: number;
+    /**
+     * @property {number} [min]
+     * @version 0.0.3
+     */
+    min?: number;
+    /**
+     * @property {number} [maxLength]
+     * @version 0.0.3
+     */
+    maxLength?: number;
+    /**
+     * @property {number} [minLength]
+     * @version 0.0.3
+     */
+    minLength?: number;
+    /**
+     * @property {boolean} [email=false]
+     * @version 0.0.3
+     */
+    email?: boolean;
+    /**
+     * @property {boolean} [url=false]
+     * @version 0.0.3
+     */
+    url?: boolean;
+    /**
+     * @property {boolean} [numberString=false]
+     * @version 0.0.3
+     */
+    numberString?: boolean;
+    /**
+     * @property {RuleLevel} [level='error']
+     * @version 0.0.3
+     */
+    level?: RuleLevel;
+    /**
+     * @property {(value: any, model: Record<number | string, any>) => string | void | Promise<void | string>} [validator]
+     * @version 0.0.3
+     */
+    validator?: (value: any, model: Record<number | string, any>) => string | void | Promise<void | string>;
+};
+export type FormProvide = {
+    maxLabelWidth: ComputedRef<number>;
+    registerField: (fieldItem: FieldItem) => void;
+    unregisterField: (field: string) => void;
+    collectLabelWidth: (item: {
+        id: string;
+        width: number;
+    }) => void;
+    removeLabelWidth: (itemId: string) => void;
+    model: Ref<Record<string | number, any>>;
+} & ToRefs<LooseRequired<Omit<FormProps, 'form' | 'model'>>>;
+export type UseFormRegisterOptions = {
+    validate: (field?: string | string[]) => FormValidateResult;
+    clearValidation: (field?: string | string[]) => void;
+};

package/es/form/use-form.d.ts

@@ -0,0 +1,4 @@
+import type { UseFormReturn } from './type';
+export declare function useForm<T extends Record<string | number, any> = Record<string | number, any>>(options?: {
+    initialValues?: T;
+}): UseFormReturn<T>;

package/es/form/use-form.js

@@ -0,0 +1,48 @@
+import { D as S, I as on, M as f } from "../vendor.js";
+import { n as logWarn } from "../share/util/console.js";
+import { ref } from "vue";
+function useForm(options = {}) {
+	const funcRegister = {
+		validateFn: null,
+		clearValidationFn: null
+	};
+	const model = ref({ ...options.initialValues });
+	const validate = async (field) => {
+		if (!funcRegister.validateFn) {
+			logWarn("Validation function not registered. Ensure the Form component is properly mounted.");
+			return {
+				isValid: false,
+				results: {}
+			};
+		}
+		return await funcRegister.validateFn(field);
+	};
+	const register = (registerOptions) => {
+		funcRegister.validateFn = registerOptions.validate;
+		funcRegister.clearValidationFn = registerOptions.clearValidation;
+	};
+	const reset = (field) => {
+		if (!field) model.value = { ...options.initialValues };
+		else {
+			const nextModel = { ...model.value };
+			(S(field) ? field : [field]).forEach((fieldPath) => {
+				on(nextModel, fieldPath, !options.initialValues ? void 0 : f(options.initialValues, fieldPath));
+			});
+			model.value = nextModel;
+		}
+		if (funcRegister.clearValidationFn) funcRegister.clearValidationFn(field);
+		else logWarn("Clear Validation not registered. Ensure the Form component is properly mounted.");
+	};
+	const clearValidation = (field) => {
+		if (funcRegister.clearValidationFn) funcRegister.clearValidationFn(field);
+		else logWarn("Clear Validation function not registered. Ensure the Form component is properly mounted.");
+	};
+	return {
+		model,
+		validate,
+		register,
+		reset,
+		clearValidation
+	};
+}
+export { useForm as t };

package/es/form-item/css.js

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

package/es/form-item/index.css

@@ -0,0 +1,77 @@
+.px-form-item-label {
+  display: flex;
+  min-height: var(--px-medium-size);
+  line-height: var(--px-medium-size);
+  font-size: 14px;
+}
+.px-form-item-label__auto {
+  white-space: nowrap;
+  display: inline-flex;
+}
+.px-form-item-label__left {
+  justify-content: flex-start;
+}
+.px-form-item-label__right {
+  justify-content: flex-end;
+}
+.px-form-item-label__large {
+  min-height: var(--px-large-size);
+  line-height: var(--px-large-size);
+  font-size: 15px;
+}
+.px-form-item-label__small {
+  min-height: var(--px-small-size);
+  line-height: var(--px-small-size);
+  font-size: 12px;
+}
+.px-form-item-label-wrapper__auto {
+  box-sizing: content-box;
+  flex-basis: 0;
+}
+.px-form-item-addition {
+  min-height: 20px;
+  width: 100%;
+}
+.px-form-item-tip,
+.px-form-item-extra {
+  height: 20px;
+  font-size: 12px;
+  color: var(--px-neutral-8);
+}
+.px-form-item-asterisk {
+  color: var(--px-danger-6);
+}
+.px-form-item-tip__error {
+  color: var(--px-danger-6);
+}
+.px-form-item-tip__warning {
+  color: var(--px-warning-6);
+}
+.px-form-item-tip__success {
+  color: var(--px-success-6);
+}
+.px-form-item-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  min-height: var(--px-medium-size);
+  font-size: 14px;
+}
+.px-form-item-content > *:first-child {
+  flex-grow: 1;
+}
+.px-form-item-content__large {
+  min-height: var(--px-large-size);
+  font-size: 15px;
+}
+.px-form-item-content__small {
+  min-height: var(--px-small-size);
+  font-size: 12px;
+}
+.px-form-item-content-wrapper__auto {
+  width: 100%;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}

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

@@ -0,0 +1,37 @@
+import type { RuleLevel, RuleTrigger } from '../form/type';
+import type { FormItemProps } from './type';
+declare var __VLS_10: {}, __VLS_16: {}, __VLS_18: {
+    message: string;
+    level: RuleLevel;
+}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_16) => any;
+} & {
+    tip?: (props: typeof __VLS_18) => any;
+} & {
+    extra?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<FormItemProps, {
+    validate: (trigger?: RuleTrigger) => Promise<{
+        message: string;
+        level: RuleLevel;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormItemProps> & Readonly<{}>, {
+    disabled: boolean;
+    readonly: boolean;
+    labelAlign: "left" | "right" | "top";
+    showAsterisk: boolean;
+    asteriskPlacement: "left" | "right" | "end";
+    rowProps: import("../row/type.ts").RowProps;
+    labelProps: import("../col/type.ts").ColProps;
+    contentProps: import("../col/type.ts").ColProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};