@allsrvsonline/vue-component-library 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -1 +1,302 @@
-export {}
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+click: (event: MouseEvent) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+variant: ButtonVariant;
+size: ButtonSize;
+disabled: boolean;
+fullWidth: boolean;
+loading: boolean;
+type: "button" | "submit" | "reset";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+
+declare const __VLS_component_2: DefineComponent<BaseCardProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<BaseCardProps> & Readonly<{}>, {
+elevated: boolean;
+padding: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+/**
+ * BaseButton - A versatile button component with multiple variants and sizes
+ *
+ * @example
+ * ```vue
+ * <BaseButton variant="primary" size="medium" @click="handleClick">
+ *   Click me
+ * </BaseButton>
+ * ```
+ */
+declare type __VLS_Props = BaseButtonProps & {
+    type?: 'button' | 'submit' | 'reset';
+};
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+
+declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const BaseButton: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+/**
+ * Events emitted by BaseButton
+ */
+export declare interface BaseButtonEmits {
+    /**
+     * Emitted when button is clicked
+     */
+    (e: 'click', event: MouseEvent): void;
+}
+
+/**
+ * Props for BaseButton component
+ */
+export declare interface BaseButtonProps {
+    /**
+     * The visual style variant of the button
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button should take full width
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is in loading state
+     * @default false
+     */
+    loading?: boolean;
+}
+
+export declare const BaseCard: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+/**
+ * BaseCard - A container component for grouping related content
+ *
+ * @example
+ * ```vue
+ * <BaseCard title="Card Title" elevated>
+ *   <p>Card content goes here</p>
+ *   <template #footer>
+ *     <BaseButton>Action</BaseButton>
+ *   </template>
+ * </BaseCard>
+ * ```
+ */
+declare interface BaseCardProps {
+    /**
+     * Card title (alternative to header slot)
+     */
+    title?: string;
+    /**
+     * Whether the card has elevated shadow
+     * @default false
+     */
+    elevated?: boolean;
+    /**
+     * Whether the card has padding
+     * @default true
+     */
+    padding?: boolean;
+}
+
+export declare const BaseInput: DefineComponent<BaseInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: string) => any;
+focus: (event: FocusEvent) => any;
+blur: (event: FocusEvent) => any;
+}, string, PublicProps, Readonly<BaseInputProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
+onFocus?: ((event: FocusEvent) => any) | undefined;
+onBlur?: ((event: FocusEvent) => any) | undefined;
+}>, {
+disabled: boolean;
+type: "text" | "email" | "password" | "number" | "tel" | "url";
+modelValue: string;
+required: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+/**
+ * Events emitted by BaseInput
+ */
+export declare interface BaseInputEmits {
+    /**
+     * Emitted when value changes (v-model)
+     */
+    (e: 'update:modelValue', value: string): void;
+    /**
+     * Emitted when input is focused
+     */
+    (e: 'focus', event: FocusEvent): void;
+    /**
+     * Emitted when input loses focus
+     */
+    (e: 'blur', event: FocusEvent): void;
+}
+
+/**
+ * Props for BaseInput component
+ */
+export declare interface BaseInputProps {
+    /**
+     * The input value (v-model)
+     */
+    modelValue?: string;
+    /**
+     * Input type
+     * @default 'text'
+     */
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Input label
+     */
+    label?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+}
+
+/**
+ * Button size types
+ */
+export declare type ButtonSize = 'small' | 'medium' | 'large';
+
+/**
+ * Type definitions for the component library
+ */
+/**
+ * Base button variant types
+ */
+export declare type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
+
+/**
+ * Utility functions for the component library
+ */
+/**
+ * Combines multiple CSS class names, filtering out falsy values
+ *
+ * @param classes - Array of class names or conditional class names
+ * @returns Combined class string
+ *
+ * @example
+ * ```ts
+ * cn('btn', isActive && 'btn--active', 'btn--large')
+ * // Returns: 'btn btn--active btn--large' (if isActive is true)
+ * ```
+ */
+export declare function cn(...classes: (string | false | null | undefined)[]): string;
+
+/**
+ * Debounces a function call
+ *
+ * @param fn - Function to debounce
+ * @param delay - Delay in milliseconds
+ * @returns Debounced function
+ */
+export declare function debounce<T extends (...args: unknown[]) => void>(fn: T, delay: number): (...args: Parameters<T>) => void;
+
+/**
+ * Generates a unique ID
+ *
+ * @param prefix - Optional prefix for the ID
+ * @returns Unique ID string
+ */
+export declare function generateId(prefix?: string): string;
+
+/**
+ * Composable for detecting clicks outside an element
+ *
+ * @param elementRef - Reference to the element to monitor
+ * @param callback - Function to call when click occurs outside
+ *
+ * @example
+ * ```ts
+ * const dropdownRef = ref<HTMLElement>()
+ * useClickOutside(dropdownRef, () => {
+ *   // Close dropdown
+ * })
+ * ```
+ */
+export declare function useClickOutside(elementRef: Ref<HTMLElement | undefined>, callback: () => void): void;
+
+/**
+ * Composable for managing form validation state
+ *
+ * @example
+ * ```ts
+ * const { value, error, validate, reset } = useValidation(
+ *   '',
+ *   (val) => val.length > 0 ? null : 'Field is required'
+ * )
+ * ```
+ */
+export declare function useValidation<T>(initialValue: T, validator: (value: T) => string | null): {
+    value: Ref<T>;
+    error: Ref<string | null>;
+    isValid: Ref<boolean>;
+    validate: () => boolean;
+    reset: () => void;
+};
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allsrvsonline/vue-component-library",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "main": "./dist/vue-component-library.umd.js",
   "module": "./dist/vue-component-library.es.js",
@@ -11,7 +11,12 @@
       "import": "./dist/vue-component-library.es.js",
       "require": "./dist/vue-component-library.umd.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": {
+      "import": "./dist/vue-component-library.css",
+      "require": "./dist/vue-component-library.css",
+      "default": "./dist/vue-component-library.css"
+    },
+    "./dist/vue-component-library.css": "./dist/vue-component-library.css"
   },
   "files": [
     "dist"