@wokki20/jspt 2.0.3

package/dist/jspt.css

@@ -0,0 +1,264 @@
+.toast-container {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    transition: all 0.3s ease;
+}
+
+.toast-container .toast {
+    transform: translateY(var(--translate, 0px)) scale(var(--scale, 1));
+    transition: transform 0.25s ease, opacity 0.25s ease, height 0.25s ease;
+    pointer-events: auto;
+    z-index: 1;
+}
+
+.toast-container .toast.stacked {
+    box-shadow: none;
+}
+
+.toast-container:hover .toast {
+    transform: translateY(0);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.toast-container .toast {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    background-color: #333;
+    border: 1px solid #555;
+    color: #fff;
+    padding: 10px 15px;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    gap: 10px;
+    height: 20px;
+    max-width: 350px;
+    transition: height 0.3s ease, transform 0.25s ease;
+    animation: toast-slide-in 0.25s ease;
+    overflow: hidden;
+}
+
+@keyframes toast-slide-in {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes toast-slide-out {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+
+.toast-container .toast.toast-default-error {
+    background-color: #9e251d;
+    border-color: #f44336;
+}
+
+.toast-container .toast .toast-icon {
+    cursor: var(--cursor, default);
+    transition: all 0.3s ease;
+    color: #fff;
+}
+
+.toast-container .toast .toast-icon.toast-icon-image {
+    width: 20px;
+    height: 20px;
+    filter: brightness(1);
+}
+
+.toast-container .toast .toast-icon.action:hover{
+    color: #ccc;
+    transform: scale(1.2);
+    pointer-events: all;
+}
+
+.toast-container .toast .toast-icon.toast-icon-image.action:hover {
+    filter: brightness(0.8);
+    transform: scale(1.2);
+}
+
+.toast-container .toast .toast-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    user-select: none;
+}
+
+.toast-container:hover .toast .toast-text {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+    word-break: break-word;
+}
+
+.toast-container .toast .toast-duration-bar {
+    position: fixed;
+    bottom: -1px;
+    left: 0;
+    width: 0;
+    height: 3px;
+    background-color: #ffffff;
+    transition: width 0.3s linear;
+    border-radius: 3px;
+}
+
+.toast-link {
+    color: #ffffff;
+    text-decoration: underline;
+}
+
+.popup-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s ease;
+}
+
+.popup-container .popup {
+    background-color: #333;
+    border: 1px solid #555;
+    color: #fff;
+    padding: 0px;
+    border-radius: 20px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    gap: 10px;
+    min-width: 350px;
+}
+
+.popup-container .popup .popup-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    gap: 10px;
+    border-bottom: 1px solid #555;
+    padding: 15px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
+
+.popup-container .popup .popup-header p {
+    margin: 0px;
+}
+
+.popup-container .popup .popup-header .popup-header-close {
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #fff;
+    font-size: 25px;
+}
+
+.popup-container .popup .popup-header .popup-header-close:hover {
+    color: #ccc;
+    transform: scale(1.1);
+}
+
+.popup-container .popup .popup-content {
+    padding: 0px 15px 15px 15px;
+}
+
+.popup-error-code {
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px;
+    overflow: hidden;
+    border: 1px solid #555;
+    margin-bottom: 0px;
+    user-select: none;
+}
+
+.popup-error-code code {
+    background-color: #333;
+    padding: 0px !important;
+}
+
+.popup-error-code-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #161616;
+    border-bottom: 1px solid #555;
+    padding: 10px 15px;
+}
+
+.popup-error-code-header-file {
+    margin: 0px;
+    font-size: 15px;
+    user-select: none;
+}
+
+.popup-error-code-line:nth-child(2n) {
+    background-color: transparent;
+}
+
+.popup-error-code-line:nth-child(2n+1) {
+    background-color: #1f1f1f;
+}
+
+.popup-error-code-line {
+    white-space: pre;
+    display: flex;
+    width: 100%;
+    font-size: 15px;
+    user-select: text;
+}
+
+.popup-error-code-line-number {
+    user-select: none;
+    margin-right: 5px;
+    margin-left: 5px;
+}
+
+.popup-error-code-line:nth-child(2n).popup-error-code-line-highlight {
+    background-color: #47430b;
+    animation: popup-error-code-line-highlight 1s ease alternate infinite;
+}
+
+@keyframes popup-error-code-line-highlight {
+    from {
+        background-color: #47430b;
+    }
+    to {
+        background-color: transparent;
+    }
+}
+
+.popup-error-code-line:nth-child(2n+1).popup-error-code-line-highlight {
+    background-color: #47430b;
+    animation: popup-error-code-line-highlight-dark 1s ease alternate infinite;
+}
+
+@keyframes popup-error-code-line-highlight-dark {
+    from {
+        background-color: #47430b;
+    }
+    to {
+        background-color: #1f1f1f;
+    }
+}
+
+.input#onclick,
+.input#icon_left_action,
+.input#icon_right_action {
+    resize: vertical;
+}

package/dist/jspt.d.ts

@@ -0,0 +1,49 @@
+export interface PopupOptions {
+    style?: 'default';
+    content_type?: 'text' | 'html';
+    header?: string;
+    title?: string;
+    message?: string;
+    content?: string;
+    close_on_blur?: boolean;
+    custom_id?: string;
+}
+
+export interface ToastOptions {
+    style?: 'default' | 'default-error' | string;
+    message: string;
+    custom_id?: string;
+    icon_left?: string;
+    icon_left_type?: 'google_material_rounded' | 'google_material_outlined' | 'svg' | 'image' | 'text' | 'emoji';
+    icon_left_action?: () => void;
+    icon_right?: string;
+    icon_right_type?: 'google_material_rounded' | 'google_material_outlined' | 'svg' | 'image' | 'text' | 'emoji';
+    icon_right_action?: () => void;
+    duration?: number;
+    close_on_click?: boolean;
+    onclick?: () => void;
+}
+
+export interface ClosePopupOptions {
+    custom_id: string;
+}
+
+export function makePopup(options: PopupOptions): void;
+
+export function makeToast(options: ToastOptions): void;
+
+export function closePopup(options: ClosePopupOptions): void;
+
+declare const jspt: {
+    makePopup: typeof makePopup;
+    makeToast: typeof makeToast;
+    closePopup: typeof closePopup;
+};
+
+export default jspt;
+
+declare global {
+    interface Window {
+        jspt: typeof jspt;
+    }
+}