Vue reusable components
| Vue reusable components are there where you can import the component and pass the props for customization..
$ git clone https://github.com/linkon63/vue-reusable-components/tree/main
$ npm install
$ npm run dev
📑 note : there is reusable-component-playground file, where you can check the components and test and also explore every components 🌀.
Pre-requisites
Install Tailwind for use this library
Link : https://tailwindcss.com/docs/installation
## OR Include CDN in index.html file in your projects
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
## then install vue-reusable-components
$ npm i vue-reusable-components
1 BaseInput
it is for all the "text" | "number" | "phone" | "email" | "tel" | "search"
// component import
<BaseInput />
/* props you can pass in <BaseInput />
type,
placeholder,
labelClass,
disable,
required,
size,
maxLength,
maxLength,
regExpForInput,
validationMessage,
validationMessageStyle,
validationMessage,
validationStatus,
autoFocus,
title
*/
<BaseInput>
<template #suffix>
<button>
X
</button>
</template>
</BaseInput>📑 note : You can pass slots #prefix and #suffix
demo
2️ BaseCheckbox
// component import
<BaseCheckbox />
/* props you can pass in <BaseInput />
label?: string;
labelClass?: string;
class?: string;
checked?: boolean;
name?: string;
disabled?: boolean;
readonly?: boolean;
required?: boolean;
*/
// Example :
<BaseCheckbox
@on-change="(e:Event) => {
let value : HTMLInputElement = e.target as HTMLInputElement
if (value) {
console.log(value.value)
}
}"
/>📑 note : You can pass slots #inside but When you pass #inside slot then in class props given hidden class="hidden"
demo
3️ BaseTextArea
// component import
<BaseTextArea />
/* props you can pass in <BaseTextArea />
label?: string;
labelClass?: string;
class?: string;
name?: string;
disabled?: boolean;
readonly?: boolean;
required?: boolean;
rows?: string;
cols?: string;
placeholder?: string;
minlength?: string;
maxlength?: string;
autoResize?: boolean;
*/
// example
<BaseTextArea
v-model="message"
placeholder="Write you message"
label="Your Message"
@on-change="(e) => console.log('changes', e.target.value)"
:autoResize="false"
/>demo
4️ BaseSelectInput
// component import
<BaseSelectInput />
/* props you can pass in <BaseSelectInput />
interface IOption {
id?: number | string;
name?: string;
value?: string | number;
}
interface Props {
label?: string;
labelClass?: string;
class?: string;
optionClass: string;
name?: string;
disabled?: boolean;
required?: boolean;
optionLabel?: string;
options?: IOption[] | null;
hideDefaultChooseOption: boolean;
}
*/
// example
<BaseSelectInput
v-model="message"
:options="options"
option-class="bg-red-500"
:hide-default-choose-option="true"
optionLabel="Your status"
/>demo
5️ BaseDropDown
// component import
<BaseDropDown />
/* props you can pass in <BaseDropDown />
interface Props {
label?: string;
labelClass?: string;
class?: string;
dropdownClass?: string;
}
*/
// example
<BaseDropDown
label="Multi Select Drop Down"
labelClass="bg-green-400 hover:bg-green-500"
class="bg-gray-200"
dropdown-class="p-0"
>
<template #rightIcon>
<svg
class="w-2.5 h-2.5 ms-3"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 10 6"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 1 4 4 4-4"
/>
</svg>
</template>
<template #dropdownItems>
<div class="ps-4">
<BaseCheckbox label="React" />
<BaseCheckbox label="Vue" />
<BaseCheckbox label="Laravel" />
</div>
</template>
</BaseDropDown>demo
6️ BaseRadio
// component import
<BaseRadio />
/* props you can pass in <BaseRadio />
interface Props {
label?: string;
labelClass?: string;
class?: string;
checked?: boolean;
name?: string;
disabled?: boolean;
value?: string | number | boolean;
}
*/
// example
<BaseRadio
label="Yes"
v-model="radio"
value="yes"
label-class="bg-green-500 text-white px-6 w-[10%]"
/>
<BaseRadio
label="No"
v-model="radio"
value="no"
label-class="bg-red-500 text-white px-6 w-[10%]"
/>demo
7️ BaseButton
// component import
<BaseButton />
/* props you can pass in <BaseButton />
interface Props {
class?: string;
loadingClass?: string;
name?: string;
disabled?: boolean;
loading?: boolean;
}
*/
// example
<BaseButton
name="Paypal Payment"
class="text-white bg-[#050708] hover:bg-[#050708]/80 focus:ring-4 focus:outline-none focus:ring-[#050708]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:hover:bg-[#050708]/40 dark:focus:ring-gray-600 me-2 mb-2"
@on-click="console.log('log')"
:disabled="false"
>
<template #prefix>
<svg
class="w-5 h-5 me-2 -ms-1"
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="apple"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"
>
<path
fill="currentColor"
d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
></path>
</svg>
</template>
</BaseButton>📑 note :You can pass slots #prefix and #customPrefix and #customSuffix also #suffix
demo
8️ Base Modal
// component import
<BaseModal />
/* props you can pass in <BaseButton />
interface Props {
notEscapable?: boolean;
persistent?: boolean;
size?: ModalSize;
}
*/
// example
<template>
<button @click="modal = true">Modal Open</button>
<BaseModal v-if="modal" :persistent="false" @close="() => (modal = false)" size="sm">
<template #header>
<div class="">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
Terms of Service
</h3>
</div>
</template>
<template #footer>
<div
class="flex items-center p-4 md:p-5 border-gray-200 rounded-b dark:border-gray-600"
>
<button
data-modal-hide="default-modal"
type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
I accept
</button>
<button
data-modal-hide="default-modal"
type="button"
class="ms-3 text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
>
Decline
</button>
</div>
</template>
</BaseModal>
</template>
<script>
const modal = ref(false);
</script>📑 note :You can pass slots #header and #body and #footer
demo
9️ Base Toggle
// component import
<BaseToggle />
/* props you can pass in <BaseToggle />
interface Props {
disabled?: boolean;
checked?: boolean;
label?: string;
labelClasses?: string;
toggleClasses?: string;
toggleBallClasses?: string;
modelValue?: boolean;
size?: string;
name?: string;
required?: boolean;
}
*/
// example
<BaseToggle
label="Hello Toggle"
toggle-classes="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-600"
toggle-ball-classes="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300"
/>
<BaseToggle
label="Sound"
toggle-classes="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-600"
toggle-ball-classes="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300"
>
<template #labelPrefix>📢</template>
</BaseToggle>
</div>demo
10 Base Chips
// component import
<BaseChips />
/* props you can pass in <BaseChips />
interface Props {
label?: string;
labelClass?: string;
class?: string;
removeButton?: boolean;
removeButtonClass?: string;
visibility?: boolean;
}
*/
// example
<BaseChips />
<BaseChips label="Stop" :remove-button="true" label-class="bg-green-900 text-red-500">
<template #prefix>
⛔
</template>
</BaseChips>
<BaseChips label="Pin" :remove-button="true">
<template #prefix>
📌
</template>
</BaseChips>📑 note :You can pass slots #prefix and #suffix
demo
11 Base Accordion
// component import
<BaseAccordion />
/* props you can pass in <BaseAccordion />
interface Props {
alwaysOpen?: boolean;
accordionPanelClass?: string;
accordionLabel?: string;
accordionContentClass?: string;
visiblePanelIcon?: boolean;
}
*/
// example
<BaseAccordion
accordion-panel-class="bg-red-500 text-white w-3/12"
accordion-content-class="w-3/12 bg-green-600"
:always-open="true"
>
<template #panelPrefix>❕</template>
<template #panelSuffix>🚭</template>
<template #accordion-content>
<p class="mb-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, soluta!
</p>
<p class="">
Lorem ipsum dolor sit amet.
<a
href="/docs/getting-started/introduction/"
class="text-blue-600 dark:text-blue-500 hover:underline"
>Start Your Things</a
>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam,
laborum qui! Beatae rerum cum optio asperiores, similique natus
sapiente odit!
</p>
</template>
</BaseAccordion>📑 note :You can pass slots #panelPrefix and #panelSuffix , #panelIcon ,#accordionContent
demo
11 Base Tab View
// component import
<BaseTabView />
/* props you can pass in <BaseTabView />
interface Props {
tabItems: TabItemType[];
tabListClass?: string;
tabContentClass?: string;
tabHeaderClass?: string;
}
*/
/*
export interface TabItemType {
id: string | number;
tabName?: string;
tabContent?: string;
tabClass?: string;
tabSelectedClass?: string;
prefixIcon?: string;
suffixIcon?: string;
prefixIconClass?: string;
suffixIconClass?: string;
}
*/
// example
<template class="w-full">
<div class="p-12">
<BaseTabView
:tab-items="tabItems"
tab-list-class="bg-red-400 w-4/12"
tab-content-class="bg-green-400 w-4/12"
tab-header-class="border-t-2 border-teal-700"
/>
</div>
</template>
<script setup lang="ts">
import BaseTabView from "./components/reusable-components/BaseTabView/BaseTabView.vue";
import type { TabItemType } from "./components/reusable-components/BaseTabView/types";
const tabItems: TabItemType[] = [
{
id: 1,
tabName: "Home",
tabContent: "lorem ipsum dolor sit Home",
tabClass: "bg-red-400 text-white",
tabSelectedClass: "bg-blue-400 text-white",
prefixIcon: "fab fa-js",
},
{
id: 2,
tabName: "About",
tabContent: "lorem ipsum dolor sit About",
tabSelectedClass: "bg-green-400 text-white",
prefixIcon: "fab fa-vuejs",
},
{ id: 3, tabName: "Profile", tabContent: "lorem ipsum dolor sit Profile" },
{
id: 4,
tabName: "Dashboard",
tabContent: "lorem ipsum dolor sit Dashboard",
},
];
</script>📑 note : index.html file import the cdn of front awesome
Example Below :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<!-- This line you have to add Start -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous"
/>
<!-- This line you have to add End -->
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<script src="./node_modules/flowbite/dist/flowbite.min.js"></script>
</html>demo
