@greghowe79/the-lib 2.0.0 → 2.0.1
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.
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #0a66c2;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n
|
|
2
|
+
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #0a66c2;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n width: 100%;\r\n max-width: 200px;\r\n height: 100px;\r\n}\r\n\r\n.card-fullname {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%; */\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 11px;\r\n /* white-space: nowrap; */\r\n font-weight: 500;\r\n text-align: center;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* left: 50%;\r\n transform: translateX(-50%) translateY(-7px); */\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
|
|
3
3
|
module.exports = styles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #0a66c2;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n
|
|
1
|
+
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #0a66c2;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n width: 100%;\r\n max-width: 200px;\r\n height: 100px;\r\n}\r\n\r\n.card-fullname {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%; */\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 11px;\r\n /* white-space: nowrap; */\r\n font-weight: 500;\r\n text-align: center;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* left: 50%;\r\n transform: translateX(-50%) translateY(-7px); */\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -26,7 +26,7 @@ const uploadImage = qwik.$(async (_event, input, currentFile, selectedFile, imag
|
|
|
26
26
|
if (selectedFile) selectedFile.value = file.name;
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
|
-
const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, imgUrl, autocomplete, iconPasswordShow, iconPasswordHide, labelShowPassword = "Show password", labelHidePassword = "Hide password", lowercaseOnBlur = false }) => {
|
|
29
|
+
const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, imgUrl, autocomplete, iconPasswordShow, iconPasswordHide, labelShowPassword = "Show password", labelHidePassword = "Hide password", lowercaseOnBlur = false, maxLength }) => {
|
|
30
30
|
qwik.useStylesScoped$(styles);
|
|
31
31
|
const internalError = qwik.useSignal(null);
|
|
32
32
|
const isPasswordVisible = qwik.useSignal(false);
|
|
@@ -234,7 +234,8 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
234
234
|
onInput$: inputHandler,
|
|
235
235
|
onBlur$: inputHandler,
|
|
236
236
|
required,
|
|
237
|
-
autocomplete
|
|
237
|
+
autocomplete,
|
|
238
|
+
maxLength
|
|
238
239
|
})
|
|
239
240
|
]
|
|
240
241
|
})
|
|
@@ -24,7 +24,7 @@ const uploadImage = $(async (_event, input, currentFile, selectedFile, imageUrl)
|
|
|
24
24
|
if (selectedFile) selectedFile.value = file.name;
|
|
25
25
|
}
|
|
26
26
|
});
|
|
27
|
-
const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, imgUrl, autocomplete, iconPasswordShow, iconPasswordHide, labelShowPassword = "Show password", labelHidePassword = "Hide password", lowercaseOnBlur = false }) => {
|
|
27
|
+
const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, imgUrl, autocomplete, iconPasswordShow, iconPasswordHide, labelShowPassword = "Show password", labelHidePassword = "Hide password", lowercaseOnBlur = false, maxLength }) => {
|
|
28
28
|
useStylesScoped$(styles);
|
|
29
29
|
const internalError = useSignal(null);
|
|
30
30
|
const isPasswordVisible = useSignal(false);
|
|
@@ -232,7 +232,8 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
232
232
|
onInput$: inputHandler,
|
|
233
233
|
onBlur$: inputHandler,
|
|
234
234
|
required,
|
|
235
|
-
autocomplete
|
|
235
|
+
autocomplete,
|
|
236
|
+
maxLength
|
|
236
237
|
})
|
|
237
238
|
]
|
|
238
239
|
})
|
|
@@ -28,6 +28,7 @@ export interface InputProps {
|
|
|
28
28
|
labelShowPassword?: string;
|
|
29
29
|
labelHidePassword?: string;
|
|
30
30
|
lowercaseOnBlur?: boolean;
|
|
31
|
+
maxLength?: number;
|
|
31
32
|
}
|
|
32
33
|
export declare const displayLocalImage: QRL<(file: File, imageUrl?: Signal<string>) => void>;
|
|
33
34
|
export declare const uploadImage: QRL<(_event: Event, input: HTMLInputElement, currentFile?: Signal<any>, selectedFile?: Signal<string>, imageUrl?: Signal<string>) => Promise<void>>;
|