@nmorph/nmorph-ui-kit 2.2.58 → 3.0.0

package/dist/src/components/others/nmorph-divider/types.d.ts

@@ -1,4 +1,6 @@
+import { NmorphElementDesignType } from '../../../types';
 export type NmorphDirectionType = 'vertical' | 'horizontal';
 export interface INmorphDividerProps {
     direction?: NmorphDirectionType;
+    design?: NmorphElementDesignType;
 }

package/dist/src/components/others/nmorph-overlay/NmorphOverlay.vue.d.ts

@@ -7,8 +7,8 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphOverlayP
     "onOn-outside-click"?: () => any;
     "onOn-escape-keydown"?: () => any;
 }>, {
-    transparent: boolean;
     zIndex: number;
+    transparent: boolean;
     teleportTo: string | HTMLElement;
     disabledTeleport: boolean;
     closeOnEscape: boolean;

package/dist/src/components/providers/nmorph-notification-provider/types.d.ts

@@ -6,14 +6,14 @@ export interface INmorphNotification extends INmorphAlertProps {
     width?: string;
     placement?: TNmorphNotificationPlacement;
 }
-export declare enum NmorphNotificationPlacement {
-    'top-left' = "top-left",
-    'top-center' = "top-center",
-    'top-right' = "top-right",
-    'bottom-left' = "bottom-left",
-    'bottom-center' = "bottom-center",
-    'bottom-right' = "bottom-right"
-}
+export declare const NmorphNotificationPlacement: {
+    readonly 'top-left': "top-left";
+    readonly 'top-center': "top-center";
+    readonly 'top-right': "top-right";
+    readonly 'bottom-left': "bottom-left";
+    readonly 'bottom-center': "bottom-center";
+    readonly 'bottom-right': "bottom-right";
+};
 export type TNmorphNotificationPlacement = keyof typeof NmorphNotificationPlacement;
 export type TNmorphNotificationItem = INmorphNotification & {
     id: string;

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

@@ -1,33 +1,33 @@
 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",
-    'not-contains' = "not-contains",
-    'full-eq' = "full-eq"
-}
-export declare enum NmorphNumberCompareOperator {
-    'eq' = "eq",
-    'gte' = "gte",
-    'lte' = "lte",
-    'gt' = "gt",
-    'lt' = "lt"
-}
-export declare enum NmorphBooleanCompareOperator {
-    'eq' = "eq",
-    'not-eq' = "not-eq"
-}
+export declare const NmorphArrayValidationOperator: {
+    readonly 'contains-one': "contains-one";
+    readonly 'not-contains': "not-contains";
+    readonly 'full-eq': "full-eq";
+};
+export type NmorphArrayValidationOperator = keyof typeof NmorphArrayValidationOperator;
+export declare const NmorphNumberCompareOperator: {
+    readonly eq: "eq";
+    readonly gte: "gte";
+    readonly lte: "lte";
+    readonly gt: "gt";
+    readonly lt: "lt";
+};
+export type NmorphNumberCompareOperator = keyof typeof NmorphNumberCompareOperator;
+export declare const NmorphBooleanCompareOperator: {
+    readonly eq: "eq";
+    readonly 'not-eq': "not-eq";
+};
+export type NmorphBooleanCompareOperator = keyof typeof NmorphBooleanCompareOperator;
 export interface INmorphRule {
     pattern?: RegExp;
     numberCompareType?: keyof typeof NmorphNumberCompareOperator;
     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;
 }
@@ -41,7 +41,7 @@ export interface INmorphTextValidationRule extends INmorphRule {
     pattern: RegExp;
 }
 export interface INmorphNumberValidationRule extends INmorphRule {
-    numberCompareType: keyof typeof NmorphNumberCompareOperator;
+    numberCompareType: NmorphNumberCompareOperator;
     compareValue: number;
 }
 export interface INmorphRadioGroupValidationRule extends INmorphRule {
@@ -49,15 +49,12 @@ export interface INmorphRadioGroupValidationRule extends INmorphRule {
     compareValue: boolean | string;
 }
 export interface INmorphCheckboxGroupValidationRule extends INmorphRule {
-    arrayCompareType: keyof typeof NmorphArrayValidationOperator;
+    arrayCompareType: 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) => {

package/dist/src/hooks/use-nmorph-translation.d.ts

@@ -1,7 +1,7 @@
-import { INmorphApplyTranslation, Locale, TranslateMessages } from '../types';
+import { INmorphApplyTranslation, TranslateMessages } from '../types';
 import { I18n } from 'vue-i18n';
 export declare const useNmorphTranslation: (data: INmorphApplyTranslation) => I18n<{
     en: any;
     ru?: TranslateMessages;
     zh?: TranslateMessages;
-}, {}, {}, "en" | "ru" | "zh" | Locale, false>;
+}, {}, {}, "en" | "ru" | "zh", false>;

package/dist/src/types/app.types.d.ts

@@ -12,11 +12,6 @@ export interface INmorphInstance {
 export interface INmorphFormDataExpose {
     formData: NmorphFormValidationDataType;
 }
-/**
- * @deprecated Use `INmorphFormDataExpose` instead.
- */
-export interface INmorphFromDataExpose extends INmorphFormDataExpose {
-}
 export interface INmorphOptions {
     theme?: INmorphThemeOptions;
     i18n?: INmorphApplyTranslation;

package/dist/src/types/common.types.d.ts

@@ -1,43 +1,99 @@
 import { CSSProperties } from 'vue';
-export declare enum NmorphComponentHeight {
-    thick = "thick-component",
-    basic = "basic-component",
-    thin = "thin-component"
-}
-export declare const NmorphSelectionControlHeight: {
+export declare const NmorphComponentThickness: {
+    readonly thick: "thick-component";
+    readonly basic: "basic-component";
+    readonly thin: "thin-component";
+};
+export type NmorphComponentThickness = keyof typeof NmorphComponentThickness;
+export declare const NmorphSelectionControlThickness: {
     readonly 'extra-thin': "extra-thin-component";
-    readonly thick: NmorphComponentHeight.thick;
-    readonly basic: NmorphComponentHeight.basic;
-    readonly thin: NmorphComponentHeight.thin;
-};
-export type NmorphSelectionControlHeightType = keyof typeof NmorphSelectionControlHeight;
-export declare enum NmorphComponentDirection {
-    row = "row",
-    column = "column"
-}
-export declare enum NmorphShadowType {
-    inset = "shadow-inset",
-    outset = "shadow-outset",
-    combined = "shadow-combined",
-    'not-defined' = "shadow-not-defined"
-}
-export declare enum NmorphColor {
-    accent = "accent",
-    success = "success",
-    error = "error",
-    warning = "warning"
-}
-export declare enum NmorphComponentPosition {
-    left = "left",
-    right = "right",
-    top = "top",
-    bottom = "bottom"
-}
+    readonly thick: "thick-component";
+    readonly basic: "basic-component";
+    readonly thin: "thin-component";
+};
+export type NmorphSelectionControlThicknessType = keyof typeof NmorphSelectionControlThickness;
+export type NmorphSelectionControlPlainThicknessType = NmorphSelectionControlThicknessType;
+export type NmorphSelectionControlNmorphThicknessType = NmorphComponentThickness;
+export declare const NmorphComponentDirection: {
+    readonly row: "row";
+    readonly column: "column";
+};
+export type NmorphComponentDirection = keyof typeof NmorphComponentDirection;
+export declare const NmorphShadowType: {
+    readonly inset: "shadow-inset";
+    readonly outset: "shadow-outset";
+    readonly combined: "shadow-combined";
+    readonly 'not-defined': "shadow-not-defined";
+};
+export type NmorphShadowType = keyof typeof NmorphShadowType;
+export declare const NmorphColor: {
+    readonly accent: "accent";
+    readonly success: "success";
+    readonly error: "error";
+    readonly warning: "warning";
+};
+export type NmorphColor = keyof typeof NmorphColor;
+export declare const NmorphComponentPosition: {
+    readonly left: "left";
+    readonly right: "right";
+    readonly top: "top";
+    readonly bottom: "bottom";
+};
+export type NmorphComponentPosition = keyof typeof NmorphComponentPosition;
 export type NmorphPlacementSideType = keyof typeof NmorphComponentPosition;
 export type NmorphPlacementAlignType = 'start' | 'center' | 'end';
 export type NmorphPlacementType = NmorphPlacementSideType | `${NmorphPlacementSideType}-${NmorphPlacementAlignType}`;
 export type NmorphDomElementType = HTMLElement | null;
-export type NmorphElementDesignType = 'nmorph' | 'common';
+export declare const NmorphElementDesign: {
+    readonly nmorph: "nmorph";
+    readonly plain: "plain";
+};
+export type NmorphElementDesignType = keyof typeof NmorphElementDesign;
+export declare const NmorphTypographyVariant: {
+    readonly 'display-large': "display-large";
+    readonly 'display-medium': "display-medium";
+    readonly 'title-large': "title-large";
+    readonly title: "title";
+    readonly 'title-small': "title-small";
+    readonly 'body-large': "body-large";
+    readonly body: "body";
+    readonly 'body-small': "body-small";
+    readonly caption: "caption";
+    readonly label: "label";
+    readonly 'control-large': "control-large";
+    readonly control: "control";
+    readonly 'control-small': "control-small";
+    readonly 'control-tiny': "control-tiny";
+};
+export type NmorphTypographyVariantType = keyof typeof NmorphTypographyVariant;
+export declare const NmorphTypographyWeight: {
+    readonly regular: "regular";
+    readonly medium: "medium";
+    readonly semibold: "semibold";
+    readonly bold: "bold";
+    readonly extrabold: "extrabold";
+};
+export type NmorphTypographyWeightType = keyof typeof NmorphTypographyWeight;
+export declare const NmorphTypographyColor: {
+    readonly text: "text";
+    readonly 'semi-contrast': "semi-contrast";
+    readonly placeholder: "placeholder";
+    readonly focus: "focus";
+    readonly accent: "accent";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+    readonly white: "white";
+};
+export type NmorphTypographyColorType = keyof typeof NmorphTypographyColor;
+export declare const NmorphTextAlign: {
+    readonly left: "left";
+    readonly center: "center";
+    readonly right: "right";
+    readonly justify: "justify";
+    readonly inherit: "inherit";
+};
+export type NmorphTextAlignType = keyof typeof NmorphTextAlign;
 export interface INmorphCoords<T> {
     x: T;
     y: T;
@@ -56,7 +112,7 @@ export interface INmorphCommonInputProps {
     id?: string;
     name?: string;
     autocomplete?: string;
-    height?: keyof typeof NmorphComponentHeight;
+    thickness?: NmorphComponentThickness;
     disabled?: boolean;
     tabindex?: number;
 }

package/dist/src/types/date.types.d.ts

@@ -1,7 +1,8 @@
-export declare enum NmorphSelectionDateType {
-    'date' = "date",
-    'dates' = "dates",
-    'daterange' = "daterange"
-}
+export declare const NmorphSelectionDateType: {
+    readonly date: "date";
+    readonly dates: "dates";
+    readonly daterange: "daterange";
+};
+export type NmorphSelectionDateType = keyof typeof NmorphSelectionDateType;
 export type NmorphInnerPickerType = 'calendar' | 'year' | 'month';
 export type NmorphDatePickerControlsType = 'decrease' | 'increase';

package/dist/src/types/image.types.d.ts

@@ -1,17 +1,21 @@
-export declare enum AvatarShapeType {
-    circle = "circle",
-    square = "square"
-}
-export declare enum NmorphImageFit {
-    fill = "fill",
-    contain = "contain",
-    cover = "cover",
-    none = "none",
-    'scale-down' = "scale-down"
-}
+export declare const AvatarShapeType: {
+    readonly circle: "circle";
+    readonly square: "square";
+};
+export type AvatarShapeType = keyof typeof AvatarShapeType;
+export declare const NmorphImageFit: {
+    readonly fill: "fill";
+    readonly contain: "contain";
+    readonly cover: "cover";
+    readonly none: "none";
+    readonly 'scale-down': "scale-down";
+};
+export type NmorphImageFit = keyof typeof NmorphImageFit;
 export interface INmorphImage {
     src?: string;
     srcSet?: string;
-    fit?: keyof typeof NmorphImageFit;
+    width?: number | string;
+    height?: number | string;
+    fit?: NmorphImageFit;
     alt?: string;
 }

package/dist/src/types/selection.types.d.ts

@@ -1,26 +1,31 @@
 import { Ref } from 'vue';
-import { NmorphSelectionControlHeightType } from './common.types';
-export interface INmorphCheckboxOption {
+import { NmorphSelectionControlNmorphThicknessType, NmorphSelectionControlPlainThicknessType } from './common.types';
+export type NmorphSelectionControlDesignProps = {
+    design: 'plain';
+    thickness?: NmorphSelectionControlPlainThicknessType;
+} | {
+    design?: 'nmorph';
+    thickness?: NmorphSelectionControlNmorphThicknessType;
+};
+type INmorphCheckboxOptionBase = {
     id?: string;
     disabled?: boolean;
     modelValue?: boolean;
     label?: string;
-    design?: NmorphCheckboxDesignType;
-    height?: NmorphSelectionControlHeightType;
-}
-export type NmorphCheckboxDesignType = 'button' | 'checkbox';
+};
+export type INmorphCheckboxOption = INmorphCheckboxOptionBase & NmorphSelectionControlDesignProps;
+export type INmorphCheckboxGroupOption = Omit<INmorphCheckboxOptionBase, 'modelValue'> & {
+    id: string;
+} & NmorphSelectionControlDesignProps;
 export type NmorphCheckboxGroupSelectedValueInjectionType = Ref<string[]>;
-export type NmorphCheckboxGroupChangeCheckboxValueHandlerInjectionType = (value: string, currentState: string[]) => void;
-export interface INmorphRadioOption {
+export type NmorphCheckboxGroupChangeCheckboxValueHandlerInjectionType = (value: string) => void;
+type INmorphRadioOptionBase = {
     disabled?: boolean;
     label?: string;
     value: string;
     tabindex?: number;
-    height?: NmorphSelectionControlHeightType;
-}
-export declare enum NmorphRadioStyleType {
-    'radio-style' = "radio-style",
-    'button' = "button"
-}
+};
+export type INmorphRadioOption = INmorphRadioOptionBase & NmorphSelectionControlDesignProps;
 export type NmorphRadioGroupSelectedValueInjectionType = Ref<string>;
 export type NmorphRadioChangeRadioButtonValueHandlerInjectionType = (value: string) => void;
+export {};

package/dist/src/types/table.types.d.ts

@@ -1,5 +1,6 @@
-export type NmorphSortOrderType = keyof typeof NmorphSortOrder | undefined;
-export declare enum NmorphSortOrder {
-    ascending = "ascending",
-    descending = "descending"
-}
+export type NmorphSortOrderType = NmorphSortOrder | undefined;
+export declare const NmorphSortOrder: {
+    readonly ascending: "ascending";
+    readonly descending: "descending";
+};
+export type NmorphSortOrder = keyof typeof NmorphSortOrder;

package/dist/src/types/translation.types.d.ts

@@ -1,9 +1,10 @@
 import { I18n } from 'vue-i18n';
-export declare enum Locale {
-    en = "en",
-    ru = "ru",
-    zh = "zh"
-}
+export declare const Locale: {
+    readonly en: "en";
+    readonly ru: "ru";
+    readonly zh: "zh";
+};
+export type Locale = keyof typeof Locale;
 export type TranslateType = Partial<Record<keyof typeof Locale, TranslateMessages>> & {
     en: TranslateMessages;
 };
@@ -16,5 +17,5 @@ export interface LibraryOptions {
 export interface INmorphApplyTranslation {
     outsideMessagesMerge?: boolean;
     messages?: TranslateType;
-    locale?: keyof typeof Locale;
+    locale?: Locale;
 }

package/dist/src/utils/common.d.ts

@@ -4,8 +4,8 @@ export declare const toCssSize: (value?: number | string) => string;
 export type NmorphCssVariableValue = string | number | null | undefined | false;
 export declare const createCssVariables: (variables: Record<`--${string}`, NmorphCssVariableValue>) => Record<string, string | number>;
 export declare const createCssSizeVariables: (variables: Record<`--${string}`, number | string | null | undefined | false>) => Record<string, string | number>;
-type NmorphOptionHeightType = 'basic' | 'thick' | 'thin';
-export declare const getNmorphOptionHeight: (height?: NmorphOptionHeightType) => number;
+type NmorphOptionThicknessType = 'basic' | 'thick' | 'thin';
+export declare const getNmorphOptionHeight: (thickness?: NmorphOptionThicknessType) => number;
 export declare const resolveDomElement: (element: unknown) => Element | null;
 export declare const generateUUID: () => string;
 export {};

package/dist/src/utils/file-types.d.ts

@@ -1,7 +1,7 @@
 import { NmorphResolutionType } from '../components/form/nmorph-file-upload/types';
 export declare const getPlainFileType: (mimeType: string) => string;
 export declare const getFileExtension: (fileName: string) => string;
-export declare const getKnownResolutionByMime: (mimeType: string) => "" | "zip" | "rar" | "7z" | "pdf" | "msword" | "docx" | "xls" | "xlsx" | "ppt" | "pptx" | "json" | "xml" | "mpeg" | "audio-ogg" | "wav" | "mp4" | "webm" | "video-ogg" | "wideo-ogg" | "jpeg" | "jpg" | "png" | "gif" | "svg-xml" | "webp";
+export declare const getKnownResolutionByMime: (mimeType: string) => "" | "zip" | "rar" | "7z" | "pdf" | "msword" | "docx" | "xls" | "xlsx" | "ppt" | "pptx" | "json" | "xml" | "mpeg" | "audio-ogg" | "wav" | "mp4" | "webm" | "video-ogg" | "jpeg" | "jpg" | "png" | "gif" | "svg-xml" | "webp";
 export declare const getTypeCandidates: (mimeType: string, fileName?: string) => string[];
 export declare const getFileTypeCandidates: (file: File) => string[];
 export declare const isKnownFileType: <T extends Record<string, string>>(fileType: string, fileTypeMap: T) => any;

package/dist/src/utils/theme-style.d.ts

@@ -1,3 +1,4 @@
+export declare const typography: (variant?: string) => string;
 export declare const body4: () => string;
 export declare const body3: () => string;
 export declare const body2: () => string;
@@ -10,6 +11,7 @@ export declare const nmorphOutset: () => string;
 export declare const nmorphInset: () => string;
 export declare const nmorphBorder: (borderWidth: number) => string;
 export declare const nmorphCombined: (borderWidth?: number, isInsetDark?: boolean) => string;
+export declare const nmorphPlainSurface: () => string;
 export declare const disabled: () => string;
 export declare const ellipsis: () => string;
 export declare const focusOutline: () => string;