lupine.web 1.0.16 → 1.0.17

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

package/src/components/tabs.tsx

@@ -1,252 +0,0 @@
-import { mountComponents } from '../core';
-import { RefProps, VNode } from '../jsx';
-import { stopPropagation } from '../lib';
-
-export type TabsUpdateProps = {
-  updateTitle?: (index: number, title: string) => void;
-  updateIndex?: (index: number) => void;
-  newPage?: (title: string, page: VNode<any>, index?: number) => Promise<void>;
-  removePage?: (index: number) => void;
-  indexChanged?: (index: number) => void;
-  getIndex?: () => number;
-  getCount?: () => number;
-  findAndActivate?: (title: string) => boolean;
-};
-
-export type TabsPageProps = { title: string; page: VNode<any> };
-
-export type TabsProps = {
-  pages: TabsPageProps[];
-  defaultIndex?: number;
-  topClassName?: string;
-  pagePadding?: string;
-  refUpdate?: TabsUpdateProps;
-};
-// For CSS or query selectors, please pay attention to that Tabs can be nested
-export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, refUpdate }: TabsProps) => {
-  const ref: RefProps = {};
-  let newIndex = typeof defaultIndex === 'number' ? defaultIndex : 0;
-  const clearIndex = () => {
-    const header = ref.$(`.tabs[data-refid=${ref.id}] > div > .tab.active`);
-    header && header.classList.remove('active');
-    const page = ref.$(`.pages[data-refid=${ref.id}] > .page.active`);
-    page && page.classList.remove('active');
-  };
-  const updateIndex = (index: number) => {
-    clearIndex();
-    const doms = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
-    if (index >= 0 && index < doms.length) {
-      doms[index].classList.add('active');
-      const pages = ref.$all(`.pages[data-refid=${ref.id}] > .page`);
-      pages[index].classList.add('active');
-      refUpdate?.indexChanged && refUpdate?.indexChanged(index);
-    }
-  };
-  const removePage = (index: number) => {
-    const doms = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
-    if (index >= 0 && index < doms.length) {
-      const newIndex = index === doms.length - 1 ? index - 1 : index;
-      const isAct = doms[index].classList.contains('active');
-      doms[index].parentNode.remove();
-      const pages = ref.$all(`.pages[data-refid=${ref.id}] > .page`);
-      pages[index].remove();
-
-      if (isAct) {
-        updateIndex(newIndex);
-      }
-    }
-  };
-  const removePageFromX = (event: any) => {
-    stopPropagation(event);
-
-    const tab = event.target.parentNode;
-    const index = Array.prototype.indexOf.call(tab.parentNode.parentNode.children, tab.parentNode);
-    removePage(index);
-  };
-
-  const newPage = async (title: string, page: VNode<any>, index?: number) => {
-    const allTabs = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
-    let newPageIndex = allTabs.length;
-    if (typeof index === 'number' && index >= 0 && index < allTabs.length) {
-      newPageIndex = index;
-    }
-
-    clearIndex();
-    const newTab2 = createTabHeader(title, ' active');
-    const newTab = document.createElement('div');
-
-    const newPage = document.createElement('div');
-    newPage.className = 'page';
-    if (newPageIndex === allTabs.length) {
-      ref.$(`.tabs[data-refid=${ref.id}]`).appendChild(newTab);
-      ref.$(`.pages[data-refid=${ref.id}]`).appendChild(newPage);
-    } else {
-      ref.$(`.tabs[data-refid=${ref.id}]`).insertBefore(newTab, allTabs[newPageIndex]);
-      const pages = ref.$all(`.pages[data-refid=${ref.id}] > .page`);
-      ref.$(`.pages[data-refid=${ref.id}]`).insertBefore(newPage, pages[newPageIndex]);
-    }
-
-    await mountComponents(newTab, newTab2);
-    await mountComponents(newPage, page);
-    updateIndex(newPageIndex);
-  };
-  const createTabHeader = (title: string, className: string) => {
-    return (
-      <div onClick={onTabClick} class={'tab' + className}>
-        {title}
-        <span class='modal-close' onClick={removePageFromX}>
-          ×
-        </span>
-      </div>
-    );
-  };
-  const onTabClick = (event: any) => {
-    stopPropagation(event);
-
-    const tab = event.target;
-    const index = Array.prototype.indexOf.call(tab.parentNode.parentNode.children, tab.parentNode);
-    updateIndex(index);
-  };
-  const flashTitle = (index: number) => {
-    const doms = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
-    if (index >= 0 && index < doms.length) {
-      doms[index].classList.add('flash');
-      setTimeout(() => {
-        doms[index].classList.remove('flash');
-      }, 1000);
-    }
-  };
-  if (refUpdate) {
-    refUpdate.updateTitle = (index: number, title: string) => {
-      const doms = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
-      if (index >= 0 && index < doms.length) {
-        doms[index].innerHTML = title;
-      }
-    };
-    refUpdate.updateIndex = updateIndex;
-    refUpdate.removePage = removePage;
-    refUpdate.newPage = newPage;
-    refUpdate.getIndex = () => {
-      const header = ref.$(`.tabs[data-refid=${ref.id}] > div > .tab.active`);
-      return header ? Array.prototype.indexOf.call(header.parentNode.parentNode.children, header.parentNode) : -1;
-    };
-    refUpdate.getCount = () => {
-      const doms = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
-      return doms.length;
-    };
-    refUpdate.findAndActivate = (title: string) => {
-      const doms = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
-      for (let i = 0; i < doms.length; i++) {
-        if (doms[i].innerText === title) {
-          updateIndex(i);
-          flashTitle(i);
-          return true;
-        }
-      }
-      return false;
-    };
-  }
-
-  // pay attention to nest tabs
-  const newCss: any = {
-    display: 'flex',
-    'flex-direction': 'column',
-    width: '100%',
-    height: '100%',
-    // border: 'solid 1px grey',
-    '&:not(:has(.pages .page))': {
-      // hide tabs when there is no tabs (not need to show borders)
-      display: 'none',
-    },
-    '> .tabs': {
-      display: 'flex',
-      height: 'auto',
-      'border-bottom': '1px solid grey',
-      '> div > .tab': {
-        padding: '2px 3px',
-        width: 'auto',
-        'font-size': 'smaller',
-        'text-overflow': 'ellipsis',
-        overflow: 'hidden',
-        'white-space': 'nowrap',
-        margin: '1px 1px 0 1px',
-        cursor: 'pointer',
-        position: 'relative',
-        // transition: 'all 1s',
-        'border-top-right-radius': '4px',
-        'border-top-left-radius': '4px',
-        'border-top': 'solid 1px var(--primary-border-color)',
-        'border-left': 'solid 1px var(--primary-border-color)',
-        'border-right': 'solid 1px var(--primary-border-color)',
-        // 'border-bottom': '2px solid transparent',
-        color: 'var(--activatable-color-normal)',
-        backgroundColor: 'var(--activatable-bg-color-normal)',
-      },
-      '> div > .tab:hover': {
-        padding: '3px 3px 1px 3px',
-        // color: 'var(--activatable-color-hover)',
-        // backgroundColor: 'var(--activatable-bg-color-hover)',
-      },
-      '> div > .tab.flash': {
-        backgroundColor: 'red',
-      },
-      '> div > .active': {
-        // 'border-bottom': '2px solid red',
-        color: 'var(--activatable-color-selected)',
-        backgroundColor: 'var(--activatable-bg-color-selected)',
-        marginBottom: '-1px',
-        borderBottom: '1px solid #FFFFFF00',
-      },
-      '> div > .tab > .modal-close': {
-        display: 'none',
-        float: 'right',
-        fontSize: '12px',
-        fontWeight: 'bold',
-        cursor: 'pointer',
-        position: 'absolute',
-        top: '-4px',
-        right: '1px',
-      },
-      '> div > .tab:hover > .modal-close': {
-        display: 'inline-block',
-        color: '#ff0000',
-      },
-    },
-    '> .pages': {
-      display: 'flex',
-      flex: '1',
-      position: 'relative',
-      '> .page': {
-        display: 'none',
-        position: 'absolute',
-        padding: pagePadding || '0px',
-        overflow: 'auto',
-        width: '100%',
-        maxWidth: '100%',
-        height: '100%',
-        overflowX: 'auto',
-        overflowY: 'auto',
-      },
-      '> .active': {
-        display: 'inline-block',
-      },
-    },
-  };
-
-  return (
-    <div ref={ref} css={newCss} class={'tabs-box' + (topClassName ? ' ' + topClassName : '')}>
-      <div class='tabs' data-refid={ref}>
-        {pages.map((i, index) => {
-          const className = index === newIndex ? ' active' : '';
-          return <div>{createTabHeader(i.title, className)}</div>;
-        })}
-      </div>
-      <div class='pages' data-refid={ref}>
-        {pages.map((i, index) => {
-          const className = index === newIndex ? ' active' : '';
-          return <div class={'page' + className}>{i.page}</div>;
-        })}
-      </div>
-    </div>
-  );
-};

package/src/components/text-glow.tsx

@@ -1,36 +0,0 @@
-import { CssProps } from '../jsx';
-
-export type TextGlowProps = {
-  text: string;
-  color?: string;
-  padding?: string;
-  fontSize?: string;
-  fontWeight?: string;
-};
-export const TextGlow = (props: TextGlowProps) => {
-  const css: CssProps = {
-    width: `100%`,
-    height: `100%`,
-    textAlign: 'center',
-    color: props.color || '#22b8ff',
-    padding: props.padding || '10px',
-    fontSize: props.fontSize || '30px',
-    fontWeight: props.fontWeight || '500',
-    '.text-glow': {
-      animation: 'text-glow-a 1.5s infinite alternate',
-    },
-    '@keyframes text-glow-a': {
-      '0%': {
-        textShadow: '0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e',
-      },
-      '100%': {
-        textShadow: '0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff, 0 0 160px #00d4ff',
-      },
-    },
-  };
-  return (
-    <div css={css} class='text-glow-top'>
-      <div class='text-glow'>{props.text}</div>
-    </div>
-  );
-};

package/src/components/text-wave.tsx

@@ -1,54 +0,0 @@
-import { CssProps } from "../jsx";
-
-export type TextLoadingProps = {
-  text: string;
-  color?: string;
-  padding?: string;
-  fontSize?: string;
-  fontWeight?: string;
-};
-export const TextWave = (props: TextLoadingProps) => {
-  const cssMap: CssProps = {};
-  props.text.split('').forEach((char, index) => {
-    cssMap[`.span${index}`] = { animationDelay: `${index * 0.1}s` };
-  });
-  const css: CssProps = {
-    width: `100%`,
-    height: `100%`,
-    textAlign: 'center',
-    color: props.color || '#22b8ff',
-    padding: props.padding || '10px',
-    fontSize: props.fontSize || '20px',
-    fontWeight: props.fontWeight,
-    textShadow: '1px -1px #ffffff, -2px 2px #999, -6px 7px 3px #131f5be6',
-    '.text-loading.wave-animetion span': {
-      display: 'inline-block',
-      padding: '0 4px',
-      animation: 'wave-text 1s ease-in-out infinite',
-    },
-    '.text-loading.wave-animetion': {
-      marginTop: '0.6em',
-      ...cssMap,
-    },
-    '@keyframes wave-text': {
-      '0%': {
-        transform: 'translateY(0em)',
-      },
-      '60%': {
-        transform: 'translateY(-0.6em)',
-      },
-      '100%': {
-        transform: 'translateY(0em)',
-      },
-    },
-  };
-  return (
-    <div css={css} class='text-loading-top'>
-      <div class='text-loading wave-animetion'>
-        {props.text.split('').map((char, index) => (
-          <span class={`span${index}`}>{char}</span>
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/components/theme-selector.tsx

@@ -1,32 +0,0 @@
-import { bindGlobalStyles, getCurrentTheme, updateTheme } from '../core';
-import { CssProps } from '../jsx';
-import { PopupMenu } from './popup-menu';
-
-export type ThemeSelectorProps = {
-  className?: string;
-  css?: CssProps;
-};
-
-export const ThemeSelector = ({ className, css }: ThemeSelectorProps) => {
-  const newCss: CssProps = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignSelf: 'end',
-    ...css,
-  };
-
-  bindGlobalStyles('theme-switch', '.theme-switch', newCss);
-  const handleSelected = (themeName: string) => {
-    updateTheme(themeName);
-  };
-  const currentTheme = getCurrentTheme();
-  const list = [];
-  for (let themeName in currentTheme.themes) {
-    list.push(themeName);
-  }
-  return (
-    <div css={newCss} class={['theme-switch', className].join(' ')} title='Select theme'>
-      <PopupMenu list={list} defaultValue={currentTheme.themeName} handleSelected={handleSelected}></PopupMenu>
-    </div>
-  );
-};