sprof 0.1.0

package/src/components/atoms/PSelect/PSelect.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="text-field" :style="{ margin: margin, padding: padding, width: width }">
+    <label v-if="label" class="text-field__label" :for="label">
+      {{ label }}
+    </label>
+    <div class="field">
+      <div class="left-field">
+        <slot name="left" />
+      </div>
+      <div class="sl" @mouseover="showClearIcon = true" @mouseleave="showClearIcon = false">
+        <div v-if="clearable" v-show="showClearIcon" class="clear" @click="clear">
+          <IconClose margin="0" />
+        </div>
+        <div class="arrow">
+          <IconSelectArrow margin="2px 2px 0 0" />
+        </div>
+        <select v-bind="$attrs" v-model="model" class="text-field__input" @change="select">
+          <option selected hidden>{{ placeholder }}</option>
+          <slot />
+        </select>
+      </div>
+      <div class="right-field">
+        <slot name="right" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconClose from '@/services/components/Icons/IconClose.vue';
+
+const model: Ref<unknown> = defineModel<unknown>();
+const ph: Ref<boolean> = ref(true);
+const emits = defineEmits(['change', 'clear']);
+defineOptions({ inheritAttrs: false });
+
+const showClearIcon = ref(false);
+
+defineProps({
+  label: { type: String, default: '', required: false },
+  placeholder: { type: String, default: '', required: false },
+  value: { type: String, default: '', required: false },
+  readonly: { type: Boolean, default: false, required: false },
+  disabled: { type: Boolean, default: false, required: false },
+  margin: { type: String, required: false, default: '' },
+  padding: { type: String, required: false, default: '' },
+  clearable: { type: Boolean, required: false, default: true },
+  width: { type: String, required: false, default: '' },
+});
+
+const select = () => {
+  ph.value = false;
+  emits('change', model.value);
+};
+const clear = () => {
+  emits('clear', undefined);
+  emits('change', undefined);
+  ph.value = true;
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+option {
+  padding: 0;
+}
+
+.field {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  background: var(--input-background);
+  border-radius: 100px;
+  border: 1px solid;
+  border-radius: var(--input-field-borderRadius-default);
+  border-color: var(--input-border-color);
+  padding: var(--input-padding-default);
+  margin: var(--input-margin-default);
+  overflow: hidden;
+}
+
+.sl {
+  width: 100%;
+  position: relative;
+}
+
+.right-field {
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  width: auto;
+}
+
+.left-field {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: auto;
+}
+
+.text-field {
+  width: var(--input-width-default);
+  box-sizing: border-box;
+}
+
+.text-field__label {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  width: 100%;
+  font-family: var(--base-font);
+  color: var(--input-label-color);
+  font-size: var(--button-font-size-default);
+  margin: var(--input-labal-margin);
+}
+
+.text-field__input {
+  width: 100%;
+  font-size: var(--button-font-size-default);
+  font-family: var(--base-font);
+  background: var(--input-background);
+  color: var(--input-font-color);
+  margin: 0;
+  padding: 9px 40px 6px 0px;
+  border: none;
+  cursor: pointer;
+}
+
+.text-field__input::placeholder {
+  font-family: var(--base-font);
+  font-size: var(--button-font-size-default);
+  color: var(--input-placeholder-color);
+}
+
+.text-field__input:focus {
+  color: var(--input-focus-color);
+  outline: 0;
+}
+
+.text-field__input:disabled,
+.text-field__input[readonly] {
+  background-color: var(--input-readonly-background);
+  opacity: 1;
+}
+
+.clear {
+  position: absolute;
+  top: calc(50%);
+  transform: translateY(-50%);
+  right: 10px;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--input-background);
+  color: var(--input-font-color);
+  transition: 0;
+  cursor: pointer;
+}
+
+.arrow {
+  position: absolute;
+  top: calc(50%);
+  transform: translateY(-50%);
+  right: 10px;
+  z-index: 9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--input-background);
+  color: var(--input-font-color);
+  transition: 0;
+  cursor: pointer;
+}
+
+select {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+</style>

package/src/components/atoms/PSelect/select-arrow-down.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="20" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.08417 4.43062C2.86268 4.4769 2.70731 4.56285 2.52549 4.74467C2.29408 4.97607 2.20152 5.2174 2.22136 5.55459C2.25111 6.0207 1.96681 5.70996 6.78995 10.5397C9.18995 12.9463 11.2263 14.9662 11.309 15.029C11.5238 15.1843 11.7123 15.2471 11.99 15.2505C12.4693 15.2538 12.109 15.581 17.1106 10.5728C22.0891 5.58764 21.7288 5.98103 21.7255 5.505C21.7255 5.37607 21.7023 5.21078 21.6726 5.13145C21.5106 4.68186 21.0511 4.38434 20.5817 4.4174C20.1519 4.44715 20.4263 4.19591 16.0164 8.60252L11.9833 12.629L8.06598 8.71161C5.91061 6.55624 4.0726 4.73475 3.98003 4.66202C3.71227 4.45376 3.38499 4.36781 3.08417 4.43062Z" fill="currentColor"/>
+    <path d="M9.69602 16.8994C9.70593 16.9292 9.72577 17.0184 9.73569 17.1044C9.76213 17.2664 9.7985 17.2994 9.83486 17.1903C9.84478 17.154 9.89106 17.1143 9.93734 17.1044C10.0464 17.078 10.0365 17.0548 9.87453 16.9589C9.6861 16.8465 9.67288 16.8432 9.69602 16.8994Z" fill="currentColor"/>
+</svg>

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

@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils';
+
+import PSticky from './PSticky.vue';
+
+describe('PSticky', () => {
+  //1. Тест рендеринга контента слота
+  test('renders slot content', () => {
+    const wrapper = mount(PSticky, {
+      slots: {
+        default: '<div class="sticky-content">Sticky Content</div>',
+      },
+    });
+
+    // Проверяем, что слот с контентом рендерится
+    expect(wrapper.find('.sticky-content').exists()).toBe(true);
+    expect(wrapper.text()).toContain('Sticky Content');
+  });
+
+  //2. Тест применения пользовательских стилей
+  test('applies custom styles', () => {
+    const wrapper = mount(PSticky, {
+      props: {
+        zIndex: 10,
+        top: '50px',
+        background: 'blue',
+        padding: '100px',
+      },
+    });
+
+    const stickyBlock = wrapper.find('.sticky-block');
+
+    // Проверяем, что стили применены
+    expect(stickyBlock.attributes('style')).toContain('z-index: 11');
+    expect(stickyBlock.attributes('style')).toContain('top: 50px');
+    expect(stickyBlock.attributes('style')).toContain('background: blue');
+    expect(stickyBlock.attributes('style')).toContain('padding: 100px');
+  });
+  //3. Тест применения background по умолчанию (inherit)
+  test('applies custom styles', () => {
+    const wrapper = mount(PSticky, {});
+
+    const stickyBlock = wrapper.find('.sticky-block');
+
+    // Проверяем, что background: inherit
+    expect(stickyBlock.attributes('style')).toContain('background: inherit');
+  });
+
+  //4. Тест применения пользовательских стилей: тень включена
+  test('applies correct styles when shadow is enabled', () => {
+    const wrapper = mount(PSticky, {
+      props: {
+        shadow: true,
+      },
+    });
+
+    const body = wrapper.find('.sticky-block');
+    expect(body.attributes('style')).toContain('box-shadow: 0 0 5px 2px rgba(0,0,0,0.3)');
+  });
+  //5. Тест применения пользовательских стилей: тень выключена
+  test('applies correct styles when shadow is disabled', () => {
+    const wrapper = mount(PSticky, {
+      props: {
+        shadow: false,
+      },
+    });
+
+    const body = wrapper.find('.sticky-block');
+    expect(body.attributes('style')).toContain('box-shadow: none');
+  });
+});

package/src/components/atoms/PSticky/PSticky.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="sticky-block"
+    :style="{
+      zIndex: 1 + zIndex,
+      top: top,
+      background: background,
+      padding: padding,
+      boxShadow: shadow ? '0 0 5px 2px rgba(0,0,0,0.3)' : 'none',
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  shadow: { type: Boolean, default: false },
+  zIndex: { type: Number, default: 0 },
+  background: { type: String, default: 'inherit' },
+  padding: { type: String, default: '0' },
+  top: { type: String, default: '0' },
+});
+</script>
+
+<style lang="scss" scoped>
+.sticky-block {
+  box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  left: 0;
+  border-bottom: 1px solid;
+  border-color: var(--border-color-default);
+  --base-font: 'Inter Tight', Roboto, Helvetica, sans-serif;
+  --font-size-default: var(--typography-font-size-l);
+}
+</style>

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

@@ -0,0 +1,58 @@
+import { mount } from '@vue/test-utils';
+
+import PString from './PString.vue';
+
+describe('PString', () => {
+  // Тест рендеринга текста строки
+  test('renders string text', () => {
+    const wrapper = mount(PString, {
+      props: {
+        string: 'Test String',
+      },
+    });
+
+    // Проверяем, что текст отображается
+    expect(wrapper.text()).toBe('Test String');
+  });
+
+  // Тест события клика на строке
+  test('emits click event on string click', async () => {
+    const wrapper = mount(PString);
+
+    const stringDiv = wrapper.find('.string');
+    await stringDiv.trigger('click');
+
+    // Проверяем, что событие клика сработало
+    expect(wrapper.emitted('click')).toBeTruthy();
+  });
+
+  // Тест применения пользовательских стилей
+  test('applies custom styles', () => {
+    const wrapper = mount(PString, {
+      props: {
+        color: 'red',
+        fontSize: '20px',
+      },
+    });
+
+    const stringDiv = wrapper.find('.string');
+
+    // Проверяем, что стили применены
+    expect(stringDiv.attributes('style')).toContain('color: red');
+    expect(stringDiv.attributes('style')).toContain('font-size: 20px');
+  });
+
+  // Тест отображения HTML, если isHtml = true
+  test('renders HTML content when isHtml is true', () => {
+    const wrapper = mount(PString, {
+      props: {
+        isHtml: true,
+        string: '<span class="html-content">HTML Content</span>',
+      },
+    });
+
+    // Проверяем, что HTML содержимое рендерится
+    expect(wrapper.find('.html-content').exists()).toBe(true);
+    expect(wrapper.html()).toContain('<span class="html-content">HTML Content</span>');
+  });
+});

package/src/components/atoms/PString/PString.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="string" :style="styleObject" :class="customClass" @click="$emit('click')">
+    <span v-if="isHtml" v-html="string" />
+    <span v-else>{{ string }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineEmits(['click']);
+
+const props = defineProps({
+  string: { type: String, required: false, default: '' },
+  color: { type: String, required: false, default: 'var(--font-color)' },
+  fontSize: { type: String, required: false, default: 'var(--font-size-default)' },
+  fontWeight: { type: String, required: false, default: '' },
+  background: { type: String, required: false, default: '' },
+  padding: { type: String, required: false, default: '' },
+  width: { type: String, required: false, default: '' },
+  minWidth: { type: String, required: false, default: '' },
+  margin: { type: String, required: false, default: '' },
+  customClass: { type: String, required: false, default: '' },
+  justifyContent: { type: String, required: false, default: 'center' },
+  isHtml: { type: Boolean, required: false, default: false },
+});
+
+const styleObject = {
+  color: props.color,
+  fontSize: props.fontSize,
+  fontWeight: props.fontWeight,
+  background: props.background,
+  padding: props.padding,
+  width: props.width,
+  maxWidth: props.width,
+  minWidth: props.minWidth,
+  margin: props.margin,
+  justifyContent: props.justifyContent,
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/services/assets/styles/index.scss';
+
+.string {
+  box-sizing: border-box;
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  background: inherit;
+  font-family: var(--base-font);
+  font-size: var(--font-size-default, 16px);
+  -webkit-user-select: none;
+  /* Safari */
+  -ms-user-select: none;
+  /* IE 10 and IE 11 */
+  user-select: none;
+  /* Standard syntax */
+}
+</style>

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

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+
+import PInput from './PInput.vue';
+
+export default {
+  title: 'Atoms/PInput',
+  component: PInput,
+  argTypes: {
+    // disabled: { control: { type: 'boolean' } },
+    text: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+  },
+
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    text: 'text',
+  },
+} as Meta<typeof PInput>;
+
+const Template: StoryObj<typeof PInput> = (args) => ({
+  components: { PInput },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="display: flex; flex-direction: row; gap: 12px;">
+      <PInput />
+    </div>`,
+});
+
+export const Input = Template.bind({});
+Input.args = { placeholder: 'Placeholder', label: 'Label', text: 'text' };

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

@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils';
+
+import PTextarea from './PTextarea.vue';
+
+describe('PTextarea', () => {
+  //5. Тесты работы маски ввода
+  test.todo('applies mask if provided', async () => {
+    const wrapper = mount(PTextarea, {
+      props: {
+        mask: '###-###',
+      },
+    });
+
+    const input = wrapper.find('input');
+
+    // Симуляция ввода текста, который должен быть отформатирован по маске
+    await input.setValue('123456');
+
+    // Проверяем, что текст отображается с учётом маски
+    expect(input.element.value).toBe('123-456');
+  });
+});

package/src/components/atoms/PTextarea/PTextarea.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="text-field" :style="{ margin: margin, padding: padding }">
+    <label v-if="label" class="text-field__label" :for="label">
+      {{ label }}
+    </label>
+    <div
+      class="field"
+      :style="{
+        borderColor: borderColor,
+      }"
+    >
+      <div class="left-field">
+        <slot />
+      </div>
+      <textarea
+        v-bind="$attrs"
+        v-model="model"
+        v-maska="mask"
+        class="text-field__input"
+        :style="{ color: color }"
+        @blur="$emit('blur', model)"
+        @input="$emit('input', model)"
+      />
+      <div class="right-field">
+        <slot name="right" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { vMaska } from 'maska/vue';
+defineEmits(['blur', 'input']);
+const model = defineModel<string>();
+
+defineProps({
+  label: { type: String, default: '', required: false },
+  margin: { type: String, required: false, default: '' },
+  padding: { type: String, default: '', required: false },
+  mask: { type: String, required: false, default: undefined },
+  borderColor: { type: String, default: 'var(--input-border-color)', required: false },
+  color: { type: String, default: 'var(--input-font-color)', required: false },
+});
+</script>
+
+<style scoped>
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.field {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  background: var(--input-background);
+  border-radius: 100px;
+  border: 1px solid;
+  padding: var(--input-padding-default);
+  margin: var(--input-margin-default);
+  overflow: hidden;
+}
+
+.right-field {
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  width: auto;
+}
+
+.left-field {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: auto;
+}
+
+.text-field {
+  width: var(--input-width-default);
+}
+
+.text-field__label {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  width: 100%;
+  font-family: var(--base-font);
+  color: var(--input-label-color);
+  font-size: var(--button-font-size-default);
+  margin: var(--input-labal-margin);
+}
+
+.text-field__input {
+  width: 100%;
+  font-size: var(--button-font-size-default);
+  font-family: var(--base-font);
+  background: var(--input-background);
+  margin: 0;
+  height: var(--input-height, 30px);
+  border: none;
+}
+
+.text-field__input::placeholder {
+  font-family: var(--base-font);
+  font-size: var(--button-font-size-default);
+  color: var(--input-placeholder-color);
+}
+
+.text-field__input:focus {
+  color: var(--input-focus-color);
+  outline: 0;
+}
+
+.text-field__input:disabled,
+.text-field__input[readonly] {
+  background-color: var(--input-readonly-background);
+  opacity: 1;
+}
+</style>