lupine.web 1.0.16 → 1.0.18

package/src/components/notice-message.tsx

@@ -1,119 +0,0 @@
-import { bindGlobalStyles } from '../core';
-import { CssProps } from '../jsx';
-/**
-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',
-      },
-    };
-    bindGlobalStyles('lj_notification', '.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 +0,0 @@
-import { setPageTitle } from "../core/bind-meta";
-
-export const PageTitle = ({ children }: { children: string }) => {
-  setPageTitle(children);
-  return <></>;
-};

package/src/components/paging-link.tsx

@@ -1,100 +0,0 @@
-import { CssProps } from '../jsx';
-import { bindGlobalStyles, getRenderPageProps } from '../core';
-
-let _DEFAULT_PAGE_LIMIT = 7;
-export const getDefaultPageLimit = () => {
-  return _DEFAULT_PAGE_LIMIT;
-};
-export const setDefaultPageLimit = (limit: number) => {
-  _DEFAULT_PAGE_LIMIT = limit;
-};
-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
-};
-
-export const PagingLink = (props: PagingLinkProps) => {
-  const css: CssProps = {
-    textAlign: 'right',
-    paddingRight: '16px',
-    '.paging-link-index': {
-      padding: '0px 4px',
-    },
-    a: {
-      textDecoration: 'none',
-    },
-  };
-
-  bindGlobalStyles('paging-link-box', '.paging-link-box', css);
-  const html = [];
-  let pageIndex = props.pageIndex ?? (Number.parseInt(getRenderPageProps().query['pg_i'] || '') || 0);
-  const pageLimit = props.pageLimit || _DEFAULT_PAGE_LIMIT;
-  if (props.itemsCount > 0 && pageLimit > 0) {
-    let maxPages = Math.floor(props.itemsCount / pageLimit);
-    if (props.itemsCount % pageLimit !== 0) {
-      maxPages++;
-    }
-    if (pageIndex > maxPages) {
-      pageIndex = maxPages - 1;
-    }
-    if (pageIndex > 0) {
-      html.push(
-        <span class='paging-link-go'>
-          <a
-            href={props.onClick ? 'javascript:void(0)' : props.baseLink + '?pg_i=' + (pageIndex - 1)}
-            onClick={() => props.onClick && props.onClick(pageIndex - 1)}
-          >
-            &lt;
-          </a>
-        </span>
-      );
-    } else {
-      html.push(<span class='paging-link-go disabled'>&lt;</span>);
-    }
-    for (let i = 0; i < maxPages; i++) {
-      if (i < 2 || i >= maxPages - 2 || (i > pageIndex - 3 && i < pageIndex + 3)) {
-        if (i == pageIndex) {
-          html.push(
-            <span class='paging-link-index current'>
-              <b>{'' + (i + 1)}</b>
-            </span>
-          );
-        } else {
-          html.push(
-            <span class='paging-link-index'>
-              <a
-                href={props.onClick ? 'javascript:void(0)' : props.baseLink + '?pg_i=' + i}
-                onClick={() => props.onClick && props.onClick(i)}
-              >
-                {'' + (i + 1)}
-              </a>
-            </span>
-          );
-        }
-      } else {
-        if (i == pageIndex - 4 || i == pageIndex + 4) {
-          html.push(<span class='paging-link-skip'>...</span>);
-        }
-      }
-    }
-    if (pageIndex < maxPages - 1) {
-      html.push(
-        <span class='paging-link-go'>
-          <a
-            href={props.onClick ? 'javascript:void(0)' : props.baseLink + '?pg_i=' + (pageIndex + 1)}
-            onClick={() => props.onClick && props.onClick(pageIndex + 1)}
-          >
-            &gt;
-          </a>
-        </span>
-      );
-    } else {
-      html.push(<span class='paging-link-go disabled'>&gt;</span>);
-    }
-  }
-
-  return html.length > 0 ? <div class='paging-link-box'>{html}</div> : <></>;
-};

package/src/components/panel.tsx

@@ -1,21 +0,0 @@
-import { CssProps } from '../jsx';
-
-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>
-  );
-};

package/src/components/popup-menu.tsx

@@ -1,218 +0,0 @@
-import { RefProps, stopPropagation } from 'lupine.web';
-
-export type PopupMenuOpenMenuProps = { handle?: Function };
-
-export type PopupMenuProps = {
-  list: string[];
-  defaultValue: string;
-  tips?: string;
-  minWidth?: string;
-  maxWidth?: string;
-  maxHeight?: string;
-  handleSelected?: Function;
-  handleOpened?: Function;
-  handleClosed?: Function;
-  noUpdateValue?: boolean;
-  refOpenMenu?: PopupMenuOpenMenuProps;
-};
-
-export type PopupMenuWithButtonProps = { label: string } & PopupMenuProps;
-
-export const PopupMenuWithButton = (props: PopupMenuWithButtonProps) => {
-  const handle: PopupMenuOpenMenuProps = {};
-  return (
-    <button
-      class='button-base'
-      onClick={() => {
-        handle.handle && handle.handle();
-      }}
-      css={{ '>div': { float: 'right', textAlign: 'left' } }}
-    >
-      {props.label}:{' '}
-      <PopupMenu
-        list={props.list}
-        defaultValue={props.defaultValue}
-        tips={props.tips}
-        minWidth={props.minWidth}
-        maxWidth={props.maxWidth}
-        maxHeight={props.maxHeight}
-        handleSelected={props.handleSelected}
-        handleOpened={props.handleOpened}
-        handleClosed={props.handleClosed}
-        noUpdateValue={props.noUpdateValue}
-        refOpenMenu={handle}
-      ></PopupMenu>
-    </button>
-  );
-};
-
-export type PopupMenuWithLabelProps = { label: string } & PopupMenuProps;
-
-export const PopupMenuWithLabel = (props: PopupMenuWithLabelProps) => {
-  const handle: PopupMenuOpenMenuProps = {};
-  return (
-    <div
-      onClick={() => {
-        handle.handle && handle.handle();
-      }}
-      css={{ cursor: 'pointer', '>div': { float: 'right', textAlign: 'left' } }}
-    >
-      {props.label}:{' '}
-      <PopupMenu
-        list={props.list}
-        defaultValue={props.defaultValue}
-        tips={props.tips}
-        minWidth={props.minWidth}
-        maxWidth={props.maxWidth}
-        maxHeight={props.maxHeight}
-        handleSelected={props.handleSelected}
-        handleOpened={props.handleOpened}
-        handleClosed={props.handleClosed}
-        noUpdateValue={props.noUpdateValue}
-        refOpenMenu={handle}
-      ></PopupMenu>
-    </div>
-  );
-};
-
-export const PopupMenu = ({
-  list,
-  defaultValue,
-  tips = '',
-  minWidth,
-  maxWidth,
-  maxHeight,
-  handleSelected,
-  handleOpened,
-  handleClosed,
-  noUpdateValue,
-  refOpenMenu,
-}: PopupMenuProps) => {
-  const css: any = {
-    '.popup-menu-item': {
-      padding: '0 0 1px 0',
-      display: 'inline-block',
-      position: 'relative',
-      '.popup-menu-text': {
-        display: 'inline-block',
-        cursor: 'pointer',
-        whiteSpace: 'nowrap',
-        marginRight: '15px',
-      },
-      // cover-box-shadow
-      '.popup-menu-text::after': {
-        content: '""',
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        marginLeft: '3px',
-        width: 0,
-        height: 0,
-        borderLeft: '5px solid transparent',
-        borderRight: '5px solid transparent',
-        borderTop: '5px solid var(--primary-color)',
-      },
-    },
-    '.popup-menu-item:hover': {
-      padding: '1px 0 0 0',
-    },
-    '.popup-menu-bottom': {
-      position: 'relative',
-      height: '1px',
-      '.popup-menu-list': {
-        display: 'none',
-        position: 'absolute',
-        fontSize: 'var(--menu-font-size)',
-        top: 0,
-        left: '2px',
-        color: 'var(--activatable-color-normal)',
-        backgroundColor: 'var(--activatable-bg-color-normal)',
-        zIndex: 'var(--layer-menu)',
-        borderRadius: '4px',
-        border: '1px solid #ddd',
-        padding: '5px 0px',
-        overflow: 'auto',
-        'line-height': '1.2em',
-        'min-width': minWidth || 'auto',
-        'max-width': maxWidth || '200px',
-        'max-height': maxHeight || '300px',
-        'box-shadow': 'var(--cover-box-shadow)', //'#0000004c 0px 19px 38px, #00000038 0px 15px 12px',
-        '.menu-focus': {
-          position: 'absolute',
-          height: '0px',
-        },
-        '.item': {
-          padding: '2px 12px',
-        },
-        '.item:hover': {
-          padding: '2px 11px 2px 13px',
-          color: 'var(--activatable-color-hover)',
-          backgroundColor: 'var(--activatable-bg-color-hover)',
-          cursor: 'pointer',
-        },
-      },
-    },
-  };
-
-  let ref: RefProps = { id: '' };
-  let isShowing = false;
-  const handleClick = (event: any) => {
-    stopPropagation(event);
-
-    handleOpened && handleOpened();
-    // console.log('=======22', event);
-    isShowing = !isShowing;
-    ref.$('.popup-menu-list').style.display = isShowing ? 'inline-block' : 'none';
-    ref.$('.popup-menu-list .menu-focus').focus();
-  };
-  if (refOpenMenu) {
-    refOpenMenu.handle = handleClick;
-  }
-  const itemClick = (event: any) => {
-    stopPropagation(event);
-
-    // console.log('=======', event);
-    isShowing = false;
-    ref.$('.popup-menu-list').style.display = 'none';
-    if (event.target) {
-      if (noUpdateValue !== true) {
-        ref.$('.popup-menu-item .popup-menu-text').innerText = event.target.innerText;
-      }
-      if (handleSelected) {
-        handleSelected(event.target.innerText);
-      }
-    }
-    handleClosed && handleClosed();
-  };
-  const onBlur = (event: any) => {
-    setTimeout(() => {
-      ref.$('.popup-menu-list').style.display = 'none';
-      isShowing && handleClosed && handleClosed();
-      isShowing = false;
-    }, 300);
-  };
-
-  return (
-    <div ref={ref} css={css} onClick={handleClick} title={tips}>
-      <div class='popup-menu-item'>
-        <span class='popup-menu-text'>{defaultValue || '&nbsp;'}</span>
-      </div>
-      <div class='popup-menu-bottom'>
-        <div class='popup-menu-list'>
-          <div>
-            {list.map((item) => {
-              return item === '' ? (
-                <hr />
-              ) : (
-                <div class='item' onClick={itemClick}>
-                  {item}
-                </div>
-              );
-            })}
-          </div>
-          <div class='menu-focus' onBlur={onBlur} tabIndex={0}></div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/progress.tsx

@@ -1,91 +0,0 @@
-import { RefProps } from '../jsx';
-import { HtmlVar } from './html-var';
-
-export type ProgressHookProps = {
-  onProgress?: (percentage: number, chunkNumber: number, totalChunks: number) => void;
-  onShow?: (show: boolean, title?: string) => void;
-};
-export type ProgressProps = {
-  hook: ProgressHookProps;
-};
-
-export const Progress = (props: ProgressProps) => {
-  const css: any = {
-    position: 'fixed',
-    display: 'flex',
-    bottom: '0',
-    left: '0',
-    width: '100%',
-    zIndex: 'var(--layer-modal-over)',
-    flexDirection: 'column',
-    backgroundColor: '#e6e6e6de',
-    padding: '16px',
-    '.progress-box': {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '100%',
-      height: 'auto',
-      margin: 'auto',
-    },
-    '.progress-bar': {
-      display: 'flex',
-      width: '100%',
-      height: '60px',
-      borderRadius: '4px',
-      overflow: 'hidden',
-    },
-    '.progress-bar1': {
-      height: '100%',
-      width: '0%',
-      backgroundColor: '#49e57e',
-    },
-    '.progress-bar2': {
-      height: '100%',
-      width: '100%',
-      backgroundColor: '#2bb8cd',
-    },
-    '.progress-tips': {
-      marginTop: '10px',
-      fontSize: '30px',
-      color: '#49e57e',
-    },
-  };
-
-  props.hook.onProgress = (percentage: number, chunkNumber: number, totalChunks: number) => {
-    // console.log(`Upload progress: ${percentage}% (chunk ${chunkNumber} of ${totalChunks})`);
-    percentage = Math.round(percentage * 100);
-    const bar1 = document.querySelector('.progress-bar1') as HTMLElement;
-    const bar2 = document.querySelector('.progress-bar2') as HTMLElement;
-    bar1.style.width = `${percentage}%`;
-    bar2.style.width = `${1 - percentage}%`;
-    dom.value = `${percentage}%`;
-  };
-  props.hook.onShow = (show: boolean, title?: string) => {
-    if (title) {
-      domTitle.value = title;
-    }
-    if (show) {
-      ref.current?.classList.remove('d-none');
-    } else {
-      ref.current?.classList.add('d-none');
-    }
-  };
-
-  const ref: RefProps = {};
-  const domTitle = HtmlVar('Progress');
-  const dom = HtmlVar('0 %');
-  return (
-    <div ref={ref} css={css} class='progress-top d-none'>
-      <div class='progress-box'>
-        <div class='progress-title mb-m align-left w-100p'>{domTitle.node}</div>
-        <div class='progress-bar'>
-          <div class='progress-bar1'></div>
-          <div class='progress-bar2'></div>
-        </div>
-        <div class='progress-tips'>{dom.node}</div>
-      </div>
-    </div>
-  );
-};

package/src/components/redirect.tsx

@@ -1,19 +0,0 @@
-import { RefProps } from '../jsx';
-
-export type RedirectProps = {
-  title?: string;
-  url: string;
-  delaySeconds?: number;
-};
-export const Redirect = ({ title = 'redirect...', url, delaySeconds = 0 }: RedirectProps) => {
-  // if SSR is disabled, then MetaData will not be working
-  // MetaData({ httpEquiv: 'refresh', content: delaySeconds + ';URL=' + url });
-  const ref: RefProps = {
-    onLoad: async (el: Element) => {
-      setTimeout(() => {
-        window.location.href = url;
-      }, delaySeconds * 1000);
-    },
-  };
-  return <div ref={ref}>{title}</div>;
-};