@likable-hair/svelte 2.0.8 → 3.0.0

package/dist/components/simple/lists/SelectableMenuList.svelte

@@ -0,0 +1,107 @@
+<script context="module"></script>
+
+<script>import "./SelectableMenuList.css";
+import Icon from "../media/Icon.svelte";
+import { createEventDispatcher } from "svelte";
+let dispatch = createEventDispatcher();
+export let collapsed = false, items = [], selected = void 0;
+function handleItemClick(item) {
+  if (item.disabled)
+    return;
+  selected = item.name;
+  dispatch("select", {
+    item
+  });
+}
+</script>
+
+<div
+  class="menu-container"
+  class:collapsed={collapsed}
+>
+  <ul>
+    {#each items as item}
+      {#if !item.divider }
+        <li
+          class="menu-row"
+          aria-label={item.label}
+          class:selected={!!selected && item.name === selected}
+          class:disabled={item.disabled}
+          on:click={() => { if(!item.divider) handleItemClick(item) }}
+          on:keypress={() => { if(!item.divider) handleItemClick(item) }}
+        >
+          <div class="menu-icon">
+            <Icon 
+              name={item.icon}
+              --icon-default-size="1.5rem"
+            ></Icon>
+          </div>
+          {#if !collapsed}
+            <div class="menu-name">{item.label}</div>
+          {/if}
+        </li>
+      {:else}
+        <div
+          style:margin-top={item.marginTop}
+          style:margin-bottom={item.marginBottom}
+          style:margin-right={item.marginRight}
+          style:margin-left={item.marginLeft}
+          class="divider"
+        ></div>
+      {/if}
+    {/each}
+  </ul>
+</div>
+
+<style>
+  ul {
+    list-style: none;
+    padding-left: 0rem;
+    position: relative;
+    line-height: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(
+      --selectable-menu-list-spacing,
+      var(--selectable-menu-list-default-spacing)
+    );
+  }
+
+  .menu-row {
+    display: flex;
+    gap: var(
+      --selectable-menu-list-icon-gap,
+      var(--selectable-menu-list-default-icon-gap)
+    );
+    cursor: pointer;
+    padding-left: .8rem;
+  }
+
+  .menu-name {
+    white-space: nowrap;
+  }
+
+  .menu-row.disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
+
+  .menu-row.selected {
+    color: var(
+      --selectable-menu-list-selected-color,
+      var(--selectable-menu-list-default-selected-color)
+    )
+  }
+
+  .divider {
+    height: var(
+      --selectable-menu-list-divider-height,
+      var(--selectable-menu-list-default-divider-height)
+    );
+    background-color: var(
+      --selectable-menu-list-divider-background-color,
+      var(--selectable-menu-list-default-divider-background-color)
+    );
+  }
+</style>

package/dist/components/simple/lists/SelectableMenuList.svelte.d.ts

@@ -0,0 +1,38 @@
+import { SvelteComponentTyped } from "svelte";
+type Divider = {
+    divider: true;
+    marginTop?: string;
+    marginBottom?: string;
+    marginRight?: string;
+    marginLeft?: string;
+};
+type Item = {
+    name: string | number;
+    label: string;
+    icon: string;
+    disabled?: boolean;
+    divider?: undefined | false;
+};
+export type MenuItem = Divider | Item;
+import './SelectableMenuList.css';
+declare const __propDef: {
+    props: {
+        collapsed?: boolean | undefined;
+        items?: MenuItem[] | undefined;
+        selected?: string | number | undefined;
+    };
+    events: {
+        select: CustomEvent<{
+            item: Item;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectableMenuListProps = typeof __propDef.props;
+export type SelectableMenuListEvents = typeof __propDef.events;
+export type SelectableMenuListSlots = typeof __propDef.slots;
+export default class SelectableMenuList extends SvelteComponentTyped<SelectableMenuListProps, SelectableMenuListEvents, SelectableMenuListSlots> {
+}
+export {};

package/dist/components/simple/lists/SelectableVerticalList.svelte

@@ -2,7 +2,7 @@
 
 <script>import keyboarder from "../../../utils/keyboarder";
 import { createEventDispatcher, onMount } from "svelte";
-export let elementPadding = ".75rem 1rem .75rem 1rem", elementCursor = "pointer", width = void 0, maxWidth = void 0, height = void 0, maxHeight = void 0, selectionBackgrounColor = "rgb(250 250 250/1)", selectionColor = "inherit", activeKeyboard = false, loopSelection = true, selected = void 0, elements = [];
+export let elementPadding = ".75rem 1rem .75rem 1rem", elementCursor = "pointer", width = void 0, maxWidth = void 0, height = void 0, maxHeight = void 0, selectionBackgrounColor = "rgb(var(--global-color-background-300))", selectionColor = "inherit", activeKeyboard = false, loopSelection = true, selected = void 0, elements = [];
 let dispatch = createEventDispatcher();
 $:
   selectedIndex = elements.findIndex((el) => el.name == selected);

package/dist/components/simple/lists/SidebarMenuList.css

@@ -0,0 +1,7 @@
+:root {
+  --sidebar-menu-list-default-primary-color: rgb(var(--global-color-primary-500));
+  --sidebar-menu-list-default-selected-text-color: rgb(var(--global-color-primary-500));
+  --sidebar-menu-list-default-selected-font-weight: 600;
+  --sidebar-menu-list-default-color: inherit;
+  --sidebar-menu-list-default-hover-color: inherit;
+}

package/dist/components/simple/lists/SidebarMenuList.svelte

@@ -1,11 +1,13 @@
 <script context="module"></script>
 
-<script>import { page } from "$app/stores";
+<script>import "./SidebarMenuList.css";
+import { page } from "$app/stores";
 export let menus, level = 0, selected = void 0, bookmarkColor = "black", color = "inherit", hoverColor = "inherit", selectedTextColor = "inherit", selectedFontWeight = "600", autoDetectUrl = false;
 let selectedIndex = void 0;
 page.subscribe(() => {
   if (autoDetectUrl) {
-    selected = getMenuNameMatchingUrl({ menus });
+    const results = getMenuNameMatchingUrl({ menus });
+    selected = results.name;
   }
 });
 $:
@@ -48,18 +50,29 @@ function getSelectionIndex(params) {
   return { found: false, offset: initialOffset };
 }
 function getMenuNameMatchingUrl(params) {
+  let foundName = void 0;
+  let foundMatchType = void 0;
   for (let i = 0; i < params.menus.length; i += 1) {
     let currentMenu = params.menus[i];
     if (!!currentMenu.children) {
-      let foundName = getMenuNameMatchingUrl({ menus: currentMenu.children });
-      if (foundName !== void 0)
-        return foundName;
+      let found = getMenuNameMatchingUrl({ menus: currentMenu.children });
+      if (found.name !== void 0) {
+        foundName = found.name;
+        foundMatchType = found.matchType;
+      }
     }
-    if (!!currentMenu.url && $page.url.pathname.startsWith(currentMenu.url)) {
-      return currentMenu.name;
+    if (!!currentMenu.url && $page.url.pathname === currentMenu.url) {
+      foundName = currentMenu.name;
+      foundMatchType = "equal";
+    } else if (foundMatchType !== "equal" && !!currentMenu.url && $page.url.pathname.startsWith(currentMenu.url)) {
+      foundName = currentMenu.name;
+      foundMatchType = "startsWith";
     }
   }
-  return void 0;
+  return {
+    name: foundName,
+    matchType: foundMatchType
+  };
 }
 function handleUrlClick(e, menu) {
   if (menu.disabled)
@@ -129,8 +142,8 @@ function handleUrlClick(e, menu) {
   }
 
   .guide {
-    background-color: rgba(24,24,27,.1);
-    width: 2px;
+    background-color: rgb(var(--global-color-contrast-50));
+    width: 1px;
     position: absolute;
     top: 0;
     bottom: 0;
@@ -138,7 +151,10 @@ function handleUrlClick(e, menu) {
   }
 
   .bookmark {
-    background-color: var(--sidebar-menu-list-primary-color);
+    background-color: var(
+      --sidebar-menu-list-primary-color,
+      var(--sidebar-menu-list-default-primary-color)
+    );
     width: 2px;
     position: absolute;
     top: calc((var(--sidebar-menu-list-selected-index) - 1) * 2.2rem);
@@ -152,18 +168,30 @@ function handleUrlClick(e, menu) {
   .menu-link {
     padding-left: 0.5rem;
     text-decoration: none;
-    color: var(--sidebar-menu-list-color);
+    color: var(
+      --sidebar-menu-list-color,
+      var(--sidebar-menu-list-default-color)
+    );
     transition-property: color;
     transition-duration: .4s;
     transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
   }
 
   .menu-link:hover {
-    color: var(--sidebar-menu-list-hover-color)
+    color: var(
+      --sidebar-menu-list-hover-color,
+      var(--sidebar-menu-list-default-hover-color)
+    )
   }
 
   .menu-link.active {
-    color: var(--sidebar-menu-list-selected-text-color);
-    font-weight: var(--sidebar-menu-list-selected-font-weight)
+    color: var(
+      --sidebar-menu-list-selected-text-color,
+      var(--sidebar-menu-list-default-selected-text-color)
+    );
+    font-weight: var(
+      --sidebar-menu-list-selected-font-weight,
+      var(--sidebar-menu-list-default-selected-font-weight)
+    )
   }
 </style>

package/dist/components/simple/lists/SidebarMenuList.svelte.d.ts

@@ -6,6 +6,7 @@ export type Menu = {
     disabled?: boolean;
     children?: Menu[];
 };
+import './SidebarMenuList.css';
 declare const __propDef: {
     props: {
         menus: Menu[];

package/dist/components/simple/loaders/CircularLoader.css

@@ -0,0 +1,5 @@
+:root {
+  --circular-loader-default-width: 30px;
+  --circular-loader-default-height: 30px;
+  --circular-loader-default-color: var(global-color-primary-500);
+}

package/dist/components/simple/loaders/CircularLoader.svelte

@@ -1,13 +1,14 @@
-<script>export let loading = true, height = "30px", width = "30px", color = "black";
+<script>import "./CircularLoader.css";
+let clazz = "";
+export { clazz as class };
+export let loading = true;
 </script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="21.904761904761905 21.904761904761905 43.80952380952381 43.80952380952381"
-  style:color
-  style:height
-  style:width
   class:active={loading}
+  class={clazz}
 >
   <circle
     fill="transparent"
@@ -23,6 +24,21 @@
 </svg>
 
 <style>
+  svg {
+    height: var(
+      --circular-loader-height,
+      var(--circular-loader-default-height)
+    );
+    width: var(
+      --circular-loader-width,
+      var(--circular-loader-default-width)
+    );
+    width: var(
+      --circular-loader-color,
+      var(--circular-loader-default-color)
+    );
+  }
+
   circle.active {
     -webkit-animation: progress-circular-dash 1.4s ease-in-out infinite;
     animation: progress-circular-dash 1.4s ease-in-out infinite;

package/dist/components/simple/loaders/CircularLoader.svelte.d.ts

@@ -1,10 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import './CircularLoader.css';
 declare const __propDef: {
     props: {
+        class?: string | undefined;
         loading?: boolean | undefined;
-        height?: string | undefined;
-        width?: string | undefined;
-        color?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/simple/media/Icon.svelte

@@ -1,22 +1,33 @@
-<script>export let name, size = 15, color = "", click = false;
+<script>export let name, click = false;
 let clazz = "";
 export { clazz as class };
 import "../common/materialDesign.css";
 </script>
 
 <span
-  style:font-size={size + "pt"}
-  style:color
   class="icon mdi {name} {clazz}"
+  class:click
   on:click
   on:keypress
-  style:cursor={click ? "pointer" : "default"}
-  style:pointer-events={click ? "auto" : "none"}
 />
 
 <style>
   .icon {
-    font-size: var(--size);
-    color: var(--color);
+    font-size: var(
+      --icon-size,
+      var(--icon-default-size)
+    );
+    color: var(
+      --icon-color,
+      var(--icon-default-color)
+    );
+  }
+  .icon.click {
+    cursor: var(--icon-cursor, pointer);
+    pointer-events: var(--icon-pointer-events, auto);
+  }
+  .icon.click:not(.click) {
+    cursor: var(--icon-cursor, default);
+    pointer-events: var(--icon-pointer-events, none);
   }
 </style>

package/dist/components/simple/media/Icon.svelte.d.ts

@@ -3,8 +3,6 @@ import "../common/materialDesign.css";
 declare const __propDef: {
     props: {
         name: string;
-        size?: number | undefined;
-        color?: string | undefined;
         click?: boolean | undefined;
         class?: string | undefined;
     };

package/dist/components/simple/navigation/Chip.css

@@ -0,0 +1,14 @@
+:root {
+  --chip-default-border-radius: 9999px;
+  --chip-default-label-border-radius: 5px;
+  --chip-default-min-height: 2rem;
+  --chip-default-padding: 2px 10px;
+  --chip-default-background-color: rgb(var(--global-color-primary-500));
+  --chip-default-outlined-background-color: transparent;
+  --chip-default-color: rgb(var(--global-color-grey-50));
+  --chip-default-outlined-color: rgb(var(--global-color-primary-500));
+  --chip-default-font-size: inherit;
+  --chip-default-line-height: inherit;
+  --chip-default-cursor: pointer;
+  --chip-default-hover-background-color: rgb(var(--global-color-primary-600))
+}

package/dist/components/simple/navigation/Chip.svelte

@@ -1,7 +1,8 @@
-<script>import Icon from "../media/Icon.svelte";
+<script>import "./Chip.css";
+import Icon from "../media/Icon.svelte";
 import Button from "../buttons/Button.svelte";
 import { createEventDispatcher } from "svelte";
-export let close = false, closeIcon = "mdi-close-circle", color = "blue", textColor = "white", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, size = 12;
+export let close = false, closeIcon = "mdi-close-circle", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, buttonTabIndex = null;
 const dispatch = createEventDispatcher();
 function handleChipClick() {
   dispatch("click");
@@ -13,9 +14,6 @@ function handleCloseClick() {
 
 <div
   class="chip"
-  style:border-radius={label ? "5px" : "100px"}
-  style:background-color={color}
-  style:color={outlined ? color : textColor}
   class:label
   class:outlined
   class:disabled
@@ -24,19 +22,23 @@ function handleCloseClick() {
 >
   {#if filter}
     <div class="icon-before">
-      <Icon name={filterIcon} {size} />
+      <Icon name={filterIcon} />
     </div>
   {/if}
-  <div class="text" style:font-size="{size}pt" style:line-height="{size}pt">
+  <div 
+    class="text" 
+  >
     <slot />
   </div>
   {#if close}
     <div class="icon-after">
       <Button
         icon={closeIcon}
-        iconSize={size}
-        type="icon"
-        hoverBackgroundColor="none"
+        buttonType="icon"
+        tabindex={buttonTabIndex}
+        --button-background-color="transparent"
+        --button-padding="0px"
+        --button-color="var(--chip-color, var(--chip-default-color))"
         on:click={handleCloseClick}
       />
     </div>
@@ -48,10 +50,59 @@ function handleCloseClick() {
     text-align: center;
     display: flex;
     align-items: center;
+    min-height: var(
+      --chip-min-height,
+      var(--chip-default-min-height)
+    );
+    height: var(
+      --chip-height,
+      var(--chip-default-height)
+    );
+    padding: var(
+      --chip-padding,
+      var(--chip-default-padding)
+    );
+    cursor: var(
+      --chip-cursor,
+      var(--chip-default-cursor)
+    );
   }
+
+  .chip:not(.outlined) {
+    background-color: var(
+      --chip-background-color,
+      var(--chip-default-background-color)
+    );
+    color: var(
+      --chip-color,
+      var(--chip-default-color)
+    );
+  }
+
+  .chip:not(.outlined):hover {
+    background-color: var(
+      --chip-hover-background-color,
+      var(--chip-default-hover-background-color)
+    );
+  }
+
+  .chip:not(.label) {
+    border-radius: var(
+      --chip-border-radius,
+      var(--chip-default-border-radius)
+    );
+  }
+
+  .label {
+    border-radius: var(
+      --chip-border-radius,
+      var(--chip-default-label-border-radius)
+    );
+  }
+
   .icon-after {
     float: right;
-    margin-left: -10px;
+    margin-left: 10px;
   }
   .icon-before {
     float: left;
@@ -60,15 +111,23 @@ function handleCloseClick() {
   .text {
     display: inline-block;
     vertical-align: middle;
-    margin-left: 20px;
-    margin-right: 20px;
-    margin-bottom: 3px;
-    cursor: default;
     user-select: none;
+    font-size: var(
+      --chip-font-size,
+      var(--chip-default-font-size)
+    );
+    line-height: var(
+      --chip-line-height,
+      var(--chip-default-line-height)
+    );
   }
   .outlined {
     background: transparent !important;
     border: solid 1px;
+    background-color: var(
+      --chip-background-color,
+      var(--chip-default-outlined-background-color)
+    );
   }
   .disabled {
     pointer-events: none;

package/dist/components/simple/navigation/Chip.svelte.d.ts

@@ -1,16 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
+import './Chip.css';
 declare const __propDef: {
     props: {
         close?: boolean | undefined;
         closeIcon?: string | undefined;
-        color?: string | undefined;
-        textColor?: string | undefined;
         disabled?: boolean | undefined;
         filter?: boolean | undefined;
         filterIcon?: string | undefined;
         label?: boolean | undefined;
         outlined?: boolean | undefined;
-        size?: number | undefined;
+        buttonTabIndex?: number | null | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/dist/components/simple/navigation/Drawer.css

@@ -0,0 +1,9 @@
+:root {
+  --drawer-default-space: 20rem;
+  --drawer-default-opening-speed: .3s;
+  --drawer-default-overlay-speed: .2s;
+  --drawer-default-overlay-opacity: 50%;
+  --drawer-default-overlay-background-color: rgb(var(--global-color-grey-900));
+  --drawer-default-z-index: 30;
+  --drawer-background-color: rgb(var(--global-color-background-200))
+}