@daydi3/primevue-overrides/README.md

Custom design overrides for PrimeVue components

# PrimeVue Overrides

This package provides custom design overrides for PrimeVue components, allowing you to implement your own styled elements including buttons, dialogs, inputs, and more.

## Installation

First, install the dependencies:

```bash
npm install
```

## Development

To start the development server:

```bash
npm run dev
```

## Publishing as a Private npm Package

To publish this package as a private npm package, follow these steps:

1. **Update the package name** in `package.json` with your organization's scope:

```json
{
  "name": "@your-organization/primevue-overrides"
}
```

2. **Login to npm** with your account that has access to your organization:

```bash
npm login
```

3. **Build the package**:

```bash
npm run build
```

4. **Publish the package**:

```bash
npm publish
```

Since the package is marked as private (`"private": true`), you'll need an npm paid account or organization to publish it.

## Using in Other Projects

After publishing, you can use this package in your other projects instead of PrimeVue:

### Install the package

```bash
npm install @your-organization/primevue-overrides
```

### Method 1: Use as a Vue Plugin (Recommended)

```javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';

// Import your custom PrimeVue package
import PrimeVueOverrides from '@your-organization/primevue-overrides';

// Import PrimeIcons if needed
import 'primeicons/primeicons.css';

const app = createApp(App);

// Use your custom package (this will register all components globally)
app.use(PrimeVueOverrides, {
  // Optional PrimeVue configuration
  ripple: true,
  inputStyle: 'filled'
});

app.mount('#app');
```

### Method 2: Import Individual Components

```vue
<template>
  <div>
    <Button label="Custom Button" />
    <InputText v-model="text" placeholder="Custom Input" />
  </div>
</template>

<script>
import { Button, InputText } from '@your-organization/primevue-overrides';

export default {
  components: {
    Button,
    InputText
  },
  data() {
    return {
      text: ''
    };
  }
};
</script>
```

### Method 3: Import Only the Styles

If you want to use the standard PrimeVue components but with your custom styling:

```javascript
// Import just the styles from your package
import '@your-organization/primevue-overrides/src/assets/styles/theme.scss';

// Then use regular PrimeVue components
import { Button } from 'primevue/button';
```

## Customization

You can customize the design by modifying the variables in:

```
src/assets/styles/variables.scss
```

This file contains all the design tokens used throughout the components, including:

- Color palette
- Typography
- Border radius
- Spacing
- Shadows
- Transitions

## Component Overrides

The following components have been customized:

- Buttons (primary, secondary, success, info, warning, help, danger)
- Input fields (text inputs, password inputs)
- Dialogs
- Dropdowns
- Checkboxes
- Radio buttons
- And more

## Building for Production

To build the library for production:

```bash
npm run build
```

## License

ISC