Add Masks

Author: SauravKanchan

src/MDBMask.svelte

@@ -0,0 +1,21 @@
+<script>
+  import {clean, clsx, forwardEventsBuilder, getColorClass} from './utils';
+  import {current_component} from 'svelte/internal';
+
+  const forwardEvents = forwardEventsBuilder(current_component);
+
+
+  let className = '';
+  export {className as class};
+  let elementClasses;
+  export let pattern;
+  export let overlay;
+  const props = clean($$props, ["color", "overlay", "pattern"]);
+
+  $: elementClasses = clsx(className, 'mask', pattern && `pattern-${pattern}`, overlay && `rgba-${overlay}`)
+
+</script>
+
+<div use:forwardEvents {...props} class={elementClasses}>
+  <slot/>
+</div>

src/MDBView.svelte

@@ -0,0 +1,44 @@
+<script>
+  import {clean, clsx, forwardEventsBuilder, getColorClass} from './utils';
+  import {current_component} from 'svelte/internal';
+
+  const forwardEvents = forwardEventsBuilder(current_component);
+
+
+  let className = '';
+  export {className as class};
+  let elementClasses;
+  export let zoom;
+  export let cascade;
+  export let hover;
+  export let rounded;
+  export let src;
+  export let waves;
+  export let fixed;
+  const props = clean($$props, ["zoom", cascade, "hover", "rounded", "waves", "src", "fixed"]);
+
+  elementClasses = clsx(
+    'view',
+    cascade && 'view-cascade',
+    className,
+    hover && 'overlay',
+    rounded && 'rounded',
+    waves ? 'Ripple-parent' : false,
+    zoom && 'zoom'
+  );
+
+  let elementStyle = src
+    ? {
+      backgroundAttachment: fixed ? 'fixed' : null,
+      backgroundImage: `url("${src}")`,
+      backgroundPosition: 'center center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      height: '100vh'
+    }
+    : {}
+</script>
+
+<div use:forwardEvents {...props} class={elementClasses} style="{elementStyle}">
+  <slot/>
+</div>

src/index.js

@@ -56,6 +56,8 @@ import MDBModalFooter from './MDBModalFooter.svelte'
 import MDBModalHeader from './MDBModalHeader.svelte'
 import MDBBreadcrumb from './MDBBreadcrumb.svelte'
 import MDBBreadcrumbItem from './MDBBreadcrumbItem.svelte'
+import MDBMask from './MDBMask.svelte'
+import MDBView from './MDBView.svelte'
 
 waves.init();
 
@@ -116,5 +118,7 @@ export {
   MDBModalFooter,
   MDBModalHeader,
   MDBBreadcrumb,
-  MDBBreadcrumbItem
+  MDBBreadcrumbItem,
+  MDBMask,
+  MDBView
 }