@djcali570/component-lib 0.1.2 → 0.1.4

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 CHANGED
@@ -230,6 +230,8 @@ onUpdate={(v) => dialogUpdated(v)}
230
230
 
231
231
 
232
232
  # Updates
233
+ #### 0.1.4 - Updated Accordion component to add innerPadding prop.
234
+ #### 0.1.3 - Updated Time Picker to allow binding to timeText.
233
235
  #### 0.1.2 - Fixed some minor styling issues with Dialog component.
234
236
  #### 0.1.1 - Added Bottom Sheet component & Dialog component.
235
237
  #### 0.1.0 - Updated Accordion component to use snippets for title.
@@ -6,15 +6,17 @@
6
6
  let {
7
7
  colorScheme: partialColorScheme = {},
8
8
  title,
9
- panel,
9
+ panel,
10
10
  iconWidth = '1.2rem',
11
- iconHeight = '1.2rem'
11
+ iconHeight = '1.2rem',
12
+ innerPadding = '0.5rem'
12
13
  }: {
13
14
  colorScheme?: Partial<Accordion5ColorScheme>;
14
15
  title?: Snippet;
15
- panel: Snippet;
16
+ panel: Snippet;
16
17
  iconWidth?: string;
17
18
  iconHeight?: string;
19
+ innerPadding?: string;
18
20
  } = $props();
19
21
 
20
22
  // Default colorScheme
@@ -58,9 +60,10 @@
58
60
  --acc5-bgColor: {colorScheme.bgColor};
59
61
  --acc5-textColor: {colorScheme.textColor};
60
62
  --acc5-triggerColor: {colorScheme.triggerColor};
61
- --acc5-panelBgColor: {colorScheme.panelBgColor};
63
+ --acc5-panelBgColor: {colorScheme.panelBgColor};
62
64
  --acc5-IconWidth: {iconWidth};
63
65
  --acc5-IconHeight: {iconHeight};
66
+ --acc5-InnerPadding: {innerPadding}
64
67
  "
65
68
  >
66
69
  <button onclick={showPanel}>
@@ -94,16 +97,15 @@
94
97
 
95
98
  <style>
96
99
  .accordion5 {
97
- width: 100%;
98
- max-width: 600px;
100
+ width: 100%;
99
101
  margin: 0 auto;
100
102
  border-radius: 0.5rem;
101
103
  overflow: hidden;
102
104
  }
103
105
 
104
106
  button {
105
- width: 100%;
106
- padding-block: 0.5rem;
107
+ width: 100%;
108
+ padding: var(--acc5-InnerPadding);
107
109
  font-size: 1rem;
108
110
  cursor: pointer;
109
111
  border: none;
@@ -6,6 +6,7 @@ type $$ComponentProps = {
6
6
  panel: Snippet;
7
7
  iconWidth?: string;
8
8
  iconHeight?: string;
9
+ innerPadding?: string;
9
10
  };
10
11
  declare const Accordion5: import("svelte").Component<$$ComponentProps, {}, "">;
11
12
  type Accordion5 = ReturnType<typeof Accordion5>;
@@ -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 === '') return;
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@djcali570/component-lib",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "files": [
5
5
  "dist",
6
6
  "!dist/**/*.test.*",