lupine.components 1.1.13 → 1.1.15

package/src/components/notice-message.tsx

@@ -1,118 +1,118 @@
-import { CssProps, bindGlobalStyle } from 'lupine.web';
-/**
-How to use:
-  Notification.sendMessage(message);
-*/
-export enum NotificationColor {
-  Success = 'var(--success-bg-color)',
-  Info = 'var(--info-bg-color)',
-  Warning = 'var(--warning-bg-color)',
-  Error = 'var(--error-bg-color)',
-}
-export const notificationColorFromValue = (value: string) => {
-  switch (value) {
-    case 'Success':
-      return NotificationColor.Success;
-    case 'Info':
-      return NotificationColor.Info;
-    case 'Warning':
-      return NotificationColor.Warning;
-    case 'Error':
-      return NotificationColor.Error;
-  }
-  return NotificationColor.Info;
-};
-export class NotificationMessage {
-  // public static readonly Color = NotificationColor;
-
-  private static initialized = false;
-  private static container: HTMLElement;
-
-  static init() {
-    /* styles for resizable splitter */
-    const css: CssProps = {
-      position: 'fixed',
-      top: 0,
-      right: 0,
-      height: 'auto',
-      overflowY: 'auto',
-      maxHeight: '100%',
-      width: '100%',
-      maxWidth: '400px',
-      // cursor: 'pointer',
-      // backgroundColor: '#fefefe',
-      padding: '0 10px',
-      zIndex: 'var(--layer-notice)',
-      // borderRadius: '6px',
-      // boxShadow: '0px 0px 2px #000',
-      '>div': {
-        color: 'var(--notice-color-with-bg)',
-        padding: '10px 8px',
-        margin: '16px 0',
-        borderRadius: '6px',
-        boxShadow: 'var(--cover-box-shadow)', //'3px 3px 8px #767676',
-        transition: 'all 0.5s',
-        transform: 'scale(0.1)',
-        opacity: 0,
-      },
-      '.close-btn': {
-        position: 'absolute',
-        top: '-2px',
-        right: '3px',
-        color: 'var(--notice-color-with-bg)',
-        fontWeight: 'bold',
-        fontSize: '22px',
-        lineHeight: '20px',
-        cursor: 'pointer',
-        transition: '0.3s',
-      },
-
-      '.close-btn:hover': {
-        color: 'black',
-      },
-    };
-    bindGlobalStyle('lj_notification', css);
-
-    let container = document.querySelector('.lj_notification');
-    if (!container) {
-      container = document.createElement('div');
-      container.className = 'lj_notification';
-      document.body.appendChild(container);
-      this.container = container as HTMLElement;
-    }
-  }
-
-  static sendMessage(message: string, backgroundColor = NotificationColor.Info, permanent = false, showTime = 3000) {
-    if (!this.initialized) {
-      this.initialized = true;
-      this.init();
-    }
-    this.container.scrollTop = 0;
-    const div = document.createElement('div');
-    div.innerHTML = message;
-    div.style.backgroundColor = backgroundColor;
-    this.container.insertBefore(div, this.container.firstChild);
-    setTimeout(() => {
-      div.style.opacity = '1';
-      div.style.transform = 'scale(1)';
-    }, 0);
-
-    if (permanent) {
-      const closeBtn = document.createElement('span');
-      closeBtn.innerHTML = '×';
-      closeBtn.className = 'close-btn';
-      div.appendChild(closeBtn);
-      closeBtn.onclick = () => {
-        this.container.removeChild(div);
-      };
-    } else {
-      setTimeout(() => {
-        div.style.opacity = '0';
-        div.style.transform = 'scale(0.1)';
-        setTimeout(() => {
-          this.container.removeChild(div);
-        }, 1000);
-      }, showTime);
-    }
-  }
-}
+import { CssProps, bindGlobalStyle } from 'lupine.web';
+/**
+How to use:
+  Notification.sendMessage(message);
+*/
+export enum NotificationColor {
+  Success = 'var(--success-bg-color)',
+  Info = 'var(--info-bg-color)',
+  Warning = 'var(--warning-bg-color)',
+  Error = 'var(--error-bg-color)',
+}
+export const notificationColorFromValue = (value: string) => {
+  switch (value) {
+    case 'Success':
+      return NotificationColor.Success;
+    case 'Info':
+      return NotificationColor.Info;
+    case 'Warning':
+      return NotificationColor.Warning;
+    case 'Error':
+      return NotificationColor.Error;
+  }
+  return NotificationColor.Info;
+};
+export class NotificationMessage {
+  // public static readonly Color = NotificationColor;
+
+  private static initialized = false;
+  private static container: HTMLElement;
+
+  static init() {
+    /* styles for resizable splitter */
+    const css: CssProps = {
+      position: 'fixed',
+      top: 0,
+      right: 0,
+      height: 'auto',
+      overflowY: 'auto',
+      maxHeight: '100%',
+      width: '100%',
+      maxWidth: '400px',
+      // cursor: 'pointer',
+      // backgroundColor: '#fefefe',
+      padding: '0 10px',
+      zIndex: 'var(--layer-notice)',
+      // borderRadius: '6px',
+      // boxShadow: '0px 0px 2px #000',
+      '>div': {
+        color: 'var(--notice-color-with-bg)',
+        padding: '10px 8px',
+        margin: '16px 0',
+        borderRadius: '6px',
+        boxShadow: 'var(--cover-box-shadow)', //'3px 3px 8px #767676',
+        transition: 'all 0.5s',
+        transform: 'scale(0.1)',
+        opacity: 0,
+      },
+      '.close-btn': {
+        position: 'absolute',
+        top: '-2px',
+        right: '3px',
+        color: 'var(--notice-color-with-bg)',
+        fontWeight: 'bold',
+        fontSize: '22px',
+        lineHeight: '20px',
+        cursor: 'pointer',
+        transition: '0.3s',
+      },
+
+      '.close-btn:hover': {
+        color: 'black',
+      },
+    };
+    bindGlobalStyle('lj_notification', css);
+
+    let container = document.querySelector('.lj_notification');
+    if (!container) {
+      container = document.createElement('div');
+      container.className = 'lj_notification';
+      document.body.appendChild(container);
+      this.container = container as HTMLElement;
+    }
+  }
+
+  static sendMessage(message: string, backgroundColor = NotificationColor.Info, permanent = false, showTime = 3000) {
+    if (!this.initialized) {
+      this.initialized = true;
+      this.init();
+    }
+    this.container.scrollTop = 0;
+    const div = document.createElement('div');
+    div.innerHTML = message;
+    div.style.backgroundColor = backgroundColor;
+    this.container.insertBefore(div, this.container.firstChild);
+    setTimeout(() => {
+      div.style.opacity = '1';
+      div.style.transform = 'scale(1)';
+    }, 0);
+
+    if (permanent) {
+      const closeBtn = document.createElement('span');
+      closeBtn.innerHTML = '×';
+      closeBtn.className = 'close-btn';
+      div.appendChild(closeBtn);
+      closeBtn.onclick = () => {
+        this.container.removeChild(div);
+      };
+    } else {
+      setTimeout(() => {
+        div.style.opacity = '0';
+        div.style.transform = 'scale(0.1)';
+        setTimeout(() => {
+          this.container.removeChild(div);
+        }, 1000);
+      }, showTime);
+    }
+  }
+}

package/src/components/page-title.tsx

@@ -1,6 +1,6 @@
-import { setPageTitle } from "lupine.web";
-
-export const PageTitle = ({ children }: { children: string }) => {
-  setPageTitle(children);
-  return <></>;
-};
+import { setPageTitle } from 'lupine.web';
+
+export const PageTitle = ({ children }: { children: string }) => {
+  setPageTitle(children);
+  return <></>;
+};

package/src/components/paging-link.tsx

@@ -1,175 +1,175 @@
-import { CssProps, RefProps, bindGlobalStyle, getRenderPageProps } from 'lupine.web';
-
-let _DEFAULT_PAGE_LIMIT = 10;
-export const getDefaultPageLimit = () => {
-  return _DEFAULT_PAGE_LIMIT;
-};
-export const setDefaultPageLimit = (limit: number) => {
-  _DEFAULT_PAGE_LIMIT = limit;
-};
-const pageLinkOptions = [10, 20, 50, 100, 200, 500];
-export type PagingLinkProps = {
-  itemsCount: number;
-  pageLimit?: number;
-  pageIndex?: number;
-  baseLink: string;
-  onClick?: (index: number) => void; // if onClick is set then use it instead of href
-  textPerpage?: string;
-  textOk?: string;
-  textTo?: string;
-  textPage?: string;
-  showControl?: boolean;
-};
-
-export const PagingLink = ({
-  itemsCount,
-  pageLimit = getDefaultPageLimit(),
-  pageIndex = 0,
-  baseLink,
-  onClick,
-  textPerpage = '/Page',
-  textOk = 'Go',
-  textTo = 'To',
-  textPage = 'Page',
-  showControl,
-}: PagingLinkProps) => {
-  const css: CssProps = {
-    display: 'flex',
-    justifyContent: 'end',
-    alignItems: 'center',
-    textAlign: 'right',
-    padding: '6px 16px 6px 0',
-    fontSize: '14px',
-    '.paging-link-index a, .paging-link-index.current': {
-      padding: '2px 6px',
-      textDecoration: 'none',
-    },
-    '.paging-link-index.current': {
-      fontWeight: 'bold',
-    },
-    'span.paging-link-index a:hover, span.paging-link-go a:hover': {
-      textDecoration: 'underline',
-    },
-    '.paging-link-ctl-box': {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    '.paging-link-ctl-box .paging-link-jump': {
-      width: '50px',
-      padding: '1px 3px',
-      margin: '0 3px',
-      textAlign: 'right',
-    },
-    '.paging-link-ctl-box .paging-link-limit': {
-      width: '90px',
-      padding: '1px 3px',
-      margin: '0 3px',
-    },
-    '.paging-link-ok': {
-      margin: '0 3px',
-    },
-  };
-
-  bindGlobalStyle('paging-link-box', css);
-  pageIndex = pageIndex ?? (Number.parseInt(getRenderPageProps().query['pg_i'] || '') || 0);
-  pageLimit = pageLimit || _DEFAULT_PAGE_LIMIT;
-  let maxPages = Math.floor(itemsCount / pageLimit);
-  if (itemsCount > 0 && pageLimit > 0) {
-    if (itemsCount % pageLimit !== 0) {
-      maxPages++;
-    }
-    if (pageIndex > maxPages) {
-      pageIndex = maxPages - 1;
-    }
-  }
-
-  const onPageLimitChange = (e: Event) => {
-    const limit = Number((e.target as HTMLSelectElement).value || '0');
-    if (limit > 0) {
-      setDefaultPageLimit(limit);
-      onClick && onClick(pageIndex);
-    }
-  };
-
-  const onOkClick = () => {
-    let index = Number((ref.$('.paging-link-jump') as HTMLInputElement).value || '0');
-    if (index < 1) {
-      index = 1;
-    }
-    if (index > maxPages) {
-      index = maxPages;
-    }
-    onClick && onClick(index - 1);
-  };
-
-  const ref: RefProps = {};
-  return (
-    <div ref={ref} class='paging-link-box'>
-      {pageIndex > 0 ? (
-        <span class='paging-link-go'>
-          <a
-            href={onClick ? 'javascript:void(0)' : baseLink + '?pg_i=' + (pageIndex - 1)}
-            onClick={() => onClick && onClick(pageIndex - 1)}
-          >
-            &lt;
-          </a>
-        </span>
-      ) : (
-        <span class='paging-link-go disabled'>&lt;</span>
-      )}
-
-      {Array.from({ length: maxPages }, (_, i) => i).map((i) => (
-        <>
-          {i < 2 || i >= maxPages - 2 || (i > pageIndex - 3 && i < pageIndex + 3) ? (
-            i == pageIndex ? (
-              <span class='paging-link-index current'>{i + 1}</span>
-            ) : (
-              <span class='paging-link-index'>
-                <a
-                  href={onClick ? 'javascript:void(0)' : baseLink + '?pg_i=' + i}
-                  onClick={() => onClick && onClick(i)}
-                >
-                  {i + 1}
-                </a>
-              </span>
-            )
-          ) : (
-            (i == pageIndex - 4 || i == pageIndex + 4) && <span class='paging-link-skip'>...</span>
-          )}
-        </>
-      ))}
-
-      {pageIndex < maxPages - 1 ? (
-        <span class='paging-link-go'>
-          <a
-            href={onClick ? 'javascript:void(0)' : baseLink + '?pg_i=' + (pageIndex + 1)}
-            onClick={() => onClick && onClick(pageIndex + 1)}
-          >
-            &gt;
-          </a>
-        </span>
-      ) : (
-        <span class='paging-link-go disabled'>&gt;</span>
-      )}
-      {showControl && (
-        <div class='paging-link-ctl-box'>
-          {textTo}
-          <input class='input-base paging-link-jump input-s' type='number' value={pageIndex + 1} /> / {maxPages}{' '}
-          {textPage}
-          <button class='button-base button-s paging-link-ok' onClick={onOkClick}>
-            {textOk}
-          </button>
-          <select class='input-base paging-link-limit input-s' onChange={onPageLimitChange}>
-            <option value=''> - </option>
-            {pageLinkOptions.map((page) => (
-              <option value={page}>
-                {page}
-                {textPerpage}
-              </option>
-            ))}
-          </select>
-        </div>
-      )}
-    </div>
-  );
-};
+import { CssProps, RefProps, bindGlobalStyle, getRenderPageProps } from 'lupine.web';
+
+let _DEFAULT_PAGE_LIMIT = 10;
+export const getDefaultPageLimit = () => {
+  return _DEFAULT_PAGE_LIMIT;
+};
+export const setDefaultPageLimit = (limit: number) => {
+  _DEFAULT_PAGE_LIMIT = limit;
+};
+const pageLinkOptions = [10, 20, 50, 100, 200, 500];
+export type PagingLinkProps = {
+  itemsCount: number;
+  pageLimit?: number;
+  pageIndex?: number;
+  baseLink: string;
+  onClick?: (index: number) => void; // if onClick is set then use it instead of href
+  textPerpage?: string;
+  textOk?: string;
+  textTo?: string;
+  textPage?: string;
+  showControl?: boolean;
+};
+
+export const PagingLink = ({
+  itemsCount,
+  pageLimit = getDefaultPageLimit(),
+  pageIndex = 0,
+  baseLink,
+  onClick,
+  textPerpage = '/Page',
+  textOk = 'Go',
+  textTo = 'To',
+  textPage = 'Page',
+  showControl,
+}: PagingLinkProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    justifyContent: 'end',
+    alignItems: 'center',
+    textAlign: 'right',
+    padding: '6px 16px 6px 0',
+    fontSize: '14px',
+    '.paging-link-index a, .paging-link-index.current': {
+      padding: '2px 6px',
+      textDecoration: 'none',
+    },
+    '.paging-link-index.current': {
+      fontWeight: 'bold',
+    },
+    'span.paging-link-index a:hover, span.paging-link-go a:hover': {
+      textDecoration: 'underline',
+    },
+    '.paging-link-ctl-box': {
+      display: 'flex',
+      alignItems: 'center',
+    },
+    '.paging-link-ctl-box .paging-link-jump': {
+      width: '50px',
+      padding: '1px 3px',
+      margin: '0 3px',
+      textAlign: 'right',
+    },
+    '.paging-link-ctl-box .paging-link-limit': {
+      width: '90px',
+      padding: '1px 3px',
+      margin: '0 3px',
+    },
+    '.paging-link-ok': {
+      margin: '0 3px',
+    },
+  };
+
+  bindGlobalStyle('paging-link-box', css);
+  pageIndex = pageIndex ?? (Number.parseInt(getRenderPageProps().query['pg_i'] || '') || 0);
+  pageLimit = pageLimit || _DEFAULT_PAGE_LIMIT;
+  let maxPages = Math.floor(itemsCount / pageLimit);
+  if (itemsCount > 0 && pageLimit > 0) {
+    if (itemsCount % pageLimit !== 0) {
+      maxPages++;
+    }
+    if (pageIndex > maxPages) {
+      pageIndex = maxPages - 1;
+    }
+  }
+
+  const onPageLimitChange = (e: Event) => {
+    const limit = Number((e.target as HTMLSelectElement).value || '0');
+    if (limit > 0) {
+      setDefaultPageLimit(limit);
+      onClick && onClick(pageIndex);
+    }
+  };
+
+  const onOkClick = () => {
+    let index = Number((ref.$('.paging-link-jump') as HTMLInputElement).value || '0');
+    if (index < 1) {
+      index = 1;
+    }
+    if (index > maxPages) {
+      index = maxPages;
+    }
+    onClick && onClick(index - 1);
+  };
+
+  const ref: RefProps = {};
+  return (
+    <div ref={ref} class='paging-link-box'>
+      {pageIndex > 0 ? (
+        <span class='paging-link-go'>
+          <a
+            href={onClick ? 'javascript:void(0)' : baseLink + '?pg_i=' + (pageIndex - 1)}
+            onClick={() => onClick && onClick(pageIndex - 1)}
+          >
+            &lt;
+          </a>
+        </span>
+      ) : (
+        <span class='paging-link-go disabled'>&lt;</span>
+      )}
+
+      {Array.from({ length: maxPages }, (_, i) => i).map((i) => (
+        <>
+          {i < 2 || i >= maxPages - 2 || (i > pageIndex - 3 && i < pageIndex + 3) ? (
+            i == pageIndex ? (
+              <span class='paging-link-index current'>{i + 1}</span>
+            ) : (
+              <span class='paging-link-index'>
+                <a
+                  href={onClick ? 'javascript:void(0)' : baseLink + '?pg_i=' + i}
+                  onClick={() => onClick && onClick(i)}
+                >
+                  {i + 1}
+                </a>
+              </span>
+            )
+          ) : (
+            (i == pageIndex - 4 || i == pageIndex + 4) && <span class='paging-link-skip'>...</span>
+          )}
+        </>
+      ))}
+
+      {pageIndex < maxPages - 1 ? (
+        <span class='paging-link-go'>
+          <a
+            href={onClick ? 'javascript:void(0)' : baseLink + '?pg_i=' + (pageIndex + 1)}
+            onClick={() => onClick && onClick(pageIndex + 1)}
+          >
+            &gt;
+          </a>
+        </span>
+      ) : (
+        <span class='paging-link-go disabled'>&gt;</span>
+      )}
+      {showControl && (
+        <div class='paging-link-ctl-box'>
+          {textTo}
+          <input class='input-base paging-link-jump input-s' type='number' value={pageIndex + 1} /> / {maxPages}{' '}
+          {textPage}
+          <button class='button-base button-s paging-link-ok' onClick={onOkClick}>
+            {textOk}
+          </button>
+          <select class='input-base paging-link-limit input-s' onChange={onPageLimitChange}>
+            <option value=''> - </option>
+            {pageLinkOptions.map((page) => (
+              <option value={page}>
+                {page}
+                {textPerpage}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/panel.tsx

@@ -1,21 +1,21 @@
-import { CssProps } from 'lupine.web';
-
-export type PanelProps = {
-  children: any;
-  className?: string;
-  css?: CssProps;
-};
-
-export const Panel = ({ children, className, css }: PanelProps) => {
-  const newCss: CssProps = {
-    display: 'flex',
-    flexDirection: 'column',
-    ...css,
-  };
-
-  return (
-    <div css={newCss} class={['panel-box', className].join(' ')}>
-      {children}
-    </div>
-  );
-};
+import { CssProps } from 'lupine.web';
+
+export type PanelProps = {
+  children: any;
+  className?: string;
+  css?: CssProps;
+};
+
+export const Panel = ({ children, className, css }: PanelProps) => {
+  const newCss: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    ...css,
+  };
+
+  return (
+    <div css={newCss} class={['panel-box', className].join(' ')}>
+      {children}
+    </div>
+  );
+};