@djcali570/component-lib 0.1.1 → 0.1.3
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/README.md +2 -0
- package/dist/Dialog5.svelte +17 -17
- package/dist/TimePicker5.svelte +2 -2
- package/dist/TimePicker5.svelte.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -230,6 +230,8 @@ onUpdate={(v) => dialogUpdated(v)}
|
|
|
230
230
|
|
|
231
231
|
|
|
232
232
|
# Updates
|
|
233
|
+
#### 0.1.3 - Updated Time Picker to allow binding to timeText.
|
|
234
|
+
#### 0.1.2 - Fixed some minor styling issues with Dialog component.
|
|
233
235
|
#### 0.1.1 - Added Bottom Sheet component & Dialog component.
|
|
234
236
|
#### 0.1.0 - Updated Accordion component to use snippets for title.
|
|
235
237
|
#### 0.0.14 - Fixed Input5 textarea height was not being applied. Removed Tailwind dependencies.
|
package/dist/Dialog5.svelte
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
minWidth = '360px',
|
|
10
10
|
minHeight = '250px',
|
|
11
11
|
dialogType = 'ok',
|
|
12
|
-
title,
|
|
12
|
+
title,
|
|
13
13
|
content,
|
|
14
14
|
confirmButtonText = 'Confirm',
|
|
15
15
|
cancelButtonText = 'Cancel',
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
// Default colorScheme
|
|
34
34
|
const defaultColorScheme: Dialog5ColorScheme = {
|
|
35
35
|
bgColor: '#121212',
|
|
36
|
-
|
|
36
|
+
titleBgColor: '#181818',
|
|
37
37
|
textColor: '#fcfcfc',
|
|
38
|
-
|
|
38
|
+
confirmTextColor: '#fb2c36',
|
|
39
39
|
borderColor: '#262626',
|
|
40
40
|
okButtonBgColor: '#181818',
|
|
41
41
|
confirmButtonBgColor: '#181818'
|
|
@@ -98,12 +98,10 @@
|
|
|
98
98
|
--d5-okButtonBgColor: {colorScheme.okButtonBgColor};
|
|
99
99
|
--d5-confirmButtonBgColor: {colorScheme.confirmButtonBgColor};"
|
|
100
100
|
>
|
|
101
|
-
|
|
102
|
-
{
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
{/if}
|
|
106
|
-
</div>
|
|
101
|
+
{#if title}
|
|
102
|
+
<div class="d5__title__container">{@render title()}</div>
|
|
103
|
+
{/if}
|
|
104
|
+
|
|
107
105
|
{#if content}
|
|
108
106
|
{@render content()}
|
|
109
107
|
{:else}
|
|
@@ -128,7 +126,7 @@
|
|
|
128
126
|
{/if}
|
|
129
127
|
{#if dialogType === 'ok'}
|
|
130
128
|
<div class="d5__ok">
|
|
131
|
-
<button type="button" class="
|
|
129
|
+
<button type="button" class="ok__btn" onclick={confirm}>{okButtonText}</button>
|
|
132
130
|
</div>
|
|
133
131
|
{/if}
|
|
134
132
|
</div>
|
|
@@ -162,14 +160,16 @@
|
|
|
162
160
|
grid-template-rows: auto 1fr 65px;
|
|
163
161
|
border-width: 1px;
|
|
164
162
|
border-radius: 0.75rem;
|
|
163
|
+
border-color: var(--d5-borderColor);
|
|
165
164
|
background-color: var(--d5-bgColor);
|
|
166
|
-
|
|
165
|
+
border-style: solid;
|
|
166
|
+
overflow: hidden;
|
|
167
167
|
}
|
|
168
168
|
.d5__title__container {
|
|
169
|
-
display: flex;
|
|
169
|
+
display: flex;
|
|
170
170
|
justify-content: center;
|
|
171
|
-
|
|
172
|
-
|
|
171
|
+
width: 100%;
|
|
172
|
+
background-color: var(--d5-titleBgColor);
|
|
173
173
|
}
|
|
174
174
|
.d5__btn__container {
|
|
175
175
|
padding: 0.75rem;
|
|
@@ -190,15 +190,15 @@
|
|
|
190
190
|
filter: brightness(1.2);
|
|
191
191
|
}
|
|
192
192
|
.ok__btn {
|
|
193
|
-
|
|
193
|
+
color: var(--d5-textColor);
|
|
194
194
|
background-color: var(--d5-okButtonBgColor);
|
|
195
|
-
|
|
195
|
+
transition: colors;
|
|
196
196
|
}
|
|
197
197
|
.d5__ok {
|
|
198
198
|
display: flex;
|
|
199
199
|
justify-content: center;
|
|
200
200
|
height: 100%;
|
|
201
|
-
|
|
201
|
+
color: var(--d5-textColor);
|
|
202
202
|
}
|
|
203
203
|
|
|
204
204
|
button {
|
package/dist/TimePicker5.svelte
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
let {
|
|
11
11
|
colorScheme: partialColorScheme = {},
|
|
12
|
-
timeText =
|
|
12
|
+
timeText = $bindable(),
|
|
13
13
|
name = 'timePicker',
|
|
14
14
|
title = 'Title',
|
|
15
15
|
placeholder = '',
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
function updatePickerValues() {
|
|
157
|
-
if (timeText
|
|
157
|
+
if (!timeText) return;
|
|
158
158
|
|
|
159
159
|
const hourVal = timeText.split(':')[0];
|
|
160
160
|
const minVal = timeText.split(':')[1];
|
|
@@ -10,6 +10,6 @@ type $$ComponentProps = {
|
|
|
10
10
|
radius?: 'right' | 'left' | 'full';
|
|
11
11
|
onTimePicked?: (value: string) => void;
|
|
12
12
|
};
|
|
13
|
-
declare const TimePicker5: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
13
|
+
declare const TimePicker5: import("svelte").Component<$$ComponentProps, {}, "timeText">;
|
|
14
14
|
type TimePicker5 = ReturnType<typeof TimePicker5>;
|
|
15
15
|
export default TimePicker5;
|