easycomponentstools 1.0.0-dev.0

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

@@ -0,0 +1,133 @@
+<template>
+    <v-dialog v-model="dialog" max-width="380">
+        <template #activator="{ props: activatorProps }">
+            <v-text-field
+                v-model="dateText"
+                :class="input.required ? 'required_field' : null"
+                readonly
+                :label="input.label"
+                clearable
+                :rules="input.validation && input.validation.length !== 0 ? input.validation : []"
+                v-bind="{ ...input.options, ...activatorProps }"
+                variant="underlined"
+                @click:clear="clear"
+            >
+            </v-text-field>
+        </template>
+
+        <v-card>
+            <v-card-text>
+                <v-date-picker v-if="isDate" v-model="date" multiple="range" />
+                <v-time-picker
+                    v-if="isStartTime && input.options.enableTime"
+                    v-model="startTime"
+                    format="24hr"
+                ></v-time-picker>
+                <v-time-picker
+                    v-if="isEndTime && input.options.enableTime"
+                    v-model="endTime"
+                    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 useHelpers from '../../../composables/useHelpers'
+import { InputDTO } from '../../../types/form'
+import { useI18n } from 'vue-i18n'
+
+type propsType = {
+    input: InputDTO
+}
+const props = defineProps<propsType>()
+const { dateFormatter, dateTimeFormatter, timeFormatter, dateValue, dateTimeValue } = useHelpers()
+const $i18n = useI18n()
+const date: Ref<Date[] | string[]> = ref([])
+const startTime: Ref<string> = ref('')
+const endTime: Ref<string> = ref('')
+const dateText: Ref<string> = ref('')
+const dialog: Ref<boolean> = ref(false)
+const isDate: Ref<boolean> = ref(true)
+const isStartTime: Ref<boolean> = ref(false)
+const isEndTime: Ref<boolean> = ref(false)
+const rangeDateTimeValue = defineModel<string[]>()
+
+watch(
+    rangeDateTimeValue,
+    (v) => {
+        if (!v) return
+        date.value = v
+        if (Array.isArray(date.value) && date.value.length > 1) {
+            const startDate = props.input.options.enableTime
+                ? dateTimeFormatter(date.value[0])
+                : dateFormatter(date.value[0])
+            const endDate = props.input.options.enableTime
+                ? dateTimeFormatter(date.value[date.value.length - 1])
+                : dateFormatter(date.value[date.value.length - 1])
+            dateText.value = `${startDate}~${endDate}`
+            const startDateModel = new Date(date.value[0])
+            const endDateModel = new Date(date.value[date.value.length - 1])
+            if (props.input.options.enableTime) {
+                startTime.value = timeFormatter(startDateModel)
+                endTime.value = timeFormatter(endDateModel)
+            }
+            date.value = [startDateModel, endDateModel]
+        }
+    },
+    { deep: true, immediate: true }
+)
+
+const getDate = () => {
+    if (isDate.value) {
+        if (props.input.options.enableTime) {
+            isStartTime.value = true
+            isDate.value = false
+            isEndTime.value = false
+        } else {
+            dateText.value = `${dateFormatter(date.value[0])}~${dateFormatter(date.value[date.value.length - 1])}`
+            rangeDateTimeValue.value = [
+                `${dateValue(date.value[0])}`,
+                `${dateValue(date.value[date.value.length - 1])}`,
+            ]
+            dialog.value = false
+        }
+    } else if (isStartTime.value && props.input.options.enableTime) {
+        isStartTime.value = false
+        isDate.value = false
+        isEndTime.value = true
+    } else if (isEndTime.value && props.input.options.enableTime) {
+        const startDateTime = `${dateValue(date.value[0])} ${startTime.value}`
+        const endDateTime = `${dateValue(date.value[date.value.length - 1])} ${endTime.value}`
+        dateText.value = `${dateTimeFormatter(startDateTime)}~${dateTimeFormatter(endDateTime)}`
+        rangeDateTimeValue.value = [
+            `${dateTimeValue(startDateTime)}`,
+            `${dateTimeValue(endDateTime)}`,
+        ]
+        isDate.value = true
+        isStartTime.value = false
+        isEndTime.value = false
+        dialog.value = false
+    }
+}
+const cancel = () => {
+    isDate.value = true
+    isStartTime.value = false
+    isEndTime.value = false
+    dialog.value = false
+}
+const clear = () => {
+    date.value = []
+    rangeDateTimeValue.value = []
+}
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,24 @@
+<template>
+    <v-select
+        v-model="value"
+        :class="input.required ? 'required_field' : null"
+        :label="input.label"
+        v-bind="{ ...input.options }"
+        :rules="input.validation && input.validation.length !== 0 ? input.validation : []"
+        @update:model-value="
+            (v: string) => (typeof input.onChange === 'function' ? input.onChange(v) : null)
+        "
+    />
+</template>
+
+<script setup lang="ts">
+import { InputDTO } from '../../../types/form'
+
+type propsType = {
+    input: InputDTO
+}
+defineProps<propsType>()
+const value = defineModel<string>()
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,24 @@
+<template>
+    <v-autocomplete
+        v-model="value"
+        :class="input.required ? 'required_field' : null"
+        :label="input.label"
+        v-bind="{ ...input.options }"
+        :rules="input.validation && input.validation.length !== 0 ? input.validation : []"
+        @update:model-value="
+            (v: string) => (typeof input.onChange === 'function' ? input.onChange(v) : null)
+        "
+    />
+</template>
+
+<script setup lang="ts">
+import { InputDTO } from '../../../types/form'
+
+type propsType = {
+    input: InputDTO
+}
+defineProps<propsType>()
+const value = defineModel<string>()
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,24 @@
+<template>
+    <v-switch
+        v-model="value"
+        :label="input.label"
+        v-bind="{ ...input.options }"
+        color="primary"
+        hide-details
+        inset
+        :true-value="1"
+        :false-value="0"
+    />
+</template>
+
+<script setup lang="ts">
+import { InputDTO } from '../../../types/form'
+
+type propsType = {
+    input: InputDTO
+}
+defineProps<propsType>()
+const value = defineModel<number>()
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,59 @@
+<template>
+    <v-autocomplete
+        v-model="selectedTags"
+        v-model:search="search"
+        :items="tags"
+        :class="input.required ? 'required_field' : null"
+        :label="input.label"
+        v-bind="{ ...input.options }"
+        multiple
+        chips
+        deletable-chips
+        allow-new
+        hide-no-data
+        :rules="input.validation && input.validation.length !== 0 ? input.validation : []"
+        @update:search="onSearchChange"
+        @update:model-value="
+            (v: string[]) => (typeof input.onChange === 'function' ? input.onChange(v) : null)
+        "
+    >
+        <!-- Custom Chip Rendering -->
+        <template #chip="{ item, index }">
+            <v-chip :closable="true" @click:close="removeTag(index)">
+                {{ item }}
+            </v-chip>
+        </template>
+    </v-autocomplete>
+</template>
+
+<script setup lang="ts">
+import { Ref, ref } from 'vue'
+import { InputDTO } from '../../../types/form'
+
+type propsType = {
+    input: InputDTO
+}
+defineProps<propsType>()
+const tags: Ref<string[]> = ref([])
+const search: Ref<string> = ref('')
+const selectedTags = defineModel<string[]>()
+
+const removeTag = (index: number) => {
+    selectedTags.value?.splice(index, 1)
+}
+const onSearchChange = (value: string) => {
+    if (value.includes(',')) {
+        const newTag = value.replace(',', '').trim()
+        if (newTag && !tags.value.includes(newTag)) {
+            tags.value.push(newTag)
+            selectedTags.value?.push(newTag)
+        }
+        if (newTag && !selectedTags.value?.includes(newTag)) {
+            selectedTags.value?.push(newTag)
+        }
+        search.value = ''
+    }
+}
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,23 @@
+<template>
+    <v-textarea
+        v-model="value"
+        :class="input.required ? 'required_field' : null"
+        :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<string>()
+const emit = defineEmits(['submit'])
+</script>
+
+<style scoped></style>

package/src/components/Form/types/map/CustomMapAutoComplete.vue

@@ -0,0 +1,83 @@
+<template>
+    <v-autocomplete
+        v-model:search="searchValue"
+        :class="$attrs.class"
+        :label="label"
+        :items="items"
+        clearable
+        :loading="loading"
+        @keydown.enter="search"
+        @update:model-value="change"
+        @click:clear="clear"
+    >
+        <template #append-inner>
+            <v-btn elevation="0" @click="search">
+                <i class="icon-search" style="color: #282828" />
+            </v-btn>
+        </template>
+    </v-autocomplete>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+type Item = {
+    title: string
+    value: string
+}
+type propsType = {
+    label: string
+    getPlaces?: any
+}
+
+const props = defineProps<propsType>()
+const emit = defineEmits(['place_changed'])
+const searchValue = ref<string>('')
+const items = ref<Item[]>([])
+const loading = ref<boolean>(false)
+
+const clear = () => {
+    searchValue.value = ''
+    items.value = []
+}
+const change = async (place_id: string) => {
+    if (!place_id) return
+    if (!props.getPlaces) return
+
+    loading.value = true
+    const places = await props.getPlaces(place_id)
+    emit('place_changed', places)
+    loading.value = false
+}
+const search = async () => {
+    if (!searchValue.value) return
+
+    const request = {
+        input: searchValue.value,
+        includedRegionCodes: ['gr', 'en'],
+    }
+    const data: Item[] = []
+    loading.value = true
+
+    try {
+        const { suggestions } =
+            await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request)
+
+        suggestions.forEach((suggestion) => {
+            if (suggestion.placePrediction) {
+                data.push({
+                    title: suggestion.placePrediction.text.toString(),
+                    value: suggestion.placePrediction.placeId,
+                })
+            }
+        })
+        items.value = JSON.parse(JSON.stringify(data))
+    } catch (e) {
+        console.error(e)
+    } finally {
+        loading.value = false
+        searchValue.value = ''
+    }
+}
+</script>
+
+<style scoped lang="scss"></style>

package/src/composables/useHelpers.ts

@@ -0,0 +1,48 @@
+import moment from 'moment-timezone'
+import { useInfo } from '../stores/useInfo'
+
+export default function useHelpers() {
+    const nowFormatter = () => {
+        const timeZone = useInfo().timeZone
+        const tz = moment.tz(timeZone)
+        return tz.format('LLLL')
+    }
+    const nowValue = () => {
+        const timeZone = useInfo().timeZone
+        const tz = moment.tz(timeZone)
+        return tz.format('yyyy-MM-DDTHH:mm:ss')
+    }
+    const dateTimeFormatter = (dateTime: string | Date) => {
+        const timeZone = useInfo().timeZone
+        const tz = moment.tz(dateTime, timeZone)
+        return tz.format('LLLL')
+    }
+    const dateFormatter = (date: string | Date) => {
+        const timeZone = useInfo().timeZone
+        const tz = moment.tz(date, timeZone)
+        return tz.format('LL')
+    }
+    const timeFormatter = (value: string | Date) => {
+        const timeZone = useInfo().timeZone
+        const theTime = moment.tz(value, timeZone)
+        return theTime.format('HH:mm')
+    }
+    const dateValue = (date: string | Date) => {
+        const tz = moment.tz(date, useInfo().timeZone)
+        return tz.format('YYYY-MM-DD')
+    }
+    const dateTimeValue = (date: string | Date) => {
+        const tz = moment.tz(date, useInfo().timeZone)
+        return tz.format('YYYY-MM-DDTHH:mm:ss')
+    }
+
+    return {
+        nowFormatter,
+        nowValue,
+        dateFormatter,
+        dateTimeFormatter,
+        dateValue,
+        dateTimeValue,
+        timeFormatter,
+    }
+}

package/src/composables/useMap.ts

@@ -0,0 +1,104 @@
+import { ComponentPublicInstance, onBeforeMount, onBeforeUnmount, ref } from 'vue'
+import { DocumentWithFullscreen, MapDTO, MapOptions } from '../types/map'
+
+export default function useMap() {
+    const map = ref<MapDTO | null>(null)
+    const mapOptions = ref<MapOptions>({
+        zoomControl: true,
+        mapTypeControl: false,
+        scaleControl: true,
+        streetViewControl: true,
+        rotateControl: false,
+        fullscreenControl: false,
+        disableDefaultUi: false,
+        styles: [
+            {
+                featureType: 'poi',
+                stylers: [
+                    {
+                        visibility: 'off',
+                    },
+                ],
+            },
+            {
+                featureType: 'transit',
+                stylers: [
+                    {
+                        visibility: 'off',
+                    },
+                ],
+            },
+        ],
+        zoom: 18,
+        key: 0,
+    })
+    const fullScreenButtonKey = ref<number>(0)
+
+    const addMap = (mapRef: ComponentPublicInstance, cardMapRef: ComponentPublicInstance) => {
+        map.value = {
+            cardMapRef: cardMapRef,
+            mapRef: mapRef,
+            isFullScreen: false,
+        }
+    }
+    const toggleFullscreen = async () => {
+        if (!map.value) return
+        const el: DocumentWithFullscreen = document as DocumentWithFullscreen
+        if (!el.fullscreenElement) {
+            if (typeof map.value.cardMapRef.$el.requestFullscreen === 'function') {
+                await map.value.cardMapRef.$el.requestFullscreen()
+            } else if (typeof map.value.cardMapRef.$el.mozRequestFullScreen === 'function') {
+                // Firefox
+                await map.value.cardMapRef.$el.mozRequestFullScreen()
+            } else if (typeof map.value.cardMapRef.$el.webkitRequestFullscreen === 'function') {
+                // Chrome, Safari, and Opera
+                await map.value.cardMapRef.$el.webkitRequestFullscreen()
+            } else if (typeof map.value.cardMapRef.$el.msRequestFullscreen === 'function') {
+                // IE/Edge
+                await map.value.cardMapRef.$el.msRequestFullscreen()
+            }
+            map.value.isFullScreen = true
+        } else {
+            if (typeof el.exitFullscreen === 'function') {
+                await document.exitFullscreen()
+            } else if (typeof el.mozCancelFullScreen === 'function') {
+                // Firefox
+                el.mozCancelFullScreen()
+            } else if (typeof el.webkitExitFullscreen === 'function') {
+                // Chrome, Safari, and Opera
+                el.webkitExitFullscreen()
+            } else if (typeof el.msExitFullscreen === 'function') {
+                // IE/Edge
+                el.msExitFullscreen()
+            }
+            map.value.isFullScreen = false
+        }
+        fullScreenButtonKey.value++
+    }
+    const isFullScreen = () => {
+        if (!map.value) return
+        return map.value.isFullScreen
+    }
+    const onFullscreenChange = () => {
+        if (!map.value) return
+        const el: DocumentWithFullscreen = document as DocumentWithFullscreen
+        map.value.isFullScreen = !!el.fullscreenElement
+        fullScreenButtonKey.value++
+    }
+
+    onBeforeMount(() => {
+        window.addEventListener('fullscreenchange', onFullscreenChange)
+    })
+    onBeforeUnmount(() => {
+        window.removeEventListener('fullscreenchange', onFullscreenChange)
+    })
+
+    return {
+        mapOptions,
+        fullScreenButtonKey,
+
+        addMap,
+        toggleFullscreen,
+        isFullScreen,
+    }
+}

package/src/lang/el/form.ts

@@ -0,0 +1,4 @@
+export default {
+    cancel: 'Άκυρο',
+    delete: 'Διαγραφή',
+}

package/src/lang/el/index.ts

@@ -0,0 +1,5 @@
+import form from './form'
+
+export default {
+    form: { ...form },
+}

package/src/lang/en/form.ts

@@ -0,0 +1,4 @@
+export default {
+    cancel: 'Cancel',
+    delete: 'Delete',
+}

package/src/lang/en/index.ts

@@ -0,0 +1,5 @@
+import form from './form'
+
+export default {
+    form: { ...form },
+}

package/src/main.ts

@@ -0,0 +1,59 @@
+import { App } from 'vue'
+import { en, el } from 'vuetify/locale'
+import { pluginsPropertiesDTO } from './types/plugins'
+import { createVuetify } from 'vuetify/framework'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import { VFileUpload } from 'vuetify/labs/components'
+import { createI18n } from 'vue-i18n'
+import langEn from '../src/lang/en'
+import langEl from '../src/lang/el'
+import { createPinia } from 'pinia'
+import { useInfo } from './stores/useInfo'
+import EasyForm from './components/Form/EasyForm.vue'
+import './scss/app.scss'
+
+export default {
+    install(app: App, props: pluginsPropertiesDTO) {
+        useInfo().timeZone = props.timeZone
+        const vuetify = createVuetify({
+            components: {
+                ...components,
+                VFileUpload,
+            },
+            directives,
+            defaults: {},
+            theme: {
+                defaultTheme: 'customTheme',
+                themes: {
+                    customTheme: {
+                        colors: props.colors,
+                        variables: {
+                            'font-family': props.fontFamily,
+                        },
+                    },
+                },
+            },
+            locale: {
+                locale: props.locale,
+                fallback: props.locale,
+                messages: {
+                    en: { ...en },
+                    el: { ...el },
+                },
+            },
+        })
+        const i18n = createI18n({
+            legacy: false,
+            locale: props.locale ?? 'en',
+            messages: {
+                en: langEn,
+                el: langEl,
+            },
+        })
+        app.use(createPinia())
+        app.use(vuetify)
+        app.use(i18n)
+        app.component('EasyForm', EasyForm)
+    },
+}

package/src/scss/app.scss

@@ -0,0 +1,57 @@
+@use 'vuetify/styles';
+@import "../../node_modules/lucide-static/font/lucide.css";
+@import "../../node_modules/@mdi/font/css/materialdesignicons.min.css";
+
+.mainform {
+  .required_field label:after{
+    color: red;
+    content: ' *';
+    display:inline;
+  }
+}
+
+.cardMap{
+  &:fullscreen{
+    .vue-map-container{
+      height: 100% !important;
+    }
+    .vue-map{
+      height: 100% !important;
+    }
+  }
+
+  .v-progress-linear--active{
+    height: 6px !important;
+  }
+  .fullscreen_btn{
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    color: #595959 !important;
+    background: #fff !important;
+    box-shadow: none !important;
+
+    &:hover, &:focus{
+      color: #595959 !important;
+      background: #fff !important;
+      box-shadow: none !important;
+    }
+
+    i{
+      font-size: 20px;
+    }
+  }
+}
+
+.v-carousel{
+  .v-carousel-item{
+    .delete_btn{
+      right: 0;
+      position: absolute;
+      border-radius: 0;
+    }
+    img{
+      background: #242424;
+    }
+  }
+}

package/src/shims-scss.d.ts

@@ -0,0 +1,3 @@
+declare module '*.sass'
+declare module '*.scss'
+declare module '*.css'

package/src/stores/useInfo.ts

@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useInfo = defineStore('EasyComponentInfo', () => {
+    const timeZone = ref<string>('UTC')
+
+    return {
+        timeZone,
+    }
+})