lupine.components 1.0.0

package/src/components/html-var.tsx

@@ -0,0 +1,40 @@
+import { RefProps, VNode, mountComponents } from 'lupine.web';
+
+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,35 @@
+
+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-description';
+export * from './modal';
+export * from './notice-message';
+export * from './page-title';
+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 './tabs';
+export * from './text-glow';
+export * from './text-wave';
+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>
+  );
+};

package/src/components/menu-bar.tsx

@@ -0,0 +1,219 @@
+import { getRenderPageProps, RefProps } from 'lupine.web';
+import { MediaQueryMaxWidth } from '../styles';
+import { LinkItem } from './link-item';
+import { NestMenuItemProps } from './menu-item-props';
+
+const fetchMenu = async (menuId: string) => {
+  const data = await getRenderPageProps().renderPageFunctions.fetchData(`/api/menu/get/${menuId}`);
+  return data.json;
+};
+
+export type MenuBarProps = {
+  menuId?: string;
+  items: NestMenuItemProps[];
+  className?: string;
+  textColor?: string;
+  hoverColor?: string;
+  hoverBgColor?: string;
+  maxWidthMobileMenu?: string;
+  maxWidth?: string;
+  backgroundColor?: string;
+};
+export const MenuBar = ({
+  menuId,
+  items,
+  className,
+  textColor = 'var(--menubar-color)',
+  backgroundColor = 'var(--menubar-bg-color)', //'black',
+  hoverColor = 'var(--activatable-color-hover)', //'#ffffff',
+  hoverBgColor = 'var(--activatable-bg-color-hover)', //'#d12121',
+  maxWidth = '100%',
+  maxWidthMobileMenu = MediaQueryMaxWidth.TabletMax,
+}: MenuBarProps) => {
+  const css: any = {
+    width: '100%',
+    maxWidth: maxWidth,
+    margin: 'auto',
+    // height: 'auto',
+    backgroundColor,
+    position: 'relative',
+    '.menu-bar-top': {
+      display: 'flex',
+      width: '100%',
+      justifyContent: 'center',
+    },
+    '.menu-bar-item': {
+      display: 'inline-block',
+      color: textColor,
+      padding: '14px 16px',
+      textDecoration: 'none',
+      position: 'relative',
+    },
+    '.menu-bar-item:hover, .menu-bar-sub-box:hover > .menu-bar-item': {
+      // for desktop, make parent menu hover when sub menu is hover
+      color: hoverColor,
+      backgroundColor: hoverBgColor,
+    },
+    '.menu-bar-sub-box .menu-bar-sub': {
+      display: 'none',
+      position: 'absolute',
+      backgroundColor: 'var(--menubar-sub-bg-color)', //'#f9f9f9',
+      minWidth: '160px',
+      boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
+      zIndex: 'var(--layer-menu-sub)',
+      flexDirection: 'column',
+    },
+    '.menu-bar-sub-box > .menu-bar-item': {
+      padding: '14px 26px 14px 16px',
+      width: '100%',
+    },
+    '.menu-bar-sub-box > .menu-bar-item::after': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      marginLeft: '6px',
+      width: 0,
+      height: 0,
+      borderLeft: '5px solid transparent',
+      borderRight: '5px solid transparent',
+      borderTop: '5px solid ' + textColor,
+    },
+    '.menu-bar-sub-box .menu-bar-sub > .menu-bar-item': {
+      color: 'black',
+    },
+    '.menu-bar-sub-box:hover > .menu-bar-sub': {
+      display: 'flex',
+    },
+    '.menu-bar-sub-box .menu-bar-sub .menu-bar-item:hover': {
+      // backgroundColor: '#ddd',
+      color: hoverColor,
+      backgroundColor: hoverBgColor,
+    },
+    '.menu-bar-mobile': {
+      display: 'none',
+      position: 'relative',
+      backgroundColor,
+      padding: '5px 18px 6px',
+      '.menu-bar-toggle': {
+        cursor: 'pointer',
+        padding: '14px 0 19px 0',
+        'span, span::before, span::after': {
+          cursor: 'pointer',
+          height: '3px',
+          width: '25px',
+          borderRadius: '1px',
+          background: '#ffffff',
+          position: 'absolute',
+          display: 'block',
+          transition: 'all 300ms ease-in-out',
+        },
+        'span::before, span::after': {
+          content: '""',
+        },
+        'span::before': {
+          top: '-10px',
+        },
+        'span::after': {
+          bottom: '-10px',
+        },
+      },
+      '.menu-bar-toggle.active span': {
+        backgroundColor: 'transparent',
+      },
+      '.menu-bar-toggle.active span::before': {
+        transform: 'rotate(45deg)',
+        top: 0,
+      },
+      '.menu-bar-toggle.active span::after': {
+        transform: 'rotate(-45deg)',
+        top: 0,
+      },
+    },
+    ['@media only screen and (max-width: ' + maxWidthMobileMenu + ')']: {
+      '.menu-bar-mobile': {
+        display: 'block',
+      },
+      '.menu-bar-top': {
+        display: 'none',
+      },
+      '.menu-bar-top.open': {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      '.menu-bar-top.open .menu-bar-sub-box > .menu-bar-sub': {
+        display: 'flex',
+        position: 'unset',
+        '.menu-bar-item': {
+          paddingLeft: '32px',
+          color: textColor,
+          backgroundColor,
+        },
+        '.menu-bar-item:hover': {
+          color: hoverColor,
+          backgroundColor: hoverBgColor,
+        },
+      },
+      '.menu-bar-sub-box:hover > .menu-bar-item': {
+        // for mobile, no parent menu hover when sub menu is hover
+        color: textColor,
+        backgroundColor: backgroundColor,
+      },
+      '.menu-bar-sub-box:hover > .menu-bar-item:hover': {
+        color: hoverColor,
+        backgroundColor: hoverBgColor,
+      },
+    },
+  };
+
+  const renderItems = (items: NestMenuItemProps[], className: string) => {
+    return (
+      <div class={className}>
+        {items.map((item) => {
+          return item.items ? (
+            <div class='menu-bar-sub-box'>
+              <div class='menu-bar-item'>{item.text}</div>
+              {renderItems(item.items, 'menu-bar-sub')}
+            </div>
+          ) : (
+            <LinkItem className='menu-bar-item' url={item.url} alt={item.alt} text={item.text} />
+          );
+        })}
+      </div>
+    );
+  };
+
+  const ref: RefProps = {
+    onLoad: async () => {
+      if (menuId) {
+        const menu = await fetchMenu(menuId);
+        if (menu.result && menu.result.items.length > 0) {
+          const items = menu.result.items.map((i: any) => {
+            const l = i.split('\t');
+            return { text: l[5], url: l[4] };
+          });
+          const newDom = renderItems(items, 'menu-bar-top');
+          //mountComponents('.menu-bar-top', newDom);
+        }
+      }
+    },
+  };
+  const onToggleClick = () => {
+    const menu = ref.$('.menu-bar-mobile .menu-bar-toggle');
+    menu.classList.toggle('active');
+    const topMenu = ref.$('.menu-bar-top');
+    topMenu.classList.toggle('open');
+  };
+
+  return (
+    <div ref={ref} css={css} class={['menu-bar-box', className].join(' ')}>
+      <div class='menu-bar-mobile'>
+        <div class='menu-bar-toggle' onClick={onToggleClick}>
+          <span></span>
+        </div>
+      </div>
+
+      {renderItems(items, 'menu-bar-top')}
+    </div>
+  );
+};

package/src/components/menu-item-props.tsx

@@ -0,0 +1,10 @@
+export type MenuItemProps = {
+  text: string; // "-" for break line
+  url: string;
+  js?: () => void;
+  alt?: string;
+};
+
+export type NestMenuItemProps = MenuItemProps & {
+  items?: NestMenuItemProps[];
+};

package/src/components/menu-sidebar.tsx

@@ -0,0 +1,288 @@
+import { bindGlobalStyles, CssProps, getRenderPageProps, RefProps } from 'lupine.web';
+import { stopPropagation } from '../lib';
+import { MediaQueryMaxWidth } from '../styles';
+import { NestMenuItemProps } from './menu-item-props';
+
+const fetchMenu = async (menuId: string) => {
+  const data = await getRenderPageProps().renderPageFunctions.fetchData(`/api/menu/get/${menuId}`);
+  return data.json;
+};
+
+export type MenuSidebarProps = {
+  mobileMenu?: boolean;
+  desktopMenu?: boolean;
+  menuId?: string;
+  items: NestMenuItemProps[];
+  className?: string;
+  maxWidthMobileMenu?: string;
+  maxWidth?: string;
+  color?: string;
+  backgroundColor?: string;
+};
+export const MenuSidebar = ({
+  mobileMenu,
+  desktopMenu,
+  menuId,
+  items,
+  className,
+  color = 'white',
+  backgroundColor = 'dark',
+  maxWidth = '100%',
+  maxWidthMobileMenu = MediaQueryMaxWidth.TabletMax,
+}: MenuSidebarProps) => {
+  const css: CssProps = {
+    backgroundColor,
+    '.menu-sidebar-top': {
+      width: '100%',
+      backgroundColor: 'var(--sidebar-bg-color)',
+      maxWidth: maxWidth,
+      margin: 'auto',
+      // height: 'auto',
+      position: 'relative',
+
+      display: 'flex',
+      // width: '100%',
+      justifyContent: 'center',
+      flexDirection: 'column',
+    },
+    '&.mobile .menu-sidebar-top': {
+      position: 'absolute',
+    },
+    '.menu-sidebar-item': {
+      display: 'inline-block',
+      color,
+      cursor: 'pointer',
+      padding: '14px 16px',
+      textDecoration: 'none',
+      position: 'relative',
+      borderBottom: 'var(--sidebar-border)',
+    },
+    // select parent when hover on a child, .menu-sidebar-sub-box:hover > .menu-sidebar-item
+    '.menu-sidebar-item:hover': {
+      color: 'var(--activatable-color-hover)',
+      backgroundColor: 'var(--activatable-bg-color-hover)',
+    },
+    '.menu-sidebar-sub-box .menu-sidebar-sub': {
+      display: 'none',
+      // position: 'absolute',
+      // color: 'var(--sidebar-sub-color)',
+      // backgroundColor: 'var(--sidebar-sub-bg-color)',
+      minWidth: '160px',
+      // boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
+      zIndex: 'var(--layer-sidebar-sub)',
+      flexDirection: 'column',
+    },
+    '.menu-sidebar-sub-box > .menu-sidebar-item': {
+      padding: '14px 26px 14px 16px',
+      width: '100%',
+    },
+    '.menu-sidebar-sub-box > .menu-sidebar-sub > .menu-sidebar-item': {
+      paddingLeft: '32px',
+    },
+    '.menu-sidebar-sub-box > .menu-sidebar-item::after': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%) rotate(-90deg)',
+      marginLeft: '6px',
+      width: 0,
+      height: 0,
+      borderLeft: '5px solid transparent',
+      borderRight: '5px solid transparent',
+      borderTop: '5px solid ' + color,
+      right: '10px',
+      transition: 'all 300ms ease-in-out',
+    },
+    '.menu-sidebar-sub-box.open > .menu-sidebar-item::after': {
+      transform: 'rotate(0deg)',
+    },
+    '&.mobile .menu-sidebar-sub-box > .menu-sidebar-item::after': {
+      transform: 'rotate(0deg)',
+    },
+    // '.menu-sidebar-sub-box .menu-sidebar-sub > .menu-sidebar-item': {
+    //   color: 'black',
+    // },
+    '.menu-sidebar-sub-box.open > .menu-sidebar-sub': {
+      display: 'flex',
+    },
+    '.menu-sidebar-sub-box .menu-sidebar-sub .menu-sidebar-item:hover': {
+      color: 'var(--activatable-color-hover)',
+      backgroundColor: 'var(--activatable-bg-color-hover)',
+    },
+    '.menu-sidebar-mobile': {
+      display: 'none',
+      position: 'relative',
+      backgroundColor: 'var(--primary-bg-color)',
+      padding: '5px 4px 6px',
+      '.menu-sidebar-toggle': {
+        cursor: 'pointer',
+        padding: '6px 0 8px 0',
+        'span, span::before, span::after': {
+          cursor: 'pointer',
+          height: '3px',
+          width: '25px',
+          borderRadius: '1px',
+          background: 'var(--primary-color)',
+          position: 'absolute',
+          display: 'block',
+          transition: 'all 300ms ease-in-out',
+        },
+        'span::before, span::after': {
+          content: '""',
+        },
+        'span::before': {
+          top: '-7px',
+        },
+        'span::after': {
+          bottom: '-7px',
+        },
+      },
+      '.menu-sidebar-toggle.active span': {
+        backgroundColor: 'transparent',
+      },
+      '.menu-sidebar-toggle.active span::before': {
+        transform: 'rotate(45deg)',
+        top: 0,
+      },
+      '.menu-sidebar-toggle.active span::after': {
+        transform: 'rotate(-45deg)',
+        top: 0,
+      },
+    },
+    // hide menu for mobile place
+    '&.mobile': {
+      display: 'none',
+      // width: '33px',
+    },
+    '&.mobile .menu-sidebar-mobile': {
+      display: 'block',
+      width: '33px',
+    },
+    ['@media only screen and (max-width: ' + maxWidthMobileMenu + ')']: {
+      // hide menu for not mobile place
+      display: 'none',
+      // show menu for mobile place
+      '&.mobile': {
+        display: 'block',
+      },
+      '.menu-sidebar-top': {
+        display: 'none',
+      },
+      '.menu-sidebar-top.open': {
+        display: 'flex',
+        flexDirection: 'column',
+        zIndex: 'var(--layer-sidebar)',
+      },
+      '.menu-sidebar-top.open .menu-sidebar-sub-box > .menu-sidebar-sub': {
+        display: 'flex',
+        position: 'unset',
+        '.menu-sidebar-item': {
+          paddingLeft: '32px',
+          color,
+          backgroundColor,
+        },
+        '.menu-sidebar-item:hover': {
+          color: 'var(--activatable-color-hover)',
+          backgroundColor: 'var(--activatable-bg-color-hover)',
+        },
+      },
+      '.menu-sidebar-sub-box:hover > .menu-sidebar-item': {
+        backgroundColor: 'unset',
+      },
+      '.menu-sidebar-sub-box:hover > .menu-sidebar-item:hover': {
+        color: 'var(--activatable-color-hover)',
+        backgroundColor: 'var(--activatable-bg-color-hover)',
+      },
+    },
+  };
+
+  // first level is grouped
+  const renderItems = (items: NestMenuItemProps[], className: string) => {
+    return (
+      <div class={className}>
+        {items.map((item) => {
+          let ref: RefProps = {};
+          return item.items ? (
+            <div ref={ref} class='menu-sidebar-sub-box' onClick={() => onItemToggleClick(ref)}>
+              <div class='menu-sidebar-item'>{item.text}</div>
+              {renderItems(item.items, 'menu-sidebar-sub')}
+            </div>
+          ) : item.js ? (
+            <a
+              class='menu-sidebar-item'
+              href='javascript:void(0)'
+              alt={item.alt || item.text}
+              onClick={(event) => {
+                stopPropagation(event);
+                // hide menu
+                onToggleClick();
+                item.js && item.js();
+              }}
+            >
+              {item.text}
+            </a>
+          ) : (
+            <a class='menu-sidebar-item' href={item.url} alt={item.alt || item.text}>
+              {item.text}
+            </a>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const ref: RefProps = {
+    onLoad: async () => {
+      if (menuId) {
+        const menu = await fetchMenu(menuId);
+        if (menu.result.items.length > 0) {
+          const items = menu.result.items.map((i: any) => {
+            const l = i.split('\t');
+            return { text: l[5], url: l[4] };
+          });
+          const newDom = renderItems(items, 'menu-sidebar-top');
+          //mountComponents('.menu-sidebar-top', newDom);
+        }
+      }
+    },
+  };
+  const onToggleClick = () => {
+    const menu = ref.$('.menu-sidebar-mobile .menu-sidebar-toggle');
+    menu.classList.toggle('active');
+    const topMenu = ref.$('.menu-sidebar-top');
+    topMenu.classList.toggle('open');
+  };
+  const onItemToggleClick = (ref: RefProps) => {
+    // if (event.target != ref.current && (event.target as any).parentNode != ref.current) {
+    //   return;
+    // }
+    ref.current.classList.toggle('open');
+  };
+
+  // if this component is used twice, then the Global styles is only set at the first time
+  bindGlobalStyles('menu-sidebar-box', '.menu-sidebar-box', css);
+
+  // show the menu on both mobile and desktop
+  const newCss: CssProps =
+    (!desktopMenu && !mobileMenu) || (desktopMenu && mobileMenu)
+      ? {
+          ['@media only screen and (max-width: ' + maxWidthMobileMenu + ')']: {
+            display: 'block',
+            '.menu-sidebar-top': {
+              display: 'block',
+            },
+          },
+        }
+      : {};
+  return (
+    <div css={newCss} ref={ref} class={['menu-sidebar-box', className, mobileMenu ? 'mobile' : ''].join(' ')}>
+      <div class='menu-sidebar-mobile'>
+        <div class='menu-sidebar-toggle' onClick={onToggleClick}>
+          <span></span>
+        </div>
+      </div>
+
+      {renderItems(items, 'menu-sidebar-top')}
+    </div>
+  );
+};