lupine.components 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 uuware
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# lupine.components
+
+lupine.components is a collection of React-like, extremely fast, small size and lightweight frontend components.

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "lupine.components",
+  "version": "1.0.0",
+  "license": "MIT",
+  "author": "uuware.com",
+  "homepage": "https://uuware.com/",
+  "description": "lupine.components is a extremely fast, small size and lightweight frontend framework, using React TSX syntax.",
+  "main": "src/index.ts",
+  "source": "src/index.ts",
+  "types": "src/index.ts",
+  "engines": {
+    "node": ">= 20"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "browser": "./src/index.ts",
+      "umd": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    }
+  },
+  "keywords": [
+    "frontend",
+    "responsive",
+    "lightweight",
+    "grid"
+  ],
+  "scripts": {
+    "note": "echo 'build is not needed as the typescript code is supposed to be referred directly from other projects'",
+    "npm-publish": "npm publish --access public",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "lupine.web": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5"
+  }
+}

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

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

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

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

@@ -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,225 @@
+import { CssProps, RefProps, VNode, mountComponents } from 'lupine.web';
+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>
+  );
+};