WELCOME TO LIBRARY ELC DASHBOARD

Hi this component using vue 3 + typescript.

| Component | | :----------- | | EButton | | ECard | | ECardGroup | | ECalendar | | EDropdown | | EInput | | ESpinner | | ESeparator |

Installation

 npm install e-dashboard

  import { EButton } from 'e-dashboard'

  <EButton label="evan" />

BUTTON

API

| Property | Description | Type | Default | | :----------- | :----------------------------------------------------------------- | :------ | :------ | | color | Set the button type, options include ( primary , secondary, dark ) | String | primary | | size | Set the button size, options include ( small, medium , large ) | String | medium | | outlined | Set the button type outlined | Boolean | false | | loading | Set the condition of loading | Boolean | false | | colorSpinner | Set the color spinner when loading | String | primary | | disabled | Set the button to disabled | Boolean | false |

Usage / Examples

<EButton
  color="primary"
  size="large"
  outlined
  :loading="false"
  color-spinner="secondary"
>
        asdsa
    </EButton>

CALENDAR

API

| Property | Description | Type | Default | | :------------- | :---------------------------------------- | :----- | :------ | | selectDate | Set the date default (YYYY-MM-DD) | String | null | | border-color | set the color ( primary, secondary, dark) | String | primary |

Usage / Examples

<template>
  <ECalendar :selectedDate="selectedDate" />
</template>

<script lang="ts" setup>
const selectDate = ref("2024-10-10");
</script>

CARD

API

| Property | Description | Type | Default | | :--------- | :----------------------------------------------------------------- | :------ | :------ | | color | Set the button type, options include ( primary , secondary, dark ) | String | primary | | size | Set the card size, options include ( small , medium, large ) | String | medium | | bordered | Set the card bordered model | Boolean | false |

Usage / Examples

Button with type

<ECard color="dark" size="large" bordered>
      example
</ECard>

CARD GROUP

API

| Property | Description | Type | Default | | :--------- | :----------------------------------------------------------------- | :------ | :--------- | | data | Set the value for loop | Array | [] | | model | Set the model cardGroup , options include ( vertical, horizontal ) | String | horizontal | | bordered | Set the card bordered model | Boolean | false |

Usage / Examples

Button with type

<ECardGroup :data="data" model="horizontal">
        <template v-slot:default="{ props }">
          {{ props.items }}
        </template>
  </ECardGroup>

DROPDOWN

API

| Property | Description | Type | Default | | :------------- | :------------------------------------------------------------------- | :------------- | :------ | | color | Set the Dropdown type, options include ( primary , secondary, dark ) | String | primary | | size | Set the Dropdown size, options include ( small, medium, large ) | String | medium | | placeholder | Set the placeholder for dropdown | String | ' ' | | options | Set the option | Array | [] | | optionsLabel | Set the option label | String, number | null | | optionsValue | Set the options value | String, number | null |

Usage / Examples

<template>
  <EDropdown
    v-model="select"
    size="large"
    color="dark"
    placeholder="selected value"
    :options="data"
    optionsLabel="name"
    optionsValue="items"
  />
</template>

<script lang="ts" setup>
const data = ref([
  { items: 1, name: "evan" },
  { items: 2, name: "pan" },
  { items: 3, name: "wilz" },
  { items: 4, name: "adam" },
  { items: 5, name: "luthfi" },
  { items: 6, name: "kiwil" },
  { items: 7, name: "young" },
  { items: 8, name: "start" },
]);

const select = ref("evan");
</script>

INPUT

API

| Property | Description | Type | Default | | :------------- | :------------------------------------------------------------------ | :------ | :------ | | name | Set the name input | String | null | | label | Set the label for | String | null | | size | Set the input size, options include ( small , medium, large, auto ) | String | medium | | placeholder | Set the placeholder for input | String | null | | required | Set the required for input | Boolean | false | | errorMessage | Set the message for error message | String | null |

Usage / Examples

<template>
  <EInput
    name="example"
    v-model="inputValue"
    label="Example Input"
    placeholder="Enter something..."
    :required="true"
    size="medium"
    errorMessage="This field is required"
  />
</template>

<script lang="ts" setup>
const inputValue = ref("");
</script>

SEPARATOR

API

| Property | Description | Type | Default | | :------- | :----------------------------------------------------------------- | :----- | :------ | | color | Set the button type, options include ( primary , secondary, dark ) | String | primary |

Usage / Examples

Button with type

<ESeperator color="primary" />

SPINNER

API

| Property | Description | Type | Default | | :------- | :----------------------------------------------------------------- | :----- | :------ | | color | Set the button type, options include ( primary , secondary, dark ) | String | primary |

Usage / Examples

Button with type

<ESpinner color="dark" />