@velkymx/vibeui 0.2.0 → 0.4.0

package/dist/components/index.d.ts

@@ -0,0 +1,63 @@
+import { default as VibeAlert } from './VibeAlert.vue';
+import { default as VibeBadge } from './VibeBadge.vue';
+import { default as VibeButton } from './VibeButton.vue';
+import { default as VibeButtonGroup } from './VibeButtonGroup.vue';
+import { default as VibeCloseButton } from './VibeCloseButton.vue';
+import { default as VibeSpinner } from './VibeSpinner.vue';
+import { default as VibePlaceholder } from './VibePlaceholder.vue';
+import { default as VibeContainer } from './VibeContainer.vue';
+import { default as VibeRow } from './VibeRow.vue';
+import { default as VibeCol } from './VibeCol.vue';
+import { default as VibeCard } from './VibeCard.vue';
+import { default as VibeCardHeader } from './VibeCardHeader.vue';
+import { default as VibeCardBody } from './VibeCardBody.vue';
+import { default as VibeCardFooter } from './VibeCardFooter.vue';
+import { default as VibeCardImg } from './VibeCardImg.vue';
+import { default as VibeCardTitle } from './VibeCardTitle.vue';
+import { default as VibeCardText } from './VibeCardText.vue';
+import { default as VibeBreadcrumb } from './VibeBreadcrumb.vue';
+import { default as VibeBreadcrumbItem } from './VibeBreadcrumbItem.vue';
+import { default as VibeNav } from './VibeNav.vue';
+import { default as VibeNavItem } from './VibeNavItem.vue';
+import { default as VibeNavbar } from './VibeNavbar.vue';
+import { default as VibeNavbarBrand } from './VibeNavbarBrand.vue';
+import { default as VibeNavbarToggle } from './VibeNavbarToggle.vue';
+import { default as VibeNavbarNav } from './VibeNavbarNav.vue';
+import { default as VibePagination } from './VibePagination.vue';
+import { default as VibePaginationItem } from './VibePaginationItem.vue';
+import { default as VibeTabContent } from './VibeTabContent.vue';
+import { default as VibeTabPane } from './VibeTabPane.vue';
+import { default as VibeListGroup } from './VibeListGroup.vue';
+import { default as VibeListGroupItem } from './VibeListGroupItem.vue';
+import { default as VibeProgress } from './VibeProgress.vue';
+import { default as VibeProgressBar } from './VibeProgressBar.vue';
+import { default as VibeAccordion } from './VibeAccordion.vue';
+import { default as VibeAccordionItem } from './VibeAccordionItem.vue';
+import { default as VibeCollapse } from './VibeCollapse.vue';
+import { default as VibeDropdown } from './VibeDropdown.vue';
+import { default as VibeDropdownItem } from './VibeDropdownItem.vue';
+import { default as VibeModal } from './VibeModal.vue';
+import { default as VibeOffcanvas } from './VibeOffcanvas.vue';
+import { default as VibeToast } from './VibeToast.vue';
+import { default as VibeCarousel } from './VibeCarousel.vue';
+import { default as VibeCarouselSlide } from './VibeCarouselSlide.vue';
+import { default as VibeTooltip } from './VibeTooltip.vue';
+import { default as VibePopover } from './VibePopover.vue';
+import { default as VibeScrollspy } from './VibeScrollspy.vue';
+import { default as VibeIcon } from './VibeIcon.vue';
+import { default as VibeDataTable } from './VibeDataTable.vue';
+import { default as VibeFormInput } from './VibeFormInput.vue';
+import { default as VibeFormSelect } from './VibeFormSelect.vue';
+import { default as VibeFormTextarea } from './VibeFormTextarea.vue';
+import { default as VibeFormSpinbutton } from './VibeFormSpinbutton.vue';
+import { default as VibeFormDatepicker } from './VibeFormDatepicker.vue';
+import { default as VibeFormCheckbox } from './VibeFormCheckbox.vue';
+import { default as VibeFormRadio } from './VibeFormRadio.vue';
+import { default as VibeFormSwitch } from './VibeFormSwitch.vue';
+import { default as VibeFormGroup } from './VibeFormGroup.vue';
+import { default as VibeFormWysiwyg } from './VibeFormWysiwyg.vue';
+export { VibeAlert, VibeBadge, VibeButton, VibeButtonGroup, VibeCloseButton, VibeSpinner, VibePlaceholder, VibeContainer, VibeRow, VibeCol, VibeCard, VibeCardHeader, VibeCardBody, VibeCardFooter, VibeCardImg, VibeCardTitle, VibeCardText, VibeBreadcrumb, VibeBreadcrumbItem, VibeNav, VibeNavItem, VibeNavbar, VibeNavbarBrand, VibeNavbarToggle, VibeNavbarNav, VibePagination, VibePaginationItem, VibeTabContent, VibeTabPane, VibeListGroup, VibeListGroupItem, VibeProgress, VibeProgressBar, VibeAccordion, VibeAccordionItem, VibeCollapse, VibeDropdown, VibeDropdownItem, VibeModal, VibeOffcanvas, VibeToast, VibeCarousel, VibeCarouselSlide, VibeTooltip, VibePopover, VibeScrollspy, VibeIcon, VibeDataTable, VibeFormInput, VibeFormSelect, VibeFormTextarea, VibeFormSpinbutton, VibeFormDatepicker, VibeFormCheckbox, VibeFormRadio, VibeFormSwitch, VibeFormGroup, VibeFormWysiwyg };
+declare const _default: {
+    install(app: any): void;
+};
+export default _default;

package/dist/composables/useFormValidation.d.ts

@@ -0,0 +1,26 @@
+import { ValidationState, ValidationRule, ValidatorFunction, FormValidationResult } from '../types';
+export declare function useFormValidation(initialValue?: any): {
+    value: import('vue').Ref<any, any>;
+    validationState: import('vue').Ref<ValidationState, ValidationState>;
+    validationMessage: import('vue').Ref<string, string>;
+    isDirty: import('vue').Ref<boolean, boolean>;
+    isTouched: import('vue').Ref<boolean, boolean>;
+    isValidating: import('vue').Ref<boolean, boolean>;
+    isValid: import('vue').ComputedRef<boolean>;
+    isInvalid: import('vue').ComputedRef<boolean>;
+    validate: (rules: ValidationRule[] | ValidatorFunction | undefined) => Promise<FormValidationResult>;
+    reset: () => void;
+    markAsTouched: () => void;
+    markAsDirty: () => void;
+};
+export declare const validators: {
+    required: (message?: string) => ValidationRule;
+    email: (message?: string) => ValidationRule;
+    minLength: (min: number, message?: string) => ValidationRule;
+    maxLength: (max: number, message?: string) => ValidationRule;
+    min: (min: number, message?: string) => ValidationRule;
+    max: (max: number, message?: string) => ValidationRule;
+    pattern: (regex: RegExp, message?: string) => ValidationRule;
+    url: (message?: string) => ValidationRule;
+    async: (validatorFn: (value: any) => Promise<boolean | string>) => ValidationRule;
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './types';
+export * from './composables/useFormValidation';

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../index'
+export {}

package/dist/types.d.ts

@@ -0,0 +1,100 @@
+export type Variant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+export type Size = 'sm' | 'lg';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type Placement = 'top' | 'bottom' | 'start' | 'end';
+export type Tag = 'div' | 'span' | 'section' | 'article' | 'nav' | 'aside' | 'header' | 'footer' | 'main';
+export type Direction = 'up' | 'down' | 'start' | 'end';
+export type SpinnerType = 'border' | 'grow';
+export type PlaceholderAnimation = 'glow' | 'wave';
+export type OffcanvasPlacement = 'start' | 'end' | 'top' | 'bottom';
+export type ToastPlacement = 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+export type NavbarPosition = 'fixed-top' | 'fixed-bottom' | 'sticky-top';
+export type ContainerType = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type ColSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
+export type GutterSize = 0 | 1 | 2 | 3 | 4 | 5;
+export type RowColsSize = 1 | 2 | 3 | 4 | 5 | 6;
+export type OrderValue = 0 | 1 | 2 | 3 | 4 | 5 | 'first' | 'last';
+export type AlignItems = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+export type JustifyContent = 'start' | 'center' | 'end' | 'around' | 'between' | 'evenly';
+export type SortDirection = 'asc' | 'desc' | null;
+export interface DataTableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    searchable?: boolean;
+    formatter?: (value: any, row: any) => string | number;
+    class?: string;
+    headerClass?: string;
+    thStyle?: Record<string, string>;
+    tdStyle?: Record<string, string>;
+}
+export interface DataTableSort {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+export interface BreadcrumbItem {
+    text: string;
+    href?: string;
+    to?: string | object;
+    active?: boolean;
+}
+export interface NavItem {
+    text: string;
+    href?: string;
+    to?: string | object;
+    active?: boolean;
+    disabled?: boolean;
+}
+export interface PaginationItem {
+    page: number;
+    text?: string;
+    active?: boolean;
+    disabled?: boolean;
+}
+export interface ListGroupItem {
+    text: string;
+    href?: string;
+    to?: string | object;
+    active?: boolean;
+    disabled?: boolean;
+    variant?: Variant;
+}
+export interface AccordionItem {
+    id: string;
+    title: string;
+    content: string;
+    show?: boolean;
+}
+export interface DropdownItem {
+    text?: string;
+    href?: string;
+    to?: string | object;
+    active?: boolean;
+    disabled?: boolean;
+    divider?: boolean;
+    header?: boolean;
+}
+export interface CarouselItem {
+    src: string;
+    alt?: string;
+    caption?: string;
+    captionText?: string;
+    active?: boolean;
+    interval?: number;
+}
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color';
+export type ValidationState = 'valid' | 'invalid' | null;
+export type ValidatorFunction = (value: any) => boolean | string | Promise<boolean | string>;
+export interface ValidationRule {
+    validator: ValidatorFunction;
+    message?: string;
+}
+export interface FormValidationResult {
+    valid: boolean;
+    message?: string;
+}
+export interface FormSelectOption {
+    value: string | number;
+    text: string;
+    disabled?: boolean;
+}

package/dist/vibeui.css

@@ -1 +1 @@
-.vibe-datatable[data-v-48221c7b]{width:100%}.datatable-info[data-v-48221c7b]{padding:.5rem 0;color:#6c757d}
+.vibe-datatable[data-v-48221c7b]{width:100%}.datatable-info[data-v-48221c7b]{padding:.5rem 0;color:#6c757d}.input-group-vertical[data-v-e706d3dc]{flex-direction:column}.input-group-vertical[data-v-e706d3dc]>*{width:100%}.vibe-wysiwyg-container[data-v-2eb8f4ff]{border:1px solid #ced4da;border-radius:.375rem}.vibe-wysiwyg-container.is-valid[data-v-2eb8f4ff]{border-color:#198754}.vibe-wysiwyg-container.is-invalid[data-v-2eb8f4ff]{border-color:#dc3545}.vibe-wysiwyg-container.disabled[data-v-2eb8f4ff]{background-color:#e9ecef;opacity:.6;cursor:not-allowed}.vibe-wysiwyg-container[data-v-2eb8f4ff] .ql-container{border:none;font-size:1rem}.vibe-wysiwyg-container[data-v-2eb8f4ff] .ql-toolbar{border:none;border-bottom:1px solid #ced4da;border-top-left-radius:.375rem;border-top-right-radius:.375rem}.vibe-wysiwyg-container[data-v-2eb8f4ff] .ql-editor{min-height:150px}