@milaboratories/uikit 1.2.3

package/src/components/PlNumberField/PlNumberField.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import './pl-number-field.scss';
+import DoubleContour from '@/utils/DoubleContour.vue';
+import { useLabelNotch } from '@/utils/useLabelNotch';
+import { computed, nextTick, ref, useSlots } from 'vue';
+import { PlTooltip } from '@/components/PlTooltip';
+
+type NumberInputProps = {
+  modelValue: number | undefined;
+  disabled?: boolean;
+  label?: string;
+  placeholder?: string;
+  step?: number;
+  minValue?: number;
+  maxValue?: number;
+  errorMessage?: string;
+  validate?: (v: number) => string | undefined;
+};
+
+const props = withDefaults(defineProps<NumberInputProps>(), {
+  step: 1,
+  label: undefined,
+  placeholder: undefined,
+  minValue: undefined,
+  maxValue: undefined,
+  errorMessage: undefined,
+  validate: undefined,
+});
+
+const emit = defineEmits<{ (e: 'update:modelValue', number?: number): void }>();
+
+const root = ref<HTMLElement>();
+const slots = useSlots();
+const input = ref<HTMLInputElement>();
+// const localErrors = ref<string[]>([]);
+
+useLabelNotch(root);
+
+const canRenderValue = ref(true);
+
+const computedValue = computed({
+  get() {
+    if (canRenderValue.value) {
+      if (props.modelValue !== undefined) {
+        const num = new Number(props.modelValue);
+        return num.toString();
+      }
+      return '';
+    }
+    return '';
+  },
+  set(val) {
+    val = val.replace(/,/g, '');
+    if (isNumeric(val)) {
+      emit('update:modelValue', +val);
+      //try press 123.12345678912345 and than 6
+      if (val.toString() !== props.modelValue?.toString() && +val === props.modelValue && val[val.length - 1] !== '.') {
+        canRenderValue.value = false;
+        nextTick(() => {
+          canRenderValue.value = true;
+        });
+      }
+    } else {
+      if (val.trim() === '') {
+        emit('update:modelValue', undefined);
+      }
+      canRenderValue.value = false;
+      nextTick(() => {
+        canRenderValue.value = true;
+      });
+    }
+  },
+});
+
+const errors = computed(() => {
+  let ers: string[] = [];
+  if (props.errorMessage) {
+    ers.push(props.errorMessage);
+  }
+  if (!isNumeric(props.modelValue)) {
+    ers.push('Model value is not a number.');
+  } else {
+    if (props.minValue !== undefined && props.modelValue !== undefined && props.modelValue < props.minValue) {
+      ers.push(`Model value must be higher than ${props.minValue}`);
+    }
+    if (props.maxValue !== undefined && props.modelValue !== undefined && props.modelValue > props.maxValue) {
+      ers.push(`Model value must be less than ${props.maxValue}`);
+    }
+  }
+
+  ers = [...ers];
+
+  return ers.join(' ');
+});
+
+const isIncrementDisabled = computed(() => {
+  if (props.maxValue && props.modelValue !== undefined) {
+    if ((props.modelValue || 0) + props.step > props.maxValue) {
+      return true;
+    }
+  }
+
+  return false;
+});
+
+const isDecrementDisabled = computed(() => {
+  if (props.minValue && props.modelValue !== undefined) {
+    if ((props.modelValue || 0) - props.step < props.minValue) {
+      return true;
+    }
+  }
+
+  return false;
+});
+
+function isNumeric(str: string | number | undefined) {
+  if (str !== undefined) {
+    str = str?.toString();
+    return !isNaN(+str) && !isNaN(parseFloat(str));
+  }
+  return false;
+}
+
+function increment() {
+  if (!isIncrementDisabled.value) {
+    let nV = 0;
+    if (props.modelValue === undefined) {
+      nV = props.minValue ? props.minValue : 0;
+    } else {
+      nV = +(props.modelValue || 0) + props.step;
+    }
+
+    computedValue.value = nV.toString();
+  }
+}
+
+function decrement() {
+  if (!isDecrementDisabled.value) {
+    let nV = 0;
+    if (props.modelValue === undefined) {
+      nV = 0;
+    } else {
+      nV = +(props.modelValue || 0) - props.step;
+    }
+
+    computedValue.value = props.minValue ? Math.max(props.minValue, nV).toString() : nV.toString();
+  }
+}
+
+function handleKeyPress(e: { code: string; preventDefault(): void }) {
+  if (['ArrowDown', 'ArrowUp'].includes(e.code)) {
+    e.preventDefault();
+  }
+
+  e.code === 'ArrowUp' ? increment() : e.code === 'ArrowDown' ? decrement() : undefined;
+}
+</script>
+
+<template>
+  <div ref="root" :class="{ error: !!errors.trim(), disabled: disabled }" class="mi-number-field d-flex-column" @keydown="handleKeyPress($event)">
+    <div class="mi-number-field__main-wrapper d-flex">
+      <DoubleContour class="mi-number-field__contour" />
+      <div class="mi-number-field__wrapper flex-grow d-flex flex-align-center">
+        <label v-if="label" class="text-description">
+          {{ label }}
+          <PlTooltip v-if="slots.tooltip" class="info" position="top">
+            <template #tooltip>
+              <slot name="tooltip" />
+            </template>
+          </PlTooltip>
+        </label>
+        <input ref="input" v-model="computedValue" :disabled="disabled" :placeholder="placeholder" class="text-s flex-grow" />
+      </div>
+      <div class="mi-number-field__icons d-flex-column">
+        <div
+          :class="{ disabled: isIncrementDisabled }"
+          class="mi-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"
+          @click="increment"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z"
+              fill="#110529"
+            />
+          </svg>
+        </div>
+        <div
+          :class="{ disabled: isDecrementDisabled }"
+          class="mi-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"
+          @click="decrement"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z"
+              fill="#110529"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div v-if="errors.trim()" class="mi-number-field__hint text-description">
+      {{ errors }}
+    </div>
+  </div>
+</template>

package/src/components/PlNumberField/__tests__/PlNumberField.spec.ts

@@ -0,0 +1,104 @@
+import PlNumberField from '../PlNumberField.vue';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+describe('NumberInput.vue', () => {
+  it('renders correctly with default props', () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+    expect(wrapper.find('input').element.value).toBe('10');
+  });
+
+  it('displays the label when provided', () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        label: 'Test Label',
+      },
+    });
+    expect(wrapper.find('label').text()).toBe('Test Label');
+  });
+
+  it('increments the value when increment button is clicked', async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        step: 2,
+      },
+    });
+    const incrementButton = wrapper.find('.mi-number-field__icons div:first-child');
+    await incrementButton.trigger('click');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[12]]);
+  });
+
+  it('decrements the value when decrement button is clicked', async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        step: 1,
+      },
+    });
+    const decrementButton = wrapper.find('.mi-number-field__icons div:last-child');
+    await decrementButton.trigger('click');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[9]]);
+  });
+
+  it('disables increment button when value exceeds maxValue', () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        maxValue: 10,
+      },
+    });
+    const incrementButton = wrapper.find('.mi-number-field__icons div:first-child');
+    expect(incrementButton.classes()).toContain('disabled');
+  });
+
+  it('disables decrement button when value is below minValue', () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 1,
+        minValue: 1,
+      },
+    });
+    const decrementButton = wrapper.find('.mi-number-field__icons div:last-child');
+    expect(decrementButton.classes()).toContain('disabled');
+  });
+
+  it('renders error messages when there are validation errors', () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 5,
+        minValue: 10,
+        errorMessage: 'Custom error message',
+      },
+    });
+    expect(wrapper.find('.mi-number-field__hint').text()).toContain('Custom error message');
+    expect(wrapper.find('.mi-number-field__hint').text()).toContain('Model value must be higher than 10');
+  });
+
+  it('validates and updates the computedValue when the user types in the input field', async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 5,
+      },
+    });
+    const input = wrapper.find('input');
+    await input.setValue('15');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[15]]);
+  });
+
+  it('emits update:modelValue with undefined when input is cleared', async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+    const input = wrapper.find('input');
+    await input.setValue('');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[undefined]]);
+  });
+});

package/src/components/PlNumberField/index.ts

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

package/src/components/PlNumberField/pl-number-field.scss

@@ -0,0 +1,143 @@
+.mi-number-field {
+  --contour-color: var(--txt-01);
+  --contour-border-width: 1px;
+  --options-bg: #fff;
+  --option-hover-bg: var(--btn-sec-hover-grey);
+  --label-offset-left-x: 8px;
+  --label-offset-right-x: 8px;
+  --label-color: var(--txt-01);
+  --color-hint: #9d9eae;
+
+  // overflow: hidden;
+
+  ::placeholder {
+    color: #cfd1db;
+    opacity: 1;
+  }
+
+  &__main-wrapper {
+    height: 40px;
+    position: relative;
+  }
+
+  &__wrapper {
+    padding-left: 12px;
+    // background-color: rgb(111, 94, 94);
+    border-radius: 6px;
+  }
+
+  &__icons {
+    // background-color: green;
+    width: 40px;
+    border-radius: 6px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 1px solid var(--contour-color);
+  }
+
+  &__icon {
+    line-height: 0;
+
+    &.disabled {
+      cursor: not-allowed;
+      position: relative;
+      z-index: 1;
+
+      svg path {
+        fill: #cfd1db;
+      }
+    }
+  }
+
+  &__icon:hover {
+    background-color: rgba(155, 171, 204, 0.16);
+  }
+
+  &__icon:first-child {
+    border-bottom: 1px solid var(--contour-color);
+  }
+
+  &__hint {
+    margin-top: 3px;
+    color: var(--color-hint);
+  }
+
+  input {
+    outline: none;
+    border: none;
+    width: 100%;
+    background: unset;
+  }
+
+  &__contour {
+    border-radius: var(--border-radius-control);
+    border: var(--contour-border-width) solid var(--contour-color);
+    box-shadow: var(--contour-box-shadow);
+    z-index: 0;
+    pointer-events: none;
+    transition: all 0.3s;
+  }
+
+  &:focus-within:not(.error) {
+    --label-color: var(--txt-focus);
+    --contour-color: var(--border-color-focus);
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow);
+  }
+
+  &:focus-within.error {
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--color-error-shadow);
+  }
+
+  &.error {
+    --contour-color: var(--txt-error);
+    --label-color: var(--txt-error);
+    --color-hint: var(--txt-error);
+  }
+
+  &.disabled {
+    --contour-color: var(--color-dis-01);
+    --control-mask-fill: var(--color-dis-01);
+    cursor: not-allowed;
+
+    label,
+    .mi-number-field__hint,
+    input {
+      color: var(--contour-color);
+    }
+
+    svg path {
+      fill: var(--contour-color);
+    }
+
+    .mi-number-field__icons {
+      pointer-events: none;
+    }
+  }
+
+  label {
+    position: absolute;
+    top: 0;
+    transform: translateY(-60%);
+    left: var(--label-offset-left-x);
+    display: flex;
+    align-items: center;
+    padding: 0 4px;
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+    cursor: inherit;
+    color: var(--label-color);
+    transition: color 0.3s;
+
+    .required {
+      display: inline-block;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 16px;
+      color: var(--txt-error);
+      margin-right: 4px;
+    }
+  }
+}

package/src/components/PlProgressBar/PlProgressBar.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    loading: boolean;
+    progress: number;
+    completeMessage: string;
+  }>(),
+  { progress: 0, completeMessage: 'Completed' },
+);
+
+const readyMsg = computed(() => (props.progress === 100 ? props.completeMessage : ''));
+</script>
+
+<template>
+  <div v-if="loading" class="ui-progress-bar">
+    <div class="ui-progress-bar__indicator" :style="{ width: progress + '%' }"></div>
+    <div class="ui-progress-bar__messages d-flex align-center pl-6 pr-6">
+      <div class="ui-progress-bar__message flex-grow-1">{{ readyMsg }}</div>
+      <div class="ui-progress-bar__percent">{{ progress + '%' }}</div>
+    </div>
+  </div>
+</template>

package/src/components/PlProgressBar/index.ts

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

package/src/components/PlSlideModal/PlSlideModal.vue

@@ -0,0 +1,104 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, useAttrs } from 'vue';
+import TransitionSlidePanel from '@/components/TransitionSlidePanel.vue';
+import { useClickOutside, useEventListener } from '@/index';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    width?: string;
+    shadow?: boolean;
+  }>(),
+  {
+    modelValue: false,
+    width: undefined,
+    shadow: false,
+  },
+);
+
+const width = computed(() => props.width ?? '100%');
+
+const modal = ref();
+
+const $attrs = useAttrs();
+
+useClickOutside(modal, () => {
+  if (props.modelValue) {
+    emit('update:modelValue', false);
+  }
+});
+
+useEventListener(document, 'keydown', (evt: KeyboardEvent) => {
+  if (evt.key === 'Escape') {
+    emit('update:modelValue', false);
+  }
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <TransitionSlidePanel>
+      <div v-if="modelValue" ref="modal" :style="{ width }" v-bind="$attrs" class="slide-modal" @keyup.esc="emit('update:modelValue', false)">
+        <div class="close-dialog-btn" @click="emit('update:modelValue', false)" />
+        <div class="slide-modal__content">
+          <slot />
+        </div>
+      </div>
+    </TransitionSlidePanel>
+    <div v-if="modelValue && shadow" class="dialog-modal__shadow" @keyup.esc="emit('update:modelValue', false)" />
+  </Teleport>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/mixins.scss';
+
+.slide-modal {
+  position: absolute;
+  top: var(--title-bar-height);
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  padding: 24px;
+
+  will-change: transform;
+
+  background-color: #fff;
+
+  border-left: 1px solid var(--txt-01);
+  border-top: 1px solid var(--txt-01);
+
+  box-shadow: var(--shadow-l);
+  border-radius: 24px 0 0 0;
+
+  .close-dialog-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    cursor: pointer;
+    background-color: #d3d7e0;
+    @include mask(url('@/assets/images/24_close.svg'), 24px);
+    &:hover {
+      background-color: var(--main-dark-color);
+    }
+  }
+
+  &.collapse-padding {
+    padding: 0;
+    border-radius: 0;
+    border-top: 0;
+  }
+
+  &__content {
+    height: 100%;
+    overflow: auto;
+  }
+}
+</style>

package/src/components/PlSlideModal/index.ts

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