feat: started updating List for MDC v10

hperrin · Mar 27, 2021 · 8bf2727 · 8bf2727
1 parent ecf16e7
commit 8bf2727
Show file tree

Hide file tree

Showing 19 changed files with 400 additions and 170 deletions.
diff --git a/packages/common/ClassAdder.svelte b/packages/common/ClassAdder.svelte
@@ -2,14 +2,16 @@
   this={component}
   use={[forwardEvents, ...use]}
   class="{smuiClass} {className}"
+  {...props}
   {...exclude($$props, ['use', 'class', 'component', 'forwardEvents'])}
 ><slot></slot></svelte:component>
 
 <script context="module">
   export const internals = {
     component: null,
     smuiClass: null,
-    contexts: {}
+    contexts: {},
+    props: {}
   };
 </script>
 
@@ -29,6 +31,7 @@
 
   const smuiClass = internals.class;
   const contexts = internals.contexts;
+  const props = internals.props;
 
   const forwardEvents = forwardEventsBuilder(get_current_component(), forwardEventsAdditional);
 

diff --git a/packages/common/Hr.svelte b/packages/common/Hr.svelte
@@ -0,0 +1,23 @@
+<hr
+  bind:this={element}
+  use:useActions={use}
+  use:forwardEvents
+  {...exclude($$props, ['element', 'use', 'forwardEvents'])}
+/>
+
+<script>
+  import { get_current_component } from 'svelte/internal';
+  import { forwardEventsBuilder } from './forwardEvents.js';
+  import { exclude } from './exclude.js';
+  import { useActions } from './useActions.js';
+
+  export let element = null;
+  export let use = [];
+  let forwardEventsAdditional = [];
+  export { forwardEventsAdditional as forwardEvents };
+
+  const forwardEvents = forwardEventsBuilder(
+    get_current_component(),
+    forwardEventsAdditional
+  );
+</script>
diff --git a/packages/common/Nav.svelte b/packages/common/Nav.svelte
@@ -0,0 +1,25 @@
+<nav
+  bind:this={element}
+  use:useActions={use}
+  use:forwardEvents
+  {...exclude($$props, ['element', 'use', 'forwardEvents'])}
+>
+  <slot />
+</nav>
+
+<script>
+  import { get_current_component } from 'svelte/internal';
+  import { forwardEventsBuilder } from './forwardEvents.js';
+  import { exclude } from './exclude.js';
+  import { useActions } from './useActions.js';
+
+  export let element = null;
+  export let use = [];
+  let forwardEventsAdditional = [];
+  export { forwardEventsAdditional as forwardEvents };
+
+  const forwardEvents = forwardEventsBuilder(
+    get_current_component(),
+    forwardEventsAdditional
+  );
+</script>
diff --git a/packages/common/classAdderBuilder.js b/packages/common/classAdderBuilder.js
@@ -1,4 +1,4 @@
-import ClassAdder, {internals} from './ClassAdder.svelte';
+import ClassAdder, { internals } from './ClassAdder.svelte';
 
 export function classAdderBuilder(props) {
   function Component(...args) {
@@ -10,11 +10,13 @@ export function classAdderBuilder(props) {
 
   // SSR support
   if (ClassAdder.$$render) {
-    Component.$$render = (...args) => Object.assign(internals, props) && ClassAdder.$$render(...args);
+    Component.$$render = (...args) =>
+      Object.assign(internals, props) && ClassAdder.$$render(...args);
   }
   if (ClassAdder.render) {
-    Component.render = (...args) => Object.assign(internals, props) && ClassAdder.render(...args);
+    Component.render = (...args) =>
+      Object.assign(internals, props) && ClassAdder.render(...args);
   }
 
   return Component;
-}
+}
diff --git a/packages/drawer/README.md b/packages/drawer/README.md
@@ -45,7 +45,7 @@ npm install --save-dev @smui/drawer
         <Text>Other</Text>
       </Item>
 
-      <Separator nav />
+      <Separator />
       <Subheader component={H6}>Starred</Subheader>
       {#each $starred as star}
         <Item href="javascript:void(0)" on:click={() => go(star.key)} activated={current === star.key}>
@@ -68,10 +68,10 @@ npm install --save-dev @smui/drawer
 
 # Demo
 
-*in action:* https://sveltematerialui.com/demo/drawer
+_in action:_ https://sveltematerialui.com/demo/drawer
 
-*demo code:* https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/drawer.svelte
+_demo code:_ https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/drawer.svelte
 
 # Exports
 
-todo...
+todo...
diff --git a/packages/list/Graphic.js b/packages/list/Graphic.js
@@ -1,8 +1,7 @@
-import {classAdderBuilder} from '@smui/common/classAdderBuilder.js';
+import { classAdderBuilder } from '@smui/common/classAdderBuilder.js';
 import Span from '@smui/common/Span.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-list-item__graphic',
   component: Span,
-  contexts: {}
-});
+});
diff --git a/packages/list/Group.js b/packages/list/Group.js
@@ -1,8 +1,7 @@
-import {classAdderBuilder} from '@smui/common/classAdderBuilder.js';
+import { classAdderBuilder } from '@smui/common/classAdderBuilder.js';
 import Div from '@smui/common/Div.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-list-group',
   component: Div,
-  contexts: {}
-});
+});
diff --git a/packages/list/Item.svelte b/packages/list/Item.svelte
@@ -1,10 +1,11 @@
 <svelte:component
   this={component}
   bind:element={element}
-  use={[[Ripple, {ripple, unbounded: false, color}], forwardEvents, ...use]}
+  use={[[Ripple, {ripple, unbounded: false, color, disabled, addClass, removeClass}], forwardEvents, ...use]}
   class="
     mdc-list-item
     {className}
+    {internalClasses.join(' ')}
     {activated ? 'mdc-list-item--activated' : ''}
     {selected ? 'mdc-list-item--selected' : ''}
     {disabled ? 'mdc-list-item--disabled' : ''}
@@ -19,7 +20,7 @@
   on:click={action}
   on:keydown={handleKeydown}
   {...exclude($$props, ['use', 'class', 'ripple', 'color', 'nonInteractive', 'activated', 'selected', 'disabled', 'tabindex', 'inputId'])}
-><slot></slot></svelte:component>
+>{#if ripple}<span class="mdc-list-item__ripple"></span>{/if}<slot></slot></svelte:component>
 
 <script context="module">
   let counter = 0;
@@ -55,6 +56,7 @@
   export let href = null;
 
   let element;
+  let internalClasses = [];
   let addTabindexIfNoItemsSelectedRaf;
   let nav = getContext('SMUI:list:item:nav');
 
@@ -91,6 +93,20 @@
     }
   });
 
+  function addClass(className) {
+    const idx = internalClasses.indexOf(className);
+    if (idx === -1) {
+      internalClasses.push(className);
+    }
+  }
+
+  function removeClass(className) {
+    const idx = internalClasses.indexOf(className);
+    if (idx !== -1) {
+      internalClasses.splice(idx, 1);
+    }
+  }
+
   function addTabindexIfNoItemsSelected() {
     // Look through next siblings to see if none of them are selected.
     let noneSelected = true;

diff --git a/packages/list/List.svelte b/packages/list/List.svelte
@@ -1,56 +1,63 @@
-{#if nav}
-  <nav
-    bind:this={element}
-    use:useActions={use}
-    use:forwardEvents
-    class="
+<svelte:component
+  this={component}
+  bind:this={element}
+  use={[forwardEvents, ...use]}
+  class="
       mdc-list
       {className}
-      {nonInteractive ? 'mdc-list--non-interactive' : ''}
+      {nonInteractive
+    ? 'mdc-list--non-interactive'
+    : ''}
       {dense ? 'mdc-list--dense' : ''}
+      {textualList
+    ? 'mdc-list--textual-list'
+    : ''}
       {avatarList ? 'mdc-list--avatar-list' : ''}
-      {twoLine ? 'mdc-list--two-line' : ''}
-      {(threeLine && !twoLine) ? 'smui-list--three-line' : ''}
+      {iconList
+    ? 'mdc-list--icon-list'
+    : ''}
+      {imageList ? 'mdc-list--image-list' : ''}
+      {thumbnailList
+    ? 'mdc-list--thumbnail-list'
+    : ''}
+      {videoList ? 'mdc-list--video-list' : ''}
+      {twoLine
+    ? 'mdc-list--two-line'
+    : ''}
+      {threeLine && !twoLine ? 'smui-list--three-line' : ''}
     "
-    on:MDCList:action={handleAction}
-    {...props}
-  ><slot></slot></nav>
-{:else}
-  <ul
-    bind:this={element}
-    use:useActions={use}
-    use:forwardEvents
-    class="
-      mdc-list
-      {className}
-      {nonInteractive ? 'mdc-list--non-interactive' : ''}
-      {dense ? 'mdc-list--dense' : ''}
-      {avatarList ? 'mdc-list--avatar-list' : ''}
-      {twoLine ? 'mdc-list--two-line' : ''}
-      {(threeLine && !twoLine) ? 'smui-list--three-line' : ''}
-    "
-    {role}
-    on:MDCList:action={handleAction}
-    {...props}
-  ><slot></slot></ul>
-{/if}
+  {role}
+  on:MDCList:action={handleAction}
+  {...props}
+>
+  <slot />
+</svelte:component>
 
 <script>
-  import {MDCList} from '@material/list';
-  import {onMount, onDestroy, getContext, setContext} from 'svelte';
-  import {get_current_component} from 'svelte/internal';
-  import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
-  import {exclude} from '@smui/common/exclude.js';
-  import {useActions} from '@smui/common/useActions.js';
-
-  const forwardEvents = forwardEventsBuilder(get_current_component(), ['MDCList:action']);
+  import { MDCList } from '@material/list';
+  import { onMount, onDestroy, getContext, setContext } from 'svelte';
+  import { get_current_component } from 'svelte/internal';
+  import { forwardEventsBuilder } from '@smui/common/forwardEvents.js';
+  import { exclude } from '@smui/common/exclude.js';
+  import { useActions } from '@smui/common/useActions.js';
+  import Ul from '@smui/common/Ul.svelte';
+  import Nav from '@smui/common/Nav.svelte';
+
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    'MDCList:action',
+  ]);
 
   export let use = [];
   let className = '';
-  export {className as class};
+  export { className as class };
   export let nonInteractive = false;
   export let dense = false;
+  export let textualList = false;
   export let avatarList = false;
+  export let iconList = false;
+  export let imageList = false;
+  export let thumbnailList = false;
+  export let videoList = false;
   export let twoLine = false;
   export let threeLine = false;
   export let vertical = true;
@@ -60,7 +67,21 @@
   export let radiolist = false;
   export let checklist = false;
 
-  $: props = exclude($$props, ['use', 'class', 'nonInteractive', 'dense', 'avatarList', 'twoLine', 'threeLine', 'vertical', 'wrapFocus', 'singleSelection', 'selectedIndex', 'radiolist', 'checklist']);
+  $: props = exclude($$props, [
+    'use',
+    'class',
+    'nonInteractive',
+    'dense',
+    'avatarList',
+    'twoLine',
+    'threeLine',
+    'vertical',
+    'wrapFocus',
+    'singleSelection',
+    'selectedIndex',
+    'radiolist',
+    'checklist',
+  ]);
 
   let element;
   let list;
@@ -71,7 +92,10 @@
   let addLayoutListener = getContext('SMUI:addLayoutListener');
   let removeLayoutListener;
 
+  export let component = nav ? Nav : Ul;
+
   setContext('SMUI:list:nonInteractive', nonInteractive);
+  setContext('SMUI:list:divider', true);
 
   if (!role) {
     if (singleSelection) {
@@ -132,7 +156,12 @@
   });
 
   function handleAction(e) {
-    if (list && list.listElements[e.detail.index].classList.contains('mdc-list-item--disabled')) {
+    if (
+      list &&
+      list.listElements[e.detail.index].classList.contains(
+        'mdc-list-item--disabled'
+      )
+    ) {
       e.preventDefault();
       list.selectedIndex = selectedIndex;
     } else if (list && list.selectedIndex === e.detail.index) {

diff --git a/packages/list/Meta.js b/packages/list/Meta.js
@@ -1,8 +1,7 @@
-import {classAdderBuilder} from '@smui/common/classAdderBuilder.js';
+import { classAdderBuilder } from '@smui/common/classAdderBuilder.js';
 import Span from '@smui/common/Span.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-list-item__meta',
   component: Span,
-  contexts: {}
-});
+});
diff --git a/packages/list/PrimaryText.js b/packages/list/PrimaryText.js
@@ -1,8 +1,7 @@
-import {classAdderBuilder} from '@smui/common/classAdderBuilder.js';
+import { classAdderBuilder } from '@smui/common/classAdderBuilder.js';
 import Span from '@smui/common/Span.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-list-item__primary-text',
   component: Span,
-  contexts: {}
-});
+});
diff --git a/packages/list/SecondaryText.js b/packages/list/SecondaryText.js
@@ -1,8 +1,7 @@
-import {classAdderBuilder} from '@smui/common/classAdderBuilder.js';
+import { classAdderBuilder } from '@smui/common/classAdderBuilder.js';
 import Span from '@smui/common/Span.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-list-item__secondary-text',
   component: Span,
-  contexts: {}
-});
+});