vue-quest-ui 0.0.36 → 0.0.38

package/README.md

@@ -1,98 +1,106 @@
-# Vue Quest UI
-
-Vue Quest UI is a collection of reusable Vue components that are designed to help you quickly build modern and responsive user interfaces for your Vue.js projects.
-
-## Installation
-
-You can easily install Vue Quest UI via npm:
-
-```bash
-npm i vue-quest-ui
-```
-
-## Usage
-To use Vue Quest UI in your Vue.js project, you can register the components globally as an entire library or individually, or locally.
-
-### 1. Global Registration:
-In your main.js (or main.ts) file, use the <b>install</b> function to register all components globally. All the components in the library will be installed in your project. They can then be used as custom components in any part of your project.
-
-```javascript
-import { createApp } from 'vue';
-import App from './App.vue';
-import { install } from 'vue-quest-ui';  // Import the install function
-
-const app = createApp(App);
-
-app.use(install); // Register all components globally
-
-app.mount('#app');
-```
-
-### 2. Selective Registration:
-If you only want to import specific components instead of the entire library, you can use the <b>installGlobalComponents</b> function. Pass a string array of the component names you'd like to import, these components will then be globally imported.
-
-```javascript
-import { createApp } from 'vue';
-import App from './App.vue';
-import { installGlobalComponents } from 'vue-quest-ui';
-
-const app = createApp(App);
-
-installGlobalComponents(app, ['QstIcon']); // Register only the QstIcon component globally
-
-app.mount('#app');
-```
-
-### 3. Manual Registration:
-You can also import and register individual components manually globally, or locally in each file that they'll be used in.
-
-```javascript
-// main.js/main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-import { QstIcon } from 'vue-quest-ui';
-
-const app = createApp(App);
-
-// Manually register the QstIcon component
-app.component('QstIcon', QstIcon);
-
-app.mount('#app');
-```
-
-```javascript
-// file for a component or page where the component will be used
-import { QstIcon } from 'vue-quest-ui';
-```
-
-```html
-<div>
-    <qst-icon icon="clarity:email-solid" />
-</div>
-```
-
-## Configuration
-Vue Quest UI requires iconify for the icons throughout the project. If it's not already installed, it will be installed alongside vue-quest-ui as a dependency.
-
-All components can be customized based on your needs by passing props to them. Review the props available for each component below.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+# Vue Quest UI
+
+Vue Quest UI is a collection of reusable Vue components that are designed to help you quickly build modern and responsive user interfaces for your Vue.js projects.
+
+## Installation
+
+You can easily install Vue Quest UI via npm:
+
+```bash
+npm i vue-quest-ui
+```
+
+## Usage
+To use Vue Quest UI in your Vue.js project, you can register the components globally as an entire library or individually, or locally.
+
+### 1. Global Registration:
+In your main.js (or main.ts) file, use the <b>install</b> function to register all components globally. All the components in the library will be installed in your project. They can then be used as custom components in any part of your project.
+
+```javascript
+import { createApp } from 'vue';
+import App from './App.vue';
+import { install } from 'vue-quest-ui';  // Import the install function
+
+const app = createApp(App);
+
+app.use(install); // Register all components globally
+
+app.mount('#app');
+```
+
+### 2. Selective Registration:
+If you only want to import specific components instead of the entire library, you can use the <b>installGlobalComponents</b> function. Pass a string array of the component names you'd like to import, these components will then be globally imported.
+
+```javascript
+import { createApp } from 'vue';
+import App from './App.vue';
+import { installGlobalComponents } from 'vue-quest-ui';
+
+const app = createApp(App);
+
+installGlobalComponents(app, ['QstIcon']); // Register only the QstIcon component globally
+
+app.mount('#app');
+```
+
+### 3. Manual Registration:
+You can also import and register individual components manually globally, or locally in each file that they'll be used in.
+
+```javascript
+// main.js/main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import { QstIcon } from 'vue-quest-ui';
+
+const app = createApp(App);
+
+// Manually register the QstIcon component
+app.component('QstIcon', QstIcon);
+
+app.mount('#app');
+```
+
+```javascript
+// file for a component or page where the component will be used
+import { QstIcon } from 'vue-quest-ui';
+```
+
+```html
+<div>
+    <qst-icon icon="clarity:email-solid" />
+</div>
+```
+
+## Styles
+All the necessary styles for Vue Quest UI can be imported in your main.js file. Some components also include a color prop, which allows you to choose an accent color. By default, this uses the primary-color CSS variable. If you define the primary-color variable in your project, it will automatically apply to all components that use the color prop, so you won’t need to set it individually for each one.
+
+```javascript
+import 'vue-quest-ui/dist/vue-quest-ui.css';
+``` 
+
+## Configuration
+Vue Quest UI requires iconify for the icons throughout the project. If it's not already installed, it will be installed alongside vue-quest-ui as a dependency.
+
+All components can be customized based on your needs by passing props to them. Review the props available for each component below.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 ## Components