adminforth 1.6.2-next.1 → 1.6.2-next.3

package/dist/spa/src/afcl/VerticalTabs.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="md:flex">
-    <ul class="flex-column space-y space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0">
-      <li v-for="tab in tabs" :key="`${tab}-tab-controll`">
-        <a 
-          href="#"
-          @click="activeTab = tab"
-          class="inline-flex items-center px-4 py-3 rounded-lg w-full"
-          :class="tab === activeTab ? 'text-lightPrimaryContrast bg-lightPrimary active dark:bg-darkPrimary' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white'"
-          aria-current="page"
-        >
-          <slot :name="`tab:${tab}`"></slot>
-        </a>
-      </li>
-    </ul>
-    <div class="ps-6  text-medium text-gray-500 dark:text-gray-400  w-full ">
-      <slot :name="activeTab"></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { onMounted, useSlots, ref, type Ref } from 'vue';
-  const tabs : Ref<string[]> = ref([]);
-  const activeTab = ref('');
-  const props = defineProps({
-    activeTab: {
-      type: String
-    }
-  });
-  const emites = defineEmits([
-    'update:activeTab',
-  ]);
-  onMounted(() => {
-    const slots = useSlots();
-    tabs.value = Object.keys(slots).reduce((tbs: string[], tb: string) => {
-      if (tb.startsWith('tab:')) {
-        tbs.push(tb.replace('tab:', ''));
-      }
-      return tbs;
-    }, []);
-    if (tabs.value.length > 0) {
-      activeTab.value = tabs.value[0];
-    }
-  });
-
-  
-
-</script>

package/dist/spa/src/afcl/index.ts

@@ -1,20 +0,0 @@
-
-
-export { default as Select } from './Select.vue';
-export { default as Link } from './Link.vue';
-export { default as Button } from './Button.vue';
-export { default as Input } from './Input.vue';
-export { default as Tooltip } from './Tooltip.vue';
-export { default as LinkButton } from './LinkButton.vue';
-export { default as VerticalTabs } from './VerticalTabs.vue';
-export { default as Checkbox } from './Checkbox.vue';
-export { default as Dropzone } from './Dropzone.vue';
-export { default as AreaChart } from './AreaChart.vue';
-export { default as BarChart } from './BarChart.vue';
-export { default as PieChart } from './PieChart.vue';
-export { default as Table } from './Table.vue';
-export { default as ProgressBar } from './ProgressBar.vue';
-export { default as Spinner } from './Spinner.vue';
-export { default as Skeleton } from './Skeleton.vue';
-
-

package/dist/spa/src/assets/base.css

@@ -1,2 +0,0 @@
-
-

package/dist/spa/src/assets/logo.svg

@@ -1,19 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1_8)">
-<path d="M8.034 6.006V13H6.097V12.194C5.59433 12.8007 4.86633 13.104 3.913 13.104C3.25433 13.104 2.65633 12.9567 2.119 12.662C1.59033 12.3673 1.17433 11.947 0.871 11.401C0.567667 10.855 0.416 10.2223 0.416 9.503C0.416 8.78367 0.567667 8.151 0.871 7.605C1.17433 7.059 1.59033 6.63867 2.119 6.344C2.65633 6.04933 3.25433 5.902 3.913 5.902C4.80567 5.902 5.50333 6.18367 6.006 6.747V6.006H8.034ZM4.264 11.44C4.77533 11.44 5.2 11.2667 5.538 10.92C5.876 10.5647 6.045 10.0923 6.045 9.503C6.045 8.91367 5.876 8.44567 5.538 8.099C5.2 7.74367 4.77533 7.566 4.264 7.566C3.744 7.566 3.315 7.74367 2.977 8.099C2.639 8.44567 2.47 8.91367 2.47 9.503C2.47 10.0923 2.639 10.5647 2.977 10.92C3.315 11.2667 3.744 11.44 4.264 11.44Z" fill="url(#paint0_linear_1_8)"/>
-<path d="M13.317 5.538C12.589 5.538 12.0387 5.69833 11.666 6.019C11.2933 6.331 11.107 6.80333 11.107 7.436V7.995H14.851V9.685H11.107V13H9.001V7.449C9.001 6.279 9.365 5.369 10.093 4.719C10.8297 4.069 11.8567 3.744 13.174 3.744C13.694 3.744 14.1837 3.80033 14.643 3.913C15.1023 4.017 15.501 4.173 15.839 4.381L15.189 6.045C14.669 5.707 14.045 5.538 13.317 5.538Z" fill="url(#paint1_linear_1_8)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_1_8" x1="1.5" y1="6.93333" x2="7.31883" y2="11.8926" gradientUnits="userSpaceOnUse">
-<stop stop-color="#656E7A"/>
-<stop offset="1" stop-color="#99A6B8"/>
-</linearGradient>
-<linearGradient id="paint1_linear_1_8" x1="12.5" y1="3.73333" x2="9.68642" y2="12.7016" gradientUnits="userSpaceOnUse">
-<stop stop-color="#48C5FF"/>
-<stop offset="1" stop-color="#A1E1FF"/>
-</linearGradient>
-<clipPath id="clip0_1_8">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>

package/dist/spa/src/components/AcceptModal.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { useModalStore } from '@/stores/modal';
-
-const modalStore = useModalStore();
-</script>
-
-<template>
-  <Teleport to="body">
-    <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
-        <div class="relative p-4 w-full max-w-md max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 " >
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black">
-                <button type="button"@click="modalStore.togleModal" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
-                    <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-                    </svg>
-                    <span class="sr-only">{{ $t('Close modal') }}</span>
-                </button>
-                <div class="p-4 md:p-5 text-center">
-                    <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
-                    </svg>
-                    <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
-                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
-                        {{ modalStore?.modalContent?.acceptText }}
-                    </button>
-                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{ modalStore?.modalContent?.cancelText }}</button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-</Teleport>
-</template>
-
-<style scoped>
-.modal {
-  position: fixed;
-  z-index: 999;
-  top: 20%;
-  left: 50%;
-  width: 300px;
-  margin-left: -150px;
-}
-</style>

package/dist/spa/src/components/Breadcrumbs.vue

@@ -1,41 +0,0 @@
-<template>
-  <nav class="flex" aria-label="Breadcrumb">
-      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
-        <li class="inline-flex items-center">
-          <RouterLink :to="{name: 'home'}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-lightPrimary dark:text-gray-400 dark:hover:text-white">
-            <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-              <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
-            </svg>
-            {{ $t('Home') }}
-          </RouterLink>
-        </li>
-        <li>
-          <div class="flex items-center">
-            <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
-            </svg>
-            <RouterLink :to="{name: 'resource-list', params: { resourceId: $route.params.resourceId }}" class="text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">{{ coreStore.resourceById[$route.params.resourceId]?.label }}</RouterLink>
-          </div>
-        </li>
-
-        <li v-if="$route.params.primaryKey">
-          <div class="flex items-center">
-            <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
-            </svg>
-            <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400
-              max-w-80 truncate">
-              {{ $route.name === 'resource-edit' ? $t('Edit') : $t('Show') }} {{ coreStore.record?._label }}</span>
-          </div>
-        </li>
-
-       
-      </ol>
-    </nav>
-</template>
-
-<script setup>
-import { useCoreStore } from '@/stores/core';
-
-const coreStore = useCoreStore()
-</script>

package/dist/spa/src/components/BreadcrumbsWithButtons.vue

@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <div class="flex items-center justify-between mb-3 flex-wrap gap-y-2 gap-2">
-      <Breadcrumbs />
-      <div class="flex items-center space-x-1 flex-wrap gap-y-1">
-        <slot></slot>
-      </div>
-    </div>
-    <div class="flex items-center justify-between mb-3 flex-wrap gap-y-2 gap-2" v-if="coreStore.resourceColumnsError">
-      <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
-        <span class="font-medium">{{ $t('Error!')}}</span> {{ coreStore.resourceColumnsError }}
-      </div>
-    </div>
-  </div>
-
-</template>
-
-<script setup>
-import Breadcrumbs from '@/components/Breadcrumbs.vue';
-
-import { useCoreStore } from '@/stores/core';
-
-const coreStore = useCoreStore();
-
-</script>

package/dist/spa/src/components/CustomDatePicker.vue

@@ -1,180 +0,0 @@
-<template>
-  <div>
-    <div class="grid w-40 gap-4 mb-2">
-      <div>
-        <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
-
-        <div class="relative">
-          <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-            <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
-          </div>
-
-          <input ref="datepickerStartEl"  type="text"
-                 class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                :placeholder="$t('Select date')" :disabled="isReadonly" />
-          
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <div class="grid w-40 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
-        <div>
-          <div class="relative">
-            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
-            </div>
-
-            <input v-model="startTime" type="time" id="start-time" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
-                   class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                   value="00:00" :disabled="isReadonly" required/>
-          </div>
-        </div>
-      </div>
-
-      <button type="button"
-              class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
-              @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
-        <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
-             xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-             fill="none" viewBox="0 0 24 24">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="m8 10 4 4 4-4"/>
-        </svg>
-      </button>
-    </div>
-  </div>
-</template>
-<script setup>
-import {ref, computed, onMounted, watch, onBeforeUnmount, nextTick} from 'vue';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-
-import {useCoreStore} from '@/stores/core';
-
-import Datepicker from "flowbite-datepicker/Datepicker";
-import IconCalendar from "@/components/icons/IconCalendar.vue";
-import IconTime from "@/components/icons/IconTime.vue";
-
-const coreStore = useCoreStore();
-dayjs.extend(utc)
-
-const props = defineProps({
-  valueStart: {
-    default: undefined
-  },
-  column: {
-    type: Object,
-  },
-  label: {
-    type: String,
-  },
-  autoHide: {
-    type: Boolean,
-  },
-  isReadonly: {
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:valueStart']);
-
-const datepickerStartEl = ref();
-
-const showTimeInputs = ref(false);
-
-const startDate = ref('');
-
-const startTime = ref('');
-
-const datepickerObject = ref('')
-
-const start = computed(() => {
-  if (!startDate.value) {
-    return;
-  }
-
-  let date = dayjs(startDate.value);
-
-  if (startTime.value) {
-    date = addTimeToDate(formatTime(startTime.value), date)
-  }
-
-  return date.utc().toISOString();
-})
-
-async function updateFromProps() {
-  if (!props.valueStart) {
-    datepickerStartEl.value.value = '';
-    startTime.value = '';
-  } else {
-    // wait ref to initialize
-    await nextTick();
-    datepickerObject.value.setDate(dayjs(props.valueStart).format('DD MMM YYYY'));
-    startTime.value = dayjs(props.valueStart).format('HH:mm:ss')
-  }
-}
-
-onMounted(() => {
-  updateFromProps();
-
-  watch(() => [props.valueStart], (value) => {
-    updateFromProps();
-  });
-})
-
-watch(start, () => {
-  //console.log('⚡ emit', start.value)
-  emit('update:valueStart', start.value)
-})
-
-function initDatepickers() {
-  const options = {format: 'dd M yyyy'};
-
-  if (props.autoHide) {
-    options.autohide = true;
-  }
-
-  datepickerObject.value = new Datepicker(datepickerStartEl.value, options);
-
-  addChangeDateListener();
-}
-
-function addChangeDateListener() {
-  datepickerStartEl.value.addEventListener('changeDate', setStartDate)
-}
-
-function removeChangeDateListener() {
-  datepickerStartEl.value.removeEventListener('changeDate', setStartDate);
-}
-
-function destroyDatepickerElement() {
-  datepickerObject.value.destroy();
-}
-
-function setStartDate(event) {
-  startDate.value = event.detail.date
-}
-
-function formatTime(time) {
-  return time.split(':').map(Number).length === 2 ? time + ':00' : time;
-}
-
-function addTimeToDate(time, date) {
-  const [hours, minutes, seconds] = time.split(':').map(Number)
-  return date.hour(hours).minute(minutes).second(seconds)
-}
-
-const toggleTimeInputs = () => {
-  showTimeInputs.value = !showTimeInputs.value
-}
-
-onMounted(() => {
-  initDatepickers();
-});
-
-onBeforeUnmount(() => {
-  removeChangeDateListener();
-  destroyDatepickerElement();
-});
-</script>

package/dist/spa/src/components/CustomDateRangePicker.vue

@@ -1,218 +0,0 @@
-<template>
-  <div>
-    <div class="mx-auto grid grid-cols-2 gap-4 mb-2">
-      <div class="relative">
-        <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-          <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
-        </div>
-
-        <input ref="datepickerStartEl" type="text"
-               class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-               :placeholder="$t('From')">
-      </div>
-
-      <div class="relative">
-        <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-          <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
-        </div>
-
-        <input ref="datepickerEndEl" type="text"
-               class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-               :placeholder="$t('To')">
-      </div>
-    </div>
-
-    <div>
-      <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
-        <div>
-          <div class="relative">
-            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
-            </div>
-
-            <input v-model="startTime" type="time" id="start-time"
-                   class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                   value="00:00" required/>
-          </div>
-        </div>
-
-        <div>
-          <div class="relative">
-            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
-            </div>
-
-            <input v-model="endTime" type="time" id="end-time"
-                   class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                   value="00:00" required/>
-          </div>
-        </div>
-      </div>
-
-      <button type="button"
-              class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
-              @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
-        <svg class="w-8 h-8 ms-0.5 relative top-px" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
-             xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-             fill="none" viewBox="0 0 24 24">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="m8 10 4 4 4-4"/>
-        </svg>
-      </button>
-    </div>
-  </div>
-</template>
-<script setup>
-import {ref, computed, onMounted, watch, onBeforeUnmount} from 'vue';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-
-import {useCoreStore} from '@/stores/core';
-
-import Datepicker from "flowbite-datepicker/Datepicker";
-import IconCalendar from "@/components/icons/IconCalendar.vue";
-import IconTime from "@/components/icons/IconTime.vue";
-
-const coreStore = useCoreStore();
-dayjs.extend(utc)
-
-const props = defineProps({
-  valueStart: {
-    default: undefined
-  },
-  valueEnd: {
-    default: undefined
-  },
-  column: {
-    type: Object,
-  },
-});
-
-const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
-
-const datepickerStartEl = ref();
-const datepickerEndEl = ref();
-
-const showTimeInputs = ref(false);
-
-const startDate = ref('');
-const endDate = ref('');
-
-const startTime = ref('');
-const endTime = ref('');
-
-const datepickerStartObject = ref('')
-const datepickerEndObject = ref('')
-
-const start = computed(() => {
-  if (!startDate.value) {
-    return;
-  }
-
-  let date = dayjs(startDate.value);
-
-  if (startTime.value) {
-    date = addTimeToDate(formatTime(startTime.value), date)
-  }
-
-  return date.utc().toISOString();
-})
-
-const end = computed(() => {
-  if (!endDate.value) {
-    return;
-  }
-
-  let date = dayjs(endDate.value);
-
-  if (endTime.value) {
-    date = addTimeToDate(formatTime(endTime.value), date)
-  } else {
-    date = addTimeToDate('23:59:59', date)
-  }
-
-  return date.utc().toISOString();
-})
-
-function updateFromProps() {
-  if (!props.valueStart) {
-    datepickerStartEl.value.value = '';
-    startTime.value = '';
-  }
-  if (!props.valueEnd) {
-    datepickerEndEl.value.value = '';
-    endTime.value = '';
-  }
-}
-
-onMounted(() => {
-  updateFromProps();
-
-  watch(() => [props.valueStart, props.valueEnd], (value) => {
-    updateFromProps();
-  });
-})
-
-watch(start, () => {
-  //console.log('⚡ emit', start.value)
-  emit('update:valueStart', start.value)
-})
-
-watch(end, () => {
-  //console.log('⚡ emit', end.value)
-  emit('update:valueEnd', end.value)
-})
-
-function initDatepickers() {
-
-  datepickerStartObject.value = new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy'});
-
-  datepickerEndObject.value = new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy'});
-  addChangeDateListener();
-}
-
-function addChangeDateListener() {
-  datepickerStartEl.value.addEventListener('changeDate', setStartDate)
-  datepickerEndEl.value.addEventListener('changeDate', setEndDate)
-}
-
-function removeChangeDateListener() {
-  datepickerStartEl.value.removeEventListener('changeDate', setStartDate);
-  datepickerEndEl.value.removeEventListener('changeDate', setEndDate);
-}
-
-function destroyDatepickerElement() {
-  datepickerStartObject.value.destroy();
-  datepickerEndObject.value.destroy();
-}
-
-function setStartDate(event) {
-  startDate.value = event.detail.date
-}
-
-function setEndDate(event) {
-  endDate.value = event.detail.date
-}
-
-function formatTime(time) {
-  return time.split(':').map(Number).length === 2 ? time + ':00' : time;
-}
-
-function addTimeToDate(time, date) {
-  const [hours, minutes, seconds] = time.split(':').map(Number)
-  return date.hour(hours).minute(minutes).second(seconds)
-}
-
-const toggleTimeInputs = () => {
-  showTimeInputs.value = !showTimeInputs.value
-}
-
-onMounted(() => {
-  initDatepickers();
-});
-
-onBeforeUnmount(() => {
-  removeChangeDateListener();
-  destroyDatepickerElement();
-})
-</script>