sprof 0.1.0

package/src/components/AdaptiveContainerHorizontal.vue

@@ -0,0 +1,173 @@
+<template>
+  <slot name="main" />
+  <div
+    v-if="mounted"
+    class="mainblock"
+    :style="{
+      display: mobileWindow ? 'block' : 'flex',
+    }"
+  >
+    <div
+      class="mainblock-left"
+      :style="{
+        minWidth: mobileWindow ? '100%' : menuWidth,
+        display: leftWidth !== '0px' ? 'flex' : 'none',
+        top: mobileWindow ? '58px' : '80px',
+      }"
+    >
+      <div
+        class="left-menu"
+        :style="{
+          minWidth: mobileWindow ? '100%' : menuWidth,
+          boxShadow: mobileWindow ? '0 0px 10px 0px rgba(0 0 0 / 20%)' : '',
+          marginLeft: !collapsed && mobileWindow ? '0' : '0',
+          overflowX: mobileWindow ? 'scroll' : 'hidden',
+          display: mobileWindow ? 'flex' : 'block',
+          background: mobileWindow ? '#ffffff' : '',
+          overflowY: mobileWindow ? 'hidden' : 'auto',
+        }"
+        @click="handClick()"
+      >
+        <slot name="menu" />
+      </div>
+    </div>
+    <div class="mainblock-right">
+      <div
+        class="title"
+        :style="{
+          position: titleSticky ? 'sticky' : 'relative',
+          top: titleSticky ? (mobileWindow ? '108px' : '58px') : '0',
+          zIndex: titleSticky ? '10' : '',
+        }"
+      >
+        <div
+          class="icon"
+          :style="{
+            display: mobileWindow ? 'flex' : 'none',
+          }"
+          @click="handClick()"
+        >
+          <slot name="icon" />
+        </div>
+        <slot name="title" />
+      </div>
+
+      <div class="body">
+        <slot name="body" />
+      </div>
+    </div>
+  </div>
+  <RightMenu />
+</template>
+
+<script lang="ts" setup>
+import RightMenu from '@/services/assets/svg/RightMenu.svg';
+
+const props = defineProps({
+  menuWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '0px',
+  },
+  mobileWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '1330px',
+  },
+  titleSticky: {
+    type: Boolean as PropType<boolean>,
+    required: false,
+    default: false,
+  },
+});
+const mounted = ref(false);
+const collapsed: Ref<boolean> = ref(true);
+const mobileWindow = ref(window.matchMedia('(max-width: 1330px)').matches);
+
+const handClick = () => {
+  collapsed.value = !collapsed.value;
+};
+
+onBeforeMount(async () => {
+  window.addEventListener('resize', () => {
+    switch (props.mobileWidth) {
+      case '1330px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 1330px)').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: 1330px)').matches);
+  });
+  mounted.value = true;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.mainblock {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: auto;
+}
+
+.mainblock-left {
+  position: sticky;
+  display: flex;
+  justify-content: left;
+  margin-right: 30px;
+  height: 100%;
+  left: 0px;
+  z-index: 10;
+}
+
+.left-menu {
+  position: relative;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  max-height: 80vh;
+  transition: 0.3s;
+}
+
+.mainblock-right {
+  position: relative;
+  width: 100%;
+  max-height: 100%;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 16px;
+  justify-content: center;
+  align-items: center;
+}
+
+.body {
+  width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  .title {
+    font-size: 20px;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .title {
+    font-size: 16px;
+  }
+}
+</style>

package/src/components/AdminGallery.vue

@@ -0,0 +1,238 @@
+<template>
+  <draggable class="groups" :list="fileList" item-key="id" handle=".move" @end="Arrays.Sort(fileList)">
+    <template #item="{ element, index }">
+      <div class="item">
+        <div class="move">
+          <div class="item-tools">
+            <svg class="icon-move">
+              <use xlink:href="#move"></use>
+            </svg>
+            <button class="admin-del2" @click.prevent="remove(element)">Удалить</button>
+          </div>
+          <UploderImage
+            :file-info="element.fileInfo"
+            :height="150"
+            :default-ratio="defaultRatio"
+            @remove-file="ClassHelper.RemoveFromClassByIndex(index, fileList, fileListForDelete)"
+            @crop="crop(element)"
+          />
+        </div>
+        <div class="item-description">
+          <input v-model="element.description" class="item-description-form" placeholder="..." />
+        </div>
+      </div>
+    </template>
+  </draggable>
+  <Move />
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import draggable from 'vuedraggable';
+
+import Arrays from '@/services/Arrays';
+import Move from '@/services/assets/svg/Move.svg';
+import ClassHelper from '@/services/ClassHelper';
+import IFiler from '@/services/interfaces/IFiler';
+const props = defineProps({
+  fileList: {
+    type: Array as PropType<IFiler[]>,
+    reguired: true,
+    default: () => [],
+  },
+  fileListForDelete: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  defaultRatio: {
+    type: Number,
+    required: false,
+    default: 1,
+  },
+  upload: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+});
+const emits = defineEmits(['addImage', 'ratio', 'remove']);
+const crop = async (filer: IFiler) => {
+  emits('addImage', filer);
+};
+
+const remove = async (filer: IFiler) => {
+  ClassHelper.RemoveFromClassById(filer.id, props.fileList, []);
+  emits('remove', filer);
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.groups {
+  width: 100%;
+  max-height: 50vh;
+  display: grid;
+  grid-gap: 5px;
+  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
+  grid-template-rows: repeat(0 5px);
+  grid-auto-rows: 250px;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+
+.groups > div {
+  max-width: 290px;
+  min-width: 120px;
+  height: 230px;
+  object-fit: cover;
+  overflow: hidden;
+}
+
+.item {
+  height: 150px;
+  object-fit: cover;
+  position: relative;
+  width: auto;
+  border-radius: $border-radius;
+  border: $normal-darker-border;
+  transition: 0.3s;
+}
+
+.item:hover {
+  border: $dark-border;
+  box-shadow: $normal-shadow;
+}
+
+.item:hover > .move > .item-tools > .icon-move {
+  visibility: visible;
+}
+
+.item-description-form {
+  height: 18px;
+  border: $normal-darker-border;
+  border-radius: 10px;
+  width: 250px;
+  display: flex;
+  font-family: Comfortaa, Arial, Helvetica, sans-serif;
+  font-size: 15px;
+  padding: 0 0 0 15px;
+  margin: 0 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  outline: none;
+  color: #4a4a4a;
+}
+
+.item:hover > .item-tools {
+  visibility: visible;
+  border-bottom: $dark-border;
+}
+
+.item-tools {
+  padding-left: 3px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 30px;
+  background: #f9fafb;
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+  border-bottom: $normal-darker-border;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.item-description {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 28px;
+  background: #f9fafb;
+  border-bottom-left-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+  border-top: $normal-darker-border;
+  width: 100%;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1.15, 1.15);
+  }
+}
+
+.icon-move {
+  visibility: hidden;
+  width: 24px;
+  height: 24px;
+  fill: #dff2f8;
+  stroke: #747474;
+  animation-name: ripple;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+}
+
+.admin-del2 {
+  border: none;
+  background: inherit;
+  color: #a3a9be;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.admin-del2:hover {
+  color: darken($color: #cf3d19, $amount: 5%);
+}
+
+.item-input {
+  height: 20px;
+}
+
+:deep(.el-upload--picture-card) {
+  width: 150px;
+  font-size: 50px;
+  margin: 10px;
+}
+
+:deep(.el-upload--picture-card i) {
+  font-size: 50px;
+  color: #00b5a4;
+  padding: 0 54px;
+}
+
+:deep(.el-upload-list--picture-card .el-upload-list__item) {
+  margin: 10px;
+}
+
+@media screen and (max-width: 400px) {
+  .background-container {
+    margin: 0 10px 20px 10px;
+  }
+
+  .groups {
+    width: 100%;
+    height: 40vh;
+    display: grid;
+    grid-gap: 5px;
+    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+    grid-template-rows: repeat(0 5px);
+    grid-auto-rows: 210px;
+  }
+
+  .groups > div {
+    max-width: 230px;
+    height: 200px;
+    object-fit: cover;
+    overflow: hidden;
+    align-self: center;
+    justify-self: center;
+  }
+}
+</style>

package/src/components/AuthModal.vue

@@ -0,0 +1,16 @@
+<template>
+  <PModal :show="PHelp.AuthModal.IsVisible()" :closable="PHelp.AuthModal.IsClosable()" @close="close">
+    <AuthForm width="760px" @action="$emit('action')" />
+  </PModal>
+</template>
+
+<script lang="ts" setup>
+defineEmits(['action']);
+
+const close = () => {
+  PHelp.AuthModal.Close();
+  PHelp.AuthForm.Reset();
+};
+</script>
+
+<style scoped lang="scss"></style>