@drumee/ui-toolkit 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/skin/index.scss +4 -0
  3. package/widgets/dialog/skeleton/index.js +7 -4
  4. package/widgets/pwsetter/index.js +20 -2
  5. package/widgets/pwsetter/skeleton/index.js +53 -40
  6. package/widgets/pwsetter/skin/index.scss +17 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drumee/ui-toolkit",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "",
5
5
  "main": ".",
6
6
  "repository": {
package/skin/index.scss CHANGED
@@ -142,6 +142,10 @@
142
142
  }
143
143
  }
144
144
 
145
+ &.full-width {
146
+ width: 100%;
147
+ }
148
+
145
149
  &.secondary {
146
150
  justify-content: center;
147
151
  background-color: var(--neutral-200);
package/widgets/dialog/skeleton/index.js CHANGED
@@ -3,10 +3,13 @@ const { header } = require("../../../skeletons")
3
3
  export default function (ui) {
4
4
  const fig = ui.fig.family
5
5
  const { title, message, buttons, body } = ui.model.toJSON()
6
- const Buttons = Skeletons.Box.X({
7
- className: `${fig}__buttons`,
8
- kids: buttons
9
- })
6
+ let Buttons = null;
7
+ if (buttons) {
8
+ Buttons = Skeletons.Box.X({
9
+ className: `${fig}__buttons`,
10
+ kids: buttons
11
+ })
12
+ }
10
13
  if (message == null) message = '';
11
14
  let a = Skeletons.Box.Y({
12
15
  className: `${fig}__main`,
package/widgets/pwsetter/index.js CHANGED
@@ -49,11 +49,16 @@ export default class dtk_pwsetter extends LetcBox {
49
49
  this.__messageText.el.dataset.status = "normal";
50
50
  }
51
51
  this.debug("AAA:PWSETTER", { password, password2 })
52
- if (password2 && password == password2) {
52
+ if (!password2 || password != password2) {
53
+ this._isValid = 0;
54
+ }
55
+ if (this._isValid) {
53
56
  this.__messageIcon.el.dataset.state = "1";
57
+ this.__commitButton.el.dataset.state = "1";
54
58
  this.__messageText.set({ content: LOCALE.PASSWORD_MATCH })
55
- }else{
59
+ } else {
56
60
  this.__messageIcon.el.dataset.state = "0";
61
+ this.__commitButton.el.dataset.state = "0";
57
62
  }
58
63
  }
59
64
 
@@ -85,6 +90,19 @@ export default class dtk_pwsetter extends LetcBox {
85
90
  case 'password-input':
86
91
  this.check()
87
92
  break;
93
+ case _e.commit:
94
+ let { api, payload } = this.model.toJSON();
95
+ if (api) {
96
+ payload = { ...payload, ...this.getData() };
97
+ this.postService(api, { ...payload }).then((data) => {
98
+ this.debug("AAA:PWSETTER SUBMITED", data)
99
+ this.triggerHandlers()
100
+ }).catch((err) => {
101
+ this.debug("AAA:PWSETTER SUBMIT ERROR", err)
102
+ this.triggerHandlers()
103
+ })
104
+ }
105
+ break;
88
106
  default:
89
107
  this.triggerHandlers({ service })
90
108
  }
package/widgets/pwsetter/skeleton/index.js CHANGED
@@ -1,4 +1,4 @@
1
- const { password } = require("../../../skeletons");
1
+ const { password, button } = require("../../../skeletons");
2
2
 
3
3
  /**
4
4
  *
@@ -8,6 +8,7 @@ const { password } = require("../../../skeletons");
8
8
  */
9
9
  function passmeter(ui, opt) {
10
10
  let fig = `${ui.fig.family}`
11
+ let { label, haptic = 2000 } = ui.model.toJSON();
11
12
  const form = Skeletons.Box.Y({
12
13
  className: `${fig}__form`,
13
14
  kids: [
@@ -31,46 +32,58 @@ function passmeter(ui, opt) {
31
32
  className: `${fig}__main`,
32
33
  kids: [
33
34
  form,
34
- Skeletons.Box.X({
35
- className: `${fig}__dashboard`,
36
- kids: [
37
- Skeletons.Element({
38
- className: `${fig}__topic`,
39
- content: LOCALE.PASSWORD_STRENGTH
40
- }),
41
- Skeletons.Note({
42
- className: `${fig}__strength-state`,
43
- content: "",
44
- sys_pn: "strength-state"
45
- }),
46
- Skeletons.Box.X({
47
- className: `${fig}__strength-container`,
48
- kids: [
49
- Skeletons.Element({
50
- className: `${fig}__strength-content`,
51
- sys_pn: "strength-grade"
52
- }),
53
- ]
54
- })
55
- ]
35
+ Skeletons.Box.Y({
36
+ className: `${fig}__divider`,
37
+ kids: [Skeletons.Box.X({
38
+ className: `${fig}__dashboard`,
39
+ kids: [
40
+ Skeletons.Element({
41
+ className: `${fig}__topic`,
42
+ content: LOCALE.PASSWORD_STRENGTH
43
+ }),
44
+ Skeletons.Note({
45
+ className: `${fig}__strength-state`,
46
+ content: "",
47
+ sys_pn: "strength-state"
48
+ }),
49
+ Skeletons.Box.X({
50
+ className: `${fig}__strength-container`,
51
+ kids: [
52
+ Skeletons.Element({
53
+ className: `${fig}__strength-content`,
54
+ sys_pn: "strength-grade"
55
+ }),
56
+ ]
57
+ })
58
+ ]
59
+ }),
60
+ Skeletons.Box.X({
61
+ className: `${fig}__dashboard`,
62
+ kids: [
63
+ Skeletons.Button.Svg({
64
+ ico: "checked-circle",
65
+ className: `${fig}__message-icon`,
66
+ content: "",
67
+ sys_pn: "message-icon",
68
+ state: 0
69
+ }),
70
+ Skeletons.Note({
71
+ className: `${fig}__message-text`,
72
+ content: "",
73
+ sys_pn: "message-text"
74
+ }),
75
+ ]
76
+ })]
77
+ }),
78
+ button(ui, {
79
+ label,
80
+ className: `${fig}__button`,
81
+ priority: 'secondary full-width',
82
+ service: _e.commit,
83
+ type: _a.email,
84
+ sys_pn: "commit-button",
85
+ haptic
56
86
  }),
57
- Skeletons.Box.X({
58
- className: `${fig}__dashboard`,
59
- kids: [
60
- Skeletons.Button.Svg({
61
- ico: "checked-circle",
62
- className: `${fig}__message-icon`,
63
- content: "",
64
- sys_pn: "message-icon",
65
- state: 0
66
- }),
67
- Skeletons.Note({
68
- className: `${fig}__message-text`,
69
- content: "",
70
- sys_pn: "message-text"
71
- }),
72
- ]
73
- })
74
87
  ]
75
88
  })
76
89
  };
package/widgets/pwsetter/skin/index.scss CHANGED
@@ -1,4 +1,9 @@
1
+ @use '@drumee/ui-styles/src/mixins';
2
+ @use '../../../skin' as *;
3
+
1
4
  .dtk-pwsetter {
5
+ @include dtk-butler-button;
6
+
2
7
  &__ui {
3
8
  width: 100%;
4
9
  }
@@ -12,6 +17,7 @@
12
17
  text-align: center;
13
18
  letter-spacing: 1px;
14
19
  color: var(--neutral-600);
20
+ gap: var(--spacer-4);
15
21
  }
16
22
 
17
23
  &__topic {
@@ -79,7 +85,17 @@
79
85
  &__form {
80
86
  gap: var(--spacer-4);
81
87
  width: 100%;
82
- margin-bottom: var(--spacer-4);
88
+ }
89
+
90
+ &__button-main {
91
+ &[data-state="0"] {
92
+ pointer-events: none;
93
+ }
94
+
95
+ &[data-state="1"] {
96
+ background-color: var(--primary-500);
97
+ color: var(--white);
98
+ }
83
99
  }
84
100
 
85
101
  &__entry-main {