update: WIP sib-core 0.8

src/dependencies.pug

@@ -1,4 +1,4 @@
-script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6")
+script(type="module" src="https://unpkg.com/@startinblox/oidc@0.7")
 script(src="/scripts/index.js")
 
 //- Stylesheets
@@ -7,19 +7,18 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
 
 //- local
-//- script(type="module" src="/lib/sib-core/src/index.js")
 //- script(type="module" src="/lib/sib-router/src/index.js")
 //- script(type="module" src="/lib/sib-chat/sib-chat.js")
 //- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
 //- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
 //- script(type="module" src="/lib/sib-directory/sib-directory.js")
-//- script(type="module" src="/lib/sib-job-board/sib-job-board.js")
+//- script(type="module" src="/lib/sib-joboffers/sib-job-board.js")
 
 //- CDN
-script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
+script(type="module" src="https://unpkg.com/@startinblox/core@0.8")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.7")
-script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
+//- script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.2")
-script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2")
+script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3")
-script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-directory@beta")
-script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-job-board@beta")

src/header.pug

@@ -8,7 +8,7 @@
 //-   i#close-search-icon.icon-close(aria-hidden='true')
 
 sib-notifications(
-  id-suffix="inbox"
+  nested-field="inbox"
   bind-user
 )
 
@@ -17,7 +17,7 @@ include templates/hd-user-avatar.pug
 details#user-controls
   summary(tabindex='0' role='button')
     sib-display#user-controls__profile(
-      data-fields='first_name, account.picture'
+      fields='first_name, account.picture'
       widget-account.picture='hd-user-avatar'
       bind-user
     )

src/menu-left.pug

@@ -23,8 +23,7 @@ nav#main__menu
       div.sub-menu.menu-notification
         sib-display(
           data-src=`${endpoints.projects}`
-          data-fields='project, badge'
+          fields='project(customer.name, dash, name), badge'
-          set-project='customer.name, dash, name'
           value-dash=' - '
           widget-badge='hd-counter'
           action-badge='badge'
@@ -41,7 +40,7 @@ nav#main__menu
       //- div.sub-menu
       //-   sib-display(
       //-     data-src=`${endpoints.circles}`,
-      //-     data-fields='name',
+      //-     fields='name',
       //-     widget-name='sib-display-div',
       //-     next='circle'
       //-   )
@@ -56,7 +55,7 @@ nav#main__menu
       div.sub-menu.menu-notification
         sib-display(
           data-src=`${endpoints.users}`
-          data-fields='username, badge'
+          fields='username, badge'
           widget-username='sib-display-div'
           widget-badge='hd-counter'
           action-badge='badge'

src/page-circle-create.pug

@@ -7,7 +7,7 @@
     range-owner=`${endpoints.users}`, 
     range-team=`${endpoints.users}`
     
-    data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
+    fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
 
     label-name="Channel's name",
     label-description='Description',
@@ -22,5 +22,5 @@
 
     widget-description='sib-form-textarea',
     widget-jabberRoom='sib-form-checkbox',
-    widget-team='sib-form-multiple-dropdown'
   )
+    //- widget-team='sib-form-multiple-dropdown'

src/page-circle-edit.pug

@@ -2,8 +2,8 @@
   h1 Edit group
   sib-form.block(
     range-owner=`${endpoints.users}`,
-    data-fields="name, description, owner, team, jabberID, jabberRoom"
+    fields="name, description, owner, team, jabberID, jabberRoom"
     range-team=`${endpoints.users}`,
-    widget-team='sib-form-multiple-dropdown',
     bind-resources
   )
+    //- widget-team='sib-form-multiple-dropdown',

src/page-circle-profile.pug

@@ -1,24 +1,20 @@
 .content-box.with-padding.full-width
   h2 Channel's name:
   sib-display(
-    data-fields='name',
+    fields='name',
     bind-resources
   )
 
   h2 Description:
   sib-display(
-    data-fields='description',
+    fields='description',
     bind-resources
   )
 
   h2 In group:
   sib-display.block-group(
-    id-suffix='team',
+    nested-field='team',
-    data-fields='teammate-img, teammate-name, teammate-pseudonym, teammate-profile, teammate-contact',
+    fields='teammate-img(account.picture), teammate-name(name), teammate-pseudonym(before-pseudo, username), teammate-profile, teammate-contact',
-
-    set-teammate-img='account.picture',
-    set-teammate-pseudonym='before-pseudo, username',
-    set-teammate-name='name',
 
     template-teammate-contact='chat-link',
 

src/page-job-offer-create.pug

@@ -14,7 +14,7 @@
     data-src=`${endpoints.joboffers}`
     range-skills=`${endpoints.skills}`
 
-    data-fields='title, title-text, description, description-text, skills, closingDate'
+    fields='title, title-text, description, description-text, skills, closingDate'
 
     class-title='field form-label is-light is-expanded'
     label-title='Title*'

src/page-job-offer-edit.pug

@@ -5,7 +5,7 @@
     bind-resources
     range-skills=`${endpoints.skills}`
 
-    data-fields='title, description, skills, closingDate'
+    fields='title, description, skills, closingDate'
 
     class-title='field form-label is-light is-expanded'
     label-title='Title*'

src/page-project-create.pug

@@ -7,20 +7,17 @@
     range-members=`${endpoints.users}`,
     range-team=`${endpoints.users}`,
 
-    data-fields='block-project__info, block-project__fee, block-project__customer',
+    fields='block-project__info(customer.name, name, customer.logo, description), block-project__fee(fieldset-fee, businessProvider, businessProviderFee), block-project__customer(fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone)',
 
-    set-block-project__info='customer.name, name, customer.logo, description',
     label-customer.name='Customer\'s name',
     label-name='Project\'s name',
     label-customer.logo='Customer\'s logo',
     label-description='Project description',
     
-    set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
     widget-fieldset-fee='hd-template-project-title',
     label-businessProvider='Business provider',
     label-businessProviderFee='Amount of the contribution',
     
-    set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
     widget-fieldset-customer='hd-template-project-title',
     label-customer.companyRegister='Company register',
     label-customer.address='Address',

src/page-project-drive.pug

@@ -6,6 +6,6 @@ sib-widget(name='hd-drive')
 .content-box.with-padding.full-width.chat-view
     sib-display(
         bind-resources=""
-        data-fields="driveID"
+        fields="driveID"
         widget-driveID='hd-drive'
     )

src/page-project-edit.pug

@@ -13,7 +13,7 @@
       sib-form.team.is-horizontal(
         naked,
         data-src='${id}',
-        data-fields='user.name, name',
+        fields='user.name, name',
         range-user.name=`${endpoints.users}`,
         class-name='field',
         class-user.name='field',
@@ -22,15 +22,13 @@
       )
 
   sib-form.block(
-    data-fields='block-project__info, block-project__fee, block-project__customer, block-project__team',
+    fields='block-project__info(customer.name, name, customer.logo, description), block-project__fee(fieldset-fee, businessProvider, businessProvider.fee), block-project__customer(fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone), block-project__team(fieldset-team, members)',
 
-    set-block-project__info='customer.name, name, customer.logo, description',
     label-customer.name='Customer\'s name',
     label-name='Project\'s name',
     label-customer.logo='Customer\'s logo',
     label-description='Project description',
 
-    set-block-project__fee='fieldset-fee, businessProvider, businessProvider.fee',
     range-businessProvider=`${endpoints.businessproviders}`,
     label-businessProvider='Business provider',
     label-businessProvider.fee='Amount of the contribution (%)',
@@ -38,7 +36,6 @@
     widget-businessProvider.fee='sib-form-number',
     label-fieldset-fee='Fee',
 
-    set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
     label-customer.companyRegister='Company registration number',
     label-customer.address='Address',
     label-customer.firstName='Name of the contact at the customer\'s premises',
@@ -49,7 +46,6 @@
     widget-fieldset-customer='hd-template-project-title',
     label-fieldset-customer='Customer information',
 
-    set-block-project__team='fieldset-team, members',
     label-fieldset-team='The team',
     widget-fieldset-team='hd-template-project-title',
     widget-members='template-members',

src/page-project-profile.pug

@@ -5,28 +5,21 @@
   include templates/template-team.pug
 
   sib-display(
-    data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
+    fields='block-title(const-title1, number, customer.name, const-title2, name, entitled, creationDate), infos(block-description(label-description, description), block-logo(customer.logo)), block-lead, block-fee(label-fee, businessProvider), block-customer(label-customer, customer), block-team(label-team, members)',
     
-    set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
     value-const-title1='N°',
     value-const-title2='-',
     value-entitled='Creation date:'
 
-    set-infos='block-description, block-logo',
-    set-block-description='label-description, description',
-    set-block-logo='customer.logo',
     value-label-description='DESCRIPTION:',
     widget-customer.logo='sib-display-img',
 
-    set-block-fee='label-fee, businessProvider',
     value-label-fee='FEE:',
     widget-businessProvider='template-business-provider'
 
-    set-block-customer='label-customer, customer',
     value-label-customer='CUSTOMER INFORMATIONS:',
     widget-customer='customer-template',
     
-    set-block-team='label-team, members',
     value-label-team='TEAM:',
     widget-members='team-template',
     multiple-members='',

src/page-user-profile.pug

@@ -6,15 +6,14 @@ include templates/template-groups.pug
 
     sib-display.avatar-display(
       bind-user=''
-      data-fields='account.picture'
+      fields='account.picture'
       label-account.picture=''
       widget-account.picture='sib-display-img'
     )
     
     sib-display.name-diplay(
       bind-user=''
-      data-fields='user-name-groups, username'
+      fields='user-name-groups(name, groups), username'
-      set-user-name-groups='name, groups'
 
       class-name='name'
 
@@ -27,13 +26,7 @@ include templates/template-groups.pug
 
     sib-form.info-form(
       bind-user=''
-      data-fields='profile.bio, inline-1, inline-2, inline-3, account.picture, instruction'
+      fields='profile.bio, inline-1(profile.city, email), inline-2(profile.phone, profile.website), inline-3(profile.available), account.picture, instruction'
-
-      set-inline-1='profile.city, email'
-
-      set-inline-2='profile.phone, profile.website'
-
-      set-inline-3='profile.available'
 
       class-profile.bio='form-label is-light'
       label-profile.bio='short description'
@@ -63,7 +56,7 @@ include templates/template-groups.pug
     sib-form(
       bind-user=''
       range-skills=`${endpoints.skills}`
-      data-fields='skills'
+      fields='skills'
 
       class-skills='form-label is-dark'
       label-skills='Your main skills (4 max.):'

src/scripts/index.js

@@ -36,14 +36,14 @@ document.addEventListener('DOMContentLoaded', function (event) {
   });
 
   //- Header login hide/show
-  if(document.querySelector('sib-auth').getUser() !== null) {
+  // if(document.querySelector('sib-auth').getUser() !== null) {
-    document.querySelector('button[role="log in"]').style.display = 'none';
+  //   document.querySelector('button[role="log in"]').style.display = 'none';
-    //- Token expired, hack for ask relogin
+  //   //- Token expired, hack for ask relogin
-    if(new Date(document.querySelector('sib-auth').getUser().expires_at*1000) <= new Date()) {
+  //   if(new Date(document.querySelector('sib-auth').getUser().expires_at*1000) <= new Date()) {
-      document.querySelector('button[role="log in"]').style.display = '';
+  //     document.querySelector('button[role="log in"]').style.display = '';
-      document.querySelector('button[role="log in"]').style.color = 'red';
+  //     document.querySelector('button[role="log in"]').style.color = 'red';
-      document.querySelector('button[role="log in"]').innerHTML = 'Re-login';
+  //     document.querySelector('button[role="log in"]').innerHTML = 'Re-login';
-    }
+  //   }
-  }
+  // }
 
 });

src/styles/base/menu-left.scss

@@ -105,7 +105,7 @@
             padding: 10px 10px 10px 32px;
           }         
     
-          div[name='project'] {
+          sib-route[name='project'] {
             display: flex;
             flex: 3;
 
@@ -114,7 +114,7 @@
               height: 20px;
             }
     
-            sib-display-div[name='dash'] {
+            sib-display-value[name='dash'] {
               margin: 0 0.4em;
             }
           }

src/styles/layout/circle-profile/circle-profile.scss

@@ -29,7 +29,7 @@
 	      top: -2px;
       }
 
-      > div[name='teammate-img'] {
+      > sib-set-default[name='teammate-img'] {
         background-color: $color-215-9-73;
         border-radius: 50%;
         grid-column: 1 / span 2;
@@ -47,12 +47,12 @@
         }
       }
 
-      div[name='teammate-name'] {
+      sib-set-default[name='teammate-name'] {
         grid-column: 3 / span 2;
         grid-row: 1 / span 1;
       }
 
-      > div[name='teammate-pseudonym'] {
+      > sib-set-default[name='teammate-pseudonym'] {
         align-self: start;
         font-size: 1.2rem;
         grid-column: 3 / span 2;

src/styles/layout/members/member-profile.scss

@@ -11,7 +11,7 @@
 
     .member-bio {
 
-      div[name='member-profile__bio'] {
+      sib-set-default[name='member-profile__bio'] {
         display: grid;
         grid-gap: 1rem;
         grid-template-areas: "avatar name status"
@@ -20,7 +20,7 @@
           "avatar list button";
         grid-template-columns: 1fr 2fr 1fr;
 
-        div[name='member-img'] {
+        sib-set-default[name='member-img'] {
           grid-area: avatar;
           overflow: hidden;
           position: relative;
@@ -35,7 +35,7 @@
           }
         }
 
-        div[name='member-profile'] {
+        sib-set-default[name='member-profile'] {
           align-items: baseline;
           align-self: end;
           display: flex;
@@ -51,7 +51,7 @@
           grid-area: bio;
         }
 
-        div[name='infos'] {
+        sib-set-default[name='infos'] {
           grid-area: list;
 
           @extend %member-info;

src/styles/layout/members/members.scss

@@ -146,7 +146,7 @@ member-info-groups {
           }
         }
 
-        div[name='header'] {
+        sib-set-default[name='header'] {
           border-bottom: 1px solid $color-210-25-95;
           display: flex;
           flex-direction: column;
@@ -207,7 +207,7 @@ member-info-groups {
           }
         }
 
-        div[name='infos'] {
+        sib-set-default[name='infos'] {
           padding: 0 1.7rem;
 
           @extend %member-info;

src/templates/template-team.pug

@@ -4,14 +4,14 @@ sib-widget(name='team-template')
   template
     sib-display(
       data-src="${value.user['@id']}"
-      data-fields='account.picture',
+      fields='account.picture',
       widget-account.picture='hd-user-avatar'
     )
     div(name='user.thumb')
       span ${value.user.name}
       sib-display(
         data-src="${value.user.groups['@id']}",
-        data-fields='name',
+        fields='name',
         multiple-name
       )
     span ${value.name}