lupine.web 1.0.14

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.js
+
+LupineJs is a React-like, extremely fast, small size and lightweight frontend framework.

package/jsx-runtime/index.js

@@ -0,0 +1,14 @@
+/**
+ * JSX.Element factory used by Typescript's JSX transform
+ * @param type
+ * @param props
+ */
+function jsx(type, props) {
+  return { type, props };
+}
+
+function Fragment(props) {
+  return { type: 'Fragment', props };
+}
+
+export { jsx as jsx, jsx as jsxs, jsx as jsxDEV, Fragment };

package/jsx-runtime/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "jsx-runtime",
+  "amdName": "jsxRuntime",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Lupine.js JSX runtime",
+  "main": "index.js",
+  "module": "index.js",
+  "umd:main": "index.js",
+  "source": "index.js",
+  "types": "src/index.d.ts",
+  "license": "MIT",
+  "peerDependencies": {
+    "lupine.js": "^1.0.0"
+  }
+}

package/jsx-runtime/src/index.d.ts

@@ -0,0 +1,2 @@
+import { JSXInternal } from '../../src/jsx';
+export { JSXInternal as JSX };

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "lupine.web",
+  "version": "1.0.14",
+  "license": "MIT",
+  "author": "uuware.com",
+  "homepage": "https://uuware.com/",
+  "description": "lupine.web is a extremely fast, small size and lightweight frontend framework, using React TSX syntax.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uuware/lupine.web.git"
+  },
+  "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"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx-runtime/src/index.d.ts",
+      "browser": "./jsx-runtime/index.js",
+      "umd": "./jsx-runtime/index.js",
+      "import": "./jsx-runtime/index.js",
+      "require": "./jsx-runtime/index.js"
+    }
+  },
+  "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"
+  },
+  "peerDependencies": {
+    "jsx-runtime": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5"
+  }
+}

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

@@ -0,0 +1,16 @@
+import { darkThemes } from './dark-themes';
+import { lightThemes } from './light-themes';
+
+export const baseThemes: { [key: string]: { [key: string]: string } } = {
+  light: lightThemes,
+  dark: darkThemes,
+  lightGreen: {
+    ...lightThemes,
+    '--background-primary': '#d8ffe3', //	Primary background
+    '--color-primary': '#303030', //	Primary text color
+    backgroundPrimary: '', //	Primary background
+    backgroundOnPrimary: '', //	Background for surfaces on top of primary background
+    backgroundSecondary: '#f5f5f7', //	Secondary background
+    backgroundOnSecondary: '#e5e5e7', //	Background for surfaces on top of secondary background
+  },
+};

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

@@ -0,0 +1,85 @@
+import { sharedThemes } from './shared-themes';
+
+export const darkThemes: { [key: string]: string } = {
+  ...sharedThemes,
+  '--theme-name': 'dark',
+
+  '--scrollbar-bg': '#1c1c1c',
+  '--scrollbar-thumb-bg': '#373636',
+  '--scrollbar-active-thumb-bg': '#5b5b5b',
+
+  '--primary-color': '#aeaeae',
+  '--primary-color-disabled': '#7d7d7d',
+  '--primary-bg-color': '#000000',
+  '--primary-border-color': '#aeaeae',
+  '--primary-border': '1px solid var(--primary-border-color)',
+  // '--secondary-color': '#b3b3b3',
+  // '--secondary-bg-color': '#151515',
+  // '--secondary-border': '1px solid #303030',
+  '--primary-opacity': '0.5', // used for dark theme
+  '--primary-disabled-opacity': '0.7', // used for dark theme
+  '--primary-accent-color': '#0c3c63', // used for radio and checkbox's background color
+
+  // including menus, tabs
+  '--activatable-color-normal': 'var(--primary-color)',
+  '--activatable-bg-color-normal': 'var(--primary-bg-color)',
+  '--activatable-color-hover': '#e2e2e2',
+  '--activatable-bg-color-hover': '#6d6d6d',
+  '--activatable-color-selected': '#c2c2c2',
+  '--activatable-bg-color-selected': '#5d5d5d',
+  // '--menu-color-hover': '#303030',
+  // '--menu-color': 'var(--primary-color)',  //'#2a2a2a',
+  // '--menu-bg-color': 'var(--primary-bg-color)',  //'#2a2a2a',
+  // '--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': '#000000',
+  // '--sidebar-sub-color': 'var(--sidebar-color)',
+  // '--sidebar-sub-bg-color': '#000000',
+  '--sidebar-border': '1px solid #303030',
+  // '--sidebar-hover-color': 'var(--sidebar-color)',
+  // '--sidebar-hover-bg-color': '#000000',
+
+  '--row-1-bg-color': '#212121',
+  '--row-2-bg-color': '#303030',
+  '--row-hover-bg-color': '#383838',
+
+  '--success-color': '#04AA6D',
+  '--info-color': '#2196F3',
+  '--warning-color': '#ff9800',
+  '--error-color': '#f44336',
+  '--success-bg-color': '#10553b',
+  '--info-bg-color': '#1a588a',
+  '--warning-bg-color': '#a36305',
+  '--error-bg-color': '#882c25',
+  '--notice-color-with-bg': '#ececec',
+
+  '--cover-mask-bg-color': '#878a9460',
+  '--cover-bg-color': '#202020',
+  '--cover-box-shadow': '1px 1px 4px #c6c6c6',
+
+  '--input-color': '#bdbdbd',
+  '--input-bg-color': '#000000',
+  '--input-box-shadow': '0px 0px 0px #000000, 1px 1px 0px 0px #50505045',
+  '--input-border-focus': '1px solid #0074d9',
+
+  '--button-color': '#bdbdbd',
+  '--button-bg': '-webkit-linear-gradient(top, #282828 0%, #212223 74%, #1a1a1a 100%)', // darker
+  '--button-bg-hover': '-webkit-linear-gradient(top, #282828 0%, #313233 74%, #252525 100%)', // darker
+  // '--button-bg': '-webkit-linear-gradient(top, #414141 0%, #373e48 74%, #434242 100%)',
+  '--button-border': '1px solid #373e48',
+  '--button-box-shadow': 'unset',
+
+  '--header-color': '#000080',
+  '--header-bg-color': '#000000',
+
+  // '--background-primary': '#353536', //	Primary background
+  // '--color-primary': '#e0e0e0', //	Primary text color
+  // backgroundPrimary: '', //	Primary background
+  // backgroundOnPrimary: '', //	Background for surfaces on top of primary background
+  // backgroundSecondary: '#f5f5f6', //	Secondary background
+  // backgroundOnSecondary: '#e5e5e6', //	Background for surfaces on top of secondary background
+};

package/src/assets/themes/index.ts

@@ -0,0 +1,4 @@
+export * from './shared-themes';
+export * from './dark-themes';
+export * from './light-themes';
+export * from './base-themes';

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

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

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

@@ -0,0 +1,138 @@
+import { CssProps, RefProps } from 'lupine.js';
+
+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.js';
+
+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>
+  );
+};