lupine.components 1.1.7 → 1.1.9

package/package.json

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

package/src/components/action-sheet.tsx

@@ -226,3 +226,45 @@ export class ActionSheetMessage {
     return handleClose;
   }
 }
+
+export type ActionSheetInputProps = Omit<
+  ActionSheetShowProps,
+  'children' | 'handleClicked' | 'closeEvent' | 'handleConfirmClicked'
+> & {
+  defaultValue?: string;
+  handleConfirmValue: (value: string, close: ActionSheetCloseProps) => void;
+};
+export class ActionSheetInput {
+  static async show({
+    title,
+    defaultValue,
+    contentMaxHeight,
+    closeWhenClickOutside = true,
+    confirmButtonText = 'OK',
+    handleConfirmValue: handleConfirmValue,
+    cancelButtonText = 'Cancel',
+  }: ActionSheetInputProps): Promise<ActionSheetCloseProps> {
+    let value: string = defaultValue || '';
+    const handleClose = await ActionSheet.show({
+      title,
+      children: (
+        <div css={{ padding: '8px', borderTop: '1px solid var(--primary-border-color)' }}>
+          <input
+            class='input-base w-100p'
+            type='text'
+            value={value}
+            onInput={(e) => (value = (e.target as HTMLInputElement).value)}
+          />
+        </div>
+      ),
+      contentMaxHeight,
+      confirmButtonText,
+      handleConfirmClicked: (close) => {
+        handleConfirmValue(value, close);
+      },
+      cancelButtonText,
+      closeWhenClickOutside,
+    });
+    return handleClose;
+  }
+}

package/src/components/input-with-title.tsx

@@ -9,7 +9,7 @@ export const InputWithTitle = (
 ) => {
   return (
     <div>
-      <div>{title}</div>
+      <div style={{ paddingBottom: '4px' }}>{title}</div>
       <div>
         <input
           class={className}

package/src/components/popup-menu.tsx

@@ -4,6 +4,7 @@ import { stopPropagation } from '../lib';
 export type PopupMenuHookProps = {
   openMenu?: (event?: MouseEvent) => void;
   getValue?: () => string;
+  setLabel?: (label: string) => void;
 };
 
 // defaultValue=<i class='ifc-icon co-cil-hamburger-menu'></i>
@@ -231,6 +232,9 @@ export const PopupMenu = ({
   if (hook) {
     hook.openMenu = openMenu;
     hook.getValue = () => selectedValue;
+    hook.setLabel = (label: string) => {
+      ref.$('.popup-menu-item .popup-menu-text').innerText = label;
+    };
   }
   const itemClick = (event: any) => {
     stopPropagation(event);

package/src/components/tabs.tsx

@@ -169,6 +169,10 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
       display: 'flex',
       height: 'auto',
       'border-bottom': '1px solid grey',
+      'overflow-x': 'auto',
+      'overflow-y': 'hidden',
+      'scrollbar-width': 'thin',
+      'scrollbar-color': '#ababab4d #d5d5d552',
       '> div > .tab': {
         padding: '2px 3px',
         width: 'auto',