1.0.1 • Published 12 months ago

custom-vue3-select v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

custom vue3 select component

installation:

npm i custom-vue3-select
or
yarn add custom-vue3-select
import customSelect from "custom-vue3-select";

import "custom-vue3-select/dist/style.css";

import createApp from "vue";

const app = createApp();

app.use("customSelect");

app.mount("#app");

use it:

<custom-select
  :items="[
    { id: 1, name: 'test' },
    { id: 2, name: 'test2' },
    { id: 3, name: 'test3' }
  ]"
  v-model="selected"
  multiple
  label="يرجى الاختيار"
  no-data-text="لا توجد بيانات"
  select-all-text="تحديد الكل"
  :onChange="handleSelect"
/>

component props:

Prop NameTypeDefault ValueRequiredDescription
itemsArray[]YesAn array of objects representing the selectable items.
labelString"Select an item"NoThe label displayed at the top of the dropdown.
selectAllTextString"Select all"NoThe text displayed for the "Select All" option.
noDataTextString"No data found"NoThe text displayed when there are no items in the items array.
multipleBooleanundefinedNoEnables multiple item selection.
selectAllBooleanundefinedNoEnables the "Select All" option.
modelValueString, Number, ObjectnullNoThe currently selected value(s).
returnObjectBooleanTRUENoDetermines whether the selected value is returned as an object.
darkBgString"#1a1a1a"NoThe background color for dark mode.
darkBgSecondaryString"#2a2a2a"NoThe secondary background color for dark mode.
darkBgTertiaryString"#3a3a3a"NoThe tertiary background color for dark mode.
darkTextString"#f0f0f0"NoThe text color for dark mode.
lightBgString"#fff"NoThe background color for light mode.
lightBgSecondaryString"#ececec"NoThe secondary background color for light mode.
lightBgTertiaryString"#e9e9e9"NoThe tertiary background color for light mode.
lightTextString"#1a1a1a"NoThe text color for light mode.
onChangeFunction() => {}NoA callback function triggered when the selected value changes.
1.0.1

12 months ago

1.0.0

12 months ago