lupine.web 1.0.16 → 1.0.18

package/src/components/drag-refresh.tsx

@@ -1,110 +0,0 @@
-import { CssProps, RefProps } from '../jsx';
-import { Spinner02, SpinnerSize } from './spinner';
-
-export type DragRefreshCloseProps = () => void;
-
-export type DragRefreshProps = {
-  container: string;
-  onDragRefresh: (close: DragRefreshCloseProps) => Promise<void>;
-};
-
-export const DragFresh = (props: DragRefreshProps) => {
-  const css: CssProps = {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    height: '0px',
-    position: 'relative',
-    '.drag-spinner': {
-      position: 'fixed',
-      top: '0',
-      left: '0',
-      width: '100%',
-      zIndex: 3,
-      display: 'none',
-      justifyContent: 'center',
-      transition: 'opacity 0.5s ease',
-      alignItems: 'end',
-      backgroundImage: 'linear-gradient(to bottom, rgba(200,200,200,0.8), rgba(255,255,255,0))',
-    },
-    '&.show .drag-spinner': {
-      display: 'flex',
-    },
-  };
-
-  const closeSpin = () => {
-    const spinnerDom = ref.$('.drag-spinner') as HTMLDivElement;
-    if (!spinnerDom) return;
-    spinnerDom.style.opacity = '0';
-    setTimeout(() => {
-      spinnerDom.style.opacity = '1';
-      spinnerDom.parentElement!.classList.remove('show');
-    }, 300);
-  };
-  const ref: RefProps = {
-    onLoad: async () => {
-      const container = document.querySelector(props.container) as HTMLDivElement;
-      const pullDom = ref.current as HTMLDivElement;
-      const spinnerDom = ref.$('.drag-spinner') as HTMLDivElement;
-      if (!container || !pullDom || !spinnerDom) return;
-      let touchstartY = 0;
-      let touchstartX = 0;
-      let direction = '';
-      let needRefresh = false;
-      const maxHeight = 150;
-      container.addEventListener('touchstart', (e: any) => {
-        touchstartY = e.touches[0].clientY;
-        touchstartX = e.touches[0].clientX;
-        direction = '';
-        needRefresh = false;
-      });
-      container.addEventListener('touchmove', (e: any) => {
-        console.log(`window.scrollY: ${window.scrollY}`);
-        const touchY = e.touches[0].clientY;
-        const touchX = e.touches[0].clientX;
-        const movedY = touchY - touchstartY;
-        const movedX = touchX - touchstartX;
-        if (direction === '') {
-          if (movedY > 0) {
-            direction = 'Y';
-          } else if (movedX > 0) {
-            direction = 'X';
-          }
-        }
-        if (direction === 'X') {
-          return;
-        }
-        if (window.scrollY === 0) {
-          needRefresh = movedY > 30;
-          if (movedY > 5) {
-            pullDom.classList.add('show');
-            spinnerDom.style.height = `${Math.min(maxHeight, movedY)}px`;
-          } else {
-            pullDom.classList.remove('show');
-            spinnerDom.style.height = '0';
-          }
-        } else if (window.scrollY > Math.min(maxHeight, movedY)) {
-          pullDom.classList.remove('show');
-          spinnerDom.style.height = '0';
-        }
-      });
-      container.addEventListener('touchend', (e) => {
-        if (direction === 'Y') {
-          if (needRefresh) {
-            props.onDragRefresh(closeSpin);
-          } else {
-            closeSpin();
-          }
-        }
-        direction = '';
-      });
-    },
-  };
-  return (
-    <div css={css} ref={ref} class='drag-refresh-box'>
-      <div class='drag-spinner'>
-        <Spinner02 size={SpinnerSize.Large} />
-      </div>
-    </div>
-  );
-};

package/src/components/editable-label.tsx

@@ -1,83 +0,0 @@
-import { CssProps, RefProps } from '../jsx';
-
-export type EditableLabelHookProps = {
-  updateValue?: (value: string) => void;
-};
-
-export type EditableLabelProps = {
-  text: string;
-  type?: 'text' | 'number';
-  mandtory?: boolean;
-  save?: (value: string) => void;
-  hook?: EditableLabelHookProps;
-};
-export const EditableLabel = (props: EditableLabelProps) => {
-  let editFlag = false;
-  let oldValue = props.text;
-  const onDblClick = () => {
-    if (editFlag) return;
-    editFlag = true;
-    const el = ref.$('input.editable-label');
-    oldValue = el.value;
-    el.removeAttribute('readonly');
-    el.classList.remove('not-editable');
-    el.setSelectionRange(0, 0);
-  };
-  const reset = () => {
-    const el = ref.$('input.editable-label');
-    el.setAttribute('readonly', 'readonly');
-    el.classList.add('not-editable');
-    oldValue = '';
-    editFlag = false;
-    return el;
-  };
-  const onKeyDown = (ev: KeyboardEvent) => {
-    if (!editFlag) return;
-    if (ev.key === 'Enter') {
-      onBlur();
-    } else if (ev.key === 'Escape') {
-      const el = ref.$('input.editable-label');
-      el.value = oldValue;
-      reset();
-    }
-  };
-  const onBlur = () => {
-    const savedValue = oldValue;
-    const el = reset();
-    if (savedValue !== el.value) {
-      if (props.mandtory === true && !el.value) {
-        el.value = savedValue;
-      } else {
-        props.save?.(el.value);
-      }
-    }
-  };
-  if (props.hook) {
-    props.hook.updateValue = (value: string) => {
-      const el = ref.$('input.editable-label');
-      el.value = value;
-    };
-  }
-  const css: CssProps = {
-    '.not-editable': {
-      borderColor: 'transparent',
-      boxShadow: 'unset',
-    },
-    'input.editable-label': {
-      width: '100%',
-    },
-  };
-  const ref: RefProps = {};
-  return (
-    <div css={css} ref={ref}>
-      <input
-        class='input-base editable-label not-editable'
-        onDblClick={onDblClick}
-        onKeyDown={onKeyDown}
-        value={props.text}
-        onBlur={onBlur}
-        readOnly
-      />
-    </div>
-  );
-};

package/src/components/float-window.tsx

@@ -1,226 +0,0 @@
-import { mountComponents } from '../core';
-import { CssProps, RefProps, VNode } from '../jsx';
-import { stopPropagation } from '../lib';
-
-export type FloatWindowCloseProps = () => void;
-
-export type FloatWindowShowProps = {
-  title: string;
-  children: VNode<any>;
-  buttons?: string[];
-  contentMaxHeight?: string;
-  contentMinWidth?: string;
-  noMoving?: boolean;
-  noModal?: boolean;
-  closeEvent?: () => void;
-  handleClicked: (index: number, close: FloatWindowCloseProps) => void;
-  closeWhenClickOutside?: boolean; // default false
-};
-
-// because it's over a mask, so it can use primary colors
-export class FloatWindow {
-  static hostNode: HTMLElement;
-
-  private static initialized = false;
-  private static pressed = false;
-  private static startX = 0;
-  private static startY = 0;
-  private static startTop = 0;
-  private static startLeft = 0;
-
-  static init() {
-    window.addEventListener('mousemove', FloatWindow.onMousemove.bind(FloatWindow), false);
-    document.documentElement.addEventListener('mouseup', FloatWindow.onMouseup.bind(FloatWindow), false);
-  }
-
-  static async show({
-    title,
-    children,
-    contentMaxHeight,
-    contentMinWidth,
-    buttons,
-    noMoving = false,
-    noModal = false,
-    closeEvent,
-    handleClicked,
-    closeWhenClickOutside = false,
-  }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
-    const onClickContainer = (event: any) => {
-      if (closeWhenClickOutside !== false && event.target.className === 'fwin-box') {
-        handleClose();
-      }
-    };
-    const handleClose = () => {
-      closeEvent?.();
-      ref.current.classList.add('transition');
-      ref.current.classList.remove('animation');
-      setTimeout(() => {
-        base.remove();
-      }, 300);
-    };
-
-    const base = document.createElement('div');
-    const onMousedown = (event: any) => {
-      if (noMoving) return;
-
-      if (!this.initialized) {
-        this.initialized = true;
-        this.init();
-      }
-
-      FloatWindow.hostNode = ref.current;
-      FloatWindow.onMousedown.bind(FloatWindow)(event);
-    };
-
-    const newButtons = !buttons || buttons.length === 0 ? ['OK', 'Cancel'] : buttons;
-    const onClickButtons = (index: number) => {
-      handleClicked(index, handleClose);
-    };
-
-    const ref: RefProps = {
-      onLoad: async () => {
-        ref.current.classList.add('transition', 'animation');
-        setTimeout(() => {
-          // don't need transition for moving
-          ref.current.classList.remove('transition');
-        }, 300);
-      },
-    };
-    const cssContainer: CssProps = {
-      position: noModal ? '' : 'fixed',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      backgroundColor: noModal ? '' : 'var(--cover-mask-bg-color)',
-      '.fwin-body': {
-        position: 'fixed',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%) scale(0.1)',
-        color: 'var(--primary-color)',
-        backgroundColor: 'var(--cover-bg-color)', //'#fefefe',
-        border: 'var(--primary-border)', //'1px solid #888',
-        borderRadius: '6px',
-        minWidth: contentMinWidth ? contentMinWidth : '',
-        maxWidth: '90%',
-        boxShadow: 'var(--cover-box-shadow)', //'#0000004c 0px 19px 38px, #00000038 0px 15px 12px',
-        opacity: 0,
-        zIndex: 'var(--layer-float-window)',
-        '&.transition': {
-          transition: 'all 0.3s',
-        },
-        '&.animation': {
-          transform: 'translate(-50%, -50%) scale(1)',
-          opacity: 1,
-        },
-        '&.animation-close': {
-          transition: 'all 0.3s',
-          transform: 'translate(-50%, -50%) scale(0)',
-          opacity: 0,
-        },
-        '.fwin-title': {
-          padding: '10px 15px 5px',
-          borderBottom: 'var(--primary-border)', //'1px solid #e9ecef',
-          '.fwin-close': {
-            color: '#aaaaaa',
-            float: 'right',
-            fontSize: '26px',
-            fontWeight: 'bold',
-            cursor: 'pointer',
-            marginTop: '-8px',
-            marginRight: '-10px',
-          },
-          '.fwin-close:hover': {
-            transition: 'all 300ms ease',
-            color: '#555555',
-          },
-        },
-        '.fwin-content': {
-          padding: '15px',
-          maxHeight: contentMaxHeight ? `min(${contentMaxHeight}, calc(100% - 100px))` : 'calc(100% - 100px)',
-          overflowY: 'auto',
-        },
-        '.fwin-bottom': {
-          display: 'flex',
-          padding: '5px 15px',
-          borderTop: 'var(--primary-border)', //'1px solid #e9ecef',
-          justifyContent: 'end',
-          '>div': {
-            marginLeft: '5px',
-          },
-        },
-      },
-    };
-    const component = (
-      <div css={cssContainer} class='fwin-box' onClick={onClickContainer}>
-        <div ref={ref} class='fwin-body' onMouseDown={onMousedown}>
-          <div class='fwin-title'>
-            {title}
-            <span class='fwin-close' onClick={handleClose}>
-              ×
-            </span>
-          </div>
-          <div class='fwin-content'>{children}</div>
-          <div class='fwin-bottom'>
-            {newButtons.map((i, index) => (
-              <button
-                class='button-base button-s mr-m'
-                onClick={() => {
-                  onClickButtons(index);
-                }}
-              >
-                {i}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-    base.style.position = 'fixed';
-    document.body.appendChild(base);
-    await mountComponents(base, component);
-    return handleClose;
-  }
-
-  static onMousedown(event: any) {
-    if (event.buttons !== 1 || event.button !== 0) return;
-    if (event.srcElement.className !== 'fwin-title') return;
-
-    this.pressed = true;
-    this.startX = event.clientX;
-    this.startY = event.clientY;
-    const nodeStyle = document.defaultView!.getComputedStyle(this.hostNode);
-    this.startTop = parseInt(nodeStyle['top'], 10);
-    this.startLeft = parseInt(nodeStyle['left'], 10);
-  }
-
-  static onMousemove(event: any) {
-    if (!this.pressed || event.buttons !== 1 || event.button !== 0) {
-      return;
-    }
-
-    // prevent text/element selection when drag
-    stopPropagation(event);
-    if (
-      event.clientX < 0 ||
-      event.clientY < 0 ||
-      event.clientX > window.innerWidth ||
-      event.clientY > window.innerHeight
-    ) {
-      return;
-    }
-
-    let movedX = this.startLeft + (event.clientX - this.startX);
-    let movedY = this.startTop + (event.clientY - this.startY);
-    if (movedY <= 0) movedY = 0;
-    if (movedX <= 0) movedX = 0;
-
-    this.hostNode.style.top = movedY + 'px';
-    this.hostNode.style.left = movedX + 'px';
-  }
-
-  static onMouseup() {
-    if (this.pressed) this.pressed = false;
-  }
-}

package/src/components/grid.tsx

@@ -1,18 +0,0 @@
-export const Grid = ({ gridOption }: { gridOption: any }) => {
-  const cssContainer: any = {
-    display: 'grid',
-    ...gridOption.options,
-  };
-  const cells: any = [];
-  gridOption.cells.forEach((cell: any, index: number) => {
-    const name = cell.name || 'cell' + index;
-    cssContainer[`.${name}`] = cell.option;
-    cells.push(<div class={name}>{cell.component}</div>);
-  });
-  const className = 'grid-box' + (gridOption.className ? ` ${gridOption.className}` : '');
-  return (
-    <div css={cssContainer} class={className}>
-      {cells}
-    </div>
-  );
-};

package/src/components/html-var.tsx

@@ -1,41 +0,0 @@
-import { mountComponents } from '../core/mount-components';
-import { RefProps, VNode } from '../jsx';
-
-export const HtmlVar = (initial?: string | VNode<any>) => {
-  let _value: string | VNode<any> = initial || '';
-  let _dirty = false;
-  const waitUpdate = async (value: string | VNode<any>) => {
-    if (!ref.current) return;
-    if (typeof value === 'object' && value.type && value.props) {
-      await mountComponents(ref.current, value);
-    } else {
-      ref.current.innerHTML = value;
-    }
-    _dirty = false;
-  }
-  const ref: RefProps = { onLoad: async (el: Element) => {
-    _dirty && waitUpdate(_value);
-  } };
-  const FragmentRef = (props: any) => {
-    return <>{props.children}</>;
-  };
-
-  return {
-    set value(value: string | VNode<any>) {
-      _value = value;
-      _dirty = true;
-      waitUpdate(value);
-    },
-    get value() {
-      return ref.current ? ref.current.innerHTML : _value;
-    },
-    get ref() {
-      return ref;
-    },
-    // _fragment_ref is a special id to add ref to a fragment and it is processed in mount-components
-    get node() {
-      _dirty = false;
-      return <FragmentRef _fragment_ref={ref}>{_value}</FragmentRef>;
-    },
-  };
-};

package/src/components/index.ts

@@ -1,36 +0,0 @@
-
-export * from './button-push-animation';
-export * from './button';
-export * from './drag-refresh';
-export * from './editable-label';
-export * from './float-window';
-export * from './grid';
-export * from './html-var';
-export * from './input-with-title';
-export * from './link-item';
-export * from './link-list';
-export * from './menu-bar';
-export * from './menu-item-props';
-export * from './menu-sidebar';
-export * from './message-box';
-export * from './meta-data';
-export * from './meta-title';
-export * from './meta-description';
-export * from './meta-title';
-export * from './modal';
-export * from './notice-message';
-export * from './paging-link';
-export * from './panel';
-export * from './popup-menu';
-export * from './progress';
-export * from './redirect';
-export * from './resizable-splitter';
-export * from './select-with-title';
-export * from './spinner';
-export * from './svg';
-export * from './text-glow';
-export * from './text-wave';
-export * from './tabs';
-export * from './theme-selector';
-export * from './toggle-base';
-export * from './toggle-switch';

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

@@ -1,24 +0,0 @@
-// used in MessageBox.show
-export const InputWithTitle = (
-  title: string,
-  defaultValue: string,
-  onInputChanged?: (option: string) => void,
-  onInputInputed?: (option: string) => void,
-  className = 'input-base',
-  width = '100%',
-) => {
-  return (
-    <div>
-      <div>{title}</div>
-      <div>
-        <input
-          class={className}
-          style={{ width }}
-          onChange={(e: any) => onInputChanged?.(e?.target?.value)}
-          onInput={(e: any) => onInputInputed?.(e?.target?.value)}
-          value={defaultValue}
-        />
-      </div>
-    </div>
-  );
-};

package/src/components/link-item.tsx

@@ -1,13 +0,0 @@
-export type LinkItemProps = {
-  className?: string;
-  text: string;
-  url: string;
-  alt?: string;
-};
-export const LinkItem = (props: LinkItemProps) => {
-  return (
-    <a class={['link-item', props.className].join(' ')} href={props.url} alt={props.alt || props.text}>
-      {props.text}
-    </a>
-  );
-};

package/src/components/link-list.tsx

@@ -1,62 +0,0 @@
-import { LinkItem } from './link-item';
-import { NestMenuItemProps } from './menu-item-props';
-
-export type LinkListProps = {
-  title: string;
-  items: NestMenuItemProps[];
-  className?: string;
-  textColor?: string;
-  backgroundColor?: string;
-  titleBackgroundColor?: string;
-};
-export const LinkList = ({
-  title,
-  items,
-  className,
-  textColor = 'black',
-  backgroundColor = '#d3d3d3',
-  titleBackgroundColor = '#b6b6b6',
-}: LinkListProps) => {
-  const css: any = {
-    width: '100%',
-    margin: 'auto',
-    height: 'auto',
-    backgroundColor,
-    '.link-list-title, .link-list-top': {
-      display: 'flex',
-      width: '100%',
-      flexWrap: 'wrap',
-      padding: '0 16px',
-    },
-    '.link-list-title': {
-      backgroundColor: titleBackgroundColor,
-    },
-    '.link-list-item': {
-      display: 'inline-block',
-      color: textColor,
-      padding: '8px 16px 8px 0',
-      textDecoration: 'none',
-    },
-    '.link-list-item:last-child': {
-      paddingRight: 'unset',
-    },
-    '.link-list-title .link-list-item': {
-      fontSize: '18px',
-    },
-  };
-
-  return (
-    <div css={css} class={['link-list-box', className].join(' ')}>
-      {title && (
-        <div class='link-list-title'>
-          <div class='link-list-item'>{title}</div>
-        </div>
-      )}
-      <div class='link-list-top'>
-        {items.map((item) => {
-          return <LinkItem className='link-list-item' url={item.url} alt={item.alt} text={item.text} />;
-        })}
-      </div>
-    </div>
-  );
-};