npm - easycomponentstools - Versions diffs - 1.0.0-dev.1.1 → 1.0.0-dev.11 - Mend

easycomponentstools 1.0.0-dev.1.1 → 1.0.0-dev.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/index.html +13 -0
package/package.json +14 -6
package/src/components/Form/types/MapAutoComplete.vue +1 -0
package/src/components/Form/types/map/CustomMapAutoComplete.vue +3 -1
package/src/components/Modal/EasyConfirmationModal.vue +68 -0
package/src/components/Table/Actions/ActionBtn.vue +30 -0
package/src/components/Table/Actions/Menu.vue +43 -0
package/src/components/Table/ColumnValue.vue +38 -0
package/src/components/Table/EasyTable.vue +270 -0
package/src/components/Table/Headers/DialogColumns.vue +147 -0
package/src/components/Table/Headers/ExportData.vue +70 -0
package/src/components/Table/Headers/Filters.vue +219 -0
package/src/components/Table/Headers/Headers.vue +154 -0
package/src/composables/removeMdiSet.ts +19 -0
package/src/composables/useDataTableExport.ts +260 -0
package/src/composables/useHeadersStorage.ts +49 -0
package/src/dev.ts +114 -0
package/src/lang/el/index.ts +2 -0
package/src/lang/el/table.ts +14 -0
package/src/lang/en/index.ts +2 -0
package/src/lang/en/table.ts +14 -0
package/src/main.ts +20 -36
package/src/scss/app.scss +2 -3
package/src/types/plugins.ts +1 -12
package/vite.config.ts +5 -0

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/cineplayer.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body style="margin: 0;padding: 0;">
+    <div id="app"></div>
+    <script type="module" src="/src/dev.ts"></script>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "easycomponentstools",
     "private": false,
-    "version": "1.0.0-dev.1.1",
+    "version": "1.0.0-dev.11",
     "type": "module",
     "description": "Easy Vue Components",
     "keywords": [
@@ -25,30 +25,38 @@
     },
     "devDependencies": {
         "@eslint/js": "^10.0.1",
+        "@types/pdfmake": "^0.3.3",
+        "@types/sanitize-html": "^2.16.1",
         "@vitejs/plugin-vue": "^6.0.7",
         "eslint": "^10.4.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-vue": "^10.9.1",
         "jiti": "^2.7.0",
         "prettier": "^3.8.3",
+        "sanitize-html": "^2.17.4",
         "sass": "^1.100.0",
         "sass-embedded": "^1.77.8",
         "typescript": "^6.0.3",
         "typescript-eslint": "^8.60.0",
         "vite": "^8.0.16",
         "vite-plugin-dts": "^5.0.2",
-        "vue": "^3.5.35",
         "vue-tsc": "^3.3.3"
     },
-    "dependencies": {
+    "peerDependencies": {
         "@fawmi/vue-google-maps": "^0.9.79",
+        "pinia": "^3.0.4",
+        "vue": "^3",
+        "vuetify": "^4.0.8"
+    },
+    "dependencies": {
         "@mdi/font": "^7.4.47",
         "@tmcw/togeojson": "^7.1.2",
         "@types/google.maps": "^3.65.0",
+        "json-as-xlsx": "^2.5.6",
         "lucide-static": "^0.426.0",
         "moment-timezone": "^0.6.2",
-        "pinia": "^3.0.4",
-        "vue-i18n": "^11.4.4",
-        "vuetify": "^4.0.8"
+        "pdfmake": "^0.3.6",
+        "print-js": "^1.6.0",
+        "vue-i18n": "^11.4.4"
     }
 }

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

@@ -2,6 +2,7 @@
     <CustomMapAutoComplete
         :class="input.required ? 'required_field' : ''"
         :label="input.label"
+        :options="input.options"
         @place_changed="change_location"
     ></CustomMapAutoComplete>
     <v-card ref="cardMapRef" :loading="loading" :elevation="0" class="cardMap">

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

@@ -6,6 +6,7 @@
         :items="items"
         clearable
         :loading="loading"
+        v-bind="{ ...options }"
         @keydown.enter="search"
         @update:model-value="change"
         @click:clear="clear"
@@ -27,6 +28,7 @@ type Item = {
 type propsType = {
     label: string
     getPlaces?: any
+    options: Record<string, any>
 }
 const props = defineProps<propsType>()
@@ -53,7 +55,7 @@ const search = async () => {
     const request = {
         input: searchValue.value,
-        includedRegionCodes: ['gr', 'en'],
+        includedRegionCodes: ['gr', 'us'],
     }
     const data: Item[] = []
     loading.value = true

package/src/components/Modal/EasyConfirmationModal.vue ADDED Viewed

@@ -0,0 +1,68 @@
+<template>
+    <v-dialog v-model="dialog" width="700" persistent>
+        <v-card>
+            <v-card-title class="text-center mt-10">
+                <v-row class="textWarning">
+                    <v-col cols="4" class="d-flex justify-end">
+                        <i class="icon icon-octagon-alert warning-modal"></i>
+                    </v-col>
+                    <v-col cols="8" class="d-flex justify-start align-center text-wrap">
+                        {{ description }}
+                    </v-col>
+                </v-row>
+            </v-card-title>
+            <v-card-actions class="ma-4">
+                <v-row>
+                    <v-col class="d-flex justify-start">
+                        <v-btn color="error" variant="flat" @click="dialog = false">
+                            <i class="icon icon-x"></i> {{ cancelText }}
+                        </v-btn>
+                    </v-col>
+                    <v-col class="d-flex justify-end">
+                        <v-btn color="success" variant="flat" @click="confirm">
+                            <i class="icon icon-check"></i> {{ acceptText }}
+                        </v-btn>
+                    </v-col>
+                </v-row>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+<script setup lang="ts">
+import { ref, Ref } from 'vue'
+type propsType = {
+    description: string
+    acceptText: string
+    cancelText: string
+}
+defineProps<propsType>()
+const emit = defineEmits(['onConfirm'])
+const dialog: Ref<boolean> = ref(false)
+const itemId: Ref<string | number> = ref('')
+const open = (id: string | number) => {
+    itemId.value = id
+    dialog.value = true
+}
+const confirm = () => {
+    dialog.value = false
+    emit('onConfirm', itemId.value)
+}
+defineExpose({ open })
+</script>
+<style scoped lang="scss">
+.warning-modal {
+    font-size: 55px;
+    color: rgb(var(--v-theme-warning));
+}
+.textWarning {
+    .text {
+        font-size: 18px;
+        font-weight: 500;
+    }
+}
+</style>

package/src/components/Table/Actions/ActionBtn.vue ADDED Viewed

@@ -0,0 +1,30 @@
+<template>
+    <v-btn
+        v-if="typeof action.show === 'function' ? action.show(item) : true"
+        class="d-flex mr-1"
+        :color="action?.color ?? 'primary'"
+        @click="ClickActionItem"
+    >
+        <i v-if="action.icon" :class="action.icon" />
+    </v-btn>
+</template>
+<script setup lang="ts">
+import { HeaderActionDTO } from '../../../types/table'
+const props = defineProps<{
+    action: HeaderActionDTO
+    item: any
+}>()
+const emit = defineEmits(['onDelete'])
+const ClickActionItem = () => {
+    if (typeof props.action.onClick === 'function') {
+        props.action.onClick(props.item)
+    } else if (props.action.onClick === 'deletion') {
+        emit('onDelete', props.item)
+    }
+}
+</script>
+<style scoped></style>

package/src/components/Table/Actions/Menu.vue ADDED Viewed

@@ -0,0 +1,43 @@
+<template>
+    <v-menu v-if="typeof action.show === 'function' ? action.show(item) : true">
+        <template #activator="{ props: propsMenu }">
+            <v-btn :color="action?.color ?? 'primary'" v-bind="propsMenu">
+                {{ action?.label ?? '' }}
+                <i v-if="action?.icon" :class="action.icon"></i>
+            </v-btn>
+        </template>
+        <v-list>
+            <v-list-item
+                v-for="(itemMenu, index) in action.items"
+                v-show="typeof itemMenu.show === 'function' ? itemMenu.show(item) : true"
+                :key="index"
+                :value="index"
+            >
+                <v-list-item-title @click="ClickActionItem(itemMenu)">
+                    <i v-if="itemMenu.icon" :class="itemMenu.icon" />
+                    {{ itemMenu?.label ?? '-' }}
+                </v-list-item-title>
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+<script setup lang="ts">
+import { HeaderActionDTO, HeaderActionMenuItemsDTO } from '../../../types/table'
+const props = defineProps<{
+    action: HeaderActionDTO
+    item: any
+}>()
+const emit = defineEmits(['onDelete'])
+const ClickActionItem = (itemMenu: HeaderActionMenuItemsDTO) => {
+    if (typeof itemMenu.onClick === 'function') {
+        itemMenu.onClick(props.item)
+    } else if (itemMenu.onClick === 'deletion') {
+        emit('onDelete', props.item)
+    }
+}
+</script>
+<style scoped></style>

package/src/components/Table/ColumnValue.vue ADDED Viewed

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <component
+            :is="GetColumnValue()"
+            v-if="typeof props.header.cellRenderer === 'function'"
+        ></component>
+        <span v-else v-html="GetColumnValue()" />
+    </div>
+</template>
+<script setup lang="ts">
+import { h } from 'vue'
+import { HeaderDTO } from '../../types/table'
+import sanitizeHtml from 'sanitize-html'
+const props = defineProps<{
+    header: HeaderDTO
+    item: any
+}>()
+const GetColumnValue = () => {
+    let html = ''
+    if (typeof props.header.cellRenderer === 'function') {
+        const result = props.header.cellRenderer(props.item[props.header.value], props.item)
+        if (Array.isArray(result)) {
+            return h('div', {}, result)
+        }
+        return result
+    } else if (typeof props.header.valueFormatter === 'function') {
+        return props.header.valueFormatter(props.item[props.header.value], props.item)
+    } else {
+        html = props.item[props.header.value]
+        return sanitizeHtml(html)
+    }
+}
+</script>
+<style scoped></style>

package/src/components/Table/EasyTable.vue ADDED Viewed

@@ -0,0 +1,270 @@
+<template>
+    <v-container class="maintable">
+        <Headers
+            :id="id"
+            ref="headerRef"
+            :title="props.title"
+            :headers="props.headers"
+            :advanced-filters="props.advancedFilters"
+            :hard-filters="props.hardFilters"
+            :create="api?.create"
+            :show-export-data="showExportData"
+            :multiple-hard-filters="multipleHardFilters"
+            :multiple-deletion="multipleDeletion"
+            :selected="selected"
+            @multiple-delete="multipleConfirm"
+            @headers="updateDisplayHeaders"
+            @search="search"
+            @hard-filters="updateHardFilters"
+            @loading="(v) => (loading = v)"
+        >
+            <template #moreActions>
+                <slot name="moreActions"></slot>
+            </template>
+        </Headers>
+        <VDataTableServer
+            v-model="selected"
+            v-model:page="page"
+            v-model:items-per-page="itemsPerPage"
+            :headers="displayHeaders"
+            :items="items"
+            :show-select="showSelect"
+            :loading="loading"
+            :items-length="total"
+            :items-per-page-options="itemsPerPageOptions"
+            :class="$attrs.class"
+            :style="{
+                width: typeof $attrs.width === 'string' ? $attrs.width : 'auto',
+            }"
+            :height="calcHeight"
+            fixed-header
+            @update:sort-by="updateSort"
+            @update:sort-desc="updateSort"
+            @update:items-per-page="getData"
+            @update:page="getData"
+        >
+            <!-- eslint-disable -->
+            <template #header.actions>
+                <i class="icon icon-settings" v-bind="props" style="font-size: 20px"></i>
+            </template>
+            <template v-for="header in displayHeaders" #[getSlotItem(header)]="item: any">
+                <span
+                    v-if="header.type === 'actions'"
+                    style="display: flex; justify-content: center"
+                >
+                    <span v-for="(action, index) in header.actions" :key="index">
+                        <Menu
+                            v-if="action.type === 'menu'"
+                            :action="action"
+                            :item="item.item"
+                            @onDelete="confirm_deletion?.open(item.item?.id)"
+                        >
+                        </Menu>
+                        <ActionBtn
+                            v-else
+                            :action="action"
+                            :item="item.item"
+                            @onDelete="confirm_deletion?.open(item.item?.id)"
+                        >
+                        </ActionBtn>
+                    </span>
+                </span>
+                <ColumnValue v-else :header="header" :item="item.item"></ColumnValue>
+            </template>
+        </VDataTableServer>
+        <EasyConfirmationModal
+            ref="confirm_deletion"
+            :description="$i18n.t('table.deletion_description')"
+            :accept-text="$i18n.t('table.yes')"
+            :cancel-text="$i18n.t('table.no')"
+            @onConfirm="deletion"
+        />
+        <EasyConfirmationModal
+            ref="multiple_confirm_deletion"
+            :description="$i18n.t('table.multiple_deletion_description')"
+            :accept-text="$i18n.t('table.yes')"
+            :cancel-text="$i18n.t('table.no')"
+            @onConfirm="multipleDelete"
+        />
+    </v-container>
+</template>
+<script setup lang="ts">
+import Headers from './Headers/Headers.vue'
+import Menu from './Actions/Menu.vue'
+import ActionBtn from './Actions/ActionBtn.vue'
+import ColumnValue from './ColumnValue.vue'
+import {
+    AdvancedFiltersDTO,
+    HardFiltersDTO,
+    HeaderDTO,
+    PropsDataTableDTO,
+    SortDTO,
+} from '../../types/table'
+import { useI18n } from 'vue-i18n'
+import { onBeforeMount, onMounted, ref, Ref } from 'vue'
+import useHeadersStorage from '../../composables/useHeadersStorage'
+import EasyConfirmationModal from '../Modal/EasyConfirmationModal.vue'
+const props = withDefaults(defineProps<PropsDataTableDTO>(), {
+    showSelect: false,
+    multipleHardFilters: false,
+    multipleDeletion: false,
+    title: '',
+    hardFilters: () => [],
+    advancedFilters: () => [],
+    calcHeight: '',
+    showExportData: false,
+})
+const emit = defineEmits(['onLoaded', 'successDelete', 'errorDelete', 'fetchError'])
+const $i18n = useI18n()
+const displayHeaders: Ref<HeaderDTO[]> = ref([])
+const itemsPerPage: Ref<number> = ref(10)
+const page: Ref<number> = ref(1)
+const items: Ref<any[]> = ref([])
+const selected: Ref<any[]> = ref([])
+const sort: Ref<SortDTO | null> = ref(null)
+const filters: Ref<AdvancedFiltersDTO[]> = ref([])
+const hard_filters: Ref<HardFiltersDTO[]> = ref([])
+const total: Ref<number> = ref(0)
+const $useHeadersStorage = useHeadersStorage()
+const loading: Ref<boolean> = ref(false)
+const confirm_deletion: Ref<any> = ref(null)
+const multiple_confirm_deletion: Ref<any> = ref(null)
+const headerRef: Ref<any> = ref(null)
+const itemsPerPageOptions = ref([
+    { value: 10, title: '10' },
+    { value: 25, title: '25' },
+    { value: 50, title: '50' },
+    { value: 100, title: '100' },
+])
+function getSlotItem(header: HeaderDTO) {
+    return `item.${header.value}`
+}
+const deletion = (id: string | number) => {
+    if (!props.api?.delete) return
+    loading.value = true
+    fetch(`${props.api.delete}/${id}`, {
+        method: 'DELETE',
+    })
+        .then(async (response) => {
+            if (!response.ok) {
+                const err = await response.json()
+                return await Promise.reject(err)
+            }
+            return response.json()
+        })
+        .then(() => {
+            emit('successDelete')
+            getData()
+        })
+        .catch(async (error) => emit('errorDelete', error))
+        .finally(() => (loading.value = false))
+}
+const multipleDelete = () => {
+    if (!props.api?.multipleDelete) return
+    loading.value = true
+    fetch(`${props.api.multipleDelete}`, {
+        method: 'DELETE',
+        body: JSON.stringify({
+            ids: selected.value,
+        }),
+    })
+        .then(async (response) => {
+            if (!response.ok) {
+                const err = await response.json()
+                return await Promise.reject(err)
+            }
+            return response.json()
+        })
+        .then(() => {
+            emit('successDelete')
+            selected.value = []
+            getData()
+        })
+        .catch(async (error) => emit('errorDelete', error))
+        .finally(() => (loading.value = false))
+}
+const multipleConfirm = () => {
+    multiple_confirm_deletion.value?.open(0)
+}
+const getData = async () => {
+    loading.value = true
+    const params = new URLSearchParams({
+        sort: JSON.stringify(sort.value ?? {}),
+        filters: JSON.stringify(filters.value),
+        hard_filters: JSON.stringify(hard_filters.value),
+        page: page.value.toString(),
+        limit: itemsPerPage.value.toString(),
+    })
+    fetch(`${props.api.get}?${params}`, { method: 'GET' })
+        .then(async (response) => {
+            if (!response.ok) {
+                const err = await response.json()
+                return await Promise.reject(err)
+            }
+            return response.json()
+        })
+        .then((response: any) => {
+            items.value = response.data
+            total.value = response.page.total
+            headerRef.value?.updateExportDataTotal(total.value)
+            emit('onLoaded', items.value)
+        })
+        .catch(async (error) => emit('fetchError', error))
+        .finally(() => (loading.value = false))
+}
+const updateSort = (options: any[]) => {
+    if (options.length !== 0) {
+        sort.value = {
+            column: options[0].key,
+            sort: options[0].order,
+        }
+        headerRef.value?.updateExportSortData(sort.value)
+        page.value = 1
+        getData()
+    }
+}
+const updateHardFilters = (hard_filters_value: HardFiltersDTO[]) => {
+    hard_filters.value = hard_filters_value
+    page.value = 1
+    getData()
+}
+const search = (filters_value: AdvancedFiltersDTO[]) => {
+    filters.value = filters_value
+    page.value = 1
+    getData()
+}
+const updateDisplayHeaders = (headers: HeaderDTO[]) => {
+    displayHeaders.value = headers
+    getData()
+}
+onMounted(() => {
+    setTimeout(() => {
+        headerRef.value?.updateExportData(
+            props.api.get,
+            props.headers,
+            total.value,
+            sort.value,
+            filters.value,
+            hard_filters.value
+        )
+    }, 500)
+})
+onBeforeMount(() => {
+    const displayStorageHeaders: HeaderDTO[] = $useHeadersStorage.loadHeaders(
+        props.headers,
+        props.id
+    )
+    if (displayStorageHeaders.length !== 0) {
+        displayHeaders.value = displayStorageHeaders.filter((v: HeaderDTO) => !v?.hidden)
+    } else {
+        displayHeaders.value = props.headers.filter((v: HeaderDTO) => !v?.hidden)
+    }
+})
+defineExpose({ getData, loading })
+</script>
+<style scoped></style>