sprof 0.0.2 → 0.0.11

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

@@ -1,131 +0,0 @@
-/* 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

@@ -1,83 +0,0 @@
-@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

@@ -1,78 +0,0 @@
-@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

@@ -1,44 +0,0 @@
-/* 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

@@ -1,88 +0,0 @@
-/* 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

@@ -1,88 +0,0 @@
-/* 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

@@ -1,107 +0,0 @@
-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

@@ -1,92 +0,0 @@
-<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>