@drumee/ui-toolkit 0.0.12 → 0.0.13

package/index.js

@@ -17,3 +17,5 @@ if (document.readyState == 'complete') {
     document.addEventListener('drumee:router:ready', start);
   }
 }
+export * from './utils/index';
+export * from './utils/validator';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drumee/ui-toolkit",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "",
   "main": ".",
   "repository": {
@@ -57,6 +57,9 @@
     "webpack-stats-plugin": "^1.1.1"
   },
   "dependencies": {
-    "@drumee/ui-styles": "^1.0.1"
+    "@drumee/ui-styles": "^1.0.1",
+    "autolinker": "^4.1.5",
+    "filesize": "^11.0.13",
+    "qrcode": "^1.5.4"
   }
 }

package/utils/validator.js

@@ -1,8 +1,3 @@
-// ==================================================================== *
-//   Copyright Xialia.com  2011-2019
-//   FILE : src/drumee/core/utils
-//   TYPE : 
-// ==================================================================== *
 const identRegExp = /^([a-zA-Z0-9_\-])([a-zA-Z0-9_\.\-])([a-zA-Z0-9_\.\-])*$/;
 const hostRegExp = /^[a-zA-Z0-9_\-]+$/;
 const nameRegExp = /^([a-zA-Z0-9_\.\-\'\ xC0-\xFF])+$/;

package/skeleton/index.js

@@ -1,2 +0,0 @@
-
-export * from './menu/index';

package/skeleton/menu/index.js

@@ -1,2 +0,0 @@
-
-export * from './dropdown';

package/skeleton/menu/slide-menu.js

@@ -1,72 +0,0 @@
-const toolKitClass = "drumee-ui-toolkit-slide-menu"
-
-function buildItems(ui, flow, items) {
-  const pfx = `${ui.fig.family}__menu-items ${toolKitClass}`;
-  let kids = []
-  for (let item of items) {
-    let icon = item.ico || item.icon;
-    if (icon) {
-      let cn = item.className || "";
-      kids.push(
-        Skeletons.Button.Label({
-          ...item,
-          className: `${pfx}--item ${cn}`,
-          label: item.label || item.content || "",
-        })
-      )
-    } else {
-      kids.push(
-        Skeletons.Note({
-          ...item,
-          className: `${pfx}--item ${cn}`,
-          content: item.content || item.label || "",
-        })
-      )
-    }
-  }
-
-  return Skeletons.Box.Y({
-    debug: __filename,
-    className: `${pfx} `,
-    flow,
-    kids
-  });
-};
-
-export function slideMenu(ui, opt) {
-  let {
-    trigger,
-    persistence = _a.once,
-    service,
-    opening = _e.click,
-    sys_pn,
-    flow = _a.y,
-    axis,
-    direction = _a.down,
-    items,
-    offsetY = 0
-  } = opt;
-  trigger = trigger || Skeletons.Box.X({
-    className: `${ui.fig.family}__menu-trigger`
-  });
-  axis = axis || flow;
-
-  return Skeletons.Box.X({
-    className: `${ui.fig.family}__menu-wrapper`,
-    debug: __filename,
-    kids: [{
-      kind: KIND.menu.topic,
-      className: `${ui.fig.family}__menu-main`,
-      flow,
-      opening,
-      service,
-      sys_pn,
-      direction,
-      offsetY,
-      persistence,
-      trigger,
-      items: buildItems(items),
-    }]
-  });
-
-};

package/style/acknowledgement.scss

@@ -1,68 +0,0 @@
-&-acknowledgement {
-  &__main {
-    align-items: center;
-    background:$core-default-background;
-    border-radius: $default-border-radius;
-    height: calc(100% - 350px);
-    justify-content: center;
-    min-height: 275px;//250px;
-    min-width: 300px;
-    width: calc(100% - 350px);
-  }
-
-  &__note {
-    &.message-info {
-      @include typo($size: 16px, $line: 20px, $weight:300, $color:$core-default-text-color);
-      padding: 15px;
-    }
-
-    &.redirect-info {
-      padding: 50px 15px;
-    }
-  }
-
-  &__close {
-    color:$core-default-thinline-icon;
-    cursor: pointer;
-    margin: 10px;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    z-index: 1;
-  }
-
-  &__icon {
-    &.close {
-      color: $core-default-thinline-icon;
-      cursor: pointer;
-      height: 12px;
-      width: 12px;
-      
-      &:hover {
-        color: $core-default-thinline-icon-hover;
-      }
-    }
-
-    &.success {
-      color: $core-default-icon-success;
-      height: 26px;
-      width: 36px;
-    }
-  }
-
-  &__button-ok {
-    @include typo($size: 16px,$color: $btn-rollback-text);
-    align-items: center;
-    border-radius: $default-border-radius;
-    border: 1px solid $btn-rollback-border ;
-    height: 32px;
-    justify-content: center; 
-    margin-top: 30px;
-    width:90px;
-
-    &:hover {
-      @include typo($size: 16px,$color:$btn-rollback-text-hover);   
-      border:2px solid $btn-rollback-border-hover;
-    }
-  }
-}

package/style/dropdown.scss

@@ -1,143 +0,0 @@
-@use 'mixins/drumee';
-
-&-menu {
-  &__dropdown,
-  &__wrapper {
-    height: 100%;
-    width: 100%;
-  }
-
-  &__wrapper {
-    justify-content: center;
-    align-items: center;
-
-    & .menu-topic-trigger {
-      align-items: center;
-      height: 100%;
-      justify-content: flex-start;
-      width: 100%;
-      z-index: inherit;
-    }
-  }
-
-  &__input_wrapper {
-    align-items: center;
-    background: $core-default-block-background;
-    border-radius: $default-border-radius;
-    cursor: pointer;
-    height: 36px;
-    justify-content: space-evenly;
-    width: 200px;
-
-    & .note-reader {
-      @include typo($size: 14px, $line: 14px, $color: $core-default-text-color);
-      justify-content: center;
-      width: 100%;
-    }     
-  }
-
-  &__icon-dropdown {
-    color: $core-default-icon-neutral;
-    height: 14px;
-    position: absolute;
-    right: 10px;
-    width: 14px;
-  }
-
-  &__items-wrapper {
-    padding: 5px;
-    width: 100%;
-  }
-
-  &__wrapper {
-    &[data-state="1"] {
-      & .trigger-icon {
-        color: $core-default-icon-active;
-      }
-    }
-
-    & .menu-topic-items {
-      &__wrapper {
-        left: 5px;
-        top: calc(100% - 15px) !important;
-        padding:10px;
-      }
-      border-radius:$default-border-radius;
-      background-color: $core-default-background;    
-      box-shadow: $drumee-shadow-container;
-      max-width: 200px;
-      min-width: 190px;
-
-      &:before {
-        background-color: $core-default-background;    
-        box-shadow: -4px -6px 10px 1px rgba(63,79, 117, 0.13);
-        content: "";
-        height: 10px;
-        left: calc(100% - 16px);
-        position: absolute;
-        top: -5px;
-        transform: rotate(45deg);
-        width: 10px;
-      }
-
-      &:after {
-        background: $core-default-background;    
-        border-radius: $default-border-radius-top;
-        content: "";
-        height: 10px;
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: 100%;
-      }
-    }
-  }
-
-  &__icon {
-    align-items: center;
-    color: $core-default-icon-neutral;
-    cursor: pointer;
-
-    &.trigger-icon {
-      height: 16px;
-      width : 22px;
-    }
-  }
-
-  &__item {
-    cursor: pointer;
-    margin-bottom:  1px;
-    margin-top:  1px;
-    padding: 8px 8px 8px 10px;
-    @include typo($size: 12px, $line: 14px, $color:$core-default-text-color);
-
-    &.disable {
-      opacity: 0.4;//0.2;
-      pointer-events: none;
-      @include typo($size: 12px, $line: 14px,$weight:300,$color:$core-default-background-inactive);
-    }
-
-    &:hover {
-      background-color: $core-default-background-hover;
-      color : $core-default-text-hover ; 
-
-      & .widget-dropdown-menu-menu__note {
-        color:$core-default-text-hover; 
-      }
-      
-      & svg {
-        fill: $core-default-icon-reverse;  
-      }
-    }
-  }
-
-  &__note {
-    padding-top: 0px;
-    @include typo( $size:14px, $weight: 300, $line: 14px, $color: $core-default-text-color);
-
-    &.coming-soon {
-      opacity: 0.4;
-      padding-top: 5px;
-    }
-  }
-}

package/style/form.scss

@@ -1,283 +0,0 @@
-&-form {
-  @use './dropdown';
-
-  &__main {
-    height: 100%;
-    width: 100%;
-    align-items: center;
-  }
-
-  &__container {
-    width: 100%;
-    height: 100%;
-    justify-content: space-between;
-    align-items: center;
-    max-width: 450px;
-  }
-
-  &__content {
-    align-items: center;
-    height: 100%;
-    justify-content: center;
-    width: 100%;
-  }
-
-  &__wrapper {
-    height: 100%;
-    width: 100%;
-
-    &.acme-options {
-      &[data-mode="closed"] {
-        display: none;
-      }
-    }
-  }
-
-  &__row-wrapper {
-    @include typo($color:$core-default-text-color, $size: 16px);
-    background-color: $core-default-block-background;
-    border-radius: 6px;
-    box-sizing: border-box;
-    height: 100%;
-    margin-bottom: 18px;
-    max-height: 46px;
-    width: 100%;
-
-    &.contact.name {
-      background-color: $core-default-background;
-      gap: 10px;
-    }
-
-    &.message {
-      height: auto;
-      min-height: 100px;
-
-      & .entry-reminder__ui {
-        height: 100%;
-      }
-    }
-
-    &.terms-and-conditions {
-      justify-content: center;
-    }
-
-    &.terms-and-conditions,
-    &.ssl-dns-setup {
-      background-color: $core-default-background;
-      align-items: center;
-    }
-
-    &.acme_ssl_ca_path {
-      &[data-mode="closed"] {
-        display: none;
-      }
-    }
-  }
-
-  &__entry {
-    &.with-icon {
-      border: none;
-      height: 100%;
-      width: 100%;
-    }
-
-    &.name {
-      background-color: $core-default-block-background;
-    }
-
-    & .entry-reminder {
-      &__main {
-        &.showerror {
-          overflow: hidden;
-          padding-bottom: 14px;
-          min-height: 34px;
-        }
-
-        textarea,
-        input {
-          @include typo($size: 16px, $line: 20px, $color:$core-default-text-color);
-          background-color: $core-default-block-background;
-          border: 0;
-          border-radius: 6px;
-          flex: 1;
-          height: 100%;
-          padding-left: 10px;
-        }
-
-        textarea {
-          padding-top: 5px;
-          height: calc(100% - 7px);
-          min-height: 94px;
-          resize: none;
-          overflow: auto;
-        }
-      }
-
-      &__input-wrap,
-      &__component {
-        height: 100%;
-        width: 100%;
-      }
-    }
-
-    &[data-status="error"] {
-      border: 1px solid $core-default-border-error;
-      border-radius: 6px;
-    }
-  }
-
-  &__icon {
-    color: $core-default-icon-neutral;
-    margin: 0px 9px 0px 10px;
-    width: 18px;
-
-    &.message {
-      height: 18px;
-      margin: 0 9px 0 9px;
-      top: 6px;
-    }
-
-    &.checkbox {
-      border: 1px solid $core-default-checkbox-border;
-      border-radius: $default-checkbox-border-radius;
-      box-shadow: none;
-      color: $core-default-checkbox-background;
-      cursor: pointer;
-      height: 20px;
-      width: 20px;
-      margin: 0;
-      margin-left: 5px;
-
-      &[data-state="1"] {
-        color: $core-default-checkbox-checked;
-        border: 1px solid $core-default-checkbox-border;//$default-checkbox;
-        box-shadow: none;
-      }
-    }
-
-    &.info-icon {
-      color: $core-special-icon-info;
-      cursor: pointer;
-      height: 25px;
-      padding: 5px;
-      width: 25px;
-      position: absolute;
-      right: 5px;
-      top: 10px;
-
-      .tooltips {
-        &:before {
-          background: $core-background-tooltips;
-          border-radius: 1px;
-          content: '';
-          height: 10px;
-          position: absolute;
-          left: 70px;
-          top: -5px;
-          transform: rotate(45deg);
-          width: 10px;
-        }
-
-        background-color: $core-background-tooltips;
-        @include typo($size: 11px, $line: 15px, $color: $core-default-text-tooltips);
-        border-radius:$default-border-radius;
-        font-size: 11px;
-        width: 300px;
-        padding: 5px 10px;
-        position: absolute;
-        left: -62px;
-        top: 30px;
-        text-align: center;
-        text-align: justify;
-        text-overflow: ellipsis;
-        z-index: 200000;
-        // overflow: hidden;
-        // white-space: nowrap;
-      }
-    }
-  }
-
-  &__note {
-    &.label {
-      @include typo($size:13px, $line:16px, $color: $core-default-text-title);
-      max-width: 150px;
-      padding-left: 5px;
-      width: 100%;
-    }
-
-    &.own-ssl-label {
-      @include typo($size:16px, $line: 20px, $color: $core-default-text-title);
-      padding-left: 20px;
-      width: 100%;
-    }
-
-    &.tips {
-      @include typo($size:12px, $line:1.5, $weight:300, $color: $core-default-text-title);
-      align-items: center;
-      margin-bottom: 18px;
-      width: 40%;
-    }
-
-    &.conditions {
-      &.static {
-        @include typo($size: 14px, $line: 16px, $weight:400, $color: $core-default-text-title);
-        justify-content: center;
-        width: 75px;
-      }
-
-      &.trigger {
-        justify-content: flex-start;
-        right: 5px;
-
-        &:hover {
-          color:$eviolet;
-        }
-      }
-
-      &.text-underline {
-        @include typo($size: 14px, $line: 16px, $weight:700, $color: $core-default-text-title);
-        cursor: pointer;
-        text-decoration-line: underline;
-      }
-    }
-  }
-
-  &__button-wrapper {
-    align-items: center;
-    height: 120px;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  &__button {
-    &.button {
-      align-items: center;
-      border-radius: 6px;
-      cursor: pointer;
-      height: 46px;
-      justify-content: center;
-      width: 180px;
-    }
-
-    &.action-btn {
-      @include typo($size: 18px, $line: 28px, $color: $core-default-text-reverse);
-      align-items: center;
-      background: $core-background-btn-active;  
-
-      &:hover {
-        background-color:$btn-commit-background-hover;
-        border-color: $btn-commit-border-hover;
-      }
-    }
-
-    &.previous-btn {
-      @include typo($size: 18px, $line: 28px, $color: $btn-rollback-text);
-      border: 1px solid $btn-rollback-border;
-      
-      &:hover {
-        border:2px solid $btn-rollback-border-hover ;
-        color: $btn-rollback-text-hover;   
-      }
-    }
-  }
-}