@7pmlabs/design-system 0.2.7 → 0.3.0

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

@@ -1,3 +1,32 @@
+/**
+ * Props
+ */
+export interface BDropdownProps {
+    inputId?: string;
+    modelValue?: boolean;
+    label?: string;
+    /**
+     * Toggle's content text
+     */
+    text?: string;
+    /**
+     * CSS of toggle
+     */
+    toggleCssClass?: string;
+    /**
+     * CSS of menu
+     */
+    menuCssClass?: string;
+    /**
+     * Prevent menu from closing when clicking outside
+     */
+    noCloseOnClickOutside?: boolean;
+    /**
+     * Prevent menu from closing when "Esc" pressed
+     */
+    noCloseOnEsc?: boolean;
+    menuFixed?: boolean;
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     label: {
         type: import("vue").PropType<string>;

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

@@ -1,14 +1,24 @@
+import type { ErrorMessageFunction } from '@/types';
+/**
+ * Props
+ */
+export interface BErrorMessageProps {
+    /**
+     * A text or a function returning a text.
+     */
+    errorMessage?: string | ErrorMessageFunction;
+}
 declare const _default: import("vue").DefineComponent<{
     errorMessage: {
-        type: import("vue").PropType<string | import("@/types").ErrorMessageFunction>;
+        type: import("vue").PropType<string | ErrorMessageFunction>;
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     errorMessage: {
-        type: import("vue").PropType<string | import("@/types").ErrorMessageFunction>;
+        type: import("vue").PropType<string | ErrorMessageFunction>;
         default: string;
     };
 }>>, {
-    errorMessage: string | import("@/types").ErrorMessageFunction;
+    errorMessage: string | ErrorMessageFunction;
 }, {}>;
 export default _default;

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

@@ -0,0 +1,106 @@
+import type { FileItemRead } from '@/types';
+import type { ValidationRule } from '@/composables/Validation';
+/**
+ * Props
+ */
+export interface Props {
+    inputId?: string;
+    modelValue: FileItemRead[];
+    label?: string;
+    multiple?: boolean;
+    maxFileSize?: number;
+    hideDetails?: boolean;
+    required?: boolean;
+    requiredErrorMessage?: string;
+    validationRules?: ValidationRule[];
+}
+declare const _default: import("vue").DefineComponent<{
+    required: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    multiple: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    inputId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<FileItemRead[]>;
+        required: true;
+    };
+    validationRules: {
+        type: import("vue").PropType<ValidationRule[]>;
+        default: any;
+    };
+    requiredErrorMessage: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    hideDetails: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    maxFileSize: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}, {
+    validate: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    required: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    multiple: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    inputId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<FileItemRead[]>;
+        required: true;
+    };
+    validationRules: {
+        type: import("vue").PropType<ValidationRule[]>;
+        default: any;
+    };
+    requiredErrorMessage: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    hideDetails: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    maxFileSize: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    required: boolean;
+    label: string;
+    multiple: boolean;
+    inputId: string;
+    validationRules: ValidationRule[];
+    requiredErrorMessage: string;
+    hideDetails: boolean;
+    maxFileSize: number;
+}, {}>;
+export default _default;

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

@@ -0,0 +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;

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

@@ -0,0 +1,29 @@
+/**
+ * Props
+ */
+export interface Props {
+    modelValue: boolean;
+    url: string;
+}
+declare const _default: import("vue").DefineComponent<{
+    url: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    url: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    modelValue: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {}, {}>;
+export default _default;

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

@@ -1,3 +1,14 @@
+/**
+ * Props
+ */
+export interface BLabelProps {
+    id?: string;
+    label?: string;
+    /**
+     * Show "*" beside the label
+     */
+    required?: boolean;
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     required: {
         type: import("vue").PropType<boolean>;

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

@@ -1,3 +1,12 @@
+/**
+ * Props
+ */
+export interface BLoadingBarProps {
+    loading: boolean;
+    height?: string;
+    borderRadius?: string;
+    absolute?: boolean;
+}
 declare const _default: import("vue").DefineComponent<{
     absolute: {
         type: import("vue").PropType<boolean>;

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

@@ -1,4 +1,12 @@
 import { BLoadingOverlaySpinnerSize } from '@/constants/Enums';
+/**
+ * Props
+ */
+export interface BLoadingOverlayProps {
+    loading: boolean;
+    absolute?: boolean;
+    spinnerSize?: `${BLoadingOverlaySpinnerSize}`;
+}
 declare const _default: import("vue").DefineComponent<{
     absolute: {
         type: import("vue").PropType<boolean>;

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

@@ -1,4 +1,19 @@
 import { BModalSize } from '@/constants/Enums';
+/**
+ * Props
+ */
+export interface BModalProps {
+    modelValue: boolean;
+    size?: BModalSize;
+    /**
+     * Fullscreen modal.
+     */
+    fullscreen?: boolean;
+    /**
+     * Prevent modal from closing when clicking outside or pressing "Esc".
+     */
+    persistent?: boolean;
+}
 /**
  * [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes
  */

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

@@ -1,5 +1,39 @@
 import { type ValidationRule } from '@/composables/Validation';
 import type { DisplayItem } from '@/types';
+/**
+ * Props
+ */
+export interface BMultiSelectProps {
+    inputId?: string;
+    modelValue: Array<string | number>;
+    label?: string;
+    items: DisplayItem[];
+    disabled?: boolean;
+    placeholder?: string;
+    valueCssClass?: string;
+    menuCssClass?: string;
+    /**
+     * Array of custom validation rules.
+     */
+    validationRules?: ValidationRule[];
+    /**
+     * Validate if the field is left empty.
+     */
+    required?: boolean;
+    requiredErrorMessage?: string;
+    /**
+     * Hide the validation error message.
+     */
+    hideDetails?: boolean;
+    /**
+     * Show number of selected items.
+     */
+    showSelectedItemCount?: boolean;
+    /**
+     * Allow to type to search.
+     */
+    allowInput?: boolean;
+}
 declare const _default: import("vue").DefineComponent<{
     required: {
         type: import("vue").PropType<boolean>;

package/dist/types/components/BOtpField/BOtpField.vue.d.ts

@@ -1,4 +1,34 @@
 import { type ValidationRule } from '@/composables/Validation';
+/**
+ * Props
+ */
+export interface BOtpFieldProps {
+    inputId?: string;
+    modelValue?: string;
+    /**
+     * Number of input boxes.
+     */
+    numInputs?: number;
+    /**
+     * Index of input box to be focused.
+     */
+    focusIndex?: number;
+    disabled?: boolean;
+    inputCssClass?: string | {};
+    /**
+     * Array of custom validation rules.
+     */
+    validationRules?: ValidationRule[];
+    /**
+     * Validate if the field is left empty.
+     */
+    required?: boolean;
+    requiredErrorMessage?: string;
+    /**
+     * Hide the validation error message.
+     */
+    hideDetails?: boolean;
+}
 declare const _default: import("vue").DefineComponent<{
     required: {
         type: import("vue").PropType<boolean>;

package/dist/types/components/BPagination.vue.d.ts

@@ -1,4 +1,23 @@
 import { BPaginationSize } from '@/constants/Enums';
+/**
+ * Props
+ */
+export interface BPaginationProps {
+    /**
+     * Start by 1.
+     */
+    modelValue: number;
+    numberOfPages: number;
+    /**
+     * Bordered buttons.
+     */
+    border?: boolean;
+    /**
+     * Transparent background buttons.
+     */
+    transparent?: boolean;
+    size?: `${BPaginationSize}`;
+}
 declare const _default: import("vue").DefineComponent<{
     transparent: {
         type: import("vue").PropType<boolean>;

package/dist/types/components/BRadio.vue.d.ts

@@ -1,4 +1,28 @@
 import { type ValidationRule } from '@/composables/Validation';
+/**
+ * Props
+ */
+export interface BRadioProps {
+    inputId?: string;
+    modelValue?: string | number | boolean;
+    inputName?: string;
+    label?: string;
+    disabled?: boolean;
+    labelCssClass?: string;
+    /**
+     * Hide the validation error message.
+     */
+    hideDetails?: boolean;
+    /**
+     * Array of custom validation rules.
+     */
+    validationRules?: ValidationRule[];
+    /**
+     * Validate if the field is left empty.
+     */
+    required?: boolean;
+    requiredErrorMessage?: string;
+}
 declare const _default: import("vue").DefineComponent<{
     required: {
         type: import("vue").PropType<boolean>;

package/dist/types/components/BSelect.vue.d.ts

@@ -1,5 +1,35 @@
 import { type ValidationRule } from '@/composables/Validation';
 import type { DisplayItem } from '@/types';
+/**
+ * Props
+ */
+export interface BSelectProps {
+    inputId?: string;
+    modelValue: string | number;
+    label?: string;
+    items: DisplayItem[];
+    disabled?: boolean;
+    placeholder?: string;
+    valueCssClass?: string;
+    menuCssClass?: string;
+    /**
+     * Array of custom validation rules.
+     */
+    validationRules?: ValidationRule[];
+    /**
+     * Validate if the field is left empty.
+     */
+    required?: boolean;
+    requiredErrorMessage?: string;
+    /**
+     * Hide the validation error message.
+     */
+    hideDetails?: boolean;
+    /**
+     * Allow to type to search.
+     */
+    allowInput?: boolean;
+}
 declare const _default: import("vue").DefineComponent<{
     required: {
         type: import("vue").PropType<boolean>;

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

@@ -1,6 +1,24 @@
+import type { BTabsHeader } from '@/types';
+/**
+ * Props
+ */
+export interface BTabsProps {
+    /**
+     * Array of header objects.
+     */
+    headers: BTabsHeader[];
+    /**
+     * Index of tab.
+     */
+    modelValue?: number;
+    /**
+     * CSS of header.
+     */
+    headerCssClass?: string;
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     headers: {
-        type: import("vue").PropType<import("@/types/components/BTabs").BTabsHeader[]>;
+        type: import("vue").PropType<BTabsHeader[]>;
         required: true;
     };
     modelValue: {
@@ -13,7 +31,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     headers: {
-        type: import("vue").PropType<import("@/types/components/BTabs").BTabsHeader[]>;
+        type: import("vue").PropType<BTabsHeader[]>;
         required: true;
     };
     modelValue: {

package/dist/types/components/BTextField.vue.d.ts

@@ -1,4 +1,52 @@
 import { type ValidationRule } from '@/composables/Validation';
+/**
+ * Props
+ */
+export interface BTextFieldProps {
+    inputId?: string;
+    inputCssClass?: string;
+    /**
+     * Array of custom validation rules.
+     */
+    validationRules?: ValidationRule[];
+    modelValue: string | number;
+    label?: string;
+    /**
+     * FontAwesome v6.1.0 - Solid.
+     */
+    prependIcon?: string;
+    /**
+     * Hide prepended icon.
+     */
+    hidePrependIcon?: boolean;
+    /**
+     * FontAwesome v6.1.0 - Solid.
+     */
+    appendIcon?: string;
+    /**
+     * Hide appended icon.
+     */
+    hideAppendIcon?: boolean;
+    placeholder?: string;
+    autocomplete?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    type?: string;
+    /**
+     * Validate if the field is left empty.
+     */
+    required?: boolean;
+    requiredErrorMessage?: string;
+    /**
+     * Hide the validation error message.
+     */
+    hideDetails?: boolean;
+    /**
+     * Function is executed on keypress event.
+     */
+    keyPressFn?: any;
+    inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+}
 declare const _default: import("vue").DefineComponent<{
     required: {
         type: import("vue").PropType<boolean>;

package/dist/types/components/BTextarea.vue.d.ts

@@ -1,4 +1,34 @@
 import { type ValidationRule } from '@/composables/Validation';
+/**
+ * Props
+ */
+export interface BTextareaProps {
+    inputId?: string;
+    inputCssClass?: string;
+    modelValue: string;
+    /**
+     * Array of custom validation rules.
+     */
+    validationRules?: ValidationRule[];
+    label?: string;
+    placeholder?: string;
+    autocomplete?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    /**
+     * Number of rows.
+     */
+    rows?: number;
+    /**
+     * Validate if the field is left empty.
+     */
+    required?: boolean;
+    requiredErrorMessage?: string;
+    /**
+     * Hide the validation error message.
+     */
+    hideDetails?: boolean;
+}
 declare const _default: import("vue").DefineComponent<{
     required: {
         type: import("vue").PropType<boolean>;

package/dist/types/components/BTooltip.vue.d.ts

@@ -1,4 +1,18 @@
 import { BTooltipOpenEvent, BTooltipPosition } from '@/constants/Enums';
+/**
+ * Props
+ */
+export interface BTooltipProps {
+    modelValue?: boolean;
+    /**
+     * Position of opened tooltip compare to its toggle.
+     */
+    position?: `${BTooltipPosition}`;
+    /**
+     * Event to open tooltip.
+     */
+    openEvent?: `${BTooltipOpenEvent}`;
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     position: {
         type: import("vue").PropType<"top" | "bottom">;

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

@@ -31,3 +31,5 @@ export { default as BToastItem } from './BToast/BToastItem.vue';
 export { default as BTooltip } from './BTooltip.vue';
 export { default as BTimeline } from './BTimeline/BTimeline.vue';
 export { default as BTimelineItem } from './BTimeline/BTimelineItem.vue';
+export { default as BImagePicker } from './BImagePicker/BImagePicker.vue';
+export { default as BImagePreview } from './BImagePicker/BImagePreview.vue';

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

@@ -14,7 +14,6 @@ export interface ValidationResult {
     valid: boolean;
     errorMessage: ValidationErrorMessageFunction;
 }
-export declare const FormValidationProviderName = "formValidation";
 /**
  * ValidationForm
  * @returns

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

@@ -1,2 +1,9 @@
+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/index.d.ts

@@ -7,3 +7,5 @@ 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/types/components/BErrorMessage.d.ts

@@ -1,4 +1 @@
-export interface BErrorMessageProps {
-    errorMessage?: string | ErrorMessageFunction;
-}
 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,8 +1,3 @@
-export interface BTabsProps {
-    headers: BTabsHeader[];
-    modelValue?: number;
-    headerCssClass?: string;
-}
 export interface BTabsHeader {
     text: string;
     disabled?: boolean;

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 './components/BImagePicker';
+export * from './components/BTabs';