@likable-hair/svelte 2.0.8 → 3.0.0

package/dist/components/simple/buttons/LinkButton.svelte

@@ -1,6 +1,8 @@
-<script>import { createEventDispatcher } from "svelte";
+<script>import "./LinkButton.css";
+import { createEventDispatcher } from "svelte";
 import Icon from "../media/Icon.svelte";
-export let _color = null, _fontSize = null, _lineHeight = null, _padding = null, _backgroundColor = null, _hoverBackgroundColor = null, _borderRadius = null, _width = null, _height = null, _gap = null, _fontWeight = null;
+let clazz = "";
+export { clazz as class };
 export let disabled = false, href, prependIcon = void 0, appendIcon = void 0, iconSize = void 0, target = void 0;
 const dispatch = createEventDispatcher();
 function handleClick(event) {
@@ -25,18 +27,7 @@ function handleKeyPress(event) {
   href={href}
   target={target}
   rel={target == '_blank' ? 'noreferrer' : undefined}
-  style:--link-button-color={_color}
-  style:--link-button-width={_width}
-  style:--link-button-height={_height}
-  style:--link-button-font-size={_fontSize}
-  style:--link-button-font-weight={_fontWeight}
-  style:--link-button-line-height={_lineHeight}
-  style:--link-button-padding={_padding}
-  style:--link-button-background-color={_backgroundColor}
-  style:--link-button-border-radius={_borderRadius}
-  style:--link-button-gap={_gap}
-  style:--link-button-hover-background-color={_hoverBackgroundColor}
-  class="link"
+  class="link {clazz}"
 >
   <slot name="prepend" {prependIcon} {iconSize}>
     {#if !!prependIcon}
@@ -53,16 +44,45 @@ function handleKeyPress(event) {
 
 <style>
   .link {
-    color: var(--link-button-color, inherit);
-    font-size: var(--link-button-font-size, .875rem);
-    line-height: var(--link-button-line-height, 1.5rem);
-    padding: var(--link-button-padding, 0.25rem 0.75rem 0.25rem 0.75rem);
-    background-color: var(--link-button-background-color, rgb(244 244 245/1));
-    border-radius: var(--link-button-border-radius, 9999px);
-    width: var(--link-button-width, fit-content);
-    height: var(--link-button-height, auto);
-    gap: var(--link-button-gap, 0.5rem);
-    font-weight: var(--link-button-font-weight, 500);
+    color: var(
+      --link-button-color,
+      var(--link-button-default-color)
+    );
+    font-size: var(
+      --link-button-font-size,
+      var(--link-button-default-font-size)
+    );
+    line-height: var(
+      --link-button-line-height,
+      var(--link-button-default-line-height)
+    );
+    padding: var(
+      --link-button-padding, 
+      var(--link-button-default-padding)
+    );
+    background-color: var(
+      --link-button-background-color, 
+      var(--link-button-default-background-color)
+    );
+    border-radius: var(
+      --link-button-border-radius, 
+      var(--link-button-default-border-radius)
+    );
+    width: var(--link-button-width, 
+      var(--link-button-default-width)
+    );
+    height: var(
+      --link-button-height,
+      var(--link-button-default-height)
+    );
+    gap: var(
+      --link-button-gap, 
+      var(--link-button-default-gap)
+    );
+    font-weight: var(
+      --link-button-font-weight, 
+      var(--link-button-default-font-weight)
+    );
     display: flex;
     justify-content: center;
     align-content: center;
@@ -73,6 +93,9 @@ function handleKeyPress(event) {
   }
 
   .link:hover {
-    background-color: var(--link-button-hover-background-color, rgb(228 228 231/1));
+    background-color: var(
+      --link-button-hover-background-color,
+      var(--link-button-default-hover-background-color)
+    );
   }
 </style>

package/dist/components/simple/buttons/LinkButton.svelte.d.ts

@@ -1,17 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import './LinkButton.css';
 declare const __propDef: {
     props: {
-        _color?: string | null | undefined;
-        _fontSize?: string | null | undefined;
-        _lineHeight?: string | null | undefined;
-        _padding?: string | null | undefined;
-        _backgroundColor?: string | null | undefined;
-        _hoverBackgroundColor?: string | null | undefined;
-        _borderRadius?: string | null | undefined;
-        _width?: string | null | undefined;
-        _height?: string | null | undefined;
-        _gap?: string | null | undefined;
-        _fontWeight?: string | null | undefined;
+        class?: string | undefined;
         disabled?: boolean | undefined;
         href: string;
         prependIcon?: string | undefined;

package/dist/components/simple/common/CollapsibleDivider.css

@@ -0,0 +1,14 @@
+:root {
+  --collapsible-divider-default-margin-right: .0rem;
+  --collapsible-divider-default-margin-left: .5rem;
+  --collapsible-divider-default-margin-top: .5rem;
+  --collapsible-divider-default-margin-bottom: .5rem;
+  --collapsible-divider-default-background-color: rgb(var(--global-color-contrast-500), .5);
+  --collapsible-divider-default-line-border-radius: .5rem;
+  --collapsible-divider-default-line-height: .1rem;
+  --collapsible-divider-default-button-border-radius: 9999px;
+  --collapsible-divider-default-button-border: .1rem solid;
+  --collapsible-divider-default-button-border-color: rgb(var(--global-color-contrast-500), .5);
+  --collapsible-divider-default-button-height: 25px;
+  --collapsible-divider-default-button-width: 25px;
+}

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

@@ -1,9 +1,8 @@
-<script>import { createEventDispatcher } from "svelte";
+<script>import "./CollapsibleDivider.css";
+import { createEventDispatcher } from "svelte";
 import Icon from "../media/Icon.svelte";
 let dispatch = createEventDispatcher();
-export let collapsed = false, openedIconName = "mdi-chevron-left", collapsedIconName = "mdi-chevron-right", iconSize = 12, disabled = false;
-export let _height = "1px", _radius = "0.5px", _marginTop = "10px", _marginBottom = "10px", _marginLeft = "5px", _marginRight = "5px", _dividerColor = "#d2d2d2", _circleColor = "#d2d2d2", _circleBorder = "1px solid", _iconColor = "grey";
-let buttonHeight;
+export let collapsed = false, openedIconName = "mdi-chevron-left", collapsedIconName = "mdi-chevron-right", disabled = false;
 function handleCollapseClick() {
   if (!disabled) {
     collapsed = !collapsed;
@@ -13,36 +12,93 @@ function handleCollapseClick() {
 </script>
 
 <div
-  style:display="flex"
-  style:margin-right={_marginRight}
-  style:margin-left={_marginLeft}
-  style:margin-top={_marginTop}
-  style:margin-bottom={_marginBottom}
-  style:align-items="center"
+  class="container"
 >
   <div
-    style:background-color={_dividerColor}
-    style:border-radius={_radius}
-    style:height={_height}
-    style:flex-grow={1}
+    class="divider"
   />
   <div
-    style:border-radius={buttonHeight + 'px'}
-    style:border={_circleBorder}
-    style:border-color={_circleColor}
-    bind:clientHeight={buttonHeight}
-    style:width={buttonHeight + 'px'}
-    style:display="flex"
-    style:justify-content="center"
-    style:cursor="pointer"
-    style:color={_iconColor}
-    style:opacity={disabled ? 0 : 1}
+    class="button"
+    class:disabled={disabled}
     on:click="{handleCollapseClick}"
     on:click
     on:keydown
     on:keyup
     on:keypress
   >
-    <Icon name={collapsed ? collapsedIconName : openedIconName} size={iconSize}></Icon>
+    <Icon 
+      name={collapsed ? collapsedIconName : openedIconName}
+      --icon-default-color="var(--collapsible-divider-button-border-color, var(--collapsible-divider-default-button-border-color))"
+    ></Icon>
   </div>
 </div>
+
+<style>
+  .container {
+    display: flex;
+    margin-right: var(
+      --collapsible-divider-margin-right,
+      var(--collapsible-divider-default-margin-right)
+    );
+    margin-left: var(
+      --collapsible-divider-margin-left,
+      var(--collapsible-divider-default-margin-left)
+    );
+    margin-top: var(
+      --collapsible-divider-margin-top,
+      var(--collapsible-divider-default-margin-top)
+    );
+    margin-bottom: var(
+      --collapsible-divider-margin-bottom,
+      var(--collapsible-divider-default-margin-bottom)
+    );
+    align-items: center;
+  }
+
+  .divider {
+    flex-grow: 1;
+    background-color: var(
+      --collapsible-divider-background-color,
+      var(--collapsible-divider-default-background-color)
+    );
+    border-radius: var(
+      --collapsible-divider-line-border-radius,
+      var(--collapsible-divider-default-line-border-radius)
+    );
+    height: var(
+      --collapsible-divider-line-height,
+      var(--collapsible-divider-default-line-height)
+    );
+  }
+
+  .button {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: var(
+      --collapsible-divider-button-border-radius,
+      var(--collapsible-divider-default-button-border-radius)
+    );
+    border: var(
+      --collapsible-divider-button-border,
+      var(--collapsible-divider-default-button-border)
+    );
+    border-color: var(
+      --collapsible-divider-button-border-color,
+      var(--collapsible-divider-default-button-border-color)
+    );
+    width: var(
+      --collapsible-divider-button-width,
+      var(--collapsible-divider-default-button-width)
+    );
+    height: var(
+      --collapsible-divider-button-height,
+      var(--collapsible-divider-default-button-height)
+    );
+  }
+
+  .button.disabled {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+</style>

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

@@ -1,21 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import './CollapsibleDivider.css';
 declare const __propDef: {
     props: {
         collapsed?: boolean | undefined;
         openedIconName?: string | undefined;
         collapsedIconName?: string | undefined;
-        iconSize?: number | undefined;
         disabled?: boolean | undefined;
-        _height?: string | undefined;
-        _radius?: string | undefined;
-        _marginTop?: string | undefined;
-        _marginBottom?: string | undefined;
-        _marginLeft?: string | undefined;
-        _marginRight?: string | undefined;
-        _dividerColor?: string | undefined;
-        _circleColor?: string | undefined;
-        _circleBorder?: string | undefined;
-        _iconColor?: string | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -9,8 +9,8 @@ export let open = false, refreshPosition = false, activator = void 0, anchor = "
 }, outAnimation = fly, outAnimationConfig = {
   duration: 100,
   y: 10
-}, menuElement = void 0;
-let zIndex = 50, currentUid = createId();
+}, menuElement = void 0, openingId = void 0;
+let zIndex = 50, currentUid = createId(), closeController;
 function calculateMenuPosition(params) {
   if (params.menuElement) {
     if (params.activator) {
@@ -52,6 +52,19 @@ function calculateMenuPosition(params) {
 }
 $:
   if (open) {
+    if (!!openingId) {
+      const controllers = document.querySelectorAll(`[data-operation="close"][data-opening-id="${openingId}"]`);
+      for (let k = 0; k < controllers.length; k += 1) {
+        if (controllers[k] !== closeController) {
+          const clickEvent = new MouseEvent("click", {
+            bubbles: true,
+            cancelable: true,
+            view: window
+          });
+          controllers[k].dispatchEvent(clickEvent);
+        }
+      }
+    }
     let otherMenus = document.querySelectorAll("[data-menu=true]");
     let otherDialogs = document.querySelectorAll("[data-dialog=true]");
     let maxZIndex = void 0;
@@ -119,8 +132,19 @@ function getPositionedAncestor(elem) {
     return elem;
   return getPositionedAncestor(elem.parentElement);
 }
+function handleCloseControllerClick() {
+  open = false;
+}
 </script>
 
+<div 
+  class="controller" 
+  data-operation="close" 
+  data-opening-id={openingId} 
+  on:click={handleCloseControllerClick} 
+  on:keypress={handleCloseControllerClick}
+  bind:this={closeController}
+></div>
 {#if open}
   <div
     bind:this={menuElement}
@@ -142,3 +166,9 @@ function getPositionedAncestor(elem) {
     <slot />
   </div>
 {/if}
+
+<style>
+  .controller {
+    visibility: hidden;
+  }
+</style>

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

@@ -20,6 +20,7 @@ declare const __propDef: {
         outAnimation?: ((node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig) | undefined;
         outAnimationConfig?: SlideParams | FlyParams | FadeParams | undefined;
         menuElement?: HTMLElement | undefined;
+        openingId?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/simple/dates/Calendar.css

@@ -0,0 +1,10 @@
+:root {
+  --calendar-default-height: 100%;
+  --calendar-default-width: 100%;
+  --calendar-default-day-width: 30px;
+  --calendar-default-day-height: 30px;
+  --calendar-default-day-hover-background-color: rgb(var(--global-color-primary-600), .3);
+  --calendar-default-selected-day-background-color: rgb(var(--global-color-primary-600));
+  --calendar-default-selected-day-color: rgb(var(--global-color-grey-50));
+  --calendar-default-grid-gap: 1px;
+}

package/dist/components/simple/dates/Calendar.svelte

@@ -1,6 +1,9 @@
-<script>import { fly } from "svelte/transition";
+<script>import "./Calendar.css";
+import { fly } from "svelte/transition";
 import { getDateRowsStats, getDaysNames } from "./utils";
-export let selectedDate = void 0, visibleMonth = (/* @__PURE__ */ new Date()).getMonth(), visibleYear = (/* @__PURE__ */ new Date()).getFullYear(), locale = "it", showExtraMonthDays = true, showHeader = true, height = "100%", width = "100%", dayWidth = "30px", dayHeight = "30px", dayHoverColor = "#c9c8c873", daySelectedColor = "#adadad", selectedTextColor = "black", gridGap = "1px", dayBackgroundColor = void 0, animationDuration = 200;
+let clazz = {};
+export { clazz as class };
+export let selectedDate = void 0, visibleMonth = (/* @__PURE__ */ new Date()).getMonth(), visibleYear = (/* @__PURE__ */ new Date()).getFullYear(), locale = "it", showExtraMonthDays = true, showHeader = true, animationDuration = 200;
 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
 function handleDayClick(dateStat, extraMonth) {
@@ -23,18 +26,17 @@ function handleDayClick(dateStat, extraMonth) {
 }
 </script>
 
-<div style:height style:width>
+<div class="container {clazz.container || ''}">
   {#key visibleMonth}
     <div
       in:fly={{ delay: animationDuration, duration: animationDuration, y: 30 }}
       out:fly|local={{ duration: animationDuration, y: -30 }}
-      style:gap={gridGap}
       class="grid-layout"
     >
       {#if showHeader}
         {#each getDaysNames(locale).map((name) => name[0]) as weekHeader, index}
           <slot name="weekHeader" header={weekHeader} {index}>
-            <div class="week-header-slot">{weekHeader}</div>
+            <div class="week-header-slot {clazz.weekHeader || ''}">{weekHeader}</div>
           </slot>
         {/each}
       {/if}
@@ -49,14 +51,7 @@ function handleDayClick(dateStat, extraMonth) {
           {#if (!showExtraMonthDays && day.month == visibleMonth) || showExtraMonthDays}
             <div
               style:border-radius="50%"
-              style:background-color={dayBackgroundColor}
-              style:height={dayHeight}
-              style:width={dayWidth}
-              style:cursor={extraMonth ? "default" : "pointer"}
-              style:--calendar-hover-color={extraMonth ? "" : dayHoverColor}
-              style:--calendar-selected-color={daySelectedColor}
-              style:--calendar-selected-text-color={selectedTextColor}
-              class="day-slot"
+              class="day-slot {clazz.day || ''}"
               class:extra-month={extraMonth}
               class:selected
               class:not-selected={!selected}
@@ -75,10 +70,25 @@ function handleDayClick(dateStat, extraMonth) {
 </div>
 
 <style>
+  .container {
+    height: var(
+      --calendar-height,
+      var(--calendar-default-height)
+    );
+    width: var(
+      --calendar-width,
+      var(--calendar-default-width)
+    );
+  }
+
   .grid-layout {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     height: 100%;
+    gap: var(
+      --calendar-grid-gap,
+      var(--calendar-default-grid-gap)
+    );
   }
 
   .day-slot {
@@ -88,6 +98,22 @@ function handleDayClick(dateStat, extraMonth) {
     justify-self: center;
     align-self: center;
     transition: background-color 0.1s ease-in;
+    height: var(
+      --calendar-day-height,
+      var(--calendar-default-day-height)
+    );
+    width: var(
+      --calendar-day-width,
+      var(--calendar-default-day-width)
+    );
+    background-color: var(
+      --calendar-day-background-color,
+      var(--calendar-default-day-background-color)
+    );
+  }
+
+  .day-slot:not(.extra-month) {
+    cursor: pointer;
   }
 
   .extra-month {
@@ -95,12 +121,21 @@ function handleDayClick(dateStat, extraMonth) {
   }
 
   .selected {
-    background-color: var(--calendar-selected-color);
-    color: var(--calendar-selected-text-color);
+    background-color: var(
+      --calendar-selected-day-background-color,
+      var(--calendar-default-selected-day-background-color)
+    );
+    color: var(
+      --calendar-selected-day-color,
+      var(--calendar-default-selected-day-color)
+    );
   }
 
-  .day-slot.not-selected:hover {
-    background-color: var(--calendar-hover-color);
+  .day-slot.not-selected:hover:not(.extra-month) {
+    background-color: var(
+      --calendar-day-hover-background-color,
+      var(--calendar-default-day-hover-background-color)
+    );
   }
 
   .week-header-slot {

package/dist/components/simple/dates/Calendar.svelte.d.ts

@@ -1,22 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
+import './Calendar.css';
 import type { DateStat, Locale } from "./utils";
 declare const __propDef: {
     props: {
-        selectedDate?: Date | undefined;
+        class?: {
+            container?: string | undefined;
+            weekHeader?: string | undefined;
+            day?: string | undefined;
+        } | undefined;
+        selectedDate?: Date | undefined | null;
         visibleMonth?: number | undefined;
         visibleYear?: number | undefined;
         locale?: Locale | undefined;
         showExtraMonthDays?: boolean | undefined;
         showHeader?: boolean | undefined;
-        height?: string | undefined;
-        width?: string | undefined;
-        dayWidth?: string | undefined;
-        dayHeight?: string | undefined;
-        dayHoverColor?: string | undefined;
-        daySelectedColor?: string | undefined;
-        selectedTextColor?: string | undefined;
-        gridGap?: string | undefined;
-        dayBackgroundColor?: string | undefined;
         animationDuration?: number | undefined;
     };
     events: {

package/dist/components/simple/dates/DatePicker.css

@@ -0,0 +1,9 @@
+:root {
+  --date-picker-default-primary-color: rgb(var(--global-color-primary-600));
+  --date-picker-default-height: 400px;
+  --date-picker-default-width: 100%;
+  --date-picker-default-header-background-color: rgb(var(--global-color-primary-600));
+  --date-picker-default-header-color: rgb(var(--global-color-grey-50));
+  --date-picker-default-box-shadow: 0 4px 6px -1px rgb(var(--global-color-contrast-300), .1),
+    0 2px 4px -2px rgb(var(--global-color-contrast-300), .1);
+}