Merge pull request #41 from Semantic-Org/fix-kebab-finally

Fix kebab finally

Author: jlukic

RELEASE-NOTES.md

@@ -4,6 +4,11 @@ This is a pre-release version and APIs will change quickly. Before `1.0` release
 
 Please note after `1.0` Semver will be followed using normal protocols.
 
+# Version 0.3.0
+
+### API Changes
+* All settings now permit attributes with either kebab or lowercased conversion. i.e. settings = { showLink: false } can be set either like `<my-component showlink>` or `<my-component show-link>` as an alias.
+
 # Version 0.2.2
 * UI: Adds new UI card component with minimal featureset
 * Bugfix: Fixed issue with SSR `<ui-button primary>` being rendered as `<ui-button primary="true">`

docs/src/components/CodePlayground/CodePlayground.js

@@ -422,7 +422,7 @@ const keys = {
 };
 
 const events = {
-  'global resize window'({state}) {
+  'global resize window'({self, state}) {
     requestAnimationFrame(self.setDisplayMode);
   },
   'change ui-menu.files'({state, data}) {

docs/src/components/MobileMenu/MobileMenu.html

@@ -5,7 +5,7 @@
         <nav-menu
           menu={previousMenu.menu}
           activeURL={activeURL}
-          expandAll=true
+          expandAll
         />
       </div>
       <div class="active content">
@@ -15,7 +15,7 @@
         <nav-menu
           menu={activeMenu.menu}
           activeURL={activeURL}
-          expandAll=true
+          expandAll
         />
         {#if hasAny previousMenu.menu}
           <div class="return">
@@ -31,7 +31,7 @@
         <nav-menu
           menu={nextMenu.menu}
           activeURL={activeURL}
-          expandAll=true
+          expandAll
         />
         <div class="return">
           <ui-icon icon="left-chevron" />

docs/src/components/Sidebar.astro

@@ -14,8 +14,8 @@ const canExpand = true;
 		client:load
     menu={menu}
     use-accordion=true
-    expand-all={expandAll}
-    active-url={Astro.url.pathname}
+    expand-all={expandAll || false}
+    activeurl={Astro.url.pathname}
   />
   <slot name="after"/>
 </sidebar>

docs/src/components/Test/component.css

@@ -1,11 +0,0 @@
-table {
-  border-collapse: collapse;
-  width: 100%;
-}
-th {
-  font-weight: var(--bold);
-  color: var(--white);
-}
-th {
-  padding: 5px 8px;
-}

docs/src/components/Test/component.html

@@ -1,27 +1 @@
-<h2>Hello World</h2>
-{#each header in headers}
-  {header}
-{/each}
-{stringify rowTemplate}
-{log headers}
-<div class="wrapper">
-  {#each row in rows}
-    <div>
-      {log rowTemplate}
-      {> template
-        name=rowTemplate
-        data=row
-      }
-    </div>
-  {/each}
-</div>
-<h2>Second</h2>
-{> template
-  name=rowTemplate
-  data={ firstName: 'johnny', lastName: 'fingers', age: 22}
-}
-<h3>Third</h3>
-
-{#each row in rows}
-  {stringify row}
-{/each}
+{firstSetting} {secondSetting}

docs/src/components/Test/component.js

@@ -1,30 +1,24 @@
 import { defineComponent } from '@semantic-ui/component';
-import { Template } from '@semantic-ui/templating';
 
 import css from './component.css?raw';
 import template from './component.html?raw';
 
 
 const settings = {
-  rowTemplate: new Template(), // user can specify a template to render the rows
-  headers: [
-    'Name',
-    'Age',
-    'Gender',
-  ],
-  rows: [
-    { firstName: 'Buck', lastName: 'Pencilsworth', age: '42', gender: 'Male' },
-  ],
+  firstSetting: true,
+  secondSetting: false,
 };
 
-const createComponent = ({self, state, settings}) => ({
-  getData() {
-    return { firstName: 'Buck', lastName: 'Pencilsworth', age: '42', gender: 'Male' };
-  },
+const createComponent = ({self, data, settings}) => ({
+  initialize() {
+    console.log('data is', data);
+    console.log('first', settings.firstSetting);
+    console.log('second', settings.secondSetting);
+  }
 });
 
-export const DynamicTable = defineComponent({
-  tagName: 'dynamic-table',
+export const SettingTest = defineComponent({
+  tagName: 'setting-test',
   template,
   css,
   settings,

docs/src/pages/test.astro

@@ -1,45 +1,14 @@
 ---
 import Body from '../layouts/Body.astro';
 
-import '../components/Test/component.js';
+import NavMenu from '@components/NavMenu/NavMenu.js';
+const menu = [];
 ---
 <Body padded>
-  <dynamic-table></dynamic-table>
-  <script>
-    import { $ } from '@semantic-ui/query';
-    import { Row } from '../components/Test/row.js';
-
-    // use same row template across instances
-
-    $('dynamic-table').settings({
-      headers: [
-        'Changed 1',
-        'Changed 2',
-        'Change 3',
-      ],
-      rowTemplate: Row,
-    });
-    // use different data for each table
-      /*
-      $('dynamic-table.one').initialize({
-        rows: [
-          { firstName: 'Buck', lastName: 'Pencilsworth', age: '42', gender: 'Male' },
-        ]
-      });
-      $('dynamic-table.two').initialize({
-        rows: [
-          { firstName: 'Chuck', lastName: 'Cheesewheel', age: '44', gender: 'Male' },
-          { firstName: 'Dotty', lastName: 'Paperclips', age: '72', gender: 'Female' },
-          { firstName: 'Biff', lastName: 'Strongarm', age: '39', gender: 'Male' },
-          { firstName: 'Pearl', lastName: 'Teacup', age: '61', gender: 'Female' },
-          { firstName: 'Skip', lastName: 'Lunchpack', age: '27', gender: 'Male' },
-          { firstName: 'Mabel', lastName: 'Clockwise', age: '84', gender: 'Female' },
-          { firstName: 'Tank', lastName: 'Steelbeam', age: '47', gender: 'Male' },
-          { firstName: 'Pip', lastName: 'Kettlewood', age: '19', gender: 'Female' },
-          { firstName: 'Buzz', lastName: 'Lampshade', age: '36', gender: 'Male' },
-          { firstName: 'Flo', lastName: 'Watercooler', age: '55', gender: 'Female' }
-        ]
-      });*/
-  </script>
-
+  <NavMenu
+    menu={menu}
+    use-accordion=true
+    expand-all=true
+    activeurl={Astro.url.pathname}
+  />
 </Body>

packages/component/src/define-component.js

@@ -113,8 +113,32 @@ export const defineComponent = ({
         super.connectedCallback();
       }
 
+      triggerAttributeChange() {
+        each(webComponent.properties, (propSettings, property) => {
+          const attribute = camelToKebab(property);
+
+          let newValue = this[property];
+          // this is necessary to handle how lit handles boolean attributes
+          // otherwise you get <ui-button primary="true">
+          if(!propSettings.alias && newValue === true) {
+            this.setAttribute(attribute, '');
+          }
+          adjustPropertyFromAttribute({
+            el: this,
+            attribute,
+            properties: webComponent.properties,
+            attributeValue: newValue,
+            componentSpec
+          });
+        });
+      }
+
       willUpdate() {
-        super.willUpdate();
+        if(isServer) {
+          // property change callbacks wont call on SSR
+          // we need this to get proper settings for server render
+          this.triggerAttributeChange();
+        }
         if(!this.template) {
           this.template = litTemplate.clone({
             data: this.getData(),
@@ -128,25 +152,7 @@ export const defineComponent = ({
           this.component = this.template.instance;
           this.dataContext = this.template.data;
         }
-        // property change callbacks wont call on SSR
-        if(isServer) {
-          each(webComponent.properties, (propSettings, property) => {
-            let newValue = this[property];
-            const attribute = camelToKebab(property);
-
-            // this is necessary to handle how lit handles boolean attributes
-            // otherwise you get <ui-button primary="true">
-            if(newValue === true) {
-              this.setAttribute(attribute, '');
-            }
-            adjustPropertyFromAttribute({
-              el: this,
-              attribute,
-              attributeValue: newValue,
-              componentSpec
-            });
-          });
-        }
+        super.willUpdate();
       }
 
       firstUpdated() {
@@ -178,6 +184,7 @@ export const defineComponent = ({
           el: this,
           attribute,
           attributeValue: newValue,
+          properties: webComponent.properties,
           componentSpec
         });
         this.call(onAttributeChanged, { args: [attribute, oldValue, newValue], });

packages/component/src/helpers/adjust-property-from-attribute.js

@@ -1,4 +1,4 @@
-import { get, each, unique, firstMatch, inArray, isString, kebabToCamel, camelToKebab } from '@semantic-ui/utils';
+import { get, each, unique, firstMatch, inArray, isString, kebabToCamel } from '@semantic-ui/utils';
 
 /*
   Semantic UI supports 3 dialects to support this we
@@ -40,13 +40,14 @@ const tokenizeSpaces = (string) => {
   - The option is the attribute "primary" or "primary=true"
   - The option is a class class="primary"
 */
-export const adjustPropertyFromAttribute = ({el, attribute, attributeValue, componentSpec}) => {
+export const adjustPropertyFromAttribute = ({el, attribute, attributeValue, properties, componentSpec}) => {
   // This is used to search for potential values that should match to the canonical value.
   // This is because we support swapping ordering and spaces for dashes
 
   // note "optionAttributeValue" is the value of the option attribute i.e. "somevalue" here
   // i.e <ui-button left-attached="somevalue">
 
+
   const checkSpecForAllowedValue = ({attribute, optionValue, optionAttributeValue }) => {
 
     // "arrow down" -> arrow-down
@@ -193,5 +194,25 @@ export const adjustPropertyFromAttribute = ({el, attribute, attributeValue, comp
       }
     }
   }
+  else if(properties && attributeValue !== undefined && attribute.includes('-')) {
+
+    /* This handles the case of multiword properties like `useAccordion`
+       maps to <ui-menu use-accordion> or <ui-menu useaccordion>
+       the kebab case is just an alias which will update the base setting
+    */
+    const propertyName = kebabToCamel(attribute);
+    const attributeSettings = properties[attribute];
+    if(propertyName !== attribute && attributeSettings?.alias) {
+      const convertFunc = attributeSettings?.converter?.fromAttribute;
+      let propertyValue = (convertFunc)
+        ? convertFunc(attributeValue)
+        : attributeValue
+      ;
+      if(propertyValue) {
+        setProperty(propertyName, propertyValue);
+      }
+      return;
+    }
+  }
 
 };