ersen-inci
v0.1.11
Published
A Vue 3 component library built with Vite and Vuetify.
Readme
Sutor Bank Component Library
A Vue 3 component library built with Vite and Vuetify.
Introduction
Sutor Bank 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 sutorbank-component |
💡 Usage
After successfully installing dependencies, register component globally.
import vuetify from './vuetify' import router from '@/router' import sutorbankComponent from 'sutorbank-component' import 'sutorbank-component/dist/style.css'
export function registerPlugins (app) { app .use(vuetify) .use(sutorbankComponent) .use(router) }
Button Component
The sb-button component is a customizable button with various props and events. Extended from Vuetify.
Props
| Prop | Type | Default | Description |
| ------------- | ------- | --------- | -------------------------------------------------------------------------- |
| color | String | primary | The color of the button (e.g., primary, secondary). |
| disabled | Boolean | false | Whether the button is disabled. |
| variant | String | '' | The variant of the button (outlined, tonal, text, plain). |
| icon | String | '' | The icon for a single icon button, using MDI icons. |
| prependIcon | String | '' | The icon to prepend to the button text, using MDI icons. |
| appendIcon | String | '' | The icon to append to the button text, using MDI icons. |
| density | String | '' | The density of the button ('default', comfortable, compact). |
| size | String | medium | The size of the button (x-small, small, medium, large, x-large). |
| block | Boolean | false | Whether the button should take the full width of its container. |
| rounded | String | 0 | The border radius of the button (e.g., 0, xs, sm, md, lg, xl). |
| elevation | Number | 2 | The elevation (shadow) level of the button. |
| ripple | Boolean | true | Whether the button has a ripple effect when clicked. |
| loading | Boolean | false | Whether the button shows a loading indicator. |
| width | String | '' | The width of the button. |
| maxWidth | String | '' | The maximum width of the button. |
| minWidth | String | '' | The minimum width of the button. |
| height | String | '' | The height of the button. |
| maxHeight | String | '' | The maximum height of the button. |
| minHeight | 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>
<div>
<sb-button
label="Weiter"
class="next"
variant="elevated"
rounded="md"
:elevation="4"
density="comfortable"
@click="onButtonClick"
/>
<sb-button
class="custom"
label="Custom Button"
:variant="'elevated'"
:elevation="2"
:density="'default'"
v-slot:prepend
color="red"
>
<sb-icon left class="icon-with-margin">mdi-star</sb-icon>
</sb-button>
</div>
</template>
<script setup lang="ts">
import sb-button from "./components/sb-button.vue";
const onButtonClick = (event: MouseEvent) => {
console.log("Button clicked!", event);
};
</script>
<template>
<div>
<sb-button
class="confirm"
label="Bestätigen"
variant="outlined"
rounded="lg"
:elevation="2"
density="default"
@click="onConfirm"
>
<!-- Prepend Slot -->
<template #prepend>
<sb-icon>mdi-check-circle</sb-icon>
</template>
<!-- Append Slot -->
<template #append>
<sb-icon>mdi-arrow-right</sb-icon>
</template>
</sb-button>
</div>
</template>
<script setup lang="ts">
import sb-button from "./components/sb-button.vue";
const onConfirm = (event: MouseEvent) => {
console.log("Confirm button clicked!", event);
};
</script>Button Group Component
The sb-button-group component is a customizable button group that provides structured navigation and action controls. It includes multiple configurable buttons such as Next, Previous, Confirm, Cancel, and Save.
Props
| Prop | Type | Default | Description |
| ---------------- | ------- | ------- | -------------------------------------- |
| next | Boolean | false | Whether to show the "Next" button. |
| previous | Boolean | false | Whether to show the "Previous" button. |
| confirm | Boolean | false | Whether to show the "Confirm" button. |
| cancel | Boolean | false | Whether to show the "Cancel" button. |
| save | Boolean | false | Whether to show the "Save" button. |
| custom-buttons | Boolean | false | Whether to show the "Custom" button. |
Slots
| Slot Name | Description |
| --------- | ----------------------------------------- |
| default | Slot for adding custom buttons if needed. |
Events
| Event | Description |
| --------------- | ----------------------------------------------------------------------------- |
| @button-click | Event emitted when a button is clicked, passing the button type as a payload. |
Computed Styling
The component automatically adjusts the border-radius of buttons to enhance the UI:
- The first visible button gets rounded left corners (
borderTopLeftRadius,borderBottomLeftRadius). - The last visible button gets rounded right corners (
borderTopRightRadius,borderBottomRightRadius).
Example Usage
<template>
<sb-button-group
next
previous
confirm
save
:custom-buttons="[
{ label: 'Custom1', icon: 'mdi-star', color: 'red' },
{ label: 'Custom2', icon: 'mdi-heart', color: 'yellow' },
]"
@button-click="handleButtonClick"
/>
</template>
<script lang="ts" setup>
const handleButtonClick = (type: string) => {
switch (type) {
case "next":
console.log("Next button clicked");
break;
case "previous":
console.log("Previous button clicked");
break;
case "confirm":
console.log("Confirm button clicked");
break;
case "cancel":
console.log("Cancel button clicked");
break;
case "save":
console.log("Save button clicked");
break;
case "Custom1":
console.log("Custom1 button clicked");
break;
case "Custom2":
console.log("Custom2 button clicked");
break;
}
};
</script>Aktion Component
The sb-aktion component is an advanced floating action button (FAB) menu. It provides a structured way to present multiple actions in a floating button format.
Props
| Prop | Type | Default | Description |
| ------------ | ------- | -------------------- | ------------------------------------------------------------------------- |
| hover | Boolean | true | Enables or disables the hover effect. |
| location | String | 'bottom' | Defines the position of the action (top, bottom, left, or right). |
| transition | String | 'scale-transition' | Defines the transition effect when opening the action menu. |
| color | String | '#870064' | The background color of the floating action button. |
| tooltips | Array | (See Default Below) | List of action items with key, text, color, and icon. |
Default tooltips Array
ts tooltips: [ { key: 1, text: 'Edit', color: 'green', icon: 'mdi-pencil' }, { key: 2, text: 'Add', color: 'blue', icon: 'mdi-plus' }, { key: 3, text: 'Delete', color: 'yellow', icon: 'mdi-delete' }, { key: 4, text: 'Star', color: 'red', icon: 'mdi-star' }, { key: 5, text: 'Office', color: 'light-blue', icon: 'mdi-run' }, ];
Slots
| Slot Name | Description |
| --------- | ----------------------------------------- |
| default | Slot for adding custom buttons if needed. |
Events
| Event | Description |
| --------------- | -------------------------------------------------------------------------- |
| @button-click | Emitted when a button is clicked, passing the tooltip object as a payload. |
Example Usage
<template>
<sb-aktion
direction="right"
:tooltips="tooltips"
:hover="true"
@button-click="handleButtonClick"
/>
</template>
<script setup lang="ts">
import { ref } from "vue";
// Tooltips definieren (oder dynamische Daten für die Komponente hier bereitstellen)
const tooltips = ref([
{ key: 1, text: "Edit", color: "green", icon: "mdi-pencil" },
{ key: 2, text: "Add", color: "blue", icon: "mdi-plus" },
{ key: 3, text: "Delete", color: "yellow", icon: "mdi-delete" },
{ key: 4, text: "Star", color: "red", icon: "mdi-star" },
{ key: 5, text: "Office", color: "light-blue", icon: "mdi-run" },
]);
// Funktion zur Verarbeitung des von der Komponente emittierten Klick-Ereignisses
const handleButtonClick = (tooltip: any) => {
switch (tooltip.key) {
case 1:
console.log("Edit button clicked");
// Hier können Sie die 'Edit'-Aktionen durchführen
break;
case 2:
console.log("Add button clicked");
// Hier können Sie die 'Add'-Aktionen durchführen
break;
case 3:
console.log("Delete button clicked");
// Hier können Sie die 'Delete'-Aktionen durchführen
break;
case 4:
console.log("Star button clicked");
// Hier können Sie die 'Star'-Aktionen durchführen
break;
case 5:
console.log("Office button clicked");
// Hier können Sie die 'Office'-Aktionen durchführen
break;
default:
console.log("Unknown button clicked");
break;
}
};
</script>Card Component
The sb-card 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
| Slot Name | Description |
| --------- | -------------------------------- |
| prepend | Slot for custom prepend content. |
| `` | |
| append | Slot for custom append content. |
| actions | Slot for actions loader content. |
Events
| Event | Description |
| -------- | ----------------------------------------- |
| @click | Event emitted when the button is clicked. |
Example Usage
<template>
<sb-card
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>
<v-avatar size="56">
<img src="https://example.com/avatar.jpg" alt="Avatar" />
</v-avatar>
</template>
<template #append>
<sb-icon>mdi-heart</sb-icon>
</template>
</sb-card>
<sb-card
append-icon="mdi-open-in-new"
class="mx-auto"
href="https://sutorbank.de"
max-width="344"
prepend-icon="mdi-github"
rel="noopener"
subtitle="SutorBank Card Subtitle"
target="\_blank"
title="SutorBank Card Title"
>
</sb-card>
<sb-card loading title="Card title" subtitle="Subtitle" text="...">
<sb-card-actions>
<sb-btn>Click me</sb-btn>
</sb-card-actions>
</sb-card>
</template>Card Actions Component
The sb-card-actions component is a flexible wrapper for card actions. It dynamically supports multiple named slots, allowing for customizable button and action layouts.
Props
| Prop | Type | Default | Description |
| -------- | ------ | ------- | ------------------------------------------- |
| v-bind | Object | {} | Binds additional props to v-card-actions. |
Slots
This component dynamically accepts all provided named slots.
| Slot Name | Description |
| --------- | ------------------------------------------------------------------- |
| * | Any named slot is dynamically rendered within the v-card-actions. |
Example Usage
<template>
<sb-card
class="mx-auto"
max-width="500"
text="FinTech Team"
title="Card title"
>
<sb-card-actions>
<sb-btn>Action Button</sb-btn>
</sb-card-actions>
</sb-card>
</template>Chip Component
The sb-chips 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>
<sb-chips
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>
<sb-icon>mdi-tag</sb-icon>
</template>
</sb-chips>
</template>
<script setup>
import Chip from "sutorbank-component/Chip.vue";
const handleChipClick = (event) => {
console.log("Chip clicked!", event);
};
</script>
<style>
.custom-chip {
font-size: 14px;
}
</style>
<template>
<sb-chips
title="Mein neue Chip"
color="blue"
variant="outlined"
density="comfortable"
@click="onChipClick"
>
Chip Inhalt
</sb-chips>
</template>
<script lang="ts" setup>
function onChipClick(event: MouseEvent | KeyboardEvent) {
if (event instanceof MouseEvent) {
console.log("Mit der Maus geklickt:", event.clientX, event.clientY);
} else if (event instanceof KeyboardEvent) {
console.log("Mit der Tastatur gedrückt:", event.key);
}
}
</script>Row Component
The sb-row component is a flexible wrapper for Rows
Col Component
The sb-col component is a flexible wrapper for columns
Expansion Panels Component
The sb-expansion-panel component allows for displaying collapsible panels with customizable options.
Props
| Prop | Type | Default | Description |
| ----------- | ------- | ----------- | ---------------------------------------------------------------------------------- |
| items | Array | See below | Array of objects defining each panel's title and text content. |
| variant | String | 'default' | Variant style of the expansion panels (default, accordion, inset, popout). |
| rounded | String | 'xs' | Rounded corner size of the panels. |
| elevation | Number | 1 | Elevation level of the panels. |
| readonly | Boolean | false | Whether the panels are readonly. |
| color | String | '' | Color of the expansion panels. |
| disabled | Boolean | false | Whether the panels are disabled. |
Example Usage
<template>
<sb-expansion-panel
:items="panelItems"
variant="accordion"
rounded="md"
:elevation="3"
:readonly="false"
color="#7367f0"
class="custom-expansion-panels"
/>
</template>
<script setup>
import { ref } from "vue";
const panelItems = ref([
{
title: "Panel 1",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
},
{
title: "Panel 2",
text: "Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.",
},
]);
</script>
<style>
.custom-expansion-panels .v-expansion-panel-title {
color: var(--title);
}
.custom-expansion-panels .v-expansion-panel-title--active {
color: var(--primary);
font-weight: 600;
}
.custom-expansion-panels .v-expansion-panel-text {
color: var(--text);
}
</style>Dialog Component
The sb-dialog 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>
<sb-dialog width="auto" scrollable :title="dialogTitle" :text="dialogText">
<template v-slot:activator="{ props: activatorProps }">
<sb-button
color="brown"
prepend-icon="mdi-earth"
text="Custom Modal Activator"
variant="outlined"
v-bind="activatorProps"
></sb-button>
</template>
</sb-dialog>
</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 sb-list component renders a list of items with optional sub-groups, allowing customization of each list item.
Props
| Prop | Type | Default | Description |
| --------------- | ------- | --------------- | ------------------------------------------------------------------------- |
| lines | String | 'one' | Number of lines for list items (one or two). |
| items | Array | [] | Array of items to render in the list. |
| density | String | 'comfortable' | Density of the list items (comfortable or compact). |
| elevation | Number | 0 | Elevation level of the list. |
| variant | String | '' | Variant style of the list (outlined, tonal, elevated, flat, text, plain). |
| disabled | Boolean | false | Whether the list is disabled. |
| listItemClass | String | '' | Custom CSS classes for each list item. |
| width | String | '' | Width of the list wrapper. |
| maxWidth | String | '' | Maximum width of the list wrapper. |
| minWidth | String | '' | Minimum width of the list wrapper. |
| height | String | '' | Height of the list wrapper. |
| maxHeight | String | '' | Maximum height of the list wrapper. |
| minHeight | String | '' | Minimum height of the list wrapper. |
Example Usage
<template>
<sb-list
lines="two"
:items="listItems"
density="compact"
elevation="3"
variant="outlined"
:disabled="false"
class="custom-list"
width="100%"
:maxWidth="'800px'"
:minHeight="'300px'"
>
<template v-slot:list-item="{ item }">
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
</v-list-item-content>
</template>
<template v-slot:sub-item="{ item }">
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
</v-list-item-content>
</template>
</sb-list>
</template>
<script setup>
const listItems = ref([
{
title: "Item 1",
subtitle: "Description of Item 1",
},
{
title: "Item 2",
subtitle: "Description of Item 2",
prependAvatar: "https://example.com/avatar.jpg",
},
{
title: "Item 3",
subtitle: "Description of Item 3",
prependIcon: "mdi-account",
},
{
title: "Item 4",
subtitle: "Description of Item 4",
appendIcon: "mdi-check",
},
{
title: "Item 5",
subtitle: "Description of Item 5",
subItems: [
{
title: "Sub-item 1",
subtitle: "Description of Sub-item 1",
prependIcon: "mdi-subdirectory-arrow-right",
},
{
title: "Sub-item 2",
subtitle: "Description of Sub-item 2",
prependIcon: "mdi-subdirectory-arrow-right",
},
],
},
]);
</script>
<template>
<v-card class="mx-auto" max-width="300">
<!-- Plain Variant -->
<sb-list
title="Plain Variant"
:items="items"
color="primary"
variant="plain"
>
<template #prepend="{ item }">
<sb-icon :icon="item.icon"></sb-icon>
</template>
</sb-list>
<!-- Tonal Variant -->
<sb-list
title="Tonal Variant"
:items="items"
color="primary"
variant="tonal"
>
<template #prepend="{ item }">
<sb-icon :icon="item.icon"></sb-icon>
</template>
</sb-list>
</v-card>
</template>
<script setup>
const items = [
{ text: "Real-Time", icon: "mdi-clock" },
{ text: "Audience", icon: "mdi-account" },
{ text: "Conversions", icon: "mdi-flag" },
];
</script>
<template>
<v-card class="mx-auto" max-width="300">
<sb-list :items="items"></sb-list>
</v-card>
</template>
<script setup>
import sb-list from './components/sb-list.vue';
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 Group Component
The sb-list-group using the v-list-group component you can create sub-groups of items.
Props
| Prop | Type | Default | Description |
| --------------- | ---------------------------- | ------------- | --------------------------------------------------------------------------------- |
| active-color | String | undefined | The applied color when the component is in an active state. |
| append-icon | String | Array | Component | undefined | Creates a v-icon component after default content in the append slot. |
| base-color | String | undefined | Sets the color of the component when not focused. |
| collapse-icon | String | Array | Component | '$collapse' | Icon displayed when the list item is expanded. |
| color | String | undefined | Applies a specified color to the control (supports utility colors or CSS values). |
| expand-icon | String | Array | Component | '$expand' | Icon displayed when the list item is collapsed. |
| fluid | Boolean | false | Removes the left padding assigned for action icons in group items. |
| prepend-icon | String | Array | Component | undefined | Prepend an icon to the component, using the same syntax as v-icon. |
| subgroup | Boolean | false | Designates the component as a nested list group. |
| tag | String | 'div' | Specifies a custom tag used on the root element. |
| title | String | undefined | Specifies a title text for the component. |
| value | Any | undefined | Expands or collapses the list group. |
Example Usage
<template>
<sb-card class="mx-auto" width="300">
<sb-list v-model:opened="open">
<sb-list-item prepend-icon="mdi-home" title="Home"></sb-list-item>
<sb-list-group value="Users">
<template v-slot:activator="{ props }">
<sb-list-item
v-bind="props"
prepend-icon="mdi-account-circle"
title="Users"
></sb-list-item>
</template>
<sb-list-group value="Admin">
<template v-slot:activator="{ props }">
<sb-list-item v-bind="props" title="Admin"></sb-list-item>
</template>
<sb-list-item
v-for="([title, icon], i) in admins"
:key="i"
:prepend-icon="icon"
:title="title"
:value="title"
></sb-list-item>
</sb-list-group>
<sb-list-group value="Actions">
<template v-slot:activator="{ props }">
<sb-list-item v-bind="props" title="Actions"></sb-list-item>
</template>
<sb-list-item
v-for="([title, icon], i) in cruds"
:key="i"
:prepend-icon="icon"
:title="title"
:value="title"
></sb-list-item>
</sb-list-group>
</sb-list-group>
</sb-list>
</sb-card>
</template>
<script setup lang="ts">
import { ref } from "vue";
const open = ref<string[]>(["Users"]);
const admins = ref<[string, string][]>([
["Management", "mdi-account-multiple-outline"],
["Settings", "mdi-cog-outline"],
]);
const cruds = ref<[string, string][]>([
["Create", "mdi-plus-outline"],
["Read", "mdi-file-outline"],
["Update", "mdi-update"],
["Delete", "mdi-delete"],
]);
</script>List Item Component
The sb-list-item component is used to represent a single item within a sb-list. It supports icons, avatars, navigation, selection, and rich content, making it ideal for menus and interactive lists.
Props
| Prop | Type | Default | Description |
| ---------------- | ---------------------------- | ----------- | ------------------------------------------------------------------------------------ |
| active | Boolean | undefined | Controls the active state of the item. Used to highlight the component. |
| active-class | String | undefined | Class applied to the component when it matches the current route. |
| active-color | String | undefined | Applied color when the component is in an active state. |
| append-avatar | String | undefined | Appends a v-avatar component after default content in the append slot. |
| append-icon | String | Array | Component | undefined | Creates a v-icon component after default content in the append slot. |
| base-color | String | undefined | Sets the color of the component when not focused. |
| border | String | Number | Boolean | false | Defines the border-radius applied to the component (xs, sm, md, lg, xl). |
| color | String | undefined | Specifies the color applied when the component is active or has an input value. |
| density | String | 'default' | Adjusts the vertical height (default, comfortable, compact). |
| disabled | Boolean | false | Removes the ability to click or target the component. |
| elevation | String | Number | undefined | Sets elevation between 0 and 24. |
| exact | Boolean | false | Ensures exact matching when used as a link. |
| height | String | Number | undefined | Sets the component height. |
| href | String | undefined | Defines a link destination when used as an anchor. |
| lines | Boolean | String | false | Defines the minimum height of the item (false, one, two, three). |
| link | Boolean | undefined | Marks the component as a link (automatic with href or to). |
| max-height | String | Number | undefined | Sets the maximum height of the component. |
| max-width | String | Number | undefined | Sets the maximum width of the component. |
| min-height | String | Number | undefined | Sets the minimum height of the component. |
| min-width | String | Number | undefined | Sets the minimum width of the component. |
| nav | Boolean | false | Reduces width and applies border-radius for navigation menus. |
| prepend-avatar | String | undefined | Prepends a v-avatar in the prepend slot. |
| prepend-icon | String | Array | Component | undefined | Creates a v-icon in the prepend slot. |
| ripple | Boolean | true | Applies the v-ripple directive. |
| rounded | String | Number | Boolean | undefined | Defines the border-radius (0, xs, sm, lg, xl, etc.). |
| slim | Boolean | false | Reduces horizontal spacing. |
| subtitle | String | Number | undefined | Specifies a subtitle text. |
| tag | String | 'div' | Defines a custom tag for the root element. |
| theme | String | undefined | Specifies a theme for the component. |
| tile | Boolean | false | Removes applied border-radius. |
| title | String | Number | undefined | Specifies the title text (overrides v-list-item-title). |
| to | RouteLocationRaw | undefined | Defines the target route for navigation. |
| value | Any | undefined | The value used for selection (v-list v-model: selected). |
| variant | String | 'text' | Defines the visual style (text, flat, elevated, tonal, outlined, plain). |
| width | String | Number | undefined | Sets the width of the component. |
Example Usage
<template>
<sb-card class="mx-auto" width="300">
<sb-list v-model:opened="open">
<sb-list-item prepend-icon="mdi-home" title="Home"></sb-list-item>
<sb-list-group value="Users">
<template v-slot:activator="{ props }">
<sb-list-item
v-bind="props"
prepend-icon="mdi-account-circle"
title="Users"
></sb-list-item>
</template>
<sb-list-group value="Admin">
<template v-slot:activator="{ props }">
<sb-list-item v-bind="props" title="Admin"></sb-list-item>
</template>
<sb-list-item
v-for="([title, icon], i) in admins"
:key="i"
:prepend-icon="icon"
:title="title"
:value="title"
></sb-list-item>
</sb-list-group>
<sb-list-group value="Actions">
<template v-slot:activator="{ props }">
<sb-list-item v-bind="props" title="Actions"></sb-list-item>
</template>
<sb-list-item
v-for="([title, icon], i) in cruds"
:key="i"
:prepend-icon="icon"
:title="title"
:value="title"
></sb-list-item>
</sb-list-group>
</sb-list-group>
</sb-list>
</sb-card>
</template>
<script setup lang="ts">
import { ref } from "vue";
const open = ref<string[]>(["Users"]);
const admins = ref<[string, string][]>([
["Management", "mdi-account-multiple-outline"],
["Settings", "mdi-cog-outline"],
]);
const cruds = ref<[string, string][]>([
["Create", "mdi-plus-outline"],
["Read", "mdi-file-outline"],
["Update", "mdi-update"],
["Delete", "mdi-delete"],
]);
</script>Tabs Component
The sb-tab 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>
<sb-tab
: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>
</sb-tab>
</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 sb-speed-deal 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 sb-speed-deal 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>
<sb-speed-deal
: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>
</sb-speed-deal>
</template>
<script setup>
import { ref } from "vue";
import SutorBankSpeedDial from "./components/SutorBankSpeedDial.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 sb-textbox 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 |
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>
<sb-textbox
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>
<sb-icon>mdi-account</sb-icon>
</template>
<template #append>
<sb-icon>mdi-check</sb-icon>
</template>
<template #append-inner>
<sb-icon>mdi-information</sb-icon>
</template>
</sb-textbox>
</template>
<script setup>
import { ref } from "vue";
const inputValue = ref("");
const money = ref({
decimal: ",",
thousands: ".",
prefix: "€ ",
suffix: " #",
precision: 2,
masked: false,
});
</script>
<template>
<div>
<sb-textbox
label="Text Box Label"
variant="outlined"
density="comfortable"
type="text"
>
<template #prepend>
<sb-icon>mdi-account</sb-icon>
</template>
<template #append>
<sb-icon>mdi-check</sb-icon>
</template>
</sb-textbox>
</div>
</template>Combobox Component
The sb-combobox 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 text displayed when no item is selected. |
| density | String | 'compact' | Density of the combobox ('comfortable' or 'compact'). |
| multiple | Boolean | false | Whether multiple items can be selected. |
| chips | Boolean | false | Whether to use chips for selected items display. |
| readonly | Boolean | false | Whether the combobox is in readonly mode. |
| hint | String | '' | Hint text displayed below the combobox. |
| hideSelected | Boolean | false | Whether to hide the selected item(s) from the dropdown list. |
| variant | String | 'outlined' | Variant style of the combobox ('outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted'). |
| persistentHint | Boolean | false | Whether the hint text is persistent (visible when the combobox is focused). |
| hideNoData | Boolean | true | Whether to show a message when no matching items are found. |
Slots
| Slot Name | Description |
| --------- | ---------------------------------------------------------------------- |
| no-data | Slot for custom no-data content. Make sure hide-no-data props is false |
Example Usage
<template>
<sb-combobox
:items="['Apple', 'Banana', 'Orange', 'Grapes']"
label="Select Fruit"
placeholder="Choose a fruit"
:density="'compact'"
:multiple="true"
:chips="true"
:readonly="false"
hint="Select multiple fruits"
:hideSelected="false"
variant="outlined"
class="custom-combobox"
:persistentHint="true"
></sb-combobox>
</template>
<script setup>
import sb-combobox from "sutorbank-component/SutorBankCombobox.vue";
</script>
<style>
.custom-combobox {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
}
</style>
--
<template>
<sb-combobox
:items="['Apple', 'Banana', 'Orange', 'Grapes']"
label="Select Fruit"
placeholder="Choose a fruit"
:density="'compact'"
:multiple="true"
:chips="true"
:readonly="false"
hint="Select multiple fruits"
:hideSelected="false"
variant="outlined"
class="custom-combobox"
:persistentHint="true"
></sb-combobox>
</template>
<script setup></script>
<style>
.custom-combobox {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
}
</style>File Input Component
The sb-file-input component allows users to upload files with customizable options.
Props
| Prop | Type | Default | Description |
| ------------------ | ------- | ------------------ | ------------------------------------------------------------------------------------ |
| rules | Array | [] | Validation rules for file input (array of validation functions). |
| accept | String | '' | File types accepted by the input (comma-separated MIME types). |
| variant | String | 'outlined' | Variant style of the input (outlined, underlined, solo, solo-filled, solo-inverted). |
| clearable | Boolean | false | Whether the input can be cleared. |
| chips | Boolean | false | Whether to use chips for selected files. |
| multiple | Boolean | false | Whether multiple files can be selected. |
| prependInnerIcon | String | '' | Icon prepended inside the input. |
| label | String | 'File' | Label text for the input. |
| appendInnerIcon | String | 'mdi-attachment' | Icon appended inside the input. |
| loading | Boolean | false | Whether the input is in loading state. |
| color | String |