@milaboratories/uikit 2.2.36 → 2.2.38

package/src/components/PlChartStackedBar/StackedRow.vue

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import { tapIf } from '@milaboratories/helpers';
+import { computed } from 'vue';
+import type { PlChartStackedBarSegment } from './types';
+
+const props = defineProps<{
+  value: PlChartStackedBarSegment[];
+  height?: number;
+  showFractionInLabel?: boolean;
+}>();
+
+const style = computed(() => ({
+  height: '100%',
+  minHeight: '82px',
+}));
+
+const parts = computed(() => {
+  const parts = props.value || [];
+  const total = parts.reduce((res, it) => res + it.value, 0);
+  return parts.map((p) => {
+    const fraction = (p.value / total) * 100;
+    const fractionString = ((p.value / total) * 100).toFixed(1);
+    const label = tapIf(p.label, (label) => {
+      if (props.showFractionInLabel) {
+        return `${label} ${fractionString}%`;
+      }
+
+      return label;
+    });
+    return {
+      color: p.color.toString(),
+      description: p.description,
+      fraction,
+      label,
+    };
+  });
+});
+</script>
+
+<template>
+  <div
+    :class="[$style.component]" :style="style"
+  >
+    <div :class="$style.track">
+      <div
+        v-for="(v, i) in [0, 25, 50, 75, 100]"
+        :key="i"
+        :style="`left: ${v}%`"
+        :data-content="`${v}%`"
+      />
+    </div>
+    <div :class="$style.container">
+      <div v-if="!parts.length" :class="$style.notReady">Not ready</div>
+      <div
+        v-for="(p, i) in parts"
+        :key="i"
+        :title.prop="p.description ?? p.label"
+        :style="{
+          width: `${p.fraction}%`,
+          backgroundColor: p.color
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.component {
+  height: auto;
+  position: relative;
+  overflow: visible;
+  border: 1px solid green;
+
+  border: 1px solid var(--txt-01);
+  padding: 12px 6px;
+  border-radius: 0;
+  margin-bottom: 24px;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  gap: 1px;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  overflow: hidden;
+  > div {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.track {
+  position: absolute;
+  top: 0;
+  left: 6px;
+  right: 6px;
+  bottom: 0;
+  /* z-index: 1; */
+  > div {
+    height: 100%;
+    position: absolute;
+    bottom: 0;
+    border-left: 1px solid #e1e3eb;
+    &::after {
+      position: absolute;
+      content: attr(data-content);
+      left: 0;
+      bottom: -24px;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+.notReady {
+  color: var(--txt-03) !important;
+}
+
+.component .notReady {
+  font-size: larger;
+  font-weight: bolder;
+  color: var(--txt-mask);
+  margin-left: 24px;
+}
+
+.component .container {
+  position: relative;
+  z-index: 1;
+}
+</style>

package/src/components/PlChartStackedBar/index.ts

@@ -0,0 +1,3 @@
+export { default as PlChartStackedBar } from './PlChartStackedBar.vue';
+
+export * from './types';

package/src/components/PlChartStackedBar/types.ts

@@ -0,0 +1,34 @@
+import type { Color } from '@/colors';
+
+export type PlChartStackedBarSegment = {
+  value: number;
+  label: string;
+  description?: string;
+  color: string | Color;
+};
+
+export type PlChartStackedBarSettings = {
+  /**
+   * The title of the chart.
+   * This will be displayed at the top of the chart, if provided.
+   */
+  title?: string;
+
+  /**
+   * The data to be displayed in the chart.
+   * Each entry represents a segment of a stacked bar.
+   */
+  data: PlChartStackedBarSegment[];
+
+  /**
+   * The maximum number of legends displayed in a single column.
+   * Defaults to 5 if not specified.
+   */
+  maxLegendsInColumn?: number;
+
+  /**
+   * Whether to show legends for the chart.
+   * Defaults to `true` if not specified.
+   */
+  showLegends?: boolean;
+};

package/src/composition/useSortable2.ts

@@ -0,0 +1,282 @@
+import type { Ref } from 'vue';
+import { computed, watch, watchEffect } from 'vue';
+import { useEventListener } from './useEventListener';
+
+type SortableItem = {
+  el: HTMLElement;
+  y: number;
+  dy: number;
+  orderChanged: boolean;
+  initialScrollTop: number;
+};
+
+export type SortableSettings = {
+  onChange: (indices: number[]) => void;
+  handle?: string;
+  shakeBuffer?: number;
+  reorderDelay?: number;
+  transitionDelay?: string;
+};
+
+const classes = {
+  item: 'sortable__item',
+  animate: 'sortable__animate',
+};
+
+const getOffset = (el: HTMLElement) => {
+  return el.getBoundingClientRect().y;
+};
+
+const getMiddle = (el: HTMLElement) => {
+  const { y, height } = el.getBoundingClientRect();
+  return y + Math.ceil(height / 2);
+};
+
+const getBottom = (el: HTMLElement) => {
+  const { y, height } = el.getBoundingClientRect();
+  return y + height;
+};
+
+/**
+ * Description: Scroll support has been added to the container where sorting takes place.
+ * Some functionality duplicates the behavior of useScrollable.
+ *
+ * Purpose: To enable automatic scrolling when dragging items beyond the visible area of the container.
+ * Future Plan:
+ * - Verify the behavior of the new scrolling functionality within blocks and text elements.
+ * - Merge the current implementation with useScrollable to eliminate code duplication and create a unified scrolling solution.
+ */
+export function useSortable2(listRef: Ref<HTMLElement | undefined>, settings: SortableSettings) {
+  const state = {
+    item: undefined as SortableItem | undefined,
+    options() {
+      return [...(listRef.value?.children ?? [])] as HTMLElement[];
+    },
+  };
+  let oldScrollTop = 0;
+
+  watch(() => listRef.value, () => {
+    setTimeout(() => {
+      if (listRef.value) {
+        listRef.value.scrollTop = oldScrollTop;
+      }
+    }, 0);
+  });
+
+  const optionsRef = computed(() => {
+    return state.options();
+  });
+
+  const shakeBuffer = settings.shakeBuffer ?? 10;
+
+  const reorderDelay = settings.reorderDelay ?? 100;
+
+  function mouseDown(this: HTMLElement, e: { y: number; target: EventTarget | null }) {
+    const handle = settings.handle ? this.querySelector(settings.handle) : null;
+
+    if (!handle) {
+      return;
+    }
+
+    if (handle && !handle.contains(e.target as HTMLElement)) {
+      return;
+    }
+
+    this.classList.remove(classes.animate);
+    this.classList.add(classes.item);
+
+    state.item = {
+      el: this,
+      y: e.y,
+      dy: 0,
+      initialScrollTop: listRef.value?.scrollTop || 0,
+      orderChanged: false,
+    };
+  }
+
+  function elementsBefore(el: HTMLElement) {
+    const options = state.options();
+    return options.slice(0, options.indexOf(el));
+  }
+
+  function elementsAfter(el: HTMLElement) {
+    const children = state.options();
+    return children.slice(children.indexOf(el) + 1);
+  }
+
+  function insertBefore(before: HTMLElement, el: HTMLElement) {
+    const children = state.options().filter((e) => e !== el);
+    const index = children.indexOf(before);
+    children.splice(index, 0, el);
+    return children;
+  }
+
+  function insertAfter(after: HTMLElement, el: HTMLElement) {
+    const children = state.options().filter((e) => e !== el);
+    const index = children.indexOf(after);
+    children.splice(index + 1, 0, el);
+    return children;
+  }
+
+  function updatePosition(item: SortableItem, y: number) {
+    const currentScrollTop = listRef.value?.scrollTop || 0;
+    const scrollDiff = currentScrollTop - (item.initialScrollTop || 0);
+    item.dy = y - item.y + scrollDiff;
+    item.el.style.setProperty('transform', `translateY(${item.dy}px)`);
+  }
+
+  function changeOrder(reordered: HTMLElement[]) {
+    if (!state.item) {
+      return;
+    }
+
+    const { el } = state.item;
+
+    if (!el.isConnected) {
+      state.item = undefined;
+      return;
+    }
+
+    const oldPositions = reordered.map((e) => getOffset(e));
+
+    const y1 = getOffset(el);
+    listRef.value?.replaceChildren(...reordered);
+    const y2 = getOffset(el);
+
+    const newPositions = reordered.map((e) => getOffset(e));
+
+    const toAnimate: HTMLElement[] = [];
+
+    for (let i = 0; i < newPositions.length; i++) {
+      const option = reordered[i];
+
+      if (option === state.item.el) {
+        continue;
+      }
+
+      const newY = newPositions[i];
+
+      const oldY = oldPositions[i];
+
+      const invert = oldY - newY;
+
+      option.style.transform = `translateY(${invert}px)`;
+
+      toAnimate.push(option);
+    }
+
+    const dy = y2 - y1;
+
+    state.item.y = state.item.y + dy;
+    state.item.dy = state.item.dy - dy;
+    state.item.orderChanged = true;
+    state.item.el.style.setProperty('transform', `translateY(${state.item.dy}px)`);
+
+    toAnimate.forEach((o) => o.classList.remove(classes.animate));
+
+    requestAnimationFrame(function () {
+      toAnimate.forEach((option) => {
+        option.classList.add(classes.animate);
+        option.style.transform = '';
+        option.addEventListener('transitionend', () => {
+          option.classList.remove(classes.animate);
+        });
+      });
+    });
+  }
+
+  useEventListener(window, 'mousemove', (e: { y: number }) => {
+    if (!state.item) {
+      return;
+    }
+
+    const { el } = state.item;
+
+    updatePosition(state.item, e.y);
+
+    const upper = getOffset(state.item.el);
+    const bottom = getBottom(state.item.el);
+
+    const before = elementsBefore(el);
+    const after = elementsAfter(el);
+
+    before.forEach((e) => {
+      const y = getMiddle(e);
+
+      if (upper + shakeBuffer < y) {
+        changeOrder(insertBefore(e, el));
+      }
+    });
+
+    after.forEach((e) => {
+      const y = getMiddle(e);
+
+      if (bottom - shakeBuffer > y) {
+        changeOrder(insertAfter(e, el));
+      }
+    });
+
+    if (listRef.value) {
+      const rect = listRef.value.getBoundingClientRect();
+
+      const deltaUp = rect.top + el.getBoundingClientRect().height / 2;
+      if ((e as MouseEvent).clientY < deltaUp) {
+        listRef.value.scrollTop += (e as MouseEvent).clientY - deltaUp;
+      }
+
+      const deltaDown = rect.bottom - el.getBoundingClientRect().height / 2;
+      if ((e as MouseEvent).clientY > deltaDown) {
+        listRef.value.scrollTop += (e as MouseEvent).clientY - deltaDown;
+      }
+    }
+  });
+
+  useEventListener(window, 'mouseup', () => {
+    if (!state.item) {
+      return;
+    }
+
+    oldScrollTop = listRef.value?.scrollTop || 0;
+
+    const { el, orderChanged } = state.item;
+
+    el.classList.add(classes.animate);
+    el.style.removeProperty('transform');
+
+    el.addEventListener('transitionend', () => {
+      el.classList.remove(classes.animate, classes.item);
+    });
+
+    setTimeout(() => {
+      if (!orderChanged) {
+        return;
+      }
+
+      const newIndices = state.options().map((o) => Number(o.getAttribute('data-index')));
+
+      const list = listRef.value;
+
+      if (list) {
+        for (const child of state.options()) {
+          list.removeChild(child);
+        }
+
+        optionsRef.value.forEach((child) => {
+          list.appendChild(child);
+        });
+      }
+
+      settings.onChange(newIndices);
+    }, reorderDelay);
+
+    state.item = undefined;
+  });
+
+  watchEffect(() => {
+    optionsRef.value.forEach((child, i) => {
+      child.removeEventListener('mousedown', mouseDown);
+      child.addEventListener('mousedown', mouseDown);
+      child.setAttribute('data-index', String(i));
+    });
+  });
+}

package/src/index.ts

@@ -60,6 +60,10 @@ export * from './components/PlMaskIcon24';
 export * from './components/PlIcon16';
 export * from './components/PlIcon24';
 
+export * from './components/PlChartStackedBar';
+
+export * from './colors';
+
 // @TODO review (may be private)
 import DropdownListItem from './components/DropdownListItem.vue';
 
@@ -82,6 +86,7 @@ export { useMouseCapture } from './composition/useMouseCapture';
 export { useHover } from './composition/useHover';
 export { useMouse } from './composition/useMouse';
 export { useSortable } from './composition/useSortable';
+export { useSortable2 } from './composition/useSortable2';
 export { useInterval } from './composition/useInterval';
 export { useFormState } from './composition/useFormState';
 export { useQuery } from './composition/useQuery.ts';