sprof 0.0.1

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

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

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

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

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

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