@drumee/ui-toolkit 0.0.12 → 0.0.13

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

@@ -1,88 +0,0 @@
-@use '../../../skin' as *;
-
-.dtk-otp {
-  @include dtk-butler-main;
-
-  &__digits {
-    width: 100%;
-    justify-content: center;
-    height: 78px;
-    gap: var(--spacer-6);
-  }
-
-  &__digit {
-    width: 52px;
-    height: 72px;
-    opacity: 1;
-    gap: 16px;
-    border-radius: var(--corner-radius-max);
-    padding-top: 8px;
-    padding-right: 16px;
-    padding-bottom: 8px;
-    padding-left: 16px;
-    border: 1px var(--neutral-200) solid;
-
-    input {
-      width: 100%;
-      width: 100%;
-      font-weight: 400;
-      font-style: normal;
-      font-size: 32px;
-      line-height: 40px;
-      text-align: center;
-      vertical-align: middle;
-
-      &:focus {
-        background: var(--primary-100);
-        color: var(--primary-500);
-      }
-    }
-
-    &:focus-within {
-      border: 1px solid var(--primary-500);
-      background: var(--primary-100);
-    }
-  }
-
-  &__tips {
-    width: 100%;
-    justify-content: center;
-    flex-wrap: wrap;
-
-    &-text {
-      font-weight: 400;
-      font-style: normal;
-      font-size: 16px;
-      line-height: 26px;
-      letter-spacing: 1px;
-      width: 100%;
-
-      &[data-error="1"] {
-        color: var(--red-500);
-        font-weight: bold;
-        cursor: pointer;
-      }
-    }
-  }
-
-  &__resend {
-    width: 100%;
-    justify-content: start;
-    flex-wrap: wrap;
-
-    &-text {
-      font-weight: 400;
-      font-style: normal;
-      font-size: 16px;
-      line-height: 26px;
-      letter-spacing: 1px;
-      width: 100%;
-
-      &.resend {
-        color: var(--primary-500);
-        font-weight: bold;
-        cursor: pointer;
-      }
-    }
-  }
-}

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

@@ -1,118 +0,0 @@
-
-
-require('./skin');
-
-export default class dtk_pwsetter extends LetcBox {
-
-  /**
-   ** @param {object} opt
-  */
-  initialize(opt = {}) {
-    super.initialize(opt);
-    this.declareHandlers();
-    this.mset({ flow: _a.y })
-  }
-
-  /**
-   *
-  */
-  onDomRefresh() {
-    this.feed(require('./skeleton').default(this));
-  }
-
-  /**
-   * 
-   */
-  check() {
-    let { password, password2 } = this.getData()
-    let rate = 100 * (password.length / 20) + 5;
-    if (rate > 100) rate = 100;
-    this.__strengthGrade.el.style.width = `${rate}%`;
-    let min = 6;
-    this._isValid = 0;
-    if (password.length < min) {
-      this.__strengthState.set({ content: LOCALE.WEAK })
-      this.__strengthGrade.el.dataset.strenght = "0";
-      this.__messageText.set({ content: LOCALE.PASSWORD_AT_LEAST.format(min) });
-      this.__messageText.el.dataset.status = "error";
-    } else if (password.length <= 10) {
-      this.__strengthState.set({ content: LOCALE.STRONG })
-      this.__strengthGrade.el.dataset.strenght = "1";
-      this.__messageText.set({ content: "" })
-      this._isValid = 1;
-      this.__messageText.el.dataset.status = "normal";
-    } else {
-      this.__strengthGrade.el.dataset.strenght = "2";
-      this.__strengthState.set({ content: LOCALE.VERY_STRONG })
-      this.__messageText.set({ content: "" });
-      this._isValid = 1;
-      this.__messageText.el.dataset.status = "normal";
-    }
-    if (!password2 || password != password2) {
-      this._isValid = 0;
-    }
-    this.__topic.set({ content: LOCALE.PASSWORD_STRENGTH })
-    if (this._isValid) {
-      this.__messageIcon.el.dataset.state = "1";
-      this.__messageText.set({ content: LOCALE.PASSWORD_MATCH })
-      if (this.__commitButton) this.__commitButton.el.dataset.state = "1";
-    } else {
-      this.__messageIcon.el.dataset.state = "0";
-      if (this.__commitButton) this.__commitButton.el.dataset.state = "0";
-    }
-  }
-
-  /**
-   * 
-   * @returns 
-   */
-  isValid() {
-    return this._isValid
-  }
-
-  /**
-   * 
-   * @param {*} pw 
-   */
-  message(content, status = "normal") {
-    this.__messageText.set({ content })
-    this.__messageText.el.dataset.status = status;
-    if (status !== "normal") {
-      this.__messageIcon.el.dataset.state = "0";
-    }
-  }
-
-  /**
-   * @param {LetcBox} cmd
-   * @param {any} args
-  */
-  onUiEvent(cmd, args = {}) {
-    const service = args.service || cmd.mget(_a.service);
-    switch (service) {
-      case 'password-input':
-        this.check()
-        if (cmd.status == _e.commit) {
-          let service = this.mget(_a.service) || _e.commit;
-          this.triggerHandlers({ service })
-        } else {
-          this.triggerHandlers({ service })
-        }
-        break;
-      case _e.commit:
-        let { api, payload } = this.model.toJSON();
-        if (api) {
-          payload = { ...payload, ...this.getData() };
-          this.postService(api, { ...payload }).then((data) => {
-            this.triggerHandlers({ data })
-          }).catch((error) => {
-            this.triggerHandlers({ error })
-          })
-          return
-        }
-        break;
-      default:
-        this.triggerHandlers({ service })
-    }
-  }
-
-}

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

@@ -1,98 +0,0 @@
-const { password, button } = require("../../../skeletons");
-
-/**
-* 
-* @param {*} ui 
-* @param {*} opt 
-* @returns 
-*/
-function passmeter(ui, opt) {
-  let fig = `${ui.fig.family}`
-  let { label, haptic = 2000 } = ui.model.toJSON();
-  const form = Skeletons.Box.Y({
-    className: `${fig}__form`,
-    kids: [
-      password(ui, {
-        placeholder: LOCALE.PASSWORD,
-        name: _a.password,
-        sys_pn: _a.password,
-        interactive: 1,
-        service: 'password-input'
-      }),
-      password(ui, {
-        placeholder: LOCALE.PASSWORD_CONFIRM,
-        name: "password2",
-        sys_pn: "password2",
-        interactive: 1,
-        service: 'password-input'
-      }),
-    ]
-  })
-  let commit;
-  if (ui.mget(_a.api) && ui.mget(_a.label)) {
-    commit = button(ui, {
-      label,
-      className: `${fig}__button`,
-      priority: 'secondary full-width',
-      service: _e.commit,
-      type: _a.email,
-      sys_pn: "commit-button",
-      haptic
-    })
-  }
-  return Skeletons.Box.Y({
-    className: `${fig}__main`,
-    kids: [
-      form,
-      Skeletons.Box.Y({
-        className: `${fig}__divider`,
-        kids: [Skeletons.Box.X({
-          className: `${fig}__dashboard`,
-          kids: [
-            Skeletons.Note({
-              className: `${fig}__topic`,
-              sys_pn: "topic"
-            }),
-            Skeletons.Note({
-              className: `${fig}__strength-state`,
-              content: "",
-              sys_pn: "strength-state"
-            }),
-            Skeletons.Box.X({
-              className: `${fig}__strength-container`,
-              kids: [
-                Skeletons.Element({
-                  className: `${fig}__strength-content`,
-                  sys_pn: "strength-grade"
-                }),
-              ]
-            })
-          ]
-        }),
-        Skeletons.Box.X({
-          className: `${fig}__dashboard`,
-          kids: [
-            Skeletons.Button.Svg({
-              ico: "checked-circle",
-              className: `${fig}__message-icon`,
-              content: "",
-              sys_pn: "message-icon",
-              state: 0
-            }),
-            Skeletons.Note({
-              className: `${fig}__message-text`,
-              content: "",
-              sys_pn: "message-text"
-            }),
-          ]
-        })]
-      }),
-      commit
-    ]
-  })
-};
-
-
-
-
-export default passmeter

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

@@ -1,142 +0,0 @@
-@use '@drumee/ui-styles/src/mixins';
-@use '../../../skin' as *;
-
-.dtk-pwsetter {
-  @include dtk-butler-button;
-
-  &__ui {
-    width: 100%;
-  }
-
-  &__main {
-    font-weight: 400;
-    width: 100%;
-    font-style: normal;
-    font-size: 14px;
-    line-height: 22px;
-    text-align: center;
-    letter-spacing: 1px;
-    color: var(--neutral-600);
-    gap: var(--spacer-4);
-  }
-
-  &__topic {
-    margin-right: auto;
-  }
-
-  &__strength-state {
-    min-width: 40px;
-  }
-
-  &__dashboard {
-    padding-left: 16px;
-    padding-left: 16px;
-    align-content: center;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  &__strength-container {
-    width: 48px;
-    align-content: center;
-    flex-wrap: wrap;
-    gap: 10px;
-  }
-
-  &__strength-content {
-    height: 4px;
-    width: 0;
-    border-radius: var(--corner-radius-max);
-
-    &[data-strenght="0"] {
-      background-color: var(--red-500);
-    }
-
-    &[data-strenght="1"] {
-      background-color: var(--green-200);
-    }
-
-    &[data-strenght="2"] {
-      background-color: var(--green-400);
-    }
-  }
-
-  &__message-icon {
-    color: var(--green-400);
-    width: 16px;
-    height: 22px;
-
-    &[data-state="0"] {
-      display: none;
-    }
-  }
-
-  &__message-text {
-    align-content: center;
-    flex-wrap: wrap;
-    line-height: 22px;
-
-    &[data-status="error"] {
-      color: var(--red-500);
-    }
-  }
-
-  &__buttons,
-  &__form {
-    gap: var(--spacer-4);
-    width: 100%;
-  }
-
-  &__button-main {
-    &[data-state="0"] {
-      pointer-events: none;
-    }
-
-    &[data-state="1"] {
-      background-color: var(--primary-500);
-      color: var(--white);
-    }
-  }
-
-  &__entry-main {
-    width: 100%;
-    height: 48px;
-    border-radius: 12px;
-    padding-right: 16px;
-    padding-left: 16px;
-    border-width: 1px;
-    justify-content: center;
-    align-content: center;
-    flex-wrap: wrap;
-  }
-
-  &__entry-input {
-    &[data-status="error"] {
-      input {
-        border: 1px var(--red-600) solid;
-      }
-    }
-  }
-
-  &__entry-input {
-    input {
-      width: 100%;
-      gap: var(--spacer-4);
-      width: 100%;
-      border-radius: var(--spacer-4);
-      padding-top: 12px;
-      padding-right: 16px;
-      padding-bottom: 12px;
-      padding-left: 16px;
-      border: 1px var(--neutral-200) solid;
-    }
-
-    .entry-reminder__icon {
-      right: 5px;
-      position: absolute;
-    }
-
-    width: 100%;
-    height: 100%;
-  }
-}