its_ui_vite 1.0.13 → 1.0.15

package/README.md

@@ -140,6 +140,7 @@ slots: ['customIcon' <!-- есть дефольное значение -->]
   min?: string,
   width?: string,
   isOpen?: boolean,
+  isTooltip?: boolean,
   modelValue?: any,
 }
 
@@ -152,6 +153,7 @@ slots: ['customIcon' <!-- есть дефольное значение -->]
 {
   position?: 'top' | 'top_left' | 'top_right' | 'bottom' | 'bottom_left' | 'bottom_right',
   interactive?: Boolean,
+  disabled?: boolean,
 }
 
 slots: ['icon' <!-- есть дефольное значение -->, 'content']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "its_ui_vite",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "main": "./src/libIndex.js",
   "module": "./src/libIndex.js",
   "files": [

package/src/assets/js/helpers.js

@@ -59,6 +59,8 @@ export function addTracingElement(target, moveFn = () => {}) {
   let timer
   let debounceTimer
 
+  const handlesEvents = ['mousemove', 'wheel', 'load', 'fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange']
+
   function isVisible(position) {
     if (!position) return false
 
@@ -108,16 +110,18 @@ export function addTracingElement(target, moveFn = () => {}) {
   }
 
   function addListeners() {
-    document.body.addEventListener('mousemove', targetMoveHandler)
-    document.body.addEventListener('wheel', targetMoveHandler)
-    window.addEventListener('load', targetMoveHandler)
+    handlesEvents.forEach((eventName) => {
+      const handleRoot = eventName === 'load' ? window : document.body
+      handleRoot.addEventListener(eventName, targetMoveHandler)
+    })
     targetMoveHandler()
   }
 
   function removeListeners() {
-    document.body.removeEventListener('mousemove', targetMoveHandler)
-    document.body.removeEventListener('wheel', targetMoveHandler)
-    window.removeEventListener('load', targetMoveHandler)
+    handlesEvents.forEach((eventName) => {
+      const handleRoot = eventName === 'load' ? window : document.body
+      handleRoot.removeEventListener(eventName, targetMoveHandler)
+    })
   }
 
   return {

package/src/components/CDatepicker.vue

@@ -14,11 +14,21 @@
         class="c-datepicker__inp"
         size="sm"
         :width="width"
-        :placeholder="activeDate.toLocaleString(DateTime.DATE_FULL)"
+        :placeholder="datePlaceholder"
         :disabled="true"
       >
         <template #customIcon>
-          <CIcon :name="{'calendar-month-outline': true}" :size="24" />
+          <CTooltip
+            v-if="isTooltip"
+          >
+            <template #icon>
+              <CIcon :name="{'calendar-month-outline': true}" :size="24" />
+            </template>
+            <template #content>
+              <slot></slot>
+            </template>
+          </CTooltip>
+          <CIcon v-else :name="{'calendar-month-outline': true}" :size="24" />
         </template>
       </CInput>
     </div>
@@ -50,7 +60,7 @@
           @blur="isOpenTime = false"
         />
       </div>
-      <Teleport to="body">
+      <Teleport :to="teleportTo">
         <div
           class="c-datepicker__hours_list-wrap"
           ref="timeContent"
@@ -66,7 +76,11 @@
                 <button
                   v-for="item in hoursOptions"
                   :key="item.value"
-                  :class="['c-datepicker__hours_btn', {active: item.text === modelHour}]"
+                  :class="['c-datepicker__hours_btn', {
+                    disable: isDisableTime('hour', item.value),
+                    active: item.text === modelHour
+                  }]"
+
                   @click="setTime('hour', item.text)"
                 >
                   {{ item.text }}
@@ -77,7 +91,11 @@
                 <button
                   v-for="item in minuteOptions"
                   :key="item.value"
-                  :class="['c-datepicker__hours_btn', {active: item.text === modelMinute}]"
+                  :class="['c-datepicker__hours_btn', {
+                    disable: isDisableTime('minute', item.value),
+                    active: item.text === modelMinute
+                  }]"
+
                   @click="setTime('minute', item.text)"
                 >
                   {{ item.text }}
@@ -89,7 +107,7 @@
       </Teleport>
     </div>
 
-    <Teleport to="body">
+    <Teleport :to="teleportTo">
       <div
         :style="pickerContentStyle"
         :class="['c-datepicker__content_wrap', { open: isOpenPicker }]"
@@ -178,6 +196,7 @@ import CSelect from './CSelect.vue';
 import CInput from './CInput.vue';
 import CButton from './CButton.vue';
 import CScroll from './CScroll.vue';
+import CTooltip from './CTooltip.vue';
 
 import { addTracingElement } from '../assets/js/helpers';
 import { computed, ref, watch, onMounted, onUnmounted, Teleport } from 'vue';
@@ -190,6 +209,7 @@ type TProps = {
   width?: string,
   isOpen?: boolean,
   modelValue?: any,
+  isTooltip?: boolean,
 }
 
 const props = withDefaults(defineProps<TProps>(), {
@@ -253,6 +273,10 @@ let timeStyle = ref({
   height: '34px'
 });
 
+let teleportTo = ref<Element | 'body'>('body');
+
+const fullscreenEvents = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange'];
+
 const TracingElement = addTracingElement(root, handlePicker);
 const TracingTime = addTracingElement(time, handleTime);
 
@@ -283,13 +307,21 @@ onMounted(() => {
   TracingTime.addListeners();
   document.body.addEventListener('click', handleClickPicker);
   document.body.addEventListener('click', handleClickTime);
+
+  fullscreenEvents.forEach((eventName) => {
+    document.addEventListener(eventName, setTeleportTo);
+  });
 });
 
 onUnmounted(() => {
   TracingElement.removeListeners();
   TracingTime.removeListeners();
-  document.body.removeEventListener('click', handleClickPicker)
+  document.body.removeEventListener('click', handleClickPicker);
   document.body.removeEventListener('click', handleClickTime);
+
+  fullscreenEvents.forEach((eventName) => {
+    document.removeEventListener(eventName, setTeleportTo);
+  });
 });
 
 const emit = defineEmits<{
@@ -330,7 +362,12 @@ const text = computed(() => {
   };
 
   return lang[props.locale]
-})
+});
+
+const datePlaceholder = computed(() => {
+  const currentDateISO = activeDate.value.toISO();
+  return DateTime.fromISO(currentDateISO).setLocale(props.locale).toFormat('dd LLLL yyyy')
+});
 
 const monthsOption = computed(() => {
   let options: TSelectOption[] = [];
@@ -478,6 +515,10 @@ function handleTime(positionInfo?: any) {
   isOpenTime.value = false;
 } 
 
+function setTeleportTo() {
+  teleportTo.value = document.fullscreenElement || 'body';
+}
+
 function setPickerContentPosition() {
   const windowHeight = window.innerHeight;
   const inputHeight = root.value.clientHeight;
@@ -538,15 +579,10 @@ function isDisableDay(ISO: string): boolean {
 function setTime(name: 'hour' | 'minute', value: string) {
   const numValue = value.replace(/[^0-9]/g, '');
 
-  let min = 0;
-  let max = 59;
+  const format = name === 'hour' ? 'HH' : 'mm';
 
-  if (name === 'hour') {
-    max = 23;
-  }
-  if (name === 'minute') {
-    max = 59;
-  }
+  let min = props?.min ? +DateTime.fromISO(props?.min)?.toFormat(format) : 0;
+  let max = props?.max ? +DateTime.fromISO(props?.max)?.toFormat(format) : (name === 'hour' ? 23 : 59);
 
   const validValue = Math.min(Math.max(min, +numValue), max);
   const strValue = getTimeStr(validValue);
@@ -565,6 +601,15 @@ function getTimeStr(value: number) {
   return `0${value}`.match(/.{2}$/)?.[0] || '00'
 }
 
+function isDisableTime(name: 'hour' | 'minute', value: number) {
+  const format = name === 'hour' ? 'HH' : 'mm';
+
+  const max = props?.max ? +DateTime.fromISO(props?.max)?.toFormat(format) : 99;
+  const min = props?.min ? +DateTime.fromISO(props?.min)?.toFormat(format) : -1;
+
+  return max < value || min > value
+}
+
 function setIsOpen(value: boolean) {
   isOpenPicker.value = value;
   setOldDate(value);
@@ -645,7 +690,7 @@ defineExpose({
 
 <style lang="scss">
 
-$timeWidth: 60px;
+$timeWidth: 54px;
 
 .c-datepicker {
   display: flex;
@@ -654,6 +699,11 @@ $timeWidth: 60px;
   gap: 15px;
 
   &__inp {
+
+    .c-input {
+      padding: 7px 10px;
+    }
+
     &_wrap {
       position: relative;
 
@@ -689,6 +739,9 @@ $timeWidth: 60px;
 
     .c-input__custom-icon { 
       opacity: 1;
+      pointer-events: all;
+
+      z-index: 1;
 
       svg path {
         transition: var(--transition);
@@ -736,7 +789,7 @@ $timeWidth: 60px;
       width: $timeWidth;
       height: 32px;
 
-      border: 1px solid var(--white);
+      border: 1px solid var(--green-medium);
       border-radius: 5px;
 
       background: var(--black-dark);
@@ -782,7 +835,7 @@ $timeWidth: 60px;
 
         width: $timeWidth;
         max-height: var(--max-height);
-        padding: 6px;
+        padding: 6px 0px;
 
         border: 1px solid var(--green-dark);
         border-radius: 5px;
@@ -832,7 +885,7 @@ $timeWidth: 60px;
         width: 1px;
         height: var(--scroll-height);
 
-        margin: 0 3px;
+        margin: 0px;
 
         background: var(--green-dark);
       }
@@ -842,7 +895,7 @@ $timeWidth: 60px;
         justify-content: center;
         align-items: center;
         
-        width: 20px;
+        width: 26px;
         height: 20px;
 
         font-size: 14px;
@@ -861,6 +914,11 @@ $timeWidth: 60px;
         &:hover {
           color: var(--green-light);
         }
+
+        &.disable {
+          opacity: 0.6;
+          pointer-events: none;
+        }
       }
     }
   }

package/src/components/CScroll.vue

@@ -3,7 +3,9 @@
     :options="{ 
       scrollYMarginOffset
     }" 
+    ref="root"
     :class="['c-scroll', CClasses.scrollContainer]"
+    @ps-y-reach-end="handleMaxScroll"
   >
     <div class="c-scroll__content">
       <slot><div class=""></div></slot>
@@ -26,7 +28,7 @@ export default {
   data() {
     return {
       scrollYMarginOffset: 0,
-      CClasses
+      CClasses,
     }
   },
 
@@ -40,7 +42,7 @@ export default {
 
   methods: {
     handleMaxScroll(direction) {
-      console.log(direction);
+      this.$refs.root.ps.update();
     }
   },
 

package/src/components/CSelect.vue

@@ -20,7 +20,7 @@
         </slot>
       </template>
     </CInput>
-    <Teleport to="body">
+    <Teleport :to="teleportTo">
       <div
         :data-c-select-id="selectId"
         :style="listStyle"
@@ -145,6 +145,8 @@ let findValue = ref(''),
   activeOptions = ref(new Set<TOption>()),
   oldActiveOptions = ref(new Set<TOption>())
 
+let teleportTo = ref<Element | 'body'>('body')
+
 let listStyle = ref({
   left: '0px',
   top: '0px',
@@ -165,6 +167,8 @@ const classes = {
   fixedContainer: 'c-select__fixed-container',
 }
 
+const fullscreenEvents = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange']
+
 const TracingElement = addTracingElement(root, handleMove)
 
 const text = computed(() => {
@@ -252,11 +256,19 @@ onMounted(() => {
   TracingElement.addListeners()
   document.body.addEventListener('click', handleClick)
   if (!isMultiple.value && props.autocomplete) debounceEvent(props.options[0]);
+
+  fullscreenEvents.forEach((eventName) => {
+    document.addEventListener(eventName, setTeleportTo)
+  })
 })
 
 onUnmounted(() => {
   TracingElement.removeListeners()
   document.body.removeEventListener('click', handleClick)
+
+  fullscreenEvents.forEach((eventName) => {
+    document.removeEventListener(eventName, setTeleportTo)
+  })
 })
 
 function handleMove(positionInfo?: any) {
@@ -271,6 +283,10 @@ function handleMove(positionInfo?: any) {
   isOpen.value = false
 }
 
+function setTeleportTo() {
+  teleportTo.value = document.fullscreenElement || 'body'
+}
+
 const handleOption: TDebounceEvent = function(option, evt) {
   if (isSelectAll.value && evt) setAllOption(evt)
   setOption(option, evt);

package/src/components/CTooltip.vue

@@ -5,7 +5,7 @@
         <CIcons iconId="question" />
       </slot>
     </div>
-    <Teleport to="body">
+    <Teleport v-if="!disabled" :to="teleportTo">
       <div
         :class="[classes.fixedContainer, position, {interactive: false}, {open: isOpen.click || isOpen.hover}]"
         :style="tooltipPosition"
@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, Teleport } from 'vue'
+import { ref, onMounted, onUnmounted, Teleport, computed } from 'vue'
 
 import CIcons from './CIcons/index.vue'
 import { addTracingElement } from '../assets/js/helpers'
@@ -30,11 +30,13 @@ import { addTracingElement } from '../assets/js/helpers'
 type TProps = {
   position?: 'top' | 'top_left' | 'top_right' | 'bottom' | 'bottom_left' | 'bottom_right' | 'right' | 'left',
   interactive?: boolean,
+  disabled?: boolean,
 }
 
 const props = withDefaults(defineProps<TProps>(), {
   position: 'top',
   interactive: true,
+  disabled: false,
 });
 
 let icon = ref()
@@ -43,6 +45,8 @@ let isOpen = ref({
   hover: false,
 })
 
+let teleportTo = ref<Element | 'body'>('body')
+
 let tooltipPosition = ref({
   left: '0px',
   top: '0px',
@@ -57,16 +61,24 @@ const classes = {
   fixedContainer: 'c-tooltip__fixed-container'
 }
 
+const fullscreenEvents = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange'];
+
 const TracingElement = addTracingElement(icon, handleMove)
 
 onMounted(() => {
   addListener()
   TracingElement.addListeners()
+  fullscreenEvents.forEach((eventName) => {
+    document.addEventListener(eventName, setTeleportTo)
+  })
 })
 
 onUnmounted(() => {
   removeListener()
   TracingElement.removeListeners()
+  fullscreenEvents.forEach((eventName) => {
+    document.removeEventListener(eventName, setTeleportTo)
+  })
 })
 
 function handleMove(positionInfo?: any) {
@@ -80,6 +92,10 @@ function handleMove(positionInfo?: any) {
   isOpen.value.click = false
 }
 
+function setTeleportTo() {
+  teleportTo.value = document.fullscreenElement || 'body'
+}
+
 function handleMouseover(evt: MouseEvent){
   const target = (evt.target as HTMLElement);
   const tooltipTarget = target.closest(`.${classes.icon}`)

package/src/pages/index.vue

@@ -656,7 +656,9 @@
           <!-- col -->
           <div class="table__col checkboxes">
             <div class="table__item">
-              <CDatepicker @change_cdatepicker="(e) => console.log(e)" />
+              <CDatepicker :is-tooltip="true" @change_cdatepicker="(e) => console.log(e)">
+                text
+              </CDatepicker>
             </div>
           </div>
           <!-- ./col -->
@@ -824,7 +826,13 @@
           <!-- col -->
           <div class="table__col">
             <div class="table__item">
-              <CTooltip style="white-space: nowrap;">
+              <CCheckbox v-model="isDisabledTooltip">
+                is disabled tooltip: {{ isDisabledTooltip }}
+              </CCheckbox>
+            </div>
+
+            <div class="table__item">
+              <CTooltip :disabled="isDisabledTooltip" style="white-space: nowrap;">
                 <template #content>
                   Text helper
                 </template>
@@ -1004,6 +1012,7 @@ export default {
 
       isToggleTabs: true,
       selectIsOpen: false,
+      isDisabledTooltip: false,
 
       option: [
         {