sprof 0.0.2 → 0.0.11

package/src/components/TopSliderContainer.vue

@@ -1,164 +0,0 @@
-<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

@@ -1,268 +0,0 @@
-<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

@@ -1,44 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,54 +0,0 @@
-<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>