krl-alfred 1.74.0 → 1.74.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.ReviewCardStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.ReviewCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n .imgWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .img{\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n * {\n display: block !important;\n }\n }\n .stars{\n display: flex;\n align-items: center;\n justify-content: center;\n .star{\n + .star{\n margin-left: 1px;\n }\n &:is(.isFilled){\n svg{\n path{\n fill : var(--yellow)\n }\n }\n }\n svg{\n display: block;\n path{\n stroke:none;\n fill : var(--dark-opacity-10)\n }\n }\n }\n }\n }\n .description{\n font-size: 14px;\n font-weight: 500;\n line-height: normal;\n color: var(--dark-opacity-75);\n margin: 1rem 0 1.5rem 0;\n overflow: hidden;\n position: relative;\n min-height: 68px;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n }\n .line{\n border-bottom: 1px solid var(--icon-shadow-color);\n margin-bottom: 1rem;\n }\n .bottom{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .name{\n font-size: 10px;\n font-weight: 500;\n line-height: normal;\n color: var(--dark-opacity-75);\n \n }\n .horizontalLine{\n border-right: 1px solid var(--dark-opacity-75);\n height: 0.5rem;\n margin: 0 0.5rem;\n }\n .logo{\n * {\n display: block !important;\n }\n }\n }\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n .imgWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .img{\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n * {\n display: block !important;\n }\n }\n .stars{\n display: flex;\n align-items: center;\n justify-content: center;\n .star{\n + .star{\n margin-left: 1px;\n }\n &:is(.isFilled){\n svg{\n path{\n fill : var(--yellow)\n }\n }\n }\n svg{\n display: block;\n path{\n stroke:none;\n fill : var(--dark-opacity-10)\n }\n }\n }\n }\n }\n .description{\n font-size: 14px;\n font-weight: 500;\n line-height: normal;\n color: var(--dark-opacity-75);\n margin: 1rem 0 1.5rem 0;\n overflow: hidden;\n position: relative;\n min-height: 68px;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n }\n .line{\n border-bottom: 1px solid var(--icon-shadow-color);\n margin-bottom: 1rem;\n }\n .bottom{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .name{\n font-size: 10px;\n font-weight: 500;\n line-height: normal;\n color: var(--dark-opacity-75);\n \n }\n .horizontalLine{\n border-right: 1px solid var(--dark-opacity-75);\n height: 0.5rem;\n margin: 0 0.5rem;\n }\n .logo{\n * {\n display: block !important;\n }\n }\n }\n"])));
|
|
12
|
+
exports.ReviewCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-opacity-25);\n }\n .imgWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .img{\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n * {\n display: block !important;\n }\n }\n .stars{\n display: flex;\n align-items: center;\n justify-content: center;\n .star{\n + .star{\n margin-left: 1px;\n }\n &:is(.isFilled){\n svg{\n path{\n fill : var(--yellow)\n }\n }\n }\n svg{\n display: block;\n path{\n stroke:none;\n fill : var(--dark-opacity-10)\n }\n }\n }\n }\n }\n .description{\n font-size: 14px;\n font-weight: 500;\n line-height: normal;\n color: var(--dark-opacity-75);\n margin: 1rem 0 1.5rem 0;\n overflow: hidden;\n position: relative;\n min-height: 68px;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n }\n .line{\n border-bottom: 1px solid var(--icon-shadow-color);\n margin-bottom: 1rem;\n }\n .bottom{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .name{\n font-size: 10px;\n font-weight: 500;\n line-height: normal;\n color: var(--dark-opacity-75);\n \n }\n .horizontalLine{\n border-right: 1px solid var(--dark-opacity-75);\n height: 0.5rem;\n margin: 0 0.5rem;\n }\n .logo{\n * {\n display: block !important;\n }\n }\n }\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-opacity-25);\n }\n .imgWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .img{\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n * {\n display: block !important;\n }\n }\n .stars{\n display: flex;\n align-items: center;\n justify-content: center;\n .star{\n + .star{\n margin-left: 1px;\n }\n &:is(.isFilled){\n svg{\n path{\n fill : var(--yellow)\n }\n }\n }\n svg{\n display: block;\n path{\n stroke:none;\n fill : var(--dark-opacity-10)\n }\n }\n }\n }\n }\n .description{\n font-size: 14px;\n font-weight: 500;\n line-height: normal;\n color: var(--dark-opacity-75);\n margin: 1rem 0 1.5rem 0;\n overflow: hidden;\n position: relative;\n min-height: 68px;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n }\n .line{\n border-bottom: 1px solid var(--icon-shadow-color);\n margin-bottom: 1rem;\n }\n .bottom{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .name{\n font-size: 10px;\n font-weight: 500;\n line-height: normal;\n color: var(--dark-opacity-75);\n \n }\n .horizontalLine{\n border-right: 1px solid var(--dark-opacity-75);\n height: 0.5rem;\n margin: 0 0.5rem;\n }\n .logo{\n * {\n display: block !important;\n }\n }\n }\n"])));
|
|
13
13
|
var templateObject_1;
|
|
@@ -24,7 +24,7 @@ var SearchBox = function (props) {
|
|
|
24
24
|
else {
|
|
25
25
|
setShadowHeight("48px");
|
|
26
26
|
}
|
|
27
|
-
}, [(_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, showResultList, isLoading]);
|
|
27
|
+
}, [(_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, showResultList, isLoading, children]);
|
|
28
28
|
return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, { shadowHeight: shadowHeight, children: [(0, jsx_runtime_1.jsx)("div", { className: "shadow" }), (0, jsx_runtime_1.jsxs)("div", { className: "inputWrapper", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", { onClick: onButtonClick, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" }) })] }), showResultList && ((0, jsx_runtime_1.jsx)("div", { ref: resultRef, className: "resultList", children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children }))] }));
|
|
29
29
|
};
|
|
30
30
|
SearchBox.defaultProps = {
|
|
@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.LoadingStyled = exports.SearchBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
14
|
-
exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
13
|
+
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .shadow{\n height: ", ";\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 8px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 8px;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border:0;\n outline: none;\n cursor: pointer;\n padding: 0;\n &:hover{\n svg {\n path, circle {\n stroke: var(--primary-hover);\n }\n }\n }\n svg {\n path, circle {\n stroke: var(--primary);\n }\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n }\n }\n"], ["\n position: relative;\n .shadow{\n height: ", ";\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 8px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 8px;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border:0;\n outline: none;\n cursor: pointer;\n padding: 0;\n &:hover{\n svg {\n path, circle {\n stroke: var(--primary-hover);\n }\n }\n }\n svg {\n path, circle {\n stroke: var(--primary);\n }\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n }\n }\n"])), function (props) { return props.shadowHeight; }, devices_1.devices.xl, devices_1.devices.xl);
|
|
14
|
+
exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2;
|