@mirai/core 0.1.72 → 0.1.73
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.
- package/README.md +21 -1
- package/package.json +1 -1
- package/public/index.html +18 -9
- package/site/customer.css +15 -5
- package/site/index.html +6 -0
package/README.md
CHANGED
|
@@ -134,4 +134,24 @@ This component has two behaviors. If the user is not logged in, show an action b
|
|
|
134
134
|
<div data-mirai-component="session"></div>
|
|
135
135
|
```
|
|
136
136
|
|
|
137
|
-
This component supports _ghosting_.
|
|
137
|
+
This component supports _ghosting_. In that case, the component requires two different html files, one for the login and another one for the logged-in/account. Example:
|
|
138
|
+
|
|
139
|
+
```html
|
|
140
|
+
<div data-mirai-component="session">
|
|
141
|
+
<div data-ghost>
|
|
142
|
+
<p class="login">Login</p>
|
|
143
|
+
<p class="account">Account</p>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
We can also bind the elements of the session. Example:
|
|
149
|
+
|
|
150
|
+
```html
|
|
151
|
+
<div data-mirai-component="session">
|
|
152
|
+
<div data-ghost>
|
|
153
|
+
<p class="login">Login</p>
|
|
154
|
+
<p class="account">{{firstName}} - {{email}}</p>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
```
|
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -28,27 +28,36 @@
|
|
|
28
28
|
<h1>@mirai/core</h1>
|
|
29
29
|
<nav>
|
|
30
30
|
<div data-mirai-component="session"></div>
|
|
31
|
-
<div data-mirai-component="
|
|
31
|
+
<div data-mirai-component="session">
|
|
32
|
+
<div data-ghost>
|
|
33
|
+
<p class="login">Login</p>
|
|
34
|
+
<div>
|
|
35
|
+
<p class="account">{{firstName}} - {{email}}</p>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
<div data-mirai-component="bookingQuery">
|
|
40
|
+
</div>
|
|
32
41
|
<div data-mirai-component="environment" data-mobile="false"></div>
|
|
33
42
|
<div data-mirai-component="state"></div>
|
|
34
43
|
</nav>
|
|
35
44
|
</header>
|
|
36
45
|
|
|
37
|
-
<section class="finder">
|
|
38
|
-
|
|
39
|
-
</section
|
|
46
|
+
<!-- <section class="finder">
|
|
47
|
+
<div data-mirai-component="finder"></div>
|
|
48
|
+
</section>-->
|
|
40
49
|
|
|
41
50
|
<section class="deals">
|
|
42
51
|
<div data-mirai-component="deals" data-id="205800"></div>
|
|
43
52
|
</section>
|
|
44
53
|
|
|
45
|
-
<section class="profile">
|
|
54
|
+
<!--- <section class="profile">
|
|
46
55
|
<div data-mirai-component="profile"></div>
|
|
47
|
-
</section>
|
|
56
|
+
</section> ->
|
|
48
57
|
|
|
49
|
-
|
|
50
|
-
<div data-mirai-component="
|
|
51
|
-
</section>
|
|
58
|
+
<!-- <section class="booking">
|
|
59
|
+
<div data-mirai-component="booking"></div>
|
|
60
|
+
</section> -->
|
|
52
61
|
|
|
53
62
|
<footer>Mirai Tech - Copyright, 2023</footer>
|
|
54
63
|
|
package/site/customer.css
CHANGED
|
@@ -9,12 +9,12 @@ body {
|
|
|
9
9
|
padding: 0;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
.
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
.account {
|
|
13
|
+
background-color: var(--mirai-ui-content);
|
|
14
|
+
color: var(--mirai-ui-base);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
.book, .links a {
|
|
17
|
+
.account, .book, .links a, .login {
|
|
18
18
|
border: 0;
|
|
19
19
|
border-radius: 0.25rem;
|
|
20
20
|
cursor: pointer;
|
|
@@ -22,11 +22,16 @@ body {
|
|
|
22
22
|
padding: 0.5rem 1rem;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.book{
|
|
25
|
+
.book {
|
|
26
26
|
background-color: var(--mirai-ui-input-background);
|
|
27
27
|
color: var(--mirai-ui-input-color);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
.links {
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
gap: 20px;
|
|
33
|
+
}
|
|
34
|
+
|
|
30
35
|
.links a {
|
|
31
36
|
background-color: var(--mirai-ui-button-background);
|
|
32
37
|
color: var(--mirai-ui-button-color);
|
|
@@ -37,6 +42,11 @@ body {
|
|
|
37
42
|
background-color: var(--mirai-ui-button-color-hover);
|
|
38
43
|
}
|
|
39
44
|
|
|
45
|
+
.login {
|
|
46
|
+
background-color: var(--mirai-ui-input-background);
|
|
47
|
+
color: var(--mirai-ui-input-color);
|
|
48
|
+
}
|
|
49
|
+
|
|
40
50
|
header,
|
|
41
51
|
footer {
|
|
42
52
|
width: 100%;
|
package/site/index.html
CHANGED
|
@@ -18,6 +18,12 @@
|
|
|
18
18
|
<h1>@mirai/core</h1>
|
|
19
19
|
<nav>
|
|
20
20
|
<div data-mirai-component="session"></div>
|
|
21
|
+
<div data-mirai-component="session">
|
|
22
|
+
<div data-ghost>
|
|
23
|
+
<p class="login">Login Ghost</p>
|
|
24
|
+
<p class="account">Account Ghost</p>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
21
27
|
<div data-mirai-component="bookingQuery"></div>
|
|
22
28
|
<div data-mirai-component="bookingQuery">
|
|
23
29
|
<button data-ghost class="book">My Booking Ghost</button>
|