lupine.components 1.0.27 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.0.27",
+  "version": "1.1.1",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/components/action-sheet.tsx

@@ -42,7 +42,7 @@ export class ActionSheet {
       handleClose();
     };
     const onClickContainer = (event: any) => {
-      if (closeWhenClickOutside !== false && event.target.className === 'act-sheet-box') {
+      if (closeWhenClickOutside !== false && event.target.classList.contains('act-sheet-box')) {
         handleClose();
       }
     };

package/src/components/drag-refresh.tsx

@@ -3,11 +3,18 @@ import { Spinner02, SpinnerSize } from './spinner';
 
 export type DragRefreshCloseProps = () => void;
 
+export type DragRefreshHookProps = {
+  setEnable: (enable: boolean) => void;
+  updateOnDragRefresh: (onDragRefresh: (close: DragRefreshCloseProps) => Promise<void>) => void;
+};
+
 export type DragRefreshProps = {
   container: string;
   onDragRefresh: (close: DragRefreshCloseProps) => Promise<void>;
+  hook?: DragRefreshHookProps;
 };
 
+// globally there should be only one DragFresh
 export const DragFresh = (props: DragRefreshProps) => {
   const css: CssProps = {
     display: 'flex',
@@ -20,7 +27,7 @@ export const DragFresh = (props: DragRefreshProps) => {
       top: '0',
       left: '0',
       width: '100%',
-      zIndex: 3,
+      zIndex: 'var(--layer-dragged-item)',
       display: 'none',
       justifyContent: 'center',
       transition: 'opacity 0.5s ease',
@@ -32,6 +39,15 @@ export const DragFresh = (props: DragRefreshProps) => {
     },
   };
 
+  let isEnabled = true;
+  if (props.hook) {
+    props.hook.setEnable = (enable: boolean) => {
+      isEnabled = enable;
+    };
+    props.hook.updateOnDragRefresh = (onDragRefresh: (close: DragRefreshCloseProps) => Promise<void>) => {
+      props.onDragRefresh = onDragRefresh;
+    };
+  }
   const closeSpin = () => {
     const spinnerDom = ref.$('.drag-spinner') as HTMLDivElement;
     if (!spinnerDom) return;
@@ -53,12 +69,14 @@ export const DragFresh = (props: DragRefreshProps) => {
       let needRefresh = false;
       const maxHeight = 150;
       container.addEventListener('touchstart', (e: any) => {
+        if (!isEnabled) return;
         touchstartY = e.touches[0].clientY;
         touchstartX = e.touches[0].clientX;
         direction = '';
         needRefresh = false;
       });
       container.addEventListener('touchmove', (e: any) => {
+        if (!isEnabled) return;
         const touchY = e.touches[0].clientY;
         const touchX = e.touches[0].clientX;
         const movedY = touchY - touchstartY;
@@ -89,6 +107,7 @@ export const DragFresh = (props: DragRefreshProps) => {
         }
       });
       container.addEventListener('touchend', (e) => {
+        if (!isEnabled) return;
         if (direction === 'Y') {
           if (needRefresh) {
             props.onDragRefresh(closeSpin);

package/src/components/float-window.tsx

@@ -49,7 +49,7 @@ export class FloatWindow {
     contentOverflowY = 'auto', // set to unset for having popup menu inside
   }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
     const onClickContainer = (event: any) => {
-      if (closeWhenClickOutside !== false && event.target.className === 'fwin-box') {
+      if (closeWhenClickOutside !== false && event.target.classList.contains('fwin-box')) {
         handleClose();
       }
     };

package/src/components/html-var.tsx

@@ -49,8 +49,3 @@ export class HtmlVar implements HtmlVarResult {
     };
   }
 }
-
-// For backward compatibility
-export const createHtmlVar = (initial?: string | VNode<any>): HtmlVarResult => {
-  return new HtmlVar(initial);
-};

package/src/components/index.ts

@@ -30,6 +30,7 @@ export * from './spinner';
 export * from './svg';
 export * from './tabs';
 export * from './text-glow';
+export * from './text-scale';
 export * from './text-wave';
 export * from './theme-selector';
 export * from './toggle-base';

package/src/components/menu-sidebar.tsx

@@ -1,4 +1,4 @@
-import { bindGlobalStyles, CssProps, getRenderPageProps, RefProps } from 'lupine.web';
+import { bindGlobalStyle, CssProps, getRenderPageProps, RefProps } from 'lupine.web';
 import { stopPropagation } from '../lib';
 import { MediaQueryMaxWidth } from '../styles';
 import { NestMenuItemProps } from './menu-item-props';
@@ -283,7 +283,7 @@ export const MenuSidebar = ({
   };
 
   // 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);
+  bindGlobalStyle('menu-sidebar-box', css);
 
   // show the menu on both mobile and desktop
   const newCss: CssProps =

package/src/components/notice-message.tsx

@@ -1,4 +1,4 @@
-import { CssProps, bindGlobalStyles } from 'lupine.web';
+import { CssProps, bindGlobalStyle } from 'lupine.web';
 /**
 How to use:
   Notification.sendMessage(message);
@@ -71,7 +71,7 @@ export class NotificationMessage {
         color: 'black',
       },
     };
-    bindGlobalStyles('lj_notification', '.lj_notification', css);
+    bindGlobalStyle('lj_notification', css);
 
     let container = document.querySelector('.lj_notification');
     if (!container) {

package/src/components/paging-link.tsx

@@ -1,4 +1,4 @@
-import { CssProps, RefProps, bindGlobalStyles, getRenderPageProps } from 'lupine.web';
+import { CssProps, RefProps, bindGlobalStyle, getRenderPageProps } from 'lupine.web';
 
 let _DEFAULT_PAGE_LIMIT = 10;
 export const getDefaultPageLimit = () => {
@@ -70,7 +70,7 @@ export const PagingLink = ({
     },
   };
 
-  bindGlobalStyles('paging-link-box', '.paging-link-box', css);
+  bindGlobalStyle('paging-link-box', css);
   pageIndex = pageIndex ?? (Number.parseInt(getRenderPageProps().query['pg_i'] || '') || 0);
   pageLimit = pageLimit || _DEFAULT_PAGE_LIMIT;
   let maxPages = Math.floor(itemsCount / pageLimit);

package/src/components/resizable-splitter.tsx

@@ -1,4 +1,4 @@
-import { bindGlobalStyles, CssProps } from 'lupine.web';
+import { bindGlobalStyle, CssProps } from 'lupine.web';
 import { stopPropagation } from '../lib';
 /**
 How to use:
@@ -63,7 +63,7 @@ export class ResizableSplitter {
         backgroundColor: '#ccc',
       },
     };
-    bindGlobalStyles('resizable-splitter', 'html', css);
+    bindGlobalStyle('resizable-splitter', css);
 
     window.addEventListener('mousemove', ResizableSplitter.onMousemove.bind(ResizableSplitter), false);
     document.documentElement.addEventListener('mouseup', ResizableSplitter.onMouseup.bind(ResizableSplitter), false);

package/src/components/tabs.tsx

@@ -1,4 +1,12 @@
-import { RefProps, VNode, mountInnerComponent } from 'lupine.web';
+import {
+  CssProps,
+  RefProps,
+  VNode,
+  bindGlobalStyle,
+  domUniqueId,
+  getGlobalStylesId,
+  mountInnerComponent,
+} from 'lupine.web';
 import { stopPropagation } from '../lib';
 
 export type TabsHookProps = {
@@ -24,31 +32,30 @@ export type TabsProps = {
 };
 // For CSS or query selectors, please pay attention to that Tabs can be nested
 export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: 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`);
+    const header = ref.$(`.&tabs > div > .tab.active`);
     header && header.classList.remove('active');
-    const page = ref.$(`.pages[data-refid=${ref.id}] > .page.active`);
+    const page = ref.$(`.&pages > .page.active`);
     page && page.classList.remove('active');
   };
   const updateIndex = (index: number) => {
     clearIndex();
-    const doms = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
+    const doms = ref.$all(`.&tabs > div > .tab`);
     if (index >= 0 && index < doms.length) {
       doms[index].classList.add('active');
-      const pages = ref.$all(`.pages[data-refid=${ref.id}] > .page`);
+      const pages = ref.$all(`.&pages > .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`);
+    const doms = ref.$all(`.&tabs > 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`);
+      const pages = ref.$all(`.&pages > .page`);
       pages[index].remove();
 
       if (isAct) {
@@ -65,7 +72,7 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
   };
 
   const newPage = async (title: string, page: VNode<any>, index?: number) => {
-    const allTabs = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
+    const allTabs = ref.$all(`.&tabs > div > .tab`);
     let newPageIndex = allTabs.length;
     if (typeof index === 'number' && index >= 0 && index < allTabs.length) {
       newPageIndex = index;
@@ -78,12 +85,12 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
     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);
+      ref.$(`.&tabs`).appendChild(newTab);
+      ref.$(`.&pages`).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]);
+      ref.$(`.&tabs`).insertBefore(newTab, allTabs[newPageIndex]);
+      const pages = ref.$all(`.&pages > .page`);
+      ref.$(`.&pages`).insertBefore(newPage, pages[newPageIndex]);
     }
 
     await mountInnerComponent(newTab, newTab2);
@@ -108,7 +115,7 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
     updateIndex(index);
   };
   const flashTitle = (index: number) => {
-    const doms = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
+    const doms = ref.$all(`.&tabs > div > .tab`);
     if (index >= 0 && index < doms.length) {
       doms[index].classList.add('flash');
       setTimeout(() => {
@@ -118,7 +125,7 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
   };
   if (refUpdate) {
     refUpdate.updateTitle = (index: number, title: string) => {
-      const doms = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
+      const doms = ref.$all(`.&tabs > div > .tab`);
       if (index >= 0 && index < doms.length) {
         doms[index].innerHTML = title;
       }
@@ -127,15 +134,15 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
     refUpdate.removePage = removePage;
     refUpdate.newPage = newPage;
     refUpdate.getIndex = () => {
-      const header = ref.$(`.tabs[data-refid=${ref.id}] > div > .tab.active`);
+      const header = ref.$(`.&tabs > 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`);
+      const doms = ref.$all(`.&tabs > div > .tab`);
       return doms.length;
     };
     refUpdate.findAndActivate = (title: string) => {
-      const doms = ref.$all(`.tabs[data-refid=${ref.id}] > div > .tab`);
+      const doms = ref.$all(`.&tabs > div > .tab`);
       for (let i = 0; i < doms.length; i++) {
         if (doms[i].innerText === title) {
           updateIndex(i);
@@ -148,7 +155,7 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
   }
 
   // pay attention to nest tabs
-  const newCss: any = {
+  const css: CssProps = {
     display: 'flex',
     'flex-direction': 'column',
     width: '100%',
@@ -158,7 +165,7 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
       // hide tabs when there is no tabs (not need to show borders)
       display: 'none',
     },
-    '> .tabs': {
+    '> .&tabs': {
       display: 'flex',
       height: 'auto',
       'border-bottom': '1px solid grey',
@@ -212,7 +219,7 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
         color: '#ff0000',
       },
     },
-    '> .pages': {
+    '> .&pages': {
       display: 'flex',
       flex: '1',
       position: 'relative',
@@ -232,16 +239,32 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
       },
     },
   };
+  // we want to put all common styles in the header
+  const tabGlobalCssId = getGlobalStylesId(css);
+  bindGlobalStyle(tabGlobalCssId, css);
 
+  const ref: RefProps = {
+    globalCssId: tabGlobalCssId,
+  };
+
+  // but we also want to create unique id for the current tab
+  const cssTab: CssProps = {
+    '&tabs': {
+      display: 'flex',
+    },
+    '&pages': {
+      display: 'flex',
+    },
+  };
   return (
-    <div ref={ref} css={newCss} class={'tabs-box' + (topClassName ? ' ' + topClassName : '')}>
-      <div class='tabs' data-refid={ref}>
+    <div ref={ref} css={cssTab} class={topClassName ? ' ' + topClassName : ''}>
+      <div class='&tabs tabs'>
         {pages.map((i, index) => {
           const className = index === newIndex ? ' active' : '';
           return <div>{createTabHeader(i.title, className)}</div>;
         })}
       </div>
-      <div class='pages' data-refid={ref}>
+      <div class='&pages pages'>
         {pages.map((i, index) => {
           const className = index === newIndex ? ' active' : '';
           return <div class={'page' + className}>{i.page}</div>;

package/src/components/text-glow.tsx

@@ -1,4 +1,4 @@
-import { CssProps } from 'lupine.web';
+import { bindGlobalStyle, CssProps } from 'lupine.web';
 
 export type TextGlowProps = {
   text: string;
@@ -28,8 +28,9 @@ export const TextGlow = (props: TextGlowProps) => {
       },
     },
   };
+  bindGlobalStyle('text-glow-top', css);
   return (
-    <div css={css} class='text-glow-top'>
+    <div class='text-glow-top'>
       <div class='text-glow'>{props.text}</div>
     </div>
   );

package/src/components/text-scale.tsx

@@ -0,0 +1,42 @@
+import { bindGlobalStyle, CssProps } from 'lupine.web';
+
+export type TextScaleProps = {
+  text: string;
+  color?: string;
+  backgroundColor?: string;
+  padding?: string;
+  fontSize?: string;
+  fontWeight?: string;
+};
+export const TextScale = (props: TextScaleProps) => {
+  const css: CssProps = {
+    width: `100%`,
+    height: `100%`,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: props.color || '#22b8ff',
+    fontSize: props.fontSize || '30px',
+    fontWeight: props.fontWeight || '500',
+    '.text-scale': {
+      animation: 'text-scale 1.5s infinite alternate',
+      backgroundColor: props.backgroundColor || '#a1ffe8',
+      padding: props.padding || '10px',
+      borderRadius: '5px',
+    },
+    '@keyframes text-scale': {
+      '0%, 100%': {
+        transform: 'scale(1)',
+      },
+      '40%': {
+        transform: 'scale(0.7)',
+      },
+    },
+  };
+  bindGlobalStyle('text-scale-top', css);
+  return (
+    <div class='text-scale-top'>
+      <div class='text-scale'>{props.text}</div>
+    </div>
+  );
+};

package/src/components/text-wave.tsx

@@ -1,4 +1,4 @@
-import { CssProps } from "lupine.web";
+import { bindGlobalStyle, CssProps } from "lupine.web";
 
 export type TextLoadingProps = {
   text: string;
@@ -21,12 +21,12 @@ export const TextWave = (props: TextLoadingProps) => {
     fontSize: props.fontSize || '20px',
     fontWeight: props.fontWeight,
     textShadow: '1px -1px #ffffff, -2px 2px #999, -6px 7px 3px #131f5be6',
-    '.text-loading.wave-animetion span': {
+    '.text-wave.wave-animetion span': {
       display: 'inline-block',
       padding: '0 4px',
       animation: 'wave-text 1s ease-in-out infinite',
     },
-    '.text-loading.wave-animetion': {
+    '.text-wave.wave-animetion': {
       marginTop: '0.6em',
       ...cssMap,
     },
@@ -42,9 +42,10 @@ export const TextWave = (props: TextLoadingProps) => {
       },
     },
   };
+  bindGlobalStyle('text-wave-top', css);
   return (
-    <div css={css} class='text-loading-top'>
-      <div class='text-loading wave-animetion'>
+    <div class='text-wave-top'>
+      <div class='text-wave wave-animetion'>
         {props.text.split('').map((char, index) => (
           <span class={`span${index}`}>{char}</span>
         ))}

package/src/components/theme-selector.tsx

@@ -1,20 +1,17 @@
-import { CssProps, bindGlobalStyles, getCurrentTheme, updateTheme } from 'lupine.web';
+import { CssProps, getCurrentTheme, updateTheme } from 'lupine.web';
 import { PopupMenu } from './popup-menu';
 
 export type ThemeSelectorProps = {
   className?: string;
-  css?: CssProps;
 };
 
-export const ThemeSelector = ({ className, css }: ThemeSelectorProps) => {
-  const newCss: CssProps = {
+export const ThemeSelector = ({ className }: ThemeSelectorProps) => {
+  const css: CssProps = {
     display: 'flex',
     flexDirection: 'column',
     alignSelf: 'end',
-    ...css,
   };
 
-  bindGlobalStyles('theme-switch', '.theme-switch', newCss);
   const handleSelected = (themeName: string) => {
     updateTheme(themeName);
   };
@@ -24,7 +21,7 @@ export const ThemeSelector = ({ className, css }: ThemeSelectorProps) => {
     list.push(themeName);
   }
   return (
-    <div css={newCss} class={['theme-switch', className].join(' ')} title='Select theme'>
+    <div css={css} class={['theme-switch', className].join(' ')} title='Select theme'>
       <PopupMenu list={list} defaultValue={currentTheme.themeName} handleSelected={handleSelected}></PopupMenu>
     </div>
   );

package/src/components/toggle-base.tsx

@@ -1,22 +1,22 @@
-import { CssProps, RefProps, VNode } from 'lupine.web';
+import { bindGlobalStyle, CssProps, RefProps, VNode } from 'lupine.web';
 
-export const PlayButtonSize = {
+export const TogglePlayButtonSize = {
   Small: { w: 50, h: 50 },
   Medium: { w: 70, h: 70 },
   Large: { w: 90, h: 90 },
 };
-export type PlayButtonSizeProps = {
+export type TogglePlayButtonSizeProps = {
   w: number;
   h: number;
 };
-export type PlayButtonProps = {
-  size: PlayButtonSizeProps;
+export type TogglePlayButtonProps = {
+  size: TogglePlayButtonSizeProps;
   disabled?: boolean;
   checked?: boolean;
   onClick?: (checked: boolean) => void;
   hook?: ToggleBaseHookProps;
 };
-export const PlayButton = (props: PlayButtonProps) => {
+export const TogglePlayButton = (props: TogglePlayButtonProps) => {
   const css: CssProps = {
     width: `100%`,
     height: `100%`,
@@ -45,12 +45,12 @@ export const PlayButton = (props: PlayButtonProps) => {
       backgroundColor: '#5d578b',
     },
   };
+  bindGlobalStyle('toggle-play-button-component', css);
   return (
     <ToggleBase {...props}>
       <ToggleWaveFrame>
         <div
-          css={css}
-          class={`toggle-button-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
+          class={`toggle-play-button-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
             props.disabled ? ' disabled' : ''
           }`}
         >
@@ -62,7 +62,7 @@ export const PlayButton = (props: PlayButtonProps) => {
 };
 
 export type ToggleButtonProps = {
-  size: ToggleBaseSizeProps;
+  // size: ToggleBaseSizeProps;
   onText: string;
   offText: string;
   disabled?: boolean;
@@ -85,7 +85,7 @@ export const ToggleButton = (props: ToggleButtonProps) => {
     },
   };
   return (
-    <ToggleBase {...props}>
+    <ToggleBase {...props} size={{ w: 'auto', h: 'auto' }}>
       <div
         css={css}
         class={`toggle-button-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
@@ -120,12 +120,11 @@ export const ToggleWaveFrame = (props: ToggleWaveFrameProps) => {
       position: 'absolute',
       width: `100%`,
       height: `100%`,
-      top: '-0',
+      top: '0',
       left: '0',
       borderRadius: '50%',
       backgroundColor: '#eb205580',
       opacity: 0,
-      zIndex: -1,
       animation: 'pulse-border 3s ease-in-out infinite',
     },
     '.toggle-waves-1': {
@@ -143,16 +142,20 @@ export const ToggleWaveFrame = (props: ToggleWaveFrameProps) => {
       'animation-delay': '2s',
     },
     '.toggle-waves-box': {
+      position: 'absolute',
       width: `100%`,
       height: `100%`,
+      top: '0',
+      left: '0',
       padding: `18%`,
     },
     '&.disabled .toggle-waves': {
       backgroundColor: '#5d578b',
     },
   };
+  bindGlobalStyle('toggle-waves-box', css);
   return (
-    <div css={css} class='toggle-waves-box toggle-placeholder'>
+    <div class='toggle-waves-box toggle-placeholder'>
       <div class='toggle-waves toggle-waves-1'></div>
       <div class='toggle-waves toggle-waves-2'></div>
       <div class='toggle-waves toggle-waves-3'></div>
@@ -230,8 +233,6 @@ export const ToggleBase = (props: ToggleBaseProps) => {
   }
 
   const css: CssProps = {
-    width: `${typeof props.size.w === 'number' ? props.size.w + 'px' : props.size.w}`,
-    height: `${typeof props.size.h === 'number' ? props.size.h + 'px' : props.size.h}`,
     '.toggle-base-box, .toggle-base-container': {
       position: 'relative',
       width: `100%`,
@@ -243,8 +244,16 @@ export const ToggleBase = (props: ToggleBaseProps) => {
       pointerEvents: 'none',
     },
   };
+  bindGlobalStyle('toggle-base-component', css);
   return (
-    <div ref={ref} css={css} class='toggle-base-component'>
+    <div
+      ref={ref}
+      css={{
+        width: `${typeof props.size.w === 'number' ? props.size.w + 'px' : props.size.w}`,
+        height: `${typeof props.size.h === 'number' ? props.size.h + 'px' : props.size.h}`,
+      }}
+      class='toggle-base-component'
+    >
       <label class='toggle-base-box'>
         <div class='toggle-base-container'>{props.children}</div>
         <input

package/src/components/toggle-switch.tsx

@@ -1,4 +1,4 @@
-import { bindGlobalStyles, CssProps } from 'lupine.web';
+import { bindGlobalStyle, CssProps } from 'lupine.web';
 import { ToggleBase, ToggleBaseHookProps } from './toggle-base';
 
 export enum ToggleSwitchSize {
@@ -25,7 +25,7 @@ export const ToggleSwitch = (props: ToggleSwitchProps) => {
       : props.size === ToggleSwitchSize.Large
       ? 42
       : 34;
-  const cssSize =
+  const classSize =
     props.size === ToggleSwitchSize.SmallSmall
       ? 'smallsmall'
       : props.size === ToggleSwitchSize.Small
@@ -93,10 +93,6 @@ export const ToggleSwitch = (props: ToggleSwitchProps) => {
       bottom: '2px',
     },
 
-    '& .ts-on-text, & .ts-off-text': {
-      display: 'none',
-      width: props.textWidth,
-    },
     '&.toggle-on .ts-on-text': {
       display: 'block',
     },
@@ -136,14 +132,22 @@ export const ToggleSwitch = (props: ToggleSwitchProps) => {
     },
   };
 
-  bindGlobalStyles('toggle-switch-theme', '', cssTheme);
+  bindGlobalStyle('toggle-switch-theme', cssTheme, false, true);
+  bindGlobalStyle('toggle-switch-component', css);
+
+  const cssSize: CssProps = {
+    '& .ts-on-text, & .ts-off-text': {
+      display: 'none',
+      width: props.textWidth,
+    },
+  };
   return (
     <ToggleBase {...props} size={{ w: 'auto', h: sizeH }}>
       <div
-        css={css}
+        css={cssSize}
         class={`toggle-switch-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
           props.disabled ? ' disabled' : ''
-        } ${cssSize}`}
+        } ${classSize}`}
       >
         <span class='ts-slider'>
           <span class='ts-on-text'>{props.text?.on}</span>

package/src/lib/base62.ts

@@ -0,0 +1,23 @@
+export class Base62 {
+  private static ALPHABET = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+  private static BASE = 62;
+  static toString(num: number) {
+    if (num === 0) return Base62.ALPHABET[0];
+
+    let result = '';
+    while (num > 0) {
+      const rem = num % Base62.BASE;
+      result = Base62.ALPHABET[rem] + result;
+      num = Math.floor(num / Base62.BASE);
+    }
+    return result;
+  }
+
+  static fromString(str: string) {
+    let result = 0;
+    for (let i = 0; i < str.length; i++) {
+      result = result * Base62.BASE + Base62.ALPHABET.indexOf(str[i]);
+    }
+    return result;
+  }
+}

package/src/lib/index.ts

@@ -1,3 +1,4 @@
+export * from './base62';
 export * from './blob-utils';
 export * from './calculate-text-width';
 export * from './date-utils';