@likable-hair/svelte 0.0.48 → 0.0.51

package/dates/TimePickerTextField.svelte

@@ -0,0 +1,90 @@
+<script >import Textfield from "../forms/Textfield.svelte";
+import VerticalTextSwitch from "../forms/VerticalTextSwitch.svelte";
+import "./DatePicker.svelte";
+export let hourFormat = "24", dayPeriod = "am", time = undefined, text = "", fieldSeparator = ":", placeholder = "Insert time...", focusedBoxShadow = "#C0D6FF 0px 2px 10px", borderColor = "", borderWeight = "1px", fontSize = "16px", width = "100%";
+let minutes = undefined, hours = undefined, switchValue = false;
+function checkHour(hour) {
+    if (hourFormat == "12")
+        return hour > 0 && hour <= 12;
+    else
+        return hour >= 0 && hour < 24;
+}
+function checkMinute(minute) {
+    return minute >= 0 && minute < 60;
+}
+$: dayPeriod = switchValue ? "pm" : "am";
+$: {
+    let fields = text.split(fieldSeparator);
+    hours = +fields[0];
+    minutes = +fields[1];
+    if (fields[1]?.length != 2) {
+        time = undefined;
+    }
+    else {
+        if (!isNaN(hours) && !isNaN(minutes) && checkHour(hours) && checkMinute(minutes) && fields.length == 2) {
+            if (hourFormat == '12') {
+                if (dayPeriod == 'am' && hours == 12)
+                    hours = 0;
+                else if (dayPeriod == 'pm' && hours != 12)
+                    hours += 12;
+            }
+            time = new Date();
+            time.setHours(hours, minutes, 0);
+        }
+        else
+            time = undefined;
+    }
+}
+let fontSizeNumeric = parseInt(fontSize, 10);
+</script>
+
+<div class="container"
+  style:width
+>
+  <div class="text-field" style:width="100%">
+    <Textfield
+      {placeholder}
+      variant="boxed"
+      {borderColor}
+      {borderWeight}
+      {focusedBoxShadow}
+      {fontSize}
+      width="100%"
+      bind:value={text}
+      paddingLeft="10px"
+    />
+  </div>
+  {#if hourFormat == "12"}
+    <div class="period-selector" style:height="{fontSizeNumeric+16}px">
+      <VerticalTextSwitch
+        bind:value={switchValue}
+        width="{fontSizeNumeric+16}px"
+        hoverBackgroundColor="rgba(0,0,0,0.05)"
+      >
+        <span slot="trueOption"
+          style:font-size={fontSize}
+        >
+          PM
+        </span>
+        <span slot="falseOption"
+          style:font-size={fontSize}
+        >
+          AM
+        </span>
+      </VerticalTextSwitch>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+  }
+  .period-selector {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: flex-start;
+    margin-left: 20px;
+  }
+</style>

package/dates/TimePickerTextField.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        hourFormat?: "12" | "24";
+        dayPeriod?: "am" | "pm";
+        time?: Date;
+        text?: string;
+        fieldSeparator?: string;
+        placeholder?: string;
+        focusedBoxShadow?: string;
+        borderColor?: string;
+        borderWeight?: string;
+        fontSize?: string;
+        width?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TimePickerTextFieldProps = typeof __propDef.props;
+export declare type TimePickerTextFieldEvents = typeof __propDef.events;
+export declare type TimePickerTextFieldSlots = typeof __propDef.slots;
+export default class TimePickerTextField extends SvelteComponentTyped<TimePickerTextFieldProps, TimePickerTextFieldEvents, TimePickerTextFieldSlots> {
+}
+export {};

package/forms/Textarea.svelte

@@ -0,0 +1,63 @@
+<script >import { v4 as uuidv4 } from 'uuid';
+export let label = null, placeholder = "placeholder", textAreaId = uuidv4(), fontFamily = "inherit", value = "", resizable = true, disabled = false, readOnly = false, maxLength = undefined, textColor = "black", border = "none", borderRadius = "5px", focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, labelFontSize = undefined, labelColor = undefined, width = "100%", height = "100%";
+</script>
+
+<div
+  class="container"
+>
+  {#if label}
+    <label
+      for={textAreaId}
+      style:font-size={labelFontSize}
+      style:color={labelColor}
+    >
+      {label}
+    </label>
+  {/if}
+  <textarea
+    style:width={width}
+    style:height={height}
+    style:font-family={fontFamily}
+    style:resize={resizable?"both":"none"}
+    style:font-size={fontSize}
+    style:border-radius={borderRadius}
+    style:background-color={backgroundColor}
+    style:color={textColor}
+    style:padding={padding}
+    style:padding-left={paddingLeft}
+    style:padding-right={paddingRight}
+    style:padding-bottom={paddingBottom}
+    style:padding-top={paddingTop}
+    style:border={border}
+    style:--textarea-focus-box-shadow={focusedBoxShadow}
+    bind:value={value}
+    id={textAreaId}
+    placeholder={placeholder}
+    maxlength={maxLength}
+    disabled={disabled}
+    readonly={readOnly}
+    ></textarea>
+</div>
+
+
+<style>
+  textarea {
+    display: block;
+    transition: all 0.3s;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 10px;
+    margin-left: 10px;
+  }
+
+  textarea:focus{
+    outline: none;
+    -webkit-box-shadow: var(--textarea-focus-box-shadow);
+    -moz-box-shadow: var(--textarea-focus-box-shadow);
+    -o-box-shadow: var(--textarea-focus-box-shadow);
+    box-shadow: var(--textarea-focus-box-shadow);
+  }
+
+</style>

package/forms/Textarea.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string;
+        placeholder?: string;
+        textAreaId?: string;
+        fontFamily?: string;
+        value?: string;
+        resizable?: boolean;
+        disabled?: boolean;
+        readOnly?: boolean;
+        maxLength?: number;
+        textColor?: string;
+        border?: string;
+        borderRadius?: string;
+        focusedBoxShadow?: string;
+        backgroundColor?: string;
+        padding?: string;
+        paddingLeft?: string;
+        paddingRight?: string;
+        paddingBottom?: string;
+        paddingTop?: string;
+        fontSize?: string;
+        labelFontSize?: string;
+        labelColor?: string;
+        width?: string;
+        height?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TextareaProps = typeof __propDef.props;
+export declare type TextareaEvents = typeof __propDef.events;
+export declare type TextareaSlots = typeof __propDef.slots;
+export default class Textarea extends SvelteComponentTyped<TextareaProps, TextareaEvents, TextareaSlots> {
+}
+export {};

package/forms/VerticalSwitch.svelte

@@ -0,0 +1,123 @@
+<script >export let value = false, height = "60px", width = "30px", rounded = false, backgroundColor = "#90CAF9", selectedOptionColor = backgroundColor, sliderColor = "white", optionColor = sliderColor, fontSize = "11px", animationDuration = "0.1s";
+</script>
+
+<div
+  class="container"
+  style:--vertical-switch-height={height}
+  style:--vertical-switch-width={width}
+  style:--vertical-switch-container-border-radius={rounded ? "500px" : "4px"}
+  style:--vertical-switch-slider-border-radius={rounded ? "100%" : "4px"}
+  style:--vertical-switch-background-color={backgroundColor}
+  style:--vertical-switch-selected-option-color={selectedOptionColor}
+  style:--vertical-switch-slider-color={sliderColor}
+  style:--vertical-switch-option-color={optionColor}
+  style:--vertical-switch-font-size={fontSize}
+  style:--vertical-switch-animation-duration={animationDuration}
+  >
+  <div
+    class="inner-container"
+    on:click={()=>value = !value}
+  >
+    <div
+      class={value?"first-option selected":"first-option"}
+    >
+      <slot name="trueOption">
+        1
+      </slot>
+    </div>
+    <div
+      class={value?"second-option":"second-option selected"}
+    >
+      <slot name="falseOption">
+        0
+      </slot>
+    </div>
+    <input
+      bind:checked={value}
+      type="checkbox"
+      on:change
+    />
+    <span
+      class={value?"slider top":"slider bottom"}
+    />
+  </div>
+</div>
+
+<style>
+  .container {
+    position: relative;
+    box-sizing: border-box;
+    width: var(--vertical-switch-width);
+  }
+
+  input {
+    position: absolute;
+    display: none;
+  }
+
+  .inner-container {
+    position: absolute;
+    width: 100%;
+    height: var(--vertical-switch-height);
+    background-color: var(--vertical-switch-background-color);
+    cursor: pointer;
+    text-align: center;
+    border-radius: var(--vertical-switch-container-border-radius)
+  }
+
+  .first-option {
+    width: 100%;
+    height: calc(var(--vertical-switch-width));
+    position: absolute;
+    overflow-x: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    color: var(--vertical-switch-option-color);
+    font-size: var(--vertical-switch-font-size);
+    user-select: none;
+    transition: var(--vertical-switch-animation-duration);
+  }
+
+  .second-option {
+    width: 100%;
+    height: calc(var(--vertical-switch-width));
+    position: absolute;
+    overflow-x: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: 0;
+    color: var(--vertical-switch-option-color);
+    font-size: var(--vertical-switch-font-size);
+    user-select: none;
+  }
+
+  .selected {
+    color: var(--vertical-switch-selected-option-color);
+    z-index: 5;
+    font-weight: bold;
+    transition: var(--vertical-switch-animation-duration);
+  }
+
+  .slider {
+    position: absolute;
+    --vertical-switch-slider-diameter: calc(var(--vertical-switch-width) - 4px);
+    width: var(--vertical-switch-slider-diameter);
+    height: var(--vertical-switch-slider-diameter);
+    border-radius: var(--vertical-switch-slider-border-radius);
+    background-color: var(--vertical-switch-slider-color);
+    left: 2px;
+    transition: var(--vertical-switch-animation-duration);
+  }
+
+  .top {
+    top: 2px;
+  }
+
+  .bottom {
+    top: calc(var(--vertical-switch-height) - var(--vertical-switch-slider-diameter) - 2px)
+  }
+
+</style>

package/forms/VerticalSwitch.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: boolean;
+        height?: string;
+        width?: string;
+        rounded?: boolean;
+        backgroundColor?: string;
+        selectedOptionColor?: string;
+        sliderColor?: string;
+        optionColor?: string;
+        fontSize?: string;
+        animationDuration?: string;
+    };
+    events: {
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trueOption: {};
+        falseOption: {};
+    };
+};
+export declare type VerticalSwitchProps = typeof __propDef.props;
+export declare type VerticalSwitchEvents = typeof __propDef.events;
+export declare type VerticalSwitchSlots = typeof __propDef.slots;
+export default class VerticalSwitch extends SvelteComponentTyped<VerticalSwitchProps, VerticalSwitchEvents, VerticalSwitchSlots> {
+}
+export {};

package/forms/VerticalTextSwitch.svelte

@@ -0,0 +1,65 @@
+<script >import { fly } from 'svelte/transition';
+export let value = false, height = "100%", width = "100%", backgroundColor = undefined, firstColor = undefined, secondColor = firstColor, fontSize = "12px", hoverBackgroundColor = undefined, hoverBoxShadow = undefined, animationDuration = 200;
+let optionHeight = undefined;
+</script>
+
+<div
+  class="container"
+  style:width
+  style:height
+  style:--vertical-text-switch-height={height}
+  style:--vertical-text-switch-hover-background-color={hoverBackgroundColor}
+  style:--vertical-text-switch-hover-box-shadow={hoverBoxShadow}
+  bind:clientHeight={optionHeight}
+  on:click={()=>value = !value}
+  style:background-color={backgroundColor}
+  style:padding="5px"
+>
+  {#if value}
+    <div
+      in:fly="{{ y: optionHeight/2, duration: animationDuration/2, delay: animationDuration/2}}"
+      out:fly="{{ y: -optionHeight/2, duration: animationDuration/2}}"
+      class="option"
+      style:color={firstColor}
+      style:font-size={fontSize}
+    >
+      <slot name="trueOption"></slot>
+    </div>
+  {:else}
+    <div
+      in:fly="{{ y: optionHeight/2, duration: animationDuration/2, delay: animationDuration/2}}"
+      out:fly="{{ y: -optionHeight/2, duration: animationDuration/2}}"
+      class="option"
+      style:color={secondColor}
+      style:font-size={fontSize}
+    >
+      <slot name="falseOption"></slot>
+    </div>
+  {/if}
+  <input type="checkbox" bind:value />
+</div>
+
+<style>
+  .container {
+    cursor: pointer;
+    border-radius: 5px;
+    overflow-y: hidden;
+  }
+
+  .container:hover {
+    background-color: var(--vertical-text-switch-hover-background-color);
+    box-shadow: var(--vertical-text-switch-hover-box-shadow);
+  }
+
+  .option {
+    height: var(--vertical-text-switch-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+  }
+
+  input {
+    display: none;
+  }
+</style>

package/forms/VerticalTextSwitch.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: boolean;
+        height?: string;
+        width?: string;
+        backgroundColor?: string;
+        firstColor?: string;
+        secondColor?: string;
+        fontSize?: string;
+        hoverBackgroundColor?: string;
+        hoverBoxShadow?: string;
+        animationDuration?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trueOption: {};
+        falseOption: {};
+    };
+};
+export declare type VerticalTextSwitchProps = typeof __propDef.props;
+export declare type VerticalTextSwitchEvents = typeof __propDef.events;
+export declare type VerticalTextSwitchSlots = typeof __propDef.slots;
+export default class VerticalTextSwitch extends SvelteComponentTyped<VerticalTextSwitchProps, VerticalTextSwitchEvents, VerticalTextSwitchSlots> {
+}
+export {};

package/navigation/TabSwitcher.svelte

@@ -1,7 +1,7 @@
 <script  context="module"></script>
 
 <script >import { onMount } from 'svelte';
-export let tabs = [], selected = undefined, mandatory = true, width = undefined, color = "rgb(51 65 85)", bookmarkColor = undefined;
+export let tabs = [], selected = undefined, mandatory = true, width = undefined, color = "rgb(51 65 85)", bookmarkColor = undefined, margin = "12px";
 let tabButtons = {};
 onMount(() => {
     if (mandatory && !selected && tabs.length > 0)
@@ -35,8 +35,8 @@ function setBookmarkPosition() {
       style:white-spaces="nowrap"
       style:-webkit-tap-highlight-color="rgba(0,0,0,0)"
       style:cursor="pointer"
-      style:margin-left="12px"
-      style:margin-right="12px"
+      style:margin-left={margin}
+      style:margin-right={margin}
       style:padding="8px"
       style:--tab-switcher-color={color}
       class:selected-tab={tab.name == selected}
@@ -53,6 +53,7 @@ function setBookmarkPosition() {
     class="bookmark"
   ></span>
   <span 
+    style:--tab-switcher-color={bookmarkColor || color}
     style:width={width}
     class="horizontal-guide"
   ></span>

package/navigation/TabSwitcher.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         width?: string;
         color?: string;
         bookmarkColor?: string;
+        margin?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.48",
+  "version": "0.0.51",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -77,6 +77,7 @@
     "./dates/Calendar.svelte": "./dates/Calendar.svelte",
     "./dates/DatePicker.svelte": "./dates/DatePicker.svelte",
     "./dates/MonthSelector.svelte": "./dates/MonthSelector.svelte",
+    "./dates/TimePickerTextField.svelte": "./dates/TimePickerTextField.svelte",
     "./dates/YearSelector.svelte": "./dates/YearSelector.svelte",
     "./dates/utils": "./dates/utils.js",
     "./dialogs/Dialog.svelte": "./dialogs/Dialog.svelte",
@@ -85,7 +86,10 @@
     "./forms/FileInput.svelte": "./forms/FileInput.svelte",
     "./forms/FileInputList.svelte": "./forms/FileInputList.svelte",
     "./forms/Switch.svelte": "./forms/Switch.svelte",
+    "./forms/Textarea.svelte": "./forms/Textarea.svelte",
     "./forms/Textfield.svelte": "./forms/Textfield.svelte",
+    "./forms/VerticalSwitch.svelte": "./forms/VerticalSwitch.svelte",
+    "./forms/VerticalTextSwitch.svelte": "./forms/VerticalTextSwitch.svelte",
     ".": "./index.js",
     "./loaders/CircularLoader.svelte": "./loaders/CircularLoader.svelte",
     "./loaders/Skeleton.svelte": "./loaders/Skeleton.svelte",