WIP: core 0.7 to 0.8

examples/badge.html

@@ -17,7 +17,6 @@
     </sib-auth-provider>
   </sib-auth>
 
-  <script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
   <style>
     :root{
     --sib-badge-theme: #ffd759;

examples/notifications-format-date.html

@@ -17,7 +17,7 @@
     </sib-auth-provider>
   </sib-auth>
 
-  <script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
+  <script type="module" src="https://unpkg.com/@startinblox/core@beta"></script>
   <script type="module" src="https://unpkg.com/@startinblox/router"></script>
 
   <style>

examples/notifications-routing.html

@@ -17,7 +17,7 @@
     </sib-auth-provider>
   </sib-auth>
 
-  <script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
+  <script type="module" src="https://unpkg.com/@startinblox/core@beta"></script>
   <script type="module" src="https://unpkg.com/@startinblox/router"></script>
 
   <style>
@@ -47,7 +47,7 @@
 
   <div id="project">
     <h1>Project</h1>
-    <sib-display bind-resources data-fields="name"></sib-display>
+    <sib-display bind-resources fields="name"></sib-display>
   </div>
 </body>
 </html>

examples/notifications.html

@@ -17,7 +17,7 @@
     </sib-auth-provider>
   </sib-auth>
 
-  <script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
+  <script type="module" src="https://unpkg.com/@startinblox/core@beta"></script>
   <script type="module" src="https://unpkg.com/@startinblox/router"></script>
 
   <style>

sib-badge.js

-import { SIBTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@0.7';
+import { SIBTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@beta';
 
 const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
 Helpers.importCSS(`${base_url}/css/badge.css`)
@@ -34,8 +34,8 @@ class SIBBadge extends SIBTemplateElement {
       return `
       <sib-display
         bind-user
-        id-suffix="inbox"
-        data-fields
+        nested-field="inbox"
+        fields="none"
         search-fields="unread, object"
         search-value-unread="true"
         search-value-object="${this.resourceId}"

sib-notifications.js

-import { SIBTemplateElement, store, Helpers } from 'https://unpkg.com/@startinblox/core@0.7';
+import { SIBTemplateElement, store, Helpers } from 'https://unpkg.com/@startinblox/core@beta';
 import Favico from 'https://dev.jspm.io/favico.js-slevomat';
 
 const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
@@ -27,7 +27,7 @@ class SIBNotifications extends SIBTemplateElement {
       if (unreadButton) {
         window.dispatchEvent(new CustomEvent('read', {
           detail: {
-            resource: unreadButton.closest('sib-display').resource // get resource from sib display
+            resource: unreadButton.closest('sib-display').component.resource // get resource from sib display
           }
         }));
         unreadButton.disabled = true
@@ -104,8 +104,8 @@ class SIBNotifications extends SIBTemplateElement {
     if (this.props.extraContext) {
       extraContext = JSON.parse(this.props.extraContext)
     }
-    const context = { ...target.context, ...extraContext }
-    store.get(target.resource.object, context).then((resource) => {
+    const context = { ...target.component.context, ...extraContext }
+    store.get(target.component.resource.object, context).then((resource) => {
       if (!resource) return;
       window.dispatchEvent(new CustomEvent('requestNavigation', { detail: { resource: resource } }))
       this.querySelector('details').removeAttribute("open")
@@ -113,23 +113,20 @@ class SIBNotifications extends SIBTemplateElement {
   }
 
   _updateUnread() {
-    let unread = Number(document.querySelector('#badge-unread').innerText)
+    let unread = Number(this.querySelector('#badge-unread').innerText)
     this.favicon.badge(unread)
   }
 
   _updateUI() {
     const notifications = this.querySelectorAll('#notifications-list sib-display')
     notifications.forEach(notif => {
-      if (!notif.resource.unread) notif.setAttribute('data-read', 'true') // opacity unread
+      if (!notif.component.resource.unread) notif.setAttribute('data-read', 'true') // opacity unread
     });
   }
 
   _getNotificationsList() {
     const notificationsList = this.querySelector('#notifications-list');
-    if (!notificationsList) return null;
-    if (Array.isArray(notificationsList.resource['ldp:contains']))
-      return notificationsList.resource['ldp:contains'];
-    return [notificationsList.resource['ldp:contains']];
+    return notificationsList ? notificationsList.component.resources : null;
   }
 
   _printError(error) {
@@ -158,7 +155,7 @@ class SIBNotifications extends SIBTemplateElement {
               <sib-display
                 id="unread-filter"
                 data-src="${this.resourceId}"
-                data-fields="none"
+                fields="none"
                 search-fields="unread"
                 search-value-unread="true"
                 search-widget-unread="sib-form-hidden"
@@ -171,15 +168,12 @@ class SIBNotifications extends SIBTemplateElement {
             id="notifications-list"
             class="sib-notifications__items"
             data-src="${this.resourceId}"
+            fields="unread, content(author.avatar, wrapper(author.username, source(type, object.name), date))"
             widget-unread="read-badge"
-            set-source="type, object.name"
             widget-object.name="sib-display-labelled-div"
-            label-object.name="·"
-            set-wrapper="author.username, source, date"
-            set-content="author.avatar, wrapper"
-            data-fields="unread, content"
             widget-author.avatar="sib-display-img"
             widget-date="custom-date"
+            label-object.name="·"
             paginate-by="10"></sib-display>
           </div>
         </details>