@drumee/ui-toolkit 0.0.12 → 0.0.13

package/ui-toolkit/skin/index.scss

@@ -1,178 +0,0 @@
-@use '@drumee/ui-styles/src/mixins';
-
-@mixin dtk-butler-main {
-
-  &__ui {
-    width: 100vw;
-    height: 100vh;
-    align-content: center;
-    align-items: center;
-    justify-content: start;
-    background-color: var(--neutral-100);
-    overflow: auto;
-    font-family: var(--font-main);
-    flex-wrap: wrap;
-    padding: var(--spacer-7);
-    gap: var(--spacer-8);
-    flex-shrink: 0;
-
-    &[data-device="mobile"] {
-      padding: 10px;
-      height: auto;
-    }
-  }
-
-  &__main {
-    top: 180px;
-
-    &[data-device="mobile"] {
-      top: 0;
-      gap: var(--spacer-3);
-    }
-
-    justify-content: start;
-    align-items: center;
-    width: 100%;
-    max-width: 480px;
-    border-width: 1px;
-    gap: var(--spacer-5);
-    background-color: var(--white);
-    border: 1px solid var(--neutral-200);
-    padding: var(--spacer-7);
-    border-radius: var(--corner-radius-6);
-  }
-
-
-  &__logo {
-    &-container {
-      align-content: center;
-      justify-content: center;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-
-    &-content {
-      width: 80px;
-      height: 64px;
-      align-content: center;
-      justify-content: start;
-      align-items: start;
-      flex-wrap: wrap;
-
-      svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  &__title {
-    font-weight: bold;
-    font-size: 32px;
-    line-height: 40px;
-    text-align: center;
-  }
-
-  &__tips {
-    font-weight: 400;
-    font-style: normal;
-    font-size: 16px;
-    line-height: 26px;
-    letter-spacing: 1px;
-    text-align: center;
-  }
-
-  &__message {
-    font-weight: 400;
-    font-style: normal;
-    font-size: 14px;
-    line-height: 22px;
-    text-align: center;
-    letter-spacing: 1px;
-
-    span {
-      font-weight: bold;
-      cursor: pointer;
-    }
-  }
-
-}
-
-@mixin dtk-butler-button {
-
-  &__buttons {
-    gap: var(--spacer-6);
-    width: 100%;
-    justify-content: center;
-  }
-
-
-  &__button-main {
-    height: 48px;
-    opacity: 1;
-    gap: var(--spacer-4);
-    border-radius: var(--corner-radius-max);
-    padding-top: 8px;
-    padding-right: 16px;
-    padding-bottom: 8px;
-    padding-left: 16px;
-    cursor: pointer;
-
-    &[data-haptic="1"] {
-      opacity: .6;
-      pointer-events: none;
-    }
-
-    &.primary {
-      padding-right: 3px;
-      justify-content: center;
-      grid-template-columns: 1fr 40px;
-      background: var(--primary-500);
-      color: var(--white);
-      align-content: center;
-      flex-wrap: wrap;
-
-      .icon.svg-wrapper {
-        height: 38px;
-        width: 38px;
-        color: var(--primary-500);
-        background-color: white;
-        border-radius: 50%;
-        padding: 9px;
-      }
-    }
-
-    &.full-width {
-      width: 100%;
-    }
-
-    &.secondary {
-      justify-content: center;
-      background-color: var(--neutral-200);
-
-      .icon.svg-wrapper {
-        height: 32px;
-        width: 32px;
-        color: var(--neutral-900);
-        border-radius: 50%;
-        padding: 6px;
-      }
-    }
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__button.btn {
-    width: auto;
-    height: 100%;
-    align-content: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    line-height: 20px;
-  }
-
-}

package/ui-toolkit/skin/skin.scss

@@ -1,167 +0,0 @@
-@use '@drumee/ui-styles/src/mixins';
-
-@mixin dtk-butler-main {
-
-  &__ui {
-    width: 100vw;
-    height: 100vh;
-    align-content: center;
-    align-items: center;
-    justify-content: start;
-    background-color: var(--neutral-100);
-    overflow: auto;
-    font-family: var(--font-main);
-    flex-wrap: wrap;
-    padding: var(--spacer-7);
-    gap: var(--spacer-8);
-    flex-shrink: 0;
-
-    &[data-device="mobile"] {
-      padding: 10px;
-      height: auto;
-    }
-  }
-
-  &__main {
-    top: 180px;
-    justify-content: start;
-    align-items: center;
-    width: 100%;
-    max-width: 480px;
-    border-width: 1px;
-    gap: var(--spacer-8);
-    background-color: var(--white);
-    border: 1px solid var(--neutral-200);
-    padding: var(--spacer-7);
-    border-radius: var(--corner-radius-6);
-  }
-
-
-  &__logo {
-    &-container {
-      align-content: center;
-      justify-content: center;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-
-    &-content {
-      width: 80px;
-      height: 64px;
-      align-content: center;
-      justify-content: start;
-      align-items: start;
-      flex-wrap: wrap;
-
-      svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  &__title {
-    font-weight: bold;
-    font-size: 32px;
-    line-height: 40px;
-    text-align: center;
-  }
-
-  &__tips {
-    font-weight: 400;
-    font-style: normal;
-    font-size: 16px;
-    line-height: 26px;
-    letter-spacing: 1px;
-    text-align: center;
-  }
-
-  &__message {
-    font-weight: 400;
-    font-style: normal;
-    font-size: 14px;
-    line-height: 22px;
-    text-align: center;
-    letter-spacing: 1px;
-
-    span {
-      font-weight: bold;
-      cursor: pointer;
-    }
-  }
-
-}
-
-@mixin dtk-butler-button {
-
-  &__buttons {
-    gap: var(--spacer-6);
-    width: 100%;
-  }
-
-
-  &__button-main {
-    height: 48px;
-    opacity: 1;
-    gap: var(--spacer-4);
-    border-radius: var(--corner-radius-max);
-    padding-top: 8px;
-    padding-right: 16px;
-    padding-bottom: 8px;
-    padding-left: 16px;
-    cursor: pointer;
-
-    &[data-haptic="1"] {
-      opacity: .6;
-      pointer-events: none;
-    }
-
-    &.primary {
-      padding-right: 3px;
-      justify-content: center;
-      grid-template-columns: 1fr 40px;
-      background: var(--primary-500);
-      color: var(--white);
-      align-content: center;
-      flex-wrap: wrap;
-
-      .icon.svg-wrapper {
-        height: 38px;
-        width: 38px;
-        color: var(--primary-500);
-        background-color: white;
-        border-radius: 50%;
-        padding: 9px;
-      }
-    }
-
-    &.secondary {
-      justify-content: center;
-      background-color: var(--neutral-200);
-
-      .icon.svg-wrapper {
-        height: 32px;
-        width: 32px;
-        color: var(--neutral-900);
-        border-radius: 50%;
-        padding: 6px;
-      }
-    }
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__button.btn {
-    width: auto;
-    height: 100%;
-    align-content: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    line-height: 20px;
-  }
-
-}

package/ui-toolkit/widgets/dialog/index.js

@@ -1,41 +0,0 @@
-
-/**
- * Class representing signup page in Welcome module.
- * @class __welcome_signup
- * @extends __welcome_interact
- */
-require('./skin');
-const { dtk_common } = require("..")
-export default class dtk_butler_dialog extends dtk_common {
-
-  /**
-   ** @param {object} opt
-  */
-  initialize(opt = {}) {
-    super.initialize(opt);
-    this.declareHandlers();
-    this.mset({ flow: _a.y })
-  }
-
-  /**
-   *
-  */
-  onDomRefresh() {
-    this.feed(require('./skeleton').default(this));
-  }
-
-  /**
-   * @param {LetcBox} cmd
-   * @param {any} args
-  */
-  onUiEvent(cmd, args = {}) {
-    const service = args.service || cmd.mget(_a.service);
-    this.debug(`onUiEvent service = ${service}`, cmd, this);
-
-    switch (service) {
-      default:
-        this.triggerHandlers({ service })
-    }
-  }
-
-}

package/ui-toolkit/widgets/dialog/skeleton/index.js

@@ -1,27 +0,0 @@
-const { header } = require("../../../skeletons")
-
-export default function (ui) {
-  const fig = ui.fig.family
-  const { title, message, buttons, body } = ui.model.toJSON()
-  let Buttons = null;
-  if (buttons) {
-    Buttons = Skeletons.Box.X({
-      className: `${fig}__buttons`,
-      kids: buttons
-    })
-  }
-  if (message == null) message = '';
-  let a = Skeletons.Box.Y({
-    className: `${fig}__main`,
-    debug: __filename,
-    kids: [
-      header(ui, title),
-      Skeletons.Element({ className: `${fig}__message`, content: message }),
-      body,
-      Buttons
-    ]
-  })
-
-  return a;
-
-}

package/ui-toolkit/widgets/dialog/skin/index.scss

@@ -1,22 +0,0 @@
-@use '@drumee/ui-styles/src/mixins';
-@use '../../../skin' as *;
-
-.dtk-butler-dialog {
-  @include dtk-butler-main;
-  @include dtk-butler-button;
-
-  &__message {
-    font-weight: 400;
-    font-style: normal;
-    font-size: 14px;
-    line-height: 22px;
-    text-align: center;
-    letter-spacing: 1px;
-
-    span {
-      font-weight: bold;
-      cursor: pointer;
-    }
-  }
-
-}

package/ui-toolkit/widgets/index.js

@@ -1,30 +0,0 @@
-
-/**
- * Common class
- */
-export class dtk_common extends LetcBox {
-
-  /**
-   * 
-   */
-  setItemState(pn, s = 0) {
-    this.ensurePart(pn).then((p) => { setTimeout(() => { p.setState(s) }, 100) })
-  }
-
-  /**
-   * 
-   */
-  setItemStatus(pn, s = 0, attr = _a.status) {
-    this.ensurePart(pn).then((p) => { setTimeout(() => { p.el.dataset[attr] = s }, 100) })
-  }
-
-
-  /**
-   * 
-   * @param {*} xhr 
-   */
-  onServerComplain(xhr) {
-    this.warn(xhr)
-  }
-}
-

package/ui-toolkit/widgets/otp/index.js

@@ -1,148 +0,0 @@
-
-require('./skin');
-const { dtk_common } = require("..")
-export default class dtk_otp extends dtk_common {
-
-  /**
-   ** @param {object} opt
-  */
-  initialize(opt = {}) {
-    super.initialize(opt);
-    this.declareHandlers();
-    this.mset({ flow: _a.y })
-  }
-
-  /**
-   * 
-   */
-  bindPasteEvent() {
-    this.ensurePart("digits").then(async (p) => {
-      await Kind.waitFor('entry');
-      for (let c of p.children.toArray()) {
-        c.once("input:ready", () => {
-          c._input[0].onpaste = (e) => {
-            setTimeout(() => {
-              let value = c.getValue() || '';
-              if (!/[0-9]{1,6}/.test(value)) {
-                c.setValue("")
-                return
-              }
-              let digits = value.split('');
-              let i = c.getIndex();
-              for (let d of digits) {
-                if (!p.children._views[i]) continue;
-                p.children._views[i].setValue(d);
-                i++;
-              }
-              this.checkForm()
-            }, 300)
-          }
-        })
-      }
-    })
-  }
-
-  /**
-   * 
-   * @param {*} msg 
-   */
-  displayMessage(msg, error = 0) {
-    this.__tipsText.set({ content: msg });
-    this.__tipsText.el.dataset.error = error;
-    setTimeout(() => {
-      this.__tipsText.set({ content: '' });
-      this.__tipsText.el.dataset.error = error;
-    }, 3000)
-  }
-
-  /**
-   * 
-   */
-  checkForm() {
-    this.ensurePart("digits").then((p) => {
-      let res = [];
-      for (let c of p.children.toArray()) {
-        let v = c.getValue()
-        if (/[0-9]/.test(v)) {
-          res.push(v)
-        }
-      }
-      let api = this.mget(_a.api)
-      let payload = this.mget('payload')
-      if (res.length >= 6) {
-        if (api) {
-          return this.postService(api, { ...payload, code: res.join('') }, { async: 1 }).then((data) => {
-            if(data.error){
-              return this.displayMessage(LOCALE.INVALID_CODE, 1)
-            }
-            let service = this.mget(_a.service) || 'otp-verified';
-            this.triggerHandlers({ data, service })
-          }).catch((e) => {
-            this.warn("[checkForm] OTP verify error", e)
-            this.displayMessage(LOCALE.INVALID_CODE, 1)
-          })
-        }
-      }
-    })
-  }
-
-  /**
-   *
-  */
-  onDomRefresh() {
-    this.feed(require("./skeleton").default(this));
-    this.bindPasteEvent();
-  }
-
-
-  /**
-   * @param {LetcBox} cmd
-   * @param {any} args
-  */
-  onUiEvent(cmd, args = {}) {
-    const service = args.service || cmd.get(_a.service);
-    let status = cmd.status;
-    switch (service) {
-      case _a.input:
-        cmd.focus();
-        if (status == _e.click) {
-          cmd.setValue('');
-          return;
-        }
-        let res = [];
-        this.ensurePart("digits").then((p) => {
-          let i = cmd.getIndex() + 1;
-          let value = cmd.getValue();
-          for (let c of p.children.toArray()) {
-            if (c.getIndex() < i) {
-              continue;
-            } else {
-              if (/[0-9]/.test(value) && /[0-9]/.test(status)) {
-                c.focus();
-                c.setValue('')
-              } else {
-                cmd.setValue('');
-              }
-              break;
-            }
-          }
-          this.checkForm()
-        })
-        break;
-      case "resend-code":
-        let { email } = this.mget('payload')
-        this.postService(SERVICE.otp.send, { email }).then((data) => {
-          this.mset({ payload: data })
-          this.displayMessage(LOCALE.NEW_CODE_RESENT)
-        }).catch((e) => {
-          this.displayMessage(LOCALE.UNKNOWN_ERROR, 1)
-          this.warn("AAA:104 Error sending OTP", e)
-        })
-        break;
-      default:
-        this.triggerHandlers({ ...args, service })
-    }
-  }
-
-
-}

package/ui-toolkit/widgets/otp/skeleton/index.js

@@ -1,85 +0,0 @@
-const { header } = require("../../../skeletons");
-
-function __skl_welcome_signup(ui) {
-  const fig = ui.fig.family
-  let digits = []
-  let { title, message } = ui.model.toJSON()
-  for (let i = 0; i < 6; i++) {
-    digits.push(
-      Skeletons.Entry({
-        name: `digit-${i}`,
-        service: _a.input
-      })
-    )
-  }
-  const code = Skeletons.Box.X({
-    kidsOpt: {
-      className: `${fig}__digit`,
-      placeholder: "",
-      min: 0,
-      max: 9,
-      maxlength: 6,
-      interactive: 1
-    },
-    className: `${fig}__digits`,
-    sys_pn: "digits",
-    kids: digits
-  })
-
-  const resend = Skeletons.Box.X({
-    className: `${fig}__resend`,
-    kidsOpt: {
-      tagName: _K.tag.span,
-    },
-    kids: [
-      Skeletons.Element({
-        className: `${fig}__resend-text`,
-        content: `${LOCALE.DIDNT_GET_EMAIL} ${LOCALE.OR}`
-      }),
-      Skeletons.Element({
-        className: `${fig}__resend-text resend`,
-        content: LOCALE.RESEND_CODE,
-        service: "resend-code"
-      }),
-    ]
-  })
-
-  const tips = Skeletons.Box.X({
-    className: `${fig}__tips`,
-    kidsOpt: {
-      tagName: _K.tag.span,
-    },
-    kids: [
-      Skeletons.Note({
-        sys_pn: "tips-text",
-        className: `${fig}__tips-text`,
-      }),
-    ]
-  })
-
-  if (_.isString(message)) {
-    message = Skeletons.Box.X({
-      className: `${fig}__message`,
-      kids: [
-        Skeletons.Element({
-          className: `${fig}__message-text`,
-          content: message
-        })
-      ]
-    });
-  }
-  return Skeletons.Box.Y({
-    className: `${fig}__main`,
-    debug: __filename,
-    kids: [
-      header(ui, title || LOCALE.VALIDATION_SENT_TO),
-      message,
-      code,
-      tips,
-      resend
-    ]
-  })
-
-}
-
-export default __skl_welcome_signup