bocins v2.0.0
Bocins
Collection of reusable UI components for Vue 3 that can be used standalone or combined together to create flexible and customized interfaces. The term bocins is derived from catalan and means small bits or pieces of something.
Get started
Install the library
npm i bocins
Default icons are copied from /node_modules/bocins/dist/icons
to /public/icons/
. Replace them to use your own icons. Existing icons won't be replaced.
Import styles in your app entry point file or in your styles entry point
// main.ts
import 'bocins/dist/style.css';
// main.scss
@import 'bocins/dist/style.css';
You can customize the theme using CSS variables and extending some base styles
:root {
font-size: 16px;
font-family: system-ui, Arial, sans-serif;
color-scheme: light dark;
--color-bg: light-dark(#f8f8f8, #333);
--color-text: light-dark(#333, #efefec);
--color-error: #d33;
--color-accent: #39f;
--color-btn: var(--color-accent);
}
body {
background-color: var(--color-bg);
color: var(--color-text);
}
.btn[alert] { --color: var(--color-error); }
.switch {
--color-on: lightgreen;
--color-off: var(--color-error);
}
Usage
Import and use components directly in your vue files
<template>
<Selector v-model="user" :options="store.users">
<template #default="{ item: user }">
<Avatar :src="user.avatar" :name="user.name" />
{{ user.name }}
</template>
</Selector>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Selector, Avatar } from 'bocins';
import store, { type User } from './store';
const user = ref<User>();
</script>
<style scoped>
.avatar { --size: 1.5rem; }
</style>
13 days ago
13 days ago
13 days ago
13 days ago
13 days ago
13 days ago
28 days ago
4 months ago
5 months ago
5 months ago
10 months ago
6 months ago
6 months ago
6 months ago
9 months ago
8 months ago
8 months ago
10 months ago
8 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago