lupine.components 1.1.0 → 1.1.1

package/package.json

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

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', 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', 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', 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', 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 { CssProps, RefProps, VNode, bindGlobalStyles, mountInnerComponent } from 'lupine.web';
+import {
+  CssProps,
+  RefProps,
+  VNode,
+  bindGlobalStyle,
+  domUniqueId,
+  getGlobalStylesId,
+  mountInnerComponent,
+} from 'lupine.web';
 import { stopPropagation } from '../lib';
 
 export type TabsHookProps = {
@@ -24,7 +32,6 @@ 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 > div > .tab.active`);
@@ -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',
@@ -233,7 +240,12 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
     },
   };
   // we want to put all common styles in the header
-  bindGlobalStyles('s-tabs-box', css);
+  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 = {
@@ -245,7 +257,7 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
     },
   };
   return (
-    <div ref={ref} css={cssTab} class={'s-tabs-box' + (topClassName ? ' ' + topClassName : '')}>
+    <div ref={ref} css={cssTab} class={topClassName ? ' ' + topClassName : ''}>
       <div class='&tabs tabs'>
         {pages.map((i, index) => {
           const className = index === newIndex ? ' active' : '';

package/src/components/text-glow.tsx

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

package/src/components/text-scale.tsx

@@ -1,4 +1,4 @@
-import { bindGlobalStyles, CssProps } from 'lupine.web';
+import { bindGlobalStyle, CssProps } from 'lupine.web';
 
 export type TextScaleProps = {
   text: string;
@@ -33,7 +33,7 @@ export const TextScale = (props: TextScaleProps) => {
       },
     },
   };
-  bindGlobalStyles('text-scale-top', css);
+  bindGlobalStyle('text-scale-top', css);
   return (
     <div class='text-scale-top'>
       <div class='text-scale'>{props.text}</div>

package/src/components/text-wave.tsx

@@ -1,4 +1,4 @@
-import { bindGlobalStyles, CssProps } from "lupine.web";
+import { bindGlobalStyle, CssProps } from "lupine.web";
 
 export type TextLoadingProps = {
   text: string;
@@ -42,7 +42,7 @@ export const TextWave = (props: TextLoadingProps) => {
       },
     },
   };
-  bindGlobalStyles('text-wave-top', css);
+  bindGlobalStyle('text-wave-top', css);
   return (
     <div class='text-wave-top'>
       <div class='text-wave wave-animetion'>

package/src/components/toggle-base.tsx

@@ -1,4 +1,4 @@
-import { bindGlobalStyles, CssProps, RefProps, VNode } from 'lupine.web';
+import { bindGlobalStyle, CssProps, RefProps, VNode } from 'lupine.web';
 
 export const TogglePlayButtonSize = {
   Small: { w: 50, h: 50 },
@@ -45,7 +45,7 @@ export const TogglePlayButton = (props: TogglePlayButtonProps) => {
       backgroundColor: '#5d578b',
     },
   };
-  bindGlobalStyles('toggle-play-button-component', css);
+  bindGlobalStyle('toggle-play-button-component', css);
   return (
     <ToggleBase {...props}>
       <ToggleWaveFrame>
@@ -153,7 +153,7 @@ export const ToggleWaveFrame = (props: ToggleWaveFrameProps) => {
       backgroundColor: '#5d578b',
     },
   };
-  bindGlobalStyles('toggle-waves-box', css);
+  bindGlobalStyle('toggle-waves-box', css);
   return (
     <div class='toggle-waves-box toggle-placeholder'>
       <div class='toggle-waves toggle-waves-1'></div>
@@ -244,7 +244,7 @@ export const ToggleBase = (props: ToggleBaseProps) => {
       pointerEvents: 'none',
     },
   };
-  bindGlobalStyles('toggle-base-component', css);
+  bindGlobalStyle('toggle-base-component', css);
   return (
     <div
       ref={ref}

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 {
@@ -132,8 +132,8 @@ export const ToggleSwitch = (props: ToggleSwitchProps) => {
     },
   };
 
-  bindGlobalStyles('toggle-switch-theme', cssTheme, false, true);
-  bindGlobalStyles('toggle-switch-component', css);
+  bindGlobalStyle('toggle-switch-theme', cssTheme, false, true);
+  bindGlobalStyle('toggle-switch-component', css);
 
   const cssSize: CssProps = {
     '& .ts-on-text, & .ts-off-text': {