Merge pull request #82 from Oli8/release/1.3.0

Release/1.3.0

package.json

@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@sveltejs/kit": "next",
-    "svelte": "^3.46.0",
+    "svelte": "^3.51.0",
     "svelte-check": "^2.0.0",
     "svelte-preprocess": "^4.0.0",
     "svelte2tsx": "^0.4.2",

src/lib/components/Form/Form.svelte

@@ -5,6 +5,7 @@
       on:keydown
       on:mouseover
       on:mouseenter
-      on:mouseleave>
+      on:mouseleave
+      on:focus>
   <slot />
 </form>

src/lib/components/Layout/Col.svelte

@@ -1,17 +1,21 @@
-<div {...$$restProps}
-     class={classes}
-     class:col-fill={fill}
-     class:align-top={top}
-     class:align-middle={middle}
-     class:align-bottom={bottom}>
+<svelte:element
+  this={as}
+  {...$$restProps}
+  class={classes}
+  class:col-fill={fill}
+  class:align-top={top}
+  class:align-middle={middle}
+  class:align-bottom={bottom}
+>
   <slot />
-</div>
+</svelte:element>
 
 <script lang="ts">
   import { computeClasses } from '../../utils';
-  
+
   type colSpan = number | string | null;
 
+  export let as: keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap = 'div';
   export let col: colSpan = null;
   export let sm: colSpan = null;
   export let md: colSpan = null;

src/lib/components/Layout/Row.svelte

@@ -1,16 +1,20 @@
-<div {...$$restProps}
-     class="{$$restProps.class ?? ''} row"
-     class:flex-right={right}
-     class:flex-center={center}
-     class:flex-edges={edges}
-     class:flex-spaces={spaces}
-     class:flex-top={top}
-     class:flex-middle={middle}
-     class:flex-bottom={bottom}>
+<svelte:element
+  this={as}
+  {...$$restProps}
+  class="{$$restProps.class ?? ''} row"
+  class:flex-right={right}
+  class:flex-center={center}
+  class:flex-edges={edges}
+  class:flex-spaces={spaces}
+  class:flex-top={top}
+  class:flex-middle={middle}
+  class:flex-bottom={bottom}
+>
   <slot />
-</div>
+</svelte:element>
 
 <script lang="ts">
+  export let as: keyof HTMLElementTagNameMap = 'div';
   export let right: boolean = false;
   export let center: boolean = false;
   export let edges: boolean = false;

src/lib/components/Skeleton.svelte

@@ -6,7 +6,7 @@
          aria-valuetext={ariaValueText}
          tabindex="-1"
          role="progressbar"
-         class="border border-{borderType} margin-small"
+         class="{$$restProps.class ?? ''} border border-{borderType} margin-small"
          class:animated
          class:circle
          class:inline>

src/lib/components/Tabs/Tabs.svelte

@@ -10,7 +10,8 @@
          aria-controls={getId(label, 'content')}
          role="tab"
          tabindex={selected ? 0 : -1}
-         on:click={showContent.bind(null, index)}>
+         on:click={showContent.bind(null, index)}
+         on:keypress>
       {#if header}
         {@html header.innerHTML}
       {:else}

src/lib/types.d.ts → src/lib/types.ts

@@ -15,7 +15,7 @@ export type Position = PositionX | PositionY;
 export interface TableColumnObj {
   field: string;
   label?: string;
-  content?: (text?: string) => string;
+  content?: (val?: any) => string;
   html?: boolean;
 }