sprof 0.0.2 → 0.0.10

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

@@ -1,95 +0,0 @@
-import { mount } from '@vue/test-utils';
-
-import PTopSlider from './PTopSlider.vue';
-
-describe('PTopSlider', () => {
-  //1. Тест рендеринга слотов и контента
-  test('renders slot content and title', () => {
-    const wrapper = mount(PTopSlider, {
-      props: {
-        sliderOffHeight: '50px',
-        sliderOnHeight: '200px',
-      },
-      slots: {
-        default: '<div class="slider-content">Slider Content</div>',
-        title: '<div class="slider-title">Toggle Title</div>',
-      },
-    });
-
-    // Проверяем, что основной и дополнительный слоты отображаются
-    expect(wrapper.find('.slider-content').exists()).toBe(true);
-    expect(wrapper.find('.slider-title').exists()).toBe(true);
-  });
-
-  // 2. Тест работы параметра, регулирующего начальное состояние слайдера (открыт или закрыт)
-  test('reacts to changes in the toggle prop', async () => {
-    const wrapper = mount(PTopSlider, {
-      props: {
-        open: false,
-      },
-    });
-
-    // Проверяем, что слайдер закрыт
-    expect(wrapper.find('.top-slider').attributes('style')).toContain('margin-top: calc(53px - 220px)');
-
-    // Изменяем prop toggle на true
-    await wrapper.setProps({ open: true });
-    // Проверяем, что слайдер открылся (isOpen = true)
-    expect(wrapper.find('.top-slider').attributes('style')).toContain('margin-top: 0');
-  });
-  //3. Тест переключения состояния слайдера по клику, начальное состояние - закрыт
-  test('emits open event with the correct value when slider is opened', async () => {
-    const wrapper = mount(PTopSlider, {
-      props: {
-        open: false,
-      },
-    });
-
-    const clickLine = wrapper.find('.click-line');
-
-    // Симуляция клика для открытия слайдера
-    await clickLine.trigger('click');
-
-    // Проверка, что событие было эмитировано с правильным значением
-    const emitted = wrapper.emitted('open');
-    expect(emitted).toBeDefined();
-    if (emitted) {
-      expect(emitted[0]).toEqual([true]);
-    }
-  });
-  // 4. Тест переключения состояния слайдера по клику, начальное состояние - открыт
-  test('emits open event with the correct value when slider is closed', async () => {
-    const wrapper = mount(PTopSlider, {
-      props: {
-        open: true,
-      },
-    });
-
-    const clickLine = wrapper.find('.click-line');
-
-    // Симуляция клика для закрытия слайдера
-    await clickLine.trigger('click');
-
-    // Проверка, что событие было эмитировано с правильным значением
-    const emitted = wrapper.emitted('open');
-    expect(emitted).toBeDefined();
-    if (emitted) {
-      expect(emitted[0]).toEqual([false]);
-    }
-  });
-
-  //4. Тест применения пользовательских высот
-  test('applies custom heights', () => {
-    const wrapper = mount(PTopSlider, {
-      props: {
-        sliderOffHeight: '60px',
-        sliderOnHeight: '300px',
-      },
-    });
-
-    const topSlider = wrapper.find('.top-slider');
-
-    // Проверяем, что высоты применены
-    expect(topSlider.attributes('style')).toContain('height: 300px');
-  });
-});

package/src/components/atoms/PTopSlider/PTopSlider.vue

@@ -1,162 +0,0 @@
-<template>
-  <div v-if="!isOpen" class="blur" @click.prevent="isOpen = true" @click.stop="() => undefined"></div>
-  <div
-    class="top-slider"
-    :style="{
-      marginTop: isOpen ? `0` : `calc(${sliderOffHeight} - ${sliderOnHeight})`,
-
-      height: sliderOnHeight,
-    }"
-    @click.stop="() => undefined"
-  >
-    <div class="top-slider-content">
-      <div class="center">
-        <slot />
-      </div>
-    </div>
-    <div
-      class="click-line"
-      :style="{
-        height: sliderOffHeight,
-      }"
-      @click="openSlider(!isOpen)"
-    >
-      <slot name="title" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps({
-  sliderOffHeight: {
-    type: String as PropType<string>,
-    required: false,
-    default: '53px',
-  },
-  sliderOnHeight: {
-    type: String as PropType<string>,
-    required: false,
-    default: '220px',
-  },
-  background: {
-    type: String as PropType<string>,
-    required: false,
-    default: 'inherit',
-  },
-  open: { type: Boolean, default: false },
-});
-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 scoped>
-* {
-  box-sizing: border-box;
-}
-
-.blur {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 3;
-  background: black;
-  opacity: 0.3;
-}
-
-.top-slider {
-  position: absolute;
-  top: 0px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: #f5f5f5;
-  z-index: 4;
-  /* border: $dark-border; */
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  overflow: hidden;
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
-  transition: 0.3s;
-  width: calc(100% - 300px);
-  max-width: 800px;
-}
-
-.top-slider-content {
-  max-width: 800px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: calc(100% - 53px);
-  margin: auto;
-  padding: 20px;
-}
-
-.center {
-  width: 100%;
-}
-
-.click-line {
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  height: 55px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: #f5f5f5;
-  min-height: 40px;
-  color: #343e5c;
-  font-size: 12px;
-  text-transform: uppercase;
-  /* border-top: $normal-darker-border; */
-  cursor: pointer;
-  padding: 0 10px;
-}
-
-@media screen and (max-width: 1024px) {
-  .click-line {
-    font-size: 12px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .click-line {
-    font-size: 11px;
-  }
-  .top-slider {
-    width: calc(100% - 100px);
-  }
-  .top-slider-content {
-    padding: 10px;
-  }
-}
-
-@media screen and (max-width: 450px) {
-  .click-line {
-    line-height: 12px;
-  }
-}
-
-@media screen and (max-width: 370px) {
-  .click-line {
-    font-size: 10px;
-    line-height: 10px;
-  }
-  .top-slider-content {
-    padding: 8px;
-  }
-}
-</style>

package/src/components/molecules/Collapse/CollapseContainer.vue

@@ -1,36 +0,0 @@
-<template>
-  <div>
-    <slot :active-idx="activeIdx" :change-active-id="changeActiveId" />
-  </div>
-</template>
-
-<script lang="ts">
-import { watch } from 'vue';
-import { defineComponent, PropType, ref } from 'vue';
-
-export default defineComponent({
-  name: 'CollapseContainer',
-  props: {
-    initActiveIdx: { type: Number as PropType<number>, default: 0 },
-  },
-  setup(props) {
-    const activeIdx = ref(props.initActiveIdx);
-
-    const changeActiveId = (idx: number) => {
-      activeIdx.value = idx;
-    };
-
-    watch(
-      () => props.initActiveIdx,
-      () => {
-        changeActiveId(props.initActiveIdx);
-      }
-    );
-
-    return {
-      changeActiveId,
-      activeIdx,
-    };
-  },
-});
-</script>

package/src/components/molecules/Collapse/CollapseItem.vue

@@ -1,295 +0,0 @@
-<template>
-  <div
-    class="tab"
-    :style="{
-      margin: margin,
-      height: isCollaps && collapsed ? '60px' : '',
-      'box-shadow': selectable && activeId === tabId ? '0px 0px 1px 2px #1979cf' : '',
-    }"
-  >
-    <!-- width: `calc(100% - ${margin.prototype.slice()}`
-      width: 'calc(100% - $margin.prototype.slice())' -->
-    <svg v-if="isCollaps && collapsed" class="icon-arrow" @click="handleItemClick">
-      <use xlink:href="#arrow-down" />
-    </svg>
-    <svg v-else-if="isCollaps && !collapsed" class="icon-arrow" @click="handleItemClick">
-      <use xlink:href="#arrow-up" />
-    </svg>
-    <label :for="tabId" @click="handleItemClick">
-      <div
-        :style="{
-          cursor: isCollaps ? 'pointer' : 'default',
-          background: changeColor ? background : backgroundAttention,
-          padding: padding,
-          borderRadius: '5px',
-        }"
-        class="tab-name"
-      >
-        <div class="inside-icon">
-          <slot name="icon" />
-        </div>
-        <div
-          v-if="title"
-          class="title-in"
-          :style="{
-            marginRight: isCollaps ? '50px' : '0',
-            width: isCollaps ? 'calc(100% - 50px)' : '100%',
-          }"
-        >
-          {{ title }}
-        </div>
-        <div
-          v-else
-          class="title-in"
-          :style="{
-            marginRight: isCollaps ? '50px' : '0',
-            width: isCollaps ? 'calc(100% - 50px)' : '100%',
-          }"
-        >
-          <slot name="inside-title" />
-        </div>
-        <div class="tools-bar" :class="{ 'hidden-part': showToolsOnHover }">
-          <slot name="tools" />
-        </div>
-      </div>
-    </label>
-    <div
-      :style="{ maxHeight: isCollaps ? '' : '1000000vh', background: changeColor ? background : backgroundAttention }"
-      :class="collapsed ? 'tab-content-down' : 'tab-content-up'"
-    >
-      <slot name="inside-content" />
-    </div>
-  </div>
-  <!-- <Arrows /> -->
-  <svg width="0" height="0" class="hidden">
-    <symbol id="arrow-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-      <path d="M5 6L10 11L15 6L17 7L10 14L3 7L5 6Z" fill="currentColor" />
-    </symbol>
-
-    <symbol id="arrow-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-      <path d="M15 14L10 9L5 14L3 13L10 6L17 13L15 14Z" fill="currentColor" />
-    </symbol>
-  </svg>
-</template>
-
-<script lang="ts">
-import { defineComponent, onBeforeMount, onUpdated, PropType, Ref, ref } from 'vue';
-
-// import Arrows from '@/assets/svg/CollapseItem/Arrows.svg';
-
-export default defineComponent({
-  name: 'CollapseItem',
-  // components: { Arrows },
-  props: {
-    tabId: { type: String as PropType<number>, required: false, default: '' },
-    activeId: { type: String as PropType<number>, default: '' },
-    isCollaps: { type: Boolean as PropType<boolean>, default: true },
-    title: { type: String as PropType<string>, default: '' },
-    showToolsOnHover: { type: Boolean as PropType<boolean>, default: true },
-    background: { type: String as PropType<string>, required: false, default: '#ffffff' },
-    backgroundAttention: { type: String as PropType<string>, required: false, default: '#ffffff' },
-    changeColor: { type: Boolean as PropType<boolean>, default: false },
-    margin: { type: String as PropType<string>, default: '10px 8px 2px 2px' },
-    padding: { type: String as PropType<string>, default: '0 10px' },
-    selectable: { type: Boolean as PropType<boolean>, default: false },
-  },
-  emits: ['changeActiveId'],
-
-  setup(props, { emit }) {
-    const collapsed: Ref<boolean> = ref(props.activeId === 0);
-
-    const handleItemClick = () => {
-      collapsed.value = !collapsed.value;
-      emit('changeActiveId', props.tabId);
-    };
-
-    onUpdated(() => {
-      if (props.activeId && props.activeId !== props.tabId) {
-        collapsed.value = true;
-      }
-    });
-
-    onBeforeMount(() => {
-      if (props.activeId && props.activeId !== props.tabId) {
-        collapsed.value = false;
-      }
-    });
-
-    return {
-      collapsed,
-      handleItemClick,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.hidden {
-  display: none;
-}
-
-.tab {
-  position: relative;
-  width: calc(100% - 10px);
-  border: 1px solid;
-  border-color: var(--border-color-default);
-  background: #ffffff;
-  margin: 10px 8px 2px 2px;
-  cursor: pointer;
-  transition: 0.15s;
-
-  &-name {
-    position: relative;
-    display: flex;
-    min-height: 60px;
-    height: auto;
-    align-items: center;
-    font-weight: bold;
-    cursor: pointer;
-  }
-}
-
-.tab input {
-  position: absolute;
-  opacity: 0;
-  z-index: -1;
-}
-
-.tab-content-down {
-  max-height: 0;
-  overflow: hidden;
-  background: #ffffff;
-  -webkit-transition: max-height 0.03s;
-  -o-transition: max-height 0.03s;
-  transition: max-height 0.03s;
-  color: #343e5c;
-  padding: 0 5px;
-}
-
-.tab-content-up {
-  max-height: 500vh;
-  overflow-y: scroll;
-  overflow: hidden;
-  background: #ffffff;
-  -webkit-transition: max-height 0.5s;
-  -o-transition: max-height 0.5s;
-  transition: max-height 0.5s;
-  color: #343e5c;
-  padding-right: 5px;
-}
-
-.tab input:checked ~ .icon-arrow {
-  transform: rotate(180deg);
-}
-
-.tab input:checked ~ .tab-content-down {
-  max-height: 100vh;
-}
-
-.tab input:checked ~ .tab-content-up {
-  max-height: 0;
-}
-
-.tab label::after {
-  position: absolute;
-  right: 0;
-  top: 0;
-  display: block;
-  text-align: center;
-  -webkit-transition: all 0.5s;
-  -o-transition: all 0.5s;
-  transition: all 0.5s;
-}
-
-.tab-window {
-  width: 100%;
-}
-
-.hidden {
-  display: none;
-}
-
-.icon-arrow {
-  position: absolute;
-  right: 20px;
-  top: 20px;
-  width: 28px;
-  height: 28px;
-  -webkit-transition: all 0.5s;
-  -o-transition: all 0.5s;
-  transition: all 0.5s;
-  z-index: 2;
-}
-
-:deep(.el-carousel__item) {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-}
-
-:deep(.el-carousel__container) {
-  max-height: auto;
-}
-
-:deep(.el-form-item__label) {
-  width: 100%;
-  text-align: left;
-}
-
-:deep(.el-form-item) {
-  display: block;
-}
-
-:deep(.el-input__inner) {
-  height: 40px;
-}
-
-.hidden-part {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.tools-bar {
-  display: flex;
-  position: absolute;
-  top: 20px;
-  right: 60px;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.inside-icon {
-  display: flex;
-  position: absolute;
-  top: 20px;
-  left: 0;
-  align-items: center;
-  padding-left: 4px;
-}
-
-.tab-name:active > .tools-bar {
-  visibility: visible;
-  opacity: 1;
-}
-
-.tab-name:hover > .tools-bar {
-  visibility: visible;
-  opacity: 1;
-}
-
-.tab:hover {
-  box-shadow: 0px 0px 1px 2px var(--collaps-item-shadow-color);
-}
-
-.title-in {
-  display: flex;
-  font-family: 'Open Sans', sans-serif;
-  font-size: 16px;
-  color: #303133;
-  height: auto;
-  align-items: center;
-  font-weight: normal;
-  border-radius: 5px;
-}
-</style>

package/src/components/molecules/Collapse/VerticalCollapseContainer.vue

@@ -1,100 +0,0 @@
-Н
-<template>
-  <div class="tab">
-    <slot name="main" />
-    <div :style="{ width: !isDrawerOpen ? '20px' : '50%', transition: '0.3s' }" class="left">
-      <div :style="{ width: !isDrawerOpen ? '0' : '100%', transition: '0.3s' }" class="left-content">
-        <slot name="inside-content-left" />
-      </div>
-      <div class="arrow-bar" @click="toggleDrawer">
-        <div class="rotate">
-          <slot name="inside-title" />
-        </div>
-        <svg v-if="!isDrawerOpen" class="icon-arrow">
-          <use xlink:href="#arrow-right"></use>
-        </svg>
-        <svg v-else class="icon-arrow">
-          <use xlink:href="#arrow-left"></use>
-        </svg>
-      </div>
-    </div>
-    <div :style="{ width: !isDrawerOpen ? '100%' : '50%', transition: '0.3s' }" class="right">
-      <slot name="inside-content-right" />
-    </div>
-  </div>
-
-  <ArrowLeft />
-  <ArrowRight />
-</template>
-
-<script lang="ts" setup>
-import ArrowLeft from '@/assets/svg/ArrowLeft.svg';
-import ArrowRight from '@/assets/svg/ArrowRight.svg';
-
-const isDrawerOpen: Ref<boolean> = ref(false);
-
-const toggleDrawer = async () => {
-  isDrawerOpen.value = !isDrawerOpen.value;
-};
-</script>
-
-<style scoped>
-.tab {
-  display: flex;
-  height: 100%;
-  position: relative;
-}
-
-.left {
-  display: flex;
-  justify-content: space-between;
-  width: 50%;
-  height: 100%;
-  background: #ffffff;
-  margin-right: 6px;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.left-content {
-  overflow: hidden;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.right {
-  width: 50%;
-}
-
-.arrow-bar {
-  display: flex;
-  justify-content: center;
-  width: 20px;
-  background: #00b5a4;
-  color: #ffffff;
-  position: relative;
-  cursor: pointer;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.arrow-bar:hover {
-  background: #009f90;
-}
-
-.rotate {
-  padding-top: 5px;
-  writing-mode: vertical-rl;
-}
-
-.icon-arrow {
-  position: absolute;
-  top: calc(50% - 10px);
-  width: 20px;
-  height: 20px;
-  -webkit-transition: all 0.5s;
-  -o-transition: all 0.5s;
-  transition: all 0.5s;
-  fill: #ffffff;
-}
-</style>