e-library-components v0.4.8

Components library install

npm i e-library-components

Usage

В main.js импортируем библиотеку

import ecomponents from 'e-library-components';

Далее пишем

Vue.use(ecomponents);

Button

Customization Props

1. Size
   1. s
   2. m
   3. l
   4. xl
2. Variant
   1. primary
   2. outline-primary
   3. link
   4. default
3. Plus svg (Boolean) - added plus in button

Use this code, for embedding

<e-button variant="primary" size="m" @click="yourMethod"> yourtext</e-button>

Input

Customization Props

1. placeholder - String value - enter the text you need for the input

   <e-input placeholder="Search" />

2. type - String value - input type text, number, password, etc.

   <e-input type="password" />

3. searchIcon - Boolean value(default - true) responsible for displaying the search icon

   <e-input :searchIcon="false" />

4. error_text - text your error

   <e-input error_text="Its my error text" />

5. error - Boolean value(default - false) highlights the input in red color

   <e-input :error="true" />

6. label - String value - showing the label over the input

   <e-input label="Label" />

Dropdown

Customization Props

position - String(top, bottom - default)

Slots

1. button -Replaces the button component with your
2. text-button - Replaces text in button

3. items - use `js <e-dropdown-item @click="clickMethod">Text

<template>
  <e-dropdown position="top">
    <template #button>
      // Replaces the button component with your
      <e-button>Dropdown</e-button>
    </template>
    <template #text-button> // Replaces text in button Dropdown2</template>
    <template #items>
      // Add your elements dropdown
      <e-dropdown-item @click="clickMethod">Text</e-dropdown-item>
    </template>
  </e-dropdown>
</template>

<script>
import EDropdownItem from './EDropdownItem';

export default {
  components: {EDropdownItem},
};
</script>

Resizable Table

Props

1. show_table_header_slot: type: Boolean, default: false
2. foot: type: Boolean, default: false
3. default_fields: default: () => [], type: []
4. items: default: () => [], type: Array
5. empty_text: type: String, default: 'Ничего не найдено'
6. busy: type: Boolean, default: true
7. show_product_search: Boolean
8. table_name: type: String, required: true

Directive

v-table-resize - be sure to use it so that the table can change size

How to use this component

<div style='width: 100%; height: 100vh; display: flex;'>
<div style='overflow: hidden; display: flex; flex-direction: column;  flex: 1'>
  <resizable-table
      style='display: flex;'
      table_name="table_name" v-table-resize
      @resize="(e) => yourMethod"
      v-bind="$props">
    <template #body_code>2222</template>
  </resizable-table>
</div>
</div>

Use this code, for embedding

<e-input :props="props"/>