adminforth 1.1.32 → 1.1.33

package/dist/spa/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="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="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-blue-700 dark:text-blue-500 text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
-              @click="toggleTimeInputs">{{ showTimeInputs ? 'Hide time' : '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>

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

@@ -1,148 +0,0 @@
-<template>
-  <div class="flex flex-wrap gap-2">
-    <input
-      type="number" aria-describedby="helper-text-explanation"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 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="From"
-      v-model="start"
-    >
-
-    <input
-      type="number" aria-describedby="helper-text-explanation"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 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="To"
-      v-model="end"
-    >
-
-    <button
-      v-if="isChanged"
-      type="button"
-      class="flex items-center p-0.5 ml-auto px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 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 disabled:opacity-50 disabled:cursor-not-allowed"
-      @click="clear">Clear
-    </button>
-
-    <div class="w-full">
-      <vue-slider
-        class="custom-slider"
-        :dot-size="20"
-        height="7.99px"
-        :min="minFormatted"
-        :max="maxFormatted"
-        v-model="sliderValue"
-        @update:model-value="updateFromSlider($event)"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import VueSlider from 'vue-slider-component';
-import 'vue-slider-component/theme/antd.css'
-import {computed, onMounted, ref, watch} from "vue";
-import debounce from 'debounce'
-
-const props = defineProps({
-  valueStart: {
-    default: '',
-  },
-  valueEnd: {
-    default: '',
-  },
-  min: {
-    default: 0,
-  },
-  max: {
-    default: 10,
-  },
-});
-
-const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
-
-const minFormatted = computed(() => Math.floor(props.min));
-const maxFormatted = computed(() => Math.ceil(props.max));
-
-const isChanged = computed(() => {
-  return start.value && start.value !== minFormatted.value || end.value && end.value !== maxFormatted.value;
-});
-
-const start = ref(props.valueStart);
-const end = ref(props.valueEnd);
-
-const sliderValue = ref([minFormatted.value, maxFormatted.value]);
-
-const updateFromSlider =
-    debounce((value: [number, number]) => {
-      start.value = value[0] === minFormatted.value ? '': value[0];
-      end.value = value[1] === maxFormatted.value ? '': value[1];
-    }, 500);
-
-onMounted(() => {
-  updateStartFromProps();
-  updateEndFromProps();
-
-  watch(() => props.valueStart, (value) => {
-    updateStartFromProps();
-  });
-
-  watch(() => props.valueEnd, (value) => {
-    updateEndFromProps();
-  });
-})
-
-function updateStartFromProps() {
-  start.value = props.valueStart;
-  setSliderValues(start.value, end.value)
-}
-
-function updateEndFromProps() {
-  end.value = props.valueEnd;
-  setSliderValues(start.value, end.value)
-}
-
-watch(start, () => {
-  console.log('⚡ emit', start.value)
-  emit('update:valueStart', start.value)
-})
-
-watch(end, () => {
-  console.log('⚡ emit', end.value)
-  emit('update:valueEnd', end.value);
-})
-
-const clear = () => {
-  start.value = ''
-  end.value = ''
-  setSliderValues('', '')
-}
-
-function setSliderValues(start, end) {
-  sliderValue.value = [start || minFormatted.value, end || maxFormatted.value];
-}
-</script>
-
-<style lang="scss" scoped>
-.custom-slider {
-    &:deep(.vue-slider-rail) {
-        background-color: rgb(229 231 235);
-    }
-
-    &:deep(.vue-slider-dot-handle) {
-        background-color: #1c64f2;
-        border: none;
-        box-shadow: none;
-    }
-
-    &:deep(.vue-slider-dot-handle:hover) {
-        background-color: #1c64f2;
-        border: none;
-        box-shadow: none;
-    }
-
-    &:deep(.vue-slider-process) {
-        background-color: rgb(225 239 254);
-    }
-
-    &:deep(.vue-slider-process:hover) {
-        background-color: rgb(225 239 254);
-    }
-}
-</style>

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

@@ -1,168 +0,0 @@
-<template>
-  <div class="relative inline-block w-full" id="dropd">
-    <div class="relative">
-      <input
-        type="text"
-        v-model="search"
-        @focus="showDropdown = true"
-        class="block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm transition duration-150 ease-in-out 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="selectedItems.length ? '' : placeholder || 'Select...'"
-      />
-      <div class="absolute inset-y-0 left-2 flex items-center pr-2 flex-wrap">
-        {{  }}
-        <div v-for="item in selectedItems" :key="item?.name" class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">
-          <span>{{ item.label }}</span>
-          <button
-            type="button"
-            @click="toogleItem(item)"
-            class="z-index-100  flex-shrink-0 ml-1 h-4 w-4 -mr-1 rounded-full inline-flex items-center justify-center text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100"
-          >
-            <span class="sr-only">Remove item</span>
-            <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-                d="M1 1l6 6m0-6L1 7"
-              />
-            </svg>
-          </button>
-        </div>  
-      </div>
-      <div class="absolute inset-y-0 right-2 flex items-center pointer-events-none">
-        <!-- triangle icon -->
-        <IconCaretDownSolid v-if="!showDropdown" class="h-5 w-5 text-gray-400" />
-        <IconCaretUpSolid v-else class="h-5 w-5 text-gray-400" />
-      </div>
-    </div>
-    <div v-if="showDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-      <div
-        v-for="item in filteredItems"
-        :key="item.value"
-        class="px-4 py-2 cursor-pointer hover:bg-gray-100"
-        :class="{ 'bg-blue-100': selectedItems.includes(item) }"
-        @click="toogleItem(item)"
-      >
-        <label :for="item.value">{{ item.label }}</label>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { IconCaretDownSolid, IconCaretUpSolid } from '@iconify-prerendered/vue-flowbite';
-
-
-const props = defineProps({
-  options: Array,
-  modelValue: {
-    default: undefined,
-  },
-  allowCustom: {
-    type: Boolean,
-    default: false,
-  },
-  single: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    default: '',
-
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const search = ref('');
-const showDropdown = ref(false);
-
-const selectedItems = ref([]);
-
-function updateFromProps() {
-  if (props.modelValue !== undefined) {
-    if (props.single) {
-      const el = props.options.find(item => item.value === props.modelValue);
-      if (el) {
-        selectedItems.value = [el];
-      } else {
-        selectedItems.value = [];
-      }
-    } else {
-      selectedItems.value = props.options.filter(item => props.modelValue.includes(item.value));
-    }
-  }
-}
-
-onMounted(() => {
-  updateFromProps();
-
-  watch(() => props.modelValue, (value) => {
-    updateFromProps();
-  });
-
-  watch(() => props.options, () => {
-    updateFromProps();
-  });
-
-  addClickListener();
-
-});
-
-const filteredItems = computed(() => {
-  return props.options.filter(item =>
-    item.label.toLowerCase().includes(search.value.toLowerCase())
-  );
-});
-
-const handleClickOutside = (event) => {
-  if (!event.target.closest('#dropd')) {
-    showDropdown.value = false;
-  }
-};
-
-const addClickListener = () => {
-  document.addEventListener('click', handleClickOutside);
-};
-
-const removeClickListener = () => {
-  document.removeEventListener('click', handleClickOutside);
-};
-
-const toogleItem = (item) => {
-  if (selectedItems.value.includes(item)) {
-    selectedItems.value = selectedItems.value.filter(i => i !== item);
-  } else {
-    if (props.single) {
-      selectedItems.value = [item];
-    } else {
-      selectedItems.value = [...selectedItems.value, item];
-    }
-  }
-  if (props.single) {
-    showDropdown.value = false;
-  }
-
-  
-  const list = selectedItems.value.map(item => item.value);
-  const updValue = list.length ? list : undefined;
-  let emitValue;
-  if (props.single) {
-    emitValue = updValue ? updValue[0] : undefined;
-  } else {
-    emitValue = updValue;
-  }
-  console.log('⚡ emit', emitValue)
-  emit('update:modelValue', emitValue);
-
-};
-
-
-onUnmounted(() => {
-  removeClickListener();
-});
-
-
-</script>