lupine.web 1.0.15 → 1.0.17

package/src/components/panel.tsx

@@ -1,24 +0,0 @@
-import { CssProps, JSXInternal } from '../jsx';
-import { ContentPosition, Position } from '../types';
-
-export type PanelProps = {
-  children: any;
-  className?: string;
-  contentPosition?: ContentPosition;
-  css?: CssProps;
-};
-
-export const Panel = ({ children, className, css }: PanelProps) => {
-  const newCss: CssProps = {
-    display: 'flex',
-    flexDirection: 'column',
-    // justifyContent: ContentPosition.center,
-    ...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>;
-};

package/src/components/resizable-splitter.tsx

@@ -1,129 +0,0 @@
-import { bindGlobalStyles } from '../core';
-import { CssProps } from '../jsx';
-import { stopPropagation } from '../lib';
-/**
-How to use:
-  // getSplitter's first parameter is the container's selector where the Splitter will be in.
-  // the second parameter is whether it's Vertical
-  // then the third parameter is it's RightOrTop or not
-  const locationLeft = false;
-  const splitter = ResizableSplitter.getSplitter('.body .side', true, locationLeft);
-  const container = (
-        <div class='body'>
-            <div class='side'>
-              {splitter}
-              {designPanel}
-            </div>
-          ...
-
-*/
-export class ResizableSplitter {
-  static hostNode: HTMLElement;
-  static isVertical = true;
-  static isRightOrTop = true;
-
-  private static initialized = false;
-  private static startXorY = 0;
-  private static startWidthOrHeight = 0;
-  private static pressed = false;
-
-  static init() {
-    /* styles for resizable splitter */
-    const css: CssProps = {
-      '.resizable-splitter-v-left, .resizable-splitter-v-right': {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        width: '2px',
-        cursor: 'col-resize',
-      },
-      '.resizable-splitter-v-right': {
-        left: 'unset',
-        right: 0,
-      },
-      '.resizable-splitter-v-left:hover, .resizable-splitter-v-right:hover': {
-        width: '4px',
-        backgroundColor: '#ccc',
-      },
-
-      '.resizable-splitter-h-top, .resizable-splitter-h-bottom': {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: '2px',
-        cursor: 'row-resize',
-      },
-      '.resizable-splitter-h-bottom': {
-        top: 'unset',
-        bottom: 0,
-      },
-      '.resizable-splitter-h-top:hover, .resizable-splitter-h-bottom:hover': {
-        height: '4px',
-        backgroundColor: '#ccc',
-      },
-    };
-    bindGlobalStyles('resizable-splitter', 'html', css);
-
-    window.addEventListener('mousemove', ResizableSplitter.onMousemove.bind(ResizableSplitter), false);
-    document.documentElement.addEventListener('mouseup', ResizableSplitter.onMouseup.bind(ResizableSplitter), false);
-  }
-
-  static getSplitterClassName(isVertical: boolean, isRightOrTop: boolean): string {
-    const className =
-      'resizable-splitter-' +
-      (isVertical ? (isRightOrTop ? 'v-right' : 'v-left') : isRightOrTop ? 'h-top' : 'h-bottom');
-    return className;
-  }
-
-  static onMousedown(event: any) {
-    if (event.buttons !== 1 || event.button !== 0) return;
-    this.pressed = true;
-    this.startXorY = this.isVertical ? event.clientX : event.clientY;
-    const startPosition = document.defaultView!.getComputedStyle(this.hostNode)[this.isVertical ? 'width' : 'height'];
-    this.startWidthOrHeight = parseInt(startPosition, 10);
-  }
-
-  static onMousemove(event: any) {
-    if (!this.pressed || event.buttons !== 1 || event.button !== 0) {
-      return;
-    }
-
-    // prevent text/element selection when drag
-    stopPropagation(event);
-    if (this.isVertical) {
-      const movedXorY = this.startWidthOrHeight + (event.clientX - this.startXorY) * (this.isRightOrTop ? 1 : -1);
-      this.hostNode.style.width = movedXorY + 'px';
-    } else {
-      const movedXorY = this.startWidthOrHeight + (event.clientY - this.startXorY) * (this.isRightOrTop ? -1 : 1);
-      this.hostNode.style.height = movedXorY + 'px';
-    }
-  }
-
-  static onMouseup() {
-    if (this.pressed) this.pressed = false;
-  }
-
-  static getSplitter(selector: string, isVertical: boolean, isRightOrTop: boolean) {
-    const className = this.getSplitterClassName(isVertical, isRightOrTop);
-
-    const onMousedown = (event: any) => {
-      if (!this.initialized) {
-        this.initialized = true;
-        this.init();
-      }
-
-      ResizableSplitter.hostNode = document.querySelector(selector)!;
-      if (!ResizableSplitter.hostNode) {
-        console.error(`Can't find element: ${selector}`);
-        return;
-      }
-      ResizableSplitter.isVertical = isVertical;
-      ResizableSplitter.isRightOrTop = isRightOrTop;
-      ResizableSplitter.onMousedown.bind(ResizableSplitter)(event);
-    };
-
-    return <div onMouseDown={onMousedown} class={className}></div>;
-  }
-}

package/src/components/select-with-title.tsx

@@ -1,37 +0,0 @@
-import { CssProps } from '../jsx';
-
-export type SelectOptionProps = {
-  option: string;
-  value: string;
-  selected?: boolean;
-};
-export const SelectWithTitle = (
-  title: string,
-  options: SelectOptionProps[],
-  onOptionChanged: (option: string) => void,
-  size?: number,
-  className = 'input-base',
-  width = '100%',
-) => {
-  const css: CssProps = {
-    select: {
-      height: 'auto',
-      overflowY: 'auto',
-      width,
-    },
-  };
-  return (
-    <div css={css}>
-      <div>{title}</div>
-      <div>
-        <select class={className} onChange={(e: any) => onOptionChanged(e?.target?.value)} size={size}>
-          {options.map((option) => (
-            <option value={option.value} selected={option.selected}>
-              {option.option}
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  );
-};

package/src/components/spinner.tsx

@@ -1,100 +0,0 @@
-export enum SpinnerSize {
-  Small = '22px',
-  Medium = '30px',
-  Large = '40px',
-  LargeLarge = '60px',
-}
-export const Spinner01 = ({
-  size = SpinnerSize.Medium,
-  color = 'var(--primary-color)',
-}: {
-  size?: SpinnerSize;
-  color?: string;
-}) => {
-  const borderWidth =
-    size === SpinnerSize.Small || size === SpinnerSize.Medium ? '4px' : size === SpinnerSize.Large ? '6px' : '9px';
-  const css: any = {
-    width: size,
-    aspectRatio: 1,
-    borderRadius: '50%',
-    background: `radial-gradient(farthest-side,${color} 94%,#0000) top/8px 8px no-repeat, conic-gradient(#0000 30%,${color})`,
-    '-webkit-mask': `radial-gradient(farthest-side,#0000 calc(100% - ${borderWidth}),#000 0)`,
-    animation: 'spinner01 1s infinite linear',
-    '@keyframes spinner01': {
-      '100%': { transform: 'rotate(1turn)' },
-    },
-  };
-  return <div css={css}></div>;
-};
-
-export const Spinner02 = ({
-  size = SpinnerSize.Medium,
-  color = 'var(--primary-color)',
-}: {
-  size?: SpinnerSize;
-  color?: string;
-}) => {
-  const base = parseInt(size.replace('px', ''));
-  const ballSize = Array.from({ length: 7 }, (_, i) => `${i * base / 15 / 7}px`);
-  const css: any = {
-    width: size,
-    height: size,
-    display: 'flex',
-    placeItems: 'center',
-    justifyContent: 'center',
-    '.spinner02-box': {
-      '--spin02-w': `${base / 2 - 3}px`,
-      width: '4px',
-      height: '4px',
-      borderRadius: '50%',
-      color,
-      boxShadow: `
-    calc(1*var(--spin02-w))      calc(0*var(--spin02-w))      0 0,
-    calc(0.707*var(--spin02-w))  calc(0.707*var(--spin02-w))  0 ${ballSize[1]},
-    calc(0*var(--spin02-w))      calc(1*var(--spin02-w))      0 ${ballSize[2]},
-    calc(-0.707*var(--spin02-w)) calc(0.707*var(--spin02-w))  0 ${ballSize[3]},
-    calc(-1*var(--spin02-w))     calc(0*var(--spin02-w))      0 ${ballSize[4]},
-    calc(-0.707*var(--spin02-w)) calc(-0.707*var(--spin02-w)) 0 ${ballSize[5]},
-    calc(0*var(--spin02-w))      calc(-1*var(--spin02-w))     0 ${ballSize[6]}`,
-      animation: 'spinner02 1s infinite steps(8)',
-    },
-    '@keyframes spinner02': {
-      '100%': { transform: 'rotate(1turn)' },
-    },
-  };
-  return (
-    <div css={css}>
-      <div class='spinner02-box'></div>
-    </div>
-  );
-};
-
-// color should be space splited RGB colors
-export const Spinner03 = ({ size = SpinnerSize.Medium, colorRGB = '55 55 55' }: { size?: SpinnerSize; colorRGB?: string }) => {
-  const css: any = {
-    width: size,
-    height: size,
-    aspectRatio: 1,
-    display: 'grid',
-    borderRadius: '50%',
-    background: `linear-gradient(0deg, rgb(${colorRGB} / 50%) 30%, #0000 0 70%, rgb(${colorRGB} / 100%) 0) 50% / 8% 100%, linear-gradient(90deg, rgb(${colorRGB} / 25%) 30%, #0000 0 70%, rgb(${colorRGB} / 75%) 0) 50% / 100% 8%`,
-    backgroundRepeat: 'no-repeat',
-    animation: 'spinner03 1s infinite steps(12)',
-    '&::before, &::after': {
-      content: '""',
-      gridArea: '1/1',
-      borderRadius: '50%',
-      background: 'inherit',
-      opacity: 0.915,
-      transform: 'rotate(30deg)',
-    },
-    '&::after': {
-      opacity: 0.83,
-      transform: 'rotate(60deg)',
-    },
-    '@keyframes spinner03': {
-      '100%': { transform: 'rotate(1turn)' },
-    },
-  };
-  return <div css={css}></div>;
-};

package/src/components/svg.tsx

@@ -1,24 +0,0 @@
-// this is not a good approach because if one svg file is used in multiple places
-// then the svg string will be rendered multiple times.
-export const Svg = ({
-  children,
-  width,
-  height,
-  color,
-}: {
-  children: string;
-  width?: string;
-  height?: string;
-  color?: string;
-}) => {
-  const css: any = {
-    svg: {
-      maxWidth: '100%',
-      maxHeight: '100%',
-      width,
-      height,
-      fill: color,
-    },
-  };
-  return <div css={css}>{children}</div>;
-};