sprof 0.1.0 → 0.1.2

package/src/components/RSContainer.vue

@@ -1,262 +0,0 @@
-<template>
-  <div class="mainblock">
-    <div v-if="collapsed1 | collapsed2" class="blur" @click="handClick()"></div>
-    <div class="body">
-      <div
-        class="visability-block"
-        :style="{
-          maxWidth: mobileWindow ? '100%' : '300px',
-        }"
-      >
-        <slot name="visability" />
-      </div>
-      <div
-        class="filter-block"
-        :style="{
-          position: mobileWindow ? 'absolute' : '',
-          top: mobileWindow ? '10px' : '',
-          right: mobileWindow ? '0px' : '',
-          width: mobileWindow ? '100%' : '100%',
-          zIndex: mobileWindow ? '4' : '',
-          padding: mobileWindow ? '0px 0px 26px 0px' : '0',
-          marginRight: mobileWindow ? (collapsed1 ? '0' : '-200%') : '0',
-          transition: mobileWindow ? '0.3s' : '',
-          background: mobileWindow ? '#F5f5f5' : '',
-          borderTopLeftRadius: mobileWindow ? '5px' : '',
-          borderBottomLeftRadius: mobileWindow ? '5px' : '',
-          boxShadow: mobileWindow ? 'rgba(0, 0, 0, 0.35) 0px 5px 5px' : 'rgba(0, 0, 0, 0.35) 0px 5px 5px',
-          height: mobileWindow ? '60vh' : '60vh',
-        }"
-      >
-        <div v-if="mobileWindow" class="title">
-          <div class="title-line">
-            <svg
-              class="icon-filter"
-              :style="{
-                stroke: '#B0A4C0',
-                paddingLeft: '10px',
-              }"
-            >
-              <use xlink:href="#filter"></use>
-            </svg>
-            <svg
-              class="icon-close"
-              :style="{
-                marginRight: '5px',
-              }"
-              @click="handClick1()"
-            >
-              <use xlink:href="#close"></use>
-            </svg>
-          </div>
-          <slot name="title-tools" />
-        </div>
-        <slot name="filter" />
-      </div>
-      <div v-if="!mobileWindow" class="help-block"></div>
-      <div
-        class="download-block"
-        :style="{
-          position: mobileWindow ? 'absolute' : '',
-          top: mobileWindow ? '60px' : '',
-          right: mobileWindow ? '0px' : '',
-          width: mobileWindow ? '77px' : '',
-          zIndex: mobileWindow ? '4' : '',
-          padding: mobileWindow ? '0px 0px 26px 0px' : '0 0 0 10px',
-          marginRight: mobileWindow ? (collapsed2 ? '-2px' : '-130px') : '0',
-          transition: mobileWindow ? '0.3s' : '',
-          background: mobileWindow ? '#F5f5f5' : '',
-          borderTopLeftRadius: mobileWindow ? '5px' : '',
-          borderBottomLeftRadius: mobileWindow ? '5px' : '',
-          boxShadow: mobileWindow ? 'rgba(0, 0, 0, 0.35) 0px 5px 5px' : '',
-          height: mobileWindow ? '150px' : '',
-        }"
-      >
-        <div v-if="mobileWindow" class="title">
-          <div class="title-line">
-            <svg
-              class="icon-download"
-              :style="{
-                stroke: '#B0A4C0',
-                paddingLeft: '10px',
-              }"
-            >
-              <use xlink:href="#download"></use>
-            </svg>
-            <svg class="icon-close" @click="handClick2()">
-              <use xlink:href="#close"></use>
-            </svg>
-          </div>
-        </div>
-        <slot name="download" />
-      </div>
-
-      <div v-if="mobileWindow" class="icons">
-        <PButton skin="icon" margin="0 0 0 10px" @click="handClick1()"><IconFilter color="#006BB4" /></PButton>
-        <PButton skin="icon" margin="13px 0 0 10px" @click="handClick2()"><IconDownload color="#006BB4" /></PButton>
-      </div>
-    </div>
-  </div>
-  <svg width="0" height="0" class="hidden">
-    <symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path
-        d="M12 10.5857L16.95 5.63574L18.364 7.04974L13.414 11.9997L18.364 16.9497L16.95 18.3637L12 13.4137L7.04999 18.3637L5.63599 16.9497L10.586 11.9997L5.63599 7.04974L7.04999 5.63574L12 10.5857Z"
-      ></path>
-    </symbol>
-  </svg>
-</template>
-
-<script lang="ts" setup>
-import { onBeforeMount, PropType, Ref, ref } from 'vue';
-
-const props = defineProps({
-  menuWidth: {
-    type: String as PropType<string>,
-    required: false,
-    default: '0px',
-  },
-  mobileWidth: {
-    type: String as PropType<string>,
-    required: false,
-    default: '6000px',
-  },
-});
-const mounted = ref(false);
-const collapsed1: Ref<boolean> = ref(false);
-const collapsed2: Ref<boolean> = ref(false);
-const mobileWindow = ref(window.matchMedia('(max-width: 6000px)').matches);
-
-const handClick = () => {
-  collapsed1.value = false;
-  collapsed2.value = false;
-};
-
-const handClick1 = () => {
-  collapsed1.value = !collapsed1.value;
-};
-const handClick2 = () => {
-  collapsed2.value = !collapsed2.value;
-};
-
-onBeforeMount(async () => {
-  window.addEventListener('resize', () => {
-    switch (props.mobileWidth) {
-      case '1330px':
-        return (mobileWindow.value = window.matchMedia('(max-width: 1330px)').matches);
-      case '1215px':
-        return (mobileWindow.value = window.matchMedia('(max-width: 1215px)').matches);
-      case '1024px':
-        return (mobileWindow.value = window.matchMedia('(max-width: 1024px)').matches);
-      case '768px':
-        return (mobileWindow.value = window.matchMedia('(max-width: 768px)').matches);
-    }
-    return (mobileWindow.value = window.matchMedia('(max-width: 6000px)').matches);
-  });
-  mounted.value = true;
-});
-</script>
-
-<style lang="scss" scoped>
-@import '@/services/assets/styles/index.scss';
-
-.hidden {
-  display: none;
-}
-
-.filter-block {
-  box-sizing: border-box;
-  overflow: hidden;
-  max-width: 600px;
-}
-
-.hidden {
-  display: none;
-}
-
-.mainblock {
-  position: relative;
-  display: flex;
-  z-index: 3;
-  justify-content: space-between;
-  align-items: center;
-  width: calc(100% - 20px);
-  padding: 10px;
-  background: #f5f5f5;
-  height: 100px;
-  border-bottom: 1px solid #c4c4c4;
-}
-
-.blur {
-  position: fixed;
-  height: 20000px;
-  width: 20000px;
-  background: #000000;
-  opacity: 0.2;
-  z-index: 4;
-}
-
-.body {
-  display: flex;
-  justify-content: space-between;
-  min-height: 20px;
-  height: auto;
-  width: 100%;
-}
-
-.visability-block {
-  width: 100%;
-}
-
-:deep(.icon-filter) {
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  stroke: #006bb4;
-  fill: none;
-}
-
-:deep(.icon-download) {
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  stroke: #006bb4;
-  fill: none;
-}
-
-.icon-close {
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  fill: #343e5c;
-  fill: red;
-}
-
-.icon-close:hover {
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  fill: #006bb4;
-}
-
-.help-block {
-  height: 92px;
-  width: 1px;
-}
-
-.title {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  margin-bottom: 0px;
-  background: #f5f5f5;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-  margin-bottom: 10px;
-}
-
-.title-line {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 40px;
-}
-</style>

package/src/components/RemoteSearch.vue

@@ -1,156 +0,0 @@
-<template>
-  <PAutocomplete
-    ref="searchForm"
-    v-model="queryString"
-    :value-key="'label'"
-    style="width: 100%; margin-right: 10px"
-    :placeholder="placeholder"
-    :search-func="find"
-    :trigger-on-focus="showSuggestions"
-    :suggestions="searchModel.searchObjects"
-    @select="handleSelect"
-    @input="handleInput"
-  >
-    <template #suffix>
-      <i class="el-icon-search" />
-    </template>
-  </PAutocomplete>
-</template>
-
-<script lang="ts" setup>
-import SearchGroup from '@/services/classes/SearchGroup';
-import SearchModel from '@/services/classes/SearchModel';
-import ISearchObject from '@/services/interfaces/ISearchObject';
-import ISearch from '@/services/interfaces/ISearchObject';
-
-const props = defineProps({
-  keyValue: {
-    type: String as PropType<string>,
-    default: '',
-  },
-  modelValue: {
-    type: String as PropType<string>,
-    default: '',
-  },
-  storeModule: {
-    type: String as PropType<string>,
-    default: '',
-  },
-  placeholder: {
-    type: String as PropType<string>,
-    default: 'Начните вводить запрос',
-  },
-  showSuggestions: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-  maxWidth: {
-    type: [Number, String],
-    default: 350,
-  },
-  focus: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-});
-const emit = defineEmits(['select', 'load', 'input']);
-const queryString: Ref<string> = ref(props.modelValue);
-const searchForm = ref();
-const searchModel: SearchModel = SearchStore.SearchModel();
-
-watch(
-  () => props.focus,
-  () => {
-    if (props.focus) {
-      setTimeout(() => {
-        searchForm.value.focus();
-        queryString.value = '';
-      }, 500);
-    }
-  }
-);
-
-const find = async (query: string): Promise<ISearchObject[] | undefined> => {
-  if (query.length < 2) {
-    return;
-  }
-  searchForm.value.activated = true;
-  searchModel.searchObjects = [];
-  searchModel.query = query;
-  searchModel.key = props.keyValue;
-  const groupForSearch = searchModel.searchGroups.find((group: SearchGroup) => group.key === props.keyValue);
-  if (groupForSearch) {
-    searchModel.searchGroup = groupForSearch;
-  }
-  await SearchStore.Search(searchModel);
-
-  // emit('input', searchModel.searchObjects);
-  // if (props.showSuggestions) {
-  //   resolve(searchModel.searchObjects);
-  //   return;
-  // }
-  return searchModel.searchObjects;
-};
-
-const handleSelect = async (item: ISearch): Promise<void> => {
-  emit('select', item);
-  queryString.value = '';
-};
-
-const handleInput = (value: string) => {
-  emit('input', value);
-  if (value.length === 0) {
-    emit('input', '');
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-$margin: 20px 0;
-
-.flex-column {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.flex-row-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: $margin;
-}
-
-.flex-row-end {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin: $margin;
-}
-
-:deep(.el-input__inner) {
-  padding-left: 10px;
-  height: 34px;
-  display: flex;
-  font-family: Comfortaa, Arial, Helvetica, sans-serif;
-  font-size: 15px;
-  border-radius: 5px;
-  border: 1px solid #c4c4c4;
-}
-
-:deep(.el-input__suffix) {
-  top: -2px;
-}
-
-:deep(.el-form-item) {
-  margin: 0;
-}
-
-.el-form {
-  width: 100%;
-}
-
-.el-icon-search {
-  margin-right: 5px;
-}
-</style>

package/src/components/ResearcheContainer.vue

@@ -1,71 +0,0 @@
-<template>
-  <div
-    class="mainblock"
-    :style="{
-      background: background,
-      padding: padding,
-    }"
-  >
-    <div
-      class="mainblock-header"
-      :style="{
-        background: background,
-      }"
-    >
-      <slot name="header" />
-    </div>
-    <div class="mainblock-body">
-      <slot name="body" />
-    </div>
-
-    <div class="mainblock-footer">
-      <slot name="footer" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-  background: {
-    type: String as PropType<string>,
-    required: false,
-    default: 'inherit',
-  },
-  padding: {
-    type: String as PropType<string>,
-    required: false,
-    default: '0px 10px',
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '@/services/assets/styles/index.scss';
-
-.mainblock {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: auto;
-}
-
-.mainblock-header {
-  position: sticky;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: auto;
-  z-index: 3;
-}
-
-.mainblock-body {
-  width: 100%;
-  padding-bottom: 70px;
-}
-
-.mainblock-footer {
-  width: 100%;
-  height: auto;
-}
-</style>

package/src/components/RightSliderContainer.vue

@@ -1,181 +0,0 @@
-<template>
-  <div
-    class="right-slider"
-    :style="{
-      marginRight: isToggle ? `calc(${sliderOffWidth} - ${sliderOnWidth})` : `0`,
-      width: sliderOnWidth,
-    }"
-  >
-    <div class="click-line" @click="toggleSlider(!isToggle)">
-      <PString v-if="isToggle" :string="titleClose" font-size="16px" padding="0" color="#343E5C" />
-      <PString v-if="!isToggle" :string="titleOpen" font-size="16px" padding="0" color="#343E5C" />
-    </div>
-    <div class="right-slider-content">
-      <div class="right-slider-content-header">
-        <slot name="header" />
-      </div>
-      <div class="right-slider-content-box">
-        <slot />
-      </div>
-    </div>
-    <div class="right-slider-button">
-      <slot name="button" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps({
-  sliderOffWidth: {
-    type: String as PropType<string>,
-    required: false,
-    default: '30px',
-  },
-  sliderOnWidth: {
-    type: String as PropType<string>,
-    required: false,
-    default: '260px',
-  },
-  background: {
-    type: String as PropType<string>,
-    required: false,
-    default: 'inherit',
-  },
-  toggle: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  titleOpen: {
-    type: String as PropType<string>,
-    required: false,
-    default: 'Скрыть список исследований',
-  },
-  titleClose: {
-    type: String as PropType<string>,
-    required: false,
-    default: 'Показать список исследований',
-  },
-});
-const emit = defineEmits(['toggle']);
-const isToggle = ref(false);
-watch(
-  () => props.toggle,
-  () => {
-    isToggle.value = !isToggle.value;
-  }
-);
-
-// const mobileWindow = ref(window.matchMedia('(max-width: 768px)').matches);
-const toggleSlider = (toggle: boolean) => {
-  isToggle.value = !isToggle.value;
-  emit('toggle', toggle);
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@/services/assets/styles/index.scss';
-
-* {
-  box-sizing: border-box;
-}
-
-.right-slider {
-  position: fixed;
-  display: flex;
-  top: 165px;
-  right: 0px;
-  background: #f5f5f5;
-  z-index: 3;
-  height: 75vh;
-  border: $dark-border;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-  overflow: hidden;
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
-  transition: 0.3s;
-}
-
-.click-line {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 100%;
-  writing-mode: vertical-lr;
-  background: #c1efeb;
-  background: #f5f5f5;
-  cursor: pointer;
-  border-right: $normal-darker-border;
-}
-
-.right-slider-content {
-  width: 100%;
-  height: calc(100% - 90px);
-}
-
-.right-slider-content-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 62px;
-  border-bottom: $normal-darker-border;
-  margin-left: -1px;
-  background: #f5f5f5;
-}
-
-.right-slider-content-box {
-  width: 100%;
-  height: calc(100% - 33px);
-  overflow: hidden;
-  overflow-y: auto;
-  padding: 0px 3px 10px 7px;
-  border-bottom: $normal-darker-border;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background: #f5f5f5;
-}
-
-.right-slider-button {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  height: 62px;
-  width: calc(100% - 30px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: -1px;
-  background: #f5f5f5;
-}
-
-@media (max-width: 1690px) {
-  .right-slider {
-    height: 65vh;
-    top: 205px;
-  }
-}
-
-@media (max-width: 1436px) {
-  .right-slider {
-    top: 205px;
-  }
-}
-
-@media (max-width: 1050px) {
-  .right-slider {
-    top: 245px;
-  }
-}
-
-@media (max-width: 992px) {
-  .right-slider {
-    top: 205px;
-  }
-}
-
-@media screen and (max-width: 822px) {
-  .right-slider {
-    top: 245px;
-  }
-}
-</style>