sprof 0.1.0

package/src/components/molecules/PAdd/PAdd.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    class="add-block"
+    :style="{
+      margin: margin,
+      background: background,
+      padding: padding,
+    }"
+  >
+    <PSticky :top="top" :z-index="zIndex">
+      <slot name="title" />
+    </PSticky>
+    <div class="add-block_body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  background: {
+    type: String,
+    required: false,
+    default: 'inherit',
+  },
+  margin: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  padding: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  top: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  zIndex: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.add-block {
+  position: relative;
+  box-sizing: border-box;
+  border: 1px solid;
+  border-color: var(--border-color-default);
+  min-height: 10px;
+}
+
+.add-block_body {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+}
+</style>

package/src/components/molecules/PAdd/PContainer.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    class="add-block"
+    :style="{
+      margin: margin,
+      background: background,
+      padding: padding,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  background: {
+    type: String,
+    required: false,
+    default: 'inherit',
+  },
+  margin: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  padding: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  top: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  zIndex: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.add-block {
+  position: relative;
+  box-sizing: border-box;
+  //   border-radius: 5px;
+  border: 1px solid;
+  //   border-right: 1px solid;
+  border-color: var(--border-color);
+  //   background: var(--input-background);
+  min-height: 10px;
+  background: #fff;
+}
+
+.add-block_body {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+  background: #fff;
+}
+</style>

package/src/components/molecules/PAdd/PContainerStickyHead.vue

@@ -0,0 +1,51 @@
+<template>
+  <PContainer>
+    <PSticky :top="top" :z-index="zIndex">
+      <slot name="title" />
+    </PSticky>
+    <div class="add-block_body">
+      <slot />
+    </div>
+  </PContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  background: {
+    type: String,
+    required: false,
+    default: 'inherit',
+  },
+  margin: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  padding: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  top: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  zIndex: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.add-block_body {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+  background: #fff;
+}
+</style>

package/src/components/molecules/PDel/PDel.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="del-block"
+    :style="{
+      margin: margin,
+      background: background,
+      padding: padding,
+    }"
+  >
+    <div class=".del-block_title">
+      <slot name="title" />
+    </div>
+    <div class="del-block_body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  background: {
+    type: String,
+    required: false,
+    default: 'inherit',
+  },
+  margin: {
+    type: String,
+    required: false,
+    default: '10px 10px 10px 50px',
+  },
+  padding: {
+    type: String,
+    required: false,
+    default: '10px',
+  },
+  top: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  zIndex: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.del-block {
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 5px;
+  border: 1px solid;
+  border-color: var(--border-color-default);
+  min-height: 10px;
+}
+
+.del-block_title {
+  width: 100%;
+}
+
+.del-block_body {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.del-block:hover {
+  cursor: pointer;
+  box-shadow: 0px 0px 1px 2px var(--border-color-default, grey);
+}
+</style>

package/src/components/organisms/AuthForm.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="auth-card" :style="{ width: width, margin: margin, padding: padding }">
+    <ModalTitle :text="PHelp.AuthForm.GetTitle()" />
+    <!-- <div class="auth-card-header">
+      {{ PHelp.AuthForm.GetTitle() }}
+    </div> -->
+    <div>
+      <PInput
+        v-if="PHelp.AuthForm.Email().show(PHelp.AuthForm.Status())"
+        v-model="PHelp.AuthForm.Email().email"
+        placeholder="Имя пользователя"
+      >
+        <IconUser size="24px" />
+      </PInput>
+      <PInput
+        v-if="PHelp.AuthForm.Password().show(PHelp.AuthForm.Status())"
+        v-model="PHelp.AuthForm.Password().password"
+        placeholder="Пароль"
+        margin="10px 0 0 0"
+      >
+        <IconPassword size="24px" />
+        <!-- <template #right> -->
+        <!--   <PButton type="primary" skin="text_ano" text="Забыли пароль?" width="124px" margin="0 0 0 5px" /> -->
+        <!-- </template> -->
+      </PInput>
+      <PInput
+        v-if="PHelp.AuthForm.PasswordRepeat().show(PHelp.AuthForm.Status())"
+        v-model="PHelp.AuthForm.PasswordRepeat().text"
+        prop="email"
+        label="Введите email"
+        placeholder="Имя пользователя"
+      />
+      <div class="btn-group">
+        <PButton
+          v-for="btn in buttons"
+          :key="btn.getStatus()"
+          :disabled="blockBtn"
+          type="primary"
+          skin="base"
+          :text="btn.label"
+          :color="btn.isSubmit ? 'blue' : 'grey'"
+          margin="10px 0 0 0"
+          width="100%"
+          height="52px"
+          @click="authButtonClick(btn)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import AuthButton from '@/services/classes/AuthButton';
+import AuthStatuses from '@/services/interfaces/AuthStatuses';
+
+defineProps({
+  width: {
+    type: String as PropType<string>,
+    default: '300px',
+  },
+  margin: {
+    type: String as PropType<string>,
+    default: 'auto',
+  },
+  padding: {
+    type: String as PropType<string>,
+    default: '60px 100px',
+  },
+});
+
+const form = PHelp.AuthForm;
+const blockBtn = ref(false);
+// const emailRef = ref();
+// const passwordRef = ref();
+
+const emits = defineEmits(['action']);
+const buttons = computed(() => form.GetAuthButtons());
+
+const registration = async () => {
+  form.Reset();
+  await AuthStore.Register();
+  form.SetStatus(AuthStatuses.Login);
+};
+
+const login = async () => {
+  await AuthStore.Login();
+  form.Reset();
+};
+
+const restore = async () => {
+  form.Reset();
+  await Router.To('/');
+};
+
+const refresh = async () => {
+  form.Reset();
+  await Router.To('/');
+  PHelp.Auth.Logout();
+};
+
+const authButtonClick = async (authButton: AuthButton): Promise<void> => {
+  // authButton.off();
+  blockBtn.value = true;
+  if (!authButton.isSubmit) {
+    // authButton.on();
+    blockBtn.value = false;
+    return form.SetStatus(authButton.getStatus());
+  }
+
+  const errors = form.GetErrors();
+  if (errors.length > 0) {
+    PHelp.Notification.Error(errors.join(', '));
+    blockBtn.value = false;
+    return;
+  }
+
+  try {
+    PHelp.Loading.Show();
+    // await Store.Dispatch(`auth/${form.GetAction()}`);
+    PHelp.Loading.Hide();
+
+    PHelp.Notification.Success(form.GetSuccessMessage());
+  } catch (error) {
+    PHelp.Loading.Hide();
+    blockBtn.value = false;
+    return;
+  }
+  try {
+    switch (form.Status()) {
+      case AuthStatuses.Login:
+        await login();
+        break;
+
+      case AuthStatuses.Register:
+        await registration();
+        break;
+
+      case AuthStatuses.Restore:
+        await restore();
+        break;
+
+      case AuthStatuses.Refresh:
+        await refresh();
+        break;
+      default:
+        break;
+    }
+    blockBtn.value = false;
+    authButton.on();
+    emits('action');
+  } catch (error) {
+    blockBtn.value = false;
+    authButton.on();
+    return;
+  }
+};
+
+onBeforeUnmount(() => {
+  form.Reset();
+});
+</script>
+
+<style scoped lang="scss">
+.btn-group {
+  display: block;
+  margin: 40px 0 0 0;
+}
+
+.btn {
+  color: #409efe;
+  border: none;
+  width: 100%;
+  height: 40px;
+  text-transform: none;
+  // text-transform: uppercase !important;
+}
+
+.btn:hover {
+  box-shadow: none;
+  color: #006fe1;
+}
+
+.btn-active {
+  background: #ddf2f9;
+  color: #409efe;
+  border-radius: 5px;
+  width: 100%;
+  height: 40px;
+  margin: 40px 0 10px 0;
+}
+
+.btn-active:hover {
+  box-shadow: none;
+  background: #409efe;
+  color: #ddf2f9;
+}
+
+.auth-card {
+  box-sizing: border-box;
+  margin: auto;
+  color: var(--font-color);
+  background: var(--palette-white);
+  border-radius: 8px;
+}
+
+.auth-card-header {
+  width: 100%;
+  font-size: 20px;
+  font-family: var(--base-font);
+  color: var(--font-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // text-transform: uppercase;
+  word-wrap: break-word;
+  word-break: break-all;
+  margin-bottom: 20px;
+}
+</style>

package/src/components/organisms/PModal.vue

@@ -0,0 +1,113 @@
+<template>
+  <div v-if="show" class="blur" @click="close" />
+  <div
+    v-if="show"
+    class="modal-w"
+    :style="{
+      maxWidth: width,
+      width: width,
+      margin: margin,
+      padding: padding,
+      top: top,
+    }"
+  >
+    <div v-if="closable" class="icon-box" @click="close">
+      <IconClose size="20px" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  showCloseDialog: { type: Boolean, required: false, default: false },
+  closable: { type: Boolean, required: false, default: false },
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: String,
+    default: '760px',
+  },
+  margin: {
+    type: String,
+    default: 'auto',
+  },
+  top: {
+    type: String,
+    default: '20vh',
+  },
+  padding: {
+    type: String,
+    default: 'var(--modal-window-padding)',
+  },
+  showClose: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(['save', 'close']);
+
+const escapeHandler = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    close();
+  }
+};
+
+onMounted(() => {
+  document.body.addEventListener('keydown', escapeHandler);
+});
+onBeforeUnmount(() => {
+  document.body.removeEventListener('keydown', escapeHandler);
+});
+
+const close = () => {
+  if (!props.closable) {
+    return;
+  }
+  emit('close');
+};
+</script>
+
+<style lang="scss" scoped>
+.blur {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #000000;
+  opacity: 0.3;
+  z-index: 1000;
+}
+
+.icon-box {
+  position: absolute;
+  top: 10px;
+  color: var(--font-color);
+  right: 10px;
+  &:hover {
+    color: var(--font-color-focus);
+    cursor: pointer;
+  }
+}
+
+.modal-w {
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1002;
+  border-radius: 5px;
+  overflow: hidden;
+  max-height: 70vh;
+  min-height: 40px;
+  background: var(--modal-window-background-color);
+  color: var(--base-font-color);
+}
+</style>

package/src/components/organisms/PTabs/ITab.ts

@@ -0,0 +1,5 @@
+export default interface ITab {
+  id?: string | number;
+  name: string;
+  slug?: string;
+}