@steroidsjs/bootstrap 3.0.0-beta.121 → 3.0.0-beta.123

package/content/Calendar/CalendarView.js

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var moment_1 = __importDefault(require("react-day-picker/moment"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 var react_day_picker_1 = __importStar(require("react-day-picker"));
@@ -81,6 +80,6 @@ function CalendarView(props) {
             else {
                 onDaySelect(day);
             }
-        }, fixedWeeks: true, month: month, firstDayOfWeek: 1, modifiers: modifiers, canChangeMonth: false, onDayClick: onDaySelect, selectedDays: selectedDays, numberOfMonths: numberOfMonths, localeUtils: moment_1["default"], locale: localeComponent.language })));
+        }, fixedWeeks: true, month: month, firstDayOfWeek: 1, modifiers: modifiers, canChangeMonth: false, onDayClick: onDaySelect, selectedDays: selectedDays, numberOfMonths: numberOfMonths, localeUtils: react_day_picker_1.LocaleUtils, locale: localeComponent.language })));
 }
 exports["default"] = CalendarView;

package/content/CalendarSystem/CalendarSystemModalView.js

@@ -11,21 +11,37 @@ var form_1 = require("@steroidsjs/core/ui/form");
 var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
 var react_1 = __importDefault(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var form_2 = require("@steroidsjs/core/actions/form");
+var ADD_EVENT_FORM_ID = 'AddEventForm';
 function CalendarSystemModalView(props) {
     var bem = (0, useBem_1["default"])('CalendarSystemModalView');
+    var dispatch = (0, hooks_1.useDispatch)();
     var eventInitialValues = react_1["default"].useMemo(function () { return props.eventInitialValues; }, [props.eventInitialValues]);
     var callOnEventSubmit = function (fields) {
         return eventInitialValues && !props.isCreate ? props.onEventSubmit(fields, eventInitialValues) : props.onEventSubmit(fields);
     };
-    return (react_1["default"].createElement(Modal_1["default"], { title: props.isCreate ? __('Новое событие') : __('Редактирование события'), onClose: props.onClose, className: bem.block(), shouldCloseOnEsc: true, shouldCloseOnOverlayClick: true },
-        react_1["default"].createElement(form_1.Form, { className: bem.element('default-form'), onSubmit: function (fields) {
+    var onCloseModal = react_1["default"].useCallback(function () {
+        props.onClose();
+        dispatch((0, form_2.formSetErrors)(ADD_EVENT_FORM_ID, {}));
+    }, []);
+    return (react_1["default"].createElement(Modal_1["default"], { title: props.isCreate ? __('Новое событие') : __('Редактирование события'), onClose: onCloseModal, className: bem.block(), shouldCloseOnEsc: true, shouldCloseOnOverlayClick: true },
+        react_1["default"].createElement(form_1.Form, { className: bem.element('default-form'), formId: ADD_EVENT_FORM_ID, onBeforeSubmit: function (data) {
+                if (!data.eventGroupId) {
+                    dispatch((0, form_2.formSetErrors)(ADD_EVENT_FORM_ID, {
+                        eventGroupId: [__('Поле обязательно для заполнения')]
+                    }));
+                    return false;
+                }
+                return data;
+            }, onSubmit: function (fields) {
                 callOnEventSubmit(fields);
-                props.onClose();
-            }, initialValues: eventInitialValues !== null && eventInitialValues !== void 0 ? eventInitialValues : null, submitLabel: props.isCreate ? __('Создать') : __('Сохранить') },
+                onCloseModal();
+            }, initialValues: eventInitialValues !== null && eventInitialValues !== void 0 ? eventInitialValues : null, submitLabel: props.isCreate ? __('Создать') : __('Сохранить'), useRedux: true },
             react_1["default"].createElement("div", null,
                 react_1["default"].createElement(Text_1["default"], { content: __('Наименование'), className: bem.element('label') }),
                 react_1["default"].createElement(form_1.InputField, { attribute: 'title', required: true, className: bem.element('name-field') }),
-                react_1["default"].createElement(form_1.DropDownField, { attribute: 'eventGroupId', items: props.eventGroups, outline: true, placeholder: '\u0413\u0440\u0443\u043F\u043F\u0430', color: "primary", required: true, itemsContent: {
+                react_1["default"].createElement(form_1.DropDownField, { attribute: 'eventGroupId', items: props.eventGroups, outline: true, placeholder: '\u0413\u0440\u0443\u043F\u043F\u0430', color: "primary", itemsContent: {
                         type: 'checkbox'
                     } })),
             react_1["default"].createElement("div", null,

package/content/CalendarSystem/CalendarSystemModalView.scss

@@ -28,7 +28,7 @@
         > div {
             display: flex;
             flex-flow: row nowrap;
-            align-items: center;
+            align-items: flex-start;
 
             gap: 12px;
 

package/content/DropDown/DropDownView.js

@@ -26,18 +26,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var React = __importStar(require("react"));
-var react_use_1 = require("react-use");
+var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var react_1 = require("react");
 function DropDownView(props) {
-    var _a;
     var bem = (0, hooks_1.useBem)('DropDownView');
     var ui = (0, hooks_1.useComponents)().ui;
-    (0, react_use_1.useMount)(function () {
-        props.calculatePosition(props.forwardedRef.current.getBoundingClientRect());
-    });
+    var arrowRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        props.calculatePosition(props.forwardedRef.current.getBoundingClientRect(), props.hasArrow ? arrowRef.current.getBoundingClientRect() : null);
+    }, [props.calculatePosition]);
     var contentProps = (0, react_1.useMemo)(function () { return ({
         onClose: props.onClose
     }); }, [props.onClose]);
@@ -48,11 +47,12 @@ function DropDownView(props) {
             content = ui.renderView(content, contentProps);
         }
     }
-    return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block((_a = {
-                show: props.isComponentVisible
-            },
-            _a["position-".concat(props.position)] = !!props.position,
-            _a.hasArrow = props.hasArrow,
-            _a)), props.className), style: props.style }, content));
+    return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block({
+            show: props.isComponentVisible,
+            position: props.position
+        }), props.className), style: props.style },
+        props.hasArrow && (React.createElement("div", { ref: arrowRef, className: bem.element('arrow', { position: props.position }), style: props.arrowPosition })),
+        React.createElement("div", { className: bem.element('content') },
+            React.createElement("span", null, content))));
 }
 exports["default"] = DropDownView;

package/content/DropDown/DropDownView.scss

@@ -1,212 +1,71 @@
+@use 'sass:math';
 @use "../../scss/variables";
+@use '../../scss/mixins';
 
 :root {
-    --dropdown-background: #fff;
-    --dropdown-border: #dbe2e6;
-    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0416 0.5L10.1719 10.2567L1.30215 0.499998L19.0416 0.5Z' fill='white' stroke='%23dbe2e6'/%3E%3C/svg%3E%0A");
+    --dropdown-background-color: #fff;
+    --dropdown-border-color: #dbe2e6;
 }
 
 html[data-theme="dark"] {
-    --dropdown-background: var(--gray-dark);
-    --dropdown-border: transparent;
-    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5859 11.222L0.585938 0.222044L20.5859 0.222046L10.5859 11.222Z' fill='%23272A37'/%3E%3C/svg%3E");
+    --dropdown-background-color: var(--gray-dark);
+    --dropdown-border-color: transparent;
 }
 
-$dropdown-background: var(--dropdown-background);
-$dropdown-border: var(--dropdown-border);
-$dropdown-triangle-svg: var(--dropdown-triangle-svg);
+$dropdown-background-color: var(--dropdown-background-color);
+$dropdown-border-color: var(--dropdown-border-color);
 
+$dropdown-arrow-width: 10px;
+$dropdown-arrow-height: 10px;
+$dropdown-arrow-border: math.div($dropdown-arrow-width, 2);
 $gap: 12px;
 
-%triangle {
-    content: "";
-    position: absolute;
-    width: 20px;
-    height: 11px;
-    z-index: 2;
-    background-image: $dropdown-triangle-svg;
-}
-
-%borderShaper {
-    content: "";
-    position: absolute;
-    z-index: 3;
-
-    width: 16px;
-    height: 1px;
-    background-color: $dropdown-background;
-    border-left: 2px solid $dropdown-border;
-    border-right: 2px solid $dropdown-border;
-}
-
-@mixin drop($edge, $padding) {
-    @if ($edge == "top") {
-        &::before {
-            @extend %triangle;
-
-            top: 100%;
-            left: $padding;
-            transform: translateX(-50%);
-        }
-
-        &::after {
-            @extend %borderShaper;
-
-            top: 100%;
-            left: $padding;
-            transform: translateX(-50%);
-        }
-    } @else if ($edge == "bottom") {
-        &::before {
-            @extend %triangle;
-
-            top: 0;
-            left: $padding;
-            top: -11px;
-            transform: translateX(-50%) rotate(180deg);
-        }
-
-        &::after {
-            @extend %borderShaper;
-
-            transform: translateX(-50%);
-            top: -1px;
-            left: $padding;
-        }
-    } @else if($edge == "left") {
-        &::before {
-            @extend %triangle;
-
-            left: 100%;
-            top: $padding;
-            transform: translateX(-22.5%) rotate(-90deg);
-        }
-
-        &::after {
-            @extend %borderShaper;
-
-            left: 100%;
-            top: $padding;
-            transform: rotate(-90deg) translate(-30%, -7.5px);
-        }
-    } @else if($edge == "right") {
-        &::before {
-            @extend %triangle;
-
-            right: 100%;
-            top: $padding;
-            transform: translateX(22.5%) rotate(90deg);
-        }
-
-        &::after {
-            @extend %borderShaper;
-
-            right: 100%;
-            top: $padding;
-            transform: rotate(-90deg) translate(-30%, 7.5px);
-        }
-    }
-}
+$dropdown-arrow-offset-horizontal: 20px;
+$dropdown-arrow-offset-vertical-top: 15px;
+$dropdown-arrow-offset-vertical-bottom: 7px;
 
 .DropDownView {
-    $root: &;
-
-    z-index: 1000;
     position: absolute;
     color: variables.$text-color;
 
     transform: translate(0, 0);
     opacity: 0;
     transition: opacity 0.15s ease-in, transform 0.15s ease-in;
-
     z-index: 4;
+
     min-width: 200px;
     padding: 12px;
     border-radius: variables.$radius-large;
-    background-color: $dropdown-background;
-    border: 1px solid $dropdown-border;
+    background-color: $dropdown-background-color;
+    border: 1px solid $dropdown-border-color;
 
     &_show {
         opacity: 1;
     }
-    &_position-top,
-    &_position-topLeft,
-    &_position-topRight {
-        transform: translateY(-$gap);
-    }
-    &_position-bottom,
-    &_position-bottomLeft,
-    &_position-bottomRight {
-        transform: translateY($gap);
-    }
-    &_position-left,
-    &_position-leftTop,
-    &_position-leftBottom {
-        transform: translateX(-$gap);
-    }
-    &_position-right,
-    &_position-rightTop,
-    &_position-rightBottom {
-        transform: translateX($gap);
-    }
 
-    &_position-top {
-        @include drop("top", 50%);
-    }
+    @include mixins.absolute-position($gap);
 
-    &_position-topLeft {
-        @include drop("top", 15%);
-    }
-
-    &_position-topRight {
-        @include drop("top", 85%);
-    }
-
-    &_position-bottom {
-        @include drop("bottom", 50%);
-    }
-
-    &_position-bottomLeft {
-        @include drop("bottom", 15%);
-    }
-
-    &_position-bottomRight {
-        @include drop("bottom", 85%);
-    }
+    &__arrow {
+        position: absolute;
+        z-index: 1;
+        display: block;
+        pointer-events: none;
+        width: $dropdown-arrow-width;
+        height: $dropdown-arrow-height;
+        overflow: hidden;
+        border: 1px solid $dropdown-border-color;
+        background-color: $dropdown-background-color;
 
-    &_position-left {
-        @include drop("left", 46.5%);
-    }
-
-    &_position-leftTop {
-        @include drop("left", 12.5%);
-    }
-
-    &_position-leftBottom {
-        @include drop("left", 80%);
-    }
-
-    &_position-right {
-        @include drop("right", 46.5%);
-    }
-
-    &_position-rightTop {
-        @include drop("right", 12.5%);
-    }
-
-    &_position-rightBottom {
-        @include drop("right", 80%);
+        @include mixins.arrow-position(
+                        $dropdown-arrow-border,
+                        $dropdown-arrow-offset-horizontal,
+                        $dropdown-arrow-offset-vertical-top,
+                        $dropdown-arrow-offset-vertical-bottom
+        );
     }
 
     &::before,
     &::after {
         opacity: 0;
     }
-
-    &_hasArrow {
-        &::before,
-        &::after {
-            opacity: 1;
-        }
-    }
 }

package/form/DropDownField/DropDownFieldView.js

@@ -64,10 +64,11 @@ function DropDownFieldView(props) {
             _a["".concat(props.color)] = !!props.color && !props.outline,
             _a["outline_".concat(props.color)] = props.outline,
             _a.opened = props.isOpened,
-            _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && props.onOpen(); }, style: props.style, role: "button", tabIndex: 0 },
+            _a['is-invalid'] = !!props.errors,
+            _a.disabled = props.disabled,
+            _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && !props.disabled && props.onOpen(); }, style: props.style, role: "button", tabIndex: 0 },
         React.createElement("div", { className: bem.element('selected-items', {
-                reset: props.showReset,
-                disabled: props.disabled
+                reset: props.showReset
             }), onClick: props.onOpen, tabIndex: -1, role: 'button' },
             renderPlaceholder(),
             React.createElement("span", { className: bem.element('selected-items') }, props.showEllipses

package/form/DropDownField/DropDownFieldView.scss

@@ -422,6 +422,15 @@ $drop-down-color-themes: map.merge(
         svg > * {
             stroke: variables.$text-color
         }
+    }
+
+    &_is-invalid {
+        border: 1px solid variables.$danger !important;
+    }
 
+    &_disabled {
+        background-color: variables.$element-background-color-disabled;
+        border-color: transparent;
+        pointer-events: none;
     }
 }

package/layout/Tooltip/TooltipView.js

@@ -27,12 +27,12 @@ var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function TooltipView(props) {
+    var bem = (0, hooks_1.useBem)('TooltipView');
     var tooltipRef = (0, react_1.useRef)(null);
     var arrowRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         props.calculatePosition(tooltipRef.current.getBoundingClientRect(), arrowRef.current.getBoundingClientRect());
     }, [props.calculatePosition]);
-    var bem = (0, hooks_1.useBem)('TooltipView');
     return (React.createElement("div", { ref: tooltipRef, className: bem(bem.block({
             show: props.isTooltipVisible,
             position: props.position

package/layout/Tooltip/TooltipView.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use "../../scss/variables";
+@use '../../scss/mixins';
 
 $tooltip-arrow-width: 10px;
 $tooltip-arrow-height: 10px;
@@ -17,6 +18,7 @@ $tooltip-background-color: rgba(65, 65, 65, 0.95);
   top: 0;
   left: 0;
   max-width: 300px;
+  width: fit-content;
   word-break: break-all;
   padding: 8px 12px;
   border-radius: 6px;
@@ -31,27 +33,11 @@ $tooltip-background-color: rgba(65, 65, 65, 0.95);
     opacity: 1;
   }
 
-  &_position{
-    &_top, &_topLeft, &_topRight {
-      transform: translateY(-$tooltip-gap);
-    }
-
-    &_bottom, &_bottomLeft, &_bottomRight {
-      transform: translateY($tooltip-gap);
-    }
-
-    &_left, &_leftTop, &_leftBottom {
-      transform: translateX(-$tooltip-gap);
-    }
-
-    &_right, &_rightTop, &_rightBottom {
-      transform: translateX($tooltip-gap);
-    }
-  }
+  @include mixins.absolute-position($tooltip-gap);
 
   &__arrow{
     position: absolute;
-    
+
     width: $tooltip-arrow-width;
     height: $tooltip-arrow-height;
 
@@ -60,65 +46,12 @@ $tooltip-background-color: rgba(65, 65, 65, 0.95);
     border-color: $tooltip-background-color;
     box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
 
-    &_position_top, &_position_topLeft, &_position_topRight{
-      bottom: -$tooltip-arrow-border;
-      left: 50%;
-      border-top-color: transparent;
-      border-left-color: transparent;
-      transform: translateX(-50%) rotate(45deg);
-    }
-    &_position_topLeft{
-      left: $tooltip-arrow-offset-horizontal;
-    }
-    &_position_topRight{
-      left: unset;
-      right: $tooltip-arrow-offset-horizontal;
-    }
-
-    &_position_bottom, &_position_bottomLeft, &_position_bottomRight{
-      top: -$tooltip-arrow-border;
-      left: 50%;
-      border-right-color: transparent;
-      border-bottom-color: transparent;
-      transform: translateX(-50%) rotate(45deg);
-    }
-    &_position_bottomLeft{
-      left: $tooltip-arrow-offset-horizontal;
-    }
-    &_position_bottomRight{
-      left: unset;
-      right: $tooltip-arrow-offset-horizontal;
-    }
-
-    &_position_left, &_position_leftTop, &_position_leftBottom{
-      right: -$tooltip-arrow-border;
-      top: 50%;
-      border-left-color: transparent;
-      border-bottom-color: transparent;
-      transform: translateY(-50%) rotate(45deg);
-    }
-    &_position_leftTop{
-      top: $tooltip-arrow-offset-vertical-top;
-    }
-    &_position_leftBottom{
-      top: unset;
-      bottom: $tooltip-arrow-offset-vertical-bottom;
-    }
-
-    &_position_right, &_position_rightTop, &_position_rightBottom{
-      left: -$tooltip-arrow-border;
-      top: 50%;
-      border-top-color: transparent;
-      border-right-color: transparent;
-      transform: translateY(-50%) rotate(45deg);
-    }
-    &_position_rightTop{
-      top: $tooltip-arrow-offset-vertical-top;
-    }
-    &_position_rightBottom{
-      top: unset;
-      bottom: $tooltip-arrow-offset-vertical-bottom;
-    }
+    @include mixins.arrow-position(
+                    $tooltip-arrow-border,
+                    $tooltip-arrow-offset-horizontal,
+                    $tooltip-arrow-offset-vertical-top,
+                    $tooltip-arrow-offset-vertical-bottom
+    );
   }
 
   &__content{

package/list/Grid/views/TreeColumnView/TreeColumnView.js

@@ -18,24 +18,23 @@ var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Format_1 = __importDefault(require("@steroidsjs/core/ui/format/Format"));
 var content_1 = require("@steroidsjs/core/ui/content");
-var DEFAULT_PADDING_LEFT = 32;
 var PADDING_WITH_ICON = 0;
 var PADDING_WITHOUT_ICON = 24;
 function TreeColumnView(props) {
     var bem = (0, hooks_1.useBem)('TreeColumnView');
-    var levelPadding = props.levelPadding || DEFAULT_PADDING_LEFT;
     var paddingBasedOnIcon = props.item.hasItems ? PADDING_WITH_ICON : PADDING_WITHOUT_ICON;
     var renderFormat = function () { return (react_1["default"].createElement(Format_1["default"], __assign({}, props, (props.formatter || {}), { attribute: props.attribute }))); };
     var renderValue = function () { return (react_1["default"].createElement("span", { className: bem.element('value') }, renderFormat())); };
     return (react_1["default"].createElement("div", { className: bem.block(bem.block({
-            size: props.size
-        })) },
+            size: props.size,
+            'has-items': props.item.hasItems
+        })), onClick: props.item.onClick, onKeyDown: function (e) { return e.key === 'Enter' && props.item.onClick(); }, role: 'button', tabIndex: 0 },
         react_1["default"].createElement("div", { className: bem.element('data'), style: {
-                paddingLeft: "".concat(props.item.level * levelPadding + paddingBasedOnIcon, "px")
+                paddingLeft: "".concat(props.item.level * props.levelPadding + paddingBasedOnIcon, "px")
             } },
             props.item.hasItems && (react_1["default"].createElement(content_1.Icon, { name: 'expand_right', className: bem.element('icon', {
                     opened: props.item.isOpened
-                }), onClick: function () { return props.item.onTreeItemClick(props.item.uniqueId, props.item); } })),
+                }), tabIndex: -1 })),
             renderValue())));
 }
 exports["default"] = TreeColumnView;

package/list/Grid/views/TreeColumnView/TreeColumnView.scss

@@ -11,6 +11,11 @@ html[data-theme="dark"] {
 $grid-icon-color: var(--grid-icon-color);
 
 .TreeColumnView {
+
+  &_has-items {
+    cursor: pointer;
+  }
+
   &__data {
     display: flex;
     align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.121",
+    "version": "3.0.0-beta.123",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.103",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.105",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",

package/scss/bootstrap-classes/spacing.scss

@@ -1,4 +1,46 @@
 // margin
+.m-1 {
+  margin: 0.25rem;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
+.m-3 {
+  margin: 1rem;
+}
+
+.m-horizontal-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.m-horizontal-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.m-horizontal-3 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.m-vertical-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.m-vertical-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.m-vertical-3 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -48,6 +90,48 @@
 }
 
 // padding
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 1rem;
+}
+
+.p-horizontal-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.p-horizontal-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.p-horizontal-3 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.p-vertical-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.p-vertical-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.p-vertical-3 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }

package/scss/mixins/tooltip.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use "../variables/index" as variables;
 
 :root {
@@ -21,3 +22,92 @@ $tooltip-background-color: var(--tooltip-background-color);
         color: variables.$text-color;
     }
 }
+
+@mixin absolute-position($gap) {
+    &_position{
+        &_top, &_topLeft, &_topRight {
+            transform: translateY(-$gap);
+        }
+
+        &_bottom, &_bottomLeft, &_bottomRight {
+            transform: translateY($gap);
+        }
+
+        &_left, &_leftTop, &_leftBottom {
+            transform: translateX(-$gap);
+        }
+
+        &_right, &_rightTop, &_rightBottom {
+            transform: translateX($gap);
+        }
+    }
+}
+
+@mixin arrow-position(
+    $arrow-border,
+    $arrow-offset-horizontal,
+    $arrow-offset-vertical-top,
+    $arrow-offset-vertical-bottom
+) {
+    &_position{
+        &_top, &_topLeft, &_topRight {
+            bottom: -$arrow-border;
+            left: 50%;
+            border-top-color: transparent;
+            border-left-color: transparent;
+            transform: translateX(-50%) rotate(45deg);
+        }
+        &_topLeft{
+            left: $arrow-offset-horizontal;
+        }
+        &_topRight{
+            left: unset;
+            right: $arrow-offset-horizontal;
+        }
+
+        &_bottom, &_bottomLeft, &_bottomRight {
+            top: -$arrow-border;
+            left: 50%;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+            transform: translateX(-50%) rotate(45deg);
+        }
+        &_bottomLeft{
+            left: $arrow-offset-horizontal;
+        }
+        &_bottomRight{
+            left: unset;
+            right: $arrow-offset-horizontal;
+        }
+
+        &_left, &_leftTop, &_leftBottom {
+            right: -$arrow-border;
+            top: 50%;
+            border-left-color: transparent;
+            border-bottom-color: transparent;
+            transform: translateY(-50%) rotate(45deg);
+        }
+        &_leftTop{
+            top: $arrow-offset-vertical-top;
+        }
+        &_leftBottom{
+            top: unset;
+            bottom: $arrow-offset-vertical-bottom;
+        }
+
+        &_right, &_rightTop, &_rightBottom {
+            left: -$arrow-border;
+            top: 50%;
+            border-top-color: transparent;
+            border-right-color: transparent;
+            transform: translateY(-50%) rotate(45deg);
+        }
+        &_rightTop{
+            top: $arrow-offset-vertical-top;
+        }
+        &_rightBottom{
+            top: unset;
+            bottom: $arrow-offset-vertical-bottom;
+        }
+    }
+}