sveltacular 0.0.29 → 0.0.30

package/dist/forms/list-box/list-box.svelte

@@ -20,6 +20,8 @@ let text = getText();
 let open = false;
 let highlightIndex = -1;
 let filteredItems = [];
+$:
+  isSeachable = searchable || !!search;
 const onSelect = (e) => {
   value = e.detail.value;
   dispatch("change", value);
@@ -67,7 +69,7 @@ const onInputKeyPress = (e) => {
   }
 };
 const triggerSearch = debounce(async () => {
-  if (search && searchable) {
+  if (search && isSeachable) {
     items = await search(text);
   }
   updateText();
@@ -75,7 +77,7 @@ const triggerSearch = debounce(async () => {
 }, 300);
 const applyFilter = () => {
   const searchText = text.trim().toLowerCase();
-  filteredItems = searchText && searchable ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText)) : items.map((item, index) => ({ ...item, index }));
+  filteredItems = searchText && isSeachable ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText)) : items.map((item, index) => ({ ...item, index }));
 };
 const clear = () => {
   text = "";
@@ -104,7 +106,7 @@ triggerSearch();
 			bind:value={text}
 			{required}
 			{disabled}
-			readonly={!searchable}
+			readonly={!isSeachable}
 			on:focus={() => (open = true)}
 			on:keyup={onInputKeyPress}
 			data-value={value}
@@ -113,7 +115,7 @@ triggerSearch();
 		<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow}>
 			<AngleUpIcon />
 		</button>
-		{#if text && searchable}
+		{#if text && isSeachable}
 			<button type="button" class="clear" on:click={clear} on:keydown={clear}> X </button>
 		{/if}
 		<div class="dropdown">
@@ -177,5 +179,5 @@ div .dropdown {
   top: 100%;
   left: 0;
   width: 100%;
-  z-index: 1;
+  z-index: 3;
 }</style>

package/dist/forms/text-box/text-box.svelte

@@ -1,7 +1,9 @@
 <script>import { uniqueId } from "../../helpers/unique-id.js";
 import FormField from "../form-field.svelte";
 import FormLabel from "../form-label.svelte";
+import { createEventDispatcher } from "svelte";
 const id = uniqueId();
+const dipatch = createEventDispatcher();
 export let value = "";
 export let placeholder = "";
 export let helperText = "";
@@ -36,6 +38,7 @@ const onInput = (e) => {
   } else if (textCase === "upper") {
     value = value.toUpperCase();
   }
+  dipatch("input", value);
 };
 </script>
 

package/dist/forms/text-box/text-box.svelte.d.ts

@@ -21,6 +21,9 @@ declare const __propDef: {
         textCase?: 'lower' | 'upper' | undefined;
     };
     events: {
+        change: CustomEvent<string>;
+        input: CustomEvent<string>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/forms/url-box/url-box.svelte

@@ -0,0 +1,26 @@
+<script>import TextBox from "../text-box/text-box.svelte";
+export let protocol = "https";
+export let value = "";
+export let size = "lg";
+export let placeholder = "example.com";
+const onInput = () => {
+  const urlParts = value.split("://");
+  if (["http", "https"].includes(urlParts[0])) {
+    protocol = urlParts[0];
+    value = urlParts[1];
+  }
+};
+</script>
+
+<TextBox
+	bind:value
+	type="text"
+	{placeholder}
+	prefix={protocol + '://'}
+	{size}
+	on:input={onInput}
+	on:change={onInput}
+	allowSpaces={false}
+>
+	<slot />
+</TextBox>

package/dist/forms/url-box/url-box.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../index.js';
+import type { HttpProtocol } from '../../types/generic.js';
+declare const __propDef: {
+    props: {
+        protocol?: HttpProtocol | undefined;
+        value?: string | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        placeholder?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type UrlBoxProps = typeof __propDef.props;
+export type UrlBoxEvents = typeof __propDef.events;
+export type UrlBoxSlots = typeof __propDef.slots;
+export default class UrlBox extends SvelteComponent<UrlBoxProps, UrlBoxEvents, UrlBoxSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export { default as FormHeader } from './forms/form-header.svelte';
 export { default as FormFooter } from './forms/form-footer.svelte';
 export { default as FormSection } from './forms/form-section.svelte';
 export { default as InfoBox } from './forms/info-box/info-box.svelte';
+export { default as UrlBox } from './forms/url-box/url-box.svelte';
 export { default as Card } from './generic/card/card.svelte';
 export { default as Divider } from './generic/divider/divider.svelte';
 export { default as Link } from './generic/link/link.svelte';

package/dist/index.js

@@ -19,6 +19,7 @@ export { default as FormHeader } from './forms/form-header.svelte';
 export { default as FormFooter } from './forms/form-footer.svelte';
 export { default as FormSection } from './forms/form-section.svelte';
 export { default as InfoBox } from './forms/info-box/info-box.svelte';
+export { default as UrlBox } from './forms/url-box/url-box.svelte';
 // Generic
 export { default as Card } from './generic/card/card.svelte';
 export { default as Divider } from './generic/divider/divider.svelte';

package/dist/placeholders/progress.svelte

@@ -0,0 +1,36 @@
+<script>export let value = 0;
+</script>
+
+<div class="progress-bar" style="--progress-value: {value}%">
+	<div class="progress">
+		<div class="progress-value">{value}%</div>
+	</div>
+</div>
+
+<style>.progress-bar {
+  height: 2rem;
+  background-color: var(--base-color-fg, #ccc);
+  border-radius: 1rem;
+  margin-bottom: 1rem;
+}
+.progress-bar .progress {
+  height: 100%;
+  background-color: var(--primary-color, #00a);
+  color: white;
+  border-radius: 1rem;
+  transition: width 0.5s ease-in-out;
+  width: var(--progress-value, 0%);
+  min-width: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.progress-bar .progress-value {
+  color: var(--base-color-bg, #fff);
+  font-size: 1rem;
+  font-family: var(--base-font-family, sans-serif);
+  font-weight: 500;
+  line-height: 1.5rem;
+  padding: 0 0.5rem;
+  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
+}</style>

package/dist/placeholders/progress.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ProgressProps = typeof __propDef.props;
+export type ProgressEvents = typeof __propDef.events;
+export type ProgressSlots = typeof __propDef.slots;
+export default class Progress extends SvelteComponent<ProgressProps, ProgressEvents, ProgressSlots> {
+}
+export {};

package/dist/types/generic.d.ts

@@ -1 +1,3 @@
 export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HttpProtocol = 'http' | 'https';
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.29",
+	"version": "0.0.30",
 	"scripts": {
 		"watch": "npm run dev -- --open",
 		"dev": "vite dev",