lupine.web 1.0.15 → 1.0.17

package/src/assets/themes/light-themes.ts

@@ -1,92 +0,0 @@
-import { sharedThemes } from './shared-themes';
-
-export const lightThemes: { [key: string]: string } = {
-  ...sharedThemes,
-  '--theme-name': 'light',
-
-  // scroll bar
-  '--scrollbar-bg': '#d5d5d5',
-  '--scrollbar-thumb-bg': '#979797',
-  '--scrollbar-active-thumb-bg': '#737373',
-
-  '--primary-color': '#303030',
-  '--primary-color-disabled': '#a0a0a0',
-  '--primary-bg-color': '#ffffff',
-  '--primary-border-color': '#858585',
-  '--primary-border': '1px solid var(--primary-border-color)',
-  // '--secondary-color': '#505050',
-  // '--secondary-bg-color': '#ffffff',
-  // '--secondary-border': '1px solid #858585',
-  '--primary-opacity': 'unset', // used for dark theme
-  '--primary-disabled-opacity': '0.5', // used for dark theme
-  '--primary-accent-color': '#0a74c9', // used for radio and checkbox's background color
-
-  // including menus, tabs, sidebars
-  '--activatable-color-normal': 'var(--primary-color)',
-  '--activatable-bg-color-normal': 'var(--primary-bg-color)',
-  '--activatable-color-hover': '#1d1d1d',
-  '--activatable-bg-color-hover': '#bcbcbc',
-  '--activatable-color-selected': '#2d2d2d',
-  '--activatable-bg-color-selected': '#dcdcdc',
-  // '--menu-color-hover': '#303030',
-  // '--menu-bg-color': '#ffffff',
-  // '--menu-bg-color-hover': '#a0a0a0',
-  '--menu-font-size': '1rem',
-  '--menubar-color': '#eeeeee',
-  '--menubar-bg-color': '#000000',
-  '--menubar-sub-bg-color': '#f9f9f9',
-  '--sidebar-color': 'var(--primary-color)',
-  '--sidebar-bg-color': '#f4f3f4',
-  // '--sidebar-sub-color': 'var(--sidebar-color)',
-  // '--sidebar-sub-bg-color': '#eaeaea',
-  '--sidebar-border': '1px solid #858585',
-  // '--sidebar-hover-color': 'var(--sidebar-color)',
-  // '--sidebar-hover-bg-color': '#e0e0e0',
-
-  '--row-bg-color1': '#ffffff',
-  '--row-bg-color2': '#ffffff',
-
-  '--success-color': '#04AA6D',
-  '--info-color': '#2196F3',
-  '--warning-color': '#ff9800',
-  '--error-color': '#f44336',
-  '--success-bg-color': '#04AA6D',
-  '--info-bg-color': '#2196F3',
-  '--warning-bg-color': '#ff9800',
-  '--error-bg-color': '#f44336',
-  '--notice-color-with-bg': '#ffffff',
-
-  '--cover-mask-bg-color': '#00000060',
-  '--cover-bg-color': '#f5f5f5',
-  '--cover-box-shadow': '3px 3px 8px #767676',
-
-  // for input, checkbox, radio box, select
-  '--input-color': '#4e4e4e',
-  '--input-bg-color': '#ffffff',
-  '--input-box-shadow': '0px 0px 0px #000000, 1px 1px 0px 0px #50505045',
-  '--input-border-focus': '1px solid #0074d9',
-
-  // for button, div
-  '--button-color': '#4e4e4e',
-  '--button-bg': '-webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 74%, #ededed 100%)',
-  '--button-bg-hover': '-webkit-linear-gradient(top, #ffffff 0%, #e6e6e6 74%, #dddddd 100%)',
-  '--button-border': '1px solid #f6f6f6',
-  '--button-box-shadow': '1px 1px 1px #00000085, 0px 1px 0px 2px #0705053b',
-
-  '--header-color': '#000080',
-  '--header-bg-color': '#ffffff',
-
-  // '--po-background': '#e5e5e5', //	Background for surfaces on top of primary background
-  // // backgroundSecondary: '#f5f5f5', //	Secondary background
-  // // backgroundOnSecondary: '#e5e5e5', //	Background for surfaces on top of secondary background
-  // '--background-modifier-hover': '', //	Hovered elements
-  // '--background-modifier-active-hover': '', //	Active hovered elements
-  // '--background-modifier-border': '', //	Border color
-  // '--background-modifier-border-hover': '', //	Border color (hover)
-  // '--background-modifier-border-focus': '', //	Border color (focus)
-  // '--background-modifier-error': '', //	Error background
-  // '--background-modifier-error-hover': '', //	Error background (hover)
-  // '--background-modifier-success': '', //	Success background
-  // '--background-modifier-message': '', //	Messages background
-  // '--background-modifier-form-field': '', //	Form field background
-};

package/src/assets/themes/shared-themes.ts

@@ -1,50 +0,0 @@
-export const sharedThemes: { [key: string]: string } = {
-  // z-index
-  '--layer-cover': '10',
-  '--layer-sidebar': '100',
-  '--layer-sidebar-sub': '110',
-  '--layer-float-window': '200',
-  '--layer-modal': '300',
-  '--layer-modal-over': '310',
-  '--layer-menu': '400', // popup menu
-  '--layer-menu-sub': '410',
-  '--layer-notice': '500',
-  '--layer-tooltip': '510',
-  '--layer-dragged-item': '600',
-
-  '--font-size-base': '16px',
-  '--font-weight-base': '', //'400',
-  '--font-family-base': 'SimSun, "Microsoft YaHei", Helvetica, Arial, sans-serif',
-  '--line-height-base': '1.1',
-
-  '--font-size-h1-l': '2.5rem', //40px
-  '--font-size-h1': '2rem', //32px
-  '--font-size-h2': '1.5rem', //24px
-  '--font-size-h3': '1.17rem', //18.72px
-  '--font-size-h3-5': '1.08rem', //17.28px
-  '--font-size-h4': '1rem', //16px
-  '--font-size-h4-5': '.91rem', //14.56px
-  '--font-size-h5': '.83rem', //13.28px
-  '--font-size-h6': '.67rem', //10.72px
-  '--font-size-h6-s': '.55rem', //9.28px
-  '--font-size-title': 'var(--font-size-h2)',
-  '--font-size-subtitle': 'var(--font-size-h3-5)',
-  '--font-size-paragraph': 'var(--font-size-h4)',
-  '--font-size-paragraph-s': 'var(--font-size-h5)',
-
-  '--input-height': '2.2rem',
-  '--input-padding': '.3rem .6rem',
-  '--button-height': '2.1rem',
-  '--button-padding': '.3rem .9rem',
-
-  // space for margin, padding
-  '--space-ss': '.15rem',
-  '--space-s': '.25rem',
-  '--space-m': '.5rem',
-  '--space-l': '1rem',
-  '--space-ll': '2rem',
-
-  '--border-radius-s': '2px',
-  '--border-radius-m': '4px',
-  '--border-radius-l': '8px',
-};

package/src/components/button-push-animation.tsx

@@ -1,138 +0,0 @@
-import { CssProps, RefProps } from 'lupine.web';
-
-export enum ButtonPushAnimationSize {
-  SmallSmall = 'button-ss',
-  Small = 'button-s',
-  Medium = 'button-m',
-  Large = 'button-l',
-  LargeLarge = 'button-ll',
-}
-export type ButtonPushAnimationHookProps = {
-  setEnabled?: (enabled: boolean) => void;
-  getEnabled?: () => boolean;
-};
-export type ButtonPushAnimationProps = {
-  text: string;
-  size: ButtonPushAnimationSize;
-  disabled?: boolean;
-  onClick?: () => void;
-  hook?: ButtonPushAnimationHookProps;
-  class?: string;
-  css?: CssProps;
-};
-export const ButtonPushAnimation = (props: ButtonPushAnimationProps) => {
-  let disabled = props.disabled || false;
-  const onClick = () => {
-    if (disabled) {
-      return;
-    }
-    if (props.onClick) {
-      props.onClick();
-    }
-  };
-  if (props.hook) {
-    props.hook.setEnabled = (enabled: boolean) => {
-      disabled = !enabled;
-      ref.current.disabled = disabled;
-    };
-    props.hook.getEnabled = () => {
-      return !disabled;
-    };
-  }
-
-  const ref: RefProps = {};
-  const css: CssProps = {
-    all: 'unset',
-    cursor: 'pointer',
-    '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
-    position: 'relative',
-    borderRadius: 'var(--border-radius-m)',
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-    boxShadow: '-0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25), 0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1)',
-    '.button-outer': {
-      position: 'relative',
-      zIndex: 1,
-      borderRadius: 'inherit',
-      transition: 'box-shadow 300ms ease',
-      willChange: 'box-shadow',
-      boxShadow: '0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1), 0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5), 0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25)',
-    },
-    '.button-inner': {
-      position: 'relative',
-      zIndex: 2,
-      borderRadius: 'inherit',
-      padding: 'var(--button-padding)',
-      background: 'linear-gradient(135deg, #ffffff, #eeeeee)',
-      transition: 'box-shadow 300ms ease, background-image 250ms ease, transform 250ms ease;',
-      willChange: 'box-shadow, background-image, transform',
-      overflow: 'clip',
-      // clipPath: 'inset(0 0 0 0 round 999vw)',
-      boxShadow: '0 0 0 0 inset rgba(5, 5, 5, 0.1), -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25), 0 0 0 0 inset rgba(5, 5, 5, 0.1), 0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25), 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25)',
-    },
-    '.button-inner span': {
-      position: 'relative',
-      zIndex: 4,
-      // fontFamily: 'Inter, sans-serif',
-      letterSpacing: '-0.05em',
-      // fontWeight: 500,
-      color: 'rgba(0, 0, 0, 0);',
-      backgroundImage: 'linear-gradient(135deg, rgba(25, 25, 25, 1), rgba(75, 75, 75, 1))',
-      backgroundClip: 'text',
-      transition: 'transform 250ms ease',
-      display: 'block',
-      willChange: 'transform',
-      textShadow: 'rgba(0, 0, 0, 0.1) 0 0 0.1em',
-      userSelect: 'none',
-    },
-    '&.button-ss': {
-      borderRadius: '2px',
-    },
-    '&.button-s': {
-      borderRadius: '3px',
-    },
-    '&.button-l': {
-      borderRadius: '6px',
-    },
-    '&.button-ll': {
-      borderRadius: '10px',
-    },
-    '&.button-ss .button-inner': {
-      padding: '0.1rem 0.3rem',
-      fontSize: '0.65rem',
-    },
-    '&.button-s .button-inner': {
-      padding: '0.2rem 0.5rem',
-      fontSize: '0.85rem',
-    },
-    '&.button-l .button-inner': {
-      padding: '0.4rem 1.2rem',
-      fontSize: '1.5rem',
-    },
-    '&.button-ll .button-inner': {
-      padding: '0.5rem 1.5rem',
-      fontSize: '2rem',
-    },
-    '&:active .button-outer': {
-      boxShadow: '0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5), 0 0 0 0 rgba(5, 5, 5, 0.25)',
-    },
-    '&:active .button-inner': {
-      boxShadow: '0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75), -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5), 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5), 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15), 0 0 0 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25)',
-    },
-    '&:hover .button-inner': {
-      transform: 'scale(0.99)',
-    },
-    '&:hover .button-inner span': {
-      transform: 'scale(0.975)',
-    },
-    ...props.css,
-  };
-  return (
-    <button ref={ref} css={css} class={['button-push-animation', props.size, props.class].join(' ')} disabled={disabled} onClick={onClick}>
-      <div class="button-outer">
-        <div class="button-inner">
-          <span>{props.text}</span>
-        </div>
-      </div>
-    </button>
-  );
-};

package/src/components/button.tsx

@@ -1,55 +0,0 @@
-import { CssProps, RefProps } from 'lupine.web';
-
-export enum ButtonSize {
-  SmallLarge = 'button-ss',
-  Small = 'button-s',
-  Medium = 'button-m',
-  Large = 'button-l',
-  LargeLarge = 'button-ll',
-}
-export type ButtonHookProps = {
-  setEnabled?: (enabled: boolean) => void;
-  getEnabled?: () => boolean;
-};
-export type ButtonProps = {
-  text: string;
-  size: ButtonSize;
-  disabled?: boolean;
-  onClick?: () => void;
-  hook?: ButtonHookProps;
-  class?: string;
-  css?: CssProps;
-};
-export const Button = (props: ButtonProps) => {
-  let disabled = props.disabled || false;
-  const onClick = () => {
-    if (disabled) {
-      return;
-    }
-    if (props.onClick) {
-      props.onClick();
-    }
-  };
-  if (props.hook) {
-    props.hook.setEnabled = (enabled: boolean) => {
-      disabled = !enabled;
-      ref.current.disabled = disabled;
-    };
-    props.hook.getEnabled = () => {
-      return !disabled;
-    };
-  }
-
-  const ref: RefProps = {};
-  return (
-    <button
-      ref={ref}
-      class={['button-base', props.size, props.class].join(' ')}
-      css={props.css}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {props.text}
-    </button>
-  );
-};

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>
-  );
-};