sprof 0.1.0

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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,141 @@
+<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 lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+*,
+*::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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,46 @@
+<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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,133 @@
+<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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,79 @@
+<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>