@likable-hair/svelte 3.1.45 → 3.1.46

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 (4) hide show
  1. package/dist/components/simple/timeline/SimpleTimeLine.css +8 -0
  2. package/dist/components/simple/timeline/SimpleTimeLine.svelte +55 -43
  3. package/dist/components/simple/timeline/SimpleTimeLine.svelte.d.ts +2 -9
  4. package/package.json +1 -1
package/dist/components/simple/timeline/SimpleTimeLine.css ADDED
@@ -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
+ }
package/dist/components/simple/timeline/SimpleTimeLine.svelte CHANGED
@@ -1,24 +1,23 @@
1
1
  <script context="module"></script>
2
2
 
3
3
  <script>import { dateToString } from "../dates/utils";
4
- export let items = [], singleSided = false, height = void 0, width = void 0, itemMarginTop = "15px", itemMarginBottom = "0px", firstItemMarginTop = "5px", lastItemMarginBottom = "5px", circleColor = "black", circleDiameter = "15px", timesWidth = void 0, circleAlignment = "top";
5
- $:
6
- cssVariables = Object.entries({
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 style:height style:width style={cssVariables} class="container">
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 class="time-line-infos">
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-timeline-central-line-left);
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: #6767678f;
131
+ background: var(
132
+ --simple-time-line-line-background,
133
+ var(--simple-time-line-default-line-background)
134
+ );
141
135
  content: "";
142
- width: 2px;
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: 50%;
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-timeline-body-width);
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-timeline-divider-width);
186
+ width: var(--simple-time-line-divider-width);
175
187
  display: flex;
176
188
  justify-content: center;
177
189
  }
package/dist/components/simple/timeline/SimpleTimeLine.svelte.d.ts CHANGED
@@ -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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@likable-hair/svelte",
3
3
  "description": "A Svelte component for likablehair and others",
4
- "version": "3.1.45",
4
+ "version": "3.1.46",
5
5
  "scripts": {
6
6
  "host": "vite --host",
7
7
  "dev": "vite dev",