sprof 0.0.2 → 0.0.10

package/src/components/PAutocomplete.vue

@@ -1,91 +0,0 @@
-<template>
-  <div class="container">
-    <PInput v-model="query" placeholder="Найти" @input="input">
-      <template #right>
-        <IconSearch />
-      </template>
-    </PInput>
-    <div v-if="query" class="result">
-      <ul class="list">
-        <li v-for="result in results" :key="result.value" @click="select(result)">{{ result.label }}</li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ISearchObject from '@/interfaces/ISearchObject';
-
-const emits = defineEmits(['select', 'input']);
-const props = defineProps({
-  modelValue: {
-    type: String as PropType<string>,
-    default: '',
-  },
-  searchFunc: {
-    type: Function,
-    default: () => {},
-  },
-  suggestions: {
-    type: Array<ISearchObject>,
-    default: [],
-  },
-});
-const query = ref(props.modelValue);
-
-defineOptions({ inheritAttrs: false });
-
-const results: Ref<ISearchObject[]> = ref([]);
-async function input() {
-  emits('input', query.value);
-  await fillResults();
-}
-
-async function fillResults() {
-  if (!props.searchFunc) {
-    return;
-  }
-  results.value = await props.searchFunc(query.value);
-}
-
-async function select(item: ISearchObject) {
-  emits('select', item);
-}
-</script>
-
-<style scoped>
-.container {
-  position: relative;
-  widows: 300px;
-  padding: 10px;
-  margin: auto;
-}
-
-.result {
-  position: absolute;
-  top: 50px;
-  left: 10px;
-  z-index: 10000;
-  width: calc(100% - 20px);
-  max-height: 200px;
-  /* border: $normal-border; */
-  background: #fff;
-  border-radius: 5px;
-  overflow: hidden;
-  overflow-y: auto;
-}
-
-.list {
-  list-style-type: none;
-  cursor: pointer;
-}
-
-.list li {
-  margin: 10px 0;
-}
-
-.list li:hover {
-  /* color: $main_blue; */
-  margin: 10px 0;
-}
-</style>

package/src/components/PDialog.vue

@@ -1,75 +0,0 @@
-<template>
-  <transition name="fade">
-    <div v-if="PHelp.Dialog.IsVisible()" :class="typeClass">
-      <MessageBody :title="PHelp.Dialog.GetTitle()" :text="PHelp.Dialog.GetText()" />
-      <div class="footer">
-        <PButton type="primary" :text="PHelp.Dialog.GetConfirmButtonText()" margin="10px 0 0 0" @click="PHelp.Dialog.Submit()" />
-        <PButton type="warning" :text="PHelp.Dialog.GetCancelButtonText()" margin="10px 0 0 0" @click="PHelp.Dialog.Cancel()" />
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script lang="ts" setup>
-const typeClass = computed(() => {
-  switch (PHelp.Dialog.GetType()) {
-    case 'info':
-      return 'message primary';
-    case 'success':
-      return 'message success';
-    case 'warning':
-      return 'message warning';
-    case 'error':
-      return 'message danger';
-    default:
-      return 'message neutral';
-  }
-});
-</script>
-<style scoped>
-.message {
-  position: fixed;
-  top: 0px;
-  left: 50%;
-  z-index: 9999;
-  transform: translateX(-50%);
-  width: 300px;
-  margin: 100px auto 0 auto;
-  border-radius: 5px;
-  box-sizing: border-box;
-  /* border: 1px solid $base-font-color; */
-  min-height: 50px;
-  max-width: 300px;
-  transition: 0.3s;
-  justify-content: center;
-  align-items: center;
-  /* box-shadow: $normal-shadow; */
-  padding: 20px;
-}
-
-.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>

package/src/components/PLoader.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class="blur" />
-  <div class="loader-container">
-    <div class="loader" style="--b: 20px; width: 200px; --n: 10"></div>
-  </div>
-</template>
-
-<script lang="ts" setup></script>
-
-<style scoped>
-.blur {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #000000;
-  opacity: 0.3;
-  z-index: 1002;
-}
-
-.loader-container {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1003;
-}
-
-.loader {
-  --b: 10px;
-  /* border thickness */
-  --n: 10;
-  /* number of dashes*/
-  --g: 10deg;
-  /* gap  between dashes*/
-  --c: #ffffff;
-  /* the color */
-
-  width: 30px;
-  /* size */
-  aspect-ratio: 1;
-  border-radius: 50%;
-  padding: 1px;
-  /* get rid of bad outlines */
-  background: conic-gradient(#0000, var(--c)) content-box;
-  --_m:
-    /* we use +/-1deg between colors to avoid jagged edges */ repeating-conic-gradient(
-      #0000 0deg,
-      #000 1deg calc(360deg / var(--n) - var(--g) - 1deg),
-      #0000 calc(360deg / var(--n) - var(--g)) calc(360deg / var(--n))
-    ),
-    radial-gradient(farthest-side, #0000 calc(98% - var(--b)), #000 calc(100% - var(--b)));
-  -webkit-mask: var(--_m);
-  mask: var(--_m);
-  -webkit-mask-composite: destination-in;
-  mask-composite: intersect;
-  animation: load 1s infinite steps(var(--n));
-}
-
-@keyframes load {
-  to {
-    transform: rotate(1turn);
-  }
-}
-</style>

package/src/components/PNotification.vue

@@ -1,79 +0,0 @@
-<template>
-  <transition name="fade">
-    <div v-if="PHelp.Notification.IsVisible()" :class="typeClass">
-      <MessageBody :title="PHelp.Notification.GetTitle()" :text="PHelp.Notification.GetText()" />
-    </div>
-  </transition>
-</template>
-
-<script lang="ts" setup>
-const typeClass = computed(() => {
-  switch (PHelp.Notification.GetType()) {
-    case 'info':
-      return 'message info';
-    case 'success':
-      return 'message success';
-    case 'warning':
-      return 'message warning';
-    case 'error':
-      return 'message error';
-    default:
-      return 'message neutral';
-  }
-});
-</script>
-<style scoped>
-.message {
-  position: fixed;
-  top: 6px;
-  left: 50%;
-  z-index: 9999;
-  transform: translateX(-50%);
-  min-width: 280px;
-  max-width: 600px;
-  margin: 100px auto 0 auto;
-  border-radius: 5px;
-  box-sizing: border-box;
-  border: 1px solid;
-  min-height: 50px;
-  transition: 0.3s;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
-  padding: 20px;
-  font-size: var(--notification-font-size);
-  font-family: var(--base-font);
-}
-
-.info {
-  background: var(--notification-message-primary-background-color);
-  border-color: var(--notification-message-primary-border-color);
-  color: var(--notification-message-primary-font-color);
-}
-.success {
-  background: var(--notification-message-success-background-color);
-  border-color: var(--notification-message-success-border-color);
-  color: var(--notification-message-success-font-color);
-}
-.warning {
-  background: var(--notification-message-warning-background-color);
-  border-color: var(--notification-message-warning-border-color);
-  color: var(--notification-message-warning-font-color);
-}
-.error {
-  background: var(--notification-message-error-background-color);
-  border-color: var(--notification-message-error-border-color);
-  color: var(--notification-message-error-font-color);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>

package/src/components/PPagination.vue

@@ -1,171 +0,0 @@
-<template>
-  <div style="display: flex; justify-content: center; width: 100%">
-    <div
-      class="pag-container"
-      :style="{
-        justifyContent: justifyContent,
-      }"
-    >
-      <div class="pag-number">
-        <PButton skin="pag" :type="notActiveOrNeutral(paginator.curPage === 1)" @click="currentChange(paginator.curPage - 1)">
-          <ArrowLeft />
-        </PButton>
-        <ul class="pag-ul">
-          <li>
-            <PButton skin="pag" :type="activeOrNeutral(paginator.curPage === 1)" text="1" @click="currentChange(1)" />
-          </li>
-          <li v-if="paginator.pagesCount() > 8 && paginator.curPage > 4" @mouseenter="hoveringL = true" @mouseleave="hoveringL = false">
-            <PButton skin="pag" type="neutral" @click="currentChange(paginator.curPage - 5)">
-              <DoubleArrowLeft v-if="hoveringL" />
-              <EllipsisSvg v-else />
-            </PButton>
-          </li>
-          <li v-for="num in pagesNums" :key="num">
-            <PButton skin="pag" :type="activeOrNeutral(num === paginator.curPage)" :text="num" @click="currentChange(num)" />
-          </li>
-          <li
-            v-if="paginator.pagesCount() >= 8 && paginator.curPage < paginator.pagesCount() - 3"
-            @mouseenter="hoveringR = true"
-            @mouseleave="hoveringR = false"
-          >
-            <PButton skin="pag" type="neutral" @click="currentChange(paginator.curPage + 5)">
-              <DoubleArrowRight v-if="hoveringR" />
-              <EllipsisSvg v-else />
-            </PButton>
-          </li>
-          <li v-if="paginator.pagesCount() > 1">
-            <PButton
-              skin="pag"
-              :type="activeOrNeutral(paginator.pagesCount() === paginator.curPage)"
-              :text="paginator.pagesCount()"
-              @click="currentChange(paginator.pagesCount())"
-            />
-          </li>
-        </ul>
-        <PButton
-          skin="pag"
-          :type="notActiveOrNeutral(paginator.curPage === paginator.pagesCount())"
-          @click="currentChange(paginator.curPage + 1)"
-        >
-          <ArrowRight />
-        </PButton>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import IStorePaginator from '@/interfaces/IStorePaginator';
-
-const props = defineProps({
-  showConfirm: {
-    type: Boolean,
-    default: false,
-  },
-  justifyContent: {
-    type: String,
-    default: 'center',
-  },
-  store: {
-    type: Object as PropType<IStorePaginator>,
-    required: true,
-  },
-});
-
-const activeOrNeutral = (isActive: boolean) => (isActive ? 'active' : 'neutral');
-const notActiveOrNeutral = (notActive: boolean) => (notActive ? 'not-active' : 'neutral');
-const paginator = PHelp.Paginator;
-
-const hoveringL = ref(false);
-const hoveringR = ref(false);
-
-const emit = defineEmits(['cancel', 'save']);
-paginator.count = props.store.Count();
-
-const currentChange = async (toPage: number) => {
-  if (toPage === paginator.curPage) {
-    return;
-  }
-  if (toPage < 1) {
-    toPage = 1;
-  }
-  if (toPage > paginator.pagesCount()) {
-    toPage = paginator.pagesCount();
-  }
-  if (!props.showConfirm) {
-    return await setPage(toPage, true);
-  }
-
-  PHelp.Dialog.Save()
-    .then(async () => {
-      emit('save');
-      await setPage(toPage, true);
-    })
-    .catch(async () => {
-      PHelp.Notification.Warning('Изменения не были сохранены');
-      emit('cancel');
-      await setPage(toPage, true);
-    });
-};
-
-const setPage = async (pageNum: number, load: boolean): Promise<void> => {
-  paginator.setCurPage(pageNum);
-  FTSP.Get().p.offset = (pageNum - 1) * paginator.limit;
-  if (load) {
-    await props.store.FTSP();
-  }
-  scrollToBack();
-};
-
-const pagesNums = computed(() => {
-  const pc = paginator.pagesCount();
-  if (pc < 8) {
-    return Arrays.GenerateNumsRange(2, pc - 1).filter((p: number) => p < pc && p > 1);
-  }
-  return Arrays.GenerateNumsRange(paginator.curPage - 2, paginator.curPage + 3).filter((p: number) => p < pc && p > 1);
-});
-
-const scrollToBack = () => {
-  const table = document.querySelector('.el-table__body-wrapper');
-  const list = document.querySelector('#list');
-  if (table) {
-    table.scrollTo({ top: 0 });
-  } else if (list) {
-    list.scrollTo({ top: 0 });
-  }
-};
-
-onBeforeUnmount(() => {
-  FTSP.Get().p.drop();
-});
-</script>
-
-<style scoped>
-.pag-container {
-  display: flex;
-  align-items: center;
-  height: 50px;
-  width: 100%;
-}
-
-.pag-number {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: auto;
-  max-width: 300px;
-  max-height: 32px;
-}
-
-.pag-ul {
-  display: flex;
-  justify-content: center;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-.registers-tooltip:hover {
-  cursor: pointer;
-}
-</style>

package/src/components/PhoneForm.vue

@@ -1,178 +0,0 @@
-<template>
-  <PInput v-model="model.number" @blur="update" />
-  <PInput v-model="model.description" @blur="update" />
-</template>
-
-<script setup lang="ts">
-import Phone from '@/classes/Phone';
-
-const model: Ref<Phone> = defineModel<Phone>() as Ref<Phone>;
-
-const update = async () => {
-  await PhonesStore.Update(model.value);
-};
-</script>
-
-<style scoped>
-.admin-add {
-  border: none;
-  background: inherit;
-  color: #00b5a4;
-  transition: 0.3s;
-  cursor: pointer;
-}
-
-/* .admin-add:hover { */
-/*   color: darken($color: #00b5a4, $amount: 10%); */
-/* } */
-
-.admin-del {
-  position: absolute;
-  top: 23px;
-  right: 36px;
-  border: none;
-  background: inherit;
-  color: #a3a9be;
-  transition: 0.3s;
-  cursor: pointer;
-}
-
-/* .admin-del:hover { */
-/*   color: darken($color: #cf3d19, $amount: 5%); */
-/* } */
-
-.bottom-buttons {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-right: 15px;
-}
-
-.contact-container {
-  width: calc(100% - 62px);
-  position: relative;
-  padding: 0 10px;
-  border: 1px solid #c3c3c3;
-  border-radius: 5px;
-  margin: 0px 20px 20px 20px;
-  background: #dff2f8;
-}
-
-.contact-container-item {
-  position: relative;
-  width: calc(100% - 42px);
-  margin: 0px 10px 20px 10px;
-  border: 1px solid #c3c3c3;
-  border-radius: 5px;
-  padding: 12px 10px;
-  background: #f9fafb;
-}
-
-.list-number {
-  position: absolute;
-  top: 20px;
-  right: 10px;
-  width: 22px;
-  height: 22px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  background: #1979cf;
-  border-radius: 20px;
-}
-
-.title {
-  font-family: 'Open Sans', sans-serif;
-  font-size: 14px;
-  color: #c4c4c4;
-  margin: 10px;
-}
-
-:deep(.el-form-item__content) {
-  width: 100%;
-}
-
-:deep(.el-input__inner) {
-  border-radius: 40px;
-  padding-left: 25px;
-  height: 32px;
-  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: #343e5c;
-  font-size: 15px;
-  font-weight: bold;
-  margin-right: 5px;
-}
-
-.el-select {
-  width: 100%;
-}
-
-:deep(.el-input__prefix) {
-  left: 230px;
-  top: -3px;
-}
-
-:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
-  width: 100%;
-}
-
-:deep(.el-input__icon) {
-  color: #343e5c;
-}
-
-:deep(.el-input__suffix) {
-  top: -3px;
-}
-
-:deep(.el-form-item__label) {
-  font-size: 12px;
-  color: #a3a9be;
-  padding: 0 !important;
-  text-transform: uppercase;
-  margin-left: 5px;
-  height: 30px;
-}
-
-:deep(.el-input__prefix) {
-  left: auto;
-  right: 10px;
-}
-
-:deep(.el-form-item) {
-  margin-bottom: 10px;
-}
-
-@media screen and (max-width: 400px) {
-  .contact-container {
-    width: calc(100% - 42px);
-    margin: 0px 10px 20px 10px;
-  }
-
-  .contact-container-item {
-    width: calc(100% - 22px);
-    margin: 0px 0px 20px 0px;
-  }
-
-  .admin-del {
-    padding: 1px 0px;
-  }
-
-  .bottom-buttons {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-right: 5px;
-  }
-}
-</style>