@likable-hair/svelte 2.0.4 → 2.0.5

package/dist/components/simple/common/Menu.svelte

@@ -2,7 +2,8 @@
 import {
   fly
 } from "svelte/transition";
-export let open = false, top = void 0, left = void 0, width, height, maxHeight = void 0, overflow = "auto", refreshPosition = false, boxShadow = void 0, borderRadius = void 0, activator = void 0, anchor = "bottom", closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
+export let _top = void 0, _left = void 0, _width = "auto", _height = "auto", _maxHeight = void 0, _overflow = "auto", _boxShadow = void 0, _borderRadius = void 0;
+export let open = false, refreshPosition = false, activator = void 0, anchor = "bottom", closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
   duration: 100,
   y: 10
 }, outAnimation = fly, outAnimationConfig = {
@@ -16,24 +17,24 @@ function calculateMenuPosition(params) {
       if (anchor == "bottom") {
         let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
         let activatorHeight = params.activator.offsetHeight;
-        top = activatorTop + window.scrollY + activatorHeight;
-        left = activatorLeft + window.scrollX;
+        _top = activatorTop + window.scrollY + activatorHeight;
+        _left = activatorLeft + window.scrollX;
       } else if (anchor == "bottom-center") {
         let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
         let activatorHeight = params.activator.offsetHeight;
         let activatorWidth = params.activator.offsetWidth;
         let menuWidth = params.menuElement.offsetWidth;
-        top = activatorTop + window.scrollY + activatorHeight;
-        left = activatorLeft + window.scrollX;
+        _top = activatorTop + window.scrollY + activatorHeight;
+        _left = activatorLeft + window.scrollX;
         if (menuWidth > activatorWidth) {
-          left = left - (menuWidth - activatorWidth) / 2;
+          _left = _left - (menuWidth - activatorWidth) / 2;
         } else {
-          left = left - (activatorWidth - menuWidth) / 2;
+          _left = _left + (activatorWidth - menuWidth) / 2;
         }
       }
     }
-    if (window.innerWidth + window.scrollX < (left || 0) + (menuElement?.offsetWidth || 0)) {
-      left = Math.max(
+    if (window.innerWidth + window.scrollX < (_left || 0) + (menuElement?.offsetWidth || 0)) {
+      _left = Math.max(
         window.innerWidth + window.scrollX - (menuElement?.offsetWidth || 0),
         0
       );
@@ -64,7 +65,7 @@ $:
       zIndex = maxZIndex + 2;
   }
 $:
-  if (!!width && !!activator && !!menuElement) {
+  if (!!_width && !!activator && !!menuElement) {
     calculateMenuPosition({ activator, menuElement });
   }
 $:
@@ -104,14 +105,14 @@ $:
     data-uid={currentUid}
     style:z-index={zIndex}
     style:position="absolute"
-    style:top={top + "px"}
-    style:box-shadow={boxShadow}
-    style:border-radius={borderRadius}
-    style:left={left + "px"}
-    style:height
-    style:max-height={maxHeight}
-    style:width
-    style:overflow
+    style:top={_top + "px"}
+    style:box-shadow={_boxShadow}
+    style:border-radius={_borderRadius}
+    style:left={_left + "px"}
+    style:height={_height}
+    style:max-height={_maxHeight}
+    style:width={_width}
+    style:overflow={_overflow}
     in:inAnimation={inAnimationConfig}
     out:outAnimation={outAnimationConfig}
   >

package/dist/components/simple/common/Menu.svelte.d.ts

@@ -2,16 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 import { type FadeParams, type FlyParams, type SlideParams, type TransitionConfig } from "svelte/transition";
 declare const __propDef: {
     props: {
+        _top?: number | undefined;
+        _left?: number | undefined;
+        _width?: string | undefined;
+        _height?: string | undefined;
+        _maxHeight?: string | undefined;
+        _overflow?: string | undefined;
+        _boxShadow?: string | undefined;
+        _borderRadius?: string | undefined;
         open?: boolean | undefined;
-        top?: number | undefined;
-        left?: number | undefined;
-        width: string;
-        height: string;
-        maxHeight?: string | undefined;
-        overflow?: string | undefined;
         refreshPosition?: boolean | undefined;
-        boxShadow?: string | undefined;
-        borderRadius?: string | undefined;
         activator?: HTMLElement | undefined;
         anchor?: "bottom" | "bottom-center" | undefined;
         closeOnClickOutside?: boolean | undefined;

package/dist/components/simple/dialogs/Dialog.svelte

@@ -2,7 +2,8 @@
 import { BROWSER } from "esm-env";
 import { beforeUpdate, onMount } from "svelte";
 import Keyboarder, {} from "../../../utils/keyboarder";
-export let open = false, overlayOpacity = "30%", overlayColor = "#282828", overlayBackdropFilter = void 0, transition = "fly-up", transitionTimingFunction = "cubic-bezier(0.075, 0.82, 0.165, 1)", transitionDuration = "0.5s";
+export let open = false, transition = "fly-up";
+export let _overlayOpacity = "30%", _overlayColor = "#282828", _overlayBackdropFilter = void 0, _transitionTimingFunction = "cubic-bezier(0.075, 0.82, 0.165, 1)", _transitionDuration = "0.5s";
 let zIndex = 50, localOpen = open, dialogElement, teleportedUid = void 0, hasBeenOpened = false;
 onMount(() => {
   if (!teleportedUid) {
@@ -61,14 +62,14 @@ function handleOverlayClick() {
 >
   <div
     data-dialog={localOpen}
-    style:--dialog-overlay-opacity={overlayOpacity}
-    style:--dialog-transition-timing-function={transitionTimingFunction}
-    style:--dialog-transition-duration={transitionDuration}
+    style:--dialog-overlay-opacity={_overlayOpacity}
+    style:--dialog-transition-timing-function={_transitionTimingFunction}
+    style:--dialog-transition-duration={_transitionDuration}
     style:--dialog-z-index={zIndex}
     style:display="flex"
     style:align-items="center"
     style:justify-content="space-between"
-    style:backdrop-filter={localOpen ? overlayBackdropFilter : 'none'}
+    style:backdrop-filter={localOpen ? _overlayBackdropFilter : 'none'}
     class="overlay-container"
     class:overlay-container-active={localOpen}
     class:overlay-container-deactive={!localOpen}
@@ -76,7 +77,7 @@ function handleOverlayClick() {
     bind:this={dialogElement}
   >
     <div
-      style:background-color={overlayColor}
+      style:background-color={_overlayColor}
       class="overlay"
       class:overlay-active={localOpen}
       class:hidden-behind={!localOpen && !hasBeenOpened}

package/dist/components/simple/dialogs/Dialog.svelte.d.ts

@@ -2,12 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         open?: boolean | undefined;
-        overlayOpacity?: string | undefined;
-        overlayColor?: string | undefined;
-        overlayBackdropFilter?: string | undefined;
         transition?: "fly-down" | "fly-up" | "fly-horizontal" | "scale" | "fade" | undefined;
-        transitionTimingFunction?: string | undefined;
-        transitionDuration?: string | undefined;
+        _overlayOpacity?: string | undefined;
+        _overlayColor?: string | undefined;
+        _overlayBackdropFilter?: string | undefined;
+        _transitionTimingFunction?: string | undefined;
+        _transitionDuration?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/simple/forms/SimpleTextField.svelte

@@ -0,0 +1,149 @@
+<script>import Icon from "../media/Icon.svelte";
+export let _padding = null, _width = null, _height = null, _backgroundColor = null, _borderRadius = null, _boxShadow = null, _focusBackgroundColor = null, _focusBoxShadow = null, _transition = null, _fontSize = null, _fontWeight = null, _outerGap = null, _innerGap = null, _hintFontSize = null, _hintColor = null, _hintMarginLeft = null, _marginBottom = null;
+export let value = void 0, type = "text", placeholder = void 0, disabled = false, readonly = false, appendIcon = void 0, appendInnerIcon = void 0, prependIcon = void 0, prependInnerIcon = void 0, iconSize = 12, hint = void 0;
+</script>
+
+<div
+  class="textfield-container"
+  style:--simple-textfield-padding={_padding}
+  style:--simple-textfield-height={_height}
+  style:--simple-textfield-width={_width}
+  style:--simple-textfield-background-color={_backgroundColor}
+  style:--simple-textfield-border-radius={_borderRadius}
+  style:--simple-textfield-box-shadow={_boxShadow}
+  style:--simple-textfield-focus-background-color={_focusBackgroundColor}
+  style:--simple-textfield-focus-box-shadow={_focusBoxShadow}
+  style:--simple-textfield-transition={_transition}
+  style:--simple-textfield-font-size={_fontSize}
+  style:--simple-textfield-font-weight={_fontWeight}
+  style:--simple-textfield-outer-gap={_outerGap}
+  style:--simple-textfield-inner-gap={_innerGap}
+  style:--simple-textfield-hint-font-size={_hintFontSize}
+  style:--simple-textfield-hint-color={_hintColor}
+  style:--simple-textfield-hint-margin-left={_hintMarginLeft}
+  style:--simple-textfield-margin-bottom={_marginBottom}
+>
+  <div class="row">
+    <slot name="prepend" {prependIcon} {iconSize}>
+      {#if !!prependIcon}
+          <Icon name={prependIcon} size={iconSize}></Icon>
+      {/if}
+    </slot>
+    <div class="textfield">
+      <slot name="prepend-inner" {prependInnerIcon} {iconSize}>
+        {#if !!prependInnerIcon}
+          <Icon name={prependInnerIcon} size={iconSize}></Icon>
+        {/if}
+      </slot>
+      {#if type == "text"}
+        <input
+          bind:value={value}
+          placeholder={placeholder}
+          type="text"
+          disabled={disabled}
+          readonly={readonly}
+          on:change
+          on:input
+          on:focus
+          on:blur
+          on:keydown
+          on:keypress
+          on:keyup
+        />
+      {:else if type == "password"}
+        <input
+          bind:value={value}
+          placeholder={placeholder}
+          type="password"
+          disabled={disabled}
+          readonly={readonly}
+          on:change
+          on:input
+          on:focus
+          on:blur
+          on:keydown
+          on:keypress
+          on:keyup
+        />
+      {:else if type == "number"}
+        <input
+          bind:value={value}
+          placeholder={placeholder}
+          type="number"
+          disabled={disabled}
+          readonly={readonly}
+          on:change
+          on:input
+          on:focus
+          on:blur
+          on:keydown
+          on:keypress
+          on:keyup
+        />
+      {/if}
+      <slot name="append-inner" {appendInnerIcon} {iconSize}>
+        {#if !!appendInnerIcon}
+          <Icon name={appendInnerIcon} size={iconSize}></Icon>
+        {/if}
+      </slot>
+    </div>
+    <slot name="append" {appendIcon} {iconSize}>
+      {#if !!appendIcon}
+        <Icon name={appendIcon} size={iconSize}></Icon>
+      {/if}
+    </slot>
+  </div>
+  <div class="row">
+    <slot name="hint">
+      {#if !!hint}
+        <span class="hint">{hint}</span>
+      {/if}
+    </slot>
+  </div>
+</div>
+
+<style>
+  .row {
+    display: flex;
+    align-items: center;
+    gap: var(--simple-textfield-outer-gap, 8px);
+    margin-bottom: var(--simple-textfield-margin-bottom, 5px);
+  }
+
+  .row:last-of-type {
+    margin-bottom: 0px;
+  }
+
+  .hint {
+    margin-left: var(--simple-textfield-hint-margin-left, 20px);
+    font-size: var(--simple-textfield-hint-font-size, 0.75rem);
+    color: var(--simple-textfield-hint-color, grey);
+  }
+
+  .textfield {
+    padding: var(--simple-textfield-padding, 0.65rem 1rem 0.65rem 1rem);
+    width: var(--simple-textfield-width, 280px);
+    height: var(--simple-textfield-height);
+    background-color: var(--simple-textfield-background-color, rgb(244 244 245/1));
+    border: none;
+    border-radius: var(--simple-textfield-border-radius, 9999px);
+    box-shadow: var(--simple-textfield-box-shadow, none);
+    transition: var(--simple-textfield-transition, 0.2s);
+    gap: var(--simple-textfield-inner-gap, 8px);
+    display: flex;
+  }
+
+  .textfield:focus-within {
+    background-color: var(--simple-textfield-focus-background-color, var(--simple-textfield-background-color, rgb(244 244 245/1)));
+    box-shadow: var(--simple-textfield-focus-box-shadow, rgba(100, 100, 111, 0.4) 0px 4px 25px 0px);
+  }
+
+  input {
+    outline: none;
+    width: 100%;
+    background-color: transparent;
+    font-size: var(--simple-textfield-font-size, .9rem);
+    font-weight: var(--simple-textfield-font-weight, normal);
+    border: none
+  }
+</style>

package/dist/components/simple/forms/SimpleTextField.svelte.d.ts

@@ -0,0 +1,69 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        _padding?: string | null | undefined;
+        _width?: string | null | undefined;
+        _height?: string | null | undefined;
+        _backgroundColor?: string | null | undefined;
+        _borderRadius?: string | null | undefined;
+        _boxShadow?: string | null | undefined;
+        _focusBackgroundColor?: string | null | undefined;
+        _focusBoxShadow?: string | null | undefined;
+        _transition?: string | null | undefined;
+        _fontSize?: string | null | undefined;
+        _fontWeight?: string | null | undefined;
+        _outerGap?: string | null | undefined;
+        _innerGap?: string | null | undefined;
+        _hintFontSize?: string | null | undefined;
+        _hintColor?: string | null | undefined;
+        _hintMarginLeft?: string | null | undefined;
+        _marginBottom?: string | null | undefined;
+        value?: string | number | undefined;
+        type?: "number" | "text" | "password" | undefined;
+        placeholder?: string | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        appendIcon?: string | undefined;
+        appendInnerIcon?: string | undefined;
+        prependIcon?: string | undefined;
+        prependInnerIcon?: string | undefined;
+        iconSize?: number | undefined;
+        hint?: string | undefined;
+    };
+    events: {
+        change: Event;
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        prepend: {
+            prependIcon: string | undefined;
+            iconSize: number;
+        };
+        'prepend-inner': {
+            prependInnerIcon: string | undefined;
+            iconSize: number;
+        };
+        'append-inner': {
+            appendInnerIcon: string | undefined;
+            iconSize: number;
+        };
+        append: {
+            appendIcon: string | undefined;
+            iconSize: number;
+        };
+        hint: {};
+    };
+};
+export type SimpleTextFieldProps = typeof __propDef.props;
+export type SimpleTextFieldEvents = typeof __propDef.events;
+export type SimpleTextFieldSlots = typeof __propDef.slots;
+export default class SimpleTextField extends SvelteComponentTyped<SimpleTextFieldProps, SimpleTextFieldEvents, SimpleTextFieldSlots> {
+}
+export {};

package/dist/components/simple/forms/Textfield.svelte

@@ -5,6 +5,7 @@ import { createId } from "@paralleldrive/cuid2";
 import { onMount } from "svelte";
 let inputId = createId(), focused = false, legendWidth = 0, labelElement = void 0;
 onMount(() => {
+  console.warn("TextField component is going to be depracated. Please use SimpleTextField instead.");
   if (labelElement) {
     legendWidth = labelElement.offsetWidth * 0.8 + 8;
   }

package/dist/components/simple/notifiers/AlertBanner.svelte

@@ -0,0 +1,92 @@
+<script>import { createEventDispatcher } from "svelte";
+export let _cursor = "pointer", _bannerColor = "grey", _borderRadius = null, _paddingLeft = null, _paddingRight = null, _paddingTop = null, _paddingBottom = null, _borderWidth = null, _width = null;
+export let title = void 0, description = void 0, disabled = false;
+let dispatch = createEventDispatcher();
+function handleClickEvent(e) {
+  if (!disabled)
+    dispatch("click", e);
+}
+function handleKeypressEvent(e) {
+  if (!disabled)
+    dispatch("keypress", e);
+}
+</script>
+
+<div 
+  style:--alert-banner-color={_bannerColor}
+  style:--alert-banner-border-radius={_borderRadius}
+  style:--alert-banner-padding-left={_paddingLeft}
+  style:--alert-banner-padding-right={_paddingRight}
+  style:--alert-banner-padding-top={_paddingTop}
+  style:--alert-banner-padding-bottom={_paddingBottom}
+  style:--alert-banner-border-width={_borderWidth}
+  style:width={_width}
+  class="alert-banner-container"
+  style:cursor={_cursor}
+  on:keypress={handleKeypressEvent}
+  on:click={handleClickEvent}
+>
+  <div 
+    class="border-colored"
+  ></div>
+  <div class="body">
+    <div class="content">
+      <slot name="content" title={title} description={description}>
+        {#if !!title}
+          <slot name="title" title={title}>
+            <div class="title">{title}</div>
+          </slot>
+        {/if}
+        {#if !!description}
+          <slot name="description" description={description}>
+            <div class="description">{description}</div>
+          </slot>
+        {/if}
+      </slot>
+    </div>
+    <div class="append">
+      <slot name="append" disabled={disabled}></slot>
+    </div>
+  </div>
+</div>
+
+<style>
+  .alert-banner-container {
+    position: relative;
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important;
+    border-radius: var(--alert-banner-border-radius, 5px);
+  }
+
+  .border-colored {
+    background-color: var(--alert-banner-color);
+    position: absolute;
+    width: var(--alert-banner-border-width, .7rem);
+    top: 0px;
+    bottom: 0px;
+    border-radius: var(--alert-banner-border-radius, 5px) 0px 0px var(--alert-banner-border-radius, 5px);
+  }
+
+  .body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .content {
+    padding-left: var(--alert-banner-padding-left, .5rem);
+    padding-top: var(--alert-banner-padding-top, .3rem);
+    padding-bottom: var(--alert-banner-padding-bottom, .3rem);
+    padding-right: var(--alert-banner-padding-bottom, .3rem);
+  }
+
+  .title {
+    font-weight: 700;
+    font-size: 1.2rem;
+    padding-left: 10px;
+  }
+
+  .description {
+    padding-left: 10px;
+    white-space: pre-wrap;
+  }
+</style>

package/dist/components/simple/notifiers/AlertBanner.svelte.d.ts

@@ -0,0 +1,44 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        _cursor?: string | undefined;
+        _bannerColor?: string | null | undefined;
+        _borderRadius?: string | null | undefined;
+        _paddingLeft?: string | null | undefined;
+        _paddingRight?: string | null | undefined;
+        _paddingTop?: string | null | undefined;
+        _paddingBottom?: string | null | undefined;
+        _borderWidth?: string | null | undefined;
+        _width?: string | null | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<MouseEvent>;
+        keypress: CustomEvent<KeyboardEvent>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        content: {
+            title: string | undefined;
+            description: string | undefined;
+        };
+        title: {
+            title: string | undefined;
+        };
+        description: {
+            description: string | undefined;
+        };
+        append: {
+            disabled: boolean;
+        };
+    };
+};
+export type AlertBannerProps = typeof __propDef.props;
+export type AlertBannerEvents = typeof __propDef.events;
+export type AlertBannerSlots = typeof __propDef.slots;
+export default class AlertBanner extends SvelteComponentTyped<AlertBannerProps, AlertBannerEvents, AlertBannerSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export { default as FileInputList } from './components/simple/forms/FileInputLis
 export { default as Switch } from './components/simple/forms/Switch.svelte';
 export { default as Textarea } from './components/simple/forms/Textarea.svelte';
 export { default as Textfield } from './components/simple/forms/Textfield.svelte';
+export { default as SimpleTextField } from './components/simple/forms/SimpleTextField.svelte';
 export { default as VerticalSwitch } from './components/simple/forms/VerticalSwitch.svelte';
 export { default as VerticalTextSwitch } from './components/simple/forms/VerticalTextSwitch.svelte';
 export { default as CircularLoader } from './components/simple/loaders/CircularLoader.svelte';

package/dist/index.js

@@ -19,6 +19,7 @@ export { default as FileInputList } from './components/simple/forms/FileInputLis
 export { default as Switch } from './components/simple/forms/Switch.svelte';
 export { default as Textarea } from './components/simple/forms/Textarea.svelte';
 export { default as Textfield } from './components/simple/forms/Textfield.svelte';
+export { default as SimpleTextField } from './components/simple/forms/SimpleTextField.svelte';
 export { default as VerticalSwitch } from './components/simple/forms/VerticalSwitch.svelte';
 export { default as VerticalTextSwitch } from './components/simple/forms/VerticalTextSwitch.svelte';
 export { default as CircularLoader } from './components/simple/loaders/CircularLoader.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",