@allsrvsonline/vue-component-library 0.5.0 → 0.6.1

package/README.md

@@ -15,7 +15,7 @@ A modern, type-safe Vue 3 component library built with TypeScript and Vite. This
 ## Installation
 
 ```bash
-npm install @your-org/vue-component-library
+npm install @allsrvsonline/vue-component-library
 ```
 
 ## Usage
@@ -29,9 +29,15 @@ import {
   BaseSelect,
   BaseCard,
   CollapsibleCard,
-  BaseDeleteButton
-} from '@your-org/vue-component-library'
-import '@your-org/vue-component-library/style.css'
+  BaseDeleteButton,
+  Header,
+  Title,
+  Logo,
+  Main,
+  Footer,
+  Copyright
+} from '@allsrvsonline/vue-component-library'
+import '@allsrvsonline/vue-component-library/style.css'
 ```
 
 ### Component Examples
@@ -44,7 +50,7 @@ import '@your-org/vue-component-library/style.css'
 </template>
 
 <script setup lang="ts">
-import { BaseButton } from '@your-org/vue-component-library'
+import { BaseButton } from '@allsrvsonline/vue-component-library'
 
 const handleClick = () => {
   console.log('Button clicked!')
@@ -76,7 +82,7 @@ const handleClick = () => {
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { BaseInput } from '@your-org/vue-component-library'
+import { BaseInput } from '@allsrvsonline/vue-component-library'
 
 const email = ref('')
 const emailError = ref('')
@@ -117,7 +123,7 @@ const emailError = ref('')
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { BaseSelect } from '@your-org/vue-component-library'
+import { BaseSelect } from '@allsrvsonline/vue-component-library'
 
 const selectedFruit = ref('')
 const selectedCountry = ref('')
@@ -151,7 +157,7 @@ const countryError = ref('')
 </template>
 
 <script setup lang="ts">
-import { BaseCard, BaseButton } from '@your-org/vue-component-library'
+import { BaseCard, BaseButton } from '@allsrvsonline/vue-component-library'
 </script>
 ```
 
@@ -169,7 +175,7 @@ import { BaseCard, BaseButton } from '@your-org/vue-component-library'
 </template>
 
 <script setup lang="ts">
-import { CollapsibleCard, BaseButton } from '@your-org/vue-component-library'
+import { CollapsibleCard, BaseButton } from '@allsrvsonline/vue-component-library'
 </script>
 ```
 
@@ -190,7 +196,7 @@ import { CollapsibleCard, BaseButton } from '@your-org/vue-component-library'
 </template>
 
 <script setup lang="ts">
-import { BaseDeleteButton } from '@your-org/vue-component-library'
+import { BaseDeleteButton } from '@allsrvsonline/vue-component-library'
 
 const handleDelete = () => {
   // Handle delete action
@@ -207,10 +213,138 @@ const handleDelete = () => {
 - `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 '@allsrvsonline/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 '@allsrvsonline/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 '@allsrvsonline/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 '@allsrvsonline/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 '@allsrvsonline/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 '@allsrvsonline/vue-component-library'
+</script>
+```
+
+**Props:**
+
+- `startYear`: `number` - The year the copyright started
+- `name`: `string` - The company or person name
+
 ### Using Composables
 
 ```typescript
-import { useValidation, useClickOutside } from '@your-org/vue-component-library'
+import { useValidation, useClickOutside } from '@allsrvsonline/vue-component-library'
 
 // Form validation
 const { value, error, validate } = useValidation('', (val) =>
@@ -227,7 +361,7 @@ useClickOutside(dropdownRef, () => {
 ### Using Utilities
 
 ```typescript
-import { cn, debounce, generateId } from '@your-org/vue-component-library'
+import { cn, debounce, generateId } from '@allsrvsonline/vue-component-library'
 
 // Combine class names
 const classes = cn('btn', isActive && 'btn--active')
@@ -279,6 +413,22 @@ 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
@@ -340,69 +490,3 @@ When contributing components:
 ## License
 
 MIT
-
-## Publishing
-
-This project uses automated releases with conventional commits and GitHub Actions.
-
-### Prerequisites
-
-Before publishing, ensure these GitHub repository variables are configured:
-
-1. **NPM_TOKEN** - npm authentication token
-   - Go to npmjs.com → Account Settings → Access Tokens → Generate New Token (Automation)
-   - Add as repository variable: `NPM_TOKEN` (in Settings → Variables)
-
-2. **GITHUB_TOKEN** - Automatically provided by GitHub Actions (no setup needed)
-
-3. **GITHUB_TOKEN** - Automatically provided by GitHub Actions (no setup needed)
-
-### Release Process
-
-Create releases using these npm scripts:
-
-```bash
-# Patch release (0.3.1 → 0.3.2)
-npm run release:patch
-
-# Minor release (0.3.1 → 0.4.0)
-npm run release:minor
-
-# Major release (0.3.1 → 1.0.0)
-npm run release:major
-
-# Preview what would happen
-npm run release:dry-run
-```
-
-The release process automatically:
-
-- ✅ Analyzes conventional commits
-- ✅ Bumps version in package.json
-- ✅ Updates CHANGELOG.md
-- ✅ Creates git commit and tag
-- ✅ Pushes to GitHub (triggers publish workflow)
-- ✅ Publishes to npm
-- ✅ Creates GitHub Release
-
-### Conventional Commits
-
-Use these commit message formats:
-
-```bash
-feat: add new component          # → Minor version bump
-fix: resolve button bug          # → Patch version bump
-docs: update README              # → No version bump
-BREAKING CHANGE: api change      # → Major version bump
-```
-
-### Manual Publishing
-
-If needed, you can still publish manually:
-
-```bash
-npm run build:lib
-npm publish --access public
-```
-
-Make sure to update `@your-org/vue-component-library` in package.json with your actual organization/package name.

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"]>;
 
 /**
@@ -467,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
  *
@@ -476,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
  *
@@ -484,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
  */
@@ -492,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
  *