lupine.components 1.1.13 → 1.1.15

package/src/components/progress.tsx

@@ -1,91 +1,91 @@
-import { CssProps, RefProps } from 'lupine.web';
-import { HtmlVar } from './html-var';
-
-export type ProgressHookProps = {
-  onProgress?: (percentage: number, chunkNumber: number, totalChunks: number) => void;
-  onShow?: (show: boolean, title?: string) => void;
-};
-export type ProgressProps = {
-  hook: ProgressHookProps;
-};
-
-export const Progress = (props: ProgressProps) => {
-  const css: CssProps = {
-    position: 'fixed',
-    display: 'flex',
-    bottom: '0',
-    left: '0',
-    width: '100%',
-    zIndex: 'var(--layer-modal-over)',
-    flexDirection: 'column',
-    backgroundColor: '#e6e6e6de',
-    padding: '16px',
-    '.progress-box': {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '100%',
-      height: 'auto',
-      margin: 'auto',
-    },
-    '.progress-bar': {
-      display: 'flex',
-      width: '100%',
-      height: '60px',
-      borderRadius: '4px',
-      overflow: 'hidden',
-    },
-    '.progress-bar1': {
-      height: '100%',
-      width: '0%',
-      backgroundColor: '#49e57e',
-    },
-    '.progress-bar2': {
-      height: '100%',
-      width: '100%',
-      backgroundColor: '#2bb8cd',
-    },
-    '.progress-tips': {
-      marginTop: '10px',
-      fontSize: '30px',
-      color: '#49e57e',
-    },
-  };
-
-  props.hook.onProgress = (percentage: number, chunkNumber: number, totalChunks: number) => {
-    // console.log(`Upload progress: ${percentage}% (chunk ${chunkNumber} of ${totalChunks})`);
-    percentage = Math.round(percentage * 100);
-    const bar1 = document.querySelector('.progress-bar1') as HTMLElement;
-    const bar2 = document.querySelector('.progress-bar2') as HTMLElement;
-    bar1.style.width = `${percentage}%`;
-    bar2.style.width = `${1 - percentage}%`;
-    dom.value = `${percentage}%`;
-  };
-  props.hook.onShow = (show: boolean, title?: string) => {
-    if (title) {
-      domTitle.value = title;
-    }
-    if (show) {
-      ref.current?.classList.remove('d-none');
-    } else {
-      ref.current?.classList.add('d-none');
-    }
-  };
-
-  const ref: RefProps = {};
-  const domTitle = new HtmlVar('Progress');
-  const dom = new HtmlVar('0 %');
-  return (
-    <div ref={ref} css={css} class='progress-top d-none'>
-      <div class='progress-box'>
-        <div class='progress-title mb-m align-left w-100p'>{domTitle.node}</div>
-        <div class='progress-bar'>
-          <div class='progress-bar1'></div>
-          <div class='progress-bar2'></div>
-        </div>
-        <div class='progress-tips'>{dom.node}</div>
-      </div>
-    </div>
-  );
-};
+import { CssProps, RefProps } from 'lupine.web';
+import { HtmlVar } from './html-var';
+
+export type ProgressHookProps = {
+  onProgress?: (percentage: number, chunkNumber: number, totalChunks: number) => void;
+  onShow?: (show: boolean, title?: string) => void;
+};
+export type ProgressProps = {
+  hook: ProgressHookProps;
+};
+
+export const Progress = (props: ProgressProps) => {
+  const css: CssProps = {
+    position: 'fixed',
+    display: 'flex',
+    bottom: '0',
+    left: '0',
+    width: '100%',
+    zIndex: 'var(--layer-modal-over)',
+    flexDirection: 'column',
+    backgroundColor: '#e6e6e6de',
+    padding: '16px',
+    '.progress-box': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      height: 'auto',
+      margin: 'auto',
+    },
+    '.progress-bar': {
+      display: 'flex',
+      width: '100%',
+      height: '60px',
+      borderRadius: '4px',
+      overflow: 'hidden',
+    },
+    '.progress-bar1': {
+      height: '100%',
+      width: '0%',
+      backgroundColor: '#49e57e',
+    },
+    '.progress-bar2': {
+      height: '100%',
+      width: '100%',
+      backgroundColor: '#2bb8cd',
+    },
+    '.progress-tips': {
+      marginTop: '10px',
+      fontSize: '30px',
+      color: '#49e57e',
+    },
+  };
+
+  props.hook.onProgress = (percentage: number, chunkNumber: number, totalChunks: number) => {
+    // console.log(`Upload progress: ${percentage}% (chunk ${chunkNumber} of ${totalChunks})`);
+    percentage = Math.round(percentage * 100);
+    const bar1 = document.querySelector('.progress-bar1') as HTMLElement;
+    const bar2 = document.querySelector('.progress-bar2') as HTMLElement;
+    bar1.style.width = `${percentage}%`;
+    bar2.style.width = `${1 - percentage}%`;
+    dom.value = `${percentage}%`;
+  };
+  props.hook.onShow = (show: boolean, title?: string) => {
+    if (title) {
+      domTitle.value = title;
+    }
+    if (show) {
+      ref.current?.classList.remove('d-none');
+    } else {
+      ref.current?.classList.add('d-none');
+    }
+  };
+
+  const ref: RefProps = {};
+  const domTitle = new HtmlVar('Progress');
+  const dom = new HtmlVar('0 %');
+  return (
+    <div ref={ref} css={css} class='progress-top d-none'>
+      <div class='progress-box'>
+        <div class='progress-title mb-m align-left w-100p'>{domTitle.node}</div>
+        <div class='progress-bar'>
+          <div class='progress-bar1'></div>
+          <div class='progress-bar2'></div>
+        </div>
+        <div class='progress-tips'>{dom.node}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/radio-label-component.tsx

@@ -1,36 +1,36 @@
-import { bindGlobalStyle, CssProps } from 'lupine.components';
-
-export const RadioLabelComponent = (props: {
-  label: string;
-  name: string;
-  checked?: boolean;
-  disabled?: boolean;
-  onChange?: (checked: boolean) => void;
-  className?: string;
-  radioClassname?: string;
-}) => {
-  const css: CssProps = {
-    display: 'flex',
-    '& > label': {
-      display: 'flex',
-      alignItems: 'center',
-    },
-  };
-  bindGlobalStyle('radio-label-component', css);
-
-  return (
-    <div class={'radio-label-component' + (props.className ? ' ' + props.className : '')}>
-      <label>
-        <input
-          type='radio'
-          name={props.name}
-          class={'input-base input-s' + (props.radioClassname ? ' ' + props.radioClassname : '')}
-          checked={props.checked}
-          disabled={props.disabled}
-          onChange={(event) => props.onChange?.((event.target as HTMLInputElement).checked)}
-        />
-        <span class='ml-ss'>{props.label}</span>
-      </label>
-    </div>
-  );
-};
+import { bindGlobalStyle, CssProps } from 'lupine.components';
+
+export const RadioLabelComponent = (props: {
+  label: string;
+  name: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+  className?: string;
+  radioClassname?: string;
+}) => {
+  const css: CssProps = {
+    display: 'flex',
+    '& > label': {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  };
+  bindGlobalStyle('radio-label-component', css);
+
+  return (
+    <div class={'radio-label-component' + (props.className ? ' ' + props.className : '')}>
+      <label>
+        <input
+          type='radio'
+          name={props.name}
+          class={'input-base input-s' + (props.radioClassname ? ' ' + props.radioClassname : '')}
+          checked={props.checked}
+          disabled={props.disabled}
+          onChange={(event) => props.onChange?.((event.target as HTMLInputElement).checked)}
+        />
+        <span class='ml-ss'>{props.label}</span>
+      </label>
+    </div>
+  );
+};

package/src/components/redirect.tsx

@@ -1,19 +1,19 @@
-import { RefProps } from 'lupine.web';
-
-export type RedirectProps = {
-  title?: string;
-  url: string;
-  delaySeconds?: number;
-};
-export const Redirect = ({ title = 'redirect...', url, delaySeconds = 0 }: RedirectProps) => {
-  // if SSR is disabled, then MetaData will not be working
-  // MetaData({ httpEquiv: 'refresh', content: delaySeconds + ';URL=' + url });
-  const ref: RefProps = {
-    onLoad: async (el: Element) => {
-      setTimeout(() => {
-        window.location.href = url;
-      }, delaySeconds * 1000);
-    },
-  };
-  return <div ref={ref}>{title}</div>;
-};
+import { RefProps } from 'lupine.web';
+
+export type RedirectProps = {
+  title?: string;
+  url: string;
+  delaySeconds?: number;
+};
+export const Redirect = ({ title = 'redirect...', url, delaySeconds = 0 }: RedirectProps) => {
+  // if SSR is disabled, then MetaData will not be working
+  // MetaData({ httpEquiv: 'refresh', content: delaySeconds + ';URL=' + url });
+  const ref: RefProps = {
+    onLoad: async (el: Element) => {
+      setTimeout(() => {
+        window.location.href = url;
+      }, delaySeconds * 1000);
+    },
+  };
+  return <div ref={ref}>{title}</div>;
+};

package/src/components/resizable-splitter.tsx

@@ -1,128 +1,128 @@
-import { bindGlobalStyle, CssProps } from 'lupine.web';
-import { stopPropagation } from '../lib';
-/**
-How to use:
-  // getSplitter's first parameter is the container's selector where the Splitter will be in.
-  // the second parameter is whether it's Vertical
-  // then the third parameter is it's RightOrTop or not
-  const locationLeft = false;
-  const splitter = ResizableSplitter.getSplitter('.body .side', true, locationLeft);
-  const container = (
-        <div class='body'>
-            <div class='side'>
-              {splitter}
-              {designPanel}
-            </div>
-          ...
-
-*/
-export class ResizableSplitter {
-  static hostNode: HTMLElement;
-  static isVertical = true;
-  static isRightOrTop = true;
-
-  private static initialized = false;
-  private static startXorY = 0;
-  private static startWidthOrHeight = 0;
-  private static pressed = false;
-
-  static init() {
-    /* styles for resizable splitter */
-    const css: CssProps = {
-      '.resizable-splitter-v-left, .resizable-splitter-v-right': {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        width: '2px',
-        cursor: 'col-resize',
-      },
-      '.resizable-splitter-v-right': {
-        left: 'unset',
-        right: 0,
-      },
-      '.resizable-splitter-v-left:hover, .resizable-splitter-v-right:hover': {
-        width: '4px',
-        backgroundColor: '#ccc',
-      },
-
-      '.resizable-splitter-h-top, .resizable-splitter-h-bottom': {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: '2px',
-        cursor: 'row-resize',
-      },
-      '.resizable-splitter-h-bottom': {
-        top: 'unset',
-        bottom: 0,
-      },
-      '.resizable-splitter-h-top:hover, .resizable-splitter-h-bottom:hover': {
-        height: '4px',
-        backgroundColor: '#ccc',
-      },
-    };
-    bindGlobalStyle('resizable-splitter', css);
-
-    window.addEventListener('mousemove', ResizableSplitter.onMousemove.bind(ResizableSplitter), false);
-    document.documentElement.addEventListener('mouseup', ResizableSplitter.onMouseup.bind(ResizableSplitter), false);
-  }
-
-  static getSplitterClassName(isVertical: boolean, isRightOrTop: boolean): string {
-    const className =
-      'resizable-splitter-' +
-      (isVertical ? (isRightOrTop ? 'v-right' : 'v-left') : isRightOrTop ? 'h-top' : 'h-bottom');
-    return className;
-  }
-
-  static onMousedown(event: any) {
-    if (event.buttons !== 1 || event.button !== 0) return;
-    this.pressed = true;
-    this.startXorY = this.isVertical ? event.clientX : event.clientY;
-    const startPosition = document.defaultView!.getComputedStyle(this.hostNode)[this.isVertical ? 'width' : 'height'];
-    this.startWidthOrHeight = parseInt(startPosition, 10);
-  }
-
-  static onMousemove(event: any) {
-    if (!this.pressed || event.buttons !== 1 || event.button !== 0) {
-      return;
-    }
-
-    // prevent text/element selection when drag
-    stopPropagation(event);
-    if (this.isVertical) {
-      const movedXorY = this.startWidthOrHeight + (event.clientX - this.startXorY) * (this.isRightOrTop ? 1 : -1);
-      this.hostNode.style.width = movedXorY + 'px';
-    } else {
-      const movedXorY = this.startWidthOrHeight + (event.clientY - this.startXorY) * (this.isRightOrTop ? -1 : 1);
-      this.hostNode.style.height = movedXorY + 'px';
-    }
-  }
-
-  static onMouseup() {
-    if (this.pressed) this.pressed = false;
-  }
-
-  static getSplitter(selector: string, isVertical: boolean, isRightOrTop: boolean) {
-    const className = this.getSplitterClassName(isVertical, isRightOrTop);
-
-    const onMousedown = (event: any) => {
-      if (!this.initialized) {
-        this.initialized = true;
-        this.init();
-      }
-
-      ResizableSplitter.hostNode = document.querySelector(selector)!;
-      if (!ResizableSplitter.hostNode) {
-        console.error(`Can't find element: ${selector}`);
-        return;
-      }
-      ResizableSplitter.isVertical = isVertical;
-      ResizableSplitter.isRightOrTop = isRightOrTop;
-      ResizableSplitter.onMousedown.bind(ResizableSplitter)(event);
-    };
-
-    return <div onMouseDown={onMousedown} class={className}></div>;
-  }
-}
+import { bindGlobalStyle, CssProps } from 'lupine.web';
+import { stopPropagation } from '../lib';
+/**
+How to use:
+  // getSplitter's first parameter is the container's selector where the Splitter will be in.
+  // the second parameter is whether it's Vertical
+  // then the third parameter is it's RightOrTop or not
+  const locationLeft = false;
+  const splitter = ResizableSplitter.getSplitter('.body .side', true, locationLeft);
+  const container = (
+        <div class='body'>
+            <div class='side'>
+              {splitter}
+              {designPanel}
+            </div>
+          ...
+
+*/
+export class ResizableSplitter {
+  static hostNode: HTMLElement;
+  static isVertical = true;
+  static isRightOrTop = true;
+
+  private static initialized = false;
+  private static startXorY = 0;
+  private static startWidthOrHeight = 0;
+  private static pressed = false;
+
+  static init() {
+    /* styles for resizable splitter */
+    const css: CssProps = {
+      '.resizable-splitter-v-left, .resizable-splitter-v-right': {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: '2px',
+        cursor: 'col-resize',
+      },
+      '.resizable-splitter-v-right': {
+        left: 'unset',
+        right: 0,
+      },
+      '.resizable-splitter-v-left:hover, .resizable-splitter-v-right:hover': {
+        width: '4px',
+        backgroundColor: '#ccc',
+      },
+
+      '.resizable-splitter-h-top, .resizable-splitter-h-bottom': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: '2px',
+        cursor: 'row-resize',
+      },
+      '.resizable-splitter-h-bottom': {
+        top: 'unset',
+        bottom: 0,
+      },
+      '.resizable-splitter-h-top:hover, .resizable-splitter-h-bottom:hover': {
+        height: '4px',
+        backgroundColor: '#ccc',
+      },
+    };
+    bindGlobalStyle('resizable-splitter', css);
+
+    window.addEventListener('mousemove', ResizableSplitter.onMousemove.bind(ResizableSplitter), false);
+    document.documentElement.addEventListener('mouseup', ResizableSplitter.onMouseup.bind(ResizableSplitter), false);
+  }
+
+  static getSplitterClassName(isVertical: boolean, isRightOrTop: boolean): string {
+    const className =
+      'resizable-splitter-' +
+      (isVertical ? (isRightOrTop ? 'v-right' : 'v-left') : isRightOrTop ? 'h-top' : 'h-bottom');
+    return className;
+  }
+
+  static onMousedown(event: any) {
+    if (event.buttons !== 1 || event.button !== 0) return;
+    this.pressed = true;
+    this.startXorY = this.isVertical ? event.clientX : event.clientY;
+    const startPosition = document.defaultView!.getComputedStyle(this.hostNode)[this.isVertical ? 'width' : 'height'];
+    this.startWidthOrHeight = parseInt(startPosition, 10);
+  }
+
+  static onMousemove(event: any) {
+    if (!this.pressed || event.buttons !== 1 || event.button !== 0) {
+      return;
+    }
+
+    // prevent text/element selection when drag
+    stopPropagation(event);
+    if (this.isVertical) {
+      const movedXorY = this.startWidthOrHeight + (event.clientX - this.startXorY) * (this.isRightOrTop ? 1 : -1);
+      this.hostNode.style.width = movedXorY + 'px';
+    } else {
+      const movedXorY = this.startWidthOrHeight + (event.clientY - this.startXorY) * (this.isRightOrTop ? -1 : 1);
+      this.hostNode.style.height = movedXorY + 'px';
+    }
+  }
+
+  static onMouseup() {
+    if (this.pressed) this.pressed = false;
+  }
+
+  static getSplitter(selector: string, isVertical: boolean, isRightOrTop: boolean) {
+    const className = this.getSplitterClassName(isVertical, isRightOrTop);
+
+    const onMousedown = (event: any) => {
+      if (!this.initialized) {
+        this.initialized = true;
+        this.init();
+      }
+
+      ResizableSplitter.hostNode = document.querySelector(selector)!;
+      if (!ResizableSplitter.hostNode) {
+        console.error(`Can't find element: ${selector}`);
+        return;
+      }
+      ResizableSplitter.isVertical = isVertical;
+      ResizableSplitter.isRightOrTop = isRightOrTop;
+      ResizableSplitter.onMousedown.bind(ResizableSplitter)(event);
+    };
+
+    return <div onMouseDown={onMousedown} class={className}></div>;
+  }
+}