lupine.components 1.0.23 → 1.0.25

package/package.json

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

package/src/components/drag-refresh.tsx

@@ -49,7 +49,7 @@ export const DragFresh = (props: DragRefreshProps) => {
       if (!container || !pullDom || !spinnerDom) return;
       let touchstartY = 0;
       let touchstartX = 0;
-      let direction = '';
+      let direction: 'X' | 'Y' | '' = '';
       let needRefresh = false;
       const maxHeight = 150;
       container.addEventListener('touchstart', (e: any) => {
@@ -59,23 +59,23 @@ export const DragFresh = (props: DragRefreshProps) => {
         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) {
+          if (Math.abs(movedY) > Math.abs(movedX)) {
             direction = 'Y';
-          } else if (movedX > 0) {
+          } else {
             direction = 'X';
           }
         }
-        if (direction === 'X') {
+        // console.log(`direction: ${direction}, movedX: ${movedX}, movedY: ${movedY}, container.scrollTop: ${container.scrollTop}`);
+        if (direction !== 'Y') {
           return;
         }
-        if (window.scrollY === 0) {
-          needRefresh = movedY > 30;
+        if (container.scrollTop <= 0 && movedY > 5) {
+          needRefresh = movedY > 60;
           if (movedY > 5) {
             pullDom.classList.add('show');
             spinnerDom.style.height = `${Math.min(maxHeight, movedY)}px`;
@@ -83,7 +83,7 @@ export const DragFresh = (props: DragRefreshProps) => {
             pullDom.classList.remove('show');
             spinnerDom.style.height = '0';
           }
-        } else if (window.scrollY > Math.min(maxHeight, movedY)) {
+        } else {
           pullDom.classList.remove('show');
           spinnerDom.style.height = '0';
         }

package/src/components/float-window.tsx

@@ -15,6 +15,7 @@ export type FloatWindowShowProps = {
   handleClicked: (index: number, close: FloatWindowCloseProps) => void;
   closeWhenClickOutside?: boolean; // default false
   zIndex?: string;
+  contentOverflowY?: string;
 };
 
 // because it's over a mask, so it can use primary colors
@@ -45,6 +46,7 @@ export class FloatWindow {
     handleClicked,
     closeWhenClickOutside = false,
     zIndex,
+    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') {
@@ -143,7 +145,7 @@ export class FloatWindow {
         '.fwin-content': {
           padding: '15px',
           maxHeight: contentMaxHeight ? `min(${contentMaxHeight}, calc(100% - 100px))` : 'calc(100% - 100px)',
-          overflowY: 'auto',
+          overflowY: contentOverflowY,
         },
         '.fwin-bottom': {
           display: 'flex',

package/src/components/modal.tsx

@@ -13,6 +13,7 @@ export class ModalWindow {
     handleClicked,
     closeWhenClickOutside = true,
     zIndex,
+    contentOverflowY,
   }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
     return FloatWindow.show({
       title,
@@ -26,6 +27,7 @@ export class ModalWindow {
       handleClicked,
       closeWhenClickOutside,
       zIndex,
+      contentOverflowY,
     });
   }
 }

package/src/components/paging-link.tsx

@@ -1,99 +1,175 @@
-import { CssProps, bindGlobalStyles, getRenderPageProps } from 'lupine.web';
+import { CssProps, RefProps, bindGlobalStyles, getRenderPageProps } from 'lupine.web';
 
-let _DEFAULT_PAGE_LIMIT = 7;
+let _DEFAULT_PAGE_LIMIT = 10;
 export const getDefaultPageLimit = () => {
   return _DEFAULT_PAGE_LIMIT;
 };
 export const setDefaultPageLimit = (limit: number) => {
   _DEFAULT_PAGE_LIMIT = limit;
 };
+const pageLinkOptions = [10, 20, 50, 100, 200, 500];
 export type PagingLinkProps = {
   itemsCount: number;
   pageLimit?: number;
   pageIndex?: number;
   baseLink: string;
   onClick?: (index: number) => void; // if onClick is set then use it instead of href
+  textPerpage?: string;
+  textOk?: string;
+  textTo?: string;
+  textPage?: string;
+  showControl?: boolean;
 };
 
-export const PagingLink = (props: PagingLinkProps) => {
+export const PagingLink = ({
+  itemsCount,
+  pageLimit = getDefaultPageLimit(),
+  pageIndex = 0,
+  baseLink,
+  onClick,
+  textPerpage = '/Page',
+  textOk = 'Go',
+  textTo = 'To',
+  textPage = 'Page',
+  showControl,
+}: PagingLinkProps) => {
   const css: CssProps = {
+    display: 'flex',
+    justifyContent: 'end',
+    alignItems: 'center',
     textAlign: 'right',
-    paddingRight: '16px',
-    '.paging-link-index': {
-      padding: '0px 4px',
-    },
-    a: {
+    padding: '6px 16px 6px 0',
+    fontSize: '14px',
+    '.paging-link-index a, .paging-link-index.current': {
+      padding: '2px 6px',
       textDecoration: 'none',
     },
+    '.paging-link-index.current': {
+      fontWeight: 'bold',
+    },
+    'span.paging-link-index a:hover, span.paging-link-go a:hover': {
+      textDecoration: 'underline',
+    },
+    '.paging-link-ctl-box': {
+      display: 'flex',
+      alignItems: 'center',
+    },
+    '.paging-link-ctl-box .paging-link-jump': {
+      width: '50px',
+      padding: '1px 3px',
+      margin: '0 3px',
+      textAlign: 'right',
+    },
+    '.paging-link-ctl-box .paging-link-limit': {
+      width: '90px',
+      padding: '1px 3px',
+      margin: '0 3px',
+    },
+    '.paging-link-ok': {
+      margin: '0 3px',
+    },
   };
 
   bindGlobalStyles('paging-link-box', '.paging-link-box', css);
-  const html = [];
-  let pageIndex = props.pageIndex ?? (Number.parseInt(getRenderPageProps().query['pg_i'] || '') || 0);
-  const pageLimit = props.pageLimit || _DEFAULT_PAGE_LIMIT;
-  if (props.itemsCount > 0 && pageLimit > 0) {
-    let maxPages = Math.floor(props.itemsCount / pageLimit);
-    if (props.itemsCount % pageLimit !== 0) {
+  pageIndex = pageIndex ?? (Number.parseInt(getRenderPageProps().query['pg_i'] || '') || 0);
+  pageLimit = pageLimit || _DEFAULT_PAGE_LIMIT;
+  let maxPages = Math.floor(itemsCount / pageLimit);
+  if (itemsCount > 0 && pageLimit > 0) {
+    if (itemsCount % pageLimit !== 0) {
       maxPages++;
     }
     if (pageIndex > maxPages) {
       pageIndex = maxPages - 1;
     }
-    if (pageIndex > 0) {
-      html.push(
+  }
+
+  const onPageLimitChange = (e: Event) => {
+    const limit = Number((e.target as HTMLSelectElement).value || '0');
+    if (limit > 0) {
+      setDefaultPageLimit(limit);
+      onClick && onClick(pageIndex);
+    }
+  };
+
+  const onOkClick = () => {
+    let index = Number((ref.$('.paging-link-jump') as HTMLInputElement).value || '0');
+    if (index < 1) {
+      index = 1;
+    }
+    if (index > maxPages) {
+      index = maxPages;
+    }
+    onClick && onClick(index - 1);
+  };
+
+  const ref: RefProps = {};
+  return (
+    <div ref={ref} class='paging-link-box'>
+      {pageIndex > 0 ? (
         <span class='paging-link-go'>
           <a
-            href={props.onClick ? 'javascript:void(0)' : props.baseLink + '?pg_i=' + (pageIndex - 1)}
-            onClick={() => props.onClick && props.onClick(pageIndex - 1)}
+            href={onClick ? 'javascript:void(0)' : baseLink + '?pg_i=' + (pageIndex - 1)}
+            onClick={() => onClick && onClick(pageIndex - 1)}
           >
             &lt;
           </a>
         </span>
-      );
-    } else {
-      html.push(<span class='paging-link-go disabled'>&lt;</span>);
-    }
-    for (let i = 0; i < maxPages; i++) {
-      if (i < 2 || i >= maxPages - 2 || (i > pageIndex - 3 && i < pageIndex + 3)) {
-        if (i == pageIndex) {
-          html.push(
-            <span class='paging-link-index current'>
-              <b>{'' + (i + 1)}</b>
-            </span>
-          );
-        } else {
-          html.push(
-            <span class='paging-link-index'>
-              <a
-                href={props.onClick ? 'javascript:void(0)' : props.baseLink + '?pg_i=' + i}
-                onClick={() => props.onClick && props.onClick(i)}
-              >
-                {'' + (i + 1)}
-              </a>
-            </span>
-          );
-        }
-      } else {
-        if (i == pageIndex - 4 || i == pageIndex + 4) {
-          html.push(<span class='paging-link-skip'>...</span>);
-        }
-      }
-    }
-    if (pageIndex < maxPages - 1) {
-      html.push(
+      ) : (
+        <span class='paging-link-go disabled'>&lt;</span>
+      )}
+
+      {Array.from({ length: maxPages }, (_, i) => i).map((i) => (
+        <>
+          {i < 2 || i >= maxPages - 2 || (i > pageIndex - 3 && i < pageIndex + 3) ? (
+            i == pageIndex ? (
+              <span class='paging-link-index current'>{i + 1}</span>
+            ) : (
+              <span class='paging-link-index'>
+                <a
+                  href={onClick ? 'javascript:void(0)' : baseLink + '?pg_i=' + i}
+                  onClick={() => onClick && onClick(i)}
+                >
+                  {i + 1}
+                </a>
+              </span>
+            )
+          ) : (
+            (i == pageIndex - 4 || i == pageIndex + 4) && <span class='paging-link-skip'>...</span>
+          )}
+        </>
+      ))}
+
+      {pageIndex < maxPages - 1 ? (
         <span class='paging-link-go'>
           <a
-            href={props.onClick ? 'javascript:void(0)' : props.baseLink + '?pg_i=' + (pageIndex + 1)}
-            onClick={() => props.onClick && props.onClick(pageIndex + 1)}
+            href={onClick ? 'javascript:void(0)' : baseLink + '?pg_i=' + (pageIndex + 1)}
+            onClick={() => onClick && onClick(pageIndex + 1)}
           >
             &gt;
           </a>
         </span>
-      );
-    } else {
-      html.push(<span class='paging-link-go disabled'>&gt;</span>);
-    }
-  }
-
-  return html.length > 0 ? <div class='paging-link-box'>{html}</div> : <></>;
+      ) : (
+        <span class='paging-link-go disabled'>&gt;</span>
+      )}
+      {showControl && (
+        <div class='paging-link-ctl-box'>
+          {textTo}
+          <input class='input-base paging-link-jump input-s' type='number' value={pageIndex + 1} /> / {maxPages}{' '}
+          {textPage}
+          <button class='button-base button-s paging-link-ok' onClick={onOkClick}>
+            {textOk}
+          </button>
+          <select class='input-base paging-link-limit input-s' onChange={onPageLimitChange}>
+            <option value=''> - </option>
+            {pageLinkOptions.map((page) => (
+              <option value={page}>
+                {page}
+                {textPerpage}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+    </div>
+  );
 };

package/src/frames/responsive-frame.tsx

@@ -57,7 +57,7 @@ export const ResponsiveFrame = async (props: ResponsiveFrameProps) => {
       padding: '0 16px',
     },
     [MediaQueryRange.TabletBelow]: {
-      '.frame-footer .footer-box, .frame-top-menu .desktop-menu-box': {
+      '.frame-footer .d-footer-box, .frame-top-menu .desktop-menu-box': {
         display: 'none',
       },
     },