feat: forward all events, and only forward when bound, and allow modi…

…fiers

README.md

@@ -84,12 +84,23 @@ Check out the [Webpack template](https://github.com/hperrin/smui-example-webpack
    </script>
    ```
 
+# Features
+
 Here are some features you should know about:
 
-- You can add arbitrary properties to all of the components and many of the elements within them.
+- You can add arbitrary attributes to all of the components and many of the elements within them.
 - You can add actions to the components with `use={[Action1, [Action2, action2Props], Action3]}`.
 - You can add props to lower components and elements with "$" props, like `input$maxlength="15"`.
-- All [standard UI and transition events](packages/common/forwardEventsBuilder.js#L4) are forwarded on components, input events ("input" and "change") are forwarded on input components, and all MDC events are forwarded.
+- **All** events are forwarded. This includes DOM events, MDC events, and custom events.
+  - You can add event modifiers with the `on:click:preventDefault:capture={handler}` syntax.
+    - If you use Svelte's native `on:click|preventDefault={handler}` syntax, it will not compile. You have to use ":" instead of "|".
+  - Supported modifiers are:
+    - preventDefault
+    - stopPropagation
+    - passive
+    - nonpassive
+    - capture
+    - once
 - Labels and icons are named exports in the components that use them, or you can use the 'Label' and 'Icon' exports from '@smui/common'. (Except for chips labels and icons, textfield icons, and select icons, because they are special snowflakes.)
 - SMUI [supports RTL languages](https://svelte.dev/repl/c2ff2d5dd5404eccb901ba04ef0161be?version=3.37.0).
 

packages/banner/Banner.svelte

@@ -80,12 +80,7 @@
   } from '@smui/common/internal.js';
   import Fixed from './Fixed.svelte';
 
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    'MDCBanner:closed',
-    'MDCBanner:closing',
-    'MDCBanner:opened',
-    'MDCBanner:opening',
-  ]);
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let use = [];
   let className = '';

packages/button/Button.svelte

@@ -61,10 +61,7 @@
   import A from '@smui/common/A.svelte';
   import Button from '@smui/common/Button.svelte';
 
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    'SMUI:banner:button:primaryActionClick',
-    'SMUI:banner:button:secondaryActionClick',
-  ]);
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let use = [];
   let className = '';

packages/checkbox/Checkbox.svelte

@@ -76,12 +76,7 @@
   } from '@smui/common/internal.js';
   import Ripple from '@smui/ripple/bare.js';
 
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    'SMUI:generic:input:mount',
-    'SMUI:generic:input:unmount',
-    'SMUI:checkbox:mount',
-    'SMUI:checkbox:unmount',
-  ]);
+  const forwardEvents = forwardEventsBuilder(get_current_component());
   let uninitializedValue = () => {};
 
   export let use = [];

packages/chips/Chip.svelte

@@ -15,14 +15,6 @@
     forwardEvents,
     ...use,
   ]}
-  forwardEvents={[
-    'MDCChipTrailingAction:interaction',
-    'MDCChipTrailingAction:navigation',
-    'SMUI:chip:primary-action:mount',
-    'SMUI:chip:primary-action:unmount',
-    'SMUI:chip:trailing-action:mount',
-    ...forwardedEvents,
-  ]}
   class={classMap({
     [className]: true,
     'mdc-chip': true,
@@ -74,19 +66,7 @@
   import Ripple from '@smui/ripple/bare.js';
   import Div from '@smui/common/Div.svelte';
 
-  const forwardedEvents = [
-    'MDCChip:interaction',
-    'MDCChip:selection',
-    'MDCChip:removal',
-    'MDCChip:trailingIconInteraction',
-    'MDCChip:navigation',
-    'SMUI:chip:mount',
-    'SMUI:chip:unmount',
-  ];
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardedEvents
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let use = [];
   let className = '';

packages/chips/Text.svelte

@@ -32,10 +32,7 @@
   } from '@smui/common/internal.js';
   import Checkmark from './Checkmark.svelte';
 
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    'SMUI:chip:primary-action:mount',
-    'SMUI:chip:primary-action:unmount',
-  ]);
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let use = [];
   let className = '';

packages/chips/TrailingAction.svelte

@@ -53,12 +53,7 @@
   } from '@smui/common/internal.js';
   import Ripple from '@smui/ripple/bare.js';
 
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    'MDCChipTrailingAction:interaction',
-    'MDCChipTrailingAction:navigation',
-    'SMUI:chip:trailing-action:mount',
-    'SMUI:chip:trailing-action:unmount',
-  ]);
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let use = [];
   let className = '';

packages/common/A.svelte

@@ -12,13 +12,8 @@
 
   export let href = 'javascript:void(0);';
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/Aside.svelte

@@ -12,13 +12,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/Button.svelte

@@ -10,13 +10,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/ClassAdder.svelte

@@ -21,7 +21,6 @@
     classMap: {},
     contexts: {},
     props: {},
-    forwardEvents: [],
   };
 </script>
 
@@ -34,8 +33,6 @@
   export let use = [];
   let className = '';
   export { className as class };
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
   let element;
   const smuiClass = internals.class;
@@ -58,10 +55,7 @@
     }
   });
 
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    ...internals.forwardEvents,
-    ...forwardEventsAdditional,
-  ]);
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   for (let context in contexts) {
     if (contexts.hasOwnProperty(context)) {

packages/common/Div.svelte

@@ -12,13 +12,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/Footer.svelte

@@ -12,13 +12,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/H1.svelte

@@ -7,13 +7,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/H2.svelte

@@ -7,13 +7,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/H3.svelte

@@ -7,13 +7,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/H4.svelte

@@ -7,13 +7,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/H5.svelte

@@ -7,13 +7,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/H6.svelte

@@ -7,13 +7,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/Header.svelte

@@ -12,13 +12,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/Hr.svelte

@@ -10,13 +10,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/I.svelte

@@ -7,13 +7,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/Img.svelte

@@ -12,13 +12,8 @@
 
   export let alt = '';
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;
 

packages/common/Li.svelte

@@ -7,13 +7,8 @@
   import { forwardEventsBuilder, useActions } from './internal.js';
 
   export let use = [];
-  let forwardEventsAdditional = [];
-  export { forwardEventsAdditional as forwardEvents };
 
-  const forwardEvents = forwardEventsBuilder(
-    get_current_component(),
-    forwardEventsAdditional
-  );
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
   let element = null;