@likable-hair/svelte 0.0.4 → 0.0.5

package/README.md

@@ -1,38 +1,26 @@
-# create-svelte
+# Likablehair Svelte component library
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+A simple library that contains svelte components, used by likablehair frontend applications
 
-## Creating a project
+## Developer guide
 
-If you're seeing this, you've probably already done this step. Congrats!
+Install dependencies and start a local server to develop components:
 
 ```bash
-# create a new project in the current directory
-npm init svelte@next
+# Install deps
+npm install
 
-# create a new project in my-app
-npm init svelte@next my-app
-```
-
-> Note: the `@next` is temporary
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
+# Start local server
 npm run dev
 
 # or start the server and open the app in a new browser tab
 npm run dev -- --open
 ```
 
-## Building
-
-Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+## Publisher guide
 
-```bash
-npm run build
-```
+To publish the package make the following steps:
 
-> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
+- edit the package.json version, then commit all the changes
+- run `npm run package`, svelte will generate a package folder with all the necessary stuff inside
+- make sure you're logged in with your npm account, then run `npm publish ./package --access=public`

package/buttons/Button.svelte

@@ -0,0 +1,102 @@
+<script >export let type = 'default';
+export let icon = undefined;
+export let iconSize = 15;
+let clazz = '';
+export { clazz as class };
+$: position = !!$$slots.append ? 'relative' : undefined;
+$: cssVariables = Object.entries({
+    '--icon-button-height': (iconSize + 15) + 'pt',
+    '--icon-button-width': (iconSize + 15) + 'pt',
+    '--button-position': position
+}).filter(([key]) => key.startsWith('--'))
+    .reduce((css, [key, value]) => {
+    return `${css}${key}: ${value};`;
+}, '');
+import '$lib/common/tailwind.css';
+import Icon from '../media/Icon.svelte';
+</script>
+
+<div 
+  class="button {clazz}"
+  class:button-default={type === 'default'}
+  class:button-text={type === 'text'}
+  class:button-icon={type === 'icon'}
+  on:click
+  style={cssVariables}
+>
+  {#if !!icon}
+    <Icon name={icon} size={iconSize}></Icon>
+  {:else}
+    <slot></slot>
+  {/if}
+  {#if $$slots.append}
+    <span class="append-item">
+      <slot name="append">
+        
+      </slot>
+    </span>
+  {/if}
+</div>
+
+<style>
+  .append-item {
+    position: absolute;
+    right: 0px;
+  }
+
+  .button {
+    overflow: hidden;
+    position: var(--button-position);
+    width: var(--width, fit-content);
+    height: var(--height, fit-content);
+    text-align: var(--text-align, center);
+    cursor: var(--cursor, pointer);
+    padding: var(--padding, 5px);
+    font-size: var(--font-size);
+  }
+
+  .button-default {
+    transition: background-color 200ms;
+    color: var(--color);
+    background-color: var(--background-color);
+    outline: 0;
+    border: 0;
+    border-radius: var(--border-radius, 0.25rem);
+    box-shadow: var(--box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.3));
+  }
+
+  .button-default:hover {
+    background-color: var(--hover-background-color, var(--background-color));
+  }
+
+  .button-text {
+    color: var(--color);
+    transition: background-color 200ms;
+    text-transform: uppercase;
+    font-weight: 600;
+    outline: 0;
+    border: 0;
+    border-radius: var(--border-radius, 0.25rem);
+  }
+
+  .button-text:hover {
+    background-color: var(--hover-background-color, transparent);
+  }
+
+  .button-icon {
+    color: var(--color);
+    transition: background-color 200ms;
+    outline: 0;
+    border: 0;
+    border-radius: var(--border-radius, 50%);
+    height: var(--icon-button-height) !important;
+    width: var(--icon-button-width) !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .button-icon:hover {
+    background-color: var(--hover-background-color, transparent);
+  }
+</style>

package/buttons/Button.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import '$lib/common/tailwind.css';
+declare const __propDef: {
+    props: {
+        type?: 'default' | 'text' | 'icon';
+        icon?: string;
+        iconSize?: number;
+        class?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        append: {};
+    };
+};
+export declare type ButtonProps = typeof __propDef.props;
+export declare type ButtonEvents = typeof __propDef.events;
+export declare type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/forms/Textfield.svelte

@@ -88,6 +88,7 @@ import '$lib/common/tailwind.css';
   .fieldset-boxed {
     border: 2px solid var(--final-color);
     padding: 5px;
+    border-radius: var(--border-radius, 0);
   }
 
   .input-boxed {

package/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/index.js

@@ -0,0 +1 @@
+export default {};

package/media/Icon.svelte

@@ -1,6 +1,9 @@
-<script >export let name, size = 15;
+<script >export let name, size = 15, color = '';
+let clazz = '';
+export { clazz as class };
 $: cssVariables = Object.entries({
-    '--size': size + 'pt'
+    '--size': size + 'pt',
+    '--color': color
 }).filter(([key]) => key.startsWith('--'))
     .reduce((css, [key, value]) => {
     return `${css}${key}: ${value};`;
@@ -11,11 +14,12 @@ import '../common/materialDesign.css';
 <style>
 .icon {
   font-size: var(--size);
+  color: var(--color);
 }
 </style>
 
 <span
   style={cssVariables}
-  class="icon mdi {name}"
+  class="icon mdi {name} {clazz}"
 ></span>
 

package/media/Icon.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         name: string;
         size?: number;
+        color?: string;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/navigation/HeaderMenu.svelte

@@ -1,4 +1,5 @@
 <script >export let title = "";
+export let items = [];
 export let hideOnScroll = true;
 let scrollY, lastScrollY, visible = true;
 function handleScroll() {
@@ -23,21 +24,34 @@ import Navigator from './Navigator.svelte';
 
 <nav
   class="
-    shadow-md fixed h-12 w-screen -top-12 transition-all
+    shadow-md sticky h-12 -top-12 transition-all
     flex flex-wrap items-center
+    header-menu-container
   "
   class:top-0={visible}
 >
-  <div class="flex-none w-14 h-12">
-
-  </div>
-  <div class="grow">
-    <span class="text-2xl">{title}</span>
+  {#if $$slots.prepend}
+    <div class="h-12 flex-none">
+      <slot name="prepend"></slot>
+    </div>
+  {/if}
+  <div class="grow ml-1">
+    <slot name="title">
+      <span class="text-2xl">{title}</span>
+    </slot>
   </div>
   <div>
-    <Navigator></Navigator>
+    <Navigator
+      items={items}
+    ></Navigator>
   </div>
+  <slot name="append"></slot>
 </nav>
 
 <style>
+  .header-menu-container {
+    background-color: var(--background-color, white);
+    color: var(--color);
+    width: var(--width, 100vw)
+  }
 </style>

package/navigation/HeaderMenu.svelte.d.ts

@@ -1,14 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Item } from "./Navigator.svelte";
 import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         title?: string;
+        items?: Item[];
         hideOnScroll?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        prepend: {};
+        title: {};
+        append: {};
+    };
 };
 export declare type HeaderMenuProps = typeof __propDef.props;
 export declare type HeaderMenuEvents = typeof __propDef.events;

package/navigation/Navigator.svelte

@@ -1,29 +1,6 @@
-<script >let items = [
-    {
-        title: 'Works',
-        name: 'works',
-    },
-    {
-        title: 'Biography',
-        name: 'biography',
-    },
-    {
-        title: 'Publications',
-        name: 'publications',
-    },
-    {
-        title: 'Blog',
-        name: 'blog',
-    },
-    {
-        title: 'News',
-        name: 'news',
-    },
-    {
-        title: 'Contact',
-        name: 'contact',
-    },
-];
+<script context="module" ></script>
+
+<script >export let items = [];
 </script>
 
 <div class="flex">

package/navigation/Navigator.svelte.d.ts

@@ -1,6 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+export declare type Item = {
+    title: string;
+    name: string;
+    url?: string;
+};
 declare const __propDef: {
-    props: {};
+    props: {
+        items?: Item[];
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/navigation/TabSwitcher.svelte

@@ -0,0 +1,86 @@
+<script  context="module"></script>
+
+<script >import { onMount } from 'svelte';
+export let tabs = [];
+export let selected = undefined;
+export let mandatory = true;
+let tabButtons = {};
+onMount(() => {
+    if (mandatory && !selected && tabs.length > 0)
+        selected = tabs[0].name;
+    if (!!selected) {
+        setBookmarkPosition();
+    }
+});
+let bookmarkWidth = 0, bookmarkLeft = 0;
+function handleTabClick(clickedTab) {
+    selected = clickedTab.name;
+    setBookmarkPosition();
+}
+function setBookmarkPosition() {
+    let tabButton = tabButtons[selected];
+    bookmarkWidth = tabButton.offsetWidth - 10;
+    bookmarkLeft = tabButton.offsetLeft + 5;
+}
+$: cssVariables = Object.entries({
+    '--bookmark-left': bookmarkLeft + 'px',
+    '--bookmark-width': bookmarkWidth + 'px',
+}).filter(([key]) => key.startsWith('--'))
+    .reduce((css, [key, value]) => {
+    return `${css}${key}: ${value};`;
+}, '');
+import '$lib/common/tailwind.css';
+</script>
+
+<div 
+  class="tab-switcher-container flex relative"
+  style={cssVariables}
+>
+  {#each tabs as tab}
+    <div 
+      class="mx-3 p-2 cursor-pointer"
+      class:selected-tab={tab.name == selected}
+      on:click={() => handleTabClick(tab)}
+      bind:this={tabButtons[tab.name]}
+    >
+      {tab.label}
+    </div>
+  {/each}
+  <span 
+    class="bookmark"
+  ></span>
+  <span class="horizontal-guide"></span>
+</div>
+
+<style>
+  .tab-switcher-container {
+    width: var(--width)
+  }
+
+  .selected-tab {
+    color: var(--color, rgb(51 65 85));
+  }
+  
+  .horizontal-guide {
+    position: absolute;
+    width: var(--width, 100%);
+    z-index: 5;
+    bottom: 0px;
+    height: 1px;
+    background-color: var(--color, rgb(51 65 85));
+    opacity: 20%;
+  }
+
+  .bookmark {
+    position: absolute;
+    bottom: 0px;
+    height: 2px;
+    border-radius: 0.125rem;
+    z-index: 10;
+    background-color: var(--bookmark-color, var(--color, rgb(51 65 85)));
+    transition: left 400ms, width 400ms;
+    left: var(--bookmark-left);
+    width: var(--bookmark-width)
+  }
+
+</style>

package/navigation/TabSwitcher.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+export declare type Tab = {
+    name: string;
+    label: string;
+    icon?: string;
+};
+import '$lib/common/tailwind.css';
+declare const __propDef: {
+    props: {
+        tabs?: Tab[];
+        selected?: string;
+        mandatory?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TabSwitcherProps = typeof __propDef.props;
+export declare type TabSwitcherEvents = typeof __propDef.events;
+export declare type TabSwitcherSlots = typeof __propDef.slots;
+export default class TabSwitcher extends SvelteComponentTyped<TabSwitcherProps, TabSwitcherEvents, TabSwitcherSlots> {
+}
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -25,6 +25,7 @@
   },
   "exports": {
     "./package.json": "./package.json",
+    "./buttons/Button.svelte": "./buttons/Button.svelte",
     "./common/Card.svelte": "./common/Card.svelte",
     "./common/IntersectionObserver.svelte": "./common/IntersectionObserver.svelte",
     "./common/materialDesign.css": "./common/materialDesign.css",
@@ -34,6 +35,7 @@
     "./enums/elevation.enum": "./enums/elevation.enum.js",
     "./enums": "./enums/index.js",
     "./forms/Textfield.svelte": "./forms/Textfield.svelte",
+    ".": "./index.js",
     "./loaders/Skeleton.svelte": "./loaders/Skeleton.svelte",
     "./loaders/sectionType": "./loaders/sectionType.js",
     "./media/Carousel.svelte": "./media/Carousel.svelte",
@@ -42,8 +44,11 @@
     "./media/ImageGrid.svelte": "./media/ImageGrid.svelte",
     "./navigation/HeaderMenu.svelte": "./navigation/HeaderMenu.svelte",
     "./navigation/Navigator.svelte": "./navigation/Navigator.svelte",
+    "./navigation/TabSwitcher.svelte": "./navigation/TabSwitcher.svelte",
     "./shop/ProductCard.svelte": "./shop/ProductCard.svelte",
     "./shop/ProductsGrid.svelte": "./shop/ProductsGrid.svelte",
-    "./timeline/ScrollTimeLine.svelte": "./timeline/ScrollTimeLine.svelte"
-  }
+    "./timeline/ScrollTimeLine.svelte": "./timeline/ScrollTimeLine.svelte",
+    "./timeline/SimpleTimeLine.svelte": "./timeline/SimpleTimeLine.svelte"
+  },
+  "svelte": "./index.js"
 }

package/timeline/SimpleTimeLine.svelte

@@ -0,0 +1 @@
+<div>Simple timeline</div>

package/timeline/SimpleTimeLine.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  SimpleTimeLineProps */
+/** @typedef {typeof __propDef.events}  SimpleTimeLineEvents */
+/** @typedef {typeof __propDef.slots}  SimpleTimeLineSlots */
+export default class SimpleTimeLine extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SimpleTimeLineProps = typeof __propDef.props;
+export type SimpleTimeLineEvents = typeof __propDef.events;
+export type SimpleTimeLineSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};