@nmorph/nmorph-ui-kit 2.2.37 → 2.2.38

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const a = "2.2.37", e = {
+const a = "2.2.38", e = {
   version: a
 };
 export {

package/dist/src/components/basic/nmorph-button/NmorphButton.vue.d.ts

@@ -17,11 +17,11 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     buttonDOMElement: Ref<HTMLElement, HTMLElement>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<INmorphProps> & Readonly<{}>, {
     fill: boolean;
+    type: "submit" | "reset" | "button";
     styleType: "default" | "transparent";
     color: string;
     loading: boolean;
     ripple: boolean;
-    type: "submit" | "reset" | "button";
     text: string | number;
     accentBgOnHover: boolean;
     shape: "default" | "square" | "round" | "circle";

package/dist/src/components/basic/nmorph-link/NmorphLink.vue.d.ts

@@ -12,8 +12,8 @@ interface INmorphProps {
     iconName?: string;
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<INmorphProps> & Readonly<{}>, {
-    color: string;
     type: "error" | "accent" | "success" | "warning";
+    color: string;
     text: string;
     disabled: boolean;
     target: "self" | "blank" | "parent" | "top";

package/dist/src/components/data/nmorph-avatar/NmorphAvatar.vue.d.ts

@@ -22,9 +22,9 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     onError?: (event: Event) => any;
     onLoad?: (event: Event) => any;
 }>, {
+    name: string;
     size: number;
     shape: "square" | "circle";
-    name: string;
     src: string | string[];
     frameBorder: number;
     imagePadding: number;

package/dist/src/components/data/nmorph-badge/NmorphBadge.vue.d.ts

@@ -31,9 +31,9 @@ type NmorphBadgeValueSlotProps = {
 };
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<INmorphProps> & Readonly<{}>, {
     size: NmorphBadgeSize;
+    type: NmorphBadgeType;
     value: string | number;
     color: string;
-    type: NmorphBadgeType;
     disabled: boolean;
     hidden: boolean;
     zIndex: number;

package/dist/src/components/data/nmorph-empty/NmorphEmpty.vue.d.ts

@@ -15,9 +15,9 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     minHeight: string | number;
     design: NmorphElementDesignType;
     shadowType: "inset" | "outset" | "combined" | "not-defined";
+    padding: string | number;
     description: string;
     iconSize: string | number;
-    padding: string | number;
     hideIcon: boolean;
     role: string;
     ariaLabel: string;

package/dist/src/components/data/nmorph-progress/NmorphProgress.vue.d.ts

@@ -13,8 +13,8 @@ interface INmorphProps {
     indeterminateAnimation?: string;
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<INmorphProps> & Readonly<{}>, {
-    color: NmorphProgressColorType;
     type: NmorphProgressType;
+    color: NmorphProgressColorType;
     height: string | number;
     valueInside: boolean;
     valueRightSide: boolean;

package/dist/src/components/data/nmorph-table/NmorphTable.vue.d.ts

@@ -16,8 +16,8 @@ interface INmorphProps {
     rowHoverBackground?: string;
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<INmorphProps> & Readonly<{}>, {
-    sort: NmorphTableSortType;
     data: NmorphTableDataType;
+    sort: NmorphTableSortType;
     cellHeight: string | number;
     bordered: boolean;
     design: "nmorph" | "common";

package/dist/src/components/feedback/nmorph-callout/NmorphCallout.vue.d.ts

@@ -13,8 +13,8 @@ interface INmorphProps {
     contentFontSize?: number | string;
 }
 declare const _default: DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<INmorphProps> & Readonly<{}>, {
-    color: string;
     type: NmorphCalloutType;
+    color: string;
     title: string;
     padding: string | number;
     borderRadius: string | number;

package/dist/src/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue.d.ts

@@ -1,7 +1,7 @@
 import { INmorphCheckboxOption, INmorphCommonInputProps, NmorphCheckboxDesignType, NmorphComponentDirection, NmorphSelectionControlHeightType } from '../../../types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 interface INmorphProps extends Omit<INmorphCommonInputProps, 'height'> {
-    modelValue: string[];
+    modelValue?: string[];
     options?: INmorphCheckboxOption[];
     design?: NmorphCheckboxDesignType;
     direction?: keyof typeof NmorphComponentDirection;
@@ -18,7 +18,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     direction: "row" | "column";
     design: NmorphCheckboxDesignType;
     options: INmorphCheckboxOption[];
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/src/components/form/nmorph-date-picker/NmorphDatePicker.vue.d.ts

@@ -3,7 +3,7 @@ import { NmorphDateFormatterType, NmorphSelectedDateModelType } from '../..';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 interface INmorphProps extends INmorphCommonInputProps {
     placeholder?: string;
-    modelValue: NmorphSelectedDateModelType;
+    modelValue?: NmorphSelectedDateModelType;
     type?: keyof typeof NmorphSelectionDateType;
     textSeparator?: string;
     initialDate?: Date;
@@ -38,7 +38,7 @@ declare const _default: DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentO
     valueSeparator: string;
     rangeSeparator: string;
     calendarCellHeight: string | number;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {
     nmorphInputDOMRef: HTMLDivElement;
 }, HTMLDivElement>;
 export default _default;

package/dist/src/components/form/nmorph-file-upload/NmorphFileUpload.vue.d.ts

@@ -1,6 +1,7 @@
-import { INmorphCustomFileData, NmorphResolutionType } from '../..';
+import { INmorphCustomFileData, INmorphFileUploadValidationError, NmorphResolutionType } from '../..';
+import { INmorphCommonInputProps } from '../../../types';
 import { DefineComponent, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-interface INmorphProps {
+interface INmorphProps extends Pick<INmorphCommonInputProps, 'id' | 'name' | 'autocomplete' | 'tabindex'> {
     modelValue?: INmorphCustomFileData[];
     disabled?: boolean;
     multiple?: boolean;
@@ -13,14 +14,16 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "update:model-value": (val: INmorphCustomFileData[]) => any;
     "on-unsupported-file-type-error": (val: string) => any;
+    "on-file-validation-error": (val: INmorphFileUploadValidationError) => any;
 }, string, PublicProps, Readonly<INmorphProps> & Readonly<{
     "onUpdate:model-value"?: (val: INmorphCustomFileData[]) => any;
     "onOn-unsupported-file-type-error"?: (val: string) => any;
+    "onOn-file-validation-error"?: (val: INmorphFileUploadValidationError) => any;
 }>, {
+    allowedTypes: string[];
     disabled: boolean;
     modelValue: INmorphCustomFileData[];
     multiple: boolean;
-    allowedTypes: string[];
     photoWithPreview: boolean;
     buttonText: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {

package/dist/src/components/form/nmorph-file-upload/types.d.ts

@@ -59,3 +59,7 @@ export interface INmorphCustomFileData {
     data: File;
     previewUrl: string;
 }
+export interface INmorphFileUploadValidationError {
+    file: File;
+    errors: string[];
+}

package/dist/src/components/form/nmorph-form/types.d.ts

@@ -1,13 +1,23 @@
 import { INmorphUseFormValidation, NmorphRulesType } from '../../../hooks';
-import { Ref } from 'vue';
-export type NmorphAvailableFormValueType = string | string[] | number | number[] | boolean | boolean[] | Date | Date[];
-export type NmorphFormValueType = Record<string, {
-    value: NmorphAvailableFormValueType;
+import { INmorphCustomFileData } from '../nmorph-file-upload/types';
+import { ComputedRef, Ref } from 'vue';
+export type NmorphFileFormValueType = File | File[] | INmorphCustomFileData[];
+export type NmorphAvailableFormValueType<TCustomValue = never> = string | string[] | number | number[] | boolean | boolean[] | Date | Date[] | null | NmorphFileFormValueType | TCustomValue;
+export type NmorphFormFieldType<TValue = NmorphAvailableFormValueType> = {
+    value: TValue;
     rules: NmorphRulesType;
-}>;
+};
+export type NmorphFormValueType<TValue = NmorphAvailableFormValueType> = Record<string, NmorphFormFieldType<TValue>>;
 export type NmorphFormValidationDataType = INmorphUseFormValidation;
 export interface NmorphFormItemInputDataType {
     id: Ref<string>;
     name: Ref<string>;
     autocomplete: Ref<string | undefined>;
+    value: ComputedRef<NmorphAvailableFormValueType | undefined>;
+    rules: ComputedRef<NmorphRulesType>;
+    errors: ComputedRef<string[]>;
+    valid: ComputedRef<boolean>;
+    touched: ComputedRef<boolean>;
+    updateValue: (value: NmorphAvailableFormValueType) => void;
+    validate: (value?: NmorphAvailableFormValueType) => void;
 }

package/dist/src/components/form/nmorph-form/use-form-item-input.d.ts

@@ -1,4 +1,5 @@
 import { INmorphCommonInputProps } from '../../../types';
+import { NmorphAvailableFormValueType, NmorphFormItemInputDataType } from './types';
 import { ComputedRef } from 'vue';
 export declare const nmorphFormItemInputDataKey = "nmorph-form-item-input-data";
 export declare const useFormItemInput: (props: Pick<INmorphCommonInputProps, 'id' | 'name' | 'tabindex' | 'autocomplete'>) => {
@@ -7,3 +8,12 @@ export declare const useFormItemInput: (props: Pick<INmorphCommonInputProps, 'id
     autocomplete: ComputedRef<string>;
     tabindex: ComputedRef<number>;
 };
+export declare const useFormItemModel: <T extends NmorphAvailableFormValueType>(props: {
+    modelValue?: T;
+}, emitUpdate: (value: T) => void, fallbackValue: T) => {
+    formItemInputData: NmorphFormItemInputDataType;
+    modelValue: ComputedRef<T>;
+    modelValueIsControlled: ComputedRef<any>;
+    updateModelValue: (value: T) => void;
+    validateModelValue: (value?: T) => void;
+};

package/dist/src/components/form/nmorph-radio-group/NmorphRadioGroup.vue.d.ts

@@ -2,7 +2,7 @@ import { INmorphCommonInputProps, INmorphRadioOption, NmorphComponentDirection,
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type NmorphListRadioOptionElementType = Omit<INmorphRadioOption, 'checked'>;
 interface INmorphProps extends Omit<INmorphCommonInputProps, 'height'> {
-    modelValue: string;
+    modelValue?: string;
     options?: NmorphListRadioOptionElementType[];
     styleType?: keyof typeof NmorphRadioStyleType;
     direction?: keyof typeof NmorphComponentDirection;
@@ -19,7 +19,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     modelValue: string;
     direction: "row" | "column";
     options: NmorphListRadioOptionElementType[];
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/src/hooks/use-field-validation.d.ts

@@ -1,4 +1,5 @@
 import { NmorphAvailableFormValueType } from '../components/form/nmorph-form/types';
+import { NmorphResolutionType } from '../components/form/nmorph-file-upload/types';
 import { Ref } from 'vue';
 export declare const enum NmorphArrayValidationOperator {
     'contains-one' = "contains-one",
@@ -22,6 +23,12 @@ export interface INmorphRule {
     booleanCompareType?: keyof typeof NmorphBooleanCompareOperator;
     arrayCompareType?: keyof typeof NmorphArrayValidationOperator;
     compareValue?: boolean | number | string | string[];
+    maxFileSize?: number;
+    fileMaxSize?: number;
+    allowedTypes?: Array<NmorphResolutionType | string>;
+    fileAllowedTypes?: Array<NmorphResolutionType | string>;
+    maxFiles?: number;
+    fileMaxCount?: number;
     error: string;
 }
 export type NmorphValidationInputValueType = NmorphAvailableFormValueType | null;
@@ -45,6 +52,14 @@ export interface INmorphCheckboxGroupValidationRule extends INmorphRule {
     arrayCompareType: keyof typeof NmorphArrayValidationOperator;
     compareValue: string[];
 }
+export interface INmorphFileValidationRule extends INmorphRule {
+    maxFileSize?: number;
+    fileMaxSize?: number;
+    allowedTypes?: Array<NmorphResolutionType | string>;
+    fileAllowedTypes?: Array<NmorphResolutionType | string>;
+    maxFiles?: number;
+    fileMaxCount?: number;
+}
 export declare const useFieldValidation: (data: INmorphUseValidationPayload) => {
     touched: Ref<boolean, boolean>;
     valid: Ref<boolean, boolean>;

package/dist/src/hooks/use-form-validation.d.ts

@@ -1,12 +1,17 @@
 import { Ref } from 'vue';
+import { useFieldValidation } from '.';
 import { NmorphFormValueType } from '../components/form/nmorph-form/types';
+import { NmorphValidationInputValueType } from './use-field-validation';
 export interface INmorphUseFormValidation {
+    formValue: NmorphFormValueType;
     fields: Record<string, {
         touched: Ref<boolean>;
         valid: Ref<boolean>;
         errors: Ref<string[]>;
         validate: () => void;
     }>;
+    updateFieldValue: (fieldName: string, value: NmorphValidationInputValueType) => void;
+    validateField: (fieldName: string, inputValue?: NmorphValidationInputValueType) => ReturnType<typeof useFieldValidation> | undefined;
     isFormValid: Ref<boolean>;
     isAnyTouched: Ref<boolean>;
 }