@drumee/ui-toolkit 0.0.8 → 0.0.10

package/style/index.scss

@@ -0,0 +1,241 @@
+@use 'mixins/drumee.scss';
+@use '../window/skin/index.scss';
+@use 'topbar/topbar.scss';
+
+.perdrix-manager {
+  &__root {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__ui {
+    box-shadow: none;
+    width: 100%;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+  }
+
+  &__main {
+    width: 100%;
+    position: absolute;
+    height: 100%;
+    min-height: calc(100vh - 160px);
+  }
+
+  &__icons-list {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    max-height: calc(100vh - 160px);
+    overflow-y: auto;
+    width: 100%;
+
+    &[data-device="mobile"] {
+      padding: 0;
+    }
+
+    &[data-wait="1"] {
+      &:after {
+        content: " ";
+        display: block;
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        border: 5px solid #879bff;
+        border-color: #879bff transparent #879bff transparent;
+        animation: drumee-spinner 1.2s linear infinite;
+        margin: auto;
+        position: absolute;
+      }
+    }
+  }
+
+
+  &__icons-scroll {
+    margin: 0;
+    padding-top: 10px;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-items: center;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+  }
+
+  &__layer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    overflow: visible;
+    user-select: none;
+    z-index: 1300;
+
+    &.creating-hub {
+      .window__ui {
+        &[data-state="0"] {
+          .window__main {
+            opacity: 0.3;
+          }
+        }
+      }
+    }
+  }
+
+  &__wrapper.bug-report {
+    background-color: rgba(47 47 47 / 20%); //.2);
+    border-radius: drumee.$default-border-radius; //6px;
+    cursor: pointer;
+    height: 35px;
+    justify-content: center;
+    position: absolute;
+    right: 30px; //5px;
+    top: 30px;
+    // width: 100px;
+    z-index: 20000;
+    padding: 0 20px;
+    box-shadow: 0 2px 2px 1px rgb(63 79 117 / 13%), 0 6px 16px 0 rgb(86 65 113 / 8%), 0 2px 14px 0 rgb(194 185 203 / 0%);
+
+    &:hover {
+      background-color: drumee.$core-default-background-hover;
+      z-index: 200000;
+    }
+
+    &::before {
+      backdrop-filter: blur(27px);
+      border-radius: 6px 6px 0 0;
+      content: "";
+      cursor: pointer;
+    }
+  }
+
+  &__bug-report {
+    align-items: center;
+    cursor: pointer;
+    text-align: center;
+    @include drumee.typo($size: 14px, $line: 15px, $color: drumee.$core-default-text-reverse); //$size: 13px,
+  }
+
+  &__properties {
+    &-container {
+      background-color: drumee.$core-default-background; // core.$ewhite;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: center;
+      max-height: calc(100vh - 260px);
+      width: 600px;
+      max-width: calc(100vw - 20px);
+      padding: 35px;
+      border-radius: drumee.$default-border-radius-small; //4px;
+    }
+
+    &-content {
+      height: 100%;
+      max-height: 100%;
+      overflow-y: auto;
+    }
+
+    &-text {
+      margin: 0 auto;
+      white-space: pre-wrap;
+      @include drumee.typo($size: 12px, $line: 15px, $color: drumee.$core-default-text-color);
+    }
+  }
+
+  b {
+    font-weight: bold;
+  }
+
+  &__disk {
+    &-main {
+      width: 610px;
+      max-width: 100%;
+      position: absolute;
+      height: 380px;
+      background-color: drumee.$core-default-background ;
+      border-radius: drumee.$default-border-radius;
+      align-items: center;
+      min-height: 345px;
+      //box-shadow: $drumee-shadow-container;
+      padding-top: 60px;
+    }
+
+    &-content {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__moving-tooltips {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: auto;
+    height: auto;
+    overflow: visible;
+
+    &[data-state="1"] {
+      z-index: 100003;
+      display: flex;
+    }
+
+    &[data-state="0"] {
+      display: none;
+    }
+
+    &::before {
+      content: " ";
+      height: 20px;
+      position: absolute;
+      left: 30px;
+      top: 47px;
+      transform: rotate(45deg);
+      width: 20px;
+      z-index: 1;
+      background-color: drumee.$ewhite;
+      box-shadow: 0 0px 8px 0 rgba(63, 79, 117, .06), 0 -1px 16px 0 rgba(86, 65, 113, .1), 0 2px 14px 0 rgba(194, 185, 203, .04);
+      border: 0.5px solid lightgrey;
+    }
+
+    &[data-mode="map"]::before {
+      top: 190px;
+    }
+
+    &[data-mode="single-line"]::before {
+      top: 29px;
+    }
+
+    .location-wrapper {
+      padding: 10px;
+      background-color: drumee.$core-default-background ;
+      border-radius: drumee.$default-border-radius;
+      background: drumee.$ewhite;
+      z-index: 100;
+      box-shadow: 0 0px 8px 0 rgba(63, 79, 117, .06), 0 -1px 16px 0 rgba(86, 65, 113, .1), 0 2px 14px 0 rgba(194, 185, 203, .04);
+
+      &.map {
+        width: 420px;
+        height: 200px;
+      }
+    }
+
+    #map-container {
+      position: absolute;
+      height: 180px;
+      width: 400px;
+    }
+
+    .location-line-1,
+    .location-line-2 {
+      @include drumee.typo($size: 12px, $line: 18px, $color: drumee.$core-default-text-color);
+    }
+  }
+}

package/style/overlay-wrapper.scss

@@ -0,0 +1,26 @@
+&-overlay {
+  &__wrapper[data-mode="open"] {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    z-index: 10;
+    
+    & .content {
+      background: $core-transparency-container-overlay;
+      height: 100%;
+      position: absolute;
+      width: 100%;
+      z-index: 110;
+      border-radius: $default-border-radius-bottom;
+    }
+
+    & .overlay-notifier {
+      align-items: center;
+      height: 100%;
+      justify-content: center;
+      margin: auto;
+      position: absolute;
+      width: 100%;
+    }
+  }
+}

package/style/terms-and-conditions.scss

@@ -0,0 +1,151 @@
+&-terms-and-conditions {
+  &__main {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    z-index: 10;
+  }
+
+  &__container {
+    align-items: center;
+    background: $core-transparency-container-overlay;//$dgc-overlay-background;
+    border-radius: $default-border-radius-bottom;//0 0 6px 6px;
+    height: 100%;
+    justify-content: center;
+    position: absolute;
+    width: 100%;
+    z-index: 110;
+  }
+
+  &__content {
+    border-radius : $default-border-radius;
+    background-color: $core-default-background;  
+    box-shadow: $drumee-shadow-box;;//0 0 7px 0 rgba(0,0,0,0.14);
+    height: calc(100% - 110px);
+    width: calc( 100% - 380px);
+  }
+
+  &__header {
+    height: 50px;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__title {
+    align-items: flex-end;
+  }
+
+  &__body {
+    height: 100%;
+    padding: 25px 54px 40px 54px;
+    width: 100%;
+  }
+
+  &__body-content {
+    border-radius : $default-border-radius;
+    height: 100%;
+    width: 100%;
+  }
+
+  &__wrapper,
+  &__iframe {
+    height: 100%;
+    width: 100%;
+  }
+
+  &__iframe {
+    &::-webkit-scrollbar {
+      height: 100%;
+      width: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: $default-scrollbar-color;
+      cursor: pointer;
+    }
+  }
+
+  &__icon {
+    color: $core-default-icon-neutral;
+    cursor: pointer;
+    height: 24px;
+    width: 24px;
+
+    &.download {
+      height: 18px;
+      left: 10px;
+      top: 10px;
+      width: 18px;
+    }
+
+    &.feather {
+      height: 36px;
+      right: 8px;
+      top: 8px;
+      width: 36px;
+    }
+
+    &.close {
+      color:$core-default-thinline-icon;
+      height: 14px;
+      right: 10px;
+      top: 10px;
+      width: 14px;
+      &:hover{
+        color:$core-default-thinline-icon-hover;
+      }
+    }
+
+    &:hover {
+      color: $core-default-icon-hover;
+    }
+  }
+
+  &__note {
+    @include typo($size: 16px, $line: 18px, $color: $core-default-text-color);
+
+    &.title {
+      @include typo($size: 24px, $line: 24px, $color: $core-default-text-color);
+    }
+  }
+}
+
+// for buttons
+
+&__buttons-wrapper {
+  justify-items: center;
+  width: 100%;
+  margin: 15px auto;
+  
+  & .button {
+    border-radius : $default-border-radius;
+    @include typo($size: 16px, $line: 19px);
+    align-items:center;
+    height: 35px;
+    justify-content: center;
+    margin: 0px 0 0 12%;
+    max-width: 250px;
+    width: 100%;
+  }
+}
+
+&__button-cancel {
+  @include typo($color: $btn-rollback-text);
+  border: 1px solid $btn-rollback-border ;
+
+  &:hover {
+    border:2px solid $btn-rollback-border-hover ;
+    color: $btn-rollback-text-hover; 
+  }
+}
+
+&__button-confirm {
+  @include typo($color: $btn-commit-text);
+  background-color: $btn-commit-background;    
+  border: 1px solid $btn-commit-border;
+  
+  &:hover {
+    background-color:$btn-commit-background-hover ;
+    border-color: $btn-commit-border-hover;
+  }
+}

package/ui-toolkit/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Drumee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/ui-toolkit/README.md

@@ -0,0 +1 @@
+# ui-toolkit

package/ui-toolkit/index.js

@@ -0,0 +1,19 @@
+
+
+function start() {
+  Kind.registerAddons({
+    'dtk_otp': import('./widgets/otp'),
+    'dtk_dialog': import('./widgets/dialog'),
+    'dtk_pwsetter': import('./widgets/pwsetter'),
+  })
+}
+
+if (document.readyState == 'complete') {
+  start()
+} else {
+  if (location.hash) {
+    document.addEventListener('drumee:plugins:ready', start);
+  } else {
+    document.addEventListener('drumee:router:ready', start);
+  }
+}

package/ui-toolkit/skeletons/index.js

@@ -0,0 +1,244 @@
+const haptic = 3000;
+
+/**
+ * 
+ * @param {*} ui 
+ * @param {*} opt 
+ * @returns 
+ */
+export function button(ui, opt) {
+  let { label, ico, service, sys_pn, className, priority = "primary", type, haptic } = opt;
+  const pfx = className || `${ui.fig.group}__button`;
+  let kids = []
+  if (label) kids.push(
+    Skeletons.Element({
+      className: `${pfx} btn`,
+      content: label,
+      tagName: _K.tag.span,
+    })
+  )
+  let main = Skeletons.Box.G;
+  if (ico) {
+    let el = Skeletons.Button.Svg({
+      className: `${pfx} icon`,
+      ico,
+    })
+    if ([_a.api].includes(type)) {
+      kids.unshift(el);
+      main = Skeletons.Box.X;
+    } else if ([_a.row].includes(type)) {
+      kids.push(el)
+      main = Skeletons.Box.X;
+    } else {
+      kids.push(el)
+      main = Skeletons.Box.G;
+    }
+  }
+
+  return main({
+    className: `${pfx}-main ${priority}`,
+    partHandler: [ui],
+    uiHandler: [ui],
+    sys_pn,
+    service,
+    haptic,
+    kidsOpt: {
+      active: 0,
+    },
+    kids
+  })
+}
+
+/**
+ * 
+ * @param {*} ui 
+ * @returns 
+ */
+export function header(ui, content, tips) {
+  const fig = ui.fig.family;
+  let kids = [
+    Skeletons.Box.X({
+      className: `${fig}__logo-container`,
+      kids: [
+        Skeletons.Button.Svg({
+          ico: "raw-logo-drumee-icon",
+          className: `${fig}__logo-content`,
+        })
+      ]
+    }),
+
+    Skeletons.Box.Y({
+      className: `${fig}__text-container`,
+      kids: [
+        Skeletons.Note({
+          className: `${fig}__title`,
+          content
+        }),
+      ]
+    })
+
+  ]
+
+  if (tips) {
+    kids.push(Skeletons.Box.Y({
+      className: `${fig}__text-container`,
+      kids: [
+        Skeletons.Note({
+          className: `${fig}__tips`,
+          tips
+        }),
+      ]
+    }))
+  }
+
+  let a = Skeletons.Box.Y({
+    className: `${ui.fig.family}__header`,
+    debug: __filename,
+    kids
+  })
+  return a;
+}
+
+/**
+ * 
+ * @param {*} ui 
+ * @param {*} opt 
+ * @returns 
+ */
+export function entry(ui, opt) {
+  let { value, name, placeholder, label, sys_pn, service = _a.input, autocomplete } = opt;
+  autocomplete = autocomplete || name;
+  const pfx = `${ui.fig.family}__entry`;
+  let args = {
+    className: `${pfx}-input`,
+    name,
+    value,
+    formItem: name,
+    innerClass: name,
+    mode: _a.interactive,
+    service,
+    placeholder,
+    uiHandler: [ui],
+    autocomplete,
+    radio: ui._id
+  }
+  if (sys_pn) {
+    args.sys_pn = sys_pn;
+    args.partHandler = [ui];
+  }
+  return Skeletons.Box.Y({
+    className: `${pfx}-main`,
+    kids: [
+      Skeletons.Note({
+        className: `${pfx}-label ${name}`,
+        content: label,
+      }),
+      Skeletons.Entry(args)
+    ]
+  })
+}
+
+
+/**
+* 
+* @param {*} ui 
+* @param {*} cn 
+* @param {*} passmeter 
+* @returns 
+*/
+export function password(ui, opt) {
+  const { placeholder, interactive = 1, name, service, sys_pn } = opt;
+  const pfx = `${ui.fig.family}__entry`;
+  return Skeletons.Box.X({
+    className: `${pfx}-main`,
+    sys_pn: 'wrapper-pw',
+    partHandler: [ui],
+    kids: [
+      Skeletons.EntryBox({
+        uiHandler: [ui],
+        type: _a.password,
+        className: `${pfx}-input`,
+        service: service || _e.submit,
+        name,
+        placeholder,
+        interactive,
+        sys_pn,
+        shower: 1
+      })
+    ]
+  });
+}
+
+
+/**
+* 
+* @param {*} ui 
+* @param {*} cn 
+* @param {*} passmeter 
+* @returns 
+*/
+export function password_box(ui, opt) {
+  const fig = ui.fig.family
+  return Skeletons.Box.Y({
+    className: `${fig}__form`,
+    kids: [
+      entry(ui, {
+        placeholder: LOCALE.EMAIL,
+        name: _a.email,
+        sys_pn: _a.email,
+        service: _a.input,
+        value: ui.mget(_a.email) || ""
+      }),
+      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",
+      }),
+      { kind: 'dtk_pwsetter', sys_pn: 'pwsetter' },
+      button(ui, {
+        label: LOCALE.CREATE_ACCOUNT,
+        service: 'create-account',
+        type: _a.email,
+        sys_pn: "commit-button",
+        haptic
+      }),
+    ]
+  })
+}
+
+/**
+ * 
+ * @param {*} ui 
+ * @param {*} opt 
+ * @returns 
+ */
+export function dialog_box(ui, opt) {
+  const fig = ui.fig.family
+  const { title, message, buttons, content } = opt;
+  const Buttons = Skeletons.Box.X({
+    className: `${fig}__buttons`,
+    kids: buttons
+  })
+
+  return Skeletons.Box.Y({
+    className: `${fig}__main`,
+    debug: __filename,
+    kids: [
+      header(ui, title),
+      Skeletons.Element({ className: `${fig}__message`, content: message || LOCALE.ERROR_SERVER }),
+      content,
+      Buttons
+    ]
+  })
+
+}
+
+
+