Egistic Base Components

The collection of Vue js base components made for development of the cross-origin website Egistic.kz

Installation

NPM

    npm install egistic_base_components

CommonJS

import {
    OutsideClick,
    BaseIcon,
    BaseSelectBox,
    BaseInputField,
    BaseLangSelect,
    DateRangePicker,
    TransformObserver,
    BaseMoreButton,
    BaseSortButton,
    BaseCheckbox,
    BaseRadio,
    BaseDialog
    } from 'egistic_base_components/src/install'
Vue.directive('outside-click', OutsideClick)
Vue.component('base-icon', BaseIcon)
Vue.component('base-input-field', BaseInputField)
Vue.component('base-select-box', BaseSelectBox)
Vue.component('base-lang-select', BaseLangSelect)
Vue.component('date-range-picker', DateRangePicker)
Vue.component('transform-observer', TransformObserver)
Vue.component('base-more-button', BaseMoreButton)
Vue.component('base-sort-button', BaseSortButton)
Vue.component('base-checkbox', BaseCheckbox)
Vue.component('base-radio', BaseRadio)
Vue.component('base-dialog', BaseDialog)

OutsideClick

    <div class="block1" @click="block1 = !block1"
        v-outside-click="{callback: closeBlock1}">
        {{block1 ? 'OPEN' : 'CLOSED'}}
    </div>

    <div class="activator"
        id="block_activator"
        @click="block2 = !block2">Click me</div>
    <div class="block2"
        id="block_activator"
        @click="block2 = !block2"
        v-outside-click="{except: 'block_activator', callback: closeBlock2}">
        {{block2 ? 'OPEN' : 'CLOSED'}}
    </div>

    private block1 = false
    private block2 = false

    private closeBlock1() {
        this.block1 = false
    }

    private closeBlock2() {
        this.block2 = false
    }

BaseIcon

    <base-icon
        :width="24"
        :height="24"
        :rotate="90"
        :active="false"
        :standardColor="'#1C1C1C'"
        :strokeColor="#1C1C1C"
        :activeColor="'4B970F'"
        :tooltip="'Add'"
        :src="require('!html-loader!@/assets/icons/general/add_icon.svg')"
    />

BaseInputField

    <base-input-field
        :header="'header'"
        :placeholder="'placeholder'"
        :type="'text'"
        :icon="'icons/general/add_icon.svg'"
        :width="'341px'"
        :height="'48px'"
        :padding="'14px 16px'"
        :onerror="''"
        :readonly="false"
        v-model="inputText"
        @onclickIcon="event"
        @keyupEnter="event"
    />

BaseSelectBox

    <base-select-box
        :header="'header'"
        :placeholder="'placeholder'"
        :width="'341px'"
        :height="'48px'"
        :padding="[12, 12, 12, 16]"
        :freeentry="false"
        :dropdownItems="['item1', 'item2']"
        v-model="selected"
        @selectItem="onselectItem($event)"
        :onerror="''"
        :readonly="false"
        :notchange="false"
    />

BaseLangSelect

    <base-lang-select
        :languages="['kz', 'ru', 'en', 'uk']"
        v-model="lang"
    />

DateRangePicker

    <date-range-picker
        :activatorID="'datarangepicker-activator'"
        :locale="'ru'"
        :maxDay="7"
        :year="2022"
        :futureSelection="false"
        :timeSelection="true"
        :activity="[]"
        @confirm="onSelect"
    />

TransformObserver

    <transform-observer
        :element="HTMLElement"
        :target="HTMLElement"
        :status="isShown"
        :controlWidth="false"
        :controlVertically="true"
        :controlHorizontally="true"
        :alignVertically="false"
        :alignHorizontally="true"
        :fixed="true"
    />

BaseMoreButton

    <base-more-button
        :locale="'ru'"
        :src="'icons/more_icon.svg'"
        :strokeColor="'#1c1c1c'"
        :tooltip="'Настройки'"
        :fixed="true"
        :alignVertically="false"
        :alignHorizontally="true"
        :slots="['option-1', 'option-2']"
    >
        <div :slot="'option-1'">
            Изменить
        </div>
        <div :slot="'option-2'">
            Удалить
        </div>
    </base-more-button>

BaseSortButton

    <base-sort-button
        :inc="ifIncrease"
        :dec="ifDecrease"
        @increasing="onclickIncrease()"
        @decreasing="onclickDecrease()"
    />

BaseCheckbox

    <base-checkbox
        :fillColor="'#4B970F'"
        :arrowColor="'#FFFFFF'"
        :borderColor="'rgba(40, 49, 70, 0.12)'"
        :checked="false"
    />

BaseRadio

    <base-radio
        :fillColor="''#4B970F''"
        :borderColor="'rgba(40, 49, 70, 0.12)'"
        :checked="false"
    />

BaseDialog

    <base-dialog
        :isShown="isShown"
        :width="389"
        @cancel="cancel()"
        @accept="accept()"
        @hide="hide()"
    >
        <div :slot="'content-header'">
            New Dialog
        </div>
        <div :slot="'content-body'">
        </div>
        <div :slot="'cancel-button'">
            Cancel
        </div>
        <div :slot="'accept-button'">
            Add
        </div>
    </base-dialog>

BaseCombobox

    <base-combobox
        :header="'header'"
        :placeholder="'Выберите items'"
        :allSelectedText="'Все выбрано'"
        :dropdownItems="items"
        :selectedItems="selected"
    >
        <template slot="dropdown">
            <div class="item">
                <base-checkbox
                    @click="selectAll()"
                    :checked="items.length === selected.length"
                />
                <div class="item-text">
                    Выбрать все
                </div>
            </div>
            <div class="item" v-for="(item, index) in items" :key="index">
                <base-checkbox
                    @click="selectItem(item)"
                    :checked="selected.includes(item)"
                />
                <div class="item-text">{{item}}</div>
            </div>
        </template>
    </base-combobox>