@7pmlabs/design-system 0.2.8 → 0.3.1

package/dist/types/composables/Date.d.ts

@@ -1,7 +1,7 @@
-export declare function useDate(): {
-    formatTime: (date: Date) => string | Date;
-    formatDate: (date: Date) => string | Date;
-    formatDateHuge: (date: Date) => string | Date;
-    formatMonthYear: (date: Date, type?: 'full' | 'short' | 'number') => string | Date;
-    dayShortNames: import("vue").ComputedRef<Record<number, string>>;
-};
+export declare function useDate(): {
+    formatTime: (date: Date) => string | Date;
+    formatDate: (date: Date) => string | Date;
+    formatDateHuge: (date: Date) => string | Date;
+    formatMonthYear: (date: Date, type?: 'full' | 'short' | 'number') => string | Date;
+    dayShortNames: import("vue").ComputedRef<Record<number, string>>;
+};

package/dist/types/composables/Validation.d.ts

@@ -1,42 +1,41 @@
-import { type Ref } from 'vue';
-/**
- * Types
- */
-export declare type ValidationRuleFunction = (val: any) => boolean;
-export declare type ValidationErrorMessageFunction = () => string;
-export interface ValidationRule {
-    validateRule: ValidationRuleFunction;
-    errorMessage: ValidationErrorMessageFunction;
-}
-export interface ValidationResult {
-    validate: () => void;
-    fieldValue: Ref<any>;
-    valid: boolean;
-    errorMessage: ValidationErrorMessageFunction;
-}
-export declare const FormValidationProviderName = "formValidation";
-/**
- * ValidationForm
- * @returns
- */
-export declare function useValidationForm(): {
-    validationForm: Record<string, Ref<ValidationResult>>;
-    validateAll: () => boolean;
-    resetAll: () => void;
-};
-/**
- * Validation Field
- * @param key
- * @param fieldValue
- * @param validationRules
- * @returns
- */
-export declare function useValidationField(key: string, fieldValue: Ref<any>, validationRules: ValidationRule[] | undefined): {
-    validate: () => void;
-    validationResult: Ref<{
-        validate: () => void;
-        fieldValue: any;
-        valid: boolean;
-        errorMessage: ValidationErrorMessageFunction;
-    }>;
-};
+import { type Ref } from 'vue';
+/**
+ * Types
+ */
+export declare type ValidationRuleFunction = (val: any) => boolean;
+export declare type ValidationErrorMessageFunction = () => string;
+export interface ValidationRule {
+    validateRule: ValidationRuleFunction;
+    errorMessage: ValidationErrorMessageFunction;
+}
+export interface ValidationResult {
+    validate: () => void;
+    fieldValue: Ref<any>;
+    valid: boolean;
+    errorMessage: ValidationErrorMessageFunction;
+}
+/**
+ * ValidationForm
+ * @returns
+ */
+export declare function useValidationForm(): {
+    validationForm: Record<string, Ref<ValidationResult>>;
+    validateAll: () => boolean;
+    resetAll: () => void;
+};
+/**
+ * Validation Field
+ * @param key
+ * @param fieldValue
+ * @param validationRules
+ * @returns
+ */
+export declare function useValidationField(key: string, fieldValue: Ref<any>, validationRules: ValidationRule[] | undefined): {
+    validate: () => void;
+    validationResult: Ref<{
+        validate: () => void;
+        fieldValue: any;
+        valid: boolean;
+        errorMessage: ValidationErrorMessageFunction;
+    }>;
+};

package/dist/types/constants/Common.d.ts

@@ -1,2 +1,9 @@
-export declare const DateDelimiter = "/";
-export declare const RequiredSymbol = "*";
+import type { InjectionKey, Ref } from 'vue';
+import type { ValidationResult } from '@/composables/Validation';
+export declare const DateDelimiter = "/";
+export declare const RequiredSymbol = "*";
+export declare const PIKey: {
+    FormValidation: InjectionKey<Record<string, Ref<ValidationResult>>>;
+    CloseDropdown: InjectionKey<() => void>;
+};
+export declare const FileImageTypes: string[];

package/dist/types/constants/Enums.d.ts

@@ -1,106 +1,106 @@
-/**
- * BButton
- */
-export declare enum BButtonType {
-    Primary = "primary",
-    Secondary = "secondary",
-    Additional = "additional",
-    Clear = "clear",
-    Icon = "icon"
-}
-export declare enum BButtonSize {
-    Small = "sm",
-    Medium = "md"
-}
-/**
- * BToast
- */
-export declare enum BToastItemType {
-    Success = "success",
-    Error = "error",
-    Default = "default"
-}
-/**
- * BSelect
- */
-export declare enum BSelectSize {
-    ExtraSmall = "xs",
-    Small = "sm",
-    Medium = "md",
-    Large = "lg"
-}
-/**
- * BModal
- */
-export declare enum BModalSize {
-    Small = "sm",
-    Medium = "md",
-    Large = "lg"
-}
-/**
- * BCheckbox
- */
-export declare enum BCheckboxSize {
-    Small = "sm",
-    Medium = "md"
-}
-/**
- * BRadio
- */
-export declare enum BRadioSize {
-    Small = "sm",
-    Medium = "md"
-}
-/**
- * BTooltip
- */
-export declare enum BTooltipPosition {
-    Top = "top",
-    Bottom = "bottom"
-}
-export declare enum BTooltipOpenEvent {
-    Click = "click",
-    Focus = "focus",
-    Hover = "hover"
-}
-/**
- * BTextEditor
- */
-export declare enum BTextEditorExtension {
-    Bold = "bold",
-    Italic = "italic",
-    Strike = "strike",
-    Highlight = "highlight",
-    Youtube = "youtube",
-    Image = "image",
-    Audio = "audio",
-    FileDownload = "fileDownload",
-    QuestionBlank = "questionBlank",
-    Blockquote = "blockquote",
-    Color = "color",
-    BulletList = "bulletList",
-    CharacterCount = "characterCount"
-}
-/**
- * BLoadingOverlay
- */
-export declare enum BLoadingOverlaySpinnerSize {
-    Small = "sm",
-    Medium = "md",
-    Large = "lg"
-}
-/**
- * BPagination
- */
-export declare enum BPaginationSize {
-    Small = "sm",
-    Medium = "md"
-}
-/**
- * BDatePicker
- */
-export declare enum BDatePickerView {
-    Days = "days",
-    Months = "months",
-    Years = "years"
-}
+/**
+ * BButton
+ */
+export declare enum BButtonType {
+    Primary = "primary",
+    Secondary = "secondary",
+    Additional = "additional",
+    Clear = "clear",
+    Icon = "icon"
+}
+export declare enum BButtonSize {
+    Small = "sm",
+    Medium = "md"
+}
+/**
+ * BToast
+ */
+export declare enum BToastItemType {
+    Success = "success",
+    Error = "error",
+    Default = "default"
+}
+/**
+ * BSelect
+ */
+export declare enum BSelectSize {
+    ExtraSmall = "xs",
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}
+/**
+ * BModal
+ */
+export declare enum BModalSize {
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}
+/**
+ * BCheckbox
+ */
+export declare enum BCheckboxSize {
+    Small = "sm",
+    Medium = "md"
+}
+/**
+ * BRadio
+ */
+export declare enum BRadioSize {
+    Small = "sm",
+    Medium = "md"
+}
+/**
+ * BTooltip
+ */
+export declare enum BTooltipPosition {
+    Top = "top",
+    Bottom = "bottom"
+}
+export declare enum BTooltipOpenEvent {
+    Click = "click",
+    Focus = "focus",
+    Hover = "hover"
+}
+/**
+ * BTextEditor
+ */
+export declare enum BTextEditorExtension {
+    Bold = "bold",
+    Italic = "italic",
+    Strike = "strike",
+    Highlight = "highlight",
+    Youtube = "youtube",
+    Image = "image",
+    Audio = "audio",
+    FileDownload = "fileDownload",
+    QuestionBlank = "questionBlank",
+    Blockquote = "blockquote",
+    Color = "color",
+    BulletList = "bulletList",
+    CharacterCount = "characterCount"
+}
+/**
+ * BLoadingOverlay
+ */
+export declare enum BLoadingOverlaySpinnerSize {
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}
+/**
+ * BPagination
+ */
+export declare enum BPaginationSize {
+    Small = "sm",
+    Medium = "md"
+}
+/**
+ * BDatePicker
+ */
+export declare enum BDatePickerView {
+    Days = "days",
+    Months = "months",
+    Years = "years"
+}

package/dist/types/helpers/ComponentHelper.d.ts

@@ -1,7 +1,7 @@
-export declare const ensureVisiblePosition: (parentEl: HTMLElement, menuEl: HTMLElement, menuFixed?: boolean) => void;
-export declare const ensureVisibleX: (parentEl: HTMLElement, menuEl: HTMLElement, menuFixed?: boolean) => void;
-export declare const ensureVisibleY: (parentEl: HTMLElement, menuEl: HTMLElement, menuFixed?: boolean) => void;
-export declare const resetPosition: (parentEl: HTMLElement, menuEl: HTMLElement) => void;
-export declare const scrollToTop: () => void;
-export declare const lockScrollBody: () => void;
-export declare const unlockScrollBody: () => void;
+export declare const ensureVisiblePosition: (parentEl: HTMLElement, menuEl: HTMLElement, menuFixed?: boolean) => void;
+export declare const ensureVisibleX: (parentEl: HTMLElement, menuEl: HTMLElement, menuFixed?: boolean) => void;
+export declare const ensureVisibleY: (parentEl: HTMLElement, menuEl: HTMLElement, menuFixed?: boolean) => void;
+export declare const resetPosition: (parentEl: HTMLElement, menuEl: HTMLElement) => void;
+export declare const scrollToTop: () => void;
+export declare const lockScrollBody: () => void;
+export declare const unlockScrollBody: () => void;

package/dist/types/helpers/DateHelper.d.ts

@@ -1,2 +1,2 @@
-export declare const checkIfISOFormat: (str?: string | Date) => boolean;
-export declare const padStartZero: (val: number, maxLength: number) => string;
+export declare const checkIfISOFormat: (str?: string | Date) => boolean;
+export declare const padStartZero: (val: number, maxLength: number) => string;

package/dist/types/index.d.ts

@@ -1,11 +1,11 @@
-export * from './components';
-export * from './composables/Date';
-export * from './composables/Validation';
-export * from './constants/Common';
-export * from './constants/Enums';
-export * from './helpers/ComponentHelper';
-export { default as default } from './plugin';
-export * from './types';
-import './assets/styles/main.scss';
-export { default as enUS } from './locales/en-US.json';
-export { default as viVN } from './locales/vi-VN.json';
+export * from './components';
+export * from './composables/Date';
+export * from './composables/Validation';
+export * from './constants/Common';
+export * from './constants/Enums';
+export * from './helpers/ComponentHelper';
+export { default as default } from './plugin';
+export * from './types';
+import './assets/styles/main.scss';
+export { default as enUS } from './locales/en-US.json';
+export { default as viVN } from './locales/vi-VN.json';

package/dist/types/playground/PlaygroundView.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/types/plugin.d.ts

@@ -1,8 +1,8 @@
-import type { App } from 'vue';
-import type { I18n } from 'vue-i18n';
-declare const _default: {
-    install: (app: App<Element>, options: {
-        i18n: I18n;
-    }) => void;
-};
-export default _default;
+import type { App } from 'vue';
+import type { I18n } from 'vue-i18n';
+declare const _default: {
+    install: (app: App<Element>, options: {
+        i18n: I18n;
+    }) => void;
+};
+export default _default;

package/dist/types/types/Common.d.ts

@@ -1,5 +1,5 @@
-export interface DisplayItem {
-    text: any;
-    value: any;
-    cssClass?: string;
-}
+export interface DisplayItem {
+    text: any;
+    value: any;
+    cssClass?: string;
+}

package/dist/types/types/components/BErrorMessage.d.ts

@@ -1,4 +1 @@
-export interface BErrorMessageProps {
-    errorMessage?: string | ErrorMessageFunction;
-}
-export declare type ErrorMessageFunction = () => string;
+export declare type ErrorMessageFunction = () => string;

package/dist/types/types/components/BImagePicker.d.ts

@@ -0,0 +1,6 @@
+export interface FileItemRead {
+    _id?: string;
+    url: string;
+    file?: any;
+    type: string;
+}

package/dist/types/types/components/BTabs.d.ts

@@ -1,9 +1,4 @@
-export interface BTabsProps {
-    headers: BTabsHeader[];
-    modelValue?: number;
-    headerCssClass?: string;
-}
-export interface BTabsHeader {
-    text: string;
-    disabled?: boolean;
-}
+export interface BTabsHeader {
+    text: string;
+    disabled?: boolean;
+}

package/dist/types/types/components/BToast.d.ts

@@ -1,8 +1,8 @@
-import type { BToastItemType } from '@/constants/Enums';
-export interface BToastItemModel {
-    id?: string;
-    text: string;
-    icon?: string;
-    duration?: number;
-    type?: `${BToastItemType}`;
-}
+import type { BToastItemType } from '@/constants/Enums';
+export interface BToastItemModel {
+    id?: string;
+    text: string;
+    icon?: string;
+    duration?: number;
+    type?: `${BToastItemType}`;
+}

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

@@ -1,20 +1,5 @@
-export * from './Common';
-export * from './components/BCarousel';
-export * from './components/BDatePicker';
-export * from './components/BDateRangePicker';
-export * from './components/BDropdown';
-export * from './components/BErrorMessage';
-export * from './components/BLabel';
-export * from './components/BLoadingBar';
-export * from './components/BLoadingOverlay';
-export * from './components/BModal';
-export * from './components/BMultiSelect';
-export * from './components/BOtpField';
-export * from './components/BPagination';
-export * from './components/BRadio';
-export * from './components/BSelect';
-export * from './components/BTabs';
-export * from './components/BTextarea';
-export * from './components/BTextField';
-export * from './components/BToast';
-export * from './components/BTooltip';
+export * from './Common';
+export * from './components/BErrorMessage';
+export * from './components/BToast';
+export * from './components/BImagePicker';
+export * from './components/BTabs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7pmlabs/design-system",
-  "version": "0.2.8",
+  "version": "0.3.1",
   "sideEffects": [
     "style.css"
   ],
@@ -53,13 +53,15 @@
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
     "@rushstack/eslint-patch": "^1.3.3",
-    "@storybook/addon-essentials": "^7.4.2",
-    "@storybook/addon-interactions": "^7.4.2",
-    "@storybook/addon-links": "^7.4.2",
-    "@storybook/blocks": "^7.4.2",
-    "@storybook/testing-library": "^0.2.1",
-    "@storybook/vue3": "^7.4.2",
-    "@storybook/vue3-vite": "^7.4.2",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/manager-api": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.3",
+    "@storybook/vue3": "^7.5.3",
+    "@storybook/vue3-vite": "^7.5.3",
     "@types/jsdom": "^20.0.0",
     "@types/lodash-es": "^4.17.7",
     "@types/node": "^16.18.4",
@@ -75,7 +77,7 @@
     "autoprefixer": "^10.4.13",
     "eslint": "^8.48.0",
     "eslint-plugin-cypress": "^2.14.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-vue": "^9.17.0",
     "jsdom": "^20.0.1",
     "npm-run-all": "^4.1.5",
@@ -85,7 +87,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.56.0",
-    "storybook": "^7.4.2",
+    "storybook": "^7.5.3",
     "tailwindcss": "^3.3.1",
     "typescript": "~4.7.4",
     "vite": "^4.3.5",

package/dist/types/types/components/BCarousel.d.ts

@@ -1,8 +0,0 @@
-export interface BCarouselProps {
-    modelValue?: number;
-    autoplay?: boolean;
-    duration?: number;
-    navigation?: boolean;
-    pagination?: boolean;
-    continuous?: boolean;
-}

package/dist/types/types/components/BDatePicker.d.ts

@@ -1,19 +0,0 @@
-import type { ValidationRule } from '@/composables/Validation';
-import { BDatePickerView } from '@/constants/Enums';
-export interface BDatePickerProps {
-    inputId?: string;
-    modelValue: any;
-    label?: string;
-    validationRules?: ValidationRule[];
-    placeholder?: string;
-    required?: boolean;
-    requiredErrorMessage?: string;
-    disabled?: boolean;
-    inputCssClass?: string;
-    minDate?: any;
-    maxDate?: any;
-    showHintToday?: boolean;
-    view?: BDatePickerView;
-    hideDetails?: boolean;
-    position?: string;
-}

package/dist/types/types/components/BDateRangePicker.d.ts

@@ -1,18 +0,0 @@
-import type { ValidationRule } from '@/composables/Validation';
-import { BDatePickerView } from '@/constants/Enums';
-export interface BDateRangePickerProps {
-    inputId?: string;
-    modelValue: Date[];
-    label?: string;
-    validationRules?: ValidationRule[];
-    placeholder?: string;
-    required?: boolean;
-    requiredErrorMessage?: string;
-    disabled?: boolean;
-    inputCssClass?: string;
-    minDate?: any;
-    maxDate?: any;
-    view?: BDatePickerView;
-    hideDetails?: boolean;
-    position?: string;
-}

package/dist/types/types/components/BDropdown.d.ts

@@ -1,11 +0,0 @@
-export interface BDropdownProps {
-    inputId?: string;
-    modelValue?: boolean;
-    label?: string;
-    text?: string;
-    toggleCssClass?: string;
-    menuCssClass?: string;
-    noCloseOnClickOutside?: boolean;
-    noCloseOnEsc?: boolean;
-    menuFixed?: boolean;
-}

package/dist/types/types/components/BLabel.d.ts

@@ -1,5 +0,0 @@
-export interface BLabelProps {
-    id?: string;
-    label?: string;
-    required?: boolean;
-}

package/dist/types/types/components/BLoadingBar.d.ts

@@ -1,6 +0,0 @@
-export interface BLoadingBarProps {
-    loading: boolean;
-    height?: string;
-    borderRadius?: string;
-    absolute?: boolean;
-}

package/dist/types/types/components/BLoadingOverlay.d.ts

@@ -1,6 +0,0 @@
-import { BLoadingOverlaySpinnerSize } from '@/constants/Enums';
-export interface BLoadingOverlayProps {
-    loading: boolean;
-    absolute?: boolean;
-    spinnerSize?: `${BLoadingOverlaySpinnerSize}`;
-}

package/dist/types/types/components/BModal.d.ts

@@ -1,7 +0,0 @@
-import type { BModalSize } from '@/constants/Enums';
-export interface BModalProps {
-    modelValue: boolean;
-    size?: BModalSize;
-    fullscreen?: boolean;
-    persistent?: boolean;
-}

package/dist/types/types/components/BMultiSelect.d.ts

@@ -1,18 +0,0 @@
-import type { ValidationRule } from '@/composables/Validation';
-import type { DisplayItem } from '@/types';
-export interface BMultiSelectProps {
-    inputId?: string;
-    modelValue: Array<string | number>;
-    label?: string;
-    items: DisplayItem[];
-    disabled?: boolean;
-    placeholder?: string;
-    valueCssClass?: string;
-    menuCssClass?: string;
-    validationRules?: ValidationRule[];
-    required?: boolean;
-    requiredErrorMessage?: string;
-    hideDetails?: boolean;
-    showSelectedItemCount?: boolean;
-    allowInput?: boolean;
-}