@likable-hair/svelte 3.1.45 → 3.1.47
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.
- package/dist/components/composed/list/PaginatedTable.svelte +3 -1
- package/dist/components/composed/list/PaginatedTable.svelte.d.ts +4 -0
- package/dist/components/simple/lists/SimpleTable.svelte +130 -7
- package/dist/components/simple/lists/SimpleTable.svelte.d.ts +8 -0
- package/dist/components/simple/timeline/SimpleTimeLine.css +8 -0
- package/dist/components/simple/timeline/SimpleTimeLine.svelte +55 -43
- package/dist/components/simple/timeline/SimpleTimeLine.svelte.d.ts +2 -9
- package/dist/utils/countries.js +2 -2
- package/package.json +1 -1
|
@@ -14,7 +14,7 @@ export let headers = [], items = [], sortedBy = void 0, sortDirection = void 0,
|
|
|
14
14
|
{ label: "20", value: 20 },
|
|
15
15
|
{ label: "50", value: 50 },
|
|
16
16
|
{ label: "100", value: 100 }
|
|
17
|
-
], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true;
|
|
17
|
+
], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {};
|
|
18
18
|
export let calculateRowStyles = void 0;
|
|
19
19
|
export let calculateRowClasses = void 0;
|
|
20
20
|
let searchBarInput, searchText = void 0;
|
|
@@ -109,6 +109,8 @@ function handleFiltersChange() {
|
|
|
109
109
|
on:rowClick
|
|
110
110
|
{calculateRowStyles}
|
|
111
111
|
{calculateRowClasses}
|
|
112
|
+
{resizableColumns}
|
|
113
|
+
bind:resizedColumnSizeWithPadding
|
|
112
114
|
>
|
|
113
115
|
<svelte:fragment slot="header" let:head>
|
|
114
116
|
<slot name="header" {head} >
|
|
@@ -28,6 +28,10 @@ declare const __propDef: {
|
|
|
28
28
|
lang?: "it" | "en" | undefined;
|
|
29
29
|
editFilterMode?: "one-edit" | "multi-edit" | undefined;
|
|
30
30
|
showActiveFilters?: boolean | undefined;
|
|
31
|
+
resizableColumns?: boolean | undefined;
|
|
32
|
+
resizedColumnSizeWithPadding?: {
|
|
33
|
+
[value: string]: number;
|
|
34
|
+
} | undefined;
|
|
31
35
|
calculateRowStyles?: CalculateRowStyles | undefined;
|
|
32
36
|
calculateRowClasses?: CalculateRowClasses | undefined;
|
|
33
37
|
};
|
|
@@ -3,13 +3,34 @@
|
|
|
3
3
|
<script>import "../../../css/main.css";
|
|
4
4
|
import "./SimpleTable.css";
|
|
5
5
|
import Icon from "../media/Icon.svelte";
|
|
6
|
-
import { createEventDispatcher } from "svelte";
|
|
6
|
+
import { createEventDispatcher, onMount } from "svelte";
|
|
7
7
|
let clazz = {};
|
|
8
8
|
export { clazz as class };
|
|
9
9
|
const dispatch = createEventDispatcher();
|
|
10
|
-
export let headers = [], items = [], sortedBy = void 0, sortDirection = "asc";
|
|
10
|
+
export let headers = [], items = [], sortedBy = void 0, sortDirection = "asc", resizableColumns = false, resizedColumnSizeWithPadding = {};
|
|
11
11
|
export let calculateRowStyles = void 0;
|
|
12
12
|
export let calculateRowClasses = void 0;
|
|
13
|
+
onMount(() => {
|
|
14
|
+
if (resizableColumns) {
|
|
15
|
+
for (const head of [...headers, { value: "slot-append" }]) {
|
|
16
|
+
let th = document.getElementById(head.value);
|
|
17
|
+
if (!!th) {
|
|
18
|
+
let { paddingLeft, paddingRight } = getComputedStyle(th);
|
|
19
|
+
let widthWihtPadding;
|
|
20
|
+
if (!!resizedColumnSizeWithPadding[head.value]) {
|
|
21
|
+
widthWihtPadding = resizedColumnSizeWithPadding[head.value];
|
|
22
|
+
} else {
|
|
23
|
+
widthWihtPadding = th.getBoundingClientRect().width;
|
|
24
|
+
resizedColumnSizeWithPadding[head.value] = widthWihtPadding;
|
|
25
|
+
}
|
|
26
|
+
let width = widthWihtPadding - parseFloat(paddingLeft) - parseFloat(paddingRight);
|
|
27
|
+
th.style.width = `${width}px`;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
let table = document.getElementsByClassName("table")[0];
|
|
31
|
+
table.classList.add("resizable");
|
|
32
|
+
}
|
|
33
|
+
});
|
|
13
34
|
function handleHeaderClick(header) {
|
|
14
35
|
if (header.sortable) {
|
|
15
36
|
if (!!sortedBy && header.value == sortedBy) {
|
|
@@ -36,20 +57,82 @@ function handleRowClick(item) {
|
|
|
36
57
|
function formatDate(dateTime, dateFormat) {
|
|
37
58
|
return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format);
|
|
38
59
|
}
|
|
60
|
+
function resize(node) {
|
|
61
|
+
let th = node.parentElement;
|
|
62
|
+
let thead = document.getElementsByClassName("thead").item(0);
|
|
63
|
+
if (!!th && !!thead && thead instanceof HTMLElement) {
|
|
64
|
+
let mouseMoveHandler = function(e) {
|
|
65
|
+
if (resizing && !!th) {
|
|
66
|
+
width += e.movementX;
|
|
67
|
+
let { paddingLeft, paddingRight } = getComputedStyle(th);
|
|
68
|
+
let minWidth = headers.find((h) => h.value === th.id)?.minWidth;
|
|
69
|
+
let minWidthPx = void 0;
|
|
70
|
+
if (!!minWidth && minWidth.endsWith("px")) {
|
|
71
|
+
minWidthPx = parseInt(minWidth, 10);
|
|
72
|
+
}
|
|
73
|
+
let actualMinWidth = (minWidthPx || 50) - parseFloat(paddingLeft) - parseFloat(paddingRight);
|
|
74
|
+
if (width > actualMinWidth) {
|
|
75
|
+
th.style.width = width + "px";
|
|
76
|
+
resizedColumnSizeWithPadding[th.id] = th.getBoundingClientRect().width;
|
|
77
|
+
dispatch("columnResize", {
|
|
78
|
+
id: th.id,
|
|
79
|
+
newWidthPx: width
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}, mouseUpHandler = function(e) {
|
|
84
|
+
if (!!th) {
|
|
85
|
+
e.stopPropagation();
|
|
86
|
+
resizing = false;
|
|
87
|
+
let { paddingLeft, paddingRight } = getComputedStyle(th);
|
|
88
|
+
width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
|
|
89
|
+
}
|
|
90
|
+
}, mouseDownHandler = function(e) {
|
|
91
|
+
if (!!th) {
|
|
92
|
+
e.stopPropagation();
|
|
93
|
+
resizing = true;
|
|
94
|
+
let { paddingLeft, paddingRight } = getComputedStyle(th);
|
|
95
|
+
width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
let resizing = false;
|
|
99
|
+
let { width } = th.getBoundingClientRect();
|
|
100
|
+
node.addEventListener("mousedown", mouseDownHandler);
|
|
101
|
+
document.addEventListener("mouseup", mouseUpHandler);
|
|
102
|
+
document.addEventListener("mousemove", mouseMoveHandler);
|
|
103
|
+
return {
|
|
104
|
+
destroy() {
|
|
105
|
+
node.removeEventListener("mousedown", mouseDownHandler);
|
|
106
|
+
document.removeEventListener("mouseup", mouseUpHandler);
|
|
107
|
+
document.removeEventListener("mousemove", mouseMoveHandler);
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
}
|
|
39
112
|
</script>
|
|
40
113
|
|
|
41
114
|
{#if !!items && Array.isArray(items)}
|
|
42
|
-
<div class="simple-table-container {clazz.container || ''}">
|
|
115
|
+
<div class="simple-table-container {clazz.container || ''}" class:resizable={resizableColumns}>
|
|
43
116
|
<table class="table">
|
|
44
117
|
<thead class="thead {clazz.header || ''}">
|
|
45
118
|
<tr>
|
|
46
119
|
{#each headers as head}
|
|
47
120
|
<th
|
|
48
|
-
|
|
121
|
+
tabindex="0"
|
|
122
|
+
style={`${resizableColumns || !head.width ? '' : `width: ${head.width}`}`}
|
|
49
123
|
style:min-width={head.minWidth}
|
|
50
124
|
class:sortable={head.sortable}
|
|
51
|
-
on:
|
|
125
|
+
on:mousedown={() => handleHeaderClick(head)}
|
|
126
|
+
on:keydown={(e) => {
|
|
127
|
+
if(e.key == 'Enter') {
|
|
128
|
+
handleHeaderClick(head)
|
|
129
|
+
}
|
|
130
|
+
}}
|
|
131
|
+
id={head.value}
|
|
52
132
|
>
|
|
133
|
+
{#if resizableColumns}
|
|
134
|
+
<div class="resizer" use:resize></div>
|
|
135
|
+
{/if}
|
|
53
136
|
<slot name="header" {head}>
|
|
54
137
|
<span class="header-label">
|
|
55
138
|
<slot name="headerLabel">
|
|
@@ -74,7 +157,7 @@ function formatDate(dateTime, dateFormat) {
|
|
|
74
157
|
</th>
|
|
75
158
|
{/each}
|
|
76
159
|
{#if $$slots.rowActions || $$slots.append}
|
|
77
|
-
<th>
|
|
160
|
+
<th id="slot-append">
|
|
78
161
|
<slot name="append" index={-1} items={undefined} />
|
|
79
162
|
</th>
|
|
80
163
|
{/if}
|
|
@@ -121,7 +204,7 @@ function formatDate(dateTime, dateFormat) {
|
|
|
121
204
|
{:else}
|
|
122
205
|
{item[header.value]}
|
|
123
206
|
{/if}
|
|
124
|
-
{:else}
|
|
207
|
+
{:else}
|
|
125
208
|
{item[header.value]}
|
|
126
209
|
{/if}
|
|
127
210
|
</td>
|
|
@@ -140,6 +223,29 @@ function formatDate(dateTime, dateFormat) {
|
|
|
140
223
|
{/if}
|
|
141
224
|
|
|
142
225
|
<style>
|
|
226
|
+
.simple-table-container.resizable {
|
|
227
|
+
overflow-x: auto;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.resizer {
|
|
231
|
+
width: 2px;
|
|
232
|
+
display: none;
|
|
233
|
+
position: absolute;
|
|
234
|
+
right: 5%;
|
|
235
|
+
top: 10%;
|
|
236
|
+
bottom: 10%;
|
|
237
|
+
z-index: 1000;
|
|
238
|
+
background-color: rgb(var(--simple-table-column-resizer-color, var(--global-color-contrast-400)));
|
|
239
|
+
cursor: col-resize;
|
|
240
|
+
background-clip: content-box;
|
|
241
|
+
padding: 0px 5px 0px 5px;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
th:hover .resizer {
|
|
245
|
+
display: inline-block;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
|
|
143
249
|
.simple-table-container {
|
|
144
250
|
width: var(--simple-table-width, var(--simple-table-default-width));
|
|
145
251
|
min-width: var(
|
|
@@ -197,6 +303,10 @@ function formatDate(dateTime, dateFormat) {
|
|
|
197
303
|
user-select: none;
|
|
198
304
|
}
|
|
199
305
|
|
|
306
|
+
.table.resizable .thead th.sortable {
|
|
307
|
+
transition: none;
|
|
308
|
+
}
|
|
309
|
+
|
|
200
310
|
.thead th.sortable:hover {
|
|
201
311
|
color: var(
|
|
202
312
|
--simple-table-header-hover-color,
|
|
@@ -271,10 +381,23 @@ function formatDate(dateTime, dateFormat) {
|
|
|
271
381
|
width: 100%;
|
|
272
382
|
}
|
|
273
383
|
|
|
384
|
+
.table.resizable {
|
|
385
|
+
table-layout: fixed;
|
|
386
|
+
width: fit-content;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.table.resizable td, th {
|
|
390
|
+
text-overflow: ellipsis;
|
|
391
|
+
overflow: hidden;
|
|
392
|
+
white-space: nowrap;
|
|
393
|
+
}
|
|
394
|
+
|
|
274
395
|
th {
|
|
275
396
|
text-align: start;
|
|
276
397
|
padding-left: 10px;
|
|
277
398
|
min-width: 100px;
|
|
399
|
+
position: relative;
|
|
400
|
+
user-select: none;
|
|
278
401
|
}
|
|
279
402
|
|
|
280
403
|
td {
|
|
@@ -35,6 +35,10 @@ declare const __propDef: {
|
|
|
35
35
|
items?: Item[] | undefined;
|
|
36
36
|
sortedBy?: string | undefined;
|
|
37
37
|
sortDirection?: "desc" | "asc" | undefined;
|
|
38
|
+
resizableColumns?: boolean | undefined;
|
|
39
|
+
resizedColumnSizeWithPadding?: {
|
|
40
|
+
[value: string]: number;
|
|
41
|
+
} | undefined;
|
|
38
42
|
calculateRowStyles?: CalculateRowStyles | undefined;
|
|
39
43
|
calculateRowClasses?: CalculateRowClasses | undefined;
|
|
40
44
|
};
|
|
@@ -46,6 +50,10 @@ declare const __propDef: {
|
|
|
46
50
|
rowClick: CustomEvent<{
|
|
47
51
|
item: Item;
|
|
48
52
|
}>;
|
|
53
|
+
columnResize: CustomEvent<{
|
|
54
|
+
id: string;
|
|
55
|
+
newWidthPx: number;
|
|
56
|
+
}>;
|
|
49
57
|
} & {
|
|
50
58
|
[evt: string]: CustomEvent<any>;
|
|
51
59
|
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--simple-time-line-default-gap: 16px;
|
|
3
|
+
--simple-time-line-default-line-background: rgb(var(--global-color-background-200));
|
|
4
|
+
--simple-time-line-default-circle-width: 12px;
|
|
5
|
+
--simple-time-line-default-circle-height: 12px;
|
|
6
|
+
--simple-time-line-default-line-width: 2px;
|
|
7
|
+
--simple-time-line-default-circle-background-color: rgb(var(--global-color-primary-500));
|
|
8
|
+
}
|
|
@@ -1,24 +1,23 @@
|
|
|
1
1
|
<script context="module"></script>
|
|
2
2
|
|
|
3
3
|
<script>import { dateToString } from "../dates/utils";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
"-divider-width": "48px",
|
|
8
|
-
"-central-line-left": singleSided ? `calc(var(--simple-timeline-divider-width)/2)` : "calc(50% - 1px)",
|
|
9
|
-
"-body-width": singleSided ? `calc(100% - var(--simple-timeline-divider-width))` : `calc(50% - var(--simple-timeline-divider-width) / 2)`
|
|
10
|
-
}).filter(([key]) => key.startsWith("-")).reduce((css, [key, value]) => {
|
|
11
|
-
return `${css}--simple-timeline${key}: ${value};`;
|
|
12
|
-
}, "");
|
|
4
|
+
import "../../../css/main.css";
|
|
5
|
+
import "./SimpleTimeLine.css";
|
|
6
|
+
export let items = [], singleSided = false, circleAlignment = "top";
|
|
13
7
|
</script>
|
|
14
8
|
|
|
15
|
-
<div
|
|
9
|
+
<div
|
|
10
|
+
style:--simple-time-line-divider-width="48px"
|
|
11
|
+
style:--simple-time-line-central-line-left={singleSided
|
|
12
|
+
? `calc(var(--simple-time-line-divider-width)/2)`
|
|
13
|
+
: "calc(50% - 0.5px)"}
|
|
14
|
+
style:--simple-time-line-body-width={singleSided
|
|
15
|
+
? `calc(100% - var(--simple-time-line-divider-width))`
|
|
16
|
+
: `calc(50% - var(--simple-time-line-divider-width) / 2)`}
|
|
17
|
+
class="container"
|
|
18
|
+
>
|
|
16
19
|
{#each items as item, index}
|
|
17
20
|
<div
|
|
18
|
-
style:margin-top={index == 0 ? firstItemMarginTop : itemMarginTop}
|
|
19
|
-
style:margin-bottom={index == items.length - 1
|
|
20
|
-
? lastItemMarginBottom
|
|
21
|
-
: itemMarginBottom}
|
|
22
21
|
style:flex-direction={singleSided || index % 2 == 0
|
|
23
22
|
? "row-reverse"
|
|
24
23
|
: "row"}
|
|
@@ -28,7 +27,6 @@ $:
|
|
|
28
27
|
style:flex-direction={singleSided || index % 2 == 0
|
|
29
28
|
? "row"
|
|
30
29
|
: "row-reverse"}
|
|
31
|
-
style:justify-content={"flex-start"}
|
|
32
30
|
class="time-line-body"
|
|
33
31
|
>
|
|
34
32
|
<slot
|
|
@@ -41,7 +39,6 @@ $:
|
|
|
41
39
|
style:padding={singleSided || index % 2 == 0
|
|
42
40
|
? "0px 20px 0px 0px"
|
|
43
41
|
: "0px 0px 0px 20px"}
|
|
44
|
-
style:width={timesWidth}
|
|
45
42
|
class="time-line-times"
|
|
46
43
|
>
|
|
47
44
|
<slot name="times" {item} {dateToString}>
|
|
@@ -74,29 +71,22 @@ $:
|
|
|
74
71
|
</slot>
|
|
75
72
|
</div>
|
|
76
73
|
{/if}
|
|
77
|
-
<div
|
|
74
|
+
<div
|
|
75
|
+
class="time-line-infos"
|
|
76
|
+
style:text-align={singleSided || index % 2 == 0 ? "left" : "right"}
|
|
77
|
+
>
|
|
78
78
|
<slot
|
|
79
79
|
name="infos"
|
|
80
80
|
{item}
|
|
81
81
|
alignment={!singleSided && index % 2 == 0 ? "right" : "left"}
|
|
82
82
|
>
|
|
83
83
|
{#if !!item.title}
|
|
84
|
-
<div
|
|
85
|
-
style:text-align={singleSided || index % 2 == 0
|
|
86
|
-
? "left"
|
|
87
|
-
: "right"}
|
|
88
|
-
class="time-line-title"
|
|
89
|
-
>
|
|
84
|
+
<div class="time-line-title">
|
|
90
85
|
{item.title}
|
|
91
86
|
</div>
|
|
92
87
|
{/if}
|
|
93
88
|
{#if !!item.description}
|
|
94
|
-
<div
|
|
95
|
-
style:text-align={singleSided || index % 2 == 0
|
|
96
|
-
? "left"
|
|
97
|
-
: "right"}
|
|
98
|
-
class="time-line-description"
|
|
99
|
-
>
|
|
89
|
+
<div class="time-line-description">
|
|
100
90
|
{item.description}
|
|
101
91
|
</div>
|
|
102
92
|
{/if}
|
|
@@ -111,14 +101,7 @@ $:
|
|
|
111
101
|
</div>
|
|
112
102
|
<div style:align-items={circleAlignment} class="time-line-divider">
|
|
113
103
|
<slot name="circle" {item}>
|
|
114
|
-
<div
|
|
115
|
-
style="margin-top: 5px;"
|
|
116
|
-
style:background-color={circleColor}
|
|
117
|
-
style:height={circleDiameter}
|
|
118
|
-
style:width={circleDiameter}
|
|
119
|
-
style:z-index="5"
|
|
120
|
-
class="circle"
|
|
121
|
-
/>
|
|
104
|
+
<div class="circle" />
|
|
122
105
|
</slot>
|
|
123
106
|
</div>
|
|
124
107
|
</div>
|
|
@@ -128,18 +111,32 @@ $:
|
|
|
128
111
|
<style>
|
|
129
112
|
.container {
|
|
130
113
|
position: relative;
|
|
114
|
+
height: var(
|
|
115
|
+
--simple-time-line-height,
|
|
116
|
+
var(--simple-time-line-default-height)
|
|
117
|
+
);
|
|
118
|
+
width: var(--simple-time-line-width, var(--simple-time-line-default-width));
|
|
119
|
+
display: flex;
|
|
120
|
+
flex-direction: column;
|
|
121
|
+
gap: var(--simple-time-line-gap, var(--simple-time-line-default-gap));
|
|
131
122
|
}
|
|
132
123
|
|
|
133
124
|
.container::before {
|
|
134
125
|
position: absolute;
|
|
135
|
-
left: var(--simple-
|
|
126
|
+
left: var(--simple-time-line-central-line-left);
|
|
136
127
|
right: auto;
|
|
137
128
|
top: 0;
|
|
138
129
|
bottom: 0;
|
|
139
130
|
height: 100%;
|
|
140
|
-
background:
|
|
131
|
+
background: var(
|
|
132
|
+
--simple-time-line-line-background,
|
|
133
|
+
var(--simple-time-line-default-line-background)
|
|
134
|
+
);
|
|
141
135
|
content: "";
|
|
142
|
-
width:
|
|
136
|
+
width: var(
|
|
137
|
+
--simple-time-line-line-width,
|
|
138
|
+
var(--simple-time-line-default-line-width)
|
|
139
|
+
);
|
|
143
140
|
}
|
|
144
141
|
|
|
145
142
|
.time-line-times {
|
|
@@ -147,7 +144,21 @@ $:
|
|
|
147
144
|
}
|
|
148
145
|
|
|
149
146
|
.circle {
|
|
150
|
-
border-radius:
|
|
147
|
+
border-radius: 9999px;
|
|
148
|
+
height: var(
|
|
149
|
+
--simple-time-line-circle-height,
|
|
150
|
+
var(--simple-time-line-default-circle-height)
|
|
151
|
+
);
|
|
152
|
+
width: var(
|
|
153
|
+
--simple-time-line-circle-width,
|
|
154
|
+
var(--simple-time-line-default-circle-width)
|
|
155
|
+
);
|
|
156
|
+
background-color: var(
|
|
157
|
+
--simple-time-line-circle-background-color,
|
|
158
|
+
var(--simple-time-line-default-circle-background-color)
|
|
159
|
+
);
|
|
160
|
+
z-index: 5;
|
|
161
|
+
margin-top: 4px;
|
|
151
162
|
}
|
|
152
163
|
|
|
153
164
|
.time-line-item {
|
|
@@ -166,12 +177,13 @@ $:
|
|
|
166
177
|
}
|
|
167
178
|
|
|
168
179
|
.time-line-body {
|
|
169
|
-
width: var(--simple-
|
|
180
|
+
width: var(--simple-time-line-body-width);
|
|
181
|
+
justify-content: flex-start;
|
|
170
182
|
display: flex;
|
|
171
183
|
}
|
|
172
184
|
|
|
173
185
|
.time-line-divider {
|
|
174
|
-
width: var(--simple-
|
|
186
|
+
width: var(--simple-time-line-divider-width);
|
|
175
187
|
display: flex;
|
|
176
188
|
justify-content: center;
|
|
177
189
|
}
|
|
@@ -8,19 +8,12 @@ export type TimeLineItem = {
|
|
|
8
8
|
to?: Date;
|
|
9
9
|
data?: any;
|
|
10
10
|
};
|
|
11
|
+
import "../../../css/main.css";
|
|
12
|
+
import "./SimpleTimeLine.css";
|
|
11
13
|
declare const __propDef: {
|
|
12
14
|
props: {
|
|
13
15
|
items?: TimeLineItem[] | undefined;
|
|
14
16
|
singleSided?: boolean | undefined;
|
|
15
|
-
height?: string | undefined;
|
|
16
|
-
width?: string | undefined;
|
|
17
|
-
itemMarginTop?: string | undefined;
|
|
18
|
-
itemMarginBottom?: string | undefined;
|
|
19
|
-
firstItemMarginTop?: string | undefined;
|
|
20
|
-
lastItemMarginBottom?: string | undefined;
|
|
21
|
-
circleColor?: string | undefined;
|
|
22
|
-
circleDiameter?: string | undefined;
|
|
23
|
-
timesWidth?: string | undefined;
|
|
24
17
|
circleAlignment?: "bottom" | "top" | "center" | undefined;
|
|
25
18
|
};
|
|
26
19
|
events: {
|
package/dist/utils/countries.js
CHANGED
|
@@ -42,7 +42,7 @@ export const countriesList = [
|
|
|
42
42
|
{ alpha2: "CF", name: "Central African Republic" },
|
|
43
43
|
{ alpha2: "CG", name: "Congo" },
|
|
44
44
|
{ alpha2: "CH", name: "Switzerland" },
|
|
45
|
-
{ alpha2: "CI", name: "
|
|
45
|
+
{ alpha2: "CI", name: "Cote d'Ivoire" },
|
|
46
46
|
{ alpha2: "CK", name: "Cook Islands" },
|
|
47
47
|
{ alpha2: "CL", name: "Chile" },
|
|
48
48
|
{ alpha2: "CM", name: "Cameroon" },
|
|
@@ -223,7 +223,7 @@ export const countriesList = [
|
|
|
223
223
|
{ alpha2: "TM", name: "Turkmenistan" },
|
|
224
224
|
{ alpha2: "TN", name: "Tunisia" },
|
|
225
225
|
{ alpha2: "TO", name: "Tonga" },
|
|
226
|
-
{ alpha2: "TR", name: "
|
|
226
|
+
{ alpha2: "TR", name: "Turkiye" },
|
|
227
227
|
{ alpha2: "TT", name: "Trinidad and Tobago" },
|
|
228
228
|
{ alpha2: "TV", name: "Tuvalu" },
|
|
229
229
|
{ alpha2: "TW", name: "Taiwan, Province of China" },
|