@milaboratories/uikit 1.2.3

package/src/components/PlToggleSwitch/pl-toggle-switch.scss

@@ -0,0 +1,41 @@
+.ui-toggle-switch {
+  --handle-ml: 0;
+  --body-bg: var(--bg-base-light);
+  --body-shadow: var(--btn-group-shape-shadow);
+
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  outline: none;
+
+  &__body {
+    width: 40px;
+    height: 24px;
+    display: flex;
+    padding: 5px;
+    border-radius: 12px;
+    border: 1px solid var(--color-ic-01);
+    box-shadow: var(--body-shadow);
+    background: var(--body-bg);
+    cursor: pointer;
+  }
+
+  &__handle {
+    width: 12px;
+    height: 12px;
+    border-radius: 12px;
+    border: 1px solid var(--color-ic-01);
+    background: var(--color-ic-00);
+    margin-left: var(--handle-ml);
+  }
+
+  &.active {
+    --body-bg: var(--btn-switcher-bg);
+    --handle-ml: auto;
+  }
+
+  &:focus-visible {
+    --label-color: var(--txt-focus);
+    --body-shadow: var(--btn-group-shape-shadow), 0 0 0 2px #fff,  0 0 0 4px var(--border-color-focus);
+  }
+}

package/src/components/PlTooltip/Beak.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="beak" width="5" height="9" viewBox="0 0 3 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.00222 8.00933L0 4.00711L4.00222 0.00488281L4.00222 8.00933Z" fill="#24223D" />
+  </svg>
+</template>

package/src/components/PlTooltip/PlTooltip.vue

@@ -0,0 +1,158 @@
+<script lang="ts">
+/** Simple tooltip on mouseover */
+export default {
+  name: 'PlTooltip',
+};
+</script>
+
+<script lang="ts" setup>
+import './pl-tooltip.scss';
+import { onUnmounted, reactive, ref, toRef, watch } from 'vue';
+import { useTooltipPosition } from './useTooltipPosition';
+import * as utils from '@/helpers/utils';
+import { useClickOutside } from '@/composition/useClickOutside';
+import Beak from './Beak.vue';
+import { tMap } from './global';
+
+const emit = defineEmits(['tooltip:close']);
+
+const tKey = Symbol();
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * delay in milliseconds before the tooltip opens
+     */
+    openDelay?: number;
+    /**
+     * delay in milliseconds before the tooltip disappears
+     */
+    closeDelay?: number;
+    /**
+     * Tooltip position
+     */
+    position?: 'top-left' | 'left' | 'right' | 'top';
+    /**
+     * external prop to hide tooltips
+     */
+    hide?: boolean;
+    /**
+     * The gap in pixels between the tooltip and the target element
+     */
+    gap?: number;
+    /**
+     * base html element for tooltip
+     */
+    element?: 'div' | 'span' | 'a' | 'p' | 'h1' | 'h2' | 'h3';
+  }>(),
+  {
+    openDelay: 100,
+    closeDelay: 1000,
+    gap: 8,
+    position: 'top',
+    element: 'div',
+  },
+);
+
+const data = reactive({
+  open: false,
+  over: false,
+  tooltipOpen: false,
+  key: Symbol(),
+});
+
+tMap.set(tKey, () => closeTooltip());
+
+// Hook to avoid the need to immediately teleport into the body (better performance)
+watch(
+  () => data.open,
+  (v) => {
+    requestAnimationFrame(() => {
+      data.tooltipOpen = v;
+    });
+  },
+);
+
+let clearTimeout = () => {};
+
+const dispatchAdjust = utils.throttle(() => window.dispatchEvent(new CustomEvent('adjust')), 1000);
+
+const showTooltip = () => {
+  data.open = true;
+
+  for (let [k, f] of tMap.entries()) {
+    if (k !== tKey) {
+      f();
+    }
+  }
+};
+
+const closeTooltip = () => {
+  data.open = false;
+  emit('tooltip:close');
+};
+
+const onOver = async () => {
+  if (props.hide) {
+    return;
+  }
+
+  dispatchAdjust();
+
+  data.over = true;
+
+  clearTimeout();
+
+  await utils.delay(100);
+
+  if (data.over) {
+    showTooltip();
+  }
+};
+
+const onLeave = () => {
+  data.over = false;
+  clearTimeout = utils.timeout(() => {
+    if (!data.over) {
+      closeTooltip();
+    }
+  }, props.closeDelay);
+};
+
+watch(
+  () => props.hide,
+  (hide) => {
+    if (hide) {
+      closeTooltip();
+    }
+  },
+);
+
+const rootRef = ref<HTMLElement | undefined>();
+const tooltip = ref<HTMLElement | undefined>();
+
+const style = useTooltipPosition(rootRef, toRef(props));
+
+useClickOutside([rootRef, tooltip], () => closeTooltip());
+
+onUnmounted(() => {
+  tMap.delete(tKey);
+});
+</script>
+
+<template>
+  <component :is="element" v-bind="$attrs" ref="rootRef" @click="onOver" @mouseover="onOver" @mouseleave="onLeave">
+    <slot />
+    <Teleport v-if="$slots['tooltip'] && data.open" to="body">
+      <Transition name="tooltip-transition">
+        <div v-if="data.tooltipOpen" class="pl-tooltip__container" :style="style">
+          <div ref="tooltip" class="pl-tooltip" :class="position" @mouseover="onOver" @mouseleave="onLeave">
+            <!-- should be one line -->
+            <div><slot name="tooltip" /></div>
+            <Beak />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </component>
+</template>

package/src/components/PlTooltip/global.ts

@@ -0,0 +1 @@
+export const tMap = new Map<symbol, () => void>();

package/src/components/PlTooltip/index.ts

@@ -0,0 +1 @@
+export { default as PlTooltip } from './PlTooltip.vue';

package/src/components/PlTooltip/pl-tooltip.scss

@@ -0,0 +1,101 @@
+.pl-tooltip {
+  z-index: 3;
+  position: absolute;
+  display: inline-block;
+  padding: 7px 12px 9px 12px;
+  background: var(--tooltip-bg);
+  border-radius: 6px;
+  width: max-content;
+  word-break: normal;
+  transform-origin: 0 50%;
+  max-width: 300px;
+  color: #fff;
+
+  &__container {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  a {
+    color: var(--tooltip-link-color);
+  }
+
+  p {
+    margin-bottom: 8px;
+  }
+
+  ul, li {
+    margin-left: 6px;
+    padding-left: 6px;
+  }
+
+  li {
+    margin-bottom: 4px;
+  }
+
+  .beak {
+    position: absolute;
+    top: 50%;
+    right: 100%;
+  }
+
+  &.top-left {
+    bottom: 0;
+    .beak {
+      position: absolute;
+      top: calc(100% - 2px);
+      transform: translateX(-50%) rotate(-90deg);
+      left: 20%;
+    }
+  }
+
+  &.left {
+    right: 0;
+    transform: translateY(-50%);
+    .beak {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%) rotate(180deg);
+      left: 100%;
+    }
+  }
+
+  &.right {
+    left: 0;
+    transform: translateY(-50%);
+    .beak {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 100%;
+    }
+  }
+
+  &.top {
+    transform: translateX(-50%);
+    bottom: 0;
+    .beak {
+      position: absolute;
+      top: calc(100% - 2px);
+      transform: translateX(-50%) rotate(-90deg);
+      left: 50%;
+    }
+  }
+}
+
+.tooltip-transition {
+  &-enter-active, &-leave-active {
+    transition: all 0.1s ease-in-out;
+  }
+
+  &-enter-from {
+    opacity: 0;
+    transform: translateY(-50%) scale(0);
+  }
+
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(-50%) scale(0);
+  }
+}

package/src/components/PlTooltip/useTooltipPosition.ts

@@ -0,0 +1,54 @@
+import { computed, type Ref, ref, unref } from 'vue';
+import { useElementPosition } from '@/composition/usePosition';
+import type { ElementPosition } from '@/types';
+
+type Options = {
+  position: 'top-left' | 'right' | 'left' | 'top';
+  gap: number;
+};
+
+/**
+ * A custom hook that calculates and returns the CSS style needed to position a tooltip
+ * relative to a target HTML element based on the specified position and gap.
+ */
+export function useTooltipPosition(el: Ref<HTMLElement | undefined>, optionsRef: Ref<Options>) {
+  const posRef = ref<ElementPosition>();
+
+  useElementPosition(el, (v) => {
+    posRef.value = v;
+  });
+
+  return computed(() => {
+    const pos = unref(posRef);
+
+    const options = unref(optionsRef);
+
+    const position = options.position ?? 'top';
+
+    const gap = options.gap ?? 8;
+
+    if (!pos) {
+      return '';
+    }
+
+    const offsetMiddleY = pos.offsetY + Math.floor(pos.height / 2);
+    const offsetMiddleX = pos.offsetX + Math.floor(pos.width / 2);
+    if (position === 'top-left') {
+      return `left: ${pos.offsetX}px; top: ${pos.offsetY - gap}px;`;
+    }
+
+    if (position === 'top') {
+      return `left: ${offsetMiddleX}px; top: ${pos.offsetY - gap}px;`;
+    }
+
+    if (position === 'right') {
+      return `left: ${pos.offsetX + pos.width + gap}px; top: ${offsetMiddleY}px;`;
+    }
+
+    if (position === 'left') {
+      return `right: ${pos.scrollWidth - pos.x + gap}px; top: ${offsetMiddleY}px;`;
+    }
+
+    return '';
+  });
+}

package/src/components/Scrollable.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import VScroll from '@/components/VScroll.vue';
+import HScroll from '@/components/HScroll.vue';
+import { onMounted, onUnmounted, reactive, ref, unref } from 'vue';
+import { tapIf, copyProps } from '@/helpers/functions';
+import { useResizeObserver } from '@/composition/useResizeObserver';
+
+const containerRef = ref<HTMLElement>();
+
+const data = reactive({
+  scrollTop: 0,
+  scrollLeft: 0,
+  clientHeight: 0,
+  clientWidth: 0,
+  scrollHeight: 0,
+  scrollWidth: 0,
+});
+
+function updateState(container: HTMLElement) {
+  copyProps(data, container, 'scrollTop', 'scrollLeft', 'clientHeight', 'clientWidth', 'scrollHeight', 'scrollWidth');
+}
+
+const onWheel = (e: WheelEvent) => {
+  e.preventDefault();
+  const root = e.currentTarget as HTMLElement;
+  root.scrollTop += e.deltaY;
+  root.scrollLeft += e.deltaX;
+  updateState(root);
+};
+
+function updateTop(v: number) {
+  tapIf(unref(containerRef), (el) => {
+    el.scrollTop = v;
+    updateState(el);
+  });
+}
+
+function updateLeft(v: number) {
+  tapIf(unref(containerRef), (el) => {
+    el.scrollLeft = v;
+    updateState(el);
+  });
+}
+
+useResizeObserver(containerRef, (el) => {
+  tapIf(el, (el) => updateState(el));
+});
+
+onMounted(() => {
+  tapIf(unref(containerRef), (root) => {
+    updateState(root);
+    root.addEventListener('wheel', onWheel);
+  });
+});
+
+onUnmounted(() => {
+  tapIf(unref(containerRef), (root) => root.removeEventListener('wheel', onWheel));
+});
+</script>
+
+<template>
+  <div class="ui-scrollable">
+    <div ref="containerRef" class="ui-scrollable__container" @wheel="onWheel">
+      <slot />
+    </div>
+    <VScroll
+      :scroll-top="data.scrollTop"
+      :client-height="data.clientHeight"
+      :scroll-height="data.scrollHeight"
+      @wheel.stop
+      @update:scroll-top="updateTop"
+    />
+    <HScroll
+      :scroll-left="data.scrollLeft"
+      :client-width="data.clientWidth"
+      :scroll-width="data.scrollWidth"
+      @wheel.stop
+      @update:scroll-left="updateLeft"
+    />
+  </div>
+</template>

package/src/components/Slider.vue

@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import { computed, reactive, ref, unref, useSlots, watch } from 'vue';
+import { useMouseCapture } from '@/composition/useMouseCapture';
+import { tapIf } from '@/helpers/functions';
+import { clamp } from '@/helpers/math';
+import { PlTooltip } from '@/components/PlTooltip';
+import type { SliderMode } from '@/types';
+import { useSliderBreakpoints } from '@/composition/useSliderBreakpoints';
+
+const slots = useSlots();
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: number;
+    min?: number;
+    max: number;
+    step?: number;
+    label?: string;
+    helper?: string;
+    error?: string;
+    mode?: SliderMode;
+    measure?: string;
+    breakpoints?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    label: undefined,
+    helper: undefined,
+    error: undefined,
+    min: 0,
+    step: 1,
+    mode: 'text',
+    measure: '',
+    breakpoints: false,
+    disabled: false,
+  },
+);
+
+const data = reactive({
+  deltaValue: 0,
+});
+
+const range = computed(() => props.max - props.min);
+
+const localValue = computed(() => {
+  return clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max);
+});
+
+const realtimeVal = ref(props.modelValue);
+
+const error = computed(() => {
+  const v = props.modelValue;
+
+  if (!Number.isFinite(v)) {
+    return 'Not a number';
+  }
+
+  if (v < props.min) {
+    return `Min value: ${props.min}`;
+  }
+
+  if (v > props.max) {
+    return `Max value: ${props.max}`;
+  }
+
+  return props.error;
+});
+
+const propsRef = computed(() => props);
+
+const breakpointsRef = useSliderBreakpoints(propsRef);
+
+const position = computed(() => {
+  return (localValue.value - props.min) / range.value;
+});
+
+const progressStyle = computed(() => ({
+  right: Math.ceil((1 - position.value) * 100) + '%',
+}));
+
+const thumbStyle = computed(() => {
+  let value = Math.ceil((1 - position.value) * 100);
+  return {
+    right: `calc(${value}%) `,
+  };
+});
+
+const barRef = ref<HTMLElement>();
+const thumbRef = ref<HTMLElement>();
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    realtimeVal.value = val;
+  },
+);
+
+function round(value: number) {
+  const v = clamp(value, props.min, props.max);
+  // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004
+  return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);
+}
+
+useMouseCapture(thumbRef, (ev) => {
+  tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {
+    const { dx } = ev;
+
+    data.deltaValue = (dx / rect.width) * range.value;
+
+    realtimeVal.value = round(clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max));
+
+    if (ev.stop) {
+      emit('update:modelValue', round(localValue.value));
+      data.deltaValue = 0;
+    }
+  });
+});
+
+function setModelValue(value: number) {
+  emit('update:modelValue', round(value));
+}
+
+function updateModelValue(event: Event) {
+  setModelValue(+(event.target as HTMLInputElement).value);
+}
+
+function handleKeyPress(e: { code: string; preventDefault(): void }) {
+  if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Enter'].includes(e.code)) {
+    e.preventDefault();
+  }
+
+  const nextStep =
+    e.code === 'ArrowUp' || e.code === 'ArrowRight' ? props.step * 1 : e.code === 'ArrowDown' || e.code === 'ArrowLeft' ? props.step * -1 : 0;
+
+  setModelValue(props.modelValue + nextStep);
+}
+</script>
+
+<template>
+  <div :class="props.disabled ? 'ui-slider__disabled' : undefined" class="ui-slider__envelope">
+    <div :class="`ui-slider__mode-${props.mode}`" class="ui-slider">
+      <div class="ui-slider__wrapper">
+        <div class="ui-slider__label-section">
+          <label v-if="label" class="text-s">
+            <span>{{ label }}</span>
+            <PlTooltip v-if="slots.tooltip" class="info" position="top">
+              <template #tooltip>
+                <slot name="tooltip" />
+              </template>
+            </PlTooltip>
+          </label>
+          <div v-if="props.mode === 'text'" class="ui-slider__value-static text-s">{{ realtimeVal }}{{ measure }}</div>
+        </div>
+        <div class="ui-slider__base">
+          <div class="ui-slider__container">
+            <div ref="barRef" class="ui-slider__bar">
+              <div class="ui-slider__progress" :style="progressStyle" />
+            </div>
+          </div>
+          <div class="ui-slider__container ui-slider__container-thumb">
+            <template v-if="props.breakpoints">
+              <div v-for="(item, index) in breakpointsRef" :key="index" :style="{ right: `${item}%` }" class="ui-slider__thumb-step"></div>
+            </template>
+            <div ref="thumbRef" tabindex="0" class="ui-slider__thumb ui-slider__thumb-active" :style="thumbStyle" @keydown="handleKeyPress">
+              <div class="ui-slider__thumb-focused-contour" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="ui-slider__input-wrapper d-flex">
+        <input v-if="props.mode === 'input'" :value="realtimeVal" class="ui-slider__value text-s" @change="updateModelValue($event)" />
+      </div>
+    </div>
+    <!-- <div v-if="props.helper" class="ui-slider__helper">
+      {{ props.helper }}
+    </div> -->
+    <div v-if="error" class="ui-slider__error">
+      {{ error }}
+    </div>
+  </div>
+</template>