@milaboratories/uikit 1.2.3

package/src/components/HScroll.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { computed, ref, unref } from 'vue';
+import { useEventListener } from '@/composition/useEventListener';
+import { eventListener } from '@/helpers/dom';
+
+const emit = defineEmits(['update:scrollLeft']);
+
+const props = defineProps<{
+  scrollLeft: number;
+  clientWidth: number;
+  scrollWidth: number;
+}>();
+
+const scrollRef = ref<EventTarget>();
+
+const ratioRef = computed(() => props.clientWidth / (props.scrollWidth || 1));
+
+const visibleRef = computed(() => {
+  return ratioRef.value < 1;
+});
+
+const scrollbarStyle = computed(() => {
+  const ratio = unref(ratioRef);
+  return {
+    left: props.scrollLeft * ratio + 'px',
+    width: Math.floor(props.clientWidth * ratio) + 'px',
+  };
+});
+
+useEventListener(scrollRef, 'pointerdown', (down: PointerEvent) => {
+  const s = {
+    clientX: down.clientX,
+  };
+
+  const update = (e: MouseEvent) => {
+    const dy = (e.clientX - s.clientX) / ratioRef.value;
+    emit('update:scrollLeft', props.scrollLeft + dy);
+    s.clientX = e.clientX;
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const removePointerMove = eventListener(document as any, 'mousemove', update);
+
+  ['mouseup', 'pointercancel'].forEach((eventType) => {
+    document.addEventListener(eventType, removePointerMove, { once: true });
+  });
+});
+</script>
+
+<template>
+  <div v-if="visibleRef" ref="scrollRef" class="h-scroll">
+    <div class="h-scroll__scrollbar" :style="scrollbarStyle" />
+  </div>
+</template>

package/src/components/InputRange.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: [number, number];
+    separator?: string;
+  }>(),
+  {
+    separator: '-',
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: [number, number]): void;
+  (e: 'change', val: [number, number]): void;
+}>();
+
+const data = reactive({
+  left: props.modelValue[0],
+  right: props.modelValue[1],
+});
+
+const isFocused = ref(false);
+
+const classes = computed(() => (isFocused.value ? 'ui-input-range-focused' : 'ui-input-range-focused'));
+
+const valuesModel = computed({
+  get() {
+    return {
+      left: Math.min(...props.modelValue), // dangerous....
+      right: Math.max(...props.modelValue),
+    };
+  },
+  set() {},
+});
+
+watch(
+  () => valuesModel.value,
+  (value) => (data.left = value.left) && (data.right = value.right),
+);
+
+// watch(
+//   () => props.modelValue,
+//   (value: [number, number]) => {
+//     console.log('model value updated');
+//     (data.left = value[0]), (data.right = value[1]);
+//   },
+// );
+
+function updateModel() {
+  emit('update:modelValue', [+data.left, +data.right]);
+  emit('change', [+data.left, +data.right]);
+}
+
+function validateInput(isLeft: boolean, event: Event) {
+  const value: string = (event.target as HTMLInputElement).value;
+  const result = /^[0-9]{0,2}$/.test(value);
+  //if there is more than 3 digits we cut last one
+  if (!result) {
+    if (isLeft) {
+      data.left = +value.slice(0, value.length - 1);
+    } else {
+      data.right = +value.slice(0, value.length - 1);
+    }
+  } else {
+    if (isLeft) {
+      data.left = +value;
+    } else {
+      data.right = +value;
+    }
+  }
+}
+</script>
+
+<template>
+  <!-- {{ data }} -->
+  <div :class="classes" class="ui-input-range" v-bind="$attrs">
+    <input
+      v-model="valuesModel.left"
+      class="text-s"
+      type="text"
+      @change="updateModel"
+      @focus="isFocused = true"
+      @focusout="isFocused = false"
+      @input="validateInput(true, $event)"
+    />
+    <div class="ui-input-range__separator">{{ props.separator }}</div>
+    <input
+      v-model="valuesModel.right"
+      class="text-s"
+      type="text"
+      @change="updateModel"
+      @focus="isFocused = true"
+      @focusout="isFocused = false"
+      @input="validateInput(false, $event)"
+    />
+  </div>
+</template>

package/src/components/LongText.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { debounce, notEmpty } from '../helpers/utils';
+
+const hasElementEllipsis = ref(false);
+
+const span = ref<HTMLElement>();
+
+const isHovered = ref(false);
+
+const classes = computed(() => (isHovered.value && hasElementEllipsis.value ? 'ui-lt-animate' : ''));
+
+const updateStatus = debounce((val: boolean) => (isHovered.value = val), 500);
+
+const animationTime = computed(() => {
+  return span.value ? `${span.value?.innerHTML.length * 0.4}s` : '5s';
+});
+
+function isEllipsisEnabled() {
+  const el = notEmpty(span.value, 'span cannot be empty');
+  hasElementEllipsis.value = el.clientWidth < el.scrollWidth;
+}
+
+function mouseoverHandler() {
+  isEllipsisEnabled();
+  updateStatus(true);
+}
+
+function mouseoutHandler() {
+  updateStatus(false);
+}
+</script>
+
+<template>
+  <div v-bind="$attrs" class="ui-lt-container">
+    <span @mouseover="mouseoverHandler" @mouseleave="mouseoutHandler">
+      <span ref="span" :class="classes"><slot /></span>
+    </span>
+  </div>
+</template>
+
+<style lang="scss">
+.ui-lt-container {
+  outline: 1px solid red;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  border-radius: 5px;
+
+  span {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    vertical-align: bottom;
+    pointer-events: all !important;
+  }
+
+  .ui-lt-animate {
+    position: relative;
+    animation: left-to-right v-bind(animationTime) infinite alternate linear;
+
+    overflow: unset !important;
+    text-overflow: unset !important;
+    width: fit-content !important;
+  }
+}
+
+@keyframes left-to-right {
+  0% {
+    transform: translateX(0%);
+    left: 0%;
+  }
+
+  100% {
+    transform: translateX(-101%);
+    left: 101%;
+  }
+}
+</style>

package/src/components/MaskIcon16.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { MaskIconName16, Size } from '@/types';
+
+const props = defineProps<{
+  name: MaskIconName16;
+  size?: Size;
+}>();
+
+const style = computed(() => (props.size === 'large' ? '--mask-size: 24px' : ''));
+
+const className = computed(() => `mask-16 mask-${props.name}`);
+</script>
+
+<template>
+  <i :style="style" :class="className" />
+</template>

package/src/components/MaskIcon24.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { MaskIconName24, Size } from '@/types';
+
+const props = defineProps<{
+  name: MaskIconName24;
+  size?: Size;
+}>();
+
+const className = computed(() => `mask-24 mask-${props.name}`);
+</script>
+
+<template>
+  <i :class="className" />
+</template>

package/src/components/PlAlert/PlAlert.vue

@@ -0,0 +1,89 @@
+<script lang="ts">
+export default {
+  name: 'PlAlert',
+};
+</script>
+
+<script lang="ts" setup>
+import './pl-alert.scss';
+
+defineEmits<{
+  /**
+   * Emitted when the model value is updated, typically when the close button is clicked.
+   *
+   * @param value - The new value of the model, generally `false` when the alert is closed.
+   */
+  (e: 'update:modelValue', value: boolean): void;
+}>();
+
+withDefaults(
+  defineProps<{
+    /**
+     * Controls the visibility of the alert component. If `true`, the alert is visible.
+     *
+     * @default true
+     */
+    modelValue: boolean;
+    /**
+     * The type of alert, which determines the alert's style and icon.
+     * Can be one of `'success' | 'info' | 'warn' | 'error'`.
+     */
+    type?: 'success' | 'info' | 'warn' | 'error';
+    /**
+     * An optional label that appears at the top of the alert.
+     */
+    label?: string;
+    /**
+     * If `true`, an icon corresponding to the alert type is displayed.
+     */
+    icon?: boolean;
+    /**
+     * If `true`, a close button is displayed in the alert, allowing the user to close it.
+     */
+    closeable?: boolean;
+    /**
+     * If `true`, the alert text is displayed in a monospace font.
+     */
+    monospace?: boolean;
+    /**
+     * If `true`, the alert content will preserve whitespace and line breaks.
+     */
+    whiteSpacePre?: boolean;
+
+    /**
+     * Max height (css value like '120px or 30%')
+     */
+    maxHeight?: string;
+  }>(),
+  {
+    modelValue: true,
+    type: undefined,
+    label: undefined,
+    icon: undefined,
+    closeable: undefined,
+    monospace: undefined,
+    whiteSpacePre: undefined,
+    maxHeight: undefined,
+  },
+);
+
+const iconMap = {
+  success: 'success',
+  warn: 'warning',
+  info: 'edit',
+  error: 'error',
+};
+</script>
+
+<template>
+  <div v-if="modelValue" class="pl-alert" :style="{ maxHeight }" :class="[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']">
+    <div v-if="icon && type" class="pl-alert__icon">
+      <div :class="`icon-24 icon-${iconMap[type]}`" />
+    </div>
+    <div class="pl-alert__main">
+      <label v-if="label">{{ label }}</label>
+      <div class="pl-alert__main__text"><slot /></div>
+    </div>
+    <div v-if="closeable" class="pl-alert__close-btn" aria-label="Close alert" role="button" @click="$emit('update:modelValue', false)" />
+  </div>
+</template>

package/src/components/PlAlert/index.ts

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

package/src/components/PlAlert/pl-alert.scss

@@ -0,0 +1,83 @@
+@import '@/assets/mixins.scss';
+
+.pl-alert {
+  --text-font-family: var(--font-family-base);
+  --text-white-space: normal;
+  --indent: 24px;
+
+  position: relative;
+  padding: 12px;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+  border: 1px solid var(--border-color-default);
+  border-radius: 6px;
+  color: var(--txt-01);
+
+  &.monospace {
+    --text-font-family: var(--font-family-monospace);
+  }
+
+  &.whiteSpacePre {
+    --text-white-space: pre;
+  }
+
+  &__error {
+    background: var(--notification-error);
+  }
+
+  &__warn {
+    background: var(--notification-warning);
+  }
+
+  &__success {
+    background: var(--notification-success);
+  }
+
+  &__info {
+    background: var(--notification-neutral);
+  }
+
+  &__icon {
+    width: 24px;
+  }
+
+  &__main {
+    display: flex;
+    flex-direction: column;
+    min-height: 24px;
+    flex: 1;
+    overflow: hidden;
+    width: 100%;
+    gap: 6px;
+    label {
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 24px;
+      letter-spacing: -0.2px;
+    }
+    &__text {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      font-family: var(--text-font-family);
+      white-space: var(--text-white-space);
+      max-width: 100%;
+      flex: 1;
+      @include scrollbar(true);
+    }
+  }
+
+  &__close-btn {
+    position: absolute;
+    top: 10px;
+    right: 12px;
+    cursor: pointer;
+    background-color: #d3d7e0;
+    @include mask(url(@/assets/images/24_close.svg), 24px);
+    transition: all 0.1s ease-in-out;
+    &:hover {
+      background-color: var(--main-dark-color);
+    }
+  }
+}

package/src/components/PlBtnAccent/PlBtnAccent.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+/**
+ * Accent button
+ */
+export default {
+  name: 'PlBtnAccent',
+};
+</script>
+
+<script lang="ts" setup>
+import './pl-btn-accent.scss';
+import type { MaskIconName16, Size } from '@/types';
+import BtnBase from '@/base/BtnBase.vue';
+
+const props = defineProps<{
+  /**
+   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+   */
+  loading?: boolean;
+  /**
+   * Size of the button, the default value is 'medium'
+   */
+  size?: Size;
+  /**
+   * If `true` the shape is round.
+   */
+  round?: boolean;
+  /**
+   * Icon to display
+   */
+  icon?: MaskIconName16;
+  /**
+   * If `true`, an icon is displayed before the text.
+   */
+  reverse?: boolean;
+  /**
+   * Justify text at the center
+   */
+  justifyCenter?: boolean;
+}>();
+</script>
+
+<template>
+  <BtnBase class="ui-btn-accent" v-bind="props">
+    <slot />
+  </BtnBase>
+</template>

package/src/components/PlBtnAccent/index.ts

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

package/src/components/PlBtnAccent/pl-btn-accent.scss

@@ -0,0 +1,30 @@
+@import "@/assets/mixins";
+
+.ui-btn-accent {
+  @include base-btn;
+
+  --color-btn-background: var(--color-accent-default);
+  --color-btn-hover: var(--color-accent-hover);
+
+  background-color: var(--color-btn-background);
+  border: none;
+
+  &.large {
+    --drop-shadow: 3px 3px 0px #000000;
+  }
+
+  &.loading {
+    background: rgba(7, 5, 41, 0.8);
+  }
+
+  &:disabled {
+    background-color: var(--btn-disabled-bg);
+    box-shadow: none !important;
+    cursor: auto;
+  }
+
+  &:active {
+    --active-shadow: inset 0px 3px 0px rgba(0, 0, 0, 0.24);
+    --drop-shadow: 0 0 0 0 transparent;
+  }
+}

package/src/components/PlBtnGhost/PlBtnGhost.vue

@@ -0,0 +1,75 @@
+<script lang="ts">
+/**
+ * Ghost button
+ */
+export default {
+  name: 'PlBtnGhost',
+};
+</script>
+
+<script lang="ts" setup>
+import './pl-btn-ghost.scss';
+import type { MaskIconName16, Size } from '@/types';
+import MaskIcon16 from '@/components/MaskIcon16.vue';
+import { computed, ref, useSlots } from 'vue';
+import { useRipple } from '@/composition/useRipple';
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+     */
+    loading?: boolean;
+    /**
+     * Size of the button, the default value is 'medium'
+     */
+    size?: Size;
+    /**
+     * If `true` the shape is round.
+     */
+    round?: boolean;
+    /**
+     * Icon to display
+     */
+    icon?: MaskIconName16;
+    /**
+     * If `true`, an icon is displayed before the text.
+     */
+    reverse?: boolean;
+    /**
+     * Justify text at the center (is `true` by default)
+     */
+    justifyCenter?: boolean;
+  }>(),
+  {
+    size: undefined,
+    icon: undefined,
+    justifyCenter: true,
+  },
+);
+
+const small = computed(() => props.size === 'small');
+const large = computed(() => props.size === 'large');
+
+const btnRef = ref();
+
+const slots = useSlots();
+
+useRipple(btnRef);
+</script>
+
+<template>
+  <button
+    ref="btnRef"
+    tabindex="0"
+    class="ui-btn-ghost"
+    :class="{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }"
+    v-bind="{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }"
+  >
+    <span v-if="slots.default && !round">
+      <slot />
+    </span>
+    <MaskIcon16 v-if="loading" name="loading" :size="size" />
+    <MaskIcon16 v-else-if="icon" :name="icon" :size="size" />
+  </button>
+</template>

package/src/components/PlBtnGhost/index.ts

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

package/src/components/PlBtnGhost/pl-btn-ghost.scss

@@ -0,0 +1,28 @@
+@import "@/assets/mixins";
+
+.ui-btn-ghost {
+  @include base-btn;
+  gap: 10px;
+  background: transparent;
+  border: none;
+  width: fit-content;
+
+  --color-text: var(--txt-01);
+  --color-btn-hover: var(--btn-sec-hover-grey);
+
+  [data-theme="dark"] & {
+    &:hover {
+      --color-text: #87E087;
+    }
+  }
+
+  &:disabled {
+    --color-text: var(--btn-disabled-bg);
+    box-shadow: none !important;
+    cursor: auto;
+  }
+
+  &.loading {
+    --color-text: var(--btn-disabled-bg);
+  }
+}