easycomponentstools 1.0.0-dev.0

package/src/components/Form/EasyForm.vue

@@ -0,0 +1,194 @@
+<template>
+    <v-container class="mainform" :height="($attrs.height as string | undefined) ?? '100%'">
+        <v-form v-if="formdata && formdata.binder" ref="formref">
+            <v-card :elevation="formdata?.elevation ?? 1" :loading="loading">
+                <v-card-title v-if="formdata.title">
+                    <i v-if="formdata.icon" :class="formdata.icon" /> {{ formdata.title }}
+                </v-card-title>
+                <v-card-subtitle v-if="formdata.subtitle">
+                    {{ formdata.subtitle }}
+                </v-card-subtitle>
+                <v-card-text>
+                    <v-row v-for="(input, index) in formdata.inputs" :key="index">
+                        <v-col v-if="input.type === 'input'">
+                            <Input
+                                v-model="formdata.binder[input.key]"
+                                :input="input"
+                                @submit="submit"
+                            ></Input>
+                        </v-col>
+                        <v-col v-if="input.type === 'textarea'">
+                            <TextArea
+                                v-model="formdata.binder[input.key]"
+                                :input="input"
+                                @submit="submit"
+                            ></TextArea>
+                        </v-col>
+                        <v-col v-if="input.type === 'number'">
+                            <Number
+                                v-model="formdata.binder[input.key]"
+                                :input="input"
+                                @submit="submit"
+                            ></Number>
+                        </v-col>
+                        <v-col v-if="input.type === 'password' || input.type === 'password-eye'">
+                            <Password
+                                v-model="formdata.binder[input.key]"
+                                :input="input"
+                                @update:type="(type: inputType) => (input.type = type)"
+                                @submit="submit"
+                            ></Password>
+                        </v-col>
+                        <v-col v-if="input.type === 'checkbox'">
+                            <Switch v-model="formdata.binder[input.key]" :input="input"></Switch>
+                        </v-col>
+                        <v-col v-if="input.type === 'selects'">
+                            <Selects v-model="formdata.binder[input.key]" :input="input"></Selects>
+                        </v-col>
+                        <v-col v-if="input.type === 'selectsAutoComplete'">
+                            <SelectsAutoComplete
+                                v-model="formdata.binder[input.key]"
+                                :input="input"
+                            ></SelectsAutoComplete>
+                        </v-col>
+                        <v-col v-if="input.type === 'selectsAutoCompleteChips'">
+                            <Tags v-model="formdata.binder[input.key]" :input="input"> </Tags>
+                        </v-col>
+                        <v-col v-if="input.type === 'date'">
+                            <DatePicker
+                                v-model="formdata.binder[input.key]"
+                                :input="input"
+                            ></DatePicker>
+                        </v-col>
+                        <v-col v-if="input.type === 'rangeDate'">
+                            <RangeDatePicker v-model="formdata.binder[input.key]" :input="input">
+                            </RangeDatePicker>
+                        </v-col>
+                        <v-col v-if="input.type === 'file'" eager>
+                            <FileInput v-model="formdata.binder[input.key]" :input="input">
+                            </FileInput>
+                        </v-col>
+                        <v-col v-if="input.type === 'map'">
+                            <MapAutoComplete v-model="formdata.binder[input.key]" :input="input">
+                            </MapAutoComplete>
+                        </v-col>
+                        <v-col v-if="input.type === 'slot'">
+                            <slot
+                                :name="input.key"
+                                :items="formdata.binder[input.key]"
+                                :options="{ ...input?.options }"
+                            />
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+                <v-card-actions v-if="formdata.button || formdata.menuButtons || formdata.submit">
+                    <v-row class="p-4">
+                        <v-col v-if="formdata.button" style="display: flex; justify-content: start">
+                            <v-btn
+                                class="ellipsis_btn"
+                                :color="formdata.button?.color ?? 'error'"
+                                variant="flat"
+                                :loading="!!formdata.button?.loading"
+                                :disabled="!!formdata.button?.disabled"
+                                @click="formdata.button.onClick()"
+                            >
+                                <i v-if="formdata.button.icon" :class="formdata.button.icon" />
+                                <span class="labelMore">
+                                    {{ formdata.button.label }}
+                                </span>
+                            </v-btn>
+                        </v-col>
+                        <v-col
+                            v-if="formdata.menuButtons"
+                            style="display: flex; justify-content: start"
+                        >
+                            <MenuActions :menu-buttons="formdata.menuButtons"></MenuActions>
+                        </v-col>
+                        <v-col style="display: flex; justify-content: end">
+                            <v-btn
+                                v-if="formdata.submit"
+                                class="ellipsis_btn"
+                                :loading="loading"
+                                :color="formdata.submit?.color ?? 'success'"
+                                variant="flat"
+                                @click="submit"
+                            >
+                                <i v-if="formdata.submit.icon" :class="formdata.submit.icon" />
+                                <span class="labelMore">
+                                    {{ formdata.submit.label ?? '' }}
+                                </span>
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                </v-card-actions>
+            </v-card>
+        </v-form>
+    </v-container>
+</template>
+
+<script setup lang="ts">
+import { ComponentPublicInstance, onMounted, ref, Ref } from 'vue'
+import { FormDTO, inputType } from '../../types/form'
+import Input from './types/Input.vue'
+import TextArea from './types/TextArea.vue'
+import Number from './types/Number.vue'
+import Password from './types/Password.vue'
+import Switch from './types/Switch.vue'
+import Selects from './types/Selects.vue'
+import SelectsAutoComplete from './types/SelectsAutoComplete.vue'
+import Tags from './types/Tags.vue'
+import DatePicker from './types/DatePicker.vue'
+import RangeDatePicker from './types/RangeDatePicker.vue'
+import FileInput from './types/FileInput.vue'
+import MapAutoComplete from './types/MapAutoComplete.vue'
+import MenuActions from './MenuActions.vue'
+
+type propsTypes = {
+    form: FormDTO
+}
+
+const props = defineProps<propsTypes>()
+const formdata: Ref<FormDTO | null> = ref(null)
+const formref: Ref<ComponentPublicInstance | null> = ref(null)
+const loading: Ref<boolean> = ref(false)
+
+async function submit() {
+    if (!formdata.value) return null
+    if (loading.value) return null
+    const valid = await (formref?.value as any)?.validate()
+    if (!valid?.valid) return null
+
+    const data = {}
+    formdata.value.inputs.forEach((input) => {
+        if (
+            formdata.value &&
+            formdata.value.binder[input.key] &&
+            formdata.value.binder[input.key].length !== 0
+        ) {
+            Object.assign(data, { [input.key]: formdata.value.binder[input.key] })
+        }
+    })
+    if (formdata.value.submit && typeof formdata.value.submit.onSubmit === 'function') {
+        formdata.value.submit.onSubmit(data)
+    }
+}
+
+onMounted(() => {
+    formdata.value = props.form
+    if (formdata.value && formdata.value.binder) {
+        Object.keys(formdata.value.binder).map((key) => {
+            if (
+                formdata.value &&
+                formdata.value.binder[key] &&
+                !Array.isArray(formdata.value.binder[key]) &&
+                typeof formdata.value.binder[key] === 'object' &&
+                (isNaN(formdata.value.binder[key].lat) || isNaN(formdata.value.binder[key].lng))
+            ) {
+                formdata.value.binder.value[key] = { lat: 0, lng: 0 }
+            }
+        })
+    }
+})
+
+defineExpose({ formref, loading })
+</script>

package/src/components/Form/MenuActions.vue

@@ -0,0 +1,40 @@
+<template>
+    <v-menu>
+        <template #activator="{ props: menuProps }">
+            <v-btn
+                class="ellipsis_btn"
+                v-bind="menuProps"
+                :color="menuButtons?.color ?? 'error'"
+                variant="flat"
+            >
+                <i v-if="menuButtons?.icon" :class="menuButtons?.icon" />
+                <span class="labelMore">{{ menuButtons.label }}</span>
+                <v-icon>icon-chevron-down</v-icon>
+            </v-btn>
+        </template>
+        <v-list>
+            <v-list-item
+                v-for="(item, index) in menuButtons.items"
+                :key="index"
+                :value="index"
+                @click="item.onClick()"
+            >
+                <template #prepend>
+                    <v-icon v-if="item?.icon">{{ item.icon }}</v-icon>
+                </template>
+                <v-list-item-title>
+                    {{ item.label }}
+                </v-list-item-title>
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script setup lang="ts">
+import { MenuButtonsDTO } from '../../types/form'
+
+type propsType = {
+    menuButtons: MenuButtonsDTO
+}
+defineProps<propsType>()
+</script>

package/src/components/Form/types/DatePicker.vue

@@ -0,0 +1,103 @@
+<template>
+    <v-dialog v-model="dialog" max-width="380">
+        <template #activator="{ props: activatorProps }">
+            <v-text-field
+                v-model="dateText"
+                readonly
+                :label="input.label"
+                clearable
+                v-bind="{ ...input.options, ...activatorProps }"
+                :rules="input.validation && input.validation.length !== 0 ? input.validation : []"
+                :class="input.required ? 'required_field' : null"
+                @click:clear="clear"
+            >
+            </v-text-field>
+        </template>
+
+        <v-card>
+            <v-card-text>
+                <v-date-picker v-if="isDate" v-model="date" />
+                <v-time-picker
+                    v-if="isTime && input.options.enableTime"
+                    v-model="time"
+                    format="24hr"
+                ></v-time-picker>
+            </v-card-text>
+            <v-card-actions>
+                <v-btn @click="cancel">
+                    {{ $i18n.t('form.cancel') }}
+                </v-btn>
+                <v-btn @click="getDate"> OK </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { Ref, ref, watch } from 'vue'
+import { InputDTO } from '../../../types/form'
+import { useI18n } from 'vue-i18n'
+import useHelpers from '../../../composables/useHelpers'
+
+type propsType = {
+    input: InputDTO
+}
+const props = defineProps<propsType>()
+const $i18n = useI18n()
+const { dateTimeFormatter, dateFormatter, timeFormatter, dateValue, dateTimeValue } = useHelpers()
+const date: Ref<Date | string | null> = ref(null)
+const time: Ref<string | null> = ref(null)
+const dateText: Ref<string> = ref('')
+const dialog: Ref<boolean> = ref(false)
+const isDate: Ref<boolean> = ref(true)
+const isTime: Ref<boolean> = ref(false)
+const dateTimeModel = defineModel<string | null>()
+
+watch(
+    dateTimeModel,
+    (v) => {
+        date.value = v ? new Date(v) : null
+        if (date.value) {
+            dateText.value = props.input.options.enableTime
+                ? dateTimeFormatter(date.value)
+                : dateFormatter(date.value)
+            if (props.input.options.enableTime) {
+                time.value = timeFormatter(date.value)
+            }
+        }
+    },
+    { deep: true, immediate: true }
+)
+
+const getDate = () => {
+    if (!date.value) return
+    if (isDate.value) {
+        if (props.input.options.enableTime) {
+            isTime.value = true
+            isDate.value = false
+        } else {
+            dateText.value = dateFormatter(date.value)
+            dateTimeModel.value = dateValue(date.value)
+            dialog.value = false
+        }
+    } else {
+        const datetime = `${dateValue(date.value)} ${time.value}`
+        dateText.value = dateTimeFormatter(datetime)
+        dateTimeModel.value = dateTimeValue(datetime)
+        isDate.value = true
+        isTime.value = false
+        dialog.value = false
+    }
+}
+const cancel = () => {
+    isDate.value = true
+    isTime.value = false
+    dialog.value = false
+}
+const clear = () => {
+    date.value = null
+    dateTimeModel.value = null
+}
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/Form/types/FileInput.vue

@@ -0,0 +1,68 @@
+<template>
+    <v-card elevation="0">
+        <v-card-title style="font-size: 16px">
+            <v-icon v-if="input.icon">{{ input.icon }}</v-icon> {{ input.label }}
+        </v-card-title>
+        <v-card-text>
+            <v-row>
+                <v-col v-if="checkMedia()" cols="12" md="6">
+                    <Gallery
+                        v-if="Array.isArray(value) && value.length !== 0"
+                        :id="input.key"
+                        :ref="input.key"
+                        :media="value"
+                        eager
+                        @on-delete="
+                            (v: any) =>
+                                typeof input.onDelete === 'function' ? input.onDelete(v) : null
+                        "
+                    >
+                    </Gallery>
+                </v-col>
+                <v-col cols="12" :md="checkMedia() ? 6 : 12" class="d-flex align-center">
+                    <v-file-upload
+                        v-bind="{ ...input.options }"
+                        v-model="fileValue"
+                        density="default"
+                        :class="input.required ? 'required_field' : null"
+                        :label="input.label"
+                        :rules="
+                            input.validation && input.validation.length !== 0
+                                ? input.validation
+                                : []
+                        "
+                    >
+                    </v-file-upload>
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import Gallery from './Gallery.vue'
+import { InputDTO } from '../../../types/form'
+import { ref, Ref, watch } from 'vue'
+
+type propsType = {
+    input: InputDTO
+}
+defineProps<propsType>()
+const value = defineModel<any[]>()
+const fileValue: Ref<File | File[] | null> = ref(null)
+const checkMedia = () => value.value?.some((item: any) => !!item?.src)
+
+watch(
+    fileValue,
+    (v: File | File[] | null) => {
+        if (Array.isArray(v)) {
+            value.value = v
+        } else if (v) {
+            value.value = [v]
+        }
+    },
+    { deep: true, immediate: true }
+)
+</script>
+
+<style scoped></style>

package/src/components/Form/types/Gallery.vue

@@ -0,0 +1,28 @@
+<template>
+    <v-carousel>
+        <v-carousel-item v-for="(image, index) in media" :key="index" :src="image.src">
+            <v-btn
+                class="delete_btn"
+                color="error"
+                variant="flat"
+                @click="emit('onDelete', image.id)"
+            >
+                {{ $i18n.t('form.delete') }}
+            </v-btn>
+        </v-carousel-item>
+    </v-carousel>
+</template>
+
+<script setup lang="ts">
+import { Media } from '../../../types/gallery'
+import { useI18n } from 'vue-i18n'
+
+type propsType = {
+    media: Media[]
+}
+defineProps<propsType>()
+const $i18n = useI18n()
+const emit = defineEmits(['onDelete'])
+</script>
+
+<style scoped></style>

package/src/components/Form/types/Input.vue

@@ -0,0 +1,23 @@
+<template>
+    <v-text-field
+        v-model="value"
+        :label="input.label"
+        :class="input.required ? 'required_field' : null"
+        v-bind="{ ...input.options }"
+        :rules="input.validation && input.validation.length !== 0 ? input.validation : []"
+        @keyup.enter="emit('submit')"
+    />
+</template>
+
+<script setup lang="ts">
+import { InputDTO } from '../../../types/form'
+
+type propsType = {
+    input: InputDTO
+}
+defineProps<propsType>()
+const value = defineModel<string>()
+const emit = defineEmits(['submit'])
+</script>
+
+<style scoped></style>

package/src/components/Form/types/MapAutoComplete.vue

@@ -0,0 +1,83 @@
+<template>
+    <CustomMapAutoComplete
+        :class="input.required ? 'required_field' : ''"
+        :label="input.label"
+        @place_changed="change_location"
+    ></CustomMapAutoComplete>
+    <v-card ref="cardMapRef" :loading="loading" :elevation="0" class="cardMap">
+        <GMapMap
+            id="gmap"
+            :key="input.key + '_' + $useMap.mapOptions.value.key"
+            ref="mapRef"
+            :center="value"
+            map-type-id="hybrid"
+            :zoom="$useMap.mapOptions.value.zoom"
+            :options="$useMap.mapOptions.value"
+            style="height: 500px"
+        >
+            <v-btn
+                :key="$useMap.fullScreenButtonKey.value"
+                class="fullscreen_btn"
+                @click="$useMap.toggleFullscreen()"
+            >
+                <i :class="$useMap.isFullScreen() ? 'icon-shrink' : 'icon-maximize'"></i>
+            </v-btn>
+            <GMapMarker :position="value" :draggable="true" @dragend="set_location" />
+        </GMapMap>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import CustomMapAutoComplete from './map/CustomMapAutoComplete.vue'
+import { ComponentPublicInstance, onMounted, ref } from 'vue'
+import useMap from '../../../composables/useMap'
+import { InputDTO } from '../../../types/form'
+
+type propsType = {
+    input: InputDTO
+}
+type Location = {
+    lat: number
+    lng: number
+}
+
+defineProps<propsType>()
+const value = defineModel<Location>()
+const $useMap = useMap()
+const cardMapRef = ref<ComponentPublicInstance | null>(null)
+const mapRef = ref<ComponentPublicInstance | null>(null)
+const loading = ref<string | undefined>(undefined)
+
+const change_location = (place: any) => {
+    const { lat, lng } = place.geometry.location
+    value.value = {
+        lat,
+        lng,
+    }
+
+    $useMap.mapOptions.value.zoom = 18
+    $useMap.mapOptions.value.key++
+}
+const set_location = (position: any) => {
+    if (!value.value) return
+    value.value.lat = position.latLng.lat()
+    value.value.lng = position.latLng.lng()
+}
+
+onMounted(() => {
+    setTimeout(() => {
+        if (!cardMapRef.value) return
+        if (!mapRef.value) return
+        $useMap.addMap(mapRef.value, cardMapRef.value)
+        const map: any = (mapRef.value as any).$mapObject
+        if (map) {
+            const panorama = map.getStreetView()
+            panorama.setOptions({
+                fullscreenControl: false, // Disable fullscreen control inside Street View
+            })
+        }
+    }, 500)
+})
+</script>
+
+<style scoped></style>

package/src/components/Form/types/Number.vue

@@ -0,0 +1,24 @@
+<template>
+    <v-text-field
+        v-model.number="value"
+        :class="input.required ? 'required_field' : null"
+        type="number"
+        :label="input.label"
+        v-bind="{ ...input.options }"
+        :rules="input.validation && input.validation.length !== 0 ? input.validation : []"
+        @keyup.enter="emit('submit')"
+    />
+</template>
+
+<script setup lang="ts">
+import { InputDTO } from '../../../types/form'
+
+type propsType = {
+    input: InputDTO
+}
+defineProps<propsType>()
+const value = defineModel<number>()
+const emit = defineEmits(['submit'])
+</script>
+
+<style scoped></style>

package/src/components/Form/types/Password.vue

@@ -0,0 +1,53 @@
+<template>
+    <v-text-field
+        v-model="value"
+        :class="input.required ? 'required_field' : null"
+        :type="input.type === 'password' ? 'password' : 'text'"
+        :label="input.label"
+        v-bind="{ ...input.options }"
+        :rules="input.validation && input.validation.length !== 0 ? input.validation : []"
+        @keyup.enter="emit('submit')"
+    >
+        <template #append-inner>
+            <span style="cursor: pointer; font-size: 22px" @click="setPassword()">
+                <i :class="input.type === 'password' ? 'icon icon-eye' : 'icon icon-eye-off'" />
+            </span>
+            <v-tooltip location="bottom">
+                <template #activator="{ props }">
+                    <span
+                        v-if="typeof input.moreButton?.onClick === 'function'"
+                        v-bind="props"
+                        class="moreOption"
+                        @click="input.moreButton.onClick"
+                    >
+                        <i :class="input.moreButton.icon" />
+                    </span>
+                </template>
+                {{ input.moreButton?.label ?? '' }}
+            </v-tooltip>
+        </template>
+    </v-text-field>
+</template>
+
+<script setup lang="ts">
+import { InputDTO } from '../../../types/form'
+
+type propsType = {
+    input: InputDTO
+}
+const props = defineProps<propsType>()
+const value = defineModel<string>()
+const emit = defineEmits(['submit', 'update:type'])
+
+const setPassword = () => {
+    emit('update:type', props.input.type === 'password' ? 'password-eye' : 'password')
+}
+</script>
+
+<style scoped>
+.moreOption {
+    cursor: pointer;
+    font-size: 22px;
+    margin-left: 5px;
+}
+</style>