admins-components 1.1.0 → 1.2.0

package/src/assets/tabletolist.scss

@@ -0,0 +1,115 @@
+.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

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,16 @@
+.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

@@ -0,0 +1,23 @@
+.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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,48 @@
+<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

@@ -0,0 +1,203 @@
+<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

@@ -0,0 +1,109 @@
+<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

@@ -0,0 +1,88 @@
+<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>