@onsvisual/svelte-components 0.1.105 → 1.0.0-next.1

package/dist/inputs/Input/Input.svelte

@@ -1,163 +1,132 @@
 <script>
-  import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher } from "svelte";
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-  /**
-   * ID for &lt;input&gt; element
-   * @type {string}
-   */
-  export let id = "";
-  /**
-   * A prop to bind to for the entered value
-   * @type {string}
-   */
-  export let value = "";
-  /**
-   * A label to describe the &lt;input&gt; element (expected for accessibility)
-   * @type {string}
-   */
-  export let label = "Enter some text";
-  /**
-   * Visually hide the label
-   * @type {boolean}
-   */
-  export let hideLabel = false;
-  /**
-   * An optional description to help users know what to enter
-   * @type {string}
-   */
-  export let description = "";
-  /**
-   * The maximum number of characters that can be entered (optional)
-   * @type {number}
-   */
-  export let charLimit = null;
-  /**
-   * The width of the &lt;input&gt; in characters
-   * @type {number}
-   */
-  export let width = null;
-  /**
-   * An optional prefix (eg. £) to appear on the left of the input
-   * @type {string}
-   */
-  export let prefix = "";
-  /**
-   * An optional suffix (eg. %) to appear on the right of the input
-   * @type {string}
-   */
-  export let suffix = "";
-  /**
-   * An optional hidden description of the prefix (for accessibility)
-   * @type {string}
-   */
-  export let unitLabel = prefix || suffix || "";
-  /**
-   * An optional regex pattern foto limit the input (not currently used)
-   * @type {string}
-   */
-  export let pattern = "";
-  /**
-   * Set to `true` if the value should be a number
-   * @type {boolean}
-   */
-  export let numeric = false;
-  /**
-   * Set to `true` to highlight border in red
-   * @type {boolean}
-   */
-  export let error = false;
+	/**
+	 * ID for &lt;input&gt; element
+	 * @type {string}
+	 */
+	export let id = "";
+	/**
+	 * A prop to bind to for the entered value
+	 * @type {string}
+	 */
+	export let value = "";
+	/**
+	 * A label to describe the &lt;input&gt; element (expected for accessibility)
+	 * @type {string}
+	 */
+	export let label = "Enter some text";
+	/**
+	 * Visually hide the label
+	 * @type {boolean}
+	 */
+	export let hideLabel = false;
+	/**
+	 * An optional description to help users know what to enter
+	 * @type {string}
+	 */
+	export let description = "";
+	/**
+	 * The maximum number of characters that can be entered (optional)
+	 * @type {number}
+	 */
+	export let charLimit = null;
+	/**
+	 * The width of the &lt;input&gt; in characters
+	 * @type {number}
+	 */
+	export let width = null;
+	/**
+	 * An optional prefix (eg. £) to appear on the left of the input
+	 * @type {string}
+	 */
+	export let prefix = "";
+	/**
+	 * An optional suffix (eg. %) to appear on the right of the input
+	 * @type {string}
+	 */
+	export let suffix = "";
+	/**
+	 * An optional hidden description of the prefix (for accessibility)
+	 * @type {string}
+	 */
+	export let unitLabel = prefix || suffix || "";
+	/**
+	 * An optional regex pattern foto limit the input (not currently used)
+	 * @type {string}
+	 */
+	export let pattern = "";
+	/**
+	 * Set to `true` if the value should be a number
+	 * @type {boolean}
+	 */
+	export let numeric = false;
+	/**
+	 * Set to `true` to highlight border in red
+	 * @type {boolean}
+	 */
+	export let error = false;
 </script>
 
 <div class="ons-field">
-  {#if label}
-    <label
-      class="ons-label"
-      class:ons-label--with-description="{description}"
-      class:ons-u-vh="{hideLabel}"
-      aria-describedby="{description ? `${id}-description-hint` : null}"
-      for="{id}"
-    >
-      {label}
-    </label>
-  {/if}
-  {#if description}
-    <span id="{id}-description-hint" class="ons-label__description ons-input--with-description">
-      {description}
-    </span>
-  {/if}
-  {#if prefix || suffix}
-    <span class="ons-input-type" class:ons-input-type--prefix="{prefix}">
-      <span class="ons-input-type__inner">
-        <input
-          type="text"
-          id="{id}"
-          bind:value="{value}"
-          maxlength="{charLimit}"
-          pattern="{pattern ? pattern : numeric ? '[0-9]*' : null}"
-          inputmode="{numeric ? 'numeric' : null}"
-          class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
-            ? `ons-input--w-${width}`
-            : ''}"
-          class:ons-input--error="{error}"
-          aria-labelledby="{id} {id}-unit"
-          aria-describedby="{description ? `${id}-description-hint` : null}"
-          on:change="{(e) => dispatch('change', e)}"
-        />
-        <abbr
-          id="{id}-unit"
-          class="ons-input-type__type ons-js-input-abbr"
-          aria-label="{unitLabel}"
-          role="figure"
-          title="{unitLabel}">{prefix || suffix}</abbr
-        >
-      </span>
-    </span>
-  {:else}
-    <input
-      type="text"
-      id="{id}"
-      bind:value="{value}"
-      pattern="{pattern ? pattern : numeric ? '[0-9]*' : null}"
-      inputmode="{numeric ? 'numeric' : null}"
-      class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
-        ? `ons-input--w-${width}`
-        : ''}"
-      class:ons-input--error="{error}"
-      aria-describedby="{description ? `${id}-description-hint` : null}"
-      on:change="{(e) => dispatch('change', e)}"
-    />
-  {/if}
+	{#if label}
+		<label
+			class="ons-label"
+			class:ons-label--with-description={description}
+			class:ons-u-vh={hideLabel}
+			aria-describedby={description ? `${id}-description-hint` : null}
+			for={id}
+		>
+			{label}
+		</label>
+	{/if}
+	{#if description}
+		<span id="{id}-description-hint" class="ons-label__description ons-input--with-description">
+			{description}
+		</span>
+	{/if}
+	{#if prefix || suffix}
+		<span class="ons-input-type" class:ons-input-type--prefix={prefix}>
+			<span class="ons-input-type__inner">
+				<input
+					type="text"
+					{id}
+					bind:value
+					maxlength={charLimit}
+					pattern={pattern ? pattern : numeric ? "[0-9]*" : null}
+					inputmode={numeric ? "numeric" : null}
+					class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
+						? `ons-input--w-${width}`
+						: ''}"
+					class:ons-input--error={error}
+					aria-labelledby="{id} {id}-unit"
+					aria-describedby={description ? `${id}-description-hint` : null}
+					on:change={(e) => dispatch("change", e)}
+				/>
+				<abbr
+					id="{id}-unit"
+					class="ons-input-type__type ons-js-input-abbr"
+					aria-label={unitLabel}
+					role="figure"
+					title={unitLabel}>{prefix || suffix}</abbr
+				>
+			</span>
+		</span>
+	{:else}
+		<input
+			type="text"
+			{id}
+			bind:value
+			pattern={pattern ? pattern : numeric ? "[0-9]*" : null}
+			inputmode={numeric ? "numeric" : null}
+			class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
+				? `ons-input--w-${width}`
+				: ''}"
+			class:ons-input--error={error}
+			aria-describedby={description ? `${id}-description-hint` : null}
+			on:change={(e) => dispatch("change", e)}
+		/>
+	{/if}
 </div>
-
-<style>
-  .ons-input {
-    background: none;
-    border-color: currentColor;
-  }
-  .ons-input--error {
-    background: none;
-    border-color: rgb(208, 2, 27);
-  }
-  .ons-input--error:focus {
-    border-color: currentColor;
-  }
-  .ons-js-input-abbr {
-    background: var(--hinted, #e2e2e3);
-    border-color: currentColor;
-  }
-  .ons-input-type--prefix .ons-input--error {
-    border-left-color: currentColor;
-    border-right-color: rgb(208, 2, 27);
-  }
-  .ons-input--error + .ons-js-input-abbr {
-    color: #e2e2e3;
-    border-color: #222;
-  }
-  .ons-input-type__input:focus + .ons-input-type__type::after {
-    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
-  }
-  .ons-input-type__input.ons-input--error:focus + .ons-input-type__type::after {
-    box-shadow: 0 0 0 1px #222, 0 0 0 4px #fbc900;
-  }</style>

package/dist/inputs/Input/Input.svelte.d.ts

@@ -0,0 +1,51 @@
+/** @typedef {typeof __propDef.props}  InputProps */
+/** @typedef {typeof __propDef.events}  InputEvents */
+/** @typedef {typeof __propDef.slots}  InputSlots */
+export default class Input extends SvelteComponentTyped<{
+    id?: string | undefined;
+    width?: number | undefined;
+    label?: string | undefined;
+    pattern?: string | undefined;
+    error?: boolean | undefined;
+    numeric?: boolean | undefined;
+    value?: string | undefined;
+    hideLabel?: boolean | undefined;
+    description?: string | undefined;
+    charLimit?: number | undefined;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    unitLabel?: string | undefined;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        width?: number | undefined;
+        label?: string | undefined;
+        pattern?: string | undefined;
+        error?: boolean | undefined;
+        numeric?: boolean | undefined;
+        value?: string | undefined;
+        hideLabel?: boolean | undefined;
+        description?: string | undefined;
+        charLimit?: number | undefined;
+        prefix?: string | undefined;
+        suffix?: string | undefined;
+        unitLabel?: string | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/inputs/Input/docs/component.md

@@ -0,0 +1,16 @@
+A standard `<input>` element with Svelte bindings and events.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Input } from "@onsvisual/svelte-components";
+
+  // Bind the <input> value to a variable (reactive)
+  let value;
+
+  // Define your own function on change
+  const handleChange = (e) => console.log(e);
+</script>
+
+<Input bind:value on:change="{handleChange}" />
+```

package/dist/inputs/Radios/Radio.svelte

@@ -1,108 +1,74 @@
 <script>
-  import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher } from "svelte";
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-  /**
-   * Unique ID input
-   * @type {string}
-   */
-  export let id;
-  /**
-   * ID for radio group (required)
-   * @type {string}
-   */
-  export let groupId;
-  /**
-   * Label for input
-   * @type {string}
-   */
-  export let label;
-  /**
-   * Binding for ID of selected option
-   * @type {string}
-   */
-  export let value = null;
-  /**
-   * (Optional) Extended description for element
-   * @type {string}
-   */
-  export let description = null;
-  /**
-   * Compact mode (no border)
-   * @type {boolean}
-   */
-  export let compact = false;
+	/**
+	 * Unique ID input
+	 * @type {string}
+	 */
+	export let id;
+	/**
+	 * ID for radio group (required)
+	 * @type {string}
+	 */
+	export let groupId;
+	/**
+	 * Label for input
+	 * @type {string}
+	 */
+	export let label;
+	/**
+	 * Binding for ID of selected option
+	 * @type {string|null}
+	 */
+	export let value = null;
+	/**
+	 * Optional: Extended description for element
+	 * @type {string}
+	 */
+	export let description = "";
+	/**
+	 * Compact mode (no border)
+	 * @type {boolean}
+	 */
+	export let compact = false;
 </script>
 
-<span class="ons-radios__item" class:ons-radios__item--no-border="{compact}">
-  <span class="ons-radio" class:ons-radio--no-border="{compact}">
-    <input
-      type="radio"
-      id="{id}"
-      bind:group="{value}"
-      value="{id}"
-      name="{groupId}"
-      class="ons-radio__input ons-js-radio"
-      on:change="{(e) => dispatch('change', e)}"
-    />
-    <label
-      class="ons-radio__label"
-      class:ons-label--with-description="{description}"
-      for="{id}"
-      id="{id}-label"
-      aria-describedby="{description ? `${id}-label-description-hint` : null}"
-    >
-      {label}
-      {#if description}
-        <span class="ons-label__aria-hidden-description" aria-hidden="true"
-          ><span class="ons-label__description ons-radio__label--with-description">
-            {description}
-          </span></span
-        >
-      {/if}
-    </label>
-    {#if description}
-      <span
-        class="ons-label__visually-hidden-description ons-u-vh"
-        id="{id}-label-description-hint"
-      >
-        {description}
-      </span>
-    {/if}
-  </span>
+<span class="ons-radios__item" class:ons-radios__item--no-border={compact}>
+	<span class="ons-radio" class:ons-radio--no-border={compact}>
+		<input
+			type="radio"
+			{id}
+			bind:group={value}
+			value={id}
+			name={groupId}
+			class="ons-radio__input ons-js-radio"
+			on:change={(e) => dispatch("change", e)}
+		/>
+		<label
+			class="ons-radio__label"
+			class:ons-label--with-description={description}
+			for={id}
+			id="{id}-label"
+			aria-describedby={description ? `${id}-label-description-hint` : null}
+		>
+			{label}
+			{#if description}
+				<span class="ons-label__aria-hidden-description" aria-hidden="true"
+					><span class="ons-label__description ons-radio__label--with-description">
+						{description}
+					</span></span
+				>
+			{/if}
+		</label>
+		{#if description}
+			<span
+				class="ons-label__visually-hidden-description ons-u-vh"
+				id="{id}-label-description-hint"
+			>
+				{description}
+			</span>
+		{/if}
+	</span>
 </span>
-
-<style>
-  .ons-radios__item {
-    display: table;
-  }
-  .ons-radio__input {
-    border-color: currentColor !important;
-    background: none !important;
-    box-shadow: none !important;
-  }
-  .ons-radio--no-border .ons-radio__input:focus {
-    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900 !important;
-  }
-  .ons-radio__input:checked::after {
-    border-color: currentColor;
-  }
-  .ons-radio__input::after {
-    left: 50% !important;
-    top: 50% !important;
-    margin-left: -6px !important;
-    margin-top: -6px !important;
-    /* background-color: currentColor !important;
-    border-color: currentColor !important; */
-  }
-  .ons-radio__label::before {
-    background: none;
-    border-color: currentColor;
-  }
-  .ons-radio__input:checked + .ons-radio__label::before {
-    background: var(--pale, #f5f5f6);
-  }
-  .ons-radio__input:focus + .ons-radio__label::before {
-    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
-  }</style>

package/dist/{@types/inputs → inputs}/Radios/Radio.svelte.d.ts

@@ -5,9 +5,9 @@ export default class Radio extends SvelteComponentTyped<{
     id: string;
     label: string;
     groupId: string;
-    compact?: boolean;
-    value?: string;
-    description?: string;
+    compact?: boolean | undefined;
+    value?: string | null | undefined;
+    description?: string | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -23,9 +23,9 @@ declare const __propDef: {
         id: string;
         label: string;
         groupId: string;
-        compact?: boolean;
-        value?: string;
-        description?: string;
+        compact?: boolean | undefined;
+        value?: string | null | undefined;
+        description?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/dist/inputs/Radios/Radios.stories.svelte

@@ -0,0 +1,51 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import Radio from "./Radio.svelte";
+	import Radios from "./Radios.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Radios",
+		component: Radios,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	let items = [
+		{
+			id: "house",
+			label: "House or bungalow",
+			description: "Includes terraced, semi-detached and detached homes."
+		},
+		{ id: "flat", label: "Flat, maisonette or apartment" },
+		{ id: "mobile", label: "Caravan or other mobile or temporary structure" }
+	];
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<Radios {...args} />
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ label: "Select one", id: "radios", items }} {template} />
+
+<Story name="Compact without label" args={{ id: "radios", items, compact: true }} {template} />
+
+<Story name="Individually defined radios" asChild parameters={withStoryDocs(exampleDocs)}>
+	<div style:padding="12px">
+		<Radios label="Select one">
+			<Radio
+				groupId="radios"
+				id="house"
+				label="House or bungalow"
+				description="Includes terraced, semi-detached and detached homes."
+			/>
+			<Radio groupId="radios" id="flat" label="Flat, maisonette or apartment" />
+			<Radio groupId="radios" id="mobile" label="Caravan or other mobile or temporary structure" />
+		</Radios>
+	</div>
+</Story>

package/dist/inputs/Radios/Radios.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  RadiosProps */
+/** @typedef {typeof __propDef.events}  RadiosEvents */
+/** @typedef {typeof __propDef.slots}  RadiosSlots */
+export default class Radios extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type RadiosProps = typeof __propDef.props;
+export type RadiosEvents = typeof __propDef.events;
+export type RadiosSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};