Component Documentation

This documentation provides detailed usage instructions for the components included in this package.

Table of Contents

1. TextInput Component
2. LazyLoading Component
3. LazyLoadingTable Component
4. InputAutocomplete Component
5. InputCheckbox Component
6. InputMultiSelect Component
7. InputNumber Component
8. InputRadioGroup Component
9. InputSelect Component

Documentation for Selected Components

InputSelect Component

A customizable dropdown select component built with Vuetify 3 for selecting a single option.

Installation

Ensure you have Vuetify 3 installed in your project. If not, you can install it via npm:

npm install vuetify

Then, copy the InputSelect component into your project.

Usage

Basic Example

<template>
  <InputSelect 
    v-model="selectedItem" 
    :items="options" 
    label="Choose an option" 
    :rules="[rules.required]" 
    :loading="loading" 
    :disabled="false" 
    :readonly="false"
  />
</template>

<script>
import InputSelect from './InputSelect.vue';

export default {
  components: { InputSelect },
  data() {
    return {
      selectedItem: null,
      loading: false,
      options: [
        { text: 'Option 1', value: 'option1' },
        { text: 'Option 2', value: 'option2' },
        { text: 'Option 3', value: 'option3' },
      ],
      rules: {
        required: v => !!v || 'This field is required',
      },
    };
  },
};
</script>

Props

| Prop | Type | Default | Description | |----------------|---------------------|---------------------|------------------------------------------------------------------| | modelValue | Any | undefined | The bound value of the selected option. | | label | String | 'Select an option'| The label displayed above the select field. | | items | Array | [] | The list of items available for selection. | | itemTitle | String | 'text' | The property name for item titles in the items array. | | itemValue | String | 'value' | The property name for item values in the items array. | | rules | Array | [] | Validation rules for the select field. | | errorMessages| String | Array | '' | Error messages displayed below the select field. | | disabled | Boolean | false | Disables the select field if set to true. | | loading | Boolean | false | Displays a loading indicator when set to true. | | size | String | 'medium' | The size of the select field ('small', 'medium', 'large'). | | readonly | Boolean | false | Makes the select field read-only if set to true. |

Events

| Event | Payload | Description | |--------------------|----------------------|--------------------------------------------------| | update:modelValue| Any | Emitted when the selected option changes. | | change | Any | Emitted when the selection is updated. |

Customization

You can customize the styles of the InputSelect component by overriding its scoped styles:

<style scoped>
.v-select {
  font-size: 1rem;
}

.v-select--small {
  font-size: 0.8rem;
}

.v-select--large {
  font-size: 1.2rem;
}
</style>

LazyLoadingTable Component

A lazy-loading table component designed to display large datasets with infinite scrolling.

Installation

Ensure you have Vuetify 3 installed in your project. If not, you can install it via npm:

npm install vuetify

Then, copy the LazyLoadingTable component into your project.

Usage

Basic Example

<template>
  <LazyLoadingTable 
    :itemsAll="items" 
    :fetchLimit="10"
  />
</template>

<script>
import LazyLoadingTable from './LazyLoadingTable.vue';

export default {
  components: { LazyLoadingTable },
  data() {
    return {
      items: Array.from({ length: 100 }, (_, i) => ({
        id: i + 1,
        name: `Item ${i + 1}`,
        description: `Description for Item ${i + 1}`,
      })),
    };
  },
};
</script>

Props

| Prop | Type | Default | Description | |----------------|------------|------------------|------------------------------------------------------------------| | itemsAll | Array | [] | The full dataset to be displayed in the table. | | fetchLimit | Number | 20 | Number of rows to load on each scroll event. |

Methods

| Method | Description | |----------------|----------------------------------------------------| | loadMore | Loads the next batch of rows into the table. | | onScroll | Triggers lazy loading when the scroll threshold is reached. | | toggleSelectAll | Toggles selection of all visible rows. |

Styles

You can customize the styles of the LazyLoadingTable component by overriding its scoped styles:

<style scoped>
.table-container {
  max-height: 90vh;
  overflow-y: auto;
  background-color: #f4f4f4;
  padding: 10px;
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
}

.table-container th, .table-container td {
  padding: 8px 12px;
  border: 1px solid #ddd;
}

.table-container tr:hover {
  background-color: #f0f0f0;
}
</style>

InputAutocomplete Component

A flexible autocomplete component built with Vuetify 3 for selecting single or multiple options.

Installation

Ensure you have Vuetify 3 installed in your project. If not, you can install it via npm:

npm install vuetify

Then, copy the InputAutocomplete component into your project.

Usage

Basic Example

<template>
  <InputAutocomplete 
    v-model="selectedValue"
    :items="options" 
    label="Select an option"
    :multiple="true"
    :chips="true"
    :clear-on-select="false"
  />
</template>

<script>
import InputAutocomplete from './InputAutocomplete.vue';

export default {
  components: { InputAutocomplete },
  data() {
    return {
      selectedValue: [],
      options: [
        { text: 'Option 1', value: 'option1' },
        { text: 'Option 2', value: 'option2' },
        { text: 'Option 3', value: 'option3' },
      ],
    };
  },
};
</script>

Props

| Prop | Type | Default | Description | |------------------|---------------------|-------------------------|------------------------------------------------------------| | label | String | 'Select an option' | The label displayed above the autocomplete field. | | itemValue | String | 'value' | The key to use for the value in the options array. | | itemTitle | String | 'text' | The key to use for the title in the options array. | | items | Array | [] | The options to display in the autocomplete. | | modelValue | Any | undefined | The bound value of the autocomplete. | | errorMessages | String | Array | '' | Error messages displayed below the autocomplete field. | | rules | Array | [] | Validation rules for the autocomplete field. | | disabled | Boolean | false | Disables the autocomplete field if set to true. | | size | String | 'medium' | Size of the input ('small', 'medium', 'large'). | | loading | Boolean | false | Displays a loading indicator when set to true. | | multiple | Boolean | false | Enables selecting multiple options if set to true. | | chips | Boolean | false | Displays selected options as chips when set to true. | | clearOnSelect | Boolean | false | Clears the autocomplete input on selecting an option. | | readonly | Boolean | false | Makes the field read-only when set to true. |

Events

| Event | Payload | Description | |--------------------|----------------------|--------------------------------------------------| | update:modelValue| Any | Emitted when the value of the autocomplete changes. |

Customization

You can customize the styles of the InputAutocomplete component by overriding its scoped styles:

<style scoped>
.autocomplete--small .v-input__control {
  font-size: 0.8rem;
}

.autocomplete--medium .v-input__control {
  font-size: 1rem;
}

.autocomplete--large .v-input__control {  
  font-size: 1.2rem;
}
</style>

InputCheckbox Component

A simple checkbox component built with Vuetify 3.

Installation

Ensure you have Vuetify 3 installed in your project. If not, you can install it via npm:

npm install vuetify

Then, copy the InputCheckbox component into your project.

Usage

Basic Example

<template>
  <InputCheckbox 
    v-model="isChecked" 
    label="Accept Terms" 
    :rules="[rules.required]" 
    :disabled="false" 
    :readonly="false"
  />
</template>

<script>
import InputCheckbox from './InputCheckbox.vue';

export default {
  components: { InputCheckbox },
  data() {
    return {
      isChecked: false,
      rules: {
        required: v => !!v || 'This field is required',
      },
    };
  },
};
</script>

Props

| Prop | Type | Default | Description | |----------------|---------------------|---------------------|----------------------------------------------------| | modelValue | Boolean | false | The bound value of the checkbox. | | label | String | 'Check me' | The label displayed beside the checkbox. | | errorMessages| String | Array | '' | Error messages displayed below the checkbox. | | rules | Array | [] | Validation rules for the checkbox. | | disabled | Boolean | false | Disables the checkbox if set to true. | | readonly | Boolean | false | Makes the checkbox read-only if set to true. |

Events

| Event | Payload | Description | |----------------|----------------------|--------------------------------------------------| | update:modelValue | Boolean | Emitted when the checkbox value changes. |

InputMultiSelect Component

A multi-select component for selecting multiple items with ease, built using Vuetify 3.

Installation

Ensure you have Vuetify 3 installed in your project. If not, you can install it via npm:

npm install vuetify

Then, copy the InputMultiSelect component into your project.

Usage

Basic Example

<template>
  <InputMultiSelect 
    v-model="selectedItems" 
    :items="options" 
    label="Select options" 
    :rules="[rules.required]" 
    :loading="loading" 
    :disabled="false"
  />
</template>

<script>
import InputMultiSelect from './InputMultiSelect.vue';

export default {
  components: { InputMultiSelect },
  data() {
    return {
      selectedItems: [],
      loading: false,
      options: [
        { text: 'Option 1', value: 'option1' },
        { text: 'Option 2', value: 'option2' },
        { text: 'Option 3', value: 'option3' },
      ],
      rules: {
        required: v => (v && v.length > 0) || 'Please select at least one option',
      },
    };
  },
};
</script>

Props

| Prop | Type | Default | Description | |----------------|---------------------|---------------------|------------------------------------------------------------------| | modelValue | Array | [] | The bound value of the selected items. | | label | String | 'Select an option'| The label displayed above the select field. | | items | Array | [] | The list of items available for selection. | | itemTitle | String | 'text' | The property name for item titles in the items array. | | itemValue | String | 'value' | The property name for item values in the items array. | | rules | Array | [] | Validation rules for the select field. | | errorMessages| String | Array | '' | Error messages displayed below the select field. | | disabled | Boolean | false | Disables the select field if set to true. | | loading | Boolean | false | Displays a loading indicator when set to true. | | size | String | 'medium' | The size of the select field ('small', 'medium', 'large'). |

Events

| Event | Payload | Description | |--------------------|----------------------|--------------------------------------------------| | update:modelValue| Array | Emitted when the selected items change. | | change | Array | Emitted when the selection is updated. |

InputNumber Component

A customizable number input component built with Vuetify 3, featuring validation and dynamic size options.

Installation

Ensure you have Vuetify 3 installed in your project. If not, you can install it via npm:

npm install vuetify

Then, copy the InputNumber component into your project.

Usage

Basic Example

<template>
  <InputNumber 
    v-model="numericValue" 
    label="Enter a number" 
    :min="0" 
    :max="100" 
    :rules="[rules.required]" 
    errorMessage="Invalid number" 
    :loading="loading"
  />
</template>

<script>
import InputNumber from './InputNumber.vue';

export default {
  components: { InputNumber },
  data() {
    return {
      numericValue: '',
      loading: false,
      rules: {
        required: v => !!v || 'Field is required',
      },
    };
  },
};
</script>

Props

| Prop | Type | Default | Description | |----------------|---------------------|---------------------|------------------------------------------------------------------| | modelValue | Number | String | '' | The bound value of the number input field. | | label | String | Required | The label displayed above the input field. | | errorMessage | String | Array | '' | Error message displayed below the input field. | | rules | Array | [] | Validation rules for the input field. | | disabled | Boolean | false | Disables the input field if set to true. | | max | Number | Infinity | The maximum allowed value for the input. | | min | Number | -Infinity | The minimum allowed value for the input. | | size | String | 'medium' | Size of the input ('small', 'medium', 'large'). | | loading | Boolean | false | Displays a loading indicator when set to true. |

Events

| Event | Payload | Description | |--------------------|--------------------|--------------------------------------------------| | update:modelValue| Number | String | Emitted when the input value changes. | | change | Event | Emitted when the input loses focus or value changes. | | input | Number | String | Emitted on every keystroke with the sanitized value.|

InputRadioGroup Component

A customizable radio button group component built with Vuetify 3, designed for selecting one option from a list.

Installation

Ensure you have Vuetify 3 installed in your project. If not, you can install it via npm:

npm install vuetify

Then, copy the InputRadioGroup component into your project.

Usage

Basic Example

<template>
  <InputRadioGroup 
    v-model="selectedOption" 
    :items="options" 
    label="Choose an option" 
    :inline="true" 
    :rules="[rules.required]" 
    errorMessages="Please select one option"
  />
</template>

<script>
import InputRadioGroup from './InputRadioGroup.vue';

export default {
  components: { InputRadioGroup },
  data() {
    return {
      selectedOption: '',
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
      ],
      rules: {
        required: v => !!v || 'This field is required',
      },
    };
  },
};
</script>

Props

| Prop | Type | Default | Description | |-----------------|---------------------|---------------------|------------------------------------------------------------------| | items | Array | [] | The array of options, each with label and value properties. | | modelValue | Any | undefined | The selected value of the radio group. | | label | String | '' | The label displayed above the radio group. | | inline | Boolean | false | If true, displays the radio buttons inline. | | errorMessages | String | Array | '' | Error messages displayed below the radio group. | | rules | Array | [] | Validation rules for the radio group. | | disabled | Boolean | false | Disables all radio buttons if set to true. | | readonly | Boolean | false | Makes the radio group read-only if set to true. |

Events

| Event | Payload | Description | |--------------------|--------------------|--------------------------------------------------| | update:modelValue| Any | Emitted when the selected option changes. |

Customization

You can customize the styles of the InputRadioGroup component by overriding its scoped styles.

<style scoped>
.v-radio-group {
  margin-bottom: 16px;
}

.v-radio {
  margin-right: 8px;
}

.v-radio--inline {
  display: inline-flex;
  align-items: center;
}
</style>

TextInput Component

A reusable and customizable text input component built with Vuetify 3.

Installation

Ensure you have Vuetify 3 installed in your project. If not, you can install it via npm:

npm install vuetify

Then, copy the TextInput component into your project.

Usage

Basic Example

Here is an example of how to use the TextInput component:

<template>
  <TextInput 
    v-model="inputValue" 
    label="Your Name" 
    placeholder="Enter your full name" 
    :maxlength="100" 
    :rules="[rules.required, rules.minLength(3)]" 
    errorMessage="This field is required" 
    :loading="loading" 
    @change="handleInputChange"
  />
</template>

<script>
import TextInput from './TextInput.vue';

export default {
  components: { TextInput },
  data() {
    return {
      inputValue: '',
      loading: false,
      rules: {
        required: v => !!v || 'Field is required',
        minLength: len => v => v.length >= len || `Minimum ${len} characters required`,
      },
    };
  },
  methods: {
    handleInputChange(event) {
      console.log('Input changed:', event);
    },
  },
};
</script>

Props

| Prop | Type | Default | Description | |----------------|------------|------------------|------------------------------------------------------------------| | modelValue | String | '' | The bound value of the text input field. | | label | String | 'Enter Text' | The label displayed above the text input. | | placeholder | String | '' | Placeholder text inside the input field. | | outlined | Boolean | true | Determines if the input field has an outlined style. | | maxlength | Number | 255 | Maximum number of characters allowed. | | disabled | Boolean | false | Disables the input field if set to true. | | errorMessage | String | '' | Error message displayed below the input. | | rules | Array | [] | Validation rules for the input field. | | size | String | 'medium' | Size of the input ('small', 'medium', 'large'). | | loading | Boolean | false | Displays a loading indicator when set to true. |

Events

| Event | Payload | Description | |----------------|----------------------|--------------------------------------------------| | update:modelValue | String | Emitted when the input value changes. | | change | Event | Emitted when the input loses focus or value changes. |

Customization

You can customize the appearance of the TextInput component by overriding its scoped styles or using Vuetify's built-in theming options.

<style scoped>
/* Example: Customizing the label font size */
.v-input__control {
  font-size: 16px;
}
</style>

InputMultiSelect Component

A multi-select component for selecting multiple items with ease, built using Vuetify 3.

Installation

Ensure you have Vuetify 3 installed in your project. If not, you can install it via npm:

npm install vuetify

Then, copy the InputMultiSelect component into your project.

Usage

Basic Example

<template>
  <InputMultiSelect 
    v-model="selectedItems" 
    :items="options" 
    label="Select options" 
    :rules="[rules.required]" 
    :loading="loading" 
    :disabled="false"
  />
</template>

<script>
import InputMultiSelect from './InputMultiSelect.vue';

export default {
  components: { InputMultiSelect },
  data() {
    return {
      selectedItems: [],
      loading: false,
      options: [
        { text: 'Option 1', value: 'option1' },
        { text: 'Option 2', value: 'option2' },
        { text: 'Option 3', value: 'option3' },
      ],
      rules: {
        required: v => (v && v.length > 0) || 'Please select at least one option',
      },
    };
  },
};
</script>

Props

| Prop | Type | Default | Description | |----------------|---------------------|---------------------|------------------------------------------------------------------| | modelValue | Array | [] | The bound value of the selected items. | | label | String | 'Select an option'| The label displayed above the select field. | | items | Array | [] | The list of items available for selection. | | itemTitle | String | 'text' | The property name for item titles in the items array. | | itemValue | String | 'value' | The property name for item values in the items array. | | rules | Array | [] | Validation rules for the select field. | | errorMessages| String | Array | '' | Error messages displayed below the select field. | | disabled | Boolean | false | Disables the select field if set to true. | | loading | Boolean | false | Displays a loading indicator when set to true. | | size | String | 'medium' | The size of the select field ('small', 'medium', 'large'). |

Events

| Event | Payload | Description | |--------------------|----------------------|--------------------------------------------------| | update:modelValue| Array | Emitted when the selected items change. | | change | Array | Emitted when the selection is updated. |

Customization

You can customize the styles of the InputMultiSelect component by overriding its scoped styles.

<style scoped>
.v-select {
  font-size: 1rem;
}

.v-select--small {
  font-size: 0.8rem;
}

.v-select--large {
  font-size: 1.2rem;
}
</style>

LazyLoading Component

A dynamic lazy-loading list component designed for optimal performance when displaying large datasets.

Installation

Add the LazyLoading component to your project.

Usage

Basic Example

<template>
  <LazyLoading 
    :itemsAll="items" 
    :fetchLimit="10" 
    :initialLoad="20"
  >
    <template #header="{ toggleSelectAll, selectAll }">
      <div>
        <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" />
        <label>Select All</label>
      </div>
    </template>

    <template #data="{ item }">
      <div>
        <input type="checkbox" v-model="selectedItems" :value="item.id" />
        <div>ID: {{ item.id }}</div>
        <div>Name: {{ item.name }}</div>
      </div>
    </template>
  </LazyLoading>
</template>

<script>
import LazyLoading from './LazyLoading.vue';

export default {
  components: { LazyLoading },
  data() {
    return {
      items: Array.from({ length: 100 }, (_, i) => ({
        id: i + 1,
        name: `Item ${i + 1}`,
        description: `Description for Item ${i + 1}`,
      })),
      selectedItems: [],
    };
  },
};
</script>

Props

| Prop | Type | Default | Description | |----------------|------------|------------------|------------------------------------------------------------------| | itemsAll | Array | [] | The full dataset to be lazy-loaded. | | fetchLimit | Number | 20 | Number of items to load on each scroll event. | | initialLoad | Number | 20 | Number of items to load initially. |

Methods

| Method | Description | |----------------|----------------------------------------------------| | loadMore | Loads the next batch of items into the visible list. | | onScroll | Triggers lazy loading when the scroll threshold is reached. | | toggleSelectAll | Toggles selection of all visible items. |

Slots

| Slot Name | Description | |----------------|--------------------------------------------------| | header | Slot for rendering a custom header, e.g., select all. | | data | Slot for rendering each item in the dataset. |

Styles

You can customize the styles of the LazyLoading component by overriding its scoped styles:

<style scoped>
.base-container {
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  background-color: #f9fafb;
  border: 1px solid #ddd;
  border-radius: 8px;
}
</style>