@allsrvsonline/vue-component-library 0.4.1 → 0.6.0

package/README.md

@@ -23,7 +23,20 @@ npm install @your-org/vue-component-library
 ### Importing Components
 
 ```typescript
-import { BaseButton, BaseInput, BaseCard } from '@your-org/vue-component-library'
+import {
+  BaseButton,
+  BaseInput,
+  BaseSelect,
+  BaseCard,
+  CollapsibleCard,
+  BaseDeleteButton,
+  Header,
+  Title,
+  Logo,
+  Main,
+  Footer,
+  Copyright
+} from '@your-org/vue-component-library'
 import '@your-org/vue-component-library/style.css'
 ```
 
@@ -86,6 +99,50 @@ const emailError = ref('')
 - `disabled`: `boolean` (default: `false`)
 - `required`: `boolean` (default: `false`)
 
+#### BaseSelect
+
+```vue
+<template>
+  <BaseSelect
+    v-model="selectedFruit"
+    label="Favorite Fruit"
+    placeholder="Choose a fruit"
+    :options="['Apple', 'Banana', 'Orange']"
+  />
+
+  <BaseSelect
+    v-model="selectedCountry"
+    label="Country"
+    :options="[
+      { value: 'us', label: 'United States' },
+      { value: 'ca', label: 'Canada' }
+    ]"
+    :error="countryError"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { BaseSelect } from '@your-org/vue-component-library'
+
+const selectedFruit = ref('')
+const selectedCountry = ref('')
+const countryError = ref('')
+</script>
+```
+
+**Props:**
+
+- `modelValue`: `string | number` - The select value (v-model)
+- `options`: `SelectOption[]` - Array of options to display
+- `placeholder`: `string` - Placeholder text
+- `disabled`: `boolean` (default: `false`)
+- `required`: `boolean` (default: `false`)
+- `label`: `string` - Select label
+- `error`: `string` - Error message to display
+- `labelField`: `string` (default: `'label'`) - Field name for label when options are objects
+- `valueField`: `string` (default: `'value'`) - Field name for value when options are objects
+
 #### BaseCard
 
 ```vue
@@ -104,6 +161,186 @@ import { BaseCard, BaseButton } from '@your-org/vue-component-library'
 </script>
 ```
 
+#### CollapsibleCard
+
+```vue
+<template>
+  <CollapsibleCard title="Click to expand" :initiallyCollapsed="false" elevated>
+    <p>This content can be toggled</p>
+
+    <template #footer>
+      <BaseButton variant="primary">Action</BaseButton>
+    </template>
+  </CollapsibleCard>
+</template>
+
+<script setup lang="ts">
+import { CollapsibleCard, BaseButton } from '@your-org/vue-component-library'
+</script>
+```
+
+**Props:**
+
+- `title`: `string` - Card title
+- `elevated`: `boolean` (default: `false`) - Whether the card has elevated shadow
+- `padding`: `boolean` (default: `true`) - Whether the card has padding
+- `initiallyCollapsed`: `boolean` (default: `true`) - Initial collapsed state
+
+#### BaseDeleteButton
+
+```vue
+<template>
+  <BaseDeleteButton @click="handleDelete" />
+  <BaseDeleteButton size="small" @click="handleDelete" />
+  <BaseDeleteButton :disabled="true" @click="handleDelete" />
+</template>
+
+<script setup lang="ts">
+import { BaseDeleteButton } from '@your-org/vue-component-library'
+
+const handleDelete = () => {
+  // Handle delete action
+}
+</script>
+```
+
+**Props:**
+
+- `size`: `'small' | 'medium' | 'large'` (default: `'medium'`)
+- `disabled`: `boolean` (default: `false`)
+- `loading`: `boolean` (default: `false`)
+- `fullWidth`: `boolean` (default: `false`)
+- `type`: `'button' | 'submit' | 'reset'` (default: `'button'`)
+- `ariaLabel`: `string` - Accessibility label (default: `'Delete'`)
+
+#### Header
+
+```vue
+<template>
+  <Header>
+    <template #left>
+      <Logo />
+      <Title title="My App" subtitle="Welcome" />
+    </template>
+    <template #middle>
+      <nav>
+        <BaseButton variant="secondary" size="small">Home</BaseButton>
+        <BaseButton variant="secondary" size="small">About</BaseButton>
+      </nav>
+    </template>
+    <template #right>
+      <BaseButton>Settings</BaseButton>
+    </template>
+  </Header>
+</template>
+
+<script setup lang="ts">
+import { Header, Logo, Title, BaseButton } from '@your-org/vue-component-library'
+</script>
+```
+
+**Features:**
+
+- Fixed positioning at the top of the page
+- Responsive design with theme support
+- Three named slots: left, middle, and right for proper content alignment
+- Automatic spacing and centering of middle content
+- Automatic theming (light/dark mode)
+
+#### Title
+
+```vue
+<template>
+  <Title title="My Application" subtitle="A modern Vue.js app" />
+</template>
+
+<script setup lang="ts">
+import { Title } from '@your-org/vue-component-library'
+</script>
+```
+
+**Props:**
+
+- `title`: `string` (default: `'TITLE PLACEHOLDER'`) - The main title text
+- `subtitle`: `string` (optional) - The subtitle text (only rendered when provided)
+
+#### Logo
+
+```vue
+<template>
+  <Logo src="/path/to/logo.svg" alt="Company Logo" />
+</template>
+
+<script setup lang="ts">
+import { Logo } from '@your-org/vue-component-library'
+</script>
+```
+
+**Props:**
+
+- `src`: `string` (default: `'/logo.svg'`) - The image source path
+- `alt`: `string` (default: `'Logo'`) - The alt text for accessibility
+
+#### Main
+
+```vue
+<template>
+  <Main>
+    <h1>Welcome to my app</h1>
+    <p>This is the main content area.</p>
+  </Main>
+</template>
+
+<script setup lang="ts">
+import { Main } from '@your-org/vue-component-library'
+</script>
+```
+
+**Features:**
+
+- Fixed positioning between header and footer
+- Scrollable content area with proper overflow handling
+- Responsive design with automatic spacing
+- Accepts any content via slots
+
+#### Footer
+
+```vue
+<template>
+  <Footer>
+    <Copyright :startYear="2020" name="My Company" />
+  </Footer>
+</template>
+
+<script setup lang="ts">
+import { Footer, Copyright } from '@your-org/vue-component-library'
+</script>
+```
+
+**Features:**
+
+- Fixed positioning at the bottom of the page
+- Responsive design with theme support
+- Accepts any content via slots
+- Automatic theming (light/dark mode)
+
+#### Copyright
+
+```vue
+<template>
+  <Copyright :startYear="2020" name="My Company" />
+</template>
+
+<script setup lang="ts">
+import { Copyright } from '@your-org/vue-component-library'
+</script>
+```
+
+**Props:**
+
+- `startYear`: `number` - The year the copyright started
+- `name`: `string` - The company or person name
+
 ### Using Composables
 
 ```typescript
@@ -176,11 +413,34 @@ npm run type-check
 ```
 src/
 ├── components/       # Vue components
+│   ├── base/         # Base components
+│   │   └── header/
+│   │       ├── Header.vue
+│   │       ├── Header.spec.ts
+│   │       ├── Title.vue
+│   │       ├── Title.spec.ts
+│   │       ├── Logo.vue
+│   │       └── Logo.spec.ts
+│   │   └── main/
+│   │       ├── Main.vue
+│   │       └── Main.spec.ts
+│   │   └── footer/
+│   │       ├── Footer.vue
+│   │       ├── Footer.spec.ts
+│   │       ├── Copyright.vue
+│   │       └── Copyright.spec.ts
 │   ├── BaseButton.vue
 │   ├── BaseButton.spec.ts
 │   ├── BaseInput.vue
 │   ├── BaseInput.spec.ts
-│   └── BaseCard.vue
+│   ├── BaseSelect.vue
+│   ├── BaseSelect.spec.ts
+│   ├── BaseCard.vue
+│   ├── BaseCard.spec.ts
+│   ├── CollapsibleCard.vue
+│   ├── CollapsibleCard.spec.ts
+│   ├── BaseDeleteButton.vue
+│   └── BaseDeleteButton.spec.ts
 ├── composables/      # Composable functions
 │   ├── useValidation.ts
 │   └── useClickOutside.ts

package/dist/index.d.ts

@@ -31,6 +31,12 @@ padding: boolean;
 initiallyCollapsed: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
+declare const __VLS_component_4: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLElement>;
+
+declare const __VLS_component_5: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLElement>;
+
+declare const __VLS_component_6: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLElement>;
+
 /**
  * BaseButton - A versatile button component with multiple variants and sizes
  *
@@ -76,12 +82,47 @@ declare function __VLS_template_3(): {
     rootEl: HTMLDivElement;
 };
 
+declare function __VLS_template_4(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        icons?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+
+declare function __VLS_template_5(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+
+declare function __VLS_template_6(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        icons?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+
 declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
 declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
 
 declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
 
+declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
+
+declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
+
+declare type __VLS_TemplateResult_6 = ReturnType<typeof __VLS_template_6>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -100,6 +141,24 @@ declare type __VLS_WithTemplateSlots_3<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_4<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_5<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_6<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 export declare const BaseButton: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
 /**
@@ -175,6 +234,58 @@ declare interface BaseCardProps {
     padding?: boolean;
 }
 
+export declare const BaseDeleteButton: DefineComponent<BaseDeleteButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: (event: Event) => any;
+}, string, PublicProps, Readonly<BaseDeleteButtonProps> & Readonly<{
+onClick?: ((event: Event) => any) | undefined;
+}>, {
+size: ButtonSize;
+disabled: boolean;
+fullWidth: boolean;
+loading: boolean;
+type: "button" | "submit" | "reset";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+
+/**
+ * BaseDeleteButton - A specialized delete button with trash icon
+ *
+ * @example
+ * ```vue
+ * <BaseDeleteButton @click="handleDelete" />
+ * ```
+ */
+declare interface BaseDeleteButtonProps {
+    /**
+     * The size of the button
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is in loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the button should take full width
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * The button type
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Accessibility label for screen readers
+     */
+    ariaLabel?: string;
+}
+
 export declare const BaseInput: DefineComponent<BaseInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: string) => any;
 focus: (event: FocusEvent) => any;
@@ -415,6 +526,8 @@ declare interface CollapsibleCardProps_2 {
     initiallyCollapsed?: boolean;
 }
 
+export declare const Copyright: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLParagraphElement>;
+
 /**
  * Debounces a function call
  *
@@ -424,6 +537,8 @@ declare interface CollapsibleCardProps_2 {
  */
 export declare function debounce<T extends (...args: unknown[]) => void>(fn: T, delay: number): (...args: Parameters<T>) => void;
 
+export declare const Footer: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+
 /**
  * Generates a unique ID
  *
@@ -432,6 +547,41 @@ export declare function debounce<T extends (...args: unknown[]) => void>(fn: T,
  */
 export declare function generateId(prefix?: string): string;
 
+export declare const Header: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+
+export declare const Logo: DefineComponent<LogoProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<LogoProps> & Readonly<{}>, {
+src: string;
+alt: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLImageElement>;
+
+/**
+ * Logo - A component for displaying a logo image
+ *
+ * @example
+ * ```vue
+ * <Logo src="/path/to/logo.svg" alt="My Company Logo" />
+ * ```
+ */
+declare interface LogoProps {
+    /**
+     * The source URL/path of the logo image
+     * @default '/logo.svg'
+     */
+    src?: string;
+    /**
+     * The alt text for the logo image (for accessibility)
+     * @default 'Logo'
+     */
+    alt?: string;
+}
+
+export declare const Main: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+
+declare interface Props {
+    startYear: number;
+    name: string;
+}
+
 /**
  * Select option type - can be a simple value or an object with value and label
  */
@@ -440,6 +590,30 @@ export declare type SelectOption = string | number | {
     label: string;
 } | Record<string, unknown>;
 
+export declare const Title: DefineComponent<TitleProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<TitleProps> & Readonly<{}>, {
+title: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+/**
+ * Title - A component for displaying a title and subtitle
+ *
+ * @example
+ * ```vue
+ * <Title title="My App" subtitle="Welcome to my application" />
+ * ```
+ */
+declare interface TitleProps {
+    /**
+     * The main title text
+     * @default 'TITLE PLACEHOLDER'
+     */
+    title?: string;
+    /**
+     * The subtitle text (optional - will not render if not provided)
+     */
+    subtitle?: string;
+}
+
 /**
  * Composable for detecting clicks outside an element
  *