lupine.web 1.0.15 → 1.0.17

package/src/components/toggle-switch.tsx

@@ -1,156 +0,0 @@
-import { bindGlobalStyles, CssProps } from 'lupine.web';
-import { ToggleBase, ToggleBaseHookProps } from './toggle-base';
-
-export enum ToggleSwitchSize {
-  SmallSmall = 'smallsmall',
-  Small = 'small',
-  Medium = 'medium',
-  Large = 'large',
-}
-export type ToggleSwitchProps = {
-  size: ToggleSwitchSize;
-  text?: { on: string; off: string };
-  textWidth?: string;
-  disabled?: boolean;
-  checked?: boolean;
-  onClick?: (checked: boolean) => void;
-  hook?: ToggleBaseHookProps;
-};
-export const ToggleSwitch = (props: ToggleSwitchProps) => {
-  const sizeH =
-    props.size === ToggleSwitchSize.SmallSmall
-      ? 16
-      : props.size === ToggleSwitchSize.Small
-      ? 22
-      : props.size === ToggleSwitchSize.Large
-      ? 42
-      : 34;
-  const cssSize =
-    props.size === ToggleSwitchSize.SmallSmall
-      ? 'smallsmall'
-      : props.size === ToggleSwitchSize.Small
-      ? 'small'
-      : props.size === ToggleSwitchSize.Large
-      ? 'large'
-      : '';
-
-  const css: CssProps = {
-    width: `100%`,
-    height: `100%`,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    '& .ts-slider': {
-      position: 'relative',
-      cursor: 'pointer',
-      backgroundColor: 'var(--toggle-background-color, #c7c7c7)',
-      transition: '.4s',
-      borderRadius: '34px',
-      height: '100%',
-      display: 'flex',
-      padding: '0 27px 0 37px',
-      alignItems: 'center',
-    },
-    '&.smallsmall .ts-slider': {
-      padding: '0 8px 0 22px',
-      fontSize: '0.65rem',
-    },
-    '&.small .ts-slider': {
-      padding: '0 17px 0 27px',
-      fontSize: '0.85rem',
-    },
-    '&.large .ts-slider': {
-      padding: '0 37px 0 57px',
-    },
-
-    '& .ts-slider .ts-circle': {
-      position: 'absolute',
-      content: '',
-      height: '26px',
-      width: '26px',
-      left: '4px',
-      bottom: '4px',
-      backgroundColor: 'var(--toggle-ball-color, #fff)',
-      transition: '.4s',
-      borderRadius: '50%',
-    },
-    '&.smallsmall .ts-slider .ts-circle': {
-      height: '12px',
-      width: '12px',
-      left: '2px',
-      bottom: '2px',
-    },
-    '&.small .ts-slider .ts-circle': {
-      height: '18px',
-      width: '18px',
-      left: '3px',
-      bottom: '2px',
-    },
-    '&.large .ts-slider .ts-circle': {
-      height: '38px',
-      width: '38px',
-      left: '4px',
-      bottom: '2px',
-    },
-
-    '& .ts-on-text, & .ts-off-text': {
-      display: 'none',
-      width: props.textWidth,
-    },
-    '&.toggle-on .ts-on-text': {
-      display: 'block',
-    },
-    '&.toggle-off .ts-off-text': {
-      display: 'block',
-    },
-
-    '&.toggle-on .ts-slider': {
-      backgroundColor: 'var(--primary-accent-color, #0a74c9)',
-      padding: '0 47px 0 17px',
-    },
-    '&.smallsmall.toggle-on .ts-slider': {
-      padding: '0 18px 0 12px',
-    },
-    '&.small.toggle-on .ts-slider': {
-      padding: '0 27px 0 17px',
-    },
-    '&.large.toggle-on .ts-slider': {
-      padding: '0 72px 0 22px',
-    },
-
-    '&.toggle-on .ts-slider .ts-circle': {
-      left: 'unset',
-      right: '3px',
-    },
-    '&.disabled .ts-slider': {
-      cursor: 'not-allowed',
-      opacity: 'var(--primary-disabled-opacity)',
-    },
-  };
-
-  // this is a sample to add variables for a theme
-  const cssTheme: CssProps = {
-    '[data-theme="dark" i]': {
-      '--toggle-ball-color': '#000000',
-      '--toggle-background-color': '#262626',
-    },
-  };
-
-  bindGlobalStyles('toggle-switch-theme', '', cssTheme);
-  return (
-    <ToggleBase {...props} size={{ w: 'auto', h: sizeH }}>
-      <div
-        css={css}
-        class={`toggle-switch-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
-          props.disabled ? ' disabled' : ''
-        } ${cssSize}`}
-      >
-        <span class='ts-slider'>
-          <span class='ts-on-text'>{props.text?.on}</span>
-          <span class='ts-circle'></span>
-          <span class='ts-off-text'>{props.text?.off}</span>
-        </span>
-      </div>
-    </ToggleBase>
-  );
-};

package/src/lib/date-utils.ts

@@ -1,317 +0,0 @@
-export class DateUtils {
-  /*
-   * returns the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC.
-   */
-  static now(): number {
-    return Date.now();
-  }
-
-  // Date time string format: YYYY-MM-DDTHH:mm:ss.sssZ
-  // The string that you want to parse into a Date should match this format or a portion of this format.
-  // The “T” character separates the date from the time portion of the string. The “Z” character is the UTC offset representation.
-  static toDate(str: string): Date {
-    return new Date(Date.parse(str));
-  }
-
-  static clone(dt: Date): Date {
-    return new Date(dt.valueOf());
-  }
-
-  static isLeapYear(year: number): boolean {
-    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
-  }
-
-  static daysInMonth(year: number, month: number) {
-    return month === 1 ? (DateUtils.isLeapYear(year) ? 29 : 28) : 31 - ((month % 7) % 2);
-  }
-
-  static createDate(
-    year: number,
-    monthIndex: number,
-    date?: number,
-    hours?: number,
-    minutes?: number,
-    seconds?: number,
-    ms?: number
-  ): Date {
-    const dt = new Date(year, monthIndex, date, hours, minutes, seconds, ms);
-    return dt;
-  }
-
-  // It returns the number of milliseconds since January 1, 1970, 00:00:00 UTC instead of local (regardless of which time zone you are in).
-  static createUTCDate(
-    year: number,
-    monthIndex?: number,
-    date?: number,
-    hours?: number,
-    minutes?: number,
-    seconds?: number,
-    ms?: number
-  ): Date {
-    const dt = new Date(Date.UTC.apply(null, [year, monthIndex, date, hours, minutes, seconds, ms]));
-    return dt;
-  }
-
-  static set(
-    dt: Date,
-    year?: number,
-    monthIndex?: number,
-    date?: number,
-    hours?: number,
-    minutes?: number,
-    seconds?: number,
-    ms?: number
-  ): Date {
-    if (!dt) {
-      dt = new Date(DateUtils.now());
-    }
-    if (typeof year === 'number') {
-      dt.setFullYear(year);
-    }
-    if (typeof monthIndex === 'number') {
-      dt.setMonth(monthIndex);
-    }
-    if (typeof date === 'number') {
-      dt.setDate(date);
-    }
-    if (typeof hours === 'number') {
-      dt.setHours(hours);
-    }
-    if (typeof minutes === 'number') {
-      dt.setMinutes(minutes);
-    }
-    if (typeof seconds === 'number') {
-      dt.setSeconds(seconds);
-    }
-    if (typeof ms === 'number') {
-      dt.setMilliseconds(ms);
-    }
-    return dt;
-  }
-
-  static add(
-    dt: Date,
-    year?: number,
-    monthCount?: number,
-    date?: number,
-    hours?: number,
-    minutes?: number,
-    seconds?: number,
-    ms?: number
-  ): Date {
-    if (!dt) {
-      dt = new Date(DateUtils.now());
-    }
-    if (typeof year === 'number') {
-      dt.setFullYear(dt.getFullYear() + year);
-    }
-    if (typeof monthCount === 'number') {
-      dt.setMonth(dt.getMonth() + monthCount);
-    }
-    if (typeof date === 'number') {
-      dt.setDate(dt.getDate() + date);
-    }
-    if (typeof hours === 'number') {
-      dt.setHours(dt.getHours() + hours);
-    }
-    if (typeof minutes === 'number') {
-      dt.setMinutes(dt.getMinutes() + minutes);
-    }
-    if (typeof seconds === 'number') {
-      dt.setSeconds(dt.getSeconds() + seconds);
-    }
-    if (typeof ms === 'number') {
-      dt.setMilliseconds(dt.getMilliseconds() + ms);
-    }
-    return dt;
-  }
-
-  // returns a difference object from two dates
-  static diff(endDate: Date, startDate: Date): DiffDate {
-    const startYear = startDate.getFullYear();
-    let yearDiff = endDate.getFullYear() - startYear;
-    let monthDiff = endDate.getMonth() - startDate.getMonth();
-    if (monthDiff < 0) {
-      yearDiff--;
-      monthDiff += 12;
-    }
-    let dayDiff = endDate.getDate() - startDate.getDate();
-    if (dayDiff < 0) {
-      if (monthDiff > 0) {
-        monthDiff--;
-      } else {
-        yearDiff--;
-        monthDiff = 11;
-      }
-      dayDiff += DateUtils.daysInMonth(startYear, startDate.getMonth());
-    }
-    const msTotal = endDate.valueOf() - startDate.valueOf(); // milliseconds
-    const secondTotal = Math.floor(msTotal / 1000); // milliseconds -> seconds
-    const hourDiff = Math.floor(secondTotal / (60 * 60)) % 24;
-    const minuteDiff = Math.floor(secondTotal / 60) % 60;
-    const secondDiff = secondTotal % 60;
-    const msDiff = msTotal % 1000;
-    return new DiffDate(yearDiff, monthDiff, dayDiff, hourDiff, minuteDiff, secondDiff, msDiff);
-  }
-
-  // returns a time difference string from two dates
-  static diffString(endDate: Date, startDate: Date, printMS = false): string {
-    const diff = DateUtils.diff(endDate, startDate);
-    let ret = '';
-    if (diff.years !== 0) {
-      ret = ret + diff.years + ' years(s), ';
-    }
-    if (diff.years !== 0 || diff.months !== 0) {
-      ret = ret + diff.months + ' month(s), ';
-    }
-    if (diff.years !== 0 || diff.months !== 0 || diff.days !== 0) {
-      ret = ret + diff.days + ' day(s), ';
-    }
-    if (diff.years !== 0 || diff.months !== 0 || diff.days !== 0 || diff.hours !== 0) {
-      ret = ret + diff.hours + ' hour(s), ';
-    }
-    if (diff.years !== 0 || diff.months !== 0 || diff.days !== 0 || diff.hours !== 0 || diff.minutes !== 0) {
-      ret = ret + diff.minutes + ' minute(s), ';
-    }
-    if (
-      diff.years !== 0 ||
-      diff.months !== 0 ||
-      diff.days !== 0 ||
-      diff.hours !== 0 ||
-      diff.minutes !== 0 ||
-      diff.seconds !== 0 ||
-      !printMS
-    ) {
-      ret = ret + diff.seconds + ' second(s)';
-      if (printMS) {
-        ret += ', ';
-      }
-    }
-    if (printMS) {
-      ret = ret + diff.milliseconds + ' ms';
-    }
-    return ret;
-  }
-
-  // returns a YYYYMMDD format string
-  static toYMD(dt: Date, separator: string) {
-    separator = typeof separator === 'undefined' ? '-' : separator;
-    return (
-      dt.getFullYear() +
-      separator +
-      ('0' + (dt.getMonth() + 1)).toString().slice(-2) +
-      separator +
-      ('0' + dt.getDate()).toString().slice(-2)
-    );
-  }
-  static toYmdHms(dt: Date, separator: string) {
-    separator = typeof separator === 'undefined' ? '-' : separator;
-    return (
-      dt.getFullYear() +
-      separator +
-      ('0' + (dt.getMonth() + 1)).toString().slice(-2) +
-      separator +
-      ('0' + dt.getDate()).toString().slice(-2) +
-      ' ' +
-      ('0' + dt.getHours()).toString().slice(-2) +
-      ':' +
-      ('0' + dt.getMinutes()).toString().slice(-2) +
-      ':' +
-      ('0' + dt.getSeconds()).toString().slice(-2)
-    );
-  }
-
-  static toJSONString(dt: Date) {
-    // return dt.getUTCFullYear() + '-' + ('0' + (dt.getUTCMonth() + 1)).toString().slice(-2) +
-    //     '-' + ('0' + dt.getUTCDate()).toString().slice(-2) + ' ' + ('0' + dt.getUTCHours()).toString().slice(-2) +
-    //     ':' + ('0' + dt.getUTCMinutes()).toString().slice(-2) + ':' + ('0' + dt.getUTCSeconds()).toString().slice(-2) + 'Z';
-    return dt.toJSON();
-  }
-
-  static showJSONString(dt: string, separator = '-') {
-    return DateUtils.toYmdHms(DateUtils.toDate(dt), separator);
-  }
-
-  static fromJSONString(dt: string) {
-    return DateUtils.toDate(dt);
-  }
-
-  static clearTime(dt: Date) {
-    dt.setHours(0);
-    dt.setMinutes(0);
-    dt.setSeconds(0);
-    dt.setMilliseconds(0);
-    return dt;
-  }
-
-  static clearUTCTime(dt: Date) {
-    dt.setUTCHours(0);
-    dt.setUTCMinutes(0);
-    dt.setUTCSeconds(0);
-    dt.setUTCMilliseconds(0);
-    return dt;
-  }
-
-  static format(dt: Date, fmt: string) {
-    if (!fmt) {
-      fmt = 'YYYY-MM-DD';
-    }
-    if (!dt) {
-      dt = new Date();
-    }
-
-    const parts: { [key: string]: string } = {
-      YYYY: dt.getFullYear().toString(),
-      YY: ('00' + (dt.getFullYear() - 100)).toString().slice(-2),
-      MM: ('0' + (dt.getMonth() + 1)).toString().slice(-2),
-      M: (dt.getMonth() + 1).toString(),
-      DD: ('0' + dt.getDate()).toString().slice(-2),
-      D: dt.getDate().toString(),
-      hh: ('0' + dt.getHours()).toString().slice(-2),
-      h: dt.getHours().toString(),
-      mm: ('0' + dt.getMinutes()).toString().slice(-2),
-      ss: ('0' + dt.getSeconds()).toString().slice(-2),
-      SSS: ('00' + dt.getMilliseconds()).toString().slice(-3),
-      S: Math.floor(dt.getMilliseconds() / 100)
-        .toString()
-        .slice(-1),
-    };
-
-    const array = fmt.match(/(\[[^\[]*\])|(\\)?(YYYY|YY|MM?|DD?|hh?|mm?|ss?|SSS|S|.)/g) as string[];
-    for (let i = 0, length = array.length; i < length; i++) {
-      if (parts[array[i]]) {
-        array[i] = parts[array[i]];
-      }
-    }
-    const ret = array.join('');
-    return ret;
-  }
-}
-
-export class DiffDate {
-  years: number;
-  months: number;
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-  milliseconds: number;
-
-  constructor(
-    years: number,
-    months: number,
-    days: number,
-    hours: number,
-    minutes: number,
-    seconds: number,
-    milliseconds: number
-  ) {
-    this.years = years;
-    this.months = months;
-    this.days = days;
-    this.hours = hours;
-    this.minutes = minutes;
-    this.seconds = seconds;
-    this.milliseconds = milliseconds;
-  }
-}

package/src/lib/deep-merge.ts

@@ -1,37 +0,0 @@
-/**
- * Simple object check.
- * @param item
- * @returns {boolean}
- */
-const needMerge = (item: any) => {
-  return item && typeof item === 'object' && !Array.isArray(item);
-};
-
-/**
- * Deep merge two objects.
- * target must be a object, and array will be replaced
- * @param target
- * @param ...sources
- */
-export const deepMerge = (target: any, ...sources: any[]): any => {
-  if (!sources.length) return target;
-  const source = sources.shift();
-
-  if (needMerge(target) && needMerge(source)) {
-    for (const key in source) {
-      if (needMerge(source[key])) {
-        if (!target[key]) Object.assign(target, { [key]: {} });
-        deepMerge(target[key], source[key]);
-      } else {
-        Object.assign(target, { [key]: source[key] });
-      }
-    }
-  }
-
-  return deepMerge(target, ...sources);
-};
-
-// Clone data object only, also defined in core.ts
-export const cloneJson = (json: any) => {
-  return JSON.parse(JSON.stringify(json));
-};

package/src/lib/document-ready.ts

@@ -1,36 +0,0 @@
-/*
- * for my-apps
- */
-export class DocumentReady {
-  constructor() {}
-
-  // code is from https://code.jquery.com/jquery-1.12.4.js
-  // for document only (not for elements)
-  ready(fn: Function): void {
-    if (document.readyState === 'complete') {
-      setTimeout(fn, 0);
-    } else {
-      // The ready event handler and self cleanup method
-      const completed = function () {
-        if (document.readyState === 'complete') {
-          document.removeEventListener('DOMContentLoaded', completed);
-          window.removeEventListener('load', completed);
-          setTimeout(fn, 0);
-        }
-      };
-
-      document.addEventListener('DOMContentLoaded', completed);
-      window.addEventListener('load', completed);
-    }
-  }
-
-  readyPromise(): Promise<void> {
-    return new Promise((resolve, reject) => {
-      this.ready(() => {
-        resolve();
-      });
-    });
-  }
-}
-
-export default new DocumentReady();

package/src/lib/dom/calculate-text-width.ts

@@ -1,13 +0,0 @@
-/**
- * @param text
- * @param font, sample: italic/normal 19pt Times New Roman
- * @returns width
- */
-const calculateTextWidthSaved: { canvas: any } = { canvas: null };
-export function calculateTextWidth(text: string, font: string) {
-  let canvas = calculateTextWidthSaved.canvas || (calculateTextWidthSaved.canvas = document.createElement('canvas'));
-  let context = canvas.getContext('2d');
-  context.font = font;
-  let metrics = context.measureText(text);
-  return metrics.width;
-}

package/src/lib/dom/download-stream.ts

@@ -1,17 +0,0 @@
-/*
-  const response = await fetch('/api/admin/release/check-log', { ... });
-  const blob = await response.blob();
-  downloadStream(blob, filename);
-*/
-export const downloadStream = (blob: Blob, filename?: string) => {
-  const dom = document.createElement('a');
-  dom.setAttribute('href', URL.createObjectURL(blob));
-  dom.setAttribute('download', filename || 'true');
-  dom.style.display = 'none';
-  document.body.appendChild(dom);
-  dom.click();
-  setTimeout(() => {
-    document.body.removeChild(dom);
-  }, 3000);
-  return dom;
-};

package/src/lib/dom/download.ts

@@ -1,12 +0,0 @@
-export const download = (link: string, filename?: string) => {
-  const dom = document.createElement('a');
-  dom.setAttribute('href', link);
-  dom.setAttribute('download', filename || 'true');
-  dom.style.display = 'none';
-  document.body.appendChild(dom);
-  dom.click();
-  setTimeout(() => {
-    document.body.removeChild(dom);
-  }, 3000);
-  return dom;
-};

package/src/lib/dom/index.ts

@@ -1,71 +0,0 @@
-import { calculateTextWidth } from './calculate-text-width';
-import { clearCookie, getCookie, setCookie } from './cookie';
-import { download } from './download';
-import { downloadStream } from './download-stream';
-
-export class DomUtils {
-  public static calculateTextWidth(text: string, font: string) {
-    return calculateTextWidth(text, font);
-  }
-
-  public static getValue(cssSelector: string) {
-    return (document.querySelector(cssSelector) as HTMLInputElement)?.value;
-  }
-
-  public static setValue(cssSelector: string, value: string) {
-    const dom = document.querySelector(cssSelector) as HTMLInputElement;
-    if (dom) dom.value = value;
-  }
-
-  public static getChecked(cssSelector: string) {
-    return (document.querySelector(cssSelector) as HTMLInputElement)?.checked;
-  }
-
-  public static setChecked(cssSelector: string, checked: boolean) {
-    const dom = document.querySelector(cssSelector) as HTMLInputElement;
-    if (dom) dom.checked = checked;
-  }
-
-  public static joinValues(values: (string | undefined)[]) {
-    return values.filter((item) => item && item !== '').join(' ');
-  }
-
-  public static setCookie(
-    name: string,
-    value: string,
-    expireDays = 365,
-    path?: string,
-    domain?: string,
-    secure?: string
-  ) {
-    return setCookie(name, value, expireDays, path, domain, secure);
-  }
-
-  public static getCookie(key: string) {
-    return getCookie(key);
-  }
-
-  public static clearCookie(name: string, path?: string, domain?: string, secure?: string) {
-    return clearCookie(name, path, domain, secure);
-  }
-
-  public static download(link: string, filename?: string) {
-    return download(link, filename);
-  }
-
-  public static downloadStream(blob: Blob, filename?: string) {
-    return downloadStream(blob, filename);
-  }
-
-  public static byId(id: string) {
-    return document.querySelector(`#${id}`);
-  }
-
-  public static byCssPath(cssPath: string) {
-    return document.querySelector(cssPath);
-  }
-
-  public static bySelector(selector: string) {
-    return document.querySelector(selector);
-  }
-}