@7pmlabs/design-system 0.2.8 → 0.3.0

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/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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7pmlabs/design-system",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "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;
-}

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

@@ -1,13 +0,0 @@
-import type { ValidationRule } from '@/composables/Validation';
-export interface BOtpFieldProps {
-    inputId?: string;
-    modelValue?: string;
-    numInputs?: number;
-    focusIndex?: number;
-    disabled?: boolean;
-    inputCssClass?: string | {};
-    validationRules?: ValidationRule[];
-    required?: boolean;
-    requiredErrorMessage?: string;
-    hideDetails?: boolean;
-}

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

@@ -1,8 +0,0 @@
-import { BPaginationSize } from '@/constants/Enums';
-export interface BPaginationProps {
-    modelValue: number;
-    numberOfPages: number;
-    border?: boolean;
-    transparent?: boolean;
-    size?: `${BPaginationSize}`;
-}

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

@@ -1,13 +0,0 @@
-import { ValidationRule } from '@/composables/Validation';
-export interface BRadioProps {
-    inputId?: string;
-    modelValue?: string | number | boolean;
-    inputName?: string;
-    label?: string;
-    disabled?: boolean;
-    labelCssClass?: string;
-    hideDetails?: boolean;
-    validationRules?: ValidationRule[];
-    required?: boolean;
-    requiredErrorMessage?: string;
-}

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

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

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

@@ -1,22 +0,0 @@
-import type { ValidationRule } from '@/composables/Validation';
-export interface BTextFieldProps {
-    inputId?: string;
-    inputCssClass?: string;
-    validationRules?: ValidationRule[];
-    modelValue: string | number;
-    label?: string;
-    prependIcon?: string;
-    hidePrependIcon?: boolean;
-    appendIcon?: string;
-    hideAppendIcon?: boolean;
-    placeholder?: string;
-    autocomplete?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    type?: string;
-    required?: boolean;
-    requiredErrorMessage?: string;
-    hideDetails?: boolean;
-    keyPressFn?: any;
-    inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-}

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

@@ -1,16 +0,0 @@
-import type { ValidationRule } from '@/composables/Validation';
-export interface BTextareaProps {
-    inputId?: string;
-    inputCssClass?: string;
-    modelValue: string;
-    validationRules?: ValidationRule[];
-    label?: string;
-    placeholder?: string;
-    autocomplete?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    rows?: number;
-    required?: boolean;
-    requiredErrorMessage?: string;
-    hideDetails?: boolean;
-}

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

@@ -1,6 +0,0 @@
-import { BTooltipOpenEvent, BTooltipPosition } from '@/constants/Enums';
-export interface BTooltipProps {
-    modelValue?: boolean;
-    position?: `${BTooltipPosition}`;
-    openEvent?: `${BTooltipOpenEvent}`;
-}