lupine.web 1.0.14

package/src/components/editable-label.tsx

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,226 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,36 @@
+
+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

@@ -0,0 +1,24 @@
+// 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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,62 @@
+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>
+  );
+};