@night-owl-elite/vue-select 1.3.1 → 1.3.2

package/README.md

@@ -1,121 +1,102 @@
-Vue 3 Tree Select Component
+# Vue 3 Tree Select Component
+
+[![npm](https://img.shields.io/npm/v/@night-owl-elite/vue-select.svg)](https://www.npmjs.com/package/@night-owl-elite/vue-select)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 A feature-rich, accessible, and customizable tree-select component for Vue 3.
 
 This component provides a powerful and flexible way to select single or multiple items from a hierarchical (tree) data structure. It includes searching, custom item rendering, "select all" functionality, and is styled with Bootstrap 5 and uses Font Awesome for icons.
 
-Features
-✅ Single & Multiple Selection: Easily switch between modes with the multiple prop.
+---
+
+### Features
+
+✅ **Single & Multiple Selection**: Easily switch between modes with the `multiple` prop.
+
+✅ **Two Selection UIs**: Choose between `checkbox` or `highlight` styles for selection.
+
+✅ **Search & Filtering**: A built-in search bar to filter tree nodes in real-time.
 
-✅ Two Selection UIs: Choose between checkbox or highlight styles.
+✅ **"Select All" Children**: In `multiple` mode, click a parent to select/deselect all its descendants.
 
-✅ Search & Filtering: A built-in search bar to filter tree nodes in real-time.
+✅ **Customizable Data Keys**: Specify which properties in your data objects to use for labels, values, and disabled states.
 
-✅ "Select All" Children: In multiple mode, click a parent to select/deselect all its descendants.
+✅ **Customizable Items**: Use scoped slots to take full control over how each tree item is rendered.
 
-✅ Customizable Data Keys: Specify which properties in your data objects to use for labels, values, and disabled states.
+✅ **Built with Bootstrap 5**: Seamlessly integrates with projects using the Bootstrap 5 framework.
 
-✅ Customizable Items: Use scoped slots to take full control over how each tree item is rendered.
+---
 
-✅ Built with Bootstrap 5: Seamlessly integrates with projects using the Bootstrap 5 framework.
+### Installation
 
+1.  **Install the package from npm:**
+    ```bash
+    npm install @night-owl-elite/vue-select
+    ```
 
-Installation
-- First, install the package from npm: 
-      npm install @night-owl-elite/vue-select
-- Install Peer Dependencies
-      npm install bootstrap @popperjs/core  
+2.  **Install Peer Dependencies:**
+    This component relies on Bootstrap for styling and dropdown functionality.
+    ```bash
+    npm install bootstrap @popperjs/core
+    ```
 
-Usage Example
+3.  **Import CSS & JS:**
+    Make sure to import Bootstrap's CSS and JS in your main entry file (e.g., `main.js` or `main.ts`):
+    ```javascript
+    // main.js or main.ts
+    import 'bootstrap/dist/css/bootstrap.min.css';
+    import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+    ```
+
+---
+
+### Usage
+
+Here is a basic example of how to use the `TreeSelect` component.
+
+```vue
+<template>
+  <div class="container mt-5">
+    <TreeSelect
+      v-model="selectedValue"
+      :items="treeData"
+      :multiple="true"
+      :select-all="true"
+      :searchable="true"
+      placeholder="Select categories..."
+      option-label="value"
+      option-value="code"
+      disabled-key="isDisabled"
+      exclude-from-selected-list-key="excludeFromSelectedList"
+    />
+    <p class="mt-3"><strong>Selected:</strong> {{ selectedValue }}</p>
+  </div>
+</template>
 
 <script setup>
 import { ref } from 'vue';
-import {VSelect} from '@night-owl-elite/vue-select';
-
-const selectedItem = ref(null);
+import TreeSelect from '@night-owl-elite/vue-select';
 
-// For multiple selection
-const selectedItems = ref(['APPLE']); // Pre-select an item
+const selectedValue = ref([]);
 
-const treeData = ref([
+const treeData = [
   {
-    code: 'FRUIT',
-    value: 'Fruits',
-    // Parent nodes can be excluded from the final v-model value
-    excludeFromList: true,
+    code: 'electronics',
+    value: 'Electronics',
+    // This node won't be added to the modelValue, useful for grouping
+    excludeFromSelectedList: true, 
     children: [
-      { code: 'APPLE', value: 'Apple', icon: 'apple-alt' }, // Custom icon example
-      { code: 'ORANGE', value: 'Orange' },
-      {
-        code: 'BERRY',
-        value: 'Berries',
-        excludeFromList: true,
-        children: [
-            { code: 'STRAWBERRY', value: 'Strawberry' },
-            { code: 'RASPBERRY', value: 'Raspberry', isDisabled: true }, // Disabled item
-        ]
-      },
+      { code: 'smartphones', value: 'Smartphones' },
+      { code: 'laptops', value: 'Laptops' },
     ],
   },
   {
-    code: 'VEG',
-    value: 'Vegetables',
+    code: 'furniture',
+    value: 'Furniture',
     children: [
-      { code: 'CARROT', value: 'Carrot' },
-      { code: 'BROCCOLI', value: 'Broccoli' },
+      { code: 'tables', value: 'Tables' },
+      { code: 'chairs', value: 'Chairs', isDisabled: true },
     ],
   },
-]);
-</script>
-
-<template>
-  <div class="container py-5">
-    <div class="row justify-content-center">
-      <div class="col-md-6">
-        <h3>Multiple Selection with Checkboxes</h3>
-        <VSelect
-          v-model="selectedItems"
-          :items="treeData"
-          :multiple="true"
-          :select-all="true"
-          select-mode="checkbox"
-          placeholder="Select multiple items..."
-          disabled-key="isDisabled"
-          exclude-from-selected-list-key="excludeFromList"
-        />
-        <pre class="mt-2 bg-light p-2 rounded">v-model: {{ selectedItems }}</pre>
-
-        <h3 class="mt-5">Single Selection with Highlight</h3>
-        <VSelect
-          v-model="selectedItem"
-          :items="treeData"
-          :multiple="false"
-          select-mode="highlight"
-          placeholder="Select a single item..."
-        />
-        <pre class="mt-2 bg-light p-2 rounded">v-model: {{ selectedItem }}</pre>
-      </div>
-    </div>
-  </div>
-</template>
-
-
-API Reference
-Prop	Type	                Default	                                  Description
-modelValue	                [String, Number, Array]	null	         The selected value(s). Use v-model to bind.
-items	Array	                []	                                 The array of hierarchical data to display. Each item is an object.
-multiple	                Boolean	false	                         If true, allows multiple items to be selected.
-selectMode	                String	'checkbox'	                 The UI style for selection. Can be 'checkbox' or 'highlight'.
-placeholder	                String	'Select item...'	         The text displayed when no items are selected.
-isInvalid	                Boolean	false	                         If true, applies a red border for validation feedback.
-disabled	                Boolean	false	                         If true, disables the entire component.
-searchable	                Boolean	true	                         If true, shows a search input in the dropdown.
-isLoading	                Boolean	false	                         If true, shows a loading spinner and disables the component.
-showClearButton	                Boolean	true	                         If true, shows a button to clear the current selection.
-selectAll	                Boolean	false	                         When multiple is true, enables selecting a parent to automatically select all its enabled children.
-optionLabel	                String	'value'	                         The key in your item objects that holds the display text.
-optionValue	                String	'code'	                         The key in your item objects that holds the unique value for v-model.
-disabledKey	                String	null	                         The key in your item objects that, if present and not null, disables that item.
-excludeFromSelectedListKey	String	null	                         If an item object has this key set to true, its value won't be included in the final emitted modelValue. Useful for parent group labels.
-
-
-
+];
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@night-owl-elite/vue-select",
   "private": false,
-  "version": "1.3.1",
+  "version": "1.3.2",
   "type": "module",
   "main": "./dist/vue-select.umd.js",
   "module": "./dist/vue-select.es.js",