@nmorph/nmorph-ui-kit 0.0.1 → 0.0.4

package/dist/types/components.d.ts

@@ -1,22 +1,51 @@
 import NmorphTextInput from './components/inputs/nmorph-text-input/NmorphTextInput.vue';
 import NmorphCheckbox from './components/inputs/checkbox/nmorph-checkbox/NmorphCheckbox.vue';
 import NmorphCheckboxGroup from './components/inputs/checkbox/nmorph-checkbox-group/NmorphCheckboxGroup.vue';
+import NmorphRadio from './components/inputs/radio/nmorph-radio/NmorphRadio.vue';
 import NmorphRadioGroup from './components/inputs/radio/nmorph-radio-group/NmorphRadioGroup.vue';
 import NmorphNumberInput from './components/inputs/nmorph-number-input/NmorphNumberInput.vue';
 import NmorphSlider from './components/inputs/nmorph-slider/NmorphSlider.vue';
 import NmorphSwitch from './components/inputs/nmorph-switch/NmorphSwitch.vue';
 import NmorphSelect from './components/inputs/nmorph-select/NmorphSelect.vue';
-import NmorphSelectOption from './components/inputs/nmorph-select-option/NmorphSelectOption.vue';
+import NmorphSelectOption from './components/inputs/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue';
 import NmorphFileUpload from './components/inputs/nmorph-file-upload/NmorphFileUpload.vue';
+import NmorphTimePicker from './components/inputs/nmorph-time-picker/NmorphTimePicker.vue';
+import NmorphDatePicker from './components/inputs/nmorph-date-picker/NmorphDatePicker.vue';
+import NmorphYearMonthPicker from './components/inputs/nmorph-date-picker/components/nmorph-year-month-picker/NmorphYearMonthPicker.vue';
+import NmorphAutocomplete from './components/inputs/nmorph-autocomplete/NmorphAutocomplete.vue';
 import NmorphIcon from './components/nmorph-icon/NmorphIcon.vue';
 import NmorphButton from './components/nmorph-button/NmorphButton.vue';
 import NmorphCard from './components/nmorph-card/NmorphCard.vue';
 import NmorphLink from './components/nmorph-link/NmorphLink.vue';
-import NmorphErrorBox from './components/nmorph-error-box/NmorphErrorBox.vue';
 import NmorphTooltip from './components/nmorph-tooltip/NmorphTooltip.vue';
 import NmorphTag from './components/nmorph-tag/NmorphTag.vue';
 import NmorphOverlay from './components/nmorph-overlay/NmorphOverlay.vue';
 import NmorphImage from './components/nmorph-image/NmorphImage.vue';
 import NmorphImagePreview from './components/nmorph-image-preview/NmorphImagePreview.vue';
 import NmorphCarousel from './components/nmorph-carousel/NmorphCarousel.vue';
-export { NmorphTextInput, NmorphImage, NmorphIcon, NmorphButton, NmorphCheckbox, NmorphRadioGroup, NmorphCheckboxGroup, NmorphCarousel, NmorphNumberInput, NmorphSwitch, NmorphSelect, NmorphSelectOption, NmorphFileUpload, NmorphCard, NmorphLink, NmorphSlider, NmorphErrorBox, NmorphTooltip, NmorphOverlay, NmorphImagePreview, NmorphTag, };
+import NmorphCarouselItem from './components/nmorph-carousel/components/nmorph-carousel-item/NmorphCarouselItem.vue';
+import NmorphFormItem from './components/nmorph-form/components/nmorph-form-item/NmorphFormItem.vue';
+import NmorphForm from './components/nmorph-form/NmorphForm.vue';
+import NmorphScroll from './components/nmorph-scroll/NmorphScroll.vue';
+import NmorphDropdown from './components/nmorph-dropdown/NmorphDropdown.vue';
+import NmorphCalendar from './components/nmorph-calendar/NmorphCalendar.vue';
+import NmorphTable from './components/nmorph-table/NmorphTable.vue';
+import NmorphTableColumn from './components/nmorph-table/components/nmorph-table-column/NmorphTableColumn.vue';
+import NmorphTableCell from './components/nmorph-table/components/nmorph-table-cell/NmorphTableCell.vue';
+import NmorphDivider from './components/nmorph-divider/NmorphDivider.vue';
+import NmorphCollapse from './components/nmorph-collapse/NmorphCollapse.vue';
+import NmorphCollapseItem from './components/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue';
+import NmorphProgress from './components/nmorph-progress/NmorphProgress.vue';
+import NmorphBacktop from './components/nmorph-backtop/NmorphBacktop.vue';
+import NmorphBadge from './components/nmorph-badge/NmorphBadge.vue';
+import NmorphAvatar from './components/nmorph-avatar/NmorphAvatar.vue';
+import NmorphTabs from './components/nmorph-tabs/NmorphTabs.vue';
+import NmorphTabPane from './components/nmorph-tabs/components/nmorph-tab-pane/NmorphTabPane.vue';
+import NmorphBreadcrumb from './components/nmorph-breadcrumb/NmorphBreadcrumb.vue';
+import NmorphBreadcrumbItem from './components/nmorph-breadcrumb/components/nmorph-breadcrumb-item/NmorphBreadcrumbItem.vue';
+import NmorphAlert from './components/nmorph-alert/NmorphAlert.vue';
+import NmorphDialog from './components/nmorph-dialog/NmorphDialog.vue';
+import NmorphSkeleton from './components/nmorph-skeleton/NmorphSkeleton.vue';
+import NmorphSkeletonItem from './components/nmorph-skeleton/components/NmorphSkeletonItem.vue';
+import NmorphPagination from './components/nmorph-pagination/NmorphPagination.vue';
+export { NmorphForm, NmorphTextInput, NmorphImage, NmorphIcon, NmorphButton, NmorphRadio, NmorphRadioGroup, NmorphCheckbox, NmorphCheckboxGroup, NmorphCarousel, NmorphCarouselItem, NmorphNumberInput, NmorphSwitch, NmorphTimePicker, NmorphDatePicker, NmorphYearMonthPicker, NmorphFormItem, NmorphSelect, NmorphSelectOption, NmorphFileUpload, NmorphCard, NmorphLink, NmorphSlider, NmorphTooltip, NmorphOverlay, NmorphImagePreview, NmorphScroll, NmorphTag, NmorphDropdown, NmorphCalendar, NmorphTable, NmorphTableColumn, NmorphTableCell, NmorphDivider, NmorphCollapse, NmorphCollapseItem, NmorphProgress, NmorphBacktop, NmorphBadge, NmorphAvatar, NmorphTabs, NmorphTabPane, NmorphBreadcrumb, NmorphBreadcrumbItem, NmorphAlert, NmorphDialog, NmorphSkeleton, NmorphSkeletonItem, NmorphPagination, NmorphAutocomplete, };

package/dist/types/histoire.setup.d.ts

@@ -1,2 +0,0 @@
-import { Vue3StorySetupHandler } from '@histoire/plugin-vue';
-export declare const setupVue3: Vue3StorySetupHandler;

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

@@ -0,0 +1,4 @@
+export * from './useFieldValidation';
+export * from './useFormValidation';
+export * from './usePlacement';
+export * from './useEventManager';

package/dist/types/hooks/useEventManager.d.ts

@@ -0,0 +1 @@
+export declare const useEventManager: () => void;

package/dist/types/hooks/useFieldValidation.d.ts

@@ -0,0 +1,53 @@
+import { Ref, ComputedRef } from 'vue';
+import { NmorphAvailableFormValueType } from '../components/nmorph-form/types';
+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 interface INmorphRule {
+    pattern?: RegExp;
+    numberCompareType?: keyof typeof NmorphNumberCompareOperator;
+    booleanCompareType?: keyof typeof NmorphBooleanCompareOperator;
+    arrayCompareType?: keyof typeof NmorphArrayValidationOperator;
+    compareValue?: number | string | string[];
+    error: string;
+}
+export type NmorphValidationInputValueType = NmorphAvailableFormValueType | null;
+export type NmorphRulesType = INmorphRule[];
+export interface INmorphUseValidationPayload {
+    inputValue: NmorphValidationInputValueType;
+    rules: NmorphRulesType | [];
+}
+export interface INmorphTextValidationRule extends INmorphRule {
+    pattern: RegExp;
+}
+export interface INmorphNumberValidationRule extends INmorphRule {
+    numberCompareType: keyof typeof NmorphNumberCompareOperator;
+    compareValue: number;
+}
+export interface INmorphRadioGroupValidationRule extends INmorphRule {
+    booleanCompareType: NmorphBooleanCompareOperator;
+    compareValue: string;
+}
+export interface INmorphCheckboxGroupValidationRule extends INmorphRule {
+    arrayCompareType: keyof typeof NmorphArrayValidationOperator;
+    compareValue: string[];
+}
+export declare const useFieldValidation: (data: INmorphUseValidationPayload) => {
+    touched: Ref<boolean>;
+    valid: ComputedRef<boolean>;
+    errors: Ref<string[]>;
+    validate: () => null | undefined;
+};

package/dist/types/hooks/useFormValidation.d.ts

@@ -0,0 +1,10 @@
+import { Ref, ComputedRef } from 'vue';
+import { NmorphFormValueType } from '../components/nmorph-form/types';
+export declare const useFormValidation: (formData: NmorphFormValueType, validateFormOnLoad?: boolean) => {
+    fields: Record<string, {
+        touched: Ref<boolean>;
+        valid: ComputedRef<boolean>;
+        errors: Ref<string[]>;
+        validate: () => null | undefined;
+    }>;
+};

package/dist/types/hooks/usePlacement.d.ts

@@ -0,0 +1,17 @@
+import { NmorphDomElementType, NmorphPlacementType } from '../types/common';
+import { Ref } from 'vue';
+interface INmorphUsePlacementPayload {
+    initialPlacement: NmorphPlacementType;
+    contentDOMElement: Ref<NmorphDomElementType>;
+    relativeElement: NmorphDomElementType | Ref<NmorphDomElementType>;
+    yOffset?: number;
+    xOffset?: number;
+}
+export declare const usePlacement: (data: INmorphUsePlacementPayload) => {
+    placement: Ref<"left" | "right" | "top" | "bottom">;
+    placementCoords: Ref<{
+        x: string;
+        y: string;
+    }>;
+};
+export {};

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

@@ -0,0 +1,77 @@
+export declare enum NmorphComponentHeight {
+    thick = "thick-component",
+    default = "default-height-component",
+    thin = "thin-component"
+}
+export type NmorphSortOrderType = keyof typeof NmorphSortOrder | undefined;
+export declare enum NmorphSortOrder {
+    ascending = "ascending",
+    descending = "descending"
+}
+export declare enum NmorphComponentDirection {
+    row = "row",
+    column = "column"
+}
+export interface INmorphCommonInputProps {
+    height?: keyof typeof NmorphComponentHeight;
+    fill?: boolean;
+    disabled?: boolean;
+}
+export declare enum NmorphShadowType {
+    inset = "inset",
+    outset = "outset",
+    combined = "combined"
+}
+export declare enum NmorphColor {
+    accent = "accent",
+    success = "success",
+    error = "error",
+    warning = "warning"
+}
+export declare enum NmorphIconList {
+    'eye' = "eye",
+    'eye-blocked' = "eye-blocked",
+    'success' = "success",
+    'error' = "error",
+    'plus' = "plus",
+    'minus' = "minus",
+    'loader' = "loader",
+    'chevron-down' = "chevron-down",
+    'audio' = "audio",
+    'archive' = "archive",
+    'video' = "video",
+    'image' = "image",
+    'doc' = "doc",
+    'enlarge' = "enlarge",
+    'shrink' = "shrink",
+    'rotate-right' = "rotate-right",
+    'rotate-left' = "rotate-left",
+    'zoom-in' = "zoom-in",
+    'zoom-out' = "zoom-out",
+    'time' = "time",
+    'triangle-down' = "triangle-down",
+    'calendar' = "calendar",
+    'chevron-double-down' = "chevron-double-down",
+    'cross' = "cross",
+    'info' = "info",
+    'warning' = "warning"
+}
+export declare enum NmorphComponentPosition {
+    left = "left",
+    right = "right",
+    top = "top",
+    bottom = "bottom"
+}
+export type NmorphPlacementType = keyof typeof NmorphComponentPosition;
+export type NmorphDomElementType = HTMLElement | null;
+export interface INmorphCoords<T> {
+    x: T;
+    y: T;
+}
+export declare enum NmorphImageFit {
+    fill = "fill",
+    contain = "contain",
+    cover = "cover",
+    none = "none",
+    'scale-down' = "scale-down"
+}

package/dist/types/utils/create-modifiers.d.ts

@@ -1 +1,4 @@
-export declare const createModifiers: (block: string, modifiers: string[]) => string;
+export declare const createBlockModifiers: (block: string, modifiers: string[]) => string;
+export declare const useModifiers: (data: {
+    [key: string]: string[];
+}) => string;

package/dist/types/utils/deep-clone.d.ts

@@ -0,0 +1 @@
+export declare const deepClone: <T>(obj: T) => T;

package/dist/types/utils/generateUUID.d.ts

@@ -0,0 +1 @@
+export declare const generateUUID: () => string;

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

@@ -1 +1,4 @@
 export * from './create-modifiers';
+export * from './deep-clone';
+export * from './is-string-html';
+export * from './generateUUID';

package/dist/types/utils/is-string-html.d.ts

@@ -0,0 +1 @@
+export declare const isStringHtml: (string: string | undefined) => boolean;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@nmorph/nmorph-ui-kit",
   "type": "module",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.4",
   "license": "MIT",
   "engines": {
     "node": "18.13.0",
@@ -38,7 +38,7 @@
     "./dist/styles/main.scss": "./dist/styles/main.scss"
   },
   "scripts": {
-    "build": "vue-tsc && vite build",
+    "build": "npm run build:types && vite build",
     "lint:es:check": "eslint --ext .js,.ts,.vue --ignore-path .gitignore src/",
     "lint:es": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src/",
     "lint:style:check": "stylelint ./src/**/*.{scss,vue}",
@@ -52,35 +52,23 @@
     "story:dev": "histoire dev",
     "story:build": "histoire build",
     "story:preview": "histoire preview",
-    "test:dev": "npx vitest"
+    "test:dev": "npx vitest",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "@faker-js/faker": "^8.3.1",
     "@types/vue-router": "^2.0.0",
-    "element-plus": "^2.5.0",
-    "libphonenumber-js": "^1.10.53",
-    "lodash": "^4.17.21",
-    "maska": "^2.1.11",
-    "maz-ui": "^3.31.5",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.1.7",
-    "uuid": "^9.0.1",
     "vue": "^3.4.7",
     "vue-i18n": "^9.9.0",
-    "vue-template-es2015-compiler": "^1.9.1",
-    "vuescroll": "^5.1.1"
+    "vue-template-es2015-compiler": "^1.9.1"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.6",
-    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.10.8",
-    "@types/uuid": "^9.0.7",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vue/test-utils": "^2.4.3",
-    "ajv": "^8.12.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -89,7 +77,6 @@
     "happy-dom": "^13.1.0",
     "histoire": "^0.17.6",
     "husky": "^8.0.3",
-    "js-cookie": "^3.0.5",
     "mitt": "^3.0.1",
     "prettier": "^3.1.1",
     "sass": "^1.69.7",
@@ -110,12 +97,6 @@
     "vite-svg-loader": "^5.1.0",
     "vitest": "^1.2.0",
     "vue-eslint-parser": "^9.4.0",
-    "vue-final-modal": "^4.5.3",
     "vue-tsc": "^1.8.27"
-  },
-  "peerDependencies": {
-    "ajv": "^8.12.0",
-    "js-cookie": "^3.0.5",
-    "vue-final-modal": "^4.4.5"
   }
 }

package/dist/styles/base/_transition.scss

@@ -1,6 +0,0 @@
-:root {
-  --transition-04: 0.4s;
-  --transition-03: 0.3s;
-  --transition-02: 0.2s;
-  --transition-01: 0.1s;
-}

package/dist/types/components/inputs/nmorph-select-option/types/index.d.ts

@@ -1 +0,0 @@
-export type SelectModelValue = string | string[];

package/dist/types/hooks/useValidation.d.ts

@@ -1,55 +0,0 @@
-import { ComputedRef, Ref } from 'vue';
-export declare const enum CheckboxValidationType {
-    'contains-one' = "contains-one",
-    'not-contains' = "not-contains",
-    'full-equal' = "full-equal"
-}
-export declare enum NumberCompareOperator {
-    'eq' = "eq",
-    'gte' = "gte",
-    'lte' = "lte",
-    'gt' = "gt",
-    'lt' = "lt"
-}
-export interface IRule {
-    error: string;
-}
-export interface ICheckboxGroupValidationRule extends IRule {
-    checkboxCompareType: keyof typeof CheckboxValidationType;
-    value: string[];
-}
-export interface ITextValidationRule extends IRule {
-    pattern: RegExp;
-}
-export interface INumberValidationRule extends IRule {
-    operator: keyof typeof NumberCompareOperator;
-    value: number;
-}
-export interface IRadioGroupValidationRule extends IRule {
-    radioCompareType: 'equal' | 'not-equal';
-    value: string;
-}
-interface IUseTextValidationPayload {
-    inputValue: Ref<string>;
-    rules: ITextValidationRule[];
-}
-interface IUseNumberValidationPayload {
-    inputValue: Ref<number>;
-    rules: INumberValidationRule[];
-}
-interface IUseCheckboxGroupValidationPayload {
-    inputValue: Ref<string[]>;
-    rules: ICheckboxGroupValidationRule[];
-}
-interface IUseRadioGroupValidationPayload {
-    inputValue: Ref<string>;
-    rules: IRadioGroupValidationRule[];
-}
-type IUseValidationPayload = IUseTextValidationPayload | IUseNumberValidationPayload | IUseCheckboxGroupValidationPayload | IUseRadioGroupValidationPayload;
-export declare const useValidation: ({ inputValue, rules }: IUseValidationPayload) => {
-    touched: Ref<boolean>;
-    showValidation: ComputedRef<boolean>;
-    valid: ComputedRef<boolean>;
-    errors: Ref<string[]>;
-};
-export {};

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

@@ -1,46 +0,0 @@
-export declare enum ControlComponentHeight {
-    thick = "thick",
-    default = "default",
-    thin = "thin"
-}
-export declare enum ComponentDirection {
-    row = "row",
-    column = "column"
-}
-export interface CommonInputProps {
-    height?: keyof typeof ControlComponentHeight;
-    fill?: boolean;
-    disabled?: boolean;
-}
-export declare enum ShadowType {
-    inset = "inset",
-    outset = "outset",
-    combined = "combined"
-}
-export declare enum Color {
-    accent = "accent",
-    success = "success",
-    error = "error",
-    warning = "warning"
-}
-export declare enum NmorphIconList {
-    'eye' = "eye",
-    'eye-blocked' = "eye-blocked",
-    'success' = "success",
-    'error' = "error",
-    'plus' = "plus",
-    'minus' = "minus",
-    'loader' = "loader",
-    'chevron-down' = "chevron-down",
-    'audio' = "audio",
-    'archive' = "archive",
-    'video' = "video",
-    'image' = "image",
-    'doc' = "doc",
-    'enlarge' = "enlarge",
-    'shrink' = "shrink",
-    'rotate-right' = "rotate-right",
-    'rotate-left' = "rotate-left",
-    'zoom-in' = "zoom-in",
-    'zoom-out' = "zoom-out"
-}