sprof 0.1.0 → 0.1.2

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

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

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

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

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

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

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

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