admins-components 1.2.0 → 1.2.1

package/src/assets/paginatorcontrol.scss

@@ -1,16 +0,0 @@
-.pc-container {
-    display: flex;
-    gap: 0.5rem;
-    padding: 1rem;
-    justify-content: center;
-    align-items: center;
-}
-
-.pc-input {
-    max-width: 200px;
-}
-
-.pc-dropdown {
-    max-width: 100px;
-    min-width: 50px;
-}

package/src/assets/propertyselector.scss

@@ -1,12 +0,0 @@
-.ps-header {
-    border: 4px solid #e25900;
-    background-color: #e25900 !important;
-    color: #fff;
-}
-
-.ps-body {
-    padding: 0.5rem;
-    border: 1px solid var(--bs-gray-400);
-    max-height: 300px;
-    overflow-y: auto;
-}

package/src/assets/tabletolist.scss

@@ -1,115 +0,0 @@
-.t2l-table-view {
-    display: flex;
-    flex-direction: column;
-}
-
-.t2l-table-header-label {
-    background-color: var(--bs-gray-200);
-    font-weight: bold;
-    border-bottom: 1px solid var(--bs-gray-400);
-    padding: 0.5rem;
-    flex-direction: row;
-    align-items: center;
-}
-
-.t2l-table-header-filter {
-    background-color: var(--bs-gray-200);
-    font-weight: bold;
-    border-bottom: 1px solid var(--bs-gray-400);
-    padding: 0.3rem;
-    flex-direction: row;
-    align-items: center;
-}
-
-.t2l-rows {
-    flex-direction: column;
-    flex: 1;
-    overflow-y: auto;
-}
-
-.t2l-row {
-    border-bottom: 1px solid var(--bs-gray-400);
-    padding: 0.3rem;
-    display: flex;
-    flex-direction: row;
-}
-
-.t2l-cell {
-    padding: 0.3rem;
-    display: flex;
-    flex: 1;
-    align-items: center;
-}
-
-.t2l-select {
-    padding: 0.3rem;
-    display: flex;
-    flex: 1;
-    align-items: center;
-    max-width: 3rem;
-}
-
-.t2l-cell-label {
-    display: none;
-}
-
-.t2l-actions {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
-}
-
-.t2l-card-view {
-    display: none;
-    flex-direction: column;
-}
-
-.t2l-card-col {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    gap: 1rem;
-    overflow-y: auto;
-    align-items: start;
-}
-
-.t2l-card-select {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-    max-width: 2rem;
-}
-
-.t2l-card-filters {
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    background-color: var(--bs-gray-200);
-}
-
-.t2l-property {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-
-.t2l-label {
-    font-weight: bold;
-}
-
-.t2l-footer {
-    padding: 1rem;
-    background-color: var(--bs-gray-200);
-}
-
-@media (max-width: 1024px) {
-    .t2l-table-view {
-        display: none;
-    }
-
-    .t2l-card-view {
-        display: flex;
-    }
-}

package/src/assets/tabletolistoptions.scss

@@ -1,22 +0,0 @@
-.options-header {
-    cursor: pointer;
-    font-size: 0.8rem;
-    padding: 0.2rem;
-    border-top: 1px solid var(--bs-gray-200);
-    border-right: 1px solid var(--bs-gray-200);
-    border-top-right-radius: 3px;
-}
-
-.options-header:hover {
-    opacity: 0.7;
-}
-
-.options-body {
-    font-size: 0.8rem;
-    padding: 1rem;
-    background-color: var(--bs-gray-100);
-}
-
-.options-header-label {
-    font-weight: bold;
-}

package/src/assets/textlistbox.scss

@@ -1,16 +0,0 @@
-.tlb-container {
-    cursor: default;
-}
-
-.tlb-children-container {
-    cursor: default;
-    padding-left: 1rem;
-}
-
-.tlb-item:hover {
-    background-color: var(--bs-gray-100);
-}
-
-.tlb-item .id {
-    color: var(--bs-gray-500);
-}

package/src/assets/toastcomponent.scss

@@ -1,23 +0,0 @@
-.toast-info {
-    background: var(--bs-blue);
-    color: white;
-}
-
-.toast-success {
-    background: var(--bs-green);
-    color: white;
-}
-
-.toast-warning {
-    background: var(--bs-orange);
-    color: white;
-}
-
-.toast-error {
-    background: var(--bs-red);
-    color: white;
-}
-
-.toast-zindex {
-    z-index: 1100;
-}

package/src/components/CheckBox.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-defineProps<{ id: string; label: string; checked: boolean }>();
-
-defineEmits<{
-    (e: "changed", option: { id: string; checked: boolean }): void;
-}>();
-</script>
-<template>
-    <div class="form-check">
-        <input
-            class="form-check-input"
-            type="checkbox"
-            :checked="checked"
-            value=""
-            :id="id"
-            @change="
-                $emit('changed', {
-                    id,
-                    checked: ($event as any).target.checked,
-                })
-            "
-        />
-        <label class="form-check-label" :for="id"> {{ label }} </label>
-    </div>
-</template>

package/src/components/CheckBoxList.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import CheckBox from "./CheckBox.vue";
-
-defineProps<{
-    items: CheckBoxListItem[];
-    callback: (id: string, checked: boolean) => any;
-}>();
-
-export interface CheckBoxListItem {
-    id: string;
-    label: string;
-    checked: boolean;
-
-    childrend: CheckBoxListItem[];
-}
-</script>
-<template>
-    <template v-for="item in items" :key="item.id">
-        <div class="cbl-container">
-            <CheckBox
-                :id="item.id"
-                :label="item.label"
-                :checked="item.checked"
-                @changed="callback($event.id, $event.checked)"
-            ></CheckBox>
-            <div class="cbl-childrend-container">
-                <CheckBoxList
-                    v-if="item.childrend"
-                    :items="item.childrend"
-                    :callback="callback"
-                ></CheckBoxList>
-            </div>
-        </div>
-    </template>
-</template>
-
-<style scoped>
-.cbl-container {
-    display: flex;
-    flex-direction: column;
-}
-
-.cbl-childrend-container {
-    display: flex;
-    flex-direction: column;
-    padding-left: 1rem;
-}
-</style>

package/src/components/DropDown.vue

@@ -1,203 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, watch, type Ref } from "vue";
-
-const props = defineProps<{
-    id: string;
-    label: string;
-    selected?: string | undefined | null;
-    options: Ref<DropDownItem[]>;
-    opentop?: boolean;
-    disableFilter?: boolean;
-    storeselected?: boolean;
-    filterevent?: boolean;
-    disabled?: boolean;
-}>();
-
-watch(props.options, () => {
-    if (props.filterevent) {
-        filtered.value = props.options.value;
-    }
-});
-
-watch(
-    () => props.selected,
-    () => {
-        trySetSelected();
-    }
-);
-
-watch(
-    () => props.label,
-    () => {
-        trySetSelected();
-    }
-);
-
-const emits = defineEmits<{
-    (e: "selected", option: DropDownItem): void;
-    (e: "filtered", filter: string): void;
-}>();
-
-const select = (o: DropDownItem) => {
-    if (!props.storeselected) display.value = o.label;
-
-    emits("selected", o);
-};
-
-const CLEAR = "törlés";
-const display = ref("");
-
-const trySetSelected = () => {
-    if (props.options.value) {
-        const found = props.options.value.find((i) => i.id == props.selected);
-        if (found) {
-            display.value = found.label;
-        } else {
-            filter("");
-            display.value = props.label;
-        }
-    }
-};
-
-onMounted(() => {
-    if (props.label) display.value = props.label;
-
-    trySetSelected();
-
-    lastFilter = "";
-
-    document.addEventListener("click", function () {
-        if (disp.value == "block") disp.value = "none";
-    });
-
-    window.addEventListener("scrolled", function () {
-        if (disp.value == "block") disp.value = "none";
-    });
-
-    setMenuTop();
-});
-
-let lastFilter = "";
-const filter = (sel: string) => {
-    lastFilter = sel;
-
-    if (!props.filterevent) {
-        if (sel == "") filtered.value = props.options.value;
-        else
-            filtered.value = props.options.value.filter((i) =>
-                i.label.toLowerCase().includes(sel.toLowerCase())
-            );
-    } else {
-        emits("filtered", sel);
-    }
-};
-
-const filtered = ref([] as DropDownItem[]);
-
-const clear = () => {
-    select({ label: props.label!, id: "" });
-    filter("");
-};
-
-const showDelayed = () => {
-    if (disp.value == "block") {
-        disp.value = "none";
-        return;
-    }
-    setTimeout(() => {
-        disp.value = "block";
-    }, 10);
-
-    setTimeout(setMenuTop, 20);
-};
-
-const setMenuTop = () => {
-    const ddtb = DropDownTriggerButton.value as any;
-    const ddm = DropDownMenu.value as any;
-
-    if (props.opentop) {
-        ddm.style.top =
-            ddtb.getBoundingClientRect().y - ddm.offsetHeight + "px";
-    } else {
-        ddm.style.top =
-            ddtb.getBoundingClientRect().y + ddtb.offsetHeight + "px";
-
-        // it is needed if the dropdown is displayed in an absolute positioned stuff, uggly but working
-        if (
-            ddtb.getBoundingClientRect().y - ddm.getBoundingClientRect().y !=
-            -ddtb.offsetHeight
-        ) {
-            ddm.style.top =
-                parseInt(ddm.style.top.substring(0, ddm.style.top.length - 2)) +
-                (ddtb.getBoundingClientRect().y -
-                    ddm.getBoundingClientRect().y) +
-                ddtb.offsetHeight +
-                "px";
-        }
-    }
-
-    if (ddSearch.value) (ddSearch as any).value.focus();
-};
-
-const DropDownTriggerButton = ref(null);
-const DropDownMenu = ref(null);
-
-const disp = ref("none" as "none" | "block");
-
-const ddSearch = ref(null);
-</script>
-
-<script lang="ts">
-export interface DropDownItem {
-    icon?: string;
-    label: string;
-    id: string;
-}
-</script>
-
-<template>
-    <div :id="id" class="dd-flex">
-        <button
-            ref="DropDownTriggerButton"
-            class="btn btn-outline-secondary dd-toggle dd-flex"
-            type="button"
-            :disabled="disabled"
-            @click="
-                filter(lastFilter);
-                showDelayed();
-            "
-        >
-            <div class="dd-label">{{ display }}</div>
-        </button>
-        <div class="dd-menu" :style="{ display: disp }" ref="DropDownMenu">
-            <button
-                v-if="display != props.label"
-                type="button"
-                class="btn btn-outline-secondary dd-button"
-                @click="clear()"
-            >
-                {{ CLEAR }}
-            </button>
-            <input
-                ref="ddSearch"
-                v-if="!disableFilter"
-                type="text "
-                class="form-control"
-                placeholder="keresés"
-                @input="filter(($event.target as any).value)"
-                @click="$event.stopPropagation()"
-            />
-            <div class="dd-item-list">
-                <div
-                    v-for="o in filtered"
-                    :key="o.id"
-                    class="dd-item"
-                    @click="select(o)"
-                >
-                    <i v-if="o.icon" :class="o.icon" class="dd-item__icon"></i
-                    >{{ o.label }}
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

package/src/components/DropDownCallBack.vue

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, type Ref } from "vue";
-
-const props = defineProps<{
-    id: string;
-    default: DropDownCallBackItem;
-    selected?: string;
-    enabled?: boolean;
-    options: Ref<DropDownCallBackItem[]>;
-}>();
-
-const select = (o: DropDownCallBackItem) => {
-    if (o == props.default) {
-        display.value.callback("");
-    }
-
-    display.value = o;
-    display.value.callback(display.value.value);
-};
-
-const CLEAR = "törlés";
-const display = ref(props.default);
-
-const trySetSelected = () => {
-    if (props.selected && props.options.value) {
-        const found = props.options.value.find(
-            (i) => i.value == props.selected
-        );
-        if (found) {
-            display.value = found;
-        }
-    }
-};
-
-onMounted(() => {
-    trySetSelected();
-
-    document.addEventListener("click", function () {
-        if (disp.value == "block") disp.value = "none";
-    });
-});
-
-export interface DropDownCallBackItem {
-    icon?: string;
-    label: string;
-    value: string;
-    callback: (property: string) => any;
-}
-
-const showDelayed = () => {
-    setTimeout(() => {
-        disp.value = "block";
-    }, 10);
-
-    setTimeout(() => {
-        top.value = (DropDownTriggerButton.value as any).offsetHeight;
-    }, 20);
-};
-
-const DropDownTriggerButton = ref(null);
-const DropDownMenu = ref(null);
-const top = ref(0);
-
-const disp = ref("none" as "none" | "block");
-</script>
-
-<template>
-    <div class="ddc-flex" :id="id">
-        <button
-            ref="DropDownTriggerButton"
-            class="btn btn-outline-secondary ddc-button"
-            type="button"
-            :disabled="!enabled"
-            @click="showDelayed()"
-        >
-            <span class="ddc-row"
-                ><i :class="display.icon" class="ddc-icon"></i
-                ><span class="ddc-label">{{ display.label }}</span></span
-            >
-        </button>
-        <div
-            class="ddc-menu"
-            :style="{ display: disp, 'margin-top': top + 'px' }"
-            ref="DropDownMenu"
-        >
-            <button
-                v-if="display != props.default"
-                type="button"
-                class="btn btn-outline-secondary ddc-button"
-                @click="select(props.default)"
-            >
-                {{ CLEAR }}
-            </button>
-            <div class="dd-item-list">
-                <div
-                    v-for="o in options.value"
-                    :key="o.label"
-                    class="ddc-item"
-                    @click="select(o)"
-                >
-                    <span class="ddc-item"
-                        ><i :class="o.icon" class="ddc-icon"></i
-                        ><span class="ddc-label">{{ o.label }}</span></span
-                    >
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

package/src/components/DropDownMenu.vue

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-
-const props = defineProps<{
-    label?: string;
-    icon?: string;
-    options: DropDownMenuItem[];
-    item: any;
-    id: string;
-    right?: boolean;
-}>();
-
-export interface DropDownMenuItem {
-    icon: string;
-    label: string;
-    command: (item: any) => any;
-}
-
-onMounted(() => {
-    document.addEventListener("click", function () {
-        if (show.value) show.value = false;
-    });
-});
-
-const show = ref(false);
-
-const showDelayed = () => {
-    setTimeout(() => {
-        show.value = true;
-    }, 10);
-
-    setTimeout(setMenuTop, 20);
-};
-
-const setMenuTop = () => {
-    const ddtb = DropDownTriggerButton.value as any;
-    const ddm = DropDownMenu.value as any;
-
-    ddm.style.top = ddtb.getBoundingClientRect().y + ddtb.offsetHeight + "px";
-
-    // it is needed if the dropdown is displayed in an absolute positioned stuff, uggly but working
-    if (
-        ddtb.getBoundingClientRect().y - ddm.getBoundingClientRect().y !=
-        -ddtb.offsetHeight
-    ) {
-        ddm.style.top =
-            parseInt(ddm.style.top.substring(0, ddm.style.top.length - 2)) +
-            (ddtb.getBoundingClientRect().y - ddm.getBoundingClientRect().y) +
-            ddtb.offsetHeight +
-            "px";
-    }
-    ddm.style.left =
-        ddtb.getBoundingClientRect().x - (props.right ? 100 : 0) + "px";
-};
-
-const DropDownTriggerButton = ref(null);
-const DropDownMenu = ref(null);
-const top = ref(0);
-</script>
-
-<template>
-    <div class="d-flex" :id="id">
-        <button
-            ref="DropDownTriggerButton"
-            class="btn btn-outline-secondary"
-            type="button"
-            @click="showDelayed()"
-        >
-            <span class="ddm-label" v-if="label">{{ label }} </span>
-            <span class="ddm-label" v-if="icon"><i :class="icon"></i></span>
-        </button>
-        <div
-            class="ddm-menu"
-            v-if="show"
-            ref="DropDownMenu"
-            :style="{ 'margin-top': top + 'px' }"
-        >
-            <div
-                v-for="opt in options"
-                :key="opt.icon"
-                class="ddm-item"
-                @click="opt.command(item)"
-            >
-                <i :class="opt.icon"></i>{{ opt.label }}
-            </div>
-        </div>
-    </div>
-</template>