vue-lib-components

Library of commonly used components in Vue 3

Contains Vue 3 components that are used quite often. At the moment it is a test version (however, the current components can be used), but in the near future new features will be improved and new components will be added.

<script setup>

<script setup>

import { 
    Accordion, 
    Button, 
    Checkbox, 
    Input, 
    Select,
    Skeleton,
    Tabs
} from "vue-lib-components";
import "vue-lib-components/vue-lib-components.css";

// Accordion

<Accordion title="some titile">
    <template #icon>Your icon (to the right of the title)</template>
    Text as a slot
</Accordion>

  // or

const items = ref([
    { 
        title: "title 1",
        content: "content 1",
    },
    { 
        title: "title 2",
        content: "content 2",
    },
    { 
        title: "title 3",
        content: "content 3",
        disabled: true,
    },
]);

<Accordion
    v-for="(item, i) in items"
    :key="i"
    :title="item.title"
    :content="item.content"
    :disabled="item.disabled"
/>

// Button 

<Button
    :disabled="false"
    :full-width="true"
    @click="yourEvent"
>
    <template #leftSlot>Text or icon before name (not required)</template>
    Name of your button
    <template #leftSlot>Text or icon after name (not required)</template>
</Button>

// Checkbox

const currentCheckbox = ref(true);

<Checkbox v-model:check="currentCheckbox" />

// Input

const text = ref('');

<Input
    v-model:model="text"
    :disabled="true"
/>

// Select

const currentSelect = ref(null);

const options = ref([
    {
        label: "Google",
        value: "Google1",
    },
    {
        label: "Facebook",
        value: "Facebook2",
    },
    {
        label: "Twitter",
        value: "Twitter3",
    },
    {
        label: "Apple",
        value: "Apple4",
    },
    {
        label: "Oracle",
        value: "Oracle5",
        disabled: true,
    },
]);

<Select
    v-model:model="currentSelect"
    :options="options"
    label="Test"
/>

// Skeleton

<Skeleton />

  // or

<Skeleton backgroundColor="red" width="200px" height="50px" />

// Tabs

const picked = ref('tab-one');
const items = ref([
    {
        label: "Tab number One",
        id: "tab-one",
    },
    {
        label: "Tab number Two",
        id: "tab-two",
    },
    {
        label: "Tab number Three",
        id: "tab-three",
        disabled: true,
    },
]);

<Tabs
    v-model:picked="picked"
    :items="items"
>
    <div v-if="picked === 'tab-one'">
      Tab number One
    </div>

    <div v-if="picked === 'tab-two'">
      Tab number Two
    </div>

    <div v-if="picked === 'tab-three'">
      Tab number Three
    </div>
  </Tabs>

</script>

</script>

This is link to gitlab.