@drumee/ui-toolkit 0.0.12 → 0.0.13

package/style/index.scss

@@ -1,241 +0,0 @@
-@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

@@ -1,26 +0,0 @@
-&-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

@@ -1,151 +0,0 @@
-&-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

@@ -1,21 +0,0 @@
-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

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

package/ui-toolkit/index.js

@@ -1,19 +0,0 @@
-
-
-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

@@ -1,244 +0,0 @@
-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
-    ]
-  })
-
-}
-
-
-