create-lupine 1.0.13 → 1.0.15

package/templates/responsive-starter/web/src/components/note-search-page.tsx

@@ -0,0 +1,193 @@
+import { CssProps, HeaderWithBackFrame, HtmlVar, RefProps, SliderFrame, SliderFrameHookProps } from 'lupine.components';
+import { SearchInput, SearchInputHookProps } from './search-input';
+import { InputHistoryComponent, addHistoryItem } from './input-history-component';
+import { LocalNoteProps, LocalNotesService } from '../services/local-notes-service';
+import { NoteDetailComponent } from './note-detail';
+import { clearHistoryList } from './input-history-component';
+
+const extractText = (html: string) => {
+  const tmp = document.createElement('DIV');
+  tmp.innerHTML = html;
+  return tmp.textContent || tmp.innerText || '';
+};
+
+export const NoteSearchComponent = (props: { sliderFrameHook: SliderFrameHookProps }) => {
+  const listDom = new HtmlVar('');
+  const historyDom = new HtmlVar('');
+
+  const searchInputHook: SearchInputHookProps = {};
+  // this is the inner slide hook for editing from search results
+  const subSliderHook: SliderFrameHookProps = {};
+
+  const historyKey = 'note-search';
+
+  const onSearch = (value?: string) => {
+    const val = (value || '').trim();
+    if (val) {
+      addHistoryItem(historyKey, val);
+      hideHistory();
+    } else {
+      showHistory();
+    }
+    refreshList(val);
+  };
+
+  const onClearSearch = () => {
+    onSearch('');
+  };
+
+  const showHistory = () => {
+    historyDom.value = (
+      <InputHistoryComponent
+        historyKey={historyKey}
+        onClearHistory={() => {
+          clearHistoryList(historyKey);
+          showHistory();
+        }}
+        onItemClick={(item) => {
+          searchInputHook.setValue!(item);
+          onSearch(item);
+        }}
+      />
+    );
+  };
+
+  const hideHistory = () => {
+    historyDom.value = '';
+  };
+
+  const onViewNote = (note: LocalNoteProps) => {
+    subSliderHook.load!(
+      <NoteDetailComponent
+        note={note}
+        sliderFrameHook={subSliderHook}
+        onSaved={() => {
+          // We re-query the note values after saving. Easiest is to trigger search again.
+          const val = document.querySelector('.search-input .search-in-input') as HTMLInputElement;
+          if (val) onSearch(val.value);
+        }}
+      />
+    );
+  };
+
+  const refreshList = (query: string) => {
+    if (!query) {
+      listDom.value = '';
+      return;
+    }
+
+    const allNotes = LocalNotesService.getAllNotes();
+    const filteredNotes = allNotes.filter(
+      (n) =>
+        n.title.toLowerCase().includes(query.toLowerCase()) || n.content.toLowerCase().includes(query.toLowerCase())
+    );
+
+    if (filteredNotes.length === 0) {
+      listDom.value = (
+        <div
+          class='note-empty-state'
+          style={{ marginTop: '40px', textAlign: 'center', color: 'var(--secondary-color)' }}
+        >
+          No search results
+        </div>
+      );
+      return;
+    }
+
+    listDom.value = (
+      <div class='note-list-container' style={{ paddingTop: '16px' }}>
+        {filteredNotes.map((note) => (
+          <div class='note-card-wrapper search-result-card-wrapper'>
+            <div class='note-card row-box search-result-card' onClick={() => onViewNote(note)}>
+              <div class='note-card-content flex-1'>
+                <div class='note-card-title'>{note.title}</div>
+                <div class='note-card-preview ellipsis'>{extractText(note.content)}</div>
+                <div class='note-card-date'>{new Date(note.updatedAt).toLocaleString()}</div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const css: CssProps = {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    overflowY: 'auto',
+    backgroundColor: 'var(--primary-bg-color)',
+    padding: '0 16px',
+
+    '.search-result-card-wrapper': {
+      marginBottom: '16px',
+      borderRadius: '12px',
+      overflow: 'hidden',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05)',
+      backgroundColor: 'var(--secondary-bg-color)',
+    },
+    '.search-result-card': {
+      backgroundColor: 'var(--primary-bg-color)',
+      borderRadius: '12px',
+      padding: '16px',
+      cursor: 'pointer',
+      alignItems: 'center',
+      transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+      '&:active': {
+        transform: 'scale(0.98)',
+      },
+    },
+    '.note-card-title': {
+      fontSize: '16px',
+      fontWeight: 'bold',
+      color: 'var(--primary-color)',
+      marginBottom: '4px',
+    },
+    '.note-card-preview': {
+      fontSize: '14px',
+      color: 'var(--secondary-color)',
+      marginBottom: '6px',
+    },
+    '.note-card-date': {
+      fontSize: '12px',
+      color: 'var(--secondary-color)',
+      opacity: 0.8,
+    },
+  };
+
+  const ref: RefProps = {
+    onLoad: async () => {
+      showHistory();
+      // focus input
+      const input = ref.$('.search-in-input') as HTMLInputElement;
+      if (input) {
+        requestAnimationFrame(() => input.focus());
+      }
+    },
+  };
+
+  const headerTitle = (
+    <SearchInput
+      placeholder='Search title or content...'
+      onSearch={onSearch}
+      onClear={onClearSearch}
+      onFocus={showHistory}
+      class='w-100p'
+      hook={searchInputHook}
+    />
+  );
+
+  return (
+    <HeaderWithBackFrame
+      title={headerTitle}
+      right={<span></span>}
+      onBack={(event) => props.sliderFrameHook.close!(event)}
+    >
+      <div ref={ref} css={css} class='note-search-page'>
+        <SliderFrame hook={subSliderHook} />
+        {historyDom.node}
+        {listDom.node}
+      </div>
+    </HeaderWithBackFrame>
+  );
+};

package/templates/responsive-starter/web/src/components/search-input.tsx

@@ -0,0 +1,95 @@
+import { bindGlobalStyle, CssProps, RefProps } from 'lupine.components';
+
+export interface SearchInputHookProps {
+  setValue?: (value: string) => void;
+}
+
+export interface InputWithClearProps {
+  placeholder?: string;
+  onSearch: (value: string) => void;
+  onClear?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  class?: string;
+  searchIcon?: string;
+  hook?: SearchInputHookProps;
+}
+export const SearchInput = (props: InputWithClearProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    flex: 1,
+    position: 'relative',
+    fontSize: '16px',
+    '.search-in-input': {
+      flex: 1,
+      paddingRight: '30px',
+      height: '32px',
+      padding: '4px 30px 4px 12px',
+      borderRadius: '16px',
+      border: 'none',
+      backgroundColor: 'var(--secondary-bg-color)',
+      color: 'var(--primary-color)',
+      outline: 'none',
+    },
+    '.search-in-search, .search-in-clear': {
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: 'var(--secondary-color)',
+    },
+    '.search-in-search': {
+      right: '12px',
+    },
+    '.search-in-clear': {
+      display: 'none',
+      right: '34px',
+    },
+    'input.search-in-input:not(:placeholder-shown) + .search-in-clear': {
+      display: 'flex',
+    },
+  };
+  bindGlobalStyle('search-input-component', css);
+
+  const ref: RefProps = {};
+  const onSearch = () => {
+    const value = ref.$('.search-in-input').value;
+    props.onSearch(value);
+  };
+  const onClear = () => {
+    ref.$('.search-in-input').value = '';
+    props.onClear?.();
+  };
+  if (props.hook) {
+    props.hook.setValue = (value: string) => {
+      ref.$('input.search-in-input').value = value;
+    };
+  }
+  return (
+    <div ref={ref} class={'search-input-component ' + (props.class || '')}>
+      <input
+        type='text'
+        maxLength={30}
+        spellcheck={false}
+        class='search-in-input input-base'
+        placeholder={props.placeholder}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            onSearch();
+          }
+        }}
+        onBlur={() => props.onBlur?.()}
+        onFocus={() => props.onFocus?.()}
+      />
+      <div class='search-in-clear' onClick={onClear}>
+        <i class='ifc-icon ma-close' />
+      </div>
+      <div class='search-in-search' onClick={onSearch}>
+        <i class={'ifc-icon ' + (props.searchIcon || 'bs-search')} />
+      </div>
+    </div>
+  );
+};

package/templates/responsive-starter/web/src/components/side-menu-content.tsx

@@ -0,0 +1,178 @@
+import {
+  CssProps,
+  getGlobalStylesId,
+  bindGlobalStyle,
+  RefProps,
+  VNode,
+  MobileSideMenuHelper,
+  updateTheme,
+} from 'lupine.components';
+import { NotificationColor, NotificationMessage, SliderFrameHookProps } from 'lupine.components';
+import { IconMenuItemProps } from 'lupine.components';
+import { MineSettingsPage } from './mine-settings-page';
+
+export type SideMenuContentProps = {
+  navItems?: IconMenuItemProps[];
+  menuItems?: string[];
+  title?: string;
+  footer?: string;
+  version?: string;
+  onAction?: (action: string) => void;
+  settingSliderHook: SliderFrameHookProps;
+};
+
+const sideMenuContentCss: CssProps = {
+  margin: '0 -12px',
+  '.msm-header': {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '16px',
+    borderBottom: '1px solid var(--primary-border-color)',
+  },
+  '.msm-header-icon': {
+    width: '32px',
+    height: '32px',
+    marginRight: '12px',
+    borderRadius: '4px',
+    backgroundColor: 'var(--primary-color)',
+  },
+  '.msm-header-title': {
+    fontSize: '18px',
+    fontWeight: 'bold',
+    color: 'var(--primary-color)',
+  },
+  '.msm-content': {
+    flex: '1',
+    overflowY: 'auto',
+    padding: '12px 0',
+  },
+  '.msm-item-link': {
+    textDecoration: 'none',
+    color: 'inherit',
+    display: 'block',
+  },
+  '.msm-separator': {
+    height: '1px',
+    backgroundColor: 'var(--primary-border-color)',
+    margin: '8px 12px',
+  },
+  '.msm-item': {
+    padding: '12px',
+    fontSize: '16px',
+    cursor: 'pointer',
+    transition: 'background-color 0.2s',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    width: '100%',
+    '&:hover': {
+      backgroundColor: 'var(--activatable-bg-color-hover, rgba(0,0,0,0.04))',
+    },
+  },
+  '.msm-footer': {
+    borderTop: '1px solid var(--primary-border-color)',
+    padding: '16px 0',
+  },
+  '.msm-footer-cfg': {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  '.msm-footer-cfg .msm-item': {
+    padding: '12px',
+  },
+  '.msm-footer-version': {
+    textAlign: 'center',
+    fontSize: '12px',
+    color: 'var(--secondary-color, #999)',
+    marginTop: '2px',
+  },
+};
+
+export const SideMenuContent = ({
+  navItems = [],
+  menuItems = ['Light Mode', 'Dark Mode'],
+  title = 'Function Menu',
+  footer,
+  onAction,
+  settingSliderHook,
+}: SideMenuContentProps): VNode<any> => {
+  const globalCssId = getGlobalStylesId(sideMenuContentCss);
+  bindGlobalStyle(globalCssId, sideMenuContentCss);
+
+  const ref: RefProps = {
+    globalCssId,
+  };
+
+  const handleAction = (item: string) => {
+    if (onAction) {
+      onAction(item);
+    } else {
+      if (item === 'Light Mode') {
+        updateTheme('light');
+        MobileSideMenuHelper.hide();
+      } else if (item === 'Dark Mode') {
+        updateTheme('dark');
+        MobileSideMenuHelper.hide();
+      } else {
+        NotificationMessage.sendMessage(`Action: ${item}`, NotificationColor.Info);
+        MobileSideMenuHelper.hide();
+      }
+    }
+  };
+
+  return (
+    <div ref={ref} style={{ display: 'flex', flexDirection: 'column', flex: 1, height: '100%' }}>
+      <div class='msm-header'>
+        {/* <div class='msm-header-icon'></div> */}
+        <div class='msm-header-title'>{title}</div>
+      </div>
+
+      <div class='msm-content'>
+        {navItems &&
+          navItems.map((item, index) => {
+            const handleClick = (e: Event) => {
+              if (item.js) {
+                e.preventDefault();
+                item.js();
+              }
+              MobileSideMenuHelper.hide();
+            };
+
+            return (
+              <a href={item.url || 'javascript:void(0)'} class='msm-item-link' onClick={handleClick}>
+                <div class='msm-item'>
+                  {item.icon && <i class={`ifc-icon ${item.icon}`}></i>}
+                  {item.text}
+                </div>
+              </a>
+            );
+          })}
+        {navItems && navItems.length > 0 && menuItems.length > 0 && <div class='msm-separator'></div>}
+        {menuItems.map((item) => (
+          <div class='msm-item' onClick={() => handleAction(item)}>
+            {item}
+          </div>
+        ))}
+      </div>
+
+      <div class='msm-footer'>
+        <div class='msm-footer-cfg'>
+          <div
+            class='msm-item'
+            onClick={() => {
+              settingSliderHook.load!(
+                <MineSettingsPage sliderFrameHook={settingSliderHook} onDataChanged={() => {}} />
+              );
+              MobileSideMenuHelper.hide();
+            }}
+          >
+            <i class='ifc-icon ma-cog-outline'></i>
+            Settings
+          </div>
+        </div>
+        {footer && <div class='msm-footer-version'>{footer}</div>}
+      </div>
+    </div>
+  );
+};

package/templates/responsive-starter/web/src/frames/app-responsive-frame.tsx

@@ -0,0 +1,46 @@
+import { VNode } from 'lupine.web';
+import { MediaQueryMaxWidth, ResponsiveFrame, SliderFrame, SliderFrameHookProps } from 'lupine.components';
+import { SideMenuContent } from '../components/side-menu-content';
+
+// Note: Replace with true site config loading if available
+const getSiteTitle = async () => 'My Note App';
+const getSiteFooter = async () => '© 2026 My Note App';
+
+// 'sidemenu' | 'tabs', this will be replaced by create-lupine
+const DEFAULT_LAYOUT = 'tabs';
+export const AppResponsiveFrame = async (placeholderClassname: string, vnode: VNode<any>) => {
+  const mobileBottomMenu = [
+    { icon: 'ma-home-outline', url: '/', text: 'Notes' },
+    { icon: 'icon-finance', url: '/finance', text: 'Finance' },
+    { icon: 'ma-book-outline', url: '/about', text: 'About', topout: true },
+    { icon: 'ma-tools', url: '/tools', text: 'Tools' },
+    { icon: 'ma-account-cog-outline', url: '/mine', text: 'Mine' },
+  ];
+
+  const layout: 'sidemenu' | 'tabs' = (localStorage.getItem('app-layout') as any) || DEFAULT_LAYOUT;
+  const sliderFrameHook: SliderFrameHookProps = {};
+
+  return ResponsiveFrame({
+    placeholderClassname,
+    mainContent: vnode,
+    desktopHeaderTitle: await getSiteTitle(),
+    desktopFooterTitle: await getSiteFooter(),
+    desktopTopMenu: layout === 'sidemenu' ? undefined : mobileBottomMenu,
+    mobileBottomMenu: layout === 'sidemenu' ? undefined : mobileBottomMenu,
+    sharedContents: (
+      <>
+        <SliderFrame hook={sliderFrameHook} />
+      </>
+    ),
+    mobileSideMenuContent: (
+      <SideMenuContent
+        navItems={layout === 'sidemenu' ? mobileBottomMenu : undefined}
+        settingSliderHook={sliderFrameHook}
+        title='My Note App'
+        footer='Powered by Lupine.js'
+      />
+    ),
+    maxWidth: MediaQueryMaxWidth.DesktopMax,
+    autoExtendSidemenu: layout === 'sidemenu',
+  });
+};

package/templates/responsive-starter/web/src/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html data-theme="<!--META-THEME-->">
+  <head>
+    <meta charset="utf-8" />
+    <title><!--META-TITLE--></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=, user-scalable=no" />
+    <!--META-ENV-START-->
+    <!--META-ENV-END-->
+    <link rel="shortcut icon" href="{SUBDIR}/assets/favicon.ico?t={hash}" type="image/x-icon" />
+    <link rel="stylesheet" type="text/css" href="{SUBDIR}/index.css?t={hash}" />
+    <script defer src="{SUBDIR}/index.js#t={hash}"></script>
+  </head>
+  <body>
+    <div class="lupine-root"></div>
+  </body>
+</html>

package/templates/responsive-starter/web/src/index.tsx

@@ -0,0 +1,42 @@
+// css order is important
+import './styles/global.css';
+import './styles/app.css';
+
+import {
+  bindRouter,
+  bindGlobalStyle,
+  debugWatch,
+  isFrontEnd,
+  PageRouter,
+  webEnv,
+  bindLang,
+  bindTheme,
+  setDefaultPageTitle,
+} from 'lupine.components';
+import { baseCss } from './styles/base-css';
+import { themes } from './styles/theme';
+import { AppResponsiveFrame } from './frames/app-responsive-frame';
+import { HomePage } from './pages/home-page';
+import { FinancePage } from './pages/finance-page';
+import { AboutPage } from './pages/about-page';
+import { MinePage } from './pages/mine-page';
+import { ToolsPage } from './pages/tools-page';
+
+bindLang('zh-cn', {});
+bindTheme('light', themes);
+bindGlobalStyle('comm-css', baseCss, false, true);
+setDefaultPageTitle('Lupine.js Note Starter');
+
+if (isFrontEnd() && webEnv('NODE_ENV', '') === 'development') {
+  debugWatch(webEnv('API_PORT', 0));
+}
+
+const pageRouter = new PageRouter();
+pageRouter.setFramePage({ component: AppResponsiveFrame, placeholderClassname: 'user-page-placeholder' });
+pageRouter.use('/finance', FinancePage);
+pageRouter.use('/about', AboutPage);
+pageRouter.use('/mine', MinePage);
+pageRouter.use('/tools', ToolsPage);
+pageRouter.use('*', HomePage);
+
+bindRouter(pageRouter);

package/templates/responsive-starter/web/src/pages/about-page.tsx

@@ -0,0 +1,43 @@
+import {
+  CssProps,
+  MobileHeaderCenter,
+  MobileHeaderEmptyIcon,
+  MobileHeaderTitleIcon,
+  MobileTopSysIcon,
+  PageProps,
+  RefProps,
+} from 'lupine.components';
+import { MineAboutContent } from '../components/mine-about-page';
+
+export const AboutPage = async (props: PageProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    position: 'relative',
+  };
+
+  const ref: RefProps = {
+    onLoad: async () => {},
+  };
+
+  return (
+    <div css={css} ref={ref}>
+      <MobileHeaderCenter>
+        <MobileHeaderTitleIcon
+          title='About'
+          left={<MobileHeaderEmptyIcon />}
+          right={
+            <div class='flex-center-gap-12'>
+              <MobileTopSysIcon />
+            </div>
+          }
+        />
+      </MobileHeaderCenter>
+
+      <div class='tools-scroll tools-list-container no-scrollbar-container'>
+        <MineAboutContent />
+      </div>
+    </div>
+  );
+};

package/templates/responsive-starter/web/src/pages/finance-page.tsx

@@ -0,0 +1,46 @@
+import {
+  CssProps,
+  MobileHeaderCenter,
+  MobileHeaderEmptyIcon,
+  MobileHeaderTitleIcon,
+  MobileTopSysIcon,
+  PageProps,
+  RefProps,
+} from 'lupine.components';
+
+export const FinancePage = async (props: PageProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    position: 'relative',
+    '.finance-list-container': {
+      padding: '32px 24px',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
+  };
+
+  const ref: RefProps = {
+    onLoad: async () => {},
+  };
+
+  return (
+    <div css={css} ref={ref}>
+      <MobileHeaderCenter>
+        <MobileHeaderTitleIcon
+          title='Finance'
+          left={<MobileHeaderEmptyIcon />}
+          right={
+            <div class='flex-center-gap-12'>
+              <MobileTopSysIcon />
+            </div>
+          }
+        />
+      </MobileHeaderCenter>
+
+      <div class='finance-list-container no-scrollbar-container'>This is a finance demo page.</div>
+    </div>
+  );
+};