sprof 0.1.0

package/src/components/FilterCheckbox.vue

@@ -0,0 +1,73 @@
+<template>
+  <PCheckBox v-model="checked" :label="model.label" size="mini" @change="setFilterModel" />
+</template>
+
+<script lang="ts" setup>
+import FilterModel from '@/services/classes/filters/FilterModel';
+const props = defineProps({
+  model: {
+    type: Object as PropType<FilterModel>,
+    default: () => new FilterModel(),
+    required: true,
+  },
+});
+const checked = ref(false);
+const emits = defineEmits(['load']);
+
+const setFilterModel = () => {
+  props.model.setBoolean(checked.value);
+  if (checked.value) {
+    FTSP.Get().setF(props.model);
+  } else {
+    FTSP.Get().removeF(props.model);
+  }
+  emits('load');
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+// @import '@/assets/elements/filterForm.scss';
+
+:deep(.el-input__inner) {
+  border-radius: 20px;
+  padding-left: 25px;
+  height: 34px;
+  // width: 100%;
+  display: flex;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 15px;
+}
+
+:deep(.el-input__inner::placeholder) {
+  color: #4a4a4a;
+}
+
+:deep(.el-select .el-input .el-select__caret) {
+  color: #4a4a4a;
+  font-size: 15px;
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+:deep(.el-input__suffix) {
+  top: -2px;
+}
+
+:deep(.el-form-item) {
+  padding: 0 10px;
+  margin: 0;
+}
+
+.el-form {
+  width: 100%;
+}
+
+// .filter-form {
+// width: 100%;
+// }
+</style>

package/src/components/FilterSelect.vue

@@ -0,0 +1,104 @@
+<template>
+  <PSelect v-model="filterModel" :clearable="filterModel" :placeholder="defaultLabel" @change="selectFilter">
+    <option v-for="(model, i) in models" :key="i" :value="model" :label="model.label" />
+  </PSelect>
+</template>
+
+<script lang="ts" setup>
+import FilterModel from '@/services/classes/filters/FilterModel';
+
+defineProps({
+  models: {
+    type: Array as PropType<FilterModel[]>,
+    default: () => [],
+  },
+  defaultLabel: {
+    type: String as PropType<string>,
+    default: 'Все',
+  },
+  inverse: { type: Boolean as PropType<boolean>, required: false, default: false },
+});
+const emits = defineEmits(['load']);
+const ftsp = FTSP.Get();
+
+// watch(
+//   () => restore.value,
+//   () => {
+//     // const finded = props.models.find((m: FilterModel) => {
+//     //   return ftsp.value.f.some((f: FilterModel) => {
+//     //     return m.valueEq(f);
+//     //   });
+//     // });
+//     // setFilter(finded);
+//   }
+// );
+const filterModel: Ref<FilterModel | undefined> = ref(undefined);
+
+const setFilter = async (model?: FilterModel) => {
+  ftsp.replaceF(model, filterModel.value);
+  filterModel.value = model;
+};
+
+const selectFilter = async (model?: FilterModel) => {
+  if (!model) {
+    await setFilter(undefined);
+  } else {
+    await setFilter(filterModel.value);
+  }
+  emits('load');
+};
+</script>
+
+<style lang="scss" scoped>
+.filter-button {
+  width: auto;
+  height: 23px;
+  border-radius: 5px;
+  color: #006bb4;
+  background: #ffffff;
+  font-size: 12px;
+  padding: 10px;
+}
+
+.anticon {
+  margin: 4px 4px 2px 4px;
+  font-size: 13px;
+
+  &:hover {
+    color: #5cb6ff;
+  }
+}
+
+.set {
+  color: #5cb6ff;
+}
+
+:deep(.el-input__inner) {
+  border-radius: 20px;
+  padding-left: 25px;
+  height: 34px;
+  width: 100%;
+  display: flex;
+  font-family: Comfortaa, Arial, Helvetica, sans-serif;
+  font-size: 15px;
+}
+
+:deep(.el-input__inner::placeholder) {
+  color: #4a4a4a;
+}
+
+:deep(.el-select .el-input .el-select__caret) {
+  color: #4a4a4a;
+  font-size: 16px;
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 0;
+}
+</style>

package/src/components/FiltersButtonsSelect.vue

@@ -0,0 +1,126 @@
+<template>
+  <PString :string="defaultLabel" font-size="14px" padding="0" margin="20px 0 0 10px" />
+  <InfoItem
+    margin="5px 0 0 0px"
+    :with-open-window="false"
+    height="auto"
+    background="#F5F5F5"
+    border-color="#C4C4C4"
+    padding="7px"
+    :with-hover="false"
+  >
+    <!-- <InfoItem margin="0" :with-open-window="false" :with-icon="false" height="auto" background="#F5F5F5" border-color="#C4C4C4" padding="7px" :with-hover="false"> -->
+    <template #title>
+      <!-- <PString :string="defaultLabel" font-size="14px" padding="0" margin="-5px 0 0 0" /> -->
+    </template>
+
+    <GridContainer max-width="100%" grid-gap="7px" grid-template-columns="repeat(auto-fit, minmax(100%, 1fr))" margin="0px">
+      <PButton
+        v-for="(model, index) in models"
+        :key="index"
+        color="blue"
+        height="auto"
+        :text="model.label"
+        :is-toggle="model.valueEq(filterModel)"
+        :toggle-mode="true"
+        :inverse="inverse"
+        @click="selectFilter(model.valueEq(filterModel) ? undefined : model)"
+      />
+    </GridContainer>
+  </InfoItem>
+</template>
+
+<script lang="ts" setup>
+import FilterModel from '@/services/classes/filters/FilterModel';
+
+defineProps({
+  models: {
+    type: Array<FilterModel>,
+    default: () => [],
+  },
+  defaultLabel: {
+    type: String,
+    default: 'Все',
+  },
+  inverse: { type: Boolean as PropType<boolean>, required: false, default: false },
+});
+const emits = defineEmits(['load']);
+
+// watch(
+//   () => restore.value,
+//   () => {
+//     const finded = props.models.find((m: FilterModel) => {
+//       return FTSP.Get().f.some((f: FilterModel) => {
+//         return m.valueEq(f);
+//       });
+//     });
+//     setFilter(finded);
+//   }
+// );
+const filterModel: Ref<FilterModel | undefined> = ref(undefined);
+
+const setFilter = async (model?: FilterModel) => {
+  FTSP.Get().replaceF(model, filterModel.value);
+  filterModel.value = model;
+  FTSP.Get().p.drop();
+};
+
+const selectFilter = async (model?: FilterModel) => {
+  await setFilter(model);
+  emits('load');
+};
+</script>
+
+<style lang="scss" scoped>
+.filter-button {
+  width: auto;
+  height: 23px;
+  border-radius: 5px;
+  color: #006bb4;
+  background: #ffffff;
+  font-size: 12px;
+  padding: 10px;
+}
+
+.anticon {
+  margin: 4px 4px 2px 4px;
+  font-size: 13px;
+
+  &:hover {
+    color: #5cb6ff;
+  }
+}
+
+.set {
+  color: #5cb6ff;
+}
+
+:deep(.el-input__inner) {
+  border-radius: 20px;
+  padding-left: 25px;
+  height: 34px;
+  width: 100%;
+  display: flex;
+  font-family: Comfortaa, Arial, Helvetica, sans-serif;
+  font-size: 15px;
+}
+
+:deep(.el-input__inner::placeholder) {
+  color: #4a4a4a;
+}
+
+:deep(.el-select .el-input .el-select__caret) {
+  color: #4a4a4a;
+  font-size: 16px;
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 0;
+}
+</style>

package/src/components/GeneralItem.vue

@@ -0,0 +1,172 @@
+<template>
+  <div
+    class="general-block-item"
+    :style="{
+      background: background,
+      height: height,
+      width: width,
+      borderColor: borderColor,
+      padding: padding,
+      margin: margin,
+      transform: scale ? (hovering ? 'scale(1.03, 1.03)' : '') : '',
+    }"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <div
+      class="green"
+      :style="{
+        width: `${ready}`,
+      }"
+    ></div>
+    <div
+      class="general-block-item-title"
+      :style="{
+        fontSize: fontSize,
+      }"
+    >
+      <slot name="general-item" />
+    </div>
+    <div
+      class="tools-icon"
+      :style="{
+        display: withIcon ? 'flex' : 'none',
+      }"
+    >
+      <svg class="icon-del">
+        <use xlink:href="#del"></use>
+      </svg>
+    </div>
+    <svg width="0" height="0" class="hidden">
+      <symbol id="del" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+        <path
+          d="M2.91797 8.75C2.6888 8.75 2.49255 8.66833 2.32922 8.505C2.16589 8.34167 2.08436 8.14556 2.08464 7.91667V2.5H1.66797V1.66667H3.7513V1.25H6.2513V1.66667H8.33464V2.5H7.91797V7.91667C7.91797 8.14583 7.8363 8.34208 7.67297 8.50542C7.50964 8.66875 7.31352 8.75028 7.08464 8.75H2.91797ZM7.08464 2.5H2.91797V7.91667H7.08464V2.5ZM3.7513 7.08333H4.58464V3.33333H3.7513V7.08333ZM5.41797 7.08333H6.2513V3.33333H5.41797V7.08333Z"
+        ></path>
+      </symbol>
+    </svg>
+  </div>
+  <!-- borderColor: scale ? borderColor : (hovering ? '#379fff' : borderColor), -->
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  background: {
+    type: String as PropType<string>,
+    required: false,
+    default: '#ffffff',
+  },
+  height: {
+    type: String as PropType<string>,
+    required: false,
+    default: '40px',
+  },
+  width: {
+    type: String as PropType<string>,
+    required: false,
+    default: 'auto',
+  },
+
+  ready: {
+    type: String as PropType<string>,
+    required: false,
+    default: '0%',
+  },
+  padding: {
+    type: String as PropType<string>,
+    required: false,
+    default: '10px',
+  },
+  borderColor: {
+    type: String as PropType<string>,
+    required: false,
+    default: '#343D5C',
+  },
+  margin: {
+    type: String as PropType<string>,
+    required: false,
+    default: '5px',
+  },
+  scale: {
+    type: Boolean as PropType<boolean>,
+    required: false,
+    default: true,
+  },
+  fontSize: {
+    type: String as PropType<string>,
+    required: false,
+    default: '14px',
+  },
+  withIcon: {
+    type: Boolean as PropType<boolean>,
+    required: false,
+    default: false,
+  },
+});
+
+const hovering = ref(false);
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.hidden {
+  display: none;
+}
+
+.general-block-item {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: 0.3s;
+  border-radius: $border-radius;
+  border: $custom-border;
+  text-align: center;
+  overflow: hidden;
+}
+
+.green {
+  position: absolute;
+  background: #c7ecea;
+  top: 0;
+  left: 0;
+  width: 80%;
+  height: 100%;
+}
+
+.general-block-item-title {
+  font-size: 12px;
+  color: #343e5c;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  z-index: 1;
+}
+
+.icon-del {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  fill: #343e5c;
+}
+
+.icon-del:hover {
+  fill: #1979cf;
+}
+
+.tools-icon {
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 10px;
+}
+</style>

package/src/components/GridContainer.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="grid-block" :class="customClass">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  maxWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '',
+  },
+  width: {
+    type: String as PropType<string>,
+    required: false,
+    default: '100%',
+  },
+  background: {
+    type: String as PropType<string>,
+    required: false,
+    default: 'inherit',
+  },
+  gridGap: {
+    type: String as PropType<string>,
+    required: false,
+    default: '10px',
+  },
+  gridTemplateColumns: {
+    type: String as PropType<string>,
+    required: false,
+    default: 'repeat(auto-fit, minmax(250px, 1fr))',
+  },
+  gridTemplateRows: {
+    type: String as PropType<string>,
+    required: false,
+    default: 'repeat(0 0px)',
+  },
+  margin: {
+    type: String as PropType<string>,
+    required: false,
+    default: '10px 0 0 0',
+  },
+  // Custom class styles have prio
+  customClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.grid-block {
+  box-sizing: border-box;
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+  max-width: v-bind(maxWidth);
+  width: v-bind(width);
+  background: v-bind(background);
+  grid-gap: v-bind(gridGap);
+  grid-template-columns: v-bind(gridTemplateColumns);
+  grid-template-rows: v-bind(gridTemplateRows);
+  margin: v-bind(margin);
+}
+</style>

package/src/components/Icons/Filter/IconDownload.vue

@@ -0,0 +1,55 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+      fill: hoverColor ? (hovering ? hoverColor : color) : hovering ? color : color,
+    }"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <use xlink:href="#download"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <path
+        d="M15.6443 5.06141C15.0797 5.29331 15.0998 5.06141 15.0998 12.1393C15.0998 15.7388 15.0696 18.6728 15.0293 18.6728C14.9889 18.6728 14.1521 17.8763 13.1842 16.9083C11.6819 15.4061 11.3592 15.1338 11.0467 15.0733C10.724 15.0229 10.6333 15.0632 10.3611 15.3254C10.1292 15.5573 10.0586 15.7186 10.0586 16.0211C10.0586 16.3941 10.1594 16.5151 12.8615 19.2071C15.4326 21.7681 15.6947 22 16.0073 22C16.3198 22 16.582 21.7681 19.153 19.2071C21.9156 16.4546 21.9559 16.4042 21.9559 15.9908C21.9559 15.4867 21.6535 15.1641 21.109 15.0733C20.736 15.0128 20.7259 15.0229 18.8808 16.868C17.0357 18.6929 17.0155 18.7131 17.0155 18.3703C17.0054 18.1787 16.9953 15.2145 16.9853 11.7965L16.9651 5.56554L16.713 5.31348C16.4307 5.03117 15.9669 4.92026 15.6443 5.06141Z"
+      ></path>
+      <path
+        d="M5.30247 20.3872L5 20.6997L5.04033 22.081C5.07058 23.4321 5.08066 23.4825 5.44363 24.2488C6.09899 25.6099 7.17782 26.5173 8.59945 26.8904C9.47663 27.1122 22.5335 27.1223 23.4006 26.8904C25.044 26.4669 26.3245 25.2671 26.8084 23.7043C26.9496 23.2506 27 22.7868 27 21.8794C27 20.6796 27 20.6695 26.7076 20.3771C26.3144 19.9839 25.901 19.9839 25.4675 20.3771L25.1347 20.6695L25.1045 21.8189C25.0843 22.8776 25.0541 23.0086 24.7516 23.6035C24.3987 24.3093 23.7938 24.8235 23.088 25.0251C22.5839 25.1663 9.4363 25.1663 8.93217 25.0251C8.30706 24.8436 7.64161 24.3093 7.29881 23.7144C7.00642 23.2002 6.98625 23.0691 6.93584 21.9197L6.88543 20.6695L6.5527 20.3771C6.11916 19.9839 5.70577 19.9839 5.30247 20.3872Z"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+const hovering = ref(false);
+defineProps({
+  color: { type: String as PropType<string>, default: '' },
+  hoverColor: { type: String as PropType<string>, default: '' },
+  size: { type: String as PropType<string>, default: '' },
+  margin: { type: String as PropType<string>, default: '0' },
+  iconClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.hidden {
+  display: none;
+}
+.icon {
+  width: $icon-width;
+  height: $icon-height;
+  fill: $icon-color;
+  transition: $icon-transition;
+}
+
+.icon:hover {
+  fill: $icon-hover-color;
+}
+</style>

package/src/components/Icons/Filter/IconFilter.vue

@@ -0,0 +1,55 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+      fill: hoverColor ? (hovering ? hoverColor : color) : hovering ? color : color,
+    }"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <use xlink:href="#filter"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="filter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <path
+        d="M8.58216 5.14236C6.22884 5.77558 4.70721 8.02494 5.04745 10.3688C5.61452 14.2627 10.3684 15.8127 13.0714 12.9962C13.6385 12.4103 14.319 11.2194 14.319 10.8225C14.319 10.6902 14.9428 10.6713 20.3771 10.6713H26.4353L26.7094 10.3972C27.0969 10.0097 27.0969 9.44261 26.7094 9.05511L26.4353 8.78103H20.396H14.3662L14.1867 8.23287C13.4589 5.9646 10.8599 4.52803 8.58216 5.14236ZM10.9638 7.21215C13.0525 8.24232 13.0336 11.2194 10.9355 12.2496C10.2172 12.5993 9.20593 12.6276 8.54436 12.2968C6.21939 11.1533 6.43676 7.81702 8.8846 7.01368C9.45166 6.8341 10.3495 6.91916 10.9638 7.21215Z"
+      ></path>
+      <path
+        d="M21.5953 17.6266C21.1133 17.7211 20.2155 18.0519 19.8752 18.2599C18.9868 18.7986 18.0322 20.0083 17.8054 20.8778L17.6826 21.3504H12.3616C6.66257 21.3504 6.63422 21.3504 6.37904 21.8135C6.20892 22.1443 6.26562 22.6452 6.51135 22.9287L6.73818 23.1933L12.1915 23.2406L17.6448 23.2878L17.8621 23.8738C18.4292 25.4427 19.7334 26.6052 21.2929 26.936C22.1057 27.1061 23.3154 27.0021 24.062 26.6997C25.3379 26.1799 26.4059 25.0174 26.8029 23.7037C26.9635 23.165 27.0013 22.8625 26.9635 22.0781C26.9352 21.1991 26.8974 21.0479 26.5855 20.3864C25.8105 18.7513 24.2794 17.7117 22.5499 17.6172C22.1529 17.5983 21.7276 17.6077 21.5953 17.6266ZM23.5517 19.8004C24.081 20.0556 24.5913 20.5754 24.8748 21.1519C24.9977 21.4071 25.045 21.7095 25.045 22.3427C25.045 23.1555 25.0261 23.2311 24.7236 23.7415C23.5611 25.6412 20.8014 25.5656 19.7902 23.5997C19.5066 23.0421 19.4405 22.0119 19.6484 21.3787C20.1682 19.8004 22.0206 19.0537 23.5517 19.8004Z"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+const hovering = ref(false);
+defineProps({
+  color: { type: String as PropType<string>, default: '' },
+  hoverColor: { type: String as PropType<string>, default: '' },
+  size: { type: String as PropType<string>, default: '' },
+  margin: { type: String as PropType<string>, default: '0' },
+  iconClass: { type: String as PropType<string>, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.hidden {
+  display: none;
+}
+.icon {
+  width: $icon-width;
+  height: $icon-height;
+  fill: $icon-color;
+  transition: $icon-transition;
+}
+
+.icon:hover {
+  fill: $icon-hover-color;
+}
+</style>

package/src/components/Icons/IconArrowLeft.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    class="icon"
+    :class="iconClass"
+    :style="{
+      margin: margin,
+      width: size,
+      height: size,
+    }"
+  >
+    <use xlink:href="#arrow-left"></use>
+  </svg>
+
+  <svg width="0" height="0" class="hidden">
+    <symbol id="arrow-left" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+      <path
+        d="M13.4323 2.0816C13.3788 2.0909 13.2951 2.12113 13.2462 2.14904C13.1997 2.17462 11.5439 3.85601 9.56715 5.8816C6.70668 8.81648 5.96017 9.59322 5.90436 9.69787C5.84622 9.8095 5.83691 9.85601 5.83691 9.99787C5.83691 10.1397 5.84622 10.1886 5.90436 10.2979C6.00436 10.4886 13.102 17.7746 13.2764 17.8653C13.3695 17.9142 13.423 17.9258 13.5555 17.9258C13.916 17.9235 14.1788 17.6583 14.1788 17.2932C14.1788 17.0374 14.1392 16.9769 13.623 16.4467C13.3695 16.1862 11.8555 14.6328 10.2555 12.9909C8.65552 11.349 7.35087 9.99787 7.35552 9.9909C7.36017 9.9816 8.86715 8.43276 10.7044 6.54904C12.5416 4.66532 14.0671 3.08392 14.0951 3.03508C14.2392 2.79555 14.1951 2.45834 13.9927 2.25834C13.8462 2.1095 13.6323 2.04206 13.4323 2.0816Z"
+        fill="currentColor"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: { type: String, default: '' },
+  margin: { type: String, default: '0' },
+  iconClass: { type: String, required: false, default: '' },
+});
+</script>
+
+<style lang="scss" scoped>
+.hidden {
+  display: none;
+}
+</style>