sprof 0.0.2 → 0.0.10

package/src/components/atoms/PDatePicker/PDatePicker.test.ts

@@ -1,63 +0,0 @@
-import { mount } from '@vue/test-utils';
-
-import PDatePicker from './PDatePicker.vue';
-
-describe('PDatePicker', () => {
-  // 1. Тест на рендеринг с параметрами
-  it('renders correctly with props', () => {
-    const label = 'Test Label';
-    const wrapper = mount(PDatePicker, {
-      props: {
-        label,
-        modelValue: new Date(), // Передаем начальное значение modelValue
-        margin: '10px',
-        padding: '5px',
-      },
-    });
-
-    expect(wrapper.find('.text-field__label').text()).toBe(label);
-    expect(wrapper.attributes('style')).toContain('margin: 10px;');
-    expect(wrapper.attributes('style')).toContain('padding: 5px;');
-  });
-
-  // 2. Тест ввода даты
-  it('emits input event with formatted date on input', async () => {
-    const wrapper = mount(PDatePicker, {
-      props: {
-        label: 'date',
-        modelValue: new Date(),
-      },
-    });
-
-    const input = wrapper.find('input[type="date"]');
-    await input.setValue('2024-10-16'); // Устанавливаем значение даты
-
-    expect(wrapper.emitted().input).toBeTruthy(); // Проверяем, что событие было эмитировано
-    expect(wrapper.emitted().input[0]).toEqual(['2024-10-16']); // Проверяем значение события
-  });
-
-  // 3. Тест очистки даты
-  it('emits null when input is cleared', async () => {
-    const wrapper = mount(PDatePicker, {
-      props: {
-        label: 'date',
-        modelValue: new Date(),
-      },
-    });
-
-    const input = wrapper.find('input[type="date"]');
-    await input.setValue(''); // Очищаем значение
-
-    expect(wrapper.emitted().input).toBeTruthy();
-    expect(wrapper.emitted().input[0]).toEqual([null]); // Проверяем, что эмитируется null
-  });
-
-  it('does not render label if label prop is not provided', () => {
-    const wrapper = mount(PDatePicker, {
-      props: {
-        modelValue: new Date(),
-      },
-    });
-    expect(wrapper.find('.text-field__label').exists()).toBe(false);
-  });
-});

package/src/components/atoms/PDatePicker/PDatePicker.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="text-field" :style="{ margin: margin, padding: padding }">
-    <label v-if="label" class="text-field__label" :for="label">
-      {{ label }}
-    </label>
-    <div class="field">
-      <div class="left-field">
-        <slot />
-      </div>
-      <input
-        :id="label"
-        max="2100"
-        min="1900"
-        :value="format(model)"
-        class="text-field__input"
-        type="date"
-        :name="label"
-        @input="handleInput"
-      />
-      <div class="right-field">
-        <slot name="right" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { defineEmits, defineModel, defineProps } from 'vue';
-
-const emit = defineEmits(['blur', 'input']); // Определяем emit
-const model = defineModel<Date | null>({ required: true }); // Тип Date | null
-
-defineProps({
-  text: { type: String, default: '', required: false },
-  label: { type: String, default: '', required: false },
-  placeholder: { type: String, default: '', required: false },
-  margin: { type: String, required: false, default: '' },
-  padding: { type: String, default: '', required: false },
-});
-
-const handleInput = (event: Event) => {
-  const input = event.target as HTMLInputElement; // Приведение типа
-  const dateValue = input.valueAsDate; // Сохраняем значение в переменной
-
-  // Проверяем, не равно ли значение null
-  if (dateValue) {
-    model.value = dateValue; // Присваиваем значение только если оно не null
-    emit('input', format(model.value)); // Эмитируем значение как строку
-  } else {
-    model.value = null; // Устанавливаем значение в null
-    emit('input', null); // Эмитируем null, если значение недействительно
-  }
-};
-
-// Форматируем дату в строку ISO
-const format = (d: Date | null): string => {
-  return d ? new Date(d.getTime() - d.getTimezoneOffset() * 60 * 1000).toISOString().split('T')[0] : '';
-};
-</script>
-
-<style scoped>
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-.field {
-  position: relative;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  background: $input-background;
-  border-radius: $p-input-border-radius;
-  border: $p-input-border;
-  padding: $p-input-padding;
-  margin: $p-input-margin;
-  overflow: hidden;
-}
-
-.right-field {
-  display: flex;
-  justify-content: right;
-  align-items: center;
-  width: auto;
-}
-
-.left-field {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: auto;
-}
-
-.text-field {
-  width: $input-width;
-}
-
-.text-field__label {
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  width: 100%;
-  font-family: $input-font;
-  color: $input-label-color;
-  font-size: $base-font-small-size;
-  margin: $input-label-margin;
-}
-
-.text-field__input {
-  width: 100%;
-  height: $input-height;
-  font-family: $input-font;
-  font-size: $input-font-size;
-  background: $input-background;
-  color: $input-font-color;
-  border: $input-border;
-  margin: $input-margin;
-  padding: $input-padding;
-}
-
-.text-field__input::placeholder {
-  font-family: $input-font;
-  font-size: $input-font-size;
-  color: $input-font-color;
-}
-
-.text-field__input:focus {
-  color: $input-font-color;
-  outline: 0;
-}
-
-.text-field__input:disabled,
-.text-field__input[readonly] {
-  background-color: $input-readonly-background;
-  opacity: 1;
-}
-</style>

package/src/components/atoms/PFlex/PFlex.test.ts

@@ -1,41 +0,0 @@
-import { mount } from '@vue/test-utils';
-
-import PFlex from './PFlex.vue';
-
-describe('PFlex', () => {
-  // 1. Тест рендеринга слота
-  test('renders slot content', () => {
-    const wrapper = mount(PFlex, {
-      slots: {
-        default: '<div class="test-content">Content</div>',
-      },
-    });
-    const content = wrapper.find('.test-content');
-    expect(content.exists()).toBe(true);
-    expect(content.text()).toBe('Content');
-  });
-
-  // 2. Тест применения стилей
-  test('applies styles from props', () => {
-    const wrapper = mount(PFlex, {
-      props: {
-        margin: '10px',
-        padding: '5px',
-        width: '100px',
-        height: '50px',
-        justifyContent: 'center',
-        alignItems: 'flex-start',
-        background: 'red',
-      },
-    });
-
-    const flexLine = wrapper.find('.flex-line');
-    expect(flexLine.attributes('style')).toContain('margin: 10px');
-    expect(flexLine.attributes('style')).toContain('padding: 5px');
-    expect(flexLine.attributes('style')).toContain('width: 100px');
-    expect(flexLine.attributes('style')).toContain('height: 50px');
-    expect(flexLine.attributes('style')).toContain('justify-content: center');
-    expect(flexLine.attributes('style')).toContain('align-items: flex-start');
-    expect(flexLine.attributes('style')).toContain('background: red');
-  });
-});

package/src/components/atoms/PFlex/PFlex.vue

@@ -1,46 +0,0 @@
-<template>
-  <div
-    class="flex-line"
-    :style="{
-      margin: margin,
-      padding: padding,
-      width: width,
-      minWidth: minWidth,
-      maxWidth: maxWidth,
-      height: height,
-      justifyContent: justifyContent,
-      background: background,
-      alignItems: alignItems,
-    }"
-  >
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-defineOptions({ inheritAttrs: false });
-
-defineProps({
-  margin: { type: String, default: '', required: false },
-  padding: { type: String, default: '', required: false },
-  width: { type: String, default: '', required: false },
-  minWidth: { type: String, default: '', required: false },
-  maxWidth: { type: String, default: '', required: false },
-  height: { type: String, default: '', required: false },
-  justifyContent: { type: String, default: '', required: false },
-  background: { type: String, default: '', required: false },
-  alignItems: { type: String, default: '', required: false },
-});
-</script>
-
-<style scoped>
-.flex-line {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  background: inherit;
-  color: inherit;
-}
-</style>

package/src/components/atoms/PInput/PInput.stories.ts

@@ -1,40 +0,0 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-
-import PInput from './PInput.vue';
-
-export default {
-  title: 'Atoms/PInput',
-  component: PInput,
-  argTypes: {
-    // disabled: { control: { type: 'boolean' } },
-    text: {
-      control: { type: 'text' },
-    },
-    placeholder: {
-      control: { type: 'text' },
-    },
-    label: {
-      control: { type: 'text' },
-    },
-  },
-
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    text: 'text',
-  },
-} as Meta<typeof PInput>;
-
-const Template: StoryObj<typeof PInput> = (args) => ({
-  components: { PInput },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div style="display: flex; flex-direction: row; gap: 12px;">
-      <PInput />
-    </div>`,
-});
-
-export const Input = Template.bind({});
-Input.args = { placeholder: 'Placeholder', label: 'Label', text: 'text' };

package/src/components/atoms/PInput/PInput.test.ts

@@ -1,92 +0,0 @@
-import { mount } from '@vue/test-utils';
-
-import PInput from './PInput.vue';
-
-describe('PInput', () => {
-  //1. Тест рендеринга лейбла
-  test('renders label when passed', () => {
-    const wrapper = mount(PInput, {
-      props: {
-        label: 'Test Label',
-      },
-    });
-    const label = wrapper.find('label');
-    expect(label.exists()).toBe(true);
-    expect(label.text()).toBe('Test Label');
-  });
-
-  test('does not render label when not passed', () => {
-    const wrapper = mount(PInput);
-    const label = wrapper.find('label');
-    expect(label.exists()).toBe(false);
-  });
-  //2. Тест ввода текста
-  test('emits input event with the correct value', async () => {
-    const wrapper = mount(PInput);
-    const input = wrapper.find('input');
-
-    // Симуляция ввода текста
-    await input.setValue('Test Input');
-
-    // Проверка эмитированного события
-    const emitted = wrapper.emitted('input');
-    expect(emitted).toHaveLength(2);
-    if (emitted) {
-      expect(emitted[0]).toEqual(['Test Input']);
-    }
-  });
-  //3. Тест покидания пользователем поля ввода
-  test('emits blur event with the correct value', async () => {
-    const wrapper = mount(PInput);
-    const input = wrapper.find('input');
-
-    // Симуляция события blur
-    await input.trigger('blur');
-
-    // Проверка эмитированного события
-    const emitted = wrapper.emitted('blur');
-    expect(emitted).toHaveLength(1);
-  });
-  //4. Тесты работы пользовательских стилей
-  test('applies margin and padding styles from props', () => {
-    const wrapper = mount(PInput, {
-      props: {
-        margin: '10px',
-        padding: '5px',
-      },
-    });
-    const textField = wrapper.find('.text-field');
-    expect(textField.attributes('style')).toContain('margin: 10px');
-    expect(textField.attributes('style')).toContain('padding: 5px');
-  });
-
-  test('applies borderColor and color styles from props', () => {
-    const wrapper = mount(PInput, {
-      props: {
-        borderColor: 'red',
-        color: 'blue',
-      },
-    });
-    const input = wrapper.find('input');
-    expect(input.attributes('style')).toContain('color: blue');
-
-    const field = wrapper.find('.field');
-    expect(field.attributes('style')).toContain('border-color: red');
-  });
-  //5. Тесты работы маски ввода
-  test('applies mask if provided', async () => {
-    const wrapper = mount(PInput, {
-      props: {
-        mask: '###-###',
-      },
-    });
-
-    const input = wrapper.find('input');
-
-    // Симуляция ввода текста, который должен быть отформатирован по маске
-    await input.setValue('123456');
-
-    // Проверяем, что текст отображается с учётом маски
-    expect(input.element.value).toBe('123-456');
-  });
-});

package/src/components/atoms/PInput/PInput.vue

@@ -1,133 +0,0 @@
-<template>
-  <div class="text-field" :style="{ margin: margin, padding: padding }">
-    <label v-if="label" class="text-field__label" :for="label">
-      {{ label }}
-    </label>
-    <div
-      class="field"
-      :style="{
-        borderColor: borderColor,
-      }"
-    >
-      <div class="left-field">
-        <slot />
-      </div>
-      <input
-        v-bind="$attrs"
-        v-model="model"
-        v-maska="mask"
-        class="text-field__input"
-        :style="{ color: color }"
-        :disabled="disabled"
-        @blur="$emit('blur', model)"
-        @input="$emit('input', model)"
-      />
-      <div class="right-field">
-        <slot name="right" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { vMaska } from 'maska/vue';
-defineEmits(['blur', 'input']);
-const model = defineModel<string>();
-
-defineProps({
-  label: { type: String, default: '', required: false },
-  margin: { type: String, required: false, default: '' },
-  disabled: { type: Boolean, required: false, default: false },
-  padding: { type: String, default: '', required: false },
-  mask: { type: String, required: false, default: undefined },
-  borderColor: { type: String, default: 'var(--input-border-color)', required: false },
-  color: { type: String, default: 'var(--input-font-color)', required: false },
-});
-</script>
-
-<style scoped>
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-.field {
-  box-sizing: border-box;
-  position: relative;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  background: var(--input-background);
-  border-radius: var(--input-field-borderRadius-default);
-  border: 1px solid;
-  padding: var(--input-padding-default);
-  margin: var(--input-margin-default);
-  overflow: hidden;
-}
-
-.right-field {
-  display: flex;
-  justify-content: right;
-  align-items: center;
-  width: auto;
-  font-family: var(--base-font);
-  color: var(--input-label-color);
-  font-size: var(--inpur-font-size-default);
-}
-
-.left-field {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: auto;
-  font-family: var(--base-font);
-  color: var(--input-label-color);
-  font-size: var(--inpur-font-size-default);
-}
-
-.text-field {
-  width: var(--input-width-default);
-}
-
-.text-field__label {
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  width: 100%;
-  font-family: var(--base-font);
-  color: var(--input-label-color);
-  font-size: var(--inpur-font-size-default);
-  margin: var(--input-labal-margin);
-}
-
-.text-field__input {
-  width: 100%;
-  font-size: var(--inpur-font-size-default);
-  font-family: var(--base-font);
-  background: var(--input-background);
-  margin: 0;
-  height: var(--input-height, 30px);
-  border: none;
-  display: flex;
-  align-items: center;
-}
-
-.text-field__input::placeholder {
-  font-family: var(--base-font);
-  font-size: var(--inpur-font-size-default);
-  color: var(--input-placeholder-color);
-}
-
-.text-field__input:focus {
-  color: var(--input-focus-color);
-  outline: 0;
-}
-
-.text-field__input:disabled,
-.text-field__input[readonly] {
-  background-color: var(--input-readonly-background);
-  opacity: 1;
-}
-</style>

package/src/components/atoms/PInputDate/PInputDate.test.ts

@@ -1,55 +0,0 @@
-import { mount } from '@vue/test-utils';
-
-import PInputDate from './PInputDate.vue';
-
-describe('PInputDate', () => {
-  // 1. Тест рендеринга placeholder
-  test('renders placeholder when passed', () => {
-    const wrapper = mount(PInputDate, {
-      props: {
-        placeholder: 'Enter date',
-      },
-    });
-    const input = wrapper.find('input');
-    expect(input.attributes('placeholder')).toBe('Enter date');
-  });
-
-  // 2. Тест валидации и ввода даты
-  test('validates and formats input correctly', async () => {
-    const wrapper = mount(PInputDate);
-    const input = wrapper.find('input');
-
-    await input.setValue('12.10.2024');
-    // Вывод всех эмитированных событий для отладки
-    // console.log('Emitted events:', wrapper.emitted());
-
-    const emitted = wrapper.emitted('input');
-
-    if (emitted) {
-      // Извлекаем событие и пытаемся получить строку даты из объекта Event
-      const [event] = emitted[0] as [Event];
-
-      // Проверим, является ли event экземпляром Event
-      if (event instanceof Event) {
-        // Получаем значение из input
-        const inputElement = event.target as HTMLInputElement;
-        const dateStr = inputElement?.value;
-
-        if (typeof dateStr === 'string') {
-          expect(dateStr).toBe('12.10.2024'); // Проверяем значение
-        }
-      }
-    }
-  });
-
-  // 3. Тест применения стилей
-  test('applies width style from props', () => {
-    const wrapper = mount(PInputDate, {
-      props: {
-        width: '200px',
-      },
-    });
-    const container = wrapper.find('.style-container');
-    expect(container.attributes('style')).toContain('width: 200px');
-  });
-});

package/src/components/atoms/PInputDate/PInputDate.vue

@@ -1,79 +0,0 @@
-<template>
-  <div
-    class="style-container"
-    :style="{
-      width: width,
-      position: 'relative',
-    }"
-  >
-    <PInput
-      v-model="date"
-      mask="##.##.####"
-      :placeholder="placeholder"
-      :label="label"
-      :margin="margin"
-      @blur="changeHandler"
-      @keydown.enter.prevent="undefined"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import DatesFormatter from '@/services/DatesFormatter';
-
-defineProps({
-  placeholder: {
-    type: String,
-    default: 'Укажите дату',
-  },
-  label: { type: String, default: '' },
-  width: { type: String as PropType<string>, required: false, default: 'auto' },
-  margin: { type: String as PropType<string>, required: false, default: '' },
-});
-
-const emits = defineEmits(['update:modelValue', 'change', 'beforeChange']);
-
-const model = defineModel<Date>({ default: new Date() });
-const modelValueString = DatesFormatter.Format(model.value);
-const date: Ref<string> = ref(modelValueString);
-
-const changeHandler = (value: string) => {
-  if (!valid(value)) {
-    return;
-  }
-
-  const dateObj = DatesFormatter.FromRuStr(value);
-  model.value = dateObj;
-  emits('beforeChange', dateObj);
-  emits('change', dateObj);
-};
-
-const valid = (value: string): boolean => {
-  if (value.length != 10) {
-    date.value = modelValueString;
-    PHelp.Notification.Error('Неверный формат даты');
-    return false;
-  }
-
-  if (Number(date.value.slice(0, 2)) > 31) {
-    date.value = modelValueString;
-    PHelp.Notification.Error('Неверный день месяца');
-    return false;
-  }
-
-  if (Number(date.value.slice(3, 5)) > 12) {
-    date.value = modelValueString;
-    PHelp.Notification.Error('Неверный месяц');
-    return false;
-  }
-
-  if (Number(date.value.slice(6, 10)) > 2100) {
-    date.value = modelValueString;
-    PHelp.Notification.Error('Неверный год');
-    return false;
-  }
-  return true;
-};
-</script>
-
-<style scoped lang="scss"></style>