fwtoolkit 0.1.0-alpha.3 → 0.1.0-alpha.6

package/css/ui_dialogs.css

@@ -0,0 +1,144 @@
+.ui-widget-overlay {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(var(--overlay-color));
+    z-index: 100;
+    backdrop-filter: blur(2px);
+}
+
+.ui-widget-overlay.no-blur {
+    backdrop-filter: none;
+}
+
+.ui-dialog {
+    position: absolute;
+    padding: 19px;
+    background-color: var(--cs-light-background);
+    border: solid 1px var(--cs-light-border);
+    box-shadow: 0 0 10px var(--cs-light-box-shadow);
+    overflow: hidden;
+    border-radius: 4px;
+    font-size: 14px;
+    outline: 0;
+    z-index: 1000; /* Ensure dialog stays on top */
+    user-select: none; /* Prevent interaction with background content */
+}
+
+.ui-dialog-titlebar {
+    position: relative;
+    padding: 0;
+}
+
+.ui-dialog-title {
+    font-size: 16px;
+    font-weight: 700;
+    text-transform: none;
+}
+
+.ui-dialog-buttonpane {
+    padding-top: 20px;
+}
+
+.ui-button {
+    font-size: 14px;
+    line-height: 1em;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+}
+
+.ui-dialog-titlebar-close,
+.ui-dialog-titlebar-help {
+    position: absolute;
+    right: 0.3em;
+    top: 50%;
+    width: 20px;
+    margin: -10px 0 0;
+    padding: 1px;
+    height: 20px;
+}
+
+.ui-button-icon-only {
+    width: 2em;
+    box-sizing: border-box;
+    text-indent: -9999px;
+    white-space: nowrap;
+}
+
+.ui-button-icon-only .ui-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -8px;
+    margin-left: -8px;
+}
+
+.ui-button-icon-only .ui-icon::before {
+    text-indent: 5019px;
+}
+
+/* Style for the close button specifically */
+.ui-dialog-titlebar-close {
+    order: 99; /* Push to end of flex container */
+}
+
+.ui-dialog-titlebar-close:hover,
+.ui-dialog-titlebar-help:hover {
+    color: var(--cs-dark-hover);
+}
+
+.ui-icon-closethick::before {
+    width: 0.7em;
+    height: 1em;
+    padding-top: 5px;
+    content: "\f00d";
+}
+
+.ui-icon-help::before {
+    width: 0.7em;
+    height: 1em;
+    padding-top: 5px;
+    content: "\f128";
+}
+
+.ui-dialog-content {
+    position: relative;
+    margin-top: 24px;
+    overflow: auto;
+}
+
+.ui-dialog-buttonset {
+    position: relative;
+    text-align: right;
+}
+
+.ui-dialog-buttonset .fw-button {
+    margin-left: 6px;
+}
+
+/* Make focus visible on all focusable elements */
+.ui-dialog *:focus {
+    outline: 2px solid var(--cs-dark-background);
+    outline-offset: 2px;
+}
+
+/* Style the title bar buttons specifically */
+.ui-dialog-titlebar .ui-button-icon-only {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 8px;
+    background: transparent;
+    border: none;
+}
+
+.ui-dialog-titlebar .ui-button-icon-only:focus {
+    outline: 2px solid var(--cs-dark-text);
+    outline-offset: 2px;
+    border-radius: 4px;
+}

package/css/ui_tabs.css

@@ -0,0 +1,61 @@
+.ui-tabs-nav {
+    display: flex;
+    border-bottom: 2px solid var(--tabs-border-color);
+    margin-bottom: 16px;
+    height: auto;
+    width: auto;
+}
+
+.ui-tabs-nav > li {
+    position: relative;
+    padding: 6px 18px;
+    cursor: pointer;
+    font-weight: bold;
+    color: var(--tabs-text-inactive);
+    border-bottom: 3px solid transparent;
+    margin-bottom: -2px;
+    transition: color 0.15s, border-color 0.15s;
+    float: none;
+    margin-right: 0;
+}
+
+.ui-tabs-nav > li:hover {
+    color: var(--tabs-text-active);
+}
+
+.ui-tabs-nav .fw-button {
+    color: var(--tabs-text-inactive);
+    border: none;
+    background: transparent;
+    padding: 0;
+}
+
+.ui-tabs-nav .ui-tabs-active,
+.ui-tabs-nav .current-tab {
+    color: var(--tabs-text-active);
+    border-bottom-color: var(--tabs-indicator-color);
+}
+
+.ui-tabs-nav .ui-tabs-active .fw-button,
+.ui-tabs-nav .current-tab .fw-button {
+    color: var(--tabs-text-active);
+    background: transparent;
+}
+
+.ui-tabs-nav > li:hover .fw-button {
+    color: var(--tabs-text-active);
+}
+
+.ui-tabs-panel {
+    height: auto;
+    overflow: auto;
+    min-height: 220px;
+    padding: 0;
+    margin-top: 24px;
+}
+
+.tab-link-inner {
+    display: block;
+    margin-left: 20px;
+    color: var(--cs-light-text-secondary);
+}

package/dist/basic.d.ts

@@ -0,0 +1,70 @@
+import { Dialog } from "./dialog.js";
+/** Creates a styled select with a contentmenu from a select tag.
+ * @param select The select-tag which is to be replaced.
+ * @param options
+ */
+export declare const dropdownSelect: (selectDOM: any, { onChange, width, value, button }: {
+    onChange?: (_newValue: any) => void;
+    width?: boolean;
+    value?: boolean;
+    button?: boolean;
+}) => {
+    setValue: () => void;
+    getValue: () => boolean;
+    enable?: undefined;
+    disable?: undefined;
+} | {
+    setValue: (newValue: any) => void;
+    getValue: () => boolean;
+    enable: () => any;
+    disable: () => any;
+};
+/** Checks or unchecks a checkable label. This is used for example for bibliography categories when editing bibliography items.
+ * @param label The node who's parent has to be checked or unchecked.
+ */
+export declare const setCheckableLabel: (labelEl: any) => void;
+/** Cover the page signaling to the user to wait.
+ */
+export declare const activateWait: (full?: boolean, message?: string) => void;
+/** Remove the wait cover.
+ */
+export declare const deactivateWait: () => void;
+/** Show a message to the user.
+ * @param alertType The type of message that is shown (error, warning, info or success).
+ * @param alertMsg The message text.
+ */
+export declare const addAlert: (alertType: any, alertMsg: any) => void;
+export declare const showSystemMessage: (message: any, buttons?: {
+    type: string;
+}[]) => Dialog;
+export declare const localizeDate: (milliseconds: any, type?: string) => any;
+/**
+ * Turn string literals into single line, removing spaces at start of line
+ */
+export declare const noSpaceTmp: (strings: any, ...values: any[]) => string;
+export declare const escapeText: (text: any) => any;
+/**
+ * Return an inline info-icon with a hover tooltip containing the given HTML.
+ * Use only with trusted HTML content.
+ *
+ * @param {string} html - The tooltip content (HTML string)
+ * @returns {string} HTML for the info tooltip
+ */
+export declare const infoTooltip: (html: any) => string;
+export declare const unescapeText: (text: any) => any;
+/**
+ * Return a cancel promise if you need to cancel a promise chain. Import as
+ * ES6 promises are not (yet) cancelable.
+ */
+export declare const cancelPromise: () => Promise<unknown>;
+export declare const findTarget: (event: any, selector: any, el?: {}) => boolean;
+export declare const whenReady: () => Promise<unknown>;
+export declare const setDocTitle: (title: any, app: any) => void;
+export declare const langName: (code: any) => any;
+/** Enable ISO date picker on a text input by overlaying a native date picker.
+ * The text input displays ISO format (YYYY-MM-DD) while using the native picker for selection.
+ * @param {HTMLInputElement} inputEl - The text input element to enhance
+ * @param {boolean} minToday - If true, sets min date to today (default: false)
+ */
+export declare const enableDatePicker: (inputEl: any, minToday?: boolean) => void;
+//# sourceMappingURL=basic.d.ts.map

package/dist/basic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic.d.ts","sourceRoot":"","sources":["../src/basic.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAA;AAGlC;;;GAGG;AAEH,eAAO,MAAM,cAAc,GACvB,cAAS,EACT;;;;;CAA0E;;;;;;;;;;CAyI7E,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAG,YAAO,SAMvC,CAAA;AAID;GACG;AACH,eAAO,MAAM,YAAY,GAAI,cAAY,EAAE,gBAAY,SA0BtD,CAAA;AAED;GACG;AACH,eAAO,MAAM,cAAc,YAc1B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,cAAS,EAAE,aAAQ,SA6B3C,CAAA;AAGD,eAAO,MAAM,iBAAiB,GAAI,YAAO,EAAE;;GAA2B,WAQrE,CAAA;AAWD,eAAO,MAAM,YAAY,GAAI,iBAAY,EAAE,aAAa,QAiCvD,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,UAAU,GAAI,YAAO,EAAE,GAAG,aAAM,WAkB5C,CAAA;AAED,eAAO,MAAM,UAAU,GAAG,SAAI,QAQ7B,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAG,SAAI,WACoG,CAAA;AAEnI,eAAO,MAAM,YAAY,GAAG,SAAI,QAKD,CAAA;AAC/B;;;GAGG;AAEH,eAAO,MAAM,aAAa,wBAA8B,CAAA;AAIxD,eAAO,MAAM,UAAU,GAAI,UAAK,EAAE,aAAQ,EAAE,OAAO,YAOlD,CAAA;AAGD,eAAO,MAAM,SAAS,wBAYrB,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,UAAK,EAAE,QAAG,SAKrC,CAAA;AAyBD,eAAO,MAAM,QAAQ,GAAG,SAAI,QAE3B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,YAAO,EAAE,kBAAgB,SA0EzD,CAAA"}