lupine.components 1.1.13 → 1.1.14

package/src/components/html-var.tsx

@@ -1,81 +1,81 @@
-import { RefProps, VNode } from 'lupine.web';
-
-export type HtmlVarValueProps = string | VNode<any> | (() => Promise<VNode<any>>);
-export type HtmlVarResult = { value: HtmlVarValueProps; ref: RefProps; node: VNode<any> };
-export class HtmlVar implements HtmlVarResult {
-  private _value: HtmlVarValueProps;
-  private _dirty = false;
-  private _ref: RefProps;
-  private resolve!: () => void;
-  private promise: Promise<void>;
-
-  constructor(initial?: HtmlVarValueProps) {
-    this.promise = new Promise<void>((res) => {
-      this.resolve = res;
-    });
-
-    this._value = initial || '';
-    this._ref = {
-      onLoad: async (el: Element) => {
-        // in case new resolve is created while updating
-        const res = this.resolve;
-        if (this._dirty) {
-          await this.update();
-        }
-        res();
-      },
-    };
-  }
-
-  private async update(): Promise<void> {
-    const v = typeof this._value === 'function' ? await this._value() : this._value;
-    await this._ref.mountInnerComponent!(v);
-    this._dirty = false;
-    this._value = '';
-  }
-
-  // need to wait before use ref.current
-  async waitUpdate() {
-    await this.promise;
-  }
-
-  set value(value: HtmlVarValueProps) {
-    this._value = value;
-    if (this._dirty) {
-      return;
-    }
-
-    this._dirty = true;
-    if (!this._ref.current) {
-      return;
-    }
-    this.promise = new Promise<void>(async (res) => {
-      this.resolve = res;
-      await this.update();
-      this.resolve();
-    });
-  }
-
-  get value(): HtmlVarValueProps {
-    return this._ref.current ? this._ref.current.innerHTML : this._value;
-  }
-
-  get ref(): RefProps {
-    return this._ref;
-  }
-
-  get node(): VNode<any> {
-    // if value is a function, it will be loaded later in onLoad
-    const delayLoad = typeof this._value === 'function';
-    this._dirty = delayLoad ? true : false;
-    // the Fragment Tag will be present in the html if ref is assigned
-    return {
-      type: 'Fragment',
-      props: {
-        ref: this._ref,
-        children: delayLoad ? '' : this._value,
-      },
-      html: [],
-    };
-  }
-}
+import { RefProps, VNode } from 'lupine.web';
+
+export type HtmlVarValueProps = string | VNode<any> | (() => Promise<VNode<any>>);
+export type HtmlVarResult = { value: HtmlVarValueProps; ref: RefProps; node: VNode<any> };
+export class HtmlVar implements HtmlVarResult {
+  private _value: HtmlVarValueProps;
+  private _dirty = false;
+  private _ref: RefProps;
+  private resolve!: () => void;
+  private promise: Promise<void>;
+
+  constructor(initial?: HtmlVarValueProps) {
+    this.promise = new Promise<void>((res) => {
+      this.resolve = res;
+    });
+
+    this._value = initial || '';
+    this._ref = {
+      onLoad: async (el: Element) => {
+        // in case new resolve is created while updating
+        const res = this.resolve;
+        if (this._dirty) {
+          await this.update();
+        }
+        res();
+      },
+    };
+  }
+
+  private async update(): Promise<void> {
+    const v = typeof this._value === 'function' ? await this._value() : this._value;
+    await this._ref.mountInnerComponent!(v);
+    this._dirty = false;
+    this._value = '';
+  }
+
+  // need to wait before use ref.current
+  async waitUpdate() {
+    await this.promise;
+  }
+
+  set value(value: HtmlVarValueProps) {
+    this._value = value;
+    if (this._dirty) {
+      return;
+    }
+
+    this._dirty = true;
+    if (!this._ref.current) {
+      return;
+    }
+    this.promise = new Promise<void>(async (res) => {
+      this.resolve = res;
+      await this.update();
+      this.resolve();
+    });
+  }
+
+  get value(): HtmlVarValueProps {
+    return this._ref.current ? this._ref.current.innerHTML : this._value;
+  }
+
+  get ref(): RefProps {
+    return this._ref;
+  }
+
+  get node(): VNode<any> {
+    // if value is a function, it will be loaded later in onLoad
+    const delayLoad = typeof this._value === 'function';
+    this._dirty = delayLoad ? true : false;
+    // the Fragment Tag will be present in the html if ref is assigned
+    return {
+      type: 'Fragment',
+      props: {
+        ref: this._ref,
+        children: delayLoad ? '' : this._value,
+      },
+      html: [],
+    };
+  }
+}

package/src/components/index.ts

@@ -1,44 +1,43 @@
-
-export * from './action-sheet';
-export * from './button-push-animation';
-export * from './button';
-export * from './drag-refresh';
-export * from './editable-label';
-export * from './float-window';
-export * from './grid';
-export * from './html-load';
-export * from './html-var';
-export * from './input-with-title';
-export * from './link-item';
-export * from './link-list';
-export * from './menu-bar';
-export * from './menu-item-props';
-export * from './menu-sidebar';
-export * from './message-box';
-export * from './meta-data';
-export * from './meta-description';
-export * from './modal';
-export * from './notice-message';
-export * from './page-title';
-export * from './paging-link';
-export * from './panel';
-export * from './popup-menu';
-export * from './progress';
-export * from './radio-label-component';
-export * from './redirect';
-export * from './resizable-splitter';
-export * from './select-angle-component';
-export * from './select-with-title';
-export * from './slide-tab-component';
-export * from './spinner';
-export * from './stars-component';
-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';
-export * from './toggle-switch';
-
-export * from './mobile-components';
+export * from './action-sheet';
+export * from './button-push-animation';
+export * from './button';
+export * from './drag-refresh';
+export * from './editable-label';
+export * from './float-window';
+export * from './grid';
+export * from './html-load';
+export * from './html-var';
+export * from './input-with-title';
+export * from './link-item';
+export * from './link-list';
+export * from './menu-bar';
+export * from './menu-item-props';
+export * from './menu-sidebar';
+export * from './message-box';
+export * from './meta-data';
+export * from './meta-description';
+export * from './modal';
+export * from './notice-message';
+export * from './page-title';
+export * from './paging-link';
+export * from './panel';
+export * from './popup-menu';
+export * from './progress';
+export * from './radio-label-component';
+export * from './redirect';
+export * from './resizable-splitter';
+export * from './select-angle-component';
+export * from './select-with-title';
+export * from './slide-tab-component';
+export * from './spinner';
+export * from './stars-component';
+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';
+export * from './toggle-switch';
+
+export * from './mobile-components';

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

@@ -1,24 +1,24 @@
-// used in MessageBox.show
-export const InputWithTitle = (
-  title: string,
-  defaultValue: string,
-  onInputChanged?: (option: string) => void,
-  onInputInputed?: (option: string) => void,
-  className = 'input-base',
-  width = '100%',
-) => {
-  return (
-    <div>
-      <div style={{ paddingBottom: '4px' }}>{title}</div>
-      <div>
-        <input
-          class={className}
-          style={{ width }}
-          onChange={(e: any) => onInputChanged?.(e?.target?.value)}
-          onInput={(e: any) => onInputInputed?.(e?.target?.value)}
-          value={defaultValue}
-        />
-      </div>
-    </div>
-  );
-};
+// used in MessageBox.show
+export const InputWithTitle = (
+  title: string,
+  defaultValue: string,
+  onInputChanged?: (option: string) => void,
+  onInputInputed?: (option: string) => void,
+  className = 'input-base',
+  width = '100%'
+) => {
+  return (
+    <div>
+      <div style={{ paddingBottom: '4px' }}>{title}</div>
+      <div>
+        <input
+          class={className}
+          style={{ width }}
+          onChange={(e: any) => onInputChanged?.(e?.target?.value)}
+          onInput={(e: any) => onInputInputed?.(e?.target?.value)}
+          value={defaultValue}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/link-item.tsx

@@ -1,13 +1,13 @@
-export type LinkItemProps = {
-  className?: string;
-  text: string;
-  url: string;
-  alt?: string;
-};
-export const LinkItem = (props: LinkItemProps) => {
-  return (
-    <a class={['link-item', props.className].join(' ')} href={props.url} alt={props.alt || props.text}>
-      {props.text}
-    </a>
-  );
-};
+export type LinkItemProps = {
+  className?: string;
+  text: string;
+  url: string;
+  alt?: string;
+};
+export const LinkItem = (props: LinkItemProps) => {
+  return (
+    <a class={['link-item', props.className].join(' ')} href={props.url} alt={props.alt || props.text}>
+      {props.text}
+    </a>
+  );
+};

package/src/components/link-list.tsx

@@ -1,62 +1,62 @@
-import { LinkItem } from './link-item';
-import { NestMenuItemProps } from './menu-item-props';
-
-export type LinkListProps = {
-  title: string;
-  items: NestMenuItemProps[];
-  className?: string;
-  textColor?: string;
-  backgroundColor?: string;
-  titleBackgroundColor?: string;
-};
-export const LinkList = ({
-  title,
-  items,
-  className,
-  textColor = 'black',
-  backgroundColor = '#d3d3d3',
-  titleBackgroundColor = '#b6b6b6',
-}: LinkListProps) => {
-  const css: any = {
-    width: '100%',
-    margin: 'auto',
-    height: 'auto',
-    backgroundColor,
-    '.link-list-title, .link-list-top': {
-      display: 'flex',
-      width: '100%',
-      flexWrap: 'wrap',
-      padding: '0 16px',
-    },
-    '.link-list-title': {
-      backgroundColor: titleBackgroundColor,
-    },
-    '.link-list-item': {
-      display: 'inline-block',
-      color: textColor,
-      padding: '8px 16px 8px 0',
-      textDecoration: 'none',
-    },
-    '.link-list-item:last-child': {
-      paddingRight: 'unset',
-    },
-    '.link-list-title .link-list-item': {
-      fontSize: '18px',
-    },
-  };
-
-  return (
-    <div css={css} class={['link-list-box', className].join(' ')}>
-      {title && (
-        <div class='link-list-title'>
-          <div class='link-list-item'>{title}</div>
-        </div>
-      )}
-      <div class='link-list-top'>
-        {items.map((item) => {
-          return <LinkItem className='link-list-item' url={item.url} alt={item.alt} text={item.text} />;
-        })}
-      </div>
-    </div>
-  );
-};
+import { LinkItem } from './link-item';
+import { NestMenuItemProps } from './menu-item-props';
+
+export type LinkListProps = {
+  title: string;
+  items: NestMenuItemProps[];
+  className?: string;
+  textColor?: string;
+  backgroundColor?: string;
+  titleBackgroundColor?: string;
+};
+export const LinkList = ({
+  title,
+  items,
+  className,
+  textColor = 'black',
+  backgroundColor = '#d3d3d3',
+  titleBackgroundColor = '#b6b6b6',
+}: LinkListProps) => {
+  const css: any = {
+    width: '100%',
+    margin: 'auto',
+    height: 'auto',
+    backgroundColor,
+    '.link-list-title, .link-list-top': {
+      display: 'flex',
+      width: '100%',
+      flexWrap: 'wrap',
+      padding: '0 16px',
+    },
+    '.link-list-title': {
+      backgroundColor: titleBackgroundColor,
+    },
+    '.link-list-item': {
+      display: 'inline-block',
+      color: textColor,
+      padding: '8px 16px 8px 0',
+      textDecoration: 'none',
+    },
+    '.link-list-item:last-child': {
+      paddingRight: 'unset',
+    },
+    '.link-list-title .link-list-item': {
+      fontSize: '18px',
+    },
+  };
+
+  return (
+    <div css={css} class={['link-list-box', className].join(' ')}>
+      {title && (
+        <div class='link-list-title'>
+          <div class='link-list-item'>{title}</div>
+        </div>
+      )}
+      <div class='link-list-top'>
+        {items.map((item) => {
+          return <LinkItem className='link-list-item' url={item.url} alt={item.alt} text={item.text} />;
+        })}
+      </div>
+    </div>
+  );
+};