baran-component v0.0.12

Baran Component Library

A Vue 3 component library built with Vite and Vuetify.

Introduction

Baran Component is a collection of reusable Vue 3 components, styled with Vuetify, and optimized for performance using Vite. This library aims to provide a set of commonly used components to speed up the development process of your Vue.js applications.

❗️ Important Links

• 📄 Docs

💿 Install

Before you can use this project, make sure you have the following prerequisites installed:

• Vue.js
• Vuetify

Set up your project using NPM. Use the corresponding command to install the dependencies:

💡 Usage

After successfully installing dependencies, register component globally.

import vuetify from './vuetify' import BaranComponent from 'baran-component'
import 'baran-component/dist/style.css'

export function registerPlugins (app) {
	app.use(vuetify) app.use(BaranComponent)
}

Button Component

The BaranButton component is a customizable button with various props and events. Extended from Vuetify.

Props

Slots

Events

Example Usage

<template>
	<BaranButton @click="onClick" elevation="4" color="#1814F3" class="mt-1" :disabled="!terms"> Add Card </BaranButton>
</template>

<script setup>
import { ref } from 'vue'
const terms = ref(false)
function onClick() {
    alert('Button clicked!');
},
</script>

Card Component

The BaranCard component is a versatile card component with a customizable button. It is built using Vuetify's card and button components and offers various customization options for appearance and behavior.

Props

Slots

Events

Example Usage

<template>
	<BaranCard
		title="Card Title"
		subtitle="Card Subtitle"
		text="This is some example text content for the card."
		:show-button="true"
		button-text="Learn More"
		button-background="#ff5722"
		button-color="#ffffff"
		:hover="true"
		:elevation="4"
		href="https://example.com"
		target="_blank"
		class="my-custom-class"
		:rounded="'md'"
	>
		<template #prepend>
			<BaranAvatar size="56">
				<img src="https://example.com/avatar.jpg" alt="Avatar" />
			</BaranAvatar>
		</template>
		<template #append>
			<v-icon>mdi-heart</v-icon>
		</template>
	</BaranCard>
</template>

<script setup></script>

Chip Component

The BaranChips component represents a small interactive element used to represent information such as tags, categories, or actions.

Props

Slots

Events

Example Usage

<template>
	<BaranChips title="Example Chip" color="#ff9800" elevation="2" size="default" variant="outlined" prependIcon="mdi-check" appendIcon="mdi-close" closable label disabled class="custom-chip" density="compact" @click="handleChipClick">
		<template #prepend>
			<v-icon>mdi-tag</v-icon>
		</template>
	</BaranChips>
</template>

<script setup>
import Chip from "baran-component/Chip.vue";

const handleChipClick = (event) => {
	console.log("Chip clicked!", event);
};
</script>

<style>
.custom-chip {
	font-size: 14px;
}
</style>

Expansion Panels Component

The BaranExpansionPanels component allows for displaying collapsible panels with customizable options.

Props

Example Usage

<template>
	<BaranExpansionPanels variant="accordion" rounded="md" :elevation="3">
		<BaranExpansionPanel>
			<template v-slot:title> Title Slot </template>
			<template v-slot:text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </template>
		</BaranExpansionPanel>
		<BaranExpansionPanel title="Title" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">
		</BaranExpansionPanel>
	</BaranExpansionPanels>
</template>

<script setup></script>

<style></style>

Expansion Panel Component

The BaranExpansionPanel is sub-component used to display a single expansion panel item.

Props

Slots

Example Usage

<template>
	<BaranExpansionPanels variant="accordion" rounded="md" :elevation="3">
		<BaranExpansionPanel>
			<template v-slot:title> Title Slot </template>
			<template v-slot:text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </template>
		</BaranExpansionPanel>
		<BaranExpansionPanel title="Title" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">
		</BaranExpansionPanel>
	</BaranExpansionPanels>
</template>

<script setup></script>

<style></style>

Dialog Component

The BaranDialog component provides a dialog with an activator slot for flexibility in triggering the dialog.

Props

Slots

Example Usage

<template>
	<BaranDialog width="auto" scrollable :title="dialogTitle" :text="dialogText">
		<template v-slot:activator="{ props: activatorProps }">
			<BaranButton color="brown" prepend-icon="mdi-earth" text="Custom Modal Activator" variant="outlined" v-bind="activatorProps"></BaranButton>
		</template>
	</BaranDialog>
</template>

<script setup>
const dialogTitle = "Example Dialog";
const dialogText = "This is an example of a dialog component with custom slots and props.";
</script>

List Component

The BaranList component renders a list of items with optional sub-groups, allowing customization of each list item.

Props

Slots

Example Usage

<template>
	<BaranList :items="items"></BaranList>
</template>

<script setup>
const items = [
	{ type: "subheader", title: "Group #1" },
	{
		title: "Item #1",
		value: 1,
	},
	{
		title: "Item #2",
		value: 2,
	},
	{
		title: "Item #3",
		value: 3,
	},
	{ type: "divider" },
	{ type: "subheader", title: "Group #2" },
	{
		title: "Item #4",
		value: 4,
	},
	{
		title: "Item #5",
		value: 5,
	},
	{
		title: "Item #6",
		value: 6,
	},
];
</script>

List Item Component

The BaranListItem is sub-component used to display a single list item.

Props

Slots

Example Usage

<template>
	<BaranList>
		<BaranListItem v-for="(item, i) in items" :key="i" :value="item" color="primary" rounded="xl">
			<template v-slot:prepend>
				<v-icon :icon="item.icon"></v-icon>
			</template>
			<template v-slot:title>
				{{ item.text }}
			</template>
			<template v-slot:subtitle>
				{{ item.text }}
			</template>
		</BaranListItem>
	</BaranList>
</template>

<script setup>
const items = [
	{ text: "Real-Time", icon: "mdi-clock" },
	{ text: "Audience", icon: "mdi-account" },
	{ text: "Conversions", icon: "mdi-flag" },
];
</script>

Tabs Component

The BaranTabs component is a customizable tab component with support for icons, dynamic tab content, and various styling options. It allows for flexible props, slots, and a simple API to manage the tabs.

Props

Slots

Example Usage

<template>
	<BaranTabs :items="tabs" bgColor="#4caf50" alignTabs="center" rounded="md" elevation="4" density="compact">
		<template #tab-1="{ item }">
			<span>Custom Tab Content for {{ item.tabText }}</span>
		</template>
		<template #tabContent-1="{ item }">
			<div>Custom Content for {{ item.tabContent }}</div>
		</template>
	</BaranTabs>
</template>

<script setup>
import { ref } from "vue";

const tabs = ref([
	{ id: 1, tabText: "1st Tab", tabContent: "Content for 1st Tab" },
	{ id: 2, tabText: "2nd Tab", tabContent: "Content for 2nd Tab", icon: "$vuetify" },
]);
</script>

Speed Dial Component

The BaranSpeedDial component provides a customizable speed dial menu with various items. Extended from Vuetify.

Props

Slots

Events

The BaranSpeedDial component emits a 'click' event when any item in the speed dial menu is clicked. The clicked item object is passed as the event payload.

Example Usage

<template>
	<BaranSpeedDial :items="speedDialItems" :position="['bottom', 'center']" icon="mdi-plus" color="#42b983" @click="handleSpeedDialClick">
		<template v-slot:activator="{ props }">
			<!-- Custom activator button -->
			<v-btn v-bind="{ ...props, color: 'secondary', dark: true }"> Custom Activator </v-btn>
		</template>
	</BaranSpeedDial>
</template>

<script setup>
import { ref } from "vue";
import BaranSpeedDial from "./components/BaranSpeedDial.vue";

const speedDialItems = ref([
	{
		icon: "mdi-pencil",
		variant: "tonal",
		color: "#7367f0",
		onClick: () => console.log("Edit clicked"),
	},
	{
		icon: "mdi-delete",
		variant: "tonal",
		color: "#f04e54",
		onClick: () => console.log("Delete clicked"),
	},
]);

const handleSpeedDialClick = (item) => {
	console.log("Clicked item:", item);
};
</script>

Textbox Component

The BaranTextbox component is a customizable text field component with various props, computed properties, and reactive data bindings. This component leverages Vuetify's v-text-field and offers additional flexibility through props and slots.

Props

Slots

Example Usage

<template>
	<BaranTextbox v-model="inputValue" label="Enter your name" variant="underlined" prependIcon="mdi-account" appendIcon="mdi-check" appendInnerIcon="mdi-information" clearable :rules="[(v) => !!v || 'Name is required']" hint="Enter your full name" persistentHint counter maxlength="50">
		<template #prepend-inner>
			<v-icon>mdi-account</v-icon>
		</template>
		<template #append>
			<v-icon>mdi-check</v-icon>
		</template>
		<template #append-inner>
			<v-icon>mdi-information</v-icon>
		</template>
	</BaranTextbox>

	<!-- Pre-defined input mask -->
	<BaranTextbox moneyCurrency="EUR"></BaranTextbox>

	<!-- Custom input mask -->
	<BaranTextbox :money="jpyMask" :customMoneyCurrency="true"></BaranTextbox>
</template>

<script setup>
import { ref } from "vue";

const inputValue = ref("");

const jpyMask = ref({
	decimal: "",
	thousands: ",",
	prefix: "¥ ",
	suffix: " ",
	precision: 0,
	masked: false,
});
</script>

Combobox Component

The BaranCombobox component provides a customizable combobox interface for selecting items with various configurations.

Props