@steroidsjs/bootstrap 3.0.0-beta.35 → 3.0.0-beta.37

package/form/RadioField/RadioFieldView.js

@@ -0,0 +1,57 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"));
+function RadioFieldView(props) {
+    var bem = (0, hooks_1.useBem)('RadioFieldView');
+    var id = (0, useUniqueId_1["default"])('radio');
+    return (React.createElement("div", { className: bem(bem.block({
+            hasError: !!props.errors,
+            size: props.size
+        }), props.className), onClick: props.onChange },
+        React.createElement("input", __assign({ className: bem(bem.element('input', {
+                checked: props.checked
+            })), id: props.id || id }, props.inputProps, { checked: props.checked, disabled: props.disabled, required: props.required })),
+        React.createElement("label", { className: bem.element('label'), htmlFor: props.id || id },
+            React.createElement("span", { className: bem.element('ellipse') }),
+            props.label)));
+}
+exports["default"] = RadioFieldView;

package/form/RadioField/RadioFieldView.scss

@@ -0,0 +1,226 @@
+:root {
+    --radio-hover-color: #651fff;
+}
+
+html[data-theme="dark"] {
+    --radio-hover-color: #6648a7;
+}
+
+$radio-hover-color: var(--radio-hover-color);
+
+.RadioFieldView {
+    position: relative;
+    box-sizing: border-box;
+
+    $root: &;
+
+    font-family: $font-family-nunito;
+    color: $text-color;
+    line-height: 24px;
+    font-weight: 400;
+    font-size: $font-size-sm;
+
+    &__ellipse {
+        position: absolute;
+        top: 50%;
+        left: 6px;
+        transform: translateY(-50%);
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        background-color: $primary;
+        border-radius: $radius-circle;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &__label {
+        position: relative;
+    }
+
+    &__input {
+        position: absolute;
+        z-index: -1;
+        opacity: 0;
+    }
+
+    &__input + &__label {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+    }
+
+    //Custom Radio
+    &__input + label::before {
+        content: "";
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        border-radius: $radius-circle;
+        border: 1px solid $border-color;
+        margin-right: 8px;
+        cursor: pointer;
+
+        background-repeat: no-repeat;
+        background-position: 53% 50%;
+        background-size: 50% 50%;
+    }
+
+    &__input + &__label::after {
+        content: "";
+        width: 26px;
+        height: 26px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 4px solid $primary-light;
+        border-radius: $radius-circle;
+        pointer-events: none;
+        opacity: 0;
+
+        transform: translate(-12%, -12%);
+
+        transition: opacity 150ms ease-in-out;
+    }
+
+    &__input:not(:disabled):not(:checked):hover + &__label::before {
+        border-color: $border-color-hover;
+    }
+
+    &__input:not(:disabled):not(:checked):active + &__label::before {
+        border-color: $primary;
+    }
+
+    &__input:not(:disabled):focus + &__label::after {
+        opacity: 1;
+    }
+
+    &__input:not(:disabled):focus + &__label &__ellipse {
+        opacity: 1;
+    }
+
+    &__input:checked + &__label::before {
+        border: 1px solid $primary;
+    }
+    &__input:checked + &__label &__ellipse {
+        opacity: 1;
+    }
+
+    &__input:not(:disabled):checked:hover + &__label::before {
+        border-color: $primary-dark;
+    }
+
+    &__input:not(:disabled):checked:hover + &__label &__ellipse {
+        opacity: 1;
+        background-color: $radio-hover-color;
+    }
+
+    &__input:not(:disabled):checked:active + &__label::before {
+        border-color: $primary-light;
+    }
+
+    &__input:not(:disabled):checked:active + &__label &__ellipse {
+        opacity: 1;
+        background-color: $primary-light;
+    }
+
+    &__input:disabled + &__label {
+        cursor: not-allowed;
+        color: $placeholder-color;
+
+        &::before {
+            cursor: not-allowed;
+            background-color: $background-disabled-color;
+        }
+    }
+
+    &__input:disabled:checked + &__label::before {
+        cursor: not-allowed;
+
+        background-color: transparent;
+        border-color: $background-disabled-color;
+    }
+
+    &__input:disabled:checked + &__label &__ellipse {
+        background-color: $background-disabled-color;
+    }
+
+    &_hasError {
+        #{$root}__input:not(:disabled):not(:checked) + #{$root}__label {
+            color: $danger;
+
+            &::before {
+                border-color: $danger;
+            }
+        }
+    }
+
+    &_size {
+        &_lg {
+            #{$root}__label {
+                font-size: $font-size-lg;
+                line-height: 24px;
+
+                &::before {
+                    width: 22px;
+                    height: 22px;
+                }
+
+                &::after {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+
+        &_md {
+            #{$root}__label {
+                font-size: $font-size-base;
+                line-height: 22px;
+
+                &::before {
+                    width: 18px;
+                    height: 18px;
+                }
+
+                &::after {
+                    width: 20px;
+                    height: 20px;
+                    transform: translate(-14.5%, -10.5%);
+                }
+            }
+
+            #{$root}__ellipse {
+                width: 10px;
+                height: 10px;
+                left: 5px;
+            }
+        }
+
+        &_sm {
+            #{$root}__label {
+                font-size: $font-size-sm;
+                line-height: 18px;
+
+                &::before {
+                    width: 14px;
+                    height: 14px;
+                }
+
+                &::after {
+                    width: 16px;
+                    height: 16px;
+                    transform: translate(-16.5%, -12.5%);
+                }
+            }
+
+            #{$root}__ellipse {
+                width: 8px;
+                height: 8px;
+                left: 4px;
+            }
+        }
+    }
+}

package/form/RadioListField/RadioListFieldView.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -41,19 +30,27 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"));
 function RadioListFieldView(props) {
+    var _a;
     var bem = (0, hooks_1.useBem)('RadioListFieldView');
     var prefix = (0, useUniqueId_1["default"])('radio');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item, index) { return (React.createElement("div", { key: typeof item.id !== 'boolean' ? item.id : (item.id ? 'true' : 'false'), className: bem(bem.element('item', {
-            hasError: !!props.errors,
-            size: props.size
-        })) },
-        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(item.id), tabIndex: index, className: bem(bem.element('input', {
-                checked: props.selectedIds.includes(item.id)
-            })), checked: props.selectedIds.includes(item.id), disabled: props.disabled || item.disabled, onChange: function () {
-                props.onItemSelect(item.id);
-            } })),
-        React.createElement("label", { htmlFor: "".concat(prefix, "_").concat(item.id), className: bem.element('label') },
-            React.createElement("span", { className: bem.element('ellipse') }),
-            item.label))); })));
+    return (React.createElement("div", { className: bem(bem.block((_a = {},
+            _a["".concat(props.orientation)] = !!props.orientation,
+            _a)), props.className) }, props.items.map(function (radio, radioIndex) { return props.renderRadio({
+        inputProps: {
+            name: "".concat(prefix, "_").concat(radio.id),
+            checked: null,
+            type: 'radio',
+            disabled: false,
+            onChange: function () {
+                props.onItemSelect(radio.id);
+            }
+        },
+        disabled: props.disabled,
+        checked: props.selectedIds.includes(radio.id),
+        label: radio.label,
+        id: "".concat(prefix, "_").concat(radio.id),
+        key: radioIndex,
+        size: props.size
+    }); })));
 }
 exports["default"] = RadioListFieldView;

package/form/RadioListField/RadioListFieldView.scss

@@ -1,231 +1,13 @@
-:root {
-    --radio-hover-color: #651fff;
-}
-
-html[data-theme="dark"] {
-    --radio-hover-color: #6648A7;
-}
-
-$radio-hover-color: var(--radio-hover-color);
-
 .RadioListFieldView {
-    position: relative;
-    box-sizing: border-box;
-
-    $root: &;
-
-    font-family: $font-family-nunito;
-    color: $text-color;
-    line-height: 24px;
-    font-weight: 400;
-    font-size: $font-size-sm;
-
-    &__ellipse {
-        position: absolute;
-        top: 50%;
-        left: 6px;
-        transform: translateY(-50%);
-        display: inline-block;
-        width: 12px;
-        height: 12px;
-        background-color: $primary;
-        border-radius: $radius-circle;
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    &__label { 
-        position: relative;
-    }
-
-    &__input {
-        position: absolute;
-        z-index: -1;
-        opacity: 0;
-    }
-
-    &__input + &__label {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        user-select: none;
-        cursor: pointer;
-    }
-
-    //Custom Radio
-    &__input + label::before {
-        content: "";
-        display: inline-block;
-        width: 24px;
-        height: 24px;
-        border-radius: $radius-circle;
-        border: 1px solid $border-color;
-        margin-right: 8px;
-        cursor: pointer;
+    display: flex;
 
-        background-repeat: no-repeat;
-        background-position: 53% 50%;
-        background-size: 50% 50%;
-    }
-
-    &__input + &__label::after {
-        content: "";
-        width: 26px;
-        height: 26px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 4px solid $primary-light;
-        border-radius: $radius-circle;
-        pointer-events: none;
-        opacity: 0;
-
-        transform: translate(-12%, -12%);
-
-        transition: opacity 150ms ease-in-out;
-    }
-
-    &__input:not(:disabled):not(:checked):hover + &__label::before {
-        border-color: $border-color-hover;
-    }
-
-    &__input:not(:disabled):not(:checked):active + &__label::before {
-        border-color: $primary;
-    }
-
-    &__input:not(:disabled):focus + &__label::after {
-        opacity: 1;
-    }
-
-    &__input:not(:disabled):focus + &__label &__ellipse {
-        opacity: 1;
-    }
-
-    &__input:checked + &__label::before {
-        border: 1px solid $primary;
-    }
-    &__input:checked + &__label &__ellipse {
-        opacity: 1;
+    &_vertical {
+        flex-flow: column wrap;
+        row-gap: 8px;
     }
 
-    &__input:not(:disabled):checked:hover + &__label::before {
-        border-color: $primary-dark;
-    }
-
-    &__input:not(:disabled):checked:hover + &__label &__ellipse {
-        opacity: 1;
-        background-color: $radio-hover-color;
-    }
-
-    &__input:not(:disabled):checked:active + &__label::before {
-        border-color: $primary-light;
-    }
-
-    &__input:not(:disabled):checked:active + &__label &__ellipse {
-        opacity: 1;
-        background-color: $primary-light;
-    }
-
-    &__input:disabled + &__label {
-        cursor: not-allowed;
-        color: $placeholder-color;
-
-        &::before {
-            cursor: not-allowed;
-            background-color: $background-disabled-color;
-        }
-    }
-
-    &__input:disabled:checked + &__label::before {
-        cursor: not-allowed;
-
-        background-color: transparent;
-        border-color: $background-disabled-color;
-    }
-
-    &__input:disabled:checked + &__label &__ellipse {
-       background-color: $background-disabled-color;
-    }
-
-    &__item_hasError {
-        #{$root}__input:not(:disabled):not(:checked) + #{$root}__label {
-            color: $danger;
-
-            &::before {
-                border-color: $danger;
-            }
-        }
-    }
-
-    &__item {
-        width: fit-content;
-        position: relative;
-
-        &_size {
-            &_lg {
-                #{$root}__label {
-                    font-size: $font-size-lg;
-                    line-height: 24px;
-
-                    &::before {
-                        width: 22px;
-                        height: 22px;
-                    }
-
-                    &::after {
-                        width: 24px;
-                        height: 24px;
-                    }
-                }
-            }
-
-            &_md {
-                #{$root}__label {
-                    font-size: $font-size-base;
-                    line-height: 22px;
-
-                    &::before {
-                        width: 18px;
-                        height: 18px;
-                    }
-
-                    &::after {
-                        width: 20px;
-                        height: 20px;
-                        transform: translate(-14.5%, -10.5%);
-                    }
-                }
-
-                #{$root}__ellipse {
-                    width: 10px;
-                    height: 10px;
-                    left: 5px;
-                }
-            }
-
-            &_sm {
-                #{$root}__label {
-                    font-size: $font-size-sm;
-                    line-height: 18px;
-
-                    &::before {
-                        width: 14px;
-                        height: 14px;
-                    }
-
-                    &::after {
-                        width: 16px;
-                        height: 16px;
-                        transform: translate(-16.5%, -12.5%);
-                    }
-                }
-
-                #{$root}__ellipse {
-                    width: 8px;
-                    height: 8px;
-                    left: 4px;
-                }
-            }
-        }
+    &_horizontal {
+        flex-flow: row nowrap;
+        column-gap: 8px;
     }
 }

package/icons/index.js

@@ -269,6 +269,9 @@ exports["default"] = (function (customIcons) {
         'crossed-out-eye',
         'dots',
         'search',
+        'home',
+        'arrow-left',
+        'double-arrow-left',
     ];
     steroidsIcons.forEach(function (iconName) {
         icons[iconName] = require("./svgs/".concat(iconName, ".svg"));

package/icons/svgs/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3535 8.58148L10.3535 12.5815L14.3535 16.5815" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/double-arrow-left.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8535 16.5815L7.85352 12.5815L11.8535 8.58148" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.8535 16.5815L12.8535 12.5815L16.8535 8.58148" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/home.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.35352 12.3655C5.35352 11.0077 5.35352 10.3289 5.62798 9.73213C5.90244 9.13539 6.41788 8.69358 7.44877 7.80997L8.44877 6.95282C10.3121 5.35569 11.2437 4.55713 12.3535 4.55713C13.4633 4.55713 14.3949 5.35569 16.2583 6.95282L17.2583 7.80997C18.2892 8.69358 18.8046 9.13539 19.0791 9.73213C19.3535 10.3289 19.3535 11.0077 19.3535 12.3655V16.6059C19.3535 18.4915 19.3535 19.4343 18.7677 20.0201C18.1819 20.6059 17.2391 20.6059 15.3535 20.6059H9.35352C7.4679 20.6059 6.52509 20.6059 5.9393 20.0201C5.35352 19.4343 5.35352 18.4915 5.35352 16.6059V12.3655Z" stroke="#323232"/>
+<path d="M14.8535 20.606V15.606C14.8535 15.0537 14.4058 14.606 13.8535 14.606H10.8535C10.3012 14.606 9.85352 15.0537 9.85352 15.606V20.606" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/index.scss

@@ -21,6 +21,7 @@
 @import './form/DateRangeField/DateRangeFieldView';
 @import './form/DateTimeField/DateTimeFieldView';
 @import './form/DateTimeRangeField/DateTimeRangeFieldView';
+@import './form/DropDownFieldItem/DropDownFieldItemView';
 @import './form/DropDownField/DropDownFieldView';
 @import './form/FieldLayout/FieldLayoutView';
 @import './form/FieldList/FieldListView';
@@ -33,6 +34,7 @@
 @import './form/NumberField/NumberFieldView';
 @import './form/PasswordField/PasswordFieldView';
 @import './form/RateField/RateFieldView';
+@import './form/RadioField/RadioFieldView';
 @import './form/RadioListField/RadioListFieldView';
 @import './form/ReCaptchaField/ReCaptchaFieldView';
 @import './form/SliderField/SliderFieldView';

package/list/List/ListView.d.ts

@@ -1,2 +1,3 @@
 import { IListViewProps } from '@steroidsjs/core/ui/list/List/List';
+import './ListView.scss';
 export default function ListView(props: IListViewProps): any;

package/list/List/ListView.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+require("./ListView.scss");
 function ListView(props) {
     var bem = (0, hooks_1.useBem)('ListView');
     if (!props.list) {
@@ -34,17 +35,16 @@ function ListView(props) {
         if (!pagination && !paginationSize && !layout) {
             return null;
         }
-        return (React.createElement("div", { className: bem('row mb-3', bem.element('pagination')) },
-            React.createElement("div", { className: 'col-4' }, "\u00A0"),
-            React.createElement("div", { className: 'col-4' }, pagination),
-            React.createElement("div", { className: 'col-4 d-flex justify-content-end' },
+        return (React.createElement("div", { className: bem.element('pagination') },
+            React.createElement("div", null, pagination),
+            React.createElement("div", null,
                 layout,
                 paginationSize)));
     };
     return props.renderList(React.createElement("div", { className: bem(bem.block({ loading: props.isLoading || props.list.isLoading }), props.className) },
         props.renderSearchForm(),
         renderPagination(['top', 'both'].includes(props.paginationPosition) && props.renderPagination(), ['top', 'both'].includes(props.paginationSizePosition) && props.renderPaginationSize(), ['top', 'both'].includes(props.layoutNamesPosition) && props.renderLayoutNames()),
-        React.createElement("div", { className: bem('mb-3', bem.element('content'), props.contentClassName) }, props.content),
+        React.createElement("div", { className: bem(bem.element('content'), props.contentClassName) }, props.content),
         renderPagination(['bottom', 'both'].includes(props.paginationPosition) && props.renderPagination(), ['bottom', 'both'].includes(props.paginationSizePosition) && props.renderPaginationSize(), ['bottom', 'both'].includes(props.layoutNamesPosition) && props.renderLayoutNames()),
         props.renderEmpty()));
 }

package/list/List/ListView.scss

@@ -1,3 +1,12 @@
 .ListView {
 
+    &__pagination { 
+        display: flex;
+        flex-flow: row nowrap;
+        margin-bottom: 3px;
+        background: red;
+    }
+
+
+
 }