Vue3-elements-tools NPM

Vue3 elements tools

npm install vue-func-windows

Settings

interface SearchSelectConfigsInterface {
    per_page?: number,
        input_delay?: number,
        input_min_count_chars?: number,
}

interface FormConfigsInterface {
    notify?: { [T in 'error' | 'success' ]?: (message: string) => void },
}
interface ElementsToolsConfigsInterface {
    baseUrl?: string,
        authToken?: string,
        searchSelect?: SearchSelectConfigsInterface,
        form?: FormConfigsInterface,
}

import plugin from 'vue3-elements-tools'

app.use(plugin, {
    baseUrl: process.env.API_URL || process.env.VUE_APP_API_URL,
    authToken: 'Bearer ' + 'AUTHORIZATION_TOKEN',
    searchSelect: {
        per_page: 10,
        input_delay: 200,
        input_min_count_chars: 2,
    },
    // optional toast notifications
    form: {
        notify: {
            error: (message: string) => $windows.show('toast', {
                componentInstance: () => import('@/components/Toast.vue'),
                props: {message,}
            }),
            success: (message: string) => $windows.show('toast', {
                componentInstance: () => import('@/components/Toast.vue'),
                props: {message,}
            })
        }
    }
})

Components

SearchSelect
Input
BooleanSelect
ClearIcon
Form

Directives

Click outside

HTML elements

SearchSelect

component types

interface ValueLabelInterface {
    value: any,
    label: string,
}

type ModelValueInterface = Array<string | number> | number | string | null;

type SelectOptionValueLabelInterface = ValueLabelInterface & {
    class?: string | Array<string | object>,
}

interface OptionsSourceInterface {
    url?: string,
    valueFieldName?: string,
    baseOptions?: Array<SelectOptionValueLabelInterface>,
}
type OptionsSourceType = string | Array<SelectOptionValueLabelInterface> | OptionsSourceInterface
type ModelValueInterface = Array<string | number> | number | string | null;
//component props
interface Props {
    modelValue: ModelValueInterface
    optionsSource: OptionsSourceType,
    disabled?: boolean, // default false
    multiselect?: boolean, // default false
    withEmptyOption?: boolean, // default true
    optionClasses?: string | Array<string | object>,
    emptyOptionLabel?: string, // default '----------'
    tagCancelButton?: string, // default '<span>&#x2715;</span>'
    selectFieldArrow?: string, // default '<span class="s_field-arrow"></span>'
    inputSearchDelay?: number,
    inputSearchMinCountChars?: number,
    loadPerPage?: number,
}

example:

const values = ref<Array<number | string> | number | string>([]);

const sourceOptions = ref({
  url: '/path/to/get-request',
  baseOptions: [
    {value: 1, label: 'Value Label 1'},
    {value: 2, label: 'Value Label 2'},
    {value: 3, label: 'Value Label 3'},
    {value: 4, label: 'Value Label 4'},
    {value: 5, label: 'Value Label 5', class: 'some-css-class'},
  ]
});

<et-search-select
    v-model:modelValue="values"
    v-model:optionsSource="sourceOptions"
    :disabled="false"
    :multiselect="true"
    :empty-option-label="- Empty (select for empty values) -"
></et-search-select>

Input

component types

type EtInputTypeType =
    'checkbox' |
    'color' |
    'date' |
    'datetime-local' |
    'email' |
    'file' |
    'hidden' |
    'image' |
    'month' |
    'number' |
    'password' |
    'radio' |
    'range' |
    'search' |
    'tel' |
    'text' |
    'time' |
    'url' |
    'week' |
    'textarea' |
    'boolean' |
    'strict-boolean'


export type EtInputValueType = string | boolean | number | readonly string[] | object | File[] | null

interface Props {
    modelValue: EtInputValueType,
    type?: EtInputTypeType, // default 'text'
}

const emit = defineEmits<{
    (event: 'update:modelValue', value: EtInputValueType): void,
    (event: 'fast-clean'): void,
}>()

!TIP For boolean & strict-boolean exists prop labels implements BooleanSelectLabelsInterface
!TIP Other attributes according to the input type. E.g. cols, rows, disabled, readonly...

example:

const value = (null);

<et-input v-model="value"
          type="textarea"
          :rows="5"
          disabled
/>

BooleanSelect

component types

interface OptionsType {
    value: boolean | null,
    label?: string
}

interface BooleanSelectLabelsInterface {
    emptyLabel?: string, //default ''
    trueLabel?: string, //default 'Yes'
    falseLabel?: string, //default 'No'
}

interface Props {
    modelValue: boolean | null,
    labels?: BooleanSelectLabelsInterface,
    strict?: boolean, //default false
    disabled?: boolean,
    readonly?: boolean,
}

example:

const value = ref(false);

<et-boolean-select v-model="boolValue"
                   type="boolean"
                   :labels="{emptyLabel: 'Empty Label'}"
/>

!NOTE For strict-boolean type empty value is absent

ClearIcon

component types

interface Props {
    modelValue: any,
    icon?: string, // default '&times;'
}
const emit = defineEmits<{
    (event: 'update:modelValue', value: null): void,
    (event: 'cleaned'): void,
}>()

onClick execute emit('update:modelValue', null)

Form

component types

interface Props {
    action?: string,
    method?: string, // default 'POST'
    autoSendRequest: boolean, // default true
    duplicateControls?: boolean, // default false
    withoutCancelButton?: boolean, // default false
    submitButtonLabel?: string, // default 'Ok'
    cancelButtonLabel?: string, // default 'Cancel'
    translator?: (...args: Array<any>) => string | null, // default () => null
    withErrorsBlock: boolean, // default true
}

component definition

const emit = defineEmits<{
    (event: FormEvent, submitData?: {response: Response, data: any} | any): void
}>();

const slots = defineSlots<{
    title?: (props: Record<string, never>) => any,
    default?: (props: {[k: string]: any}) => any
}>()

example:

const item = ref({})

const formValues = ref({
    name: null,
    short_name: null,
    salary_grid: null,
    rank_id: null,
    description: null,
    profession_ids: [],
})
const action = computed(() => item.value.resource_url || '/some-path')
const method = computed(() => item.value.id ? 'PATCH' : 'POST')

const ranksSource = ref({
    url: '/ranks',
})
const professionsSource = ref({
    url: '/professions',
})

const submit = (result: any) => {
    console.log('App submit(): result', result)
    item.value = result.data || item.value
}

const error = (result: any) => {
    console.log('App error(): result', result)
}

const cancel = (result: any) => {
    console.log('App cancel(): result', result)
}

<et-form duplicateControls
         :action="action"
         :method="method"
         @submit="submit"
         @error="error"
         @cancel="cancel"
>
    <template #title>Title</template>
    <template #default="{errors}">
        <label>name:
            <et-input v-model="formValues.name" name="name" type="text" />
        </label>
        <label>short_name:
            <et-input v-model="formValues.short_name" name="short_name" type="text" />
        </label>
        <label>salary_grid:
            <et-input v-model="formValues.salary_grid" name="salary_grid" type="text" />
        </label>
        <label>description:
            <et-input v-model="formValues.description" name="description" type="textarea" />
        </label>
        <label>rank_id:
            <et-search-select
                v-model:modelValue="formValues.rank_id"
                v-model:optionsSource="ranksSource"
                :empty-option-label="'Erease all'"
                name="rank_id"
            ></et-search-select>
        </label>
        <label>profession_ids:
            <et-search-select
                v-model:modelValue="formValues.profession_ids"
                v-model:optionsSource="professionsSource"
                :multiselect="true"
                :empty-option-label="'Erease all'"
                name="profession_ids"
            ></et-search-select>
        </label>
    </template>
</et-form>