sprof 0.0.1

package/src/components/TopSliderContainer.vue

@@ -0,0 +1,164 @@
+<template>
+  <div v-if="!isToggle" class="blur" @click.prevent="isToggle = true" @click.stop="() => undefined"></div>
+  <div
+    class="top-slider"
+    :style="{
+      marginTop: isToggle ? `calc(${sliderOffHeight} - ${sliderOnHeight})` : `0`,
+      height: sliderOnHeight,
+    }"
+    @click.stop="() => undefined"
+  >
+    <div class="top-slider-content">
+      <div class="center">
+        <slot />
+      </div>
+    </div>
+    <div
+      class="click-line"
+      :style="{
+        height: sliderOffHeight,
+      }"
+      @click="toggleSlider(!isToggle)"
+    >
+      <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',
+  },
+  toggle: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+});
+const emit = defineEmits(['toggle']);
+const isToggle = ref(true);
+watch(
+  () => props.toggle,
+  () => {
+    isToggle.value = !isToggle.value;
+  }
+);
+
+const toggleSlider = (toggle: boolean) => {
+  isToggle.value = !isToggle.value;
+  emit('toggle', toggle);
+};
+</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/UploaderImage.vue

@@ -0,0 +1,268 @@
+<template>
+  <div id="drop-area" class="img-container">
+    <div v-if="uploadedImg">
+      <div class="img-block" :style="{ width: height * defaultRatio - 2 + 'px', height: height + 'px' }">
+        <img class="el-upload-list__item-thumbnail" :src="uploadedImg.url" alt="upload-image" />
+      </div>
+      <div class="tools-button">
+        <div class="ins">
+          <PButton skin="text" text="Изменить" font-size="20px" width="300px" margin="100px 0 0 0" @click="openCropper(uploadedImg)" />
+          <PButton skin="text" text="Удалить" font-size="20px" width="300px" margin="50px 0 0 0" @click="handleRemove()" />
+        </div>
+      </div>
+    </div>
+
+    <div v-else>
+      <div class="add-button" :style="{ width: height * defaultRatio - 2 + 'px', height: height + 'px' }">
+        <PButton skin="text" text="Добавить" font-size="20px" @click="openUploadDialog" />
+      </div>
+    </div>
+  </div>
+  <input :id="fileInputId" type="file" hidden @change="uploadFile" />
+  <ImageCropper v-if="withCrop" :open="cropperOpened" :default-ratio="defaultRatio" @crop="crop" @close="cropperOpened = false" />
+</template>
+
+<script lang="ts" setup>
+import Cropper from '@/classes/Cropper';
+import FileInfo from '@/classes/FileInfo';
+import IFile from '@/interfaces/IFile';
+
+const props = defineProps({
+  withCrop: {
+    type: Boolean,
+    default: true,
+  },
+  fileInfo: {
+    type: FileInfo,
+    required: true,
+  },
+  height: {
+    type: Number,
+    default: 150,
+  },
+  width: {
+    type: Number,
+    default: 150,
+  },
+  cropRatio: {
+    type: Boolean,
+    default: true,
+  },
+  emitCrop: {
+    type: Boolean,
+    default: false,
+  },
+  defaultRatio: {
+    type: Number,
+    required: false,
+    default: 1,
+  },
+});
+
+const emits = defineEmits(['crop', 'removeFile']);
+const uploadedImg: Ref<FileInfo | undefined> = ref(undefined);
+const fileInputId = Strings.CreateGuid();
+const cropperOpened = ref(false);
+const uploader = ref();
+
+// const toggleUpload = (file: any) => {
+//   props.fileInfo.uploadNewFile(file);
+//   if (props.fileInfo.fileSystemPath) {
+//     uploadedImg.value = props.fileInfo;
+//     uploadedImg.value.url = props.fileInfo.getImageUrl();
+//     // .push({ name: props.fileInfo.fileSystemPath, url: file.url });
+//   }
+//   if (props.withCrop) {
+//     openCropper(file);
+//   }
+// };
+
+const openCropper = (file: FileInfo) => {
+  const ratio = props.cropRatio ? props.defaultRatio : 0;
+  CropperStore.Open(Cropper.CreateCropper(file.url, ratio, props.fileInfo.id));
+  cropperOpened.value = true;
+};
+
+const handleRemove = () => {
+  PHelp.Dialog.Show({
+    text: 'Вы хотите удалить изображение',
+    confirmButtonText: 'Удалить',
+    cancelButtonText: 'Не удалять',
+  }).then(() => {
+    uploadedImg.value = undefined;
+    uploader.value.clearFiles();
+    emits('removeFile');
+  });
+};
+
+const crop = (file: IFile) => {
+  props.fileInfo.setFile(file);
+  if (props.fileInfo.fileSystemPath) {
+    uploadedImg.value = props.fileInfo;
+    // fileList.value.push({ name: props.fileInfo.fileSystemPath, url: file.src });
+  }
+  cropperOpened.value = false;
+  emits('crop');
+};
+
+onBeforeMount(() => {
+  if (props.fileInfo.fileSystemPath) {
+    uploadedImg.value = props.fileInfo;
+    uploadedImg.value.url = props.fileInfo.getImageUrl() as string;
+    // fileList.value.push({ name: props.fileInfo.fileSystemPath, url: props.fileInfo.getImageUrl() });
+  }
+});
+let fileInput: HTMLInputElement | null = null;
+
+onMounted(() => {
+  const dropArea = document.getElementById('drop-area');
+  if (!dropArea) {
+    return;
+  }
+  dropArea.addEventListener('dragover', (e) => {
+    preventDefaults(e);
+    dropArea.classList.add('drag-over');
+  });
+
+  dropArea.addEventListener('dragleave', (e) => {
+    preventDefaults(e);
+    dropArea.classList.remove('drag-over');
+  });
+
+  dropArea.addEventListener('dragenter', preventDefaults);
+  dropArea.addEventListener('dragleave', preventDefaults);
+  dropArea.addEventListener('drop', handleDrop);
+
+  fileInput = document.getElementById(fileInputId) as HTMLInputElement;
+});
+//
+function preventDefaults(e: Event) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+const openUploadDialog = () => {
+  if (fileInput) {
+    fileInput.click();
+  }
+};
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault();
+  if (!e.dataTransfer) {
+    return;
+  }
+  const files = e.dataTransfer.files;
+  if (files.length && fileInput) {
+    fileInput.files = files;
+    uploadFile();
+  }
+}
+const uploadFile = () => {
+  if (!fileInput || !fileInput.files || !fileInput.files.length) {
+    return;
+  }
+  const file = fileInput.files[0] as unknown as FileInfo;
+  file.url = URL.createObjectURL(file as unknown as MediaSource);
+  uploadedImg.value = file;
+  props.fileInfo.uploadNewFile(file as unknown as IFile);
+  openCropper(uploadedImg.value);
+};
+</script>
+
+<style lang="scss" scoped>
+#drop-area {
+  width: 300px;
+  height: 300px;
+  margin: 20px auto;
+  text-align: center;
+  line-height: 200px;
+  border: 2px dashed #ccc;
+  cursor: pointer;
+  &:hover {
+    border: 2px dashed #aaa;
+  }
+}
+
+.drag-over {
+  background-color: #eee;
+}
+
+.ins {
+  display: block;
+  width: 300px;
+  height: 300px;
+}
+
+.img-container {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.add-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: 20px;
+  opacity: 0.5;
+}
+
+.add-button:hover {
+  opacity: 1;
+}
+
+.tools-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: 20px;
+  opacity: 0;
+}
+
+.tools-button:hover {
+  background: #000;
+  opacity: 0.8;
+}
+
+.hideUpload {
+  .el-upload {
+    display: none;
+  }
+}
+
+.avatar-uploader-cover {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.avatar-uploader-cover.hideUploader {
+  display: flex;
+  justify-content: center;
+  height: var(--height);
+  text-align: center;
+  margin: 0;
+}
+
+.flex-group {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.img-block {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  width: auto;
+}
+</style>

package/src/components/atoms/PButton/PButton.stories.ts

@@ -0,0 +1,44 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+
+import PButton from './PButton.vue';
+
+export default {
+  title: 'Atoms/PButton',
+  component: PButton,
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'success', 'warning', 'danger', 'neutral'],
+      defaultValue: 'primary',
+    },
+  },
+} as Meta<typeof PButton>;
+
+const Template: StoryFn<typeof Button> = (args) => ({
+  components: { PButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="display: flex; flex-direction: row; gap: 12px;">
+      <PButton skin="base" type="primary" width="120px" margin="20px">Primary</PButton>
+      <PButton skin="base" type="info" width="120px" margin="20px">Info</PButton>
+      <PButton skin="base" type="success" width="120px" margin="20px">Success</PButton>
+      <PButton skin="base" type="warning" width="120px" margin="20px">Warning</PButton>
+      <PButton skin="base" type="danger" width="120px" margin="20px">Danger</PButton>
+      <PButton skin="base" type="neutral" width="120px" margin="20px">Neutral</PButton>
+      <PButton skin="base" type="disabled" width="120px" margin="20px">Disabled</PButton>
+    </div>
+    <div style="display: flex; flex-direction: row; gap: 12px;">
+      <PButton skin="text" type="primary" width="120px" margin="20px">Primary</PButton>
+      <PButton skin="text" type="info" width="120px" margin="20px">Info</PButton>
+      <PButton skin="text" type="success" width="120px" margin="20px">Success</PButton>
+      <PButton skin="text" type="warning" width="120px" margin="20px">Warning</PButton>
+      <PButton skin="text" type="danger" width="120px" margin="20px">Danger</PButton>
+      <PButton skin="text" type="neutral" width="120px" margin="20px">Neutral</PButton>
+      <PButton skin="text" type="del" width="120px" margin="20px">Del</PButton>
+    </div>`,
+});
+
+export const PrimaryButton = Template.bind({});
+PrimaryButton.args = { color: 'primary' };

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

@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils';
+
+import PButton from './PButton.vue';
+
+describe('PButton', () => {
+  describe('Given text prop', () => {
+    const wrapper = mount(PButton, {
+      props: {
+        text: 'Test',
+      },
+    });
+    test('Then same text', () => {
+      expect(wrapper.text()).toContain('Test');
+    });
+  });
+
+  test('Emit click', async () => {
+    const wrapper = mount(PButton);
+    const btn = wrapper.find('button');
+    btn.trigger('click');
+    const w = wrapper.emitted();
+    expect(w).toHaveProperty('click');
+  });
+
+  test('disabled', () => {
+    const wrapper = mount(PButton, {
+      props: {
+        disabled: true,
+      },
+    });
+    const btn = wrapper.find('button');
+    expect(btn.element.disabled).toBe(true);
+  });
+
+  describe('When disabled', () => {
+    const wrapper = mount(PButton, {
+      props: {
+        disabled: true,
+      },
+    });
+    const btn = wrapper.find('button');
+
+    test('Then no click', async () => {
+      btn.trigger('click');
+      const w = wrapper.emitted();
+      expect(w).not.toHaveProperty('click');
+    });
+  });
+
+  describe('When pass size', () => {
+    const btn = mount(PButton, {
+      props: {
+        size: Sizes.XL,
+      },
+    });
+
+    test('Then correct css class', async () => {
+      expect(btn.classes()).toContain('p-button_base_xl');
+    });
+
+    test('Then css is dynamic', async () => {
+      await btn.setProps({ size: Sizes.XS });
+      expect(btn.classes()).toContain('p-button_base_xs');
+    });
+  });
+});

package/src/components/atoms/PButton/PButton.vue

@@ -0,0 +1,54 @@
+<template>
+  <button
+    v-bind="$attrs"
+    :style="{
+      margin: margin,
+      padding: padding,
+      maxWidth: width,
+      minWidth: width,
+      minHeight: height,
+      maxHeight: height,
+      fontSize: fontSize,
+    }"
+    :class="classes"
+    @click.prevent="click"
+  >
+    <slot />
+    {{ text }}
+  </button>
+</template>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  text: { type: String, default: '', required: false },
+  margin: { type: String, default: '', required: false },
+  padding: { type: String, default: '', required: false },
+  width: { type: String, default: '', required: false },
+  height: { type: String, default: '', required: false },
+  skin: { type: String, default: 'base', required: false },
+  size: { type: String as PropType<Sizes>, default: Sizes.M, required: false },
+  type: { type: String as PropType<Statuses>, default: Statuses.Neutral, required: false },
+  fontSize: { type: String, default: '', required: false },
+  // disabled: { type: Boolean, default: false, required: false },
+});
+
+const emit = defineEmits(['click']);
+const click = () => {
+  emit('click');
+};
+
+const key = 'p-button';
+const skinClass = computed(() => Strings.JoinSnake(key, props.skin));
+const typeClass = computed(() => Strings.JoinSnake(skinClass.value, props.type));
+const sizeClass = computed(() => Strings.JoinSnake(skinClass.value, props.size));
+const classes = computed(() => [skinClass.value, typeClass.value, sizeClass.value]);
+</script>
+
+<style scoped>
+@import '@/components/atoms/PButton/skins/p-button_base.css';
+@import '@/components/atoms/PButton/skins/p-button_text.css';
+@import '@/components/atoms/PButton/skins/p-button_pag.css';
+@import '@/components/atoms/PButton/skins/p-button_text_ano.css';
+</style>