sprof 0.1.0 → 0.1.2

package/src/components/ImageCropper.vue

@@ -1,203 +0,0 @@
-<template>
-  <PModal :show="open" title="Настройка изображения" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
-    <div class="background-container">
-      <div class="tools-line">
-        <div class="line-block">
-          <el-form>
-            <el-form-item label="Задайте пропорции фото:">
-              <PSelect v-model="resolution" label="Пропорции изображения" @change="selectResolution">
-                <option label="2:3 (формат A4)" :value="2 / 3" />
-                <option label="4:3 (для карточек новостей)" :value="4 / 3" />
-                <option label="1:1 (для фото сотрудников)" :value="1" />
-                <option label="3:2" :value="3 / 2" />
-                <option label="16:9" :value="16 / 9" />
-                <option label="3:4 (вертикальное изображение)" :value="3 / 4" />
-                <option label="Задать пропорции вручную" :value="0" />
-              </PSelect>
-            </el-form-item>
-          </el-form>
-        </div>
-      </div>
-      <Cropper
-        ref="cropperRef"
-        :src="cropper.src"
-        :stencil-props="{ aspectRatio: cropper.ratio }"
-        style="max-height: 50vh; min-height: 50vh"
-        @change="onChange"
-      />
-
-      <div class="dialog-footer">
-        <el-button :loading="loading" type="success" @click="save"> Сохранить </el-button>
-      </div>
-    </div>
-  </PModal>
-</template>
-
-<script lang="ts" setup>
-import 'vue-advanced-cropper/dist/style.css';
-
-import { Cropper } from 'vue-advanced-cropper';
-
-import ICanvasResult from '@/services/interfaces/canvas/ICanvasResult';
-import ICoordinates from '@/services/interfaces/canvas/ICoordinates';
-
-const props = defineProps({
-  open: {
-    type: Boolean,
-    required: true,
-  },
-  defaultRatio: {
-    type: Number,
-    required: false,
-    default: 1,
-  },
-});
-const emits = defineEmits(['crop', 'close']);
-
-const cropper = CropperStore.Cropper();
-const resolution: Ref<number> = ref(props.defaultRatio);
-
-cropper.ratio = resolution.value;
-
-const selectResolution = async () => {
-  if (resolution.value === 0) {
-    cropper.ratio = 0;
-  } else {
-    cropper.ratio = resolution.value;
-  }
-};
-
-const coordinates: Ref<ICoordinates> = ref({
-  width: 0,
-  height: 0,
-  left: 0,
-  top: 0,
-});
-
-const loading = ref(false);
-const resultImage = ref('');
-const cropperRef = ref();
-
-const save = async () => {
-  loading.value = true;
-  const canvas = cropperRef.value.getResult();
-  if (cropper.ratio === 0) {
-    resolution.value = coordinates.value.width / coordinates.value.height;
-  }
-  if (canvas) {
-    canvas.canvas.toBlob((blob: Blob) => {
-      emits('crop', { blob: blob, src: canvas.canvas?.toDataURL() });
-    });
-  }
-
-  loading.value = false;
-};
-
-// const cancel = () => {
-//   resultImage.value = '';
-//   emits('close');
-// };
-
-const onChange = (res: ICanvasResult) => {
-  coordinates.value = res.coordinates;
-  resultImage.value = res.canvas?.toDataURL();
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@/services/assets/styles/index.scss';
-
-.dialog-footer {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.background-container {
-  width: auto;
-  padding: 10px;
-  margin: 0 20px 20px 20px;
-  background: #dff2f8;
-  border-radius: 5px;
-  border: 1px solid #c3c3c3;
-}
-
-.tools-line {
-  display: flex;
-  justify-content: left;
-  align-items: center;
-}
-
-.line-item {
-  margin-left: 20px;
-}
-
-.foto-select {
-  width: 280px;
-}
-
-.line-block {
-  width: 280px;
-}
-
-:deep(.el-input__inner) {
-  border-radius: 40px;
-  padding-left: 15px;
-  height: 32px;
-  width: 270px;
-  display: flex;
-  font-family: Comfortaa, Arial, Helvetica, sans-serif;
-  font-size: 14px;
-}
-
-:deep(.el-form-item__label) {
-  display: flex;
-  align-items: center;
-  justify-content: left;
-  font-size: 12px;
-  color: #a3a9be;
-  padding: 0 !important;
-  text-transform: uppercase;
-  margin-left: 5px;
-  height: 40px;
-}
-
-:deep(.el-select .el-input .el-select__caret) {
-  color: #343e5c;
-  font-size: 15px;
-  font-weight: bold;
-  margin-right: 5px;
-  margin-top: 1px;
-}
-
-:deep(.el-select .el-input .el-select__caret.el-icon-circle-close) {
-  height: 40px;
-}
-
-:deep(.el-select .el-input__suffix) {
-  top: -3px;
-}
-
-:deep(.el-form-item) {
-  display: block;
-  margin-bottom: 16px;
-}
-
-@media only screen and (max-width: 480px) {
-  .background-container {
-    width: auto;
-    padding: 10px;
-    margin: 0 10px 10px 10px;
-  }
-
-  :deep(.el-input__inner) {
-    border-radius: 40px;
-    padding-left: 15px;
-    height: 32px;
-    width: 250px;
-    display: flex;
-    font-family: Comfortaa, Arial, Helvetica, sans-serif;
-    font-size: 14px;
-  }
-}
-</style>

package/src/components/InfoItem.vue

@@ -1,294 +0,0 @@
-<template>
-  <div v-if="isToggle" class="blur"></div>
-  <div class="base-box" :style="baseBoxStyle" @click.prevent.stop="changeState()">
-    <div
-      class="body"
-      :class="insideClass"
-      :style="bodyStyle"
-      @mouseenter="withHover ? (hovering = true) : (hovering = false)"
-      @mouseleave="hovering = false"
-    >
-      <div v-if="!isToggle" class="close-window" :style="closeWindowStyle" :class="customClass">
-        <slot />
-      </div>
-      <div
-        v-if="isToggle"
-        id="info-item-opened-content"
-        v-click-outside.prevent="outsideClick"
-        class="open-window"
-        :style="openWindowStyle"
-      >
-        <slot name="open-inside-content" />
-      </div>
-      <div class="top-title" :style="topTitleStyle">
-        <slot name="title">
-          <PString
-            :string="title"
-            font-size="10px"
-            padding="0 0 0 3px"
-            :style="{
-              color: hovering ? '#006BB4' : '#c4c4c4',
-              transition: '0.2s',
-            }"
-          />
-        </slot>
-      </div>
-    </div>
-  </div>
-  <PModal :show="isMessageBoxOpen" title="У вас остались несохраненные изменения, вы уверены что хотите закрыть окно?">
-    <div style="display: flex; justify-content: center">
-      <PButton text="Не сохранять" @click="notSaveClickHandler" />
-      <PButton text="Сохранять" @click="saveClickHandler" />
-    </div>
-  </PModal>
-</template>
-
-<script lang="ts" setup>
-// import Del from '@/assets/svg/Del.svg';
-// import EditTitle from '@/assets/svg/EditTitle.svg';
-
-const props = defineProps({
-  background: { type: String as PropType<string>, required: false, default: '' },
-  padding: { type: String as PropType<string>, required: false, default: '' },
-  width: { type: String as PropType<string>, required: false, default: '' },
-  openWidth: { type: String as PropType<string>, required: false, default: 'auto' },
-  openHeight: { type: String as PropType<string>, required: false, default: 'auto' },
-  maxWidth: { type: String as PropType<string>, required: false, default: '' },
-  minWidth: { type: String as PropType<string>, required: false, default: '' },
-  margin: { type: String as PropType<string>, required: false, default: '' },
-  height: { type: String as PropType<string>, required: false, default: '' },
-  withOpenWindow: { type: Boolean as PropType<boolean>, required: false, default: true },
-  colorSelected: { type: String as PropType<string>, required: false, default: '#1979CF' },
-  borderColor: { type: String as PropType<string>, required: false, default: '#E3E3E3' },
-  withHover: { type: Boolean as PropType<boolean>, required: false, default: true },
-  title: { type: String as PropType<string>, required: false, default: '' },
-  customClass: { type: String as PropType<string>, required: false, default: '' },
-  close: { type: Boolean as PropType<boolean>, required: false, default: true },
-  baseBoxMargin: { type: String as PropType<string>, required: false, default: '' },
-  closeWindowOverflow: { type: String as PropType<string>, required: false, default: '' },
-  showSaveDialog: { type: Boolean as PropType<boolean>, required: false, default: false },
-});
-
-const emit = defineEmits(['click', 'keyup-enter', 'after-close']);
-
-const insideClass = props.customClass !== '' ? props.customClass : 'inside-class';
-
-const hovering = ref(false);
-
-const isToggle: Ref<boolean> = ref(false);
-const isMessageBoxOpen: Ref<boolean> = ref(false);
-const localClose: Ref<boolean> = ref(props.close);
-
-watch(
-  () => props.close,
-  () => {
-    isToggle.value = false;
-  }
-);
-
-const keysHandler = (e: KeyboardEvent) => {
-  e.stopPropagation();
-  if (e.key === 'Escape') {
-    if (props.showSaveDialog) {
-      isMessageBoxOpen.value = true;
-    } else {
-      isToggle.value = false;
-    }
-  }
-  // Прописывать в родителе @keyup-enter="submit"
-  // if (e.key === 'Enter') {
-  // emit('keyup-enter');
-  // isToggle.value = false;
-  // }
-};
-
-watch(isToggle, async () => {
-  await nextTick();
-  if (isToggle.value) {
-    document.getElementById('info-item-opened-content')?.querySelector('input')?.focus();
-    document.body.addEventListener('keydown', keysHandler);
-  } else {
-    document.body.removeEventListener('keydown', keysHandler, false);
-  }
-  if (isToggle.value === false) {
-    emit('after-close');
-  }
-});
-
-const changeState = () => {
-  emit('click');
-  isToggle.value = !!props.withOpenWindow;
-  if (localClose.value !== props.close) {
-    isToggle.value = false;
-    localClose.value = !localClose.value;
-  }
-};
-
-const baseBoxStyle = computed(() => {
-  return props.customClass === ''
-    ? {
-        width: props.width,
-        minHeight: '40px',
-        height: 'auto',
-        maxWidth: props.maxWidth,
-        minWidth: props.minWidth,
-        margin: props.baseBoxMargin,
-      }
-    : undefined;
-});
-
-const windowOpened = computed(() => isToggle.value && props.withOpenWindow);
-
-const bodyStyle = computed(() => {
-  return {
-    background: props.background ? props.background : undefined,
-    zIndex: windowOpened.value ? '2' : '0',
-    padding: windowOpened.value ? '0' : props.padding,
-    margin: props.margin,
-    width: windowOpened.value ? props.openWidth : props.width,
-    height: windowOpened.value ? props.openHeight : props.height,
-    minHeight: '40px',
-    maxWidth: props.maxWidth,
-    minWidth: props.minWidth,
-    borderColor: hovering.value || isToggle.value ? props.colorSelected : props.borderColor,
-    color: hovering.value ? props.colorSelected : '#343E5C',
-    boxShadow: hovering.value || isToggle.value ? `0px 0px 1px 1px ${props.colorSelected}` : 'none',
-    alignItems: windowOpened.value ? 'end' : 'center',
-    cursor: props.withHover ? 'pointer' : 'pointer',
-  };
-});
-
-const closeWindowStyle = computed(() => {
-  return {
-    height: windowOpened.value ? '0' : '',
-    overflow: props.closeWindowOverflow,
-    width: props.width,
-  };
-});
-
-const openWindowStyle = computed(() => {
-  return {
-    height: windowOpened.value ? 'auto' : '0',
-  };
-});
-
-const topTitleStyle = computed(() => {
-  return {
-    color: hovering.value ? props.colorSelected : '#343E5C',
-    fill: hovering.value ? props.colorSelected : '#343E5C',
-    background: props.background,
-  };
-});
-
-const outsideClick = () => {
-  if (props.showSaveDialog) {
-    isMessageBoxOpen.value = true;
-  } else {
-    isToggle.value = false;
-  }
-};
-
-const saveClickHandler = async () => {
-  await emit('keyup-enter');
-  if (props.close) {
-    isToggle.value = false;
-  }
-  isMessageBoxOpen.value = false;
-};
-
-const notSaveClickHandler = () => {
-  isToggle.value = false;
-  isMessageBoxOpen.value = false;
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@/services/assets/styles/index.scss';
-
-.inside-class {
-  font-weight: normal;
-  // background: #ffffff;
-  padding: 0 10px;
-  width: 100%;
-  max-width: 100%;
-  min-width: 50px;
-  margin: 0;
-  height: 40px;
-}
-
-.hidden {
-  display: none;
-}
-
-.base-box {
-  position: relative;
-  box-sizing: border-box;
-}
-
-.body {
-  border: $light-pink-border;
-  border-radius: $border-radius;
-  position: relative;
-  display: flex;
-  justify-content: left;
-  transition: 0.15s;
-  box-sizing: border-box;
-}
-
-.top-title {
-  position: absolute;
-  z-index: 1;
-  top: -7px;
-  right: 5px;
-  background: #ffffff;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  padding: 0 3px;
-}
-
-.close-window {
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  width: 100%;
-  line-height: 16px;
-  font-size: 14px;
-}
-
-.open-window {
-  border-radius: $border-radius;
-  justify-content: center;
-  // align-items: flex-start;
-  flex-direction: column;
-  overflow: hidden;
-  max-height: auto;
-  padding: 7px;
-  width: calc(100% - 14px);
-  margin-top: 5px;
-}
-
-.blur {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-
-:deep(.el-input__inner) {
-  border-color: #b0a4c0;
-}
-
-:deep(.el-input__inner) {
-  height: 37px;
-  display: flex;
-  font-family: Comfortaa, Arial, Helvetica, sans-serif;
-  font-size: 14px;
-  color: $site_dark_gray;
-  padding-left: 0;
-  padding-right: 0;
-  border: none;
-  width: 100%;
-}
-</style>

package/src/components/InfoItemSelectButtons.vue

@@ -1,43 +0,0 @@
-<template>
-  <InfoItem :close="closeFlag" :title="title" close-window-overflow="hidden" :with-hover="true" :with-open-window="true">
-    <PString :string="selected" font-size="14px" width="100%" />
-    <template #open-inside-content>
-      <PButton v-for="item in list" :key="item" type="admin" color="blue" :text="item" @click="select(item)" />
-      <PButton type="admin" color="blue" text="Сбросить" @click="select(undefined)" />
-    </template>
-  </InfoItem>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  selected: {
-    type: String as PropType<string>,
-    required: true,
-  },
-  list: {
-    type: Array as PropType<Array<string>>,
-    required: true,
-  },
-});
-
-const closeFlag = ref(false);
-const emit = defineEmits(['select', 'reset']);
-const select = (item?: string) => {
-  closeFlag.value = !closeFlag.value;
-  emit('select', item);
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@/services/assets/styles/index.scss';
-
-.save-button {
-  width: 100%;
-  border-radius: 5px;
-  height: 42px;
-  color: #006bb4;
-  background: #dff2f8;
-  margin: 2px 10px 0 0;
-  font-size: 14px;
-}
-</style>

package/src/components/LeftRightContainer.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="mainblock">
-    <div class="mainline">
-      <div
-        class="mainblock-left"
-        :style="{
-          minWidth: leftWidth,
-          maxWidth: leftWidth,
-          background: background,
-          display: leftWidth !== '0px' ? 'block' : 'none',
-        }"
-      >
-        <slot name="left" />
-      </div>
-      <div
-        class="mainblock-right"
-        :style="{
-          background: background,
-        }"
-      >
-        <slot name="right" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-  leftWidth: {
-    type: String as PropType<string>,
-    required: false,
-    default: '0px',
-  },
-  background: {
-    type: String as PropType<string>,
-    required: false,
-    default: 'inherit',
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '@/services/assets/styles/index.scss';
-
-.mainblock {
-  box-sizing: border-box;
-  display: flex;
-  justify-content: left;
-  width: auto;
-  height: auto;
-  padding: 10px;
-}
-
-.mainline {
-  display: flex;
-  justify-content: left;
-  width: 100%;
-  height: auto;
-}
-
-.mainblock-left {
-  position: relative;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  box-sizing: border-box;
-}
-
-.mainblock-right {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: right;
-  width: calc(100% - 10px);
-  padding-left: 10px;
-  box-sizing: border-box;
-}
-
-@media screen and (max-width: 600px) {
-  .mainblock {
-    padding: 10px 0;
-  }
-
-  .mainline {
-    display: block;
-  }
-
-  .mainblock-right {
-    margin-top: 20px;
-    padding-left: 0;
-  }
-}
-</style>

package/src/components/MessageBody.vue

@@ -1,45 +0,0 @@
-<template>
-  <div>
-    <div class="message-title">
-      {{ title }}
-    </div>
-    <div class="message-text">{{ text }}</div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-  title: { type: String as PropType<string>, default: '', required: false },
-  text: { type: String as PropType<string>, default: '', required: false },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '@/services/assets/styles/index.scss';
-
-.message-title {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: auto;
-  margin: auto;
-}
-
-.message-text {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: auto;
-  margin: auto;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>