@nmorph/nmorph-ui-kit 2.2.5 → 2.2.7

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

@@ -26,7 +26,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     accentBgOnHover: boolean;
     shape: "default" | "square" | "round" | "circle";
     tabindex: number;
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     "icon-only"?(_: {}): any;

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

@@ -23,12 +23,12 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     color: string;
     disabled: boolean;
     hidden: boolean;
+    zIndex: number;
     max: number;
     isDot: boolean;
     isTag: boolean;
     offsetY: number;
     offsetX: number;
-    zIndex: number;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, Readonly<{
     default?: (props: Record<string, never>) => unknown;
     value?: (props: NmorphBadgeValueSlotProps) => unknown;

package/dist/src/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue.d.ts

@@ -17,7 +17,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     }) => any;
 }>, {
     block: boolean;
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     title: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {

package/dist/src/components/data/nmorph-image-preview/NmorphImagePreview.vue.d.ts

@@ -7,6 +7,7 @@ interface INmorphProps {
     scaleStep?: number;
     minScaleLevel?: number;
     maxScaleLevel?: number;
+    zIndex?: number;
 }
 declare const _default: DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "update:model-value": (value: boolean) => any;

package/dist/src/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentO
 }, string, PublicProps, Readonly<INmorphProps> & Readonly<{
     onClose?: (val: string) => any;
 }>, {
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     design: NmorphElementDesignType;
     removable: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

package/dist/src/components/feedback/nmorph-dialog/NmorphDialog.vue.d.ts

@@ -20,7 +20,6 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     width: string;
     title: string;
     modelValue: boolean;
-    zIndex: number;
     openDelay: number;
     closeDelay: number;
     closeOnClickModal: boolean;

package/dist/src/components/form/index.d.ts

@@ -15,6 +15,7 @@ export { default as NmorphSelect } from './nmorph-select/NmorphSelect.vue';
 export * from './nmorph-select/types';
 export { default as NmorphSelectOption } from './nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue';
 export { default as NmorphSlider } from './nmorph-slider/NmorphSlider.vue';
+export * from './nmorph-slider/types';
 export { default as NmorphSwitch } from './nmorph-switch/NmorphSwitch.vue';
 export { default as NmorphTextInput } from './nmorph-text-input/NmorphTextInput.vue';
 export { default as NmorphRadio } from './nmorph-radio/NmorphRadio.vue';

package/dist/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.d.ts

@@ -7,6 +7,7 @@ interface INmorphProps extends INmorphCommonInputProps {
     clearable?: boolean;
     list: INmorphAutocompleteListItem[];
     actionCallback?: NmorphAutocompleteActionCallbackType;
+    zIndex?: number;
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     select: (value: unknown) => any;
@@ -15,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     onSelect?: (value: unknown) => any;
     "onUpdate:model-value"?: (value: string) => any;
 }>, {
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     placeholder: string;
     modelValue: string;

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

@@ -11,7 +11,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
 }, string, PublicProps, Readonly<INmorphProps> & Readonly<{
     "onUpdate:model-value"?: (val: string[]) => any;
 }>, {
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     modelValue: string[];
     design: NmorphCheckboxDesignType;

package/dist/src/components/form/nmorph-color-picker/NmorphColorPicker.vue.d.ts

@@ -16,7 +16,7 @@ declare const _default: DefineComponent<INmorphProps, {
     onFocus?: () => any;
     "onUpdate:model-value"?: (val: string) => any;
 }>, {
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     modelValue: string;
     showValue: boolean;

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

@@ -7,6 +7,7 @@ interface INmorphProps extends INmorphCommonInputProps {
     type?: keyof typeof NmorphSelectionDateType;
     textSeparator?: string;
     initialDate?: Date;
+    zIndex?: number;
 }
 declare const _default: DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "update:model-value": (modelValue: NmorphSelectedDateModelType) => any;
@@ -14,7 +15,7 @@ declare const _default: DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentO
     "onUpdate:model-value"?: (modelValue: NmorphSelectedDateModelType) => any;
 }>, {
     type: "date" | "dates" | "daterange";
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     placeholder: string;
     modelValue: NmorphSelectedDateModelType;

package/dist/src/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.vue.d.ts

@@ -12,7 +12,7 @@ interface INmorphProps {
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<INmorphProps> & Readonly<{}>, {
     name: string;
     autocomplete: string;
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     label: string;
     showValidationIcon: boolean;
     staticErrorBoxSpace: boolean;

package/dist/src/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue.d.ts

@@ -6,7 +6,7 @@ interface INmorphProps {
     staticHeight?: boolean;
 }
 declare const _default: DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<INmorphProps> & Readonly<{}>, {
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     errors: string[] | Ref<string[], string[]>;
     staticHeight: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

package/dist/src/components/form/nmorph-number-input/NmorphNumberInput.vue.d.ts

@@ -14,7 +14,7 @@ declare const _default: DefineComponent<INmorphProps, {
 }, string, PublicProps, Readonly<INmorphProps> & Readonly<{
     "onUpdate:model-value"?: (val: number) => any;
 }>, {
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     modelValue: number;
     max: number;

package/dist/src/components/form/nmorph-otp-input/NmorphOTPInput.vue.d.ts

@@ -24,7 +24,7 @@ declare const _default: DefineComponent<INmorphProps, {
     onComplete?: (val: string) => any;
 }>, {
     length: number;
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     autocapitalize: string;
     modelValue: string;

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

@@ -13,7 +13,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     "onUpdate:model-value"?: (val: string) => any;
 }>, {
     styleType: "button" | "radio-style";
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     modelValue: string;
     options: NmorphListRadioOptionElementType[];

package/dist/src/components/form/nmorph-select/NmorphSelect.vue.d.ts

@@ -11,6 +11,7 @@ interface INmorphProps extends INmorphCommonInputProps {
     open?: boolean;
     fill?: boolean;
     optionsWidth?: 'truncate' | 'auto';
+    zIndex?: number;
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "update:model-value": (val: NmorphSelectModelValueType) => any;
@@ -19,7 +20,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
 }>, {
     fill: boolean;
     loading: boolean;
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     modelValue: NmorphSelectModelValueType;
     open: boolean;

package/dist/src/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphSelectOp
 }, string, PublicProps, Readonly<INmorphSelectOption> & Readonly<{
     "onChange-value"?: (val: string) => any;
 }>, {
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     label: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {

package/dist/src/components/form/nmorph-select-button/NmorphSelectButton.vue.d.ts

@@ -12,7 +12,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     "onUpdate:model-value"?: (val: string) => any;
 }>, {
     fill: boolean;
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     modelValue: string;
     options: INmorphSelectButtonOption[];

package/dist/src/components/form/nmorph-slider/NmorphSlider.vue.d.ts

@@ -1,15 +1,8 @@
-import { INmorphCommonInputProps } from '../../../types';
+import { INmorphSliderProps } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-interface INmorphProps extends Omit<INmorphCommonInputProps, 'height'> {
-    modelValue?: number;
-    max?: number;
-    min?: number;
-    step?: number;
-    showTooltip?: boolean;
-}
-declare const _default: DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const _default: DefineComponent<INmorphSliderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "update:model-value": (val: number) => any;
-}, string, PublicProps, Readonly<INmorphProps> & Readonly<{
+}, string, PublicProps, Readonly<INmorphSliderProps> & Readonly<{
     "onUpdate:model-value"?: (val: number) => any;
 }>, {
     disabled: boolean;

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

@@ -0,0 +1,8 @@
+import { INmorphCommonInputProps } from '../../../types';
+export interface INmorphSliderProps extends Omit<INmorphCommonInputProps, 'height'> {
+    modelValue?: number;
+    max?: number;
+    min?: number;
+    step?: number;
+    showTooltip?: boolean;
+}

package/dist/src/components/form/nmorph-text-input/NmorphTextInput.vue.d.ts

@@ -24,7 +24,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
     "onUpdate:model-value"?: (val: string) => any;
     "onOn-enter"?: () => any;
 }>, {
-    height: "default" | "thick" | "thin";
+    height: "thick" | "basic" | "thin";
     disabled: boolean;
     placeholder: string;
     modelValue: string;

package/dist/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue.d.ts

@@ -9,6 +9,7 @@ interface INmorphProps {
     xOffset?: number;
     yOffset?: number;
     fillWidth?: boolean;
+    zIndex?: number;
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "on-outside-click": () => any;

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

@@ -2,6 +2,7 @@ import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOp
 interface INmorphProps {
     show: boolean;
     transparent?: boolean;
+    zIndex?: number;
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "on-outside-click": () => any;

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

@@ -1,4 +1,4 @@
-import { INmorphAlertProps } from '../../../main';
+import { INmorphAlertProps } from '../../feedback/nmorph-alert/types';
 export interface INmorphNotification extends INmorphAlertProps {
     id?: string;
     duration?: number;

package/dist/src/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export * from './use-field-validation';
 export * from './use-form-validation';
 export * from './use-placement';
+export * from './use-z-index';
 export * from '../outside-hooks/use-nmorph-theme';
 export * from './use-nmorph-translation';
 export * from './use-style-class-mixins';

package/dist/src/hooks/use-z-index.d.ts

@@ -0,0 +1,2 @@
+import { WatchSource, ComputedRef } from 'vue';
+export declare const useZIndex: (open: WatchSource<boolean>, zIndex: () => number | undefined) => ComputedRef<number>;

package/dist/src/outside-hooks/index.d.ts

@@ -2,3 +2,4 @@ export { useNmorphTheme } from './use-nmorph-theme';
 export { useNmorphBrowser } from './use-nmorph-browser';
 export { useNmorphNotification } from './use-nmorph-notification';
 export { useNmorph } from './use-nmorph';
+export { useNmorphZIndex } from './use-nmorph-z-index';

package/dist/src/outside-hooks/use-nmorph-z-index.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+export declare const useNmorphZIndex: (options?: {
+    base?: number;
+}) => {
+    current: Ref<number, number>;
+    next: () => number;
+};

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

@@ -1,17 +1,18 @@
 import { Ref } from 'vue';
 import { I18n } from 'vue-i18n';
 import { NmorphFormValidationDataType } from '../components';
-import { useNmorphBrowser, useNmorphTheme } from '../outside-hooks';
+import { useNmorphBrowser, useNmorphTheme, useNmorphZIndex } from '../outside-hooks';
 export interface INmorphInstance {
     theme: ReturnType<typeof useNmorphTheme>;
     browser: ReturnType<typeof useNmorphBrowser>;
+    zIndex: ReturnType<typeof useNmorphZIndex>;
 }
 export interface INmorphFromDataExpose {
     formData: NmorphFormValidationDataType;
 }
 export declare enum NmorphComponentHeight {
     thick = "thick-component",
-    default = "default-height-component",
+    basic = "basic-component",
     thin = "thin-component"
 }
 export type NmorphSortOrderType = keyof typeof NmorphSortOrder | undefined;
@@ -86,6 +87,9 @@ export interface INmorphThemeOptions {
 export interface INmorphOptions {
     theme?: INmorphThemeOptions;
     i18n?: INmorphApplyTranslation;
+    zIndex?: {
+        base?: number;
+    };
 }
 export type NmorphThemeOptionsType = Record<string, INmorphThemeColors>;
 export interface INmorphStaticColors {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@nmorph/nmorph-ui-kit",
   "type": "module",
   "private": false,
-  "version": "2.2.5",
+  "version": "2.2.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -43,7 +43,12 @@
     "./dist/styles/main.scss": "./dist/styles/main.scss"
   },
   "scripts": {
+    "dev": "HOME=/tmp/nmorph-storybook-home STORYBOOK_DISABLE_TELEMETRY=1 storybook dev -p 43183",
+    "storybook": "HOME=/tmp/nmorph-storybook-home STORYBOOK_DISABLE_TELEMETRY=1 storybook dev -p 43183",
+    "build:storybook": "HOME=/tmp/nmorph-storybook-home STORYBOOK_DISABLE_TELEMETRY=1 storybook build",
     "build": "npm run build:types && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "watch": "vite build --watch",
     "lint:es:check": "eslint --ext .js,.ts,.vue --ignore-path .gitignore src/",
     "lint:es": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src/",
@@ -63,12 +68,17 @@
     "vue-i18n": "^9.9.0"
   },
   "devDependencies": {
+    "@storybook/addon-docs": "10.3.6",
+    "@storybook/builder-vite": "10.3.6",
+    "@storybook/vue3": "10.3.6",
+    "@storybook/vue3-vite": "10.3.6",
     "@types/node": "^20.10.8",
     "@types/vue": "^2.0.0",
     "@types/vue-router": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/test-utils": "^2.4.10",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -79,6 +89,7 @@
     "prettier": "^3.1.1",
     "rollup-plugin-ignore": "^1.0.10",
     "sass": "^1.69.7",
+    "storybook": "10.3.6",
     "stylelint": "^16.1.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-rational-order": "^0.0.4",
@@ -90,10 +101,11 @@
     "stylelint-prettier": "^5.0.0",
     "stylelint-scss": "^6.0.0",
     "typescript": "~5.1.6",
-    "vite": "^4.5.0",
+    "vite": "^5.4.21",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-static-copy": "^0.17.1",
     "vite-svg-loader": "^5.1.0",
+    "vitest": "2.1.9",
     "vue-eslint-parser": "^9.4.0",
     "vue-tsc": "^1.6.5"
   }