baran-component

v0.0.12

Published

a month ago

A Vue 3 component library with Vuetify

Downloads

0High
0Medium
0Low

torobaran

vue vuetify component library

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:

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

| Package Manager | Command | | --------------------------------------------------------- | ----------------------------- | | npm | npm install baran-component |

💡 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

| Prop | ------------- | color | disabled | variant | icon | prependIcon | appendIcon | density | size | block | rounded | elevation | ripple | loading | width | maxWidth | minWidth | height | maxHeight | minHeight | Type | Default | Description | | ------- | --------- | -------------------------------------------------------------------------- | | String | primary | The color of the button (e.g., primary, secondary). | | Boolean | false | Whether the button is disabled. | | String | '' | The variant of the button (outlined, tonal, text, plain). | | String | '' | The icon for a single icon button, using MDI icons. | | String | '' | The icon to prepend to the button text, using MDI icons. | | String | '' | The icon to append to the button text, using MDI icons. | | String | '' | The density of the button ('default', comfortable, compact). | | String | medium | The size of the button (x-small, small, medium, large, x-large). | | Boolean | false | Whether the button should take the full width of its container. | | String | 0 | The border radius of the button (e.g., 0, xs, sm, md, lg, xl). | | Number | 2 | The elevation (shadow) level of the button. | | Boolean | true | Whether the button has a ripple effect when clicked. | | Boolean | false | Whether the button shows a loading indicator. | | String | '' | The width of the button. | | String | '' | The maximum width of the button. | | String | '' | The minimum width of the button. | | String | '' | The height of the button. | | String | '' | The maximum height of the button. | | String | '' | The minimum height of the button. |

Slots

| Slot Name | Description | | --------- | -------------------------------- | | prepend | Slot for custom prepend content. | | `` | | | append | Slot for custom append content. | | loader | Slot for custom loader content. |

Events

| Event | Description | | -------- | ---------------------------------------- | | @click | Event emitted when the button is clicked |

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

| Prop | Type | Default | Description | | ------------------ | ------- | --------------- | ----------------------------------------------------------------------------------- | | text | String | '' | The main text content of the card. | | buttonText | String | Click | The text displayed on the button. | | buttonBackground | String | #7367f0 | The background color of the button. | | buttonColor | String | #fff | The text color of the button. | | showButton | Boolean | false | Whether to show the button. | | title | String | '' | The title of the card. | | target | String | '' | The target attribute for the link, if href is provided. | | subtitle | String | '' | The subtitle of the card. | | variant | String | '' | The variant of the card (outlined, tonal, elevated, flat, text, plain). | | loading | Boolean | false | Whether the card shows a loading state. | | hover | Boolean | false | Whether the card has a hover effect. | | href | String | '' | The link URL for the card. | | rounded | String | xs | The border radius of the card (e.g., xs, sm, md, lg, xl). | | elevation | Number | 1 | The elevation (shadow) level of the card. | | image | String | '' | The image URL for the card. | | color | String | '' | The color of the card. | | disabled | Boolean | false | Whether the card is disabled. | | prependIcon | String | '' | The icon to prepend to the card content. | | appendIcon | String | '' | The icon to append to the card content. | | density | String | 'comfortable' | The density of the card (comfortable, compact). | | width | String | '' | The width of the card. | | maxWidth | String | '' | The maximum width of the card. | | minWidth | String | '' | The minimum width of the card. | | height | String | '' | The height of the card. | | maxHeight | String | '' | The maximum height of the card. | | minHeight | String | '' | The minimum height of the card |

Slots

Events

| Event | Description | | -------- | ----------------------------------------- | | @click | Event emitted when the button is clicked. |

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

| Prop | Type | Default | Description | | ------------- | ------- | ----------- | --------------------------------------------------------------------- | | title | String | 'Chip' | The text content displayed within the chip. | | color | String | '#7367f0' | The background color of the chip. | | elevation | Number | 0 | Elevation level of the chip. | | size | String | 'default' | Size of the chip (small, default, large). | | variant | String | 'tonal' | Visual variant of the chip (outlined, elevated, text, plain). | | prependIcon | String | '' | Icon to prepend before the chip text. | | appendIcon | String | '' | Icon to append after the chip text. | | closable | Boolean | false | If true, displays a close icon for removing the chip. | | label | Boolean | false | If true, renders the chip as a label style. | | disabled | Boolean | false | If true, disables interactions with the chip. | | density | String | '' | Density of the chip (comfortable, compact). |

Slots

| Slot Name | Description | | --------- | -------------------------------- | | prepend | Slot for custom prepend content. | | append | Slot for custom append content. |

Events

| Event Name | Description | Payload | | ---------- | ----------------------------------- | ---------- | | click | Triggered when the chip is clicked. | MouseEvent |

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

| Prop | Type | Default | Description | | ---------------- | ------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------- | | bg-color | String | undefined | Restricted | | collapse-icon | Any | '$collapse' | Icon used when the expansion panel is in a collapsable state. | | color | String | undefined | Applies specified color to the control - supports utility colors or CSS color values. | | disabled | Boolean | false | Puts all children components into a disabled state. | | eager | Boolean | false | Forces the component’s content to render when it mounts - useful for SEO. | | elevation | String | Number | undefined | Designates an elevation applied to the component between 0 and 24. | | expand-icon | Any | '$expand' | Icon used when the expansion panel is in an expandable state. | | flat | Boolean | false | Removes the expansion-panel’s elevation and borders. | | focusable | Boolean | false | Makes the expansion-panel headers focusable. | | hide-actions | Boolean | false | Hide the expand icon in the content title. | | mandatory | Boolean | 'force' | false | Forces at least one item to always be selected (if available). | | max | Number | undefined | Sets a maximum number of selections that can be made. | | model-value | Any | undefined | The v-model value of the component - if component supports the multiple prop, this defaults to an array. | | multiple | Boolean | false | Allows one to select multiple items. | | readonly | Boolean | false | Makes the entire expansion-panel read only. | | ripple | Boolean | { class: string } | false | Applies the v-ripple directive. | | rounded | String | Number | Boolean | undefined | Designates the border-radius applied to the component - can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. | | selected-class | String | undefined | Configure the active CSS class applied when an item is selected. | | static | Boolean | false | Remove title size expansion when selected. | | tag | String | 'div' | Specify a custom tag used on the root element. | | theme | String | undefined | Specify a theme for this component and all of its children. | | tile | Boolean | false | Removes the border-radius. | | variant | 'default' | 'accordion' | 'inset' | 'popout' | 'default' | Applies a distinct style to the component. |

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

| Prop | Type | Default | Description | | ---------------- | ---------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------- | | bg-color | String | undefined | Applies specified color to the control’s background - supports utility colors or CSS color values. | | collapse-icon | Any | '$collapse' | Icon used when the expansion panel is in a collapsable state. | | color | String | undefined | Applies specified color to the control - supports utility colors or CSS color values. | | disabled | Boolean | false | Disables the expansion-panel content. | | eager | Boolean | false | Forces the component’s content to render when it mounts - useful for SEO. | | elevation | String | Number | undefined | Designates an elevation applied to the component between 0 and 24. | | expand-icon | Any | '$expand' | Icon used when the expansion panel is in an expandable state. | | focusable | Boolean | false | MISSING DESCRIPTION (edit in github). | | hide-actions | Boolean | false | Hide the expand icon in the content title. | | readonly | Boolean | false | Makes the expansion-panel content read only. | | ripple | Boolean | { class: string } | false | Applies the v-ripple directive. | | rounded | String | Number | Boolean | undefined | Designates the border-radius applied to the component - can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. | | selected-class | String | undefined | Configure the active CSS class applied when an item is selected. | | static | Boolean | false | Remove title size expansion when selected. | | tag | String | 'div' | Specify a custom tag used on the root element. | | text | String | undefined | Specify content text for the component. | | tile | Boolean | false | Removes any applied border-radius from the component. | | title | String | undefined | Specify a title text for the component. | | value | Any | undefined | Controls the opened/closed state of content. |

Slots

| Slot Name | Description | | --------- | --------------------- | | default | The default Vue slot. | | title | Slot for title. | | text | Slot for text. |

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

| Prop | Type | Default | Description | | ----------------- | ------- | ------------------ | ------------------------------------------------------------- | | title | String | 'Title' | Title of the dialog. | | text | String | 'Lorem ipsum...' | Text content displayed within the dialog. | | closeButtonText | String | 'Close' | Text for the close button inside the dialog. | | rounded | String | 'xs' | Rounded corner size of the dialog. | | buttonText | String | 'Open Modal' | Text displayed on the activator button triggering the dialog. | | buttonColor | String | '#7367f0' | Color of the activator button. | | buttonElevation | Number | 2 | Elevation level of the activator button. | | persistent | Boolean | false | Whether the dialog persists after being closed. | | transition | String | '' | Transition name for dialog animation. | | scrollable | Boolean | false | Whether the dialog content is scrollable. | | fullscreen | Boolean | false | Whether the dialog should occupy the full screen. | | width | String | '' | Width of the dialog. | | maxWidth | String | '' | Maximum width of the dialog. | | minWidth | String | '' | Minimum width of the dialog. | | height | String | '' | Height of the dialog. | | maxHeight | String | '' | Maximum height of the dialog. | | minHeight | String | '' | Minimum height of the dialog. | | buttonVariant | String | '' | Variant style of the activator button. | | buttonDisabled | Boolean | false | Whether the activator button is disabled. | | buttonDensity | String | 'comfortable' | Density of the activator button. | | buttonClass | String | '' | Custom CSS classes for the activator button. | | buttonSize | String | 'default' | Size of the activator button. | | buttonBlock | Boolean | false | Whether the activator button spans full width. | | buttonRounded | String | 'xs' | Rounded corner size of the activator button. | | buttonLoading | Boolean | false | Whether the activator button is in a loading state. | | buttonWidth | String | '' | Width of the activator button. | | buttonMaxWidth | String | '' | Maximum width of the activator button. | | buttonMinWidth | String | '' | Minimum width of the activator button. | | buttonHeight | String | '' | Height of the activator button. | | buttonMaxHeight | String | '' | Maximum height of the activator button. | | buttonMinHeight | String | '' | Minimum height of the activator button. |

Slots

| Slot Name | Description | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | | activator | Slot for replacing the default activator button. Provides props (activatorProps) to customize the activator button. | | default | Slot for customizing the content inside the dialog. Receives the isActive prop indicating whether the dialog is currently active. |

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

| Prop | Type | Default | Description | | ------------------ | ------------------------------------------------------------------------------ | --------------- | ----------------------------------------------------------------------------------------------------------------- | | activatable | Boolean | false | MISSING DESCRIPTION (edit in github). | | activated | Any | undefined | Array of ids of activated nodes. | | active-class | String | undefined | The class applied to the component when it is in an active state. | | active-color | String | undefined | The applied color when the component is in an active state. | | base-color | String | undefined | Sets the color of component when not focused. | | bg-color | String | undefined | Applies specified color to the control’s background - supports utility colors or CSS color values. | | border | String | Number | Boolean | false | Designates the border-radius applied to the component - can be xs, sm, md, lg, xl. | | collapse-icon | String | undefined | MISSING DESCRIPTION (edit in github). | | color | String | undefined | Applies specified color to the control - supports utility colors or CSS color values. | | density | 'default' | 'comfortable' | 'compact' | 'comfortable' | Adjusts the vertical height used by the component. | | disabled | Boolean | false | Puts all children inputs into a disabled state. | | elevation | String | Number | undefined | Designates an elevation applied to the component between 0 and 24. | | expand-icon | String | undefined | MISSING DESCRIPTION (edit in github). | | height | String | Number | undefined | Sets the height for the component. | | item-children | SelectItemKey<any> | 'children' | Property on supplied items that contains its children. | | item-props | SelectItemKey<any> | 'props' | Props object that will be applied to each item component. | | items | Any[] | [] | Can be an array of objects or strings. | | item-title | SelectItemKey<any> | 'title' | Property on supplied items that contains its title. | | item-type | String | 'type' | Designates the key on the supplied items that is used for determining the nodes type. | | item-value | SelectItemKey<any> | 'value' | Property on supplied items that contains its value. | | lines | Boolean | 'one' | 'two' | 'three' | 'one' | Designates a minimum-height for all children v-list-item components. | | mandatory | Boolean | false | Forces at least one item to always be selected (if available). | | max-height | String | Number | undefined | Sets the maximum height for the component. | | max-width | String | Number | undefined | Sets the maximum width for the component. | | min-height | String | Number | undefined | Sets the minimum height for the component. | | min-width | String | Number | undefined | Sets the minimum width for the component. | | nav | Boolean | false | An alternative styling that reduces v-list-item width and rounds the corners. | | opened | Unknown | undefined | An array containing the values of currently opened groups. | | open-strategy | 'single' | 'multiple' | 'list' | OpenStrategy | 'list' | Affects how items with children behave when expanded. | | return-object | Boolean | false | Changes the selection behavior to return the object directly rather than the value specified with item-value. | | rounded | String | Number | Boolean | undefined | Designates the border-radius applied to the component - can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. | | selectable | Boolean | false | MISSING DESCRIPTION (edit in github). | | selected | Unknown | undefined | An array containing the values of currently selected items. | | slim | Boolean | false | Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items. | | tag | String | 'div' | Specify a custom tag used on the root element. | | theme | String | undefined | Specify a theme for this component and all of its children. | | tile | Boolean | false | Removes any applied border-radius from the component. | | value-comparator | (a: any, b: any) => Boolean | undefined | Apply a custom comparison algorithm to compare model-value and values contains in the items prop. | | variant | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'text' | 'plain' | 'text' | Applies a distinct style to the component. | | width | String | Number | undefined | Sets the width for the component. |

Slots

| Slot Name | Description | | --------- | --------------------- | | default | The default Vue slot. |

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

| Slot Name | Description | | ---------- | -------------------------------------- | | `` | The default Vue slot. | | prepend | Slot for customizing the prepend icon. | | append | Slot for customizing the append icon. | | title | Slot for customizing the title. | | subtitle | Slot for customizing the subtitle. |

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

| Prop | Type | Default | Description | | ----------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | items | Array | [{ id: 1, tabText: "1st Tab", tabContent: "Content for 1st Tab" }, { id: 2, tabText: "2nd Tab", tabContent: "Content for 2nd Tab", icon: "$vuetify" }] | Array of tab items, each containing an id, tabText, tabContent, and optionally an icon. | | bgColor | String | #7367f0 | Background color for the tab component. | | alignTabs | String | start | Alignment of the tabs (start, center, end). | | rounded | String | xs | Border radius for the tab component (xs, sm, md, lg, xl). | | elevation | Number | 2 | Elevation for the tab component (range from 0 to 24). | | density | String | comfortable | Density of the tabs (comfortable, compact). | | disabled | Boolean | false | Whether the tabs are disabled. | | width | String | undefined | The width of the tabs wrapper. | | maxWidth | String | undefined | The maximum width of the tabs wrapper. | | minWidth | String | undefined | The minimum width of the tabs wrapper. | | height | String | undefined | The height of the tabs wrapper. | | maxHeight | String | undefined | The maximum height of the tabs wrapper. | | minHeight | String | undefined | The minimum height of the tabs wrapper. |

Slots

| Slot Name | Description | | ----------------- | --------------------------------------------------------------------------------------------------- | | tab-{id} | Slot for customizing the tab with the specific id. Receives item as a scoped slot prop. | | tabContent-{id} | Slot for customizing the tab content with the specific id. Receives item as a scoped slot prop. |

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

| Prop | Type | Default | Description | | ---------- | ------ | ---------------------- | ------------------------------------------------------------------------ | | items | Array | See Example | An array of objects, each representing an item in the speed dial menu. | | position | Array | ['bottom', 'center'] | The position of the speed dial menu (horizontal and vertical alignment). | | icon | String | 'mdi-translate' | The icon for the speed dial activator button. | | color | String | '#7367f0' | The color of the speed dial activator button. | | variant | String | 'tonal' | The variant style of the activator button. | | density | String | 'comfortable' | The density of the activator button. |

Slots

| Slot Name | Description | | ----------- | ------------------------------------------ | | activator | Slot for customizing the activator button. |

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

| Prop | Type | Default | Description | | --------------------- | ---------------- | ------------------ | ----------------------------------------------------------------------------- | | label | String | 'Text' | The label of the text field. | | value | [String, Number] | '' | The value of the text field. | | variant | String | 'outlined' | The variant of the text field (e.g., outlined, underlined, solo, etc.). | | density | String | 'compact' | The density of the text field (e.g., comfortable, compact). | | prependIcon | String | '' | The icon to prepend to the text field. | | appendIcon | String | '' | The icon to append to the text field. | | appendInnerIcon | String | '' | The inner icon to append to the text field. | | clearable | Boolean | false | Whether the text field is clearable. | | type | String | 'text' | The type of the input (e.g., text, password, email). | | placeholder | String | 'Type something' | The placeholder text. | | hint | String | '' | Hint text to display. | | persistentHint | Boolean | false | Whether the hint text should always be visible. | | disabled | Boolean | false | Whether the text field is disabled. | | readonly | Boolean | false | Whether the text field is read-only. | | rules | Array | [] | Array of validation rules. | | prefix | String | '' | Prefix text to display inside the text field. | | suffix | String | '' | Suffix text to display inside the text field. | | maxlength | [String, Number] | '' | Maximum length of the input. | | counter | Boolean | false | Whether to display the character counter. | | singleLine | Boolean | false | Whether the text field is single-line. | | money | Object | {} | Input mask rules. | | moneyCurrency | String | '' | Pre-defined input mask rules for money currencies. EUR, TRY, USD, GBP | | customMoneyCurrency | Boolean | false | Whether the use pre-defined input mask or custom input mask. |

Slots

| Slot Name | Description | | --------------- | ----------------------------------------------------------------------------------------------- | | prepend-inner | Slot for customizing the inner prepend-inner icon. | | prepend | Slot for customizing the prepend icon. | | append | Slot for customizing the appended icon. | | append-inner | Slot for customizing the inner appended-inner icon. | | details | Slot for customizing the details. Used for displaying messages, hint, error-messages, and more. | | label | Slot for customizing the label. |

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

| Prop | Type | Default | Description | | ---------------- | ------- | -------------------------------- | ------------------------------------------------------------------------------------------------- | | items | Array | ['Item 1', 'Item 2', 'Item 3'] | Array of items to display in the combobox. | | label | String | 'Select' | Label displayed above the combobox. | | placeholder | String | 'Select an item' | Placeholder t

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Baran Component Library

Introduction

❗️ Important Links

💿 Install

💡 Usage

Button Component

Props

Slots

Events

Example Usage

Card Component

Props

Slots

Events

Example Usage

Chip Component

Props

Slots

Events

Example Usage

Expansion Panels Component

Props

Example Usage

Expansion Panel Component

Props

Slots

Example Usage

Dialog Component

Props

Slots

Example Usage

List Component

Props

Slots

Example Usage

List Item Component

Props

Slots

Example Usage

Tabs Component

Props

Slots

Example Usage

Speed Dial Component

Props

Slots

Events

Example Usage

Textbox Component

Props

Slots

Example Usage

Combobox Component

Props