sprof 0.1.0

package/src/components/atoms/PInputNumber/PInputNumber.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="number">
+    <button class="number-minus" type="button" @click="decrease">
+      <svg class="icon-minus">
+        <use xlink:href="#minus"></use>
+      </svg>
+    </button>
+    <input v-model="num" class="input-field" type="number" min="0" step="0.1" @input="input" />
+    <button class="number-plus" type="button" @click="increase">
+      <svg class="icon-plus">
+        <use xlink:href="#plus"></use>
+      </svg>
+    </button>
+  </div>
+  <Icons />
+</template>
+
+<script lang="ts" setup>
+import Icons from '@/assets/svg/Button/Icons.svg';
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const num: Ref<number> = ref(props.modelValue ?? 0);
+
+const increase = () => {
+  num.value++;
+  emit('update:modelValue', num.value);
+  emit('change');
+};
+
+const decrease = () => {
+  num.value--;
+  emit('update:modelValue', num.value);
+  emit('change');
+};
+
+const input = () => {
+  emit('update:modelValue', num.value);
+  emit('change');
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.input-field:hover {
+  cursor: text !important;
+}
+
+.icon-plus {
+  width: 16px;
+  height: 16px;
+  fill: #828587;
+  cursor: pointer;
+  transition: 0, 3s;
+  opacity: 0.8;
+  padding: 11px;
+}
+
+.icon-plus:hover {
+  transform: scale(1.2, 1.2);
+  opacity: 1;
+}
+
+.icon-plus:active {
+  transform: scale(1.2, 1.2);
+  opacity: 0.8;
+}
+
+.icon-minus {
+  width: 16px;
+  height: 16px;
+  fill: #828587;
+  cursor: pointer;
+  transition: 0, 3s;
+  opacity: 0.8;
+  padding: 11px;
+}
+
+.icon-minus:hover {
+  transform: scale(1.2, 1.2);
+  opacity: 1;
+}
+
+.icon-minus:active {
+  transform: scale(1.2, 1.2);
+  opacity: 0.8;
+}
+
+.number {
+  display: inline-block;
+  position: relative;
+  width: 190px;
+  background: #ffffff;
+  margin: 10px;
+  border-radius: 3px;
+}
+.number input[type='number'] {
+  display: block;
+  height: 40px;
+  line-height: 40px;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  text-align: center;
+  -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+  appearance: textfield;
+  background: #ffffff;
+  cursor: pointer;
+}
+.number input[type='number']::-webkit-outer-spin-button,
+.number input[type='number']::-webkit-inner-spin-button {
+  display: none;
+}
+.number-minus {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  bottom: 1px;
+  width: 40px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-right: 1px solid #ddd;
+  background: #f5f7fa;
+  cursor: pointer;
+  overflow: hidden;
+}
+.number-plus {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  width: 40px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-left: 1px solid #ddd;
+  background: #f5f7fa;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+input[type='number'] {
+  background: #ffffff;
+  vertical-align: top;
+  outline: none;
+  padding: 0;
+  height: 40px;
+  line-height: 40px;
+  display: inline-block;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #ddd;
+  font-size: 14px;
+  border-radius: 3px;
+}
+
+input[type='number']:focus {
+  outline: 0px solid #ffffff;
+}
+</style>

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

@@ -0,0 +1,121 @@
+import { mount } from '@vue/test-utils';
+
+import PString from '../PString/PString.vue';
+import PLeftSlider from './PLeftSlider.vue';
+
+describe('PLeftSlider', () => {
+  //1. Тест рендеринга слотов
+  test('renders slot content and title', () => {
+    const wrapper = mount(PLeftSlider, {
+      slots: {
+        default: '<div class="slot-slider-content">Slot Slider Content</div>',
+      },
+    });
+
+    // Проверяем, что слот содержимого слайдера отображается
+    expect(wrapper.find('.slot-slider-content').exists()).toBe(true);
+  });
+
+  // 2. Тест переключения состояния по клику при скрытом начальном состоянии слайдера;
+  test('toggles closed slider state on click', async () => {
+    const wrapper = mount(PLeftSlider, {
+      props: { open: false },
+    });
+
+    const clickLine = wrapper.find('.click-line');
+    await clickLine.trigger('click');
+
+    // Проверяем, что событие переключения срабатывает
+    expect(wrapper.emitted('open')).toBeTruthy();
+    expect(wrapper.emitted('open')![0]).toEqual([true]);
+  });
+
+  // 3. Тест переключения состояния по клику при открытом начальном состоянии слайдера;
+  test('toggles opened slider state on click', async () => {
+    const wrapper = mount(PLeftSlider, {
+      props: { open: true },
+    });
+
+    const clickLine = wrapper.find('.click-line');
+    await clickLine.trigger('click');
+
+    // Проверяем, что событие переключения срабатывает
+    expect(wrapper.emitted('open')).toBeTruthy();
+    expect(wrapper.emitted('open')![0]).toEqual([false]);
+  });
+
+  //4. Тест применения пользовательских стилей: background
+  test('applies custom styles: background', () => {
+    const wrapper = mount(PLeftSlider, {
+      props: {
+        background: 'red',
+      },
+    });
+
+    const body = wrapper.find('.LS-body');
+
+    // Проверяем, что стили применены
+    expect(body.attributes('style')).toContain('background: red');
+  });
+  //5. Тест применения пользовательских стилей: тень включена
+  test('applies correct styles when shadow is enabled', () => {
+    const wrapper = mount(PLeftSlider, {
+      props: {
+        shadow: true,
+      },
+    });
+
+    const body = wrapper.find('.LS-body');
+    expect(body.attributes('style')).toContain('5px 0 5px -3px rgba(0,0,0,0.3)');
+  });
+  //6. Тест применения пользовательских стилей: тень выключена
+  test('applies correct styles when shadow is disabled', () => {
+    const wrapper = mount(PLeftSlider, {
+      props: {
+        shadow: false,
+      },
+    });
+
+    const body = wrapper.find('.LS-body');
+    expect(body.attributes('style')).toContain('box-shadow: none');
+  });
+
+  //7. Тест смещения слайдера за границу экрана при открытии и возвращении обратно
+  test('appearing within the screen is visibility', async () => {
+    const wrapper = mount(PLeftSlider, {});
+
+    // Сначала слайдер должен быть смещен вправо за границу экрана
+    expect(wrapper.find('.LS-body').attributes('style')).toContain('margin-left: calc(30px - 300px)');
+
+    const clickLine = wrapper.find('.click-line');
+    await clickLine.trigger('click');
+
+    // Проверяем, что слайдер вернулся обратно в видимую зону экрана
+    expect(wrapper.find('.LS-body').attributes('style')).toContain('margin-left: 0');
+  });
+  //8. Тест работы параметра, задающего имя title на click-line при закрытом слайдере
+  test('displays titleOpen when slider is closed', () => {
+    const wrapper = mount(PLeftSlider, {
+      props: {
+        titleClose: 'Open Menu',
+      },
+    });
+
+    const title = wrapper.findComponent(PString);
+    // Проверяем, title click-line когда слайдер в закрытом состоянии
+    expect(title.props('string')).toBe('Open Menu');
+  });
+  //9. Тест работы параметра, задающего имя title на click-line при открытом слайдере
+  test('displays titleClose when slider is opened', () => {
+    const wrapper = mount(PLeftSlider, {
+      props: {
+        open: true,
+        titleOpen: 'Close Menu',
+      },
+    });
+
+    const title = wrapper.findComponent(PString);
+    // Проверяем, title click-line когда слайдер в открытом состоянии
+    expect(title.props('string')).toBe('Close Menu');
+  });
+});

package/src/components/atoms/PLeftSlider/PLeftSlider.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    v-if="!shift"
+    :style="{
+      minWidth: widthClosed,
+      maxWidth: widthClosed,
+    }"
+  ></div>
+  <div
+    class="LS-body"
+    :style="{
+      marginLeft: isOpen ? '0' : `calc(${widthClosed} - ${widthOpened})`,
+      minWidth: widthOpened,
+      maxWidth: widthOpened,
+      boxShadow: shadow ? '5px 0 5px -3px rgba(0,0,0,0.3)' : 'none',
+      position: shift ? 'relative' : 'absolute',
+      background: background,
+    }"
+  >
+    <div
+      class="LS-content"
+      :style="{
+        width: `calc(${widthOpened} - ${widthClosed})`,
+      }"
+    >
+      <slot />
+    </div>
+    <div
+      class="click-line"
+      :style="{
+        width: widthClosed,
+      }"
+      @click="openSlider(!isOpen)"
+    >
+      <PString v-if="isOpen" :string="titleOpen" font-size="16px" padding="0" color="inherit" />
+      <PString v-if="!isOpen" :string="titleClose" font-size="16px" padding="0" color="inherit" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  shadow: { type: Boolean, default: true },
+  border: { type: Boolean, default: true },
+  shift: { type: Boolean, default: true },
+  widthClosed: {
+    type: String,
+    required: false,
+    default: '30px',
+  },
+  widthOpened: {
+    type: String,
+    required: false,
+    default: '300px',
+  },
+  titleOpen: {
+    type: String,
+    required: false,
+    default: 'Скрыть меню',
+  },
+  titleClose: {
+    type: String,
+    required: false,
+    default: 'Показать меню',
+  },
+  background: {
+    type: String,
+    required: false,
+    default: 'inherit',
+  },
+});
+
+const emit = defineEmits(['open']);
+const isOpen = ref(props.open);
+watch(
+  () => props.open,
+  () => {
+    isOpen.value = !isOpen.value;
+  }
+);
+
+const openSlider = (open: boolean) => {
+  isOpen.value = !isOpen.value;
+  emit('open', open);
+};
+</script>
+
+<style lang="scss" scoped>
+.LS-body {
+  top: 0;
+  left: 0;
+  min-height: inherit;
+  display: flex;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0;
+  z-index: 999;
+  font-family: var(--base-font);
+  font-size: var(--font-size-default);
+  transition: var(--transition-default, 0);
+  -webkit-user-select: none;
+  /* Safari */
+  -ms-user-select: none;
+  /* IE 10 and IE 11 */
+  user-select: none;
+  /* Standard syntax */
+}
+
+.click-line {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  writing-mode: vertical-lr;
+  border-left: 1px solid;
+  border-right: 1px solid;
+  cursor: pointer;
+  border-color: var(--left-slider-click-line-border-color);
+  background: var(--left-slider-click-line-background);
+  color: var(--left-slider-click-line-font-color);
+  font-family: var(--base-font);
+  font-size: var(--font-size-default);
+  padding: 0 2px 0 0;
+}
+
+.click-line:hover {
+  background: var(--left-slider-click-line-background-hovered);
+  color: var(--left-slider-click-line-font-color-hovered);
+}
+
+.LS-content {
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils';
+
+import PList from './PList.vue';
+
+describe('PList', () => {
+  //1. Тесты работы задаваемых параметрами стилей
+  test('applies custom margin and padding', () => {
+    const wrapper = mount(PList, {
+      props: {
+        margin: '10px',
+        padding: '20px',
+        width: '400px',
+      },
+    });
+
+    const ul = wrapper.find('ul');
+
+    // Проверяем стили
+    expect(ul.attributes('style')).toContain('margin: 10px');
+    expect(ul.attributes('style')).toContain('padding: 20px');
+    expect(ul.attributes('style')).toContain('width: 400px');
+  });
+  //2. Тест проверки ширины по умолчанию
+  test('applies default width if not provided', () => {
+    const wrapper = mount(PList);
+
+    const ul = wrapper.find('ul');
+
+    // Проверяем ширину по умолчанию
+    expect(ul.attributes('style')).toContain('width: 300px');
+  });
+});

package/src/components/atoms/PList/PList.vue

@@ -0,0 +1,27 @@
+<template>
+  <ul
+    :style="{
+      margin: margin,
+      padding: padding,
+      width: width,
+    }"
+  >
+    <slot />
+  </ul>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  margin: { type: String, required: false, default: '' },
+  padding: { type: String, required: false, default: '' },
+  width: { type: String, required: false, default: '300px' },
+});
+</script>
+
+<style lang="scss" scoped>
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+</style>

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

@@ -0,0 +1,61 @@
+import { mount } from '@vue/test-utils';
+
+import PListItem from './PListItem.vue';
+
+describe('PListItem', () => {
+  //1. Тест рендеринга слота
+  test('renders slot content', () => {
+    const wrapper = mount(PListItem, {
+      slots: {
+        default: '<div>Test content</div>',
+      },
+    });
+
+    // Проверяем, что слот корректно рендерится
+    expect(wrapper.html()).toContain('Test content');
+  });
+});
+
+describe('PListItem Styles', () => {
+  //2. Тест работы задаваемых параметрами стилей
+  test('applies custom margin and padding', () => {
+    const wrapper = mount(PListItem, {
+      props: {
+        margin: '10px',
+        padding: '20px',
+      },
+    });
+
+    const li = wrapper.find('li');
+
+    // Проверяем стили
+    expect(li.attributes('style')).toContain('margin: 10px');
+    expect(li.attributes('style')).toContain('padding: 20px');
+  });
+  // 3. Тесты рендеринга разделительной линии (divider)
+  test('renders with border when showDivider is true', () => {
+    const wrapper = mount(PListItem, {
+      props: {
+        showDivider: true,
+      },
+    });
+
+    const li = wrapper.find('li');
+    // Проверяем, что присутствует разделитель
+    expect(li.attributes('style')).not.toContain('border-bottom: 1px solid var(--divider-color, #eeeeee)');
+  });
+
+  test('hides border when showDivider is false', () => {
+    const wrapper = mount(PListItem, {
+      props: {
+        showDivider: false,
+      },
+    });
+
+    const li = wrapper.find('li');
+    // Проверяем, что разделитель отсутствует
+    expect(li.attributes('style')).toContain('border-bottom-width: initial');
+    expect(li.attributes('style')).toContain('border-bottom-style: none');
+    expect(li.attributes('style')).toContain('border-bottom-color: none');
+  });
+});

package/src/components/atoms/PListItem/PListItem.vue

@@ -0,0 +1,51 @@
+<template>
+  <li
+    :style="{
+      margin: margin,
+      padding: padding,
+      borderBottom: showDivider ? '1px solid var(--divider-color, #eeeeee)' : 'none',
+    }"
+  >
+    <slot />
+  </li>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  margin: { type: String, required: false, default: '' },
+  padding: { type: String, required: false, default: '' },
+  showDivider: { type: Boolean, required: false, default: false },
+});
+</script>
+
+<style lang="scss" scoped>
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* List item */
+li {
+  padding: 8px 16px;
+  list-style-type: none;
+  cursor: pointer;
+  color: var(--list-font-color);
+}
+
+li:last-of-type {
+  border-bottom: none;
+}
+
+/*hover*/
+li:hover {
+  /* border-radius: var(--button-outlined-medium-borderRadius-default, 10px); */
+  background: var(--list-background-color-hovered, #eeeeee);
+}
+
+/*active*/
+li:active {
+  /* border-radius: var(--button-outlined-medium-borderRadius-default, 10px); */
+  color: var(--list-font-color-pressed, #eeeeee);
+}
+</style>