# 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](https://gitlab.com/Riga6990/vue-lib-components) to gitlab.