@smui/ripple - npm Package Compare versions

Comparing version 4.2.0 to 5.0.0-beta.0

bare.js

@@ -1,2 +0,3 @@
-export * from './index.js';
-export { default } from './index.js';
+export * from './index';
+export { default } from './index';
+//# sourceMappingURL=bare.js.map

CHANGELOG.md

@@ -6,2 +6,22 @@ # Change Log
 
+# [5.0.0-beta.0](https://github.com/hperrin/svelte-material-ui/compare/v4.2.0...v5.0.0-beta.0) (2021-09-14)
+
+
+### Features
+
+* got sveltekit working local in dev ([024b19a](https://github.com/hperrin/svelte-material-ui/commit/024b19aed05718b76b027dd2e908f4734d17c060))
+* implement js builds of all ts files ([085b829](https://github.com/hperrin/svelte-material-ui/commit/085b82932f75a5c62bb4d5f709a19a8b3cbd12a4))
+* migrate banner to typescript ([dae0f3c](https://github.com/hperrin/svelte-material-ui/commit/dae0f3cb6cdb845a071f8b8bc34c7d5468dc693f))
+* migrate common and button to typescript ([cf9c6af](https://github.com/hperrin/svelte-material-ui/commit/cf9c6af17c59afc433c58245cc9444aece2195cc))
+* migrate list, checkbox, and radio to typescript ([6b475a5](https://github.com/hperrin/svelte-material-ui/commit/6b475a502daff39ba74c8ea0b29f7930bce2e46c))
+
+
+### BREAKING CHANGES
+
+* Had to rename export "default" from Button to "defaultAction".
+
+
+
+
+
 # [4.2.0](https://github.com/hperrin/svelte-material-ui/compare/v4.1.0...v4.2.0) (2021-05-05)
@@ -8,0 +28,0 @@

index.js

@@ -1,3 +0,4 @@
-import Ripple from './Ripple.js';
-
+export * from './Ripple';
+import Ripple from './Ripple';
 export default Ripple;
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "@smui/ripple",
-  "version": "4.2.0",
+  "version": "5.0.0-beta.0",
   "description": "Svelte Material UI - Ripple",
   "type": "module",
   "module": "index.js",
+  "types": "index.d.ts",
   "keywords": [
@@ -17,3 +18,6 @@ "svelte",
   "scripts": {
-    "prepare": "sass --no-source-map -I node_modules _style.scss bare.css",
+    "build": "npm run build:js && npm run build:sass",
+    "build:js": "tsc",
+    "build:sass": "sass --no-source-map -I node_modules -I ../../node_modules _style.scss bare.css",
+    "prepare": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -35,8 +39,12 @@ },
     "@material/dom": "^11.0.0",
-    "@material/ripple": "^11.0.0"
+    "@material/ripple": "^11.0.0",
+    "@smui/common": "^5.0.0-beta.0"
   },
   "devDependencies": {
-    "sass": "^1.32.8"
+    "@tsconfig/svelte": "^2.0.1",
+    "sass": "^1.32.11",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.2"
   },
-  "gitHead": "19ae8e223386d3c60daa642d631632c9e089155b"
+  "gitHead": "64f517242b78ff75df7865fc80f16d1a5c39bcaf"
 }

README.md

@@ -11,38 +11,6 @@ # Svelte Material UI - Ripple
 
-# Demo
+# Examples and Usage Information
 
-[See it in action.](https://sveltematerialui.com/demo/ripple)
+https://sveltematerialui.com/demo/ripple
 
-[See the demo code.](/site/src/routes/demo/ripple/)
-
-# Basic Usage
-
-```svelte
-If you don't have a `class` attribute:
-
-<p use:Ripple tabindex="0">Here is an element with a ripple.</p>
-
-If you do have a `class` attribute:
-
-<p
-  class="some-class {Object.keys(rippleClasses).join(' ')}"
-  use:Ripple={{
-    addClass: (className) => (rippleClasses[className] = true),
-    removeClass: (className) => {
-      delete rippleClasses[className];
-      rippleClasses = rippleClasses;
-    },
-  }}
-  tabindex="0"
->
-  Here is an element with a ripple.
-</p>
-
-<script>
-  import Ripple from '@smui/ripple';
-
-  let rippleClasses = {};
-</script>
-```
-
 # Exports
@@ -62,6 +30,6 @@
 - `disabled`: `false` - Whether the node is disabled.
-- `color`: `null` - The ripple color. ('surface', 'primary', or 'secondary')
-- `active`: `null` - Used to determine active status of the ripple. If it's null, the ":active" pseudo class will be checked on `activeTarget` or the node.
-- `eventTarget`: `null` - An alternate element where ripple triggering event listeners will be added.
-- `activeTarget`: `null` - An alternate element where active status will be checked.
+- `color`: `undefined` - The ripple color. ('surface', 'primary', or 'secondary')
+- `active`: `undefined` - Used to determine active status of the ripple. If it's undefined, the ":active" pseudo class will be checked on `activeTarget` or the node.
+- `eventTarget`: `undefined` - An alternate element where ripple triggering event listeners will be added.
+- `activeTarget`: `undefined` - An alternate element where active status will be checked.
 - `addClass`: `(className) => node.classList.add(className)` - A function to add a class to the node.
@@ -68,0 +36,0 @@ - `removeClass`: `(className) => node.classList.remove(className)` - A function to remove a class from the node.

Ripple.js

@@ -6,191 +6,131 @@ import { MDCRippleFoundation, util } from '@material/ripple';
 const { matches } = ponyfill;
-
-export default function Ripple(
-  node,
-  {
-    ripple = true,
-    surface = false,
-    unbounded = false,
-    disabled = false,
-    color = null,
-    active = null,
-    eventTarget = null,
-    activeTarget = null,
-    addClass = (className) => node.classList.add(className),
-    removeClass = (className) => node.classList.remove(className),
-    addStyle = (name, value) => node.style.setProperty(name, value),
-    initPromise = Promise.resolve(),
-  } = {}
-) {
-  let instance;
-  let addLayoutListener = getContext('SMUI:addLayoutListener');
-  let removeLayoutListener;
-  let oldActive = active;
-  let oldEventTarget = eventTarget;
-  let oldActiveTarget = activeTarget;
-
-  function handleProps() {
-    if (surface) {
-      addClass('mdc-ripple-surface');
-      if (color === 'primary') {
-        addClass('smui-ripple-surface--primary');
-        removeClass('smui-ripple-surface--secondary');
-      } else if (color === 'secondary') {
-        removeClass('smui-ripple-surface--primary');
-        addClass('smui-ripple-surface--secondary');
-      } else {
-        removeClass('smui-ripple-surface--primary');
-        removeClass('smui-ripple-surface--secondary');
-      }
+export default function Ripple(node, { ripple = true, surface = false, unbounded = false, disabled = false, color, active, eventTarget, activeTarget, addClass = (className) => node.classList.add(className), removeClass = (className) => node.classList.remove(className), addStyle = (name, value) => node.style.setProperty(name, value), initPromise = Promise.resolve(), } = {}) {
+    let instance;
+    let addLayoutListener = getContext('SMUI:addLayoutListener');
+    let removeLayoutListener;
+    let oldActive = active;
+    let oldEventTarget = eventTarget;
+    let oldActiveTarget = activeTarget;
+    function handleProps() {
+        if (surface) {
+            addClass('mdc-ripple-surface');
+            if (color === 'primary') {
+                addClass('smui-ripple-surface--primary');
+                removeClass('smui-ripple-surface--secondary');
+            }
+            else if (color === 'secondary') {
+                removeClass('smui-ripple-surface--primary');
+                addClass('smui-ripple-surface--secondary');
+            }
+            else {
+                removeClass('smui-ripple-surface--primary');
+                removeClass('smui-ripple-surface--secondary');
+            }
+        }
+        // Handle activation first.
+        if (instance && oldActive !== active) {
+            oldActive = active;
+            if (active) {
+                instance.activate();
+            }
+            else if (active === false) {
+                instance.deactivate();
+            }
+        }
+        // Then create/destroy an instance.
+        if (ripple && !instance) {
+            instance = new MDCRippleFoundation({
+                addClass,
+                browserSupportsCssVars: () => util.supportsCssVariables(window),
+                computeBoundingRect: () => node.getBoundingClientRect(),
+                containsEventTarget: (target) => node.contains(target),
+                deregisterDocumentInteractionHandler: (evtType, handler) => document.documentElement.removeEventListener(evtType, handler, applyPassive()),
+                deregisterInteractionHandler: (evtType, handler) => (eventTarget || node).removeEventListener(evtType, handler, applyPassive()),
+                deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
+                getWindowPageOffset: () => ({
+                    x: window.pageXOffset,
+                    y: window.pageYOffset,
+                }),
+                isSurfaceActive: () => active == null ? matches(activeTarget || node, ':active') : active,
+                isSurfaceDisabled: () => !!disabled,
+                isUnbounded: () => !!unbounded,
+                registerDocumentInteractionHandler: (evtType, handler) => document.documentElement.addEventListener(evtType, handler, applyPassive()),
+                registerInteractionHandler: (evtType, handler) => (eventTarget || node).addEventListener(evtType, handler, applyPassive()),
+                registerResizeHandler: (handler) => window.addEventListener('resize', handler),
+                removeClass,
+                updateCssVariable: addStyle,
+            });
+            initPromise.then(() => {
+                if (instance) {
+                    instance.init();
+                    instance.setUnbounded(unbounded);
+                }
+            });
+        }
+        else if (instance && !ripple) {
+            initPromise.then(() => {
+                if (instance) {
+                    instance.destroy();
+                    instance = undefined;
+                }
+            });
+        }
+        // Now handle event/active targets
+        if (instance &&
+            (oldEventTarget !== eventTarget || oldActiveTarget !== activeTarget)) {
+            oldEventTarget = eventTarget;
+            oldActiveTarget = activeTarget;
+            instance.destroy();
+            requestAnimationFrame(() => {
+                if (instance) {
+                    instance.init();
+                    instance.setUnbounded(unbounded);
+                }
+            });
+        }
+        if (!ripple && unbounded) {
+            addClass('mdc-ripple-upgraded--unbounded');
+        }
     }
-
-    // Handle activation first.
-    if (instance && oldActive !== active) {
-      oldActive = active;
-      if (active) {
-        instance.activate();
-      } else if (active === false) {
-        instance.deactivate();
-      }
+    handleProps();
+    if (addLayoutListener) {
+        removeLayoutListener = addLayoutListener(layout);
     }
-
-    // Then create/destroy an instance.
-    if (ripple && !instance) {
-      instance = new MDCRippleFoundation({
-        addClass,
-        browserSupportsCssVars: () => util.supportsCssVariables(window),
-        computeBoundingRect: () => node.getBoundingClientRect(),
-        containsEventTarget: (target) => node.contains(target),
-        deregisterDocumentInteractionHandler: (evtType, handler) =>
-          document.documentElement.removeEventListener(
-            evtType,
-            handler,
-            applyPassive()
-          ),
-        deregisterInteractionHandler: (evtType, handler) =>
-          (eventTarget || node).removeEventListener(
-            evtType,
-            handler,
-            applyPassive()
-          ),
-        deregisterResizeHandler: (handler) =>
-          window.removeEventListener('resize', handler),
-        getWindowPageOffset: () => ({
-          x: window.pageXOffset,
-          y: window.pageYOffset,
-        }),
-        isSurfaceActive: () =>
-          active == null ? matches(activeTarget || node, ':active') : active,
-        isSurfaceDisabled: () => !!disabled,
-        isUnbounded: () => !!unbounded,
-        registerDocumentInteractionHandler: (evtType, handler) =>
-          document.documentElement.addEventListener(
-            evtType,
-            handler,
-            applyPassive()
-          ),
-        registerInteractionHandler: (evtType, handler) =>
-          (eventTarget || node).addEventListener(
-            evtType,
-            handler,
-            applyPassive()
-          ),
-        registerResizeHandler: (handler) =>
-          window.addEventListener('resize', handler),
-        removeClass,
-        updateCssVariable: addStyle,
-      });
-
-      initPromise.then(() => {
-        instance.init();
-        instance.setUnbounded(unbounded);
-      });
-    } else if (instance && !ripple) {
-      initPromise.then(() => {
-        instance.destroy();
-        instance = null;
-      });
-    }
-
-    // Now handle event/active targets
-    if (
-      instance &&
-      (oldEventTarget !== eventTarget || oldActiveTarget !== activeTarget)
-    ) {
-      oldEventTarget = eventTarget;
-      oldActiveTarget = activeTarget;
-
-      instance.destroy();
-      requestAnimationFrame(() => {
+    function layout() {
         if (instance) {
-          instance.init();
-          instance.setUnbounded(unbounded);
+            instance.layout();
         }
-      });
     }
-
-    if (!ripple && unbounded) {
-      addClass('mdc-ripple-upgraded--unbounded');
-    }
-  }
-
-  handleProps();
-
-  if (addLayoutListener) {
-    removeLayoutListener = addLayoutListener(layout);
-  }
-
-  function layout() {
-    if (instance) {
-      instance.layout();
-    }
-  }
-
-  return {
-    update(props) {
-      ({
-        ripple,
-        surface,
-        unbounded,
-        disabled,
-        color,
-        active,
-        eventTarget,
-        activeTarget,
-        addClass,
-        removeClass,
-        addStyle,
-        initPromise,
-      } = {
-        ripple: true,
-        surface: false,
-        unbounded: false,
-        disabled: false,
-        color: null,
-        active: null,
-        eventTarget: null,
-        activeTarget: null,
-        addClass: (className) => node.classList.add(className),
-        removeClass: (className) => node.classList.remove(className),
-        addStyle: (name, value) => node.style.setProperty(name, value),
-        initPromise: Promise.resolve(),
-        ...props,
-      });
-      handleProps();
-    },
-
-    destroy() {
-      if (instance) {
-        instance.destroy();
-        instance = null;
-        removeClass('mdc-ripple-surface');
-        removeClass('smui-ripple-surface--primary');
-        removeClass('smui-ripple-surface--secondary');
-      }
-
-      if (removeLayoutListener) {
-        removeLayoutListener();
-      }
-    },
-  };
+    return {
+        update(props) {
+            ({
+                ripple,
+                surface,
+                unbounded,
+                disabled,
+                color,
+                active,
+                eventTarget,
+                activeTarget,
+                addClass,
+                removeClass,
+                addStyle,
+                initPromise,
+            } = Object.assign({ ripple: true, surface: false, unbounded: false, disabled: false, color: undefined, active: undefined, eventTarget: undefined, activeTarget: undefined, addClass: (className) => node.classList.add(className), removeClass: (className) => node.classList.remove(className), addStyle: (name, value) => node.style.setProperty(name, value), initPromise: Promise.resolve() }, props));
+            handleProps();
+        },
+        destroy() {
+            if (instance) {
+                instance.destroy();
+                instance = undefined;
+                removeClass('mdc-ripple-surface');
+                removeClass('smui-ripple-surface--primary');
+                removeClass('smui-ripple-surface--secondary');
+            }
+            if (removeLayoutListener) {
+                removeLayoutListener();
+            }
+        },
+    };
 }
+//# sourceMappingURL=Ripple.js.map

styled.js

 import './_index.scss';
-export * from './index.js';
-export { default } from './index.js';
+export * from './index';
+export { default } from './index';
+//# sourceMappingURL=styled.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52336

increased by37.72%

Number of package files

26

increased by116.67%

Lines of code

600

increased by53.85%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

4

increased by300%

Number of low quality alerts

3

increased by50%

Number of lines in readme file

41

decreased by-43.84%

Dependency changes

• + Added@smui/common@^5.0.0-beta.0

• + Added@smui/common@5.0.1(transitive)

• + Added@tsconfig/svelte@2.0.1(transitive)

• + Addedanymatch@3.1.3(transitive)

• + Addedbinary-extensions@2.3.0(transitive)

• + Addedbraces@3.0.3(transitive)

• + Addedchokidar@3.6.0(transitive)

• + Addeddedent-js@1.0.1(transitive)

• + Addedfill-range@7.1.1(transitive)

• + Addedfsevents@2.3.3(transitive)

• + Addedglob-parent@5.1.2(transitive)

• + Addedis-binary-path@2.1.0(transitive)

• + Addedis-extglob@2.1.1(transitive)

• + Addedis-glob@4.0.3(transitive)

• + Addedis-number@7.0.0(transitive)

• + Addedlower-case@2.0.2(transitive)

• + Addedno-case@3.0.4(transitive)

• + Addednormalize-path@3.0.0(transitive)

• + Addedpascal-case@3.1.2(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedreaddirp@3.6.0(transitive)

• + Addedsass@1.39.2(transitive)

• + Addedsvelte@3.59.2(transitive)

• + Addedsvelte2tsx@0.4.14(transitive)

• + Addedto-regex-range@5.0.1(transitive)

• + Addedtypescript@4.9.5(transitive)