sprof 0.0.1

package/src/components/ImageCropper.vue

@@ -0,0 +1,201 @@
+<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 '@/interfaces/canvas/ICanvasResult';
+import ICoordinates from '@/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 scoped>
+.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

@@ -0,0 +1,290 @@
+<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 scoped>
+.inside-class {
+  font-weight: normal;
+  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;
+  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

@@ -0,0 +1,41 @@
+<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 scoped>
+.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

@@ -0,0 +1,91 @@
+<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 scoped>
+.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

@@ -0,0 +1,43 @@
+<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 scoped>
+.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>