@onsvisual/svelte-components 0.0.25 → 0.0.27

package/dist/@types/layout/Cards/Card.svelte.d.ts

@@ -3,12 +3,12 @@
 /** @typedef {typeof __propDef.slots}  CardSlots */
 export default class Card extends SvelteComponentTyped<{
     id?: any;
-    title?: string;
-    href?: string;
+    title?: any;
+    href?: any;
     hideTitle?: boolean;
     noBackground?: any;
-    image?: string;
-    imageAlt?: string;
+    image?: any;
+    imageAlt?: any;
     colspan?: number;
     grow?: boolean;
 }, {
@@ -24,12 +24,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         id?: any;
-        title?: string;
-        href?: string;
+        title?: any;
+        href?: any;
         hideTitle?: boolean;
         noBackground?: any;
-        image?: string;
-        imageAlt?: string;
+        image?: any;
+        imageAlt?: any;
         colspan?: number;
         grow?: boolean;
     };

package/dist/@types/layout/Grid/Grid.svelte.d.ts

@@ -5,7 +5,7 @@ export default class Grid extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
     id?: string;
     cls?: string;
-    width?: "narrow" | "medium" | "wide" | "wider" | "full";
+    width?: "narrow" | "medium" | "wide" | "full";
     height?: string | number;
     marginTop?: boolean;
     marginBottom?: boolean;
@@ -30,7 +30,7 @@ declare const __propDef: {
         theme?: "light" | "dark" | "lightblue";
         id?: string;
         cls?: string;
-        width?: "narrow" | "medium" | "wide" | "wider" | "full";
+        width?: "narrow" | "medium" | "wide" | "full";
         height?: number | string;
         marginTop?: boolean;
         marginBottom?: boolean;

package/dist/layout/Cards/Card.svelte

@@ -2,12 +2,12 @@
   import { getContext } from "svelte";
   import { slugify } from "../../js/utils";
 
-  export let title = "Card title";
+  export let title = null;
   export let id = slugify(title);
   export let hideTitle = false;
-  export let image = "";
-  export let imageAlt = "";
-  export let href = "";
+  export let image = null;
+  export let imageAlt = null;
+  export let href = null;
 
   export let colspan = 1; // 1, 2 or 3
   export let noBackground = getContext("noBackground") || false;
@@ -28,8 +28,8 @@
   style:grid-column-end="{grow ? $cols + 1 : null}"
 >
   <div id="{id}" class="ons-card" aria-describedBy="{id}_text">
-    {#if href && title && !hideTitle}
-      <a href="{href}" class="ons-card__link ons-u-db">
+    {#if href && title}
+      <a href="{href}" class="ons-card__link ons-u-db" class:ons-u-vh="{hideTitle}">
         {#if image}
           <img
             class="ons-card__image ons-u-mb-s"
@@ -46,9 +46,10 @@
           {title}
         </h3>
       </a>
-    {:else if title && !hideTitle}
+    {:else if title}
       <h3
         class="ons-card__title ons-u-fs-m"
+        class:ons-u-vh="{hideTitle}"
         style:padding="{!noBackground ? "8px 16px 0" : ""}"
         style:margin-bottom="5px"
       >

package/dist/layout/Grid/Grid.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
   import Container from "../../wrappers/Container/Container.svelte";
 
   /**
@@ -13,9 +15,9 @@
   export let cls = null;
   /**
    * Sets the width of the section
-   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+   * @type {"narrow"|"medium"|"wide"|"full"}
    */
-  export let width = "wide";
+  export let width = "medium";
   /**
    * Sets the title of the section
    * @type {string}
@@ -70,9 +72,30 @@
   let gridClass = !colwidth || colwidth === "full" ? "" : `grid-${colwidth}`;
   let rowHeight = height === "full" ? "100vh" : !Number.isNaN(height) ? height + "px" : height;
   let gridGap = !Number.isNaN(gap) ? gap + "px" : gap;
+
+  const defs = {
+    narrow: { w: 180, c: 4 },
+    medium: { w: 280, c: 3 },
+    wide: { w: 400, c: 2 },
+    full: { w: "100%", c: 1 },
+  };
+
+  let w;
+
+  const cols = writable(defs[colwidth].c);
+
+  $: columns =
+    colwidth == "full"
+      ? 1
+      : w
+      ? Math.floor((w + gap) / (defs[colwidth].w + gap))
+      : defs[colwidth].c;
+  $: cols.set(columns);
+
+  setContext("cols", cols);
 </script>
 
-<figure aria-label="{caption}">
+<figure aria-label="{caption}" bind:clientWidth="{w}">
   <Container
     id="{id}"
     cls="{cls}"
@@ -122,10 +145,10 @@
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
   }
   .grid-medium {
-    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
   }
   .grid-wide {
-    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)) !important;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
   }
   :global(.grid > div) {
     min-height: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",