admins-components 1.2.0 → 1.2.1

package/src/components/FilterCompact.vue

@@ -1,146 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
-import DropDownMenu from "./DropDownMenu.vue";
-import type { DropDownMenuItem } from "./DropDownMenu.vue";
-import type {
-    FilterDate,
-    FilterDropDown,
-    FilterText,
-    IFilterItem,
-} from "./FilterControl.vue";
-import DropDown from "./DropDown.vue";
-
-const props = defineProps<{
-    items: {
-        filter: FilterDate | FilterDropDown | FilterText;
-        icon: string;
-        label: string;
-    }[];
-}>();
-
-const selected = ref(0);
-const last = ref(0);
-const filter = computed(() => props.items[selected.value].filter);
-
-const select = (i: number) => {
-    let li = props.items[last.value];
-
-    (li.filter as IFilterItem).filtered(li.filter.key, "");
-
-    selected.value = i;
-    last.value = i;
-
-    ddIKey.value += 1;
-};
-
-const options = ref(undefined as DropDownMenuItem[] | undefined);
-
-onMounted(() => {
-    let its = [];
-    for (let i = 0; i < props.items.length; i++) {
-        its.push({
-            icon: props.items[i].icon,
-            label: props.items[i].label,
-            command: () => select(i),
-        });
-    }
-
-    options.value = its as DropDownMenuItem[];
-});
-
-export interface FilterDateFilter {
-    from: string;
-    untill: string;
-}
-
-const dateFilter = ref({} as FilterDateFilter);
-const ddISelected = ref(undefined as string | undefined);
-
-const ddIKey = ref(0);
-</script>
-
-<template>
-    <div class="fltrc-container">
-        <DropDownMenu
-            v-if="options"
-            id="ddm"
-            :icon="items[selected].icon"
-            :item="items[selected]"
-            label=""
-            :options="options"
-        ></DropDownMenu>
-        <div class="fltrc-container">
-            <template v-if="filter.type == 'text'">
-                <input
-                    type="text"
-                    class="form-control"
-                    :placeholder="(filter as FilterText).placeholder"
-                    :value="(filter as IFilterItem).defaultv ?? ''"
-                    @input="
-                        filter.filtered(
-                            filter.key,
-                            ($event.target as any).value
-                        );
-                        (filter as IFilterItem).defaultv = (
-                            $event.target as any
-                        ).value;
-                    "
-                />
-            </template>
-
-            <template v-if="filter.type == 'date'">
-                <div class="d-flex flex-row input-group align-items-center">
-                    <input
-                        type="date"
-                        class="form-control"
-                        :value="(filter as FilterDate).defFrom ?? ''"
-                        @input="
-                            dateFilter.from =
-                                ($event.target as any).value == ''
-                                    ? null
-                                    : ($event.target as any).value;
-                            (filter as FilterDate).defFrom =
-                                ($event.target as any).value == ''
-                                    ? null
-                                    : ($event.target as any).value;
-                            filter.filtered(filter.key, dateFilter);
-                        "
-                    />
-                    <span class="input-group-text">-</span>
-                    <input
-                        type="date"
-                        class="form-control"
-                        :value="(filter as FilterDate).defTill ?? ''"
-                        @input="
-                            dateFilter.untill =
-                                ($event.target as any).value == ''
-                                    ? null
-                                    : ($event.target as any).value;
-                            (filter as FilterDate).defTill =
-                                ($event.target as any).value == ''
-                                    ? null
-                                    : ($event.target as any).value;
-                            filter.filtered(filter.key, dateFilter);
-                        "
-                    />
-                </div>
-            </template>
-
-            <template v-if="filter.type == 'dropdown'">
-                <DropDown
-                    :key="ddIKey"
-                    :selected="ddISelected"
-                    :options="(filter as FilterDropDown).options"
-                    :filterevent="(filter as FilterDropDown).filterevent"
-                    @filtered="
-                        if ((filter as FilterDropDown).onfiltered)
-                            (filter as FilterDropDown).onfiltered!($event);
-                    "
-                    :id="filter.key"
-                    :label="(filter as FilterDropDown).label"
-                    @selected="filter.filtered(filter.key, $event.id)"
-                ></DropDown>
-            </template>
-        </div>
-    </div>
-</template>

package/src/components/FilterControl.vue

@@ -1,133 +0,0 @@
-<script lang="ts">
-export interface IFilterItem {
-    type: "text" | "date" | "dropdown";
-    key: string;
-    filtered: (key: string, value: any) => any;
-    defaultv?: string | undefined;
-}
-
-export class FilterText implements IFilterItem {
-    constructor(
-        public key: string,
-        public placeholder: string,
-        public filtered: (key: string, value: string) => any
-    ) {
-        this.type = "text";
-    }
-
-    type: "text";
-}
-
-export class FilterDropDown implements IFilterItem {
-    constructor(
-        public key: string,
-        public label: string,
-        public options: Ref<DropDownItem[]>,
-        public filterevent: boolean | undefined,
-        public onfiltered: undefined | ((v: string) => any),
-        public filtered: (key: string, value: string) => any
-    ) {
-        this.type = "dropdown";
-    }
-
-    type: "dropdown";
-}
-
-export class FilterDate implements IFilterItem {
-    constructor(
-        public key: string,
-        public label: string,
-        public filtered: (key: string, value: FilterDateFilter) => any,
-        public defFrom?: string | undefined,
-        public defTill?: string | undefined
-    ) {
-        this.type = "date";
-    }
-
-    type: "date";
-}
-
-export interface FilterDateFilter {
-    from: string;
-    untill: string;
-}
-
-const dateFilter = ref({} as FilterDateFilter);
-</script>
-
-<script setup lang="ts">
-import { ref, type Ref, onMounted } from "vue";
-import DropDown, { type DropDownItem } from "./DropDown.vue";
-
-const props = defineProps<{ item: IFilterItem }>();
-
-onMounted(() => {
-    if (props.item.type == "dropdown") {
-        const item = props.item as FilterDropDown;
-        ddISelected.value = item.options.value.find(
-            (o: any) => o.id == props.item.defaultv
-        )?.id;
-    }
-});
-
-const ddISelected = ref(undefined as string | undefined);
-</script>
-
-<template>
-    <div class="fltrctrl-container">
-        <template v-if="item.type == 'text'">
-            <input
-                type="text"
-                class="form-control"
-                :placeholder="(item as FilterText).placeholder"
-                :value="item.defaultv ?? ''"
-                @input="item.filtered(item.key, ($event.target as any).value)"
-            />
-        </template>
-
-        <template v-if="item.type == 'date'">
-            <div class="d-flex flex-row input-group align-items-center">
-                <input
-                    type="date"
-                    class="form-control"
-                    :value="(item as FilterDate).defFrom ?? ''"
-                    @input="
-                        dateFilter.from =
-                            ($event.target as any).value == ''
-                                ? null
-                                : ($event.target as any).value;
-                        item.filtered(item.key, dateFilter);
-                    "
-                />
-                <span class="input-group-text">-</span>
-                <input
-                    type="date"
-                    class="form-control"
-                    :value="(item as FilterDate).defTill ?? ''"
-                    @input="
-                        dateFilter.untill =
-                            ($event.target as any).value == ''
-                                ? null
-                                : ($event.target as any).value;
-                        item.filtered(item.key, dateFilter);
-                    "
-                />
-            </div>
-        </template>
-
-        <template v-if="item.type == 'dropdown'">
-            <DropDown
-                :selected="ddISelected"
-                :options="ref((item as FilterDropDown).options)"
-                :filterevent="(item as FilterDropDown).filterevent"
-                @filtered="
-                    if ((item as FilterDropDown).onfiltered)
-                        (item as FilterDropDown).onfiltered!($event);
-                "
-                :id="item.key"
-                :label="(item as FilterDropDown).label"
-                @selected="item.filtered(item.key, $event.id)"
-            ></DropDown>
-        </template>
-    </div>
-</template>

package/src/components/IconButton.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = defineProps<{
-    icon: string;
-    active?: boolean;
-    big?: boolean;
-}>();
-
-const _class = computed(
-    () => `${props.icon} ${props.big ? "ib-button-big" : ""}`
-);
-
-const emits = defineEmits<{
-    (e: "click"): void;
-}>();
-</script>
-
-<template>
-    <div @click="emits('click')" class="ib-container">
-        <div class="ib-button" :class="{ 'ib-button-active': active }">
-            <i :class="_class"></i>
-        </div>
-    </div>
-</template>

package/src/components/PaginatorControl.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { ref, type Ref, computed, watch } from "vue";
-import DropDown, { type DropDownItem } from "./DropDown.vue";
-
-export interface PaginatorSettings {
-    total: number;
-    pagesize: number;
-    page: number;
-    sizes: number[];
-}
-
-const props = defineProps<{ settings: Ref<PaginatorSettings> }>();
-const emits = defineEmits<{
-    (e: "pagesize", value: number): void;
-    (e: "page", value: number): void;
-}>();
-
-const getOptions = () => {
-    let os = ref([]) as Ref<DropDownItem[]>;
-
-    props.settings.value.sizes.forEach((s) =>
-        os.value.push({ label: s.toString(), id: s.toString() })
-    );
-
-    return os;
-};
-
-const page = ref(1);
-
-watch(
-    () => props.settings.value,
-    () => {
-        page.value = 1;
-    }
-);
-
-const pageMax = computed(
-    () =>
-        Math.floor(props.settings.value.total / props.settings.value.pagesize) +
-        1
-);
-
-const dec = () => {
-    if (page.value > 1) {
-        page.value -= 1;
-        emits("page", page.value);
-    }
-};
-
-const inc = () => {
-    if (page.value < pageMax.value) {
-        page.value += 1;
-        emits("page", page.value);
-    }
-};
-</script>
-<template>
-    <div class="pc-container">
-        <button class="btn btn-outline-secondary" @click="dec">&#60;</button>
-        <input
-            class="form-control pc-input"
-            type="number"
-            :value="page"
-            min="1"
-            :max="pageMax"
-            @change="$emit('page', ($event.target as any).value)"
-        />/{{ pageMax }}
-        <button class="btn btn-outline-secondary" @click="inc">&#62;</button>
-        <DropDown
-            :opentop="true"
-            class="pc-dropdown"
-            id="pagecount"
-            label="10"
-            :selected="settings.value.pagesize.toString()"
-            :options="getOptions()"
-            @selected="
-                page = 1;
-                $emit('pagesize', parseInt($event.id));
-            "
-        ></DropDown>
-    </div>
-</template>

package/src/components/RadioButton.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-defineProps<{ group: string; label: string; id: any; selected?: boolean }>();
-
-defineEmits<{
-    (e: "selected", id: any): any;
-}>();
-</script>
-
-<template>
-    <div class="form-check">
-        <input
-            class="form-check-input"
-            type="radio"
-            :name="group"
-            :id="id"
-            :checked="selected"
-            @change="$emit('selected', id)"
-        />
-        <label class="form-check-label" :for="id"> {{ label }} </label>
-    </div>
-</template>

package/src/components/RadioButtonGroup.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import RadioButton from "./RadioButton.vue";
-
-export interface RadioButtonGroupItem {
-    label: string;
-    id: any;
-    selected?: boolean;
-}
-defineProps<{ group: string; items: RadioButtonGroupItem[] }>();
-
-defineEmits<{
-    (e: "selected", id: any): any;
-}>();
-</script>
-<template>
-    <div class="d-flex flex-column gap-2 justify-content-around">
-        <RadioButton
-            v-for="item in items"
-            :key="item.id"
-            :id="item.id"
-            :label="item.label"
-            :group="group"
-            :selected="item.selected"
-            @selected="$emit('selected', $event)"
-        >
-        </RadioButton>
-    </div>
-</template>

package/src/components/SpinningProgress.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-defineProps<{ loading: boolean }>();
-</script>
-
-<template>
-    <div class="spinner-border" role="status" v-if="loading">
-        <span class="visually-hidden">Loading...</span>
-    </div>
-</template>