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.

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.

This package is published to GitHub Packages as a private npm package. To install it, you'll need to set up authentication with GitHub Packages:

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

Create or edit your ~/.npmrc file:

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

npm install @octodemo/ghsioux-vue-templates

// main.js
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');

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

<template>
  <AdvancedModal :open="isModalOpen" @close="closeModal">
    <template #header>Custom Header</template>
    Modal content here
  </AdvancedModal>
</template>

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.
• BaseForm.vue: A foundational form component.
• BaseModal.vue: A basic modal component.
• ProductList.vue: A component for displaying a list of products.
• ProgressBar.vue: A component to indicate progress.

Copy the code of the desired component from the components directory into your Vue project. Each component is self-contained, meaning it includes all necessary CSS and icons, so you can use them without needing to import additional styles or assets.

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.

[Specify your license here, e.g., MIT License]