@likable-hair/svelte 0.0.52 → 0.0.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/common/SimpleTable.svelte +57 -49
  2. package/common/SimpleTable.svelte.d.ts +1 -0
  3. package/navigation/TabSwitcher.svelte +8 -2
  4. package/navigation/TabSwitcher.svelte.d.ts +5 -0
  5. package/package.json +2 -4
  6. package/index.d.ts +0 -30
  7. package/index.js +0 -41
package/common/SimpleTable.svelte CHANGED
@@ -4,55 +4,63 @@
4
4
  export let headers = undefined, items = undefined, backgroundColor = "rgba(255,255,255,0)", headerColor = "rgba(0,0,0,0.05)", rowSeparatorColor = headerColor, headerHeight = "30px", rowHeight = "70px", minWidth = undefined, height = "100%", width = "100%";
5
5
  </script>
6
6
 
7
- <div class="container" style:height style:width>
8
- <table
9
- style:background-color={backgroundColor}
10
- style:width="100%"
11
- style:min-width={minWidth}
12
- >
13
- <thead
14
- style:background-color={headerColor}
15
- style:height={headerHeight}
16
- >
17
- {#each headers as head}
18
- <th
19
- style:width={head.width}
20
- style:min-width={head.minWidth}
21
- >
22
- {head.label}
23
- </th>
24
- {/each}
25
- {#if $$slots.appendLastColumn}
26
- <th></th>
27
- {/if}
28
- </thead>
29
- <tbody>
30
- {#each items as item, i}
31
- <tr
32
- style:border-color={rowSeparatorColor}
33
- style:height={rowHeight}
34
- >
35
- {#each headers as header , j}
36
- <td>
37
- {#if header.type=='custom'}
38
- <slot name="customColumn" index={i} columnIndex={j} item={item}></slot>
39
- {:else if header.type=='date'}
40
- {dateToString(item[header.value], 'dayAndHours', 'it')}
41
- {:else}
42
- {item[header.value]}
43
- {/if}
44
- </td>
45
- {/each}
46
- {#if $$slots.appendLastColumn}
47
- <td>
48
- <slot name="appendLastColumn" index={i} item={item}></slot>
49
- </td>
50
- {/if}
51
- </tr>
52
- {/each}
53
- </tbody>
54
- </table>
55
- </div>
7
+ {#if !!items && Array.isArray(items) }
8
+ <div class="container" style:height style:width>
9
+ <table
10
+ style:background-color={backgroundColor}
11
+ style:width="100%"
12
+ style:min-width={minWidth}
13
+ >
14
+ <thead
15
+ style:background-color={headerColor}
16
+ style:height={headerHeight}
17
+ >
18
+ {#each headers as head}
19
+ <th
20
+ style:width={head.width}
21
+ style:min-width={head.minWidth}
22
+ >
23
+ {head.label}
24
+ </th>
25
+ {/each}
26
+ {#if $$slots.appendLastColumn}
27
+ <th></th>
28
+ {/if}
29
+ </thead>
30
+ <tbody>
31
+ {#each items as item, i}
32
+ <tr
33
+ style:border-color={rowSeparatorColor}
34
+ style:height={rowHeight}
35
+ >
36
+ {#each headers as header , j}
37
+ <td>
38
+ {#if header.type=='custom'}
39
+ <slot
40
+ name="customColumn"
41
+ index={i}
42
+ columnIndex={j}
43
+ header={header}
44
+ item={item}
45
+ ></slot>
46
+ {:else if header.type=='date'}
47
+ {dateToString(item[header.value], 'dayAndHours', 'it')}
48
+ {:else}
49
+ {item[header.value]}
50
+ {/if}
51
+ </td>
52
+ {/each}
53
+ {#if $$slots.appendLastColumn}
54
+ <td>
55
+ <slot name="appendLastColumn" index={i} item={item}></slot>
56
+ </td>
57
+ {/if}
58
+ </tr>
59
+ {/each}
60
+ </tbody>
61
+ </table>
62
+ </div>
63
+ {/if}
56
64
 
57
65
  <style>
58
66
  table {
package/common/SimpleTable.svelte.d.ts CHANGED
@@ -31,6 +31,7 @@ declare const __propDef: {
31
31
  customColumn: {
32
32
  index: any;
33
33
  columnIndex: any;
34
+ header: Header;
34
35
  item: {
35
36
  [key: string]: any;
36
37
  };
package/navigation/TabSwitcher.svelte CHANGED
@@ -10,10 +10,16 @@ onMount(() => {
10
10
  setBookmarkPosition();
11
11
  }
12
12
  });
13
+ import { createEventDispatcher } from 'svelte';
14
+ const dispatch = createEventDispatcher();
13
15
  let bookmarkWidth = 0, bookmarkLeft = 0;
14
- function handleTabClick(clickedTab) {
16
+ function handleTabClick(clickedTab, nativeEvent) {
15
17
  selected = clickedTab.name;
16
18
  setBookmarkPosition();
19
+ dispatch('tab-click', {
20
+ nativeEvent: nativeEvent,
21
+ tab: clickedTab
22
+ });
17
23
  }
18
24
  function setBookmarkPosition() {
19
25
  let tabButton = tabButtons[selected];
@@ -40,7 +46,7 @@ function setBookmarkPosition() {
40
46
  style:padding="8px"
41
47
  style:--tab-switcher-color={color}
42
48
  class:selected-tab={tab.name == selected}
43
- on:click={() => handleTabClick(tab)}
49
+ on:click={(event) => handleTabClick(tab, event)}
44
50
  bind:this={tabButtons[tab.name]}
45
51
  >
46
52
  {tab.label}
package/navigation/TabSwitcher.svelte.d.ts CHANGED
@@ -16,6 +16,11 @@ declare const __propDef: {
16
16
  margin?: string;
17
17
  };
18
18
  events: {
19
+ "tab-click": CustomEvent<{
20
+ nativeEvent: MouseEvent;
21
+ tab: Tab;
22
+ }>;
23
+ } & {
19
24
  [evt: string]: CustomEvent<any>;
20
25
  };
21
26
  slots: {};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@likable-hair/svelte",
3
3
  "description": "A Svelte component for likablehair",
4
- "version": "0.0.52",
4
+ "version": "0.0.53",
5
5
  "devDependencies": {
6
6
  "@sveltejs/adapter-auto": "next",
7
7
  "@sveltejs/kit": "next",
@@ -90,7 +90,6 @@
90
90
  "./forms/Textfield.svelte": "./forms/Textfield.svelte",
91
91
  "./forms/VerticalSwitch.svelte": "./forms/VerticalSwitch.svelte",
92
92
  "./forms/VerticalTextSwitch.svelte": "./forms/VerticalTextSwitch.svelte",
93
- ".": "./index.js",
94
93
  "./loaders/CircularLoader.svelte": "./loaders/CircularLoader.svelte",
95
94
  "./loaders/Skeleton.svelte": "./loaders/Skeleton.svelte",
96
95
  "./loaders/sectionType": "./loaders/sectionType.js",
@@ -114,6 +113,5 @@
114
113
  "./stores/mediaQuery": "./stores/mediaQuery.js",
115
114
  "./timeline/ScrollTimeLine.svelte": "./timeline/ScrollTimeLine.svelte",
116
115
  "./timeline/SimpleTimeLine.svelte": "./timeline/SimpleTimeLine.svelte"
117
- },
118
- "svelte": "./index.js"
116
+ }
119
117
  }
package/index.d.ts DELETED
@@ -1,30 +0,0 @@
1
- export { default as Button } from './buttons/Button.svelte';
2
- export { default as Card } from './common/Card.svelte';
3
- export { default as Gesture } from './common/Gesture.svelte';
4
- export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
5
- export { default as MediaQuery } from './common/MediaQuery.svelte';
6
- export { default as Dialog } from './dialogs/Dialog.svelte';
7
- export { default as TextField } from './forms/Textfield.svelte';
8
- export { default as Switch } from './forms/Switch.svelte';
9
- export { default as Checkbox } from './forms/Checkbox.svelte';
10
- export { default as Skeleton } from './loaders/Skeleton.svelte';
11
- export { default as CircularLoader } from './loaders/CircularLoader.svelte';
12
- export { default as AttachmentDownloader } from './media/AttachmentDownloader.svelte';
13
- export { default as Avatar } from './media/Avatar.svelte';
14
- export { default as Carousel } from './media/Carousel.svelte';
15
- export { default as DescriptiveAvatar } from './media/DescriptiveAvatar.svelte';
16
- export { default as Icon } from './media/Icon.svelte';
17
- export { default as Image } from './media/Image.svelte';
18
- export { default as ImageGrid } from './media/ImageGrid.svelte';
19
- export { default as Gallery } from './media/Gallery.svelte';
20
- export { default as Breadcrumb } from './navigation/Breadcrumb.svelte';
21
- export { default as HeaderMenu } from './navigation/HeaderMenu.svelte';
22
- export { default as Navigator } from './navigation/Navigator.svelte';
23
- export { default as TabSwitcher } from './navigation/TabSwitcher.svelte';
24
- export { default as Drawer } from './navigation/Drawer.svelte';
25
- export { default as ProgressBar } from './progress/ProgressBar.svelte';
26
- export { default as ProductCard } from './shop/ProductCard.svelte';
27
- export { default as ProductGrid } from './shop/ProductCard.svelte';
28
- export { default as mediaQueryStore } from './stores/mediaQuery';
29
- export { default as ScollTimeLine } from './timeline/ScrollTimeLine.svelte';
30
- export { default as SimpleTimeLine } from './timeline/SimpleTimeLine.svelte';
package/index.js DELETED
@@ -1,41 +0,0 @@
1
- // buttons
2
- export { default as Button } from './buttons/Button.svelte';
3
- // common
4
- export { default as Card } from './common/Card.svelte';
5
- export { default as Gesture } from './common/Gesture.svelte';
6
- export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
7
- export { default as MediaQuery } from './common/MediaQuery.svelte';
8
- // dialogs
9
- export { default as Dialog } from './dialogs/Dialog.svelte';
10
- // forms
11
- export { default as TextField } from './forms/Textfield.svelte';
12
- export { default as Switch } from './forms/Switch.svelte';
13
- export { default as Checkbox } from './forms/Checkbox.svelte';
14
- // loaders
15
- export { default as Skeleton } from './loaders/Skeleton.svelte';
16
- export { default as CircularLoader } from './loaders/CircularLoader.svelte';
17
- // media
18
- export { default as AttachmentDownloader } from './media/AttachmentDownloader.svelte';
19
- export { default as Avatar } from './media/Avatar.svelte';
20
- export { default as Carousel } from './media/Carousel.svelte';
21
- export { default as DescriptiveAvatar } from './media/DescriptiveAvatar.svelte';
22
- export { default as Icon } from './media/Icon.svelte';
23
- export { default as Image } from './media/Image.svelte';
24
- export { default as ImageGrid } from './media/ImageGrid.svelte';
25
- export { default as Gallery } from './media/Gallery.svelte';
26
- // navigation
27
- export { default as Breadcrumb } from './navigation/Breadcrumb.svelte';
28
- export { default as HeaderMenu } from './navigation/HeaderMenu.svelte';
29
- export { default as Navigator } from './navigation/Navigator.svelte';
30
- export { default as TabSwitcher } from './navigation/TabSwitcher.svelte';
31
- export { default as Drawer } from './navigation/Drawer.svelte';
32
- // progress
33
- export { default as ProgressBar } from './progress/ProgressBar.svelte';
34
- // shop
35
- export { default as ProductCard } from './shop/ProductCard.svelte';
36
- export { default as ProductGrid } from './shop/ProductCard.svelte';
37
- // store
38
- export { default as mediaQueryStore } from './stores/mediaQuery';
39
- // timeline
40
- export { default as ScollTimeLine } from './timeline/ScrollTimeLine.svelte';
41
- export { default as SimpleTimeLine } from './timeline/SimpleTimeLine.svelte';