This repository provides a collection of Vue.js components intended for use as templates in other projects. The components are designed to be used as-is, with all CSS, styling, and icons included, and are now available as a public npm package.

The primary goal of this repository is to offer a set of pre-built, styled Vue components that can be easily integrated into various Vue applications. This helps maintain consistency in UI/UX across different projects and speeds up development by providing ready-to-use building blocks.

# Install the package
npm install @octodemo/ghsioux-vue-templates

# Or with yarn
yarn add @octodemo/ghsioux-vue-templates

// Import and use components
import { AdvancedModal, ProgressBar } from '@octodemo/ghsioux-vue-templates';

This package is published to GitHub Packages as a public npm package, making it easy to use in any project.

npm install @octodemo/ghsioux-vue-templates

If you encounter any issues with the direct installation, you can configure npm to use GitHub Packages explicitly:

# Add this to your project's .npmrc file
@octodemo:registry=https://npm.pkg.github.com

Then install the package:

npm install @octodemo/ghsioux-vue-templates

There are multiple ways to use these components in your Vue.js project:

This approach makes all components available throughout your application without needing to import them individually:

// main.js or main.ts
import { createApp } from 'vue';
import App from './App.vue';
import GhSiouxVueTemplates from '@octodemo/ghsioux-vue-templates';

const app = createApp(App);
app.use(GhSiouxVueTemplates);
app.mount('#app');

This approach is more efficient as it only includes the components you actually use:

import { BaseModal, ProgressBar } from '@octodemo/ghsioux-vue-templates';

If you're using Vite or Webpack, you can set up an alias for cleaner imports:

// vite.config.js
export default defineConfig({
  resolve: {
    alias: {
      '@vue-templates': '@octodemo/ghsioux-vue-templates'
    }
  }
});

Then in your components:

import { BaseForm, ProductList } from '@vue-templates';

Here are examples of how to use each component:

<template>
  <button @click="openModal">Open Modal</button>
  
  <BaseModal :open="isOpen" @close="closeModal">
    <template #header>Modal Title</template>
    <p>This is the modal content area.</p>
    <template #footer>
      <button @click="closeModal" class="button-secondary">Cancel</button>
      <button @click="handleConfirm" class="button-primary">Confirm</button>
    </template>
  </BaseModal>
</template>

<script setup>
import { ref } from 'vue';
import { BaseModal } from '@octodemo/ghsioux-vue-templates';

const isOpen = ref(false);

const openModal = () => {
  isOpen.value = true;
};

const closeModal = () => {
  isOpen.value = false;
};

const handleConfirm = () => {
  // Handle confirmation action
  closeModal();
};
</script>

Similar to BaseModal but with additional features such as size options, animations, and more.

<template>
  <BaseForm
    :fields="formFields"
    :validation-schema="validationSchema"
    @submit="handleSubmit"
  />
</template>

<script setup>
import { BaseForm } from '@octodemo/ghsioux-vue-templates';

const formFields = [
  { 
    name: 'name', 
    label: 'Name', 
    type: 'text', 
    required: true 
  },
  { 
    name: 'email', 
    label: 'Email', 
    type: 'email', 
    required: true 
  },
  { 
    name: 'message', 
    label: 'Message', 
    type: 'textarea' 
  }
];

const validationSchema = {
  name: (value) => value ? true : 'Name is required',
  email: (value) => {
    if (!value) return 'Email is required';
    if (!/^\S+@\S+\.\S+$/.test(value)) return 'Invalid email format';
    return true;
  }
};

const handleSubmit = (formData) => {
  console.log('Form submitted:', formData);
  // Process the form data
};
</script>

<template>
  <CardComponent 
    title="Product Title" 
    subtitle="Product subtitle" 
    imageSrc="/path/to/image.jpg"
    :hoverable="true"
    :elevation="2"
  >
    <p>This is the card content with product description.</p>
    <template #footer>
      <button class="button-secondary">Details</button>
      <button class="button-primary">Add to Cart</button>
    </template>
  </CardComponent>
</template>

<script setup>
import { CardComponent } from '@octodemo/ghsioux-vue-templates';
</script>

<template>
  <div>
    <!-- Display-only rating -->
    <StarRating :value="rating" :showValue="true" />
    
    <!-- Interactive rating -->
    <StarRating 
      v-model:value="userRating" 
      :interactive="true"
      @rating-click="handleRatingClick" 
    />
    <p>Your rating: {{ userRating }}/5</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { StarRating } from '@octodemo/ghsioux-vue-templates';

const rating = ref(4.5);
const userRating = ref(0);

const handleRatingClick = (value) => {
  console.log(`User rated: ${value} stars`);
};
</script>

<template>
  <ProgressBar :value="progress" />
  <button @click="incrementProgress">Increment</button>
</template>

<script setup>
import { ref } from 'vue';
import { ProgressBar } from '@octodemo/ghsioux-vue-templates';

const progress = ref(25);

const incrementProgress = () => {
  if (progress.value < 100) {
    progress.value += 10;
  }
};
</script>

<template>
  <ProductList :products="products" @select="handleProductSelect" />
</template>

<script setup>
import { ref } from 'vue';
import { ProductList } from '@octodemo/ghsioux-vue-templates';

const products = ref([
  { id: 1, name: 'Product A', price: 29.99, image: '/path/to/image.jpg' },
  { id: 2, name: 'Product B', price: 39.99, image: '/path/to/image.jpg' },
  { id: 3, name: 'Product C', price: 49.99, image: '/path/to/image.jpg' }
]);

const handleProductSelect = (product) => {
  console.log('Selected product:', product);
  // Handle product selection
};
</script>

If you're a maintainer of this package and need to publish a new version, follow these steps:

In package.json, update the version number following semantic versioning:

# Example: Update to version 1.0.1
npm version patch  # for bug fixes
npm version minor  # for new features
npm version major  # for breaking changes

1. Go to GitHub → Settings → Developer settings → Personal access tokens → Fine-grained tokens
2. Create a new token with these permissions:
   • Read and Write access to packages
   • Read access to contents

Create or update your ~/.npmrc file:

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@octodemo:registry=https://npm.pkg.github.com

npm run build
npm publish

This repository currently includes the following components:

• AdvancedModal.vue: A modal component with advanced features like customizable size, transitions, and additional styling options.
• BaseForm.vue: A foundational form component that handles various input types, validation, and form submission.
• BaseModal.vue: A basic modal component with overlay, header, body, and footer sections.
• CardComponent.vue: A versatile card component with support for images, headers, content, and footers.
• ProductList.vue: A component for displaying a list of products with customizable layout and selection events.
• ProgressBar.vue: A component to indicate progress with customizable appearance and animation.
• StarRating.vue: A star rating component with interactive and display modes.

Contributions are welcome! If you have a component that you think would be a good addition to this collection, please feel free to open a pull request. Ensure that the component is well-documented and includes all necessary styling.

MIT License

Copyright (c) 2025 Octodemo

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.