admins-components 1.2.0 → 1.2.1

package/src/components/TableToList.vue

@@ -1,281 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, type Ref } from "vue";
-import type { IFilterItem } from "./FilterControl.vue";
-import FilterControl from "./FilterControl.vue";
-import FilterCompact from "./FilterCompact.vue";
-import DropDownMenu from "./DropDownMenu.vue";
-import IconButton from "./IconButton.vue";
-import DropDownCallBack, {
-    type DropDownCallBackItem,
-} from "./DropDownCallBack.vue";
-import PaginatorControl, {
-    type PaginatorSettings,
-} from "./PaginatorControl.vue";
-
-const props = defineProps<{ items: any[]; config: TableToListConfig }>();
-
-defineEmits<{
-    (e: "pagesize", value: number): void;
-    (e: "page", value: number): void;
-}>();
-
-const visibleColumns = computed(() =>
-    props.config.columns.filter((c) => c.visible != false)
-);
-
-const visibleColumnsFilters = computed(() =>
-    props.config.columns.filter((c) => c.visible != false && c.filter)
-);
-
-const activeFilters = computed(() =>
-    visibleColumns.value.filter(
-        (c) => c.sort && c.sort.active && c.sort.active.value
-    )
-);
-
-const propCountPerCardColumn = computed(() => {
-    return Math.ceil(visibleColumns.value.length / props.config.smColCount);
-});
-
-const getCurrColumn = (propPosInCardColumn: number, cardColPos: number) => {
-    // unfortunately v-for count started from 1, therefore incoming numbers are not indexes (0 based), but postions (1 based)
-    var propIndex =
-        propPosInCardColumn -
-        1 +
-        (cardColPos - 1) * propCountPerCardColumn.value;
-
-    return propIndex < visibleColumns.value.length
-        ? visibleColumns.value[propIndex]
-        : null;
-};
-
-const getConvertedValue = (col: Column, item: any) => {
-    return col.converter
-        ? col.converter!(item[col.property], item)
-        : item[col.property];
-};
-
-const doSort = (col: Column) => {
-    if (col.sort && col.sort.active) {
-        let dst = !col.sort.active.value;
-
-        props.config.columns.forEach((c) => {
-            if (c.sort && c.sort.active) c.sort.active.value = false;
-        });
-
-        col.sort.active.value = dst;
-        col.sort.callback(dst ? col.property : "");
-    }
-};
-</script>
-
-<template>
-    <div class="t2l-table-view t2l-table-header-label">
-        <span class="t2l-select" v-if="config.selectableId"></span>
-        <!-- render each property as a cell -->
-        <span class="t2l-cell" v-for="vc in visibleColumns" :key="vc.property">
-            <IconButton
-                v-if="vc.sort"
-                :icon="vc.sort!.icon"
-                @click="doSort(vc)"
-                :active="vc.sort?.active?.value"
-            ></IconButton>
-            {{ vc.label }}
-        </span>
-        <!-- render action header if defined -->
-        <span class="t2l-cell" v-if="config.actionHeader">
-            {{ config.actionHeader }}
-        </span>
-    </div>
-    <div class="t2l-table-view t2l-table-header-filter">
-        <!-- render if selectable -->
-        <span class="t2l-select" v-if="config.selectableId"> </span>
-
-        <!-- render each property as a cell -->
-        <span class="t2l-cell" v-for="col in visibleColumns" :key="col.label">
-            <template v-if="col.filter">
-                <FilterControl :item="col.filter"></FilterControl>
-            </template>
-        </span>
-        <!-- render action header empty if defined -->
-        <span class="t2l-cell" v-if="config.actionHeader"> </span>
-    </div>
-    <div class="t2l-table-view t2l-rows">
-        <!-- render all items -->
-        <template v-for="item in items" :key="item">
-            <div class="t2l-row">
-                <div v-if="config.selectableId" class="t2l-select">
-                    <input
-                        class="form-check-input"
-                        type="checkbox"
-                        :id="item[config.selectableId!]"
-                        @change="item.selected = !item.selected"
-                    />
-                </div>
-
-                <!-- render values -->
-                <div
-                    class="t2l-cell"
-                    v-for="col in visibleColumns"
-                    :key="col.property"
-                    v-html="getConvertedValue(col, item)"
-                ></div>
-                <!-- redner actions -->
-                <div v-if="config.actions" class="t2l-cell t2l-actions">
-                    <template v-for="ac in config.actions" :key="ac">
-                        <button
-                            type="button"
-                            class="btn btn-outline-secondary"
-                            :title="ac.label"
-                            :disabled="!ac.enabled(item)"
-                            @click="ac.command(item)"
-                        >
-                            <i :class="ac.icon"></i>
-                        </button>
-                    </template>
-                </div>
-            </div>
-        </template>
-    </div>
-
-    <div class="t2l-card-view t2l-card-filters">
-        <!-- select order dropdown  -->
-        <div class="t2l-card-filter-order">
-            <DropDownCallBack
-                id="card-filter-order"
-                :default="
-                    {
-                        icon: 'fa-solid fa-chevron-down',
-                        label: 'rendezés',
-                    } as DropDownCallBackItem
-                "
-                :selected="
-                    activeFilters.length > 0 ? activeFilters[0].property : ''
-                "
-                :enabled="config.sortEnabled"
-                :options="
-                    ref(
-                        visibleColumns
-                            .filter((i) => i.sort)
-                            .map((i) => {
-                                const ret = {
-                                    icon: i.sort!.icon,
-                                    label: i.sort!.label,
-                                    value: i.property,
-                                    callback: i.sort!.callback,
-                                };
-
-                                return ret;
-                            }),
-                    ) as Ref<DropDownCallBackItem[]>
-                "
-            ></DropDownCallBack>
-        </div>
-        <!-- filter value selector -->
-        <div class="t2l-card-filter-search">
-            <FilterCompact
-                :items="
-                    visibleColumnsFilters.map((i) => {
-                        return {
-                            filter: i.filter!,
-                            icon: i.filterIcon,
-                            label: i.label,
-                        };
-                    }) as any[]
-                "
-            ></FilterCompact>
-        </div>
-    </div>
-    <div class="t2l-card-view t2l-rows">
-        <div class="t2l-row" v-for="(item, index) in items" :key="index">
-            <div class="t2l-card-select" v-if="config.selectableId">
-                <input
-                    class="form-check-input"
-                    type="checkbox"
-                    :id="item[config.selectableId!]"
-                    @change="item.selected = !item.selected"
-                />
-            </div>
-            <div
-                class="t2l-card-col"
-                v-for="cardColumnIndex in config.smColCount"
-                :key="cardColumnIndex"
-            >
-                <template v-for="pn in propCountPerCardColumn" :key="pn">
-                    <div
-                        class="t2l-property"
-                        v-if="getCurrColumn(pn, cardColumnIndex)"
-                    >
-                        <span class="t2l-label">{{
-                            getCurrColumn(pn, cardColumnIndex)!.label
-                        }}</span>
-                        <div
-                            v-html="getConvertedValue(getCurrColumn(pn, cardColumnIndex)!, item)"
-                        ></div>
-                    </div>
-                </template>
-            </div>
-            <div class="d-flex align-items-center">
-                <DropDownMenu
-                    v-if="props.config.actions"
-                    :item="item"
-                    :options="props.config.actions"
-                    label="..."
-                    :id="index.toString()"
-                    :right="true"
-                ></DropDownMenu>
-            </div>
-        </div>
-    </div>
-
-    <PaginatorControl
-        v-if="config.paginatorSettings"
-        :settings="config.paginatorSettings"
-        @pagesize="$emit('pagesize', $event)"
-        @page="$emit('page', $event)"
-    ></PaginatorControl>
-
-    <div
-        class="d-flex justify-content-center t2l-footer"
-        v-if="!config.paginatorSettings"
-    >
-        Elemek: {{ props.items.length }}
-    </div>
-</template>
-
-<script lang="ts">
-export interface TableToListConfig {
-    selectableId?: string | undefined;
-    columns: Column[];
-    smColCount: number;
-    sortEnabled: boolean;
-
-    actions?: Action[] | undefined;
-    actionHeader?: string | undefined;
-    paginatorSettings?: Ref<PaginatorSettings> | undefined;
-}
-
-export interface Column {
-    visible?: boolean | undefined;
-    label: string;
-    filter: IFilterItem | undefined;
-    filterIcon: string | undefined;
-    property: string;
-    sort?: undefined | Sort;
-    converter: undefined | ((v: any, item: any) => any);
-}
-
-export interface Sort {
-    label: string;
-    icon: string;
-    active: Ref<boolean> | undefined;
-    callback: (property: string) => any;
-}
-
-export interface Action {
-    icon: string;
-    label: string;
-    enabled: (item: any) => boolean;
-    command: (item: any) => any;
-}
-</script>

package/src/components/TableToListOptions.vue

@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
-import CheckBox from "./CheckBox.vue";
-
-const props = defineProps<{
-    colCount: number;
-    options: TableToListColumnOptions[];
-}>();
-
-const items = ref([] as TableToListColumnOptions[]);
-
-onMounted(() => {
-    items.value = props.options;
-    validate();
-});
-
-const itemsPerCol = computed(() =>
-    props.colCount != 0 ? Math.ceil(props.options.length / props.colCount) : 0
-);
-
-const getItem = (cp: number, ip: number) => {
-    var item = props.options[(cp - 1) * itemsPerCol.value + ip - 1];
-    return item;
-};
-
-const save = () => {
-    emits("save", items.value);
-};
-
-const emits = defineEmits<{
-    (e: "save", items: TableToListColumnOptions[]): void;
-}>();
-
-export interface TableToListColumnOptions {
-    label: string;
-    property: string;
-    checked: boolean;
-}
-
-const open = ref(false);
-
-const disabled = ref(true);
-const validate = () => {
-    disabled.value = items.value.filter((i) => i.checked).length <= 1;
-};
-</script>
-<template>
-    <div class="d-flex flex flex-row">
-        <div
-            class="d-flex flex-row align-items-center gap-2 options-header justify-content-start"
-            @click="open = !open"
-            v-if="!open"
-        >
-            <i class="fa-solid fa-cog"></i>
-            <div class="options-header-label">beállítások</div>
-        </div>
-
-        <div
-            class="d-flex flex-column gap-2 options-body flex-grow-1"
-            v-if="open"
-        >
-            <div class="options-header-label">Látható oszlopok</div>
-            <div class="d-flex flex-row">
-                <div
-                    class="d-flex flex-grow-1 flex-column"
-                    v-for="cp in colCount"
-                    :key="cp"
-                >
-                    <template v-for="ip in itemsPerCol" :key="ip">
-                        <template v-if="getItem(cp, ip)">
-                            <CheckBox
-                                :id="getItem(cp, ip).property"
-                                :label="getItem(cp, ip).label"
-                                :checked="getItem(cp, ip).checked"
-                                @changed="
-                                    items.find(
-                                        (i) => i.property == $event.id
-                                    )!.checked = $event.checked;
-                                    validate();
-                                "
-                            ></CheckBox>
-                        </template>
-                    </template>
-                </div>
-
-                <div class="d-flex align-items-end">
-                    <button
-                        class="btn btn-outline-secondary"
-                        type="button"
-                        @click="save"
-                        :disabled="disabled"
-                    >
-                        <i class="fa-solid fa-save"></i>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

package/src/components/TextListBox.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import IconButton from "./IconButton.vue";
-
-defineProps<{
-    items: TextListBoxItem[];
-}>();
-
-defineEmits<{ (e: "deleted", id: string): void }>();
-
-export interface TextListBoxItem {
-    id: string;
-    label: string;
-    hideDelete?: boolean;
-    showId?: boolean;
-    childrend: TextListBoxItem[] | undefined;
-}
-</script>
-<template>
-    <div class="tlb-container d-flex flex-column flex-grow-1">
-        <div class="d-flex flex-column" v-for="item in items" :key="item.id">
-            <div class="d-flex flex-row tlb-item">
-                <div
-                    class="d-flex flex-column flex-grow-1 flex-sm-row justify-content-between tlb-item"
-                >
-                    <div class="d-flex flex-grow-1" :id="item.id">
-                        {{ item.label }}
-                    </div>
-                    <div class="d-flex id" v-if="item.showId">
-                        {{ item.id }}
-                    </div>
-                </div>
-                <IconButton
-                    v-if="!item.hideDelete"
-                    icon="fa-solid fa-trash"
-                    @click="$emit('deleted', item.id)"
-                ></IconButton>
-            </div>
-            <div
-                class="d-flex flex-row align-items-center tlb-children-container"
-            >
-                <TextListBox
-                    v-if="item.childrend"
-                    :items="item.childrend"
-                    :showId="item.showId"
-                    :hideDelete="item.hideDelete"
-                ></TextListBox>
-            </div>
-        </div>
-    </div>
-</template>

package/src/components/ToastComponent.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const props = defineProps<{
-    defaultDisplayDuration: number;
-}>();
-
-const pollInterval = 500;
-
-const toasts = ref<Toast[]>([]);
-
-const addToast = (toast: Toast) => {
-    if (!toast.displayDuration)
-        toast.displayDuration = props.defaultDisplayDuration;
-
-    toast.id = new Date();
-
-    toasts.value.filter(function (t) {
-        return t.id !== toast.id;
-    });
-
-    toasts.value.push(toast);
-};
-
-defineExpose({
-    addToast,
-});
-
-export interface Toast {
-    title: string;
-    message: string;
-    type: "info" | "success" | "warning" | "error";
-    id?: Date;
-    displayDuration?: number;
-}
-setInterval(() => {
-    toasts.value = toasts.value.map((t) => {
-        t.displayDuration! -= pollInterval;
-        return t;
-    });
-    toasts.value = toasts.value.filter((t) => {
-        return t.displayDuration! > 0;
-    });
-}, pollInterval);
-</script>
-<template>
-    <div
-        v-if="toasts.length > 0"
-        class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-4 toast-zindex"
-    >
-        <div
-            v-for="toast in toasts"
-            :key="toast.message"
-            class="toast d-block"
-            :class="{
-                'toast-info': toast.type === 'info',
-                'toast-success': toast.type === 'success',
-                'toast-warning': toast.type === 'warning',
-                'toast-error': toast.type === 'error',
-            }"
-            role="alert"
-            aria-live="assertive"
-            aria-atomic="true"
-        >
-            <div class="toast-header">
-                <!-- <img src="..." class="rounded me-2" alt="..." /> -->
-                <strong class="me-auto">{{ toast.title }}</strong>
-                <small class="text-body-secondary">{{
-                    toast.id!.toLocaleTimeString()
-                }}</small>
-                <button
-                    type="button"
-                    class="btn-close"
-                    data-bs-dismiss="toast"
-                    aria-label="Close"
-                    @click="toasts = toasts.filter((t) => t.id !== toast.id)"
-                ></button>
-            </div>
-            <div class="toast-body" v-html="toast.message"></div>
-        </div>
-    </div>
-</template>

package/src/components/ToastWrapper.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
-import ToastComponent from './ToastComponent.vue';
-
-const toast = ref<typeof ToastComponent>();
-
-const listeners = [
-    {
-        id: 'toast-notification-message',
-        handler: (e: Event) => {
-            let error = (e as any).detail;
-            toast.value!.addToast({
-                title: error.title,
-                message: error.message,
-                type: error.severity,
-                displayDuration: error.displayDuration,
-            });
-        },
-    },
-    {
-        id: 'fetch-error',
-        handler: (e: Event) => {
-            let error = (e as any).detail;
-            toast.value!.addToast({
-                title: error.title,
-                message: error.message,
-                type: 'error',
-                displayDuration: 10000,
-            });
-        },
-    },
-];
-
-onMounted(() => {
-    listeners.forEach((l) => window.addEventListener(l.id, l.handler));
-});
-
-onUnmounted(() => {
-    listeners.forEach((l) => window.removeEventListener(l.id, l.handler));
-});
-</script>
-<template>
-    <ToastComponent ref="toast" :defaultDisplayDuration="5000"></ToastComponent>
-</template>

package/src/index.ts

@@ -1,56 +0,0 @@
-import "./assets/main.scss";
-import type { App } from "vue";
-import CheckBox from "./components/CheckBox.vue";
-import CheckBoxList from "./components/CheckBoxList.vue";
-import DropDown from "./components/DropDown.vue";
-import DropDownCallBack from "./components/DropDownCallBack.vue";
-import DropDownMenu from "./components/DropDownMenu.vue";
-import FilterCompact from "./components/FilterCompact.vue";
-import FilterControl from "./components/FilterControl.vue";
-import IconButton from "./components/IconButton.vue";
-import PaginatorControl from "./components/PaginatorControl.vue";
-import RadioButton from "./components/RadioButton.vue";
-import RadioButtonGroup from "./components/RadioButtonGroup.vue";
-import SpinningProgress from "./components/SpinningProgress.vue";
-import TableToList from "./components/TableToList.vue";
-import TextListBox from "./components/TextListBox.vue";
-import ToastComponent from "./components/ToastComponent.vue";
-import ToastWrapper from "./components/ToastWrapper.vue";
-
-export default {
-    install(app: App) {
-        app.component("CheckBox", CheckBox);
-        app.component("CheckBoxList", CheckBoxList);
-        app.component("DropDown", DropDown);
-        app.component("DropDownMenu", DropDownMenu);
-        app.component("DropDownCallBack", DropDownCallBack);
-        app.component("FilterCompact", FilterCompact);
-        app.component("FilterControl", FilterControl);
-        app.component("IconButton", IconButton);
-        app.component("PaginatorControl", PaginatorControl);
-        app.component("RadioButton", RadioButton);
-        app.component("RadioButtonGroup", RadioButtonGroup);
-        app.component("SpinningProgress", SpinningProgress);
-        app.component("TableToList", TableToList);
-        app.component("TextListBox", TextListBox);
-        app.component("ToastComponent", ToastComponent);
-        app.component("ToastWrapper", ToastWrapper);
-    },
-};
-
-export { CheckBox };
-export { CheckBoxList };
-export { DropDown };
-export { DropDownMenu };
-export { DropDownCallBack };
-export { FilterCompact };
-export { FilterControl };
-export { IconButton };
-export { PaginatorControl };
-export { RadioButton };
-export { RadioButtonGroup };
-export { SpinningProgress };
-export { TableToList };
-export { TextListBox };
-export { ToastComponent };
-export { ToastWrapper };

package/src/main.ts

@@ -1,5 +0,0 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
-
-createApp(App).mount('#app')