sprof 0.1.0

package/src/components/atoms/PButton/skins/p-button_base.css

@@ -0,0 +1,131 @@
+/* skin: base*/
+/* type: primary, success, warning, danger, neutral, disabled */
+
+.p-button_base {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* transition: ; */
+  text-align: center;
+  cursor: pointer;
+  overflow: hidden;
+  margin: 0;
+  padding: var(--button-primary-medium-whiteSpace-padding-vertical), var(--button-primary-medium-whiteSpace-padding-horizontal);
+  border-radius: var(--button-primary-medium-borderRadius-default);
+  width: 100%;
+  max-width: 300px;
+  min-width: 40px;
+  font-size: var(--button-font-size-default);
+  font-family: var(--base-font);
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.p-button_base_info {
+  border: 1px solid var(--button-info-background);
+  background: var(--button-info-background);
+  color: var(--button-info-font-color);
+}
+
+.p-button_base_info:hover {
+  background: var(--button-info-background-hovered);
+  border: 1px solid var(--button-info-background-hovered);
+}
+
+.p-button_base_primary {
+  border: 1px solid var(--button-primary-background);
+  background: var(--button-primary-background);
+  color: var(--button-primary-font-color);
+}
+
+.p-button_base_primary:hover {
+  background: var(--button-primary-background-hovered);
+  border: 1px solid var(--button-primary-background-hovered);
+}
+
+.p-button_base_additional {
+  border: 1px solid var(--button-additional-background);
+  background: var(--button-additional-background);
+  color: var(--button-additional-font-color);
+}
+
+.p-button_base_additional:hover {
+  background: var(--button-additional-background-hovered);
+  border: 1px solid var(--button-additional-background-hovered);
+}
+
+.p-button_base_success {
+  border: 1px solid var(--button-success-background);
+  background: var(--button-success-background);
+  color: var(--button-success-font-color);
+}
+
+.p-button_base_success:hover {
+  background: var(--button-success-background-hovered);
+  border: 1px solid var(--button-success-background-hovered);
+}
+
+.p-button_base_warning {
+  border: 1px solid var(--button-warning-background);
+  background: var(--button-warning-background);
+  color: var(--button-warning-font-color);
+}
+.p-button_base_warning:hover {
+  background: var(--button-warning-background-hovered);
+  border: 1px solid var(--button-warning-background-hovered);
+}
+
+.p-button_base_danger {
+  border: 1px solid var(--button-error-background);
+  background: var(--button-error-background);
+  color: var(--button-error-font-color);
+}
+
+.p-button_base_danger:hover {
+  background: var(--button-error-background-hovered);
+  border: 1px solid var(--button-error-background-hovered);
+}
+
+.p-button_base_neutral {
+  border: 1px solid var(--button-neutral-background);
+  background: var(--button-neutral-background);
+  color: var(--button-neutral-font-color);
+}
+
+.p-button_base_neutral:hover {
+  background: var(--button-neutral-background-hovered);
+  border: 1px solid var(--button-neutral-background-hovered);
+}
+
+.p-button_base_disabled {
+  border: 1px solid var(--button-neutral-background);
+  background: var(--button-neutral-background);
+  color: var(--button-neutral-font-color-disabled);
+  cursor: auto;
+}
+
+.p-button_base_disabled:hover {
+  background: var(--button-neutral-background);
+  border: 1px solid var(--button-neutral-font-color);
+}
+
+.p-button_base_xs {
+  min-height: 12px;
+  max-height: 12px;
+}
+
+.p-button_base_x {
+  min-height: 24px;
+  max-height: 24px;
+}
+
+.p-button_base_m {
+  min-height: 32px;
+  max-height: 32px;
+}
+.p-button_base_l {
+  min-height: 40px;
+  max-height: 40px;
+}

package/src/components/atoms/PButton/skins/p-button_filter.scss

@@ -0,0 +1,83 @@
+@import '../../../utils/index.scss';
+$percent: 4%;
+
+//skin: filter
+//type: primary, success, warning, danger, neutral, disabled
+
+.p-button_filter {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: $p-button-transition;
+  text-align: center;
+  cursor: pointer;
+  overflow: hidden;
+  margin: 0;
+  padding: 0 10px;
+  border-radius: 5px;
+  min-height: 36px;
+  max-height: 36px;
+  width: 100%;
+  max-width: $p-button-max-width;
+  min-width: $p-button-min-width;
+  font-size: 12px;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &_primary {
+    border: 1px solid $button_primary_color;
+    background: $button_primary_background;
+    color: $button_primary_color;
+    &:hover {
+      background: lighten($button_primary_background, $percent);
+    }
+  }
+
+  &_success {
+    border: 1px solid $button_success_color;
+    background: $button_success_background;
+    color: $button_success_color;
+    &:hover {
+      background: lighten($button_success_background, $percent);
+    }
+  }
+
+  &_warning {
+    border: 1px solid $button_warning_color;
+    background: $button_warning_background;
+    color: $button_warning_color;
+    &:hover {
+      background: lighten($button_warning_background, $percent);
+    }
+  }
+
+  &_danger {
+    border: 1px solid $button_danger_color;
+    background: $button_danger_background;
+    color: $button_danger_color;
+    &:hover {
+      background: lighten($button_danger_background, $percent);
+    }
+  }
+
+  &_neutral {
+    border: 1px solid $button_neutral_color;
+    background: $button_neutral_background;
+    color: $button_neutral_color;
+    &:hover {
+      background: lighten($button_neutral_background, $percent);
+    }
+  }
+
+  &_disabled {
+    border: 1px solid $button_disabled_color;
+    background: $button_disabled_background;
+    color: $button_disabled_color;
+    cursor: auto;
+    &:hover {
+      background: $button_disabled_background;
+    }
+  }
+}

package/src/components/atoms/PButton/skins/p-button_icon.scss

@@ -0,0 +1,78 @@
+@import '../../../utils/index.scss';
+
+//skin: icon
+//type: primary, success, warning, danger, neutral, disabled
+
+//button-auth
+.button_icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: $transition;
+  cursor: pointer;
+  min-width: 42px;
+  max-width: 42px;
+  min-height: 42px;
+  max-height: 42px;
+  border-radius: 5px;
+  margin: 0;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &_primary {
+    border: 1px solid $button_primary_color;
+    background: $button_primary_background;
+    color: $button_primary_color;
+    &:hover {
+      background: lighten($button_primary_background, $percent);
+    }
+  }
+
+  &_success {
+    border: 1px solid $button_success_color;
+    background: $button_success_background;
+    color: $button_success_color;
+    &:hover {
+      background: lighten($button_success_background, $percent);
+    }
+  }
+
+  &_warning {
+    border: 1px solid $button_warning_color;
+    background: $button_warning_background;
+    color: $button_warning_color;
+    &:hover {
+      background: lighten($button_warning_background, $percent);
+    }
+  }
+
+  &_danger {
+    border: 1px solid $button_danger_color;
+    background: $button_danger_background;
+    color: $button_danger_color;
+    &:hover {
+      background: lighten($button_danger_background, $percent);
+    }
+  }
+
+  &_neutral {
+    border: 1px solid $button_neutral_color;
+    background: $button_neutral_background;
+    color: $button_neutral_color;
+    &:hover {
+      background: lighten($button_neutral_background, $percent);
+    }
+  }
+
+  &_disabled {
+    border: 1px solid $button_disabled_color;
+    background: $button_disabled_background;
+    color: $button_disabled_color;
+    cursor: auto;
+    &:hover {
+      background: $button_disabled_background;
+    }
+  }
+}

package/src/components/atoms/PButton/skins/p-button_pag.css

@@ -0,0 +1,44 @@
+/* skin: pag (for pagination) */
+/* type: active, not-active, neutral */
+
+.p-button_pag {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  transition: var(--transition-default);
+  cursor: pointer;
+  min-width: 32px;
+  max-width: 32px;
+  min-height: 32px;
+  max-height: 32px;
+  border-radius: 3px;
+  margin: 0 4px;
+  font-family: var(--base-font);
+  font-size: var(--button-font-size-default);
+  overflow: hidden;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.p-button_pag_neutral {
+  background: var(--button-pagination-background);
+  color: var(--button-pagination-font-color);
+}
+
+.p-button_pag_neutral:hover {
+  background: var(--button-pagination-background);
+  color: var(--button-pagination-font-color-hovered);
+}
+
+.p-button_pag_active {
+  background: var(--button-pagination-background-pressed);
+  color: var(--button-pagination-font-color-pressed);
+}
+
+.p-button_pag_not-active {
+  background: var(--button-pagination-background);
+  color: var(--button-pagination-font-color-disabled);
+  cursor: not-allowed;
+}

package/src/components/atoms/PButton/skins/p-button_text.css

@@ -0,0 +1,88 @@
+/* skin: text )*/
+/* type: primary, additional, success, warning, danger, neutral, del */
+
+.p-button_text {
+  border: none;
+  margin: var(--button-primary-medium-whiteSpace-gap);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+  overflow: hidden;
+  padding: var(--button-primary-medium-whiteSpace-padding-vertical), var(--button-primary-medium-whiteSpace-padding-horizontal);
+  border-radius: none;
+  height: auto;
+  width: auto;
+  background: none;
+  font-family: var(--base-font);
+  font-size: var(--button-font-size-default);
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.p-button_text_info {
+  color: var(--button-info-background);
+}
+
+.p-button_text_info:hover {
+  color: var(--button-info-background-hovered);
+}
+
+.p-button_text_primary {
+  color: var(--button-primary-background);
+}
+
+.p-button_text_primary:hover {
+  color: var(--button-primary-background-hovered);
+}
+
+.p-button_text_additional {
+  color: var(--button-additional-background);
+}
+
+.p-button_text_additional:hover {
+  color: var(--button-additional-background-hovered);
+}
+
+.p-button_text_success {
+  color: var(--button-success-background);
+}
+
+.p-button_text_success:hover {
+  color: var(--button-success-background-hovered);
+}
+
+.p-button_text_warning {
+  color: var(--button-warning-background);
+}
+
+.p-button_text_warning:hover {
+  color: var(--button-warning-background-hovered);
+}
+
+.p-button_text_danger {
+  color: var(--button-error-background);
+}
+
+.p-button_text_danger:hover {
+  color: var(--button-error-background-hovered);
+}
+
+.p-button_text_neutral {
+  color: var(--button-neutral-background);
+}
+
+.p-button_text_neutral:hover {
+  color: var(--button-neutral-background-hovered);
+}
+
+.p-button_text_del {
+  color: var(--button-neutral-background);
+}
+
+.p-button_text_del:hover {
+  color: var(--button-error-background-hovered);
+}

package/src/components/atoms/PButton/skins/p-button_text_ano.css

@@ -0,0 +1,88 @@
+/* skin: text )*/
+/* type: primary, additional, success, warning, danger, neutral, del */
+
+.p-button_text_ano {
+  border: none;
+  margin: var(--button-primary-medium-whiteSpace-gap);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+  overflow: hidden;
+  padding: var(--button-primary-medium-whiteSpace-padding-vertical), var(--button-primary-medium-whiteSpace-padding-horizontal);
+  border-radius: none;
+  height: auto;
+  width: auto;
+  background: none;
+  font-family: var(--base-font);
+  font-size: var(--button-font-size-default);
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.p-button_text_ano_info {
+  color: var(--button-info-background);
+}
+
+.p-button_text_ano_info:hover {
+  color: var(--button-info-background-hovered);
+}
+
+.p-button_text_ano_primary {
+  color: var(--font-color);
+}
+
+.p-button_text_ano_primary:hover {
+  color: var(--font-color-focus);
+}
+
+.p-button_text_ano_additional {
+  color: var(--button-additional-background);
+}
+
+.p-button_text_ano_additional:hover {
+  color: var(--button-additional-background-hovered);
+}
+
+.p-button_text_ano_success {
+  color: var(--button-success-background);
+}
+
+.p-button_text_ano_success:hover {
+  color: var(--button-success-background-hovered);
+}
+
+.p-button_text_ano_warning {
+  color: var(--button-warning-background);
+}
+
+.p-button_text_ano_warning:hover {
+  color: var(--button-warning-background-hovered);
+}
+
+.p-button_text_ano_danger {
+  color: var(--button-error-background);
+}
+
+.p-button_text_ano_danger:hover {
+  color: var(--button-error-background-hovered);
+}
+
+.p-button_text_ano_neutral {
+  color: var(--button-neutral-background);
+}
+
+.p-button_text_ano_neutral:hover {
+  color: var(--button-neutral-background-hovered);
+}
+
+.p-button_text_ano_del {
+  color: var(--button-neutral-background);
+}
+
+.p-button_text_ano_del:hover {
+  color: var(--button-error-background-hovered);
+}

package/src/components/atoms/PCheckbox/PCheckBox.test.ts

@@ -0,0 +1,107 @@
+import { mount } from '@vue/test-utils';
+
+import PCheckBox from './PCheckBox.vue';
+
+describe('PCheckBox', () => {
+  describe('Given false v-model', () => {
+    const checked = false;
+    const wrapper = mount(PCheckBox, {
+      props: {
+        modelValue: checked,
+        'onUpdate:modelValue': (e: boolean) => wrapper.setProps({ modelValue: e }),
+      },
+    });
+    const checkbox = wrapper.find('input[type="checkbox"]');
+
+    describe('When clicked once', async () => {
+      // await checkbox.setValue(true);
+      await checkbox.trigger('click');
+      // await checkbox.trigger('');
+
+      test.todo('Then false become true', async () => {
+        expect(checked).toEqual(true);
+        // expect(wrapper.).toEqual(true);
+      });
+      // test('Then icon render', async () => {
+      //   expect(wrapper.classes()).toContain('check-icon');
+      // });
+    });
+  });
+});
+
+describe('PCheckBox', () => {
+  test('renders label when passed', () => {
+    const wrapper = mount(PCheckBox, {
+      props: {
+        label: 'Test Label',
+      },
+    });
+    const label = wrapper.find('.check-field__label');
+    expect(label.exists()).toBe(true);
+    expect(wrapper.text()).toContain('Test Label');
+  });
+
+  test('does not render label when not passed', () => {
+    const wrapper = mount(PCheckBox);
+    expect(wrapper.text()).toBe('');
+  });
+
+  test('applies padding and margin styles from props', () => {
+    const wrapper = mount(PCheckBox, {
+      props: {
+        padding: '10px',
+        margin: '5px',
+      },
+    });
+    const checkLine = wrapper.find('.check-line');
+    expect(checkLine.attributes('style')).toContain('padding: 10px');
+    expect(checkLine.attributes('style')).toContain('margin: 5px');
+  });
+
+  test('applies fontSize to label from props', () => {
+    const wrapper = mount(PCheckBox, {
+      props: {
+        fontSize: '18px',
+      },
+    });
+    const label = wrapper.find('.check-field__label');
+    expect(label.attributes('style')).toContain('font-size: 18px');
+  });
+
+  test('applies size and borderRadius styles to checkbox box', () => {
+    const wrapper = mount(PCheckBox, {
+      model: true,
+      props: {
+        size: '30px',
+        borderRadius: '5px',
+        value: true, // checkbox должен быть отмечен
+      },
+    });
+    const box = wrapper.find('.box');
+    expect(box.attributes('style')).toContain('width: 30px');
+    expect(box.attributes('style')).toContain('height: 30px');
+    expect(box.attributes('style')).toContain('border-radius: 5px');
+  });
+
+  test('renders check icon when model is true', () => {
+    const wrapper = mount(PCheckBox, {
+      model: true,
+      props: {
+        modelValue: true,
+      },
+    });
+
+    const icon = wrapper.find('.check-icon');
+    expect(icon.exists()).toBe(true);
+  });
+
+  test('does not render check icon when model is false', () => {
+    const wrapper = mount(PCheckBox, {
+      props: {
+        modelValue: false,
+      },
+    });
+    const icon = wrapper.find('.check-icon');
+    expect(icon.exists()).toBe(false);
+  });
+});

package/src/components/atoms/PCheckbox/PCheckBox.vue

@@ -0,0 +1,92 @@
+<template>
+  <div id="some" class="check-line" :style="{ padding: padding, margin: margin, maxWidth: width }">
+    <label class="check-field__label" :style="{ fontSize: fontSize }">
+      <input v-model="model" class="check-field__input" type="checkbox" :value="value" @change="change" />
+      <div id="abc" class="box" :style="{ width: size, height: size, borderRadius: borderRadius }">
+        <div v-if="model" class="check-icon" :style="{ width: size, height: size }">
+          <IconCheckDefault margin="auto" :size="size" />
+        </div>
+      </div>
+
+      {{ label }}
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const model = defineModel<boolean>();
+const emits = defineEmits(['change']);
+defineProps({
+  label: { type: String, default: '' },
+  fontSize: { type: String, default: '14px' },
+  value: { type: [String, Boolean], default: undefined },
+  size: { type: String, default: '22px' },
+  borderRadius: { type: String, default: '' },
+  padding: { type: String, default: '' },
+  margin: { type: String, default: '' },
+  width: { type: String, default: '' },
+});
+
+const change = () => {
+  emits('change', model.value);
+};
+</script>
+
+<style scoped>
+.check-line {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  display: flex;
+  justify-content: left;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 10px 0;
+}
+
+.box {
+  position: relative;
+  border: 1px solid;
+  border-color: var(--checkbox-border-color);
+  border-radius: var(--checkbox-border-radius-default);
+  box-sizing: border-box;
+  margin-right: 10px;
+}
+
+.check-icon {
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  padding: 0;
+}
+
+.check-field__label {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  font-family: var(--base-font);
+  color: var(--checkbox-label-color);
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+  cursor: pointer;
+}
+
+.check-field__label:hover {
+  color: var(--checkbox-border-color-hovered);
+}
+
+.check-field__label:hover > .box {
+  border-color: var(--checkbox-border-color-hovered);
+  color: var(--checkbox-border-color-hovered);
+}
+
+.check-field__input {
+  display: none;
+}
+</style>