@ainsleydev/sveltekit-helper 0.5.0 → 0.5.1

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/Modal.svelte +26 -9
  2. package/dist/components/Modal.svelte.d.ts +11 -0
  3. package/dist/components/Modal.svelte.d.ts.map +1 -1
  4. package/package.json +1 -1
package/dist/components/Modal.svelte CHANGED
@@ -6,6 +6,7 @@ export type TransitionFn = (node: Element, params: Record<string, unknown>) => T
6
6
  export type ModalProps = {
7
7
  title?: string;
8
8
  isOpen?: boolean;
9
+ showClose?: boolean;
9
10
  children?: Snippet;
10
11
  class?: string;
11
12
  onClose?: () => void;
@@ -21,6 +22,7 @@ export type ModalProps = {
21
22
  let {
22
23
  title = '',
23
24
  isOpen = $bindable(false),
25
+ showClose = true,
24
26
  children,
25
27
  class: className = '',
26
28
  onClose,
@@ -112,6 +114,16 @@ export type ModalProps = {
112
114
  - `--modal-content-padding`: Content padding (default: 1.5rem / 2rem on tablet)
113
115
  - `--modal-header-border`: Header bottom border (default: 1px solid var(--token-border-grey))
114
116
  - `--modal-close-colour`: Close icon colour (default: var(--token-icon-grey))
117
+
118
+ Props:
119
+ - `title` (optional): Modal heading text.
120
+ - `isOpen` (bindable): Controls modal visibility.
121
+ - `showClose` (default: true): Whether to render the close button.
122
+ - `children`: Slot content (Snippet).
123
+ - `class`: Custom CSS class.
124
+ - `onClose`: Callback when the modal should close.
125
+ - `transition`: Custom transition function (default: fade).
126
+ - `transitionParams`: Transition parameters.
115
127
  -->
116
128
  {#if isOpen}
117
129
  <dialog
@@ -123,16 +135,20 @@ export type ModalProps = {
123
135
  transition:transitionFn={transitionParams}
124
136
  >
125
137
  <div class="modal__content" bind:this={modalContent}>
126
- {#if title}
138
+ {#if title || showClose}
127
139
  <header class="modal__header">
128
- <h4 class="modal__title">{title}</h4>
129
- <button
130
- class="modal__close"
131
- onclick={() => onClose?.()}
132
- aria-label={title ? `Close ${title}` : 'Close modal'}
133
- >
134
- <X color="var(--modal-close-colour, var(--token-icon-grey))" />
135
- </button>
140
+ {#if title}
141
+ <h4 class="modal__title">{title}</h4>
142
+ {/if}
143
+ {#if showClose}
144
+ <button
145
+ class="modal__close"
146
+ onclick={() => onClose?.()}
147
+ aria-label={title ? `Close ${title}` : 'Close modal'}
148
+ >
149
+ <X color="var(--modal-close-colour, var(--token-icon-grey))" />
150
+ </button>
151
+ {/if}
136
152
  </header>
137
153
  {/if}
138
154
  <div class="modal__body">
@@ -181,6 +197,7 @@ export type ModalProps = {
181
197
  display: flex;
182
198
  align-items: center;
183
199
  justify-content: center;
200
+ margin-left: auto;
184
201
  }
185
202
  .modal__content {
186
203
  position: relative;
package/dist/components/Modal.svelte.d.ts CHANGED
@@ -3,6 +3,7 @@ export type TransitionFn = (node: Element, params: Record<string, unknown>) => T
3
3
  export type ModalProps = {
4
4
  title?: string;
5
5
  isOpen?: boolean;
6
+ showClose?: boolean;
6
7
  children?: Snippet;
7
8
  class?: string;
8
9
  onClose?: () => void;
@@ -68,6 +69,16 @@ export type ModalProps = {
68
69
  * - `--modal-content-padding`: Content padding (default: 1.5rem / 2rem on tablet)
69
70
  * - `--modal-header-border`: Header bottom border (default: 1px solid var(--token-border-grey))
70
71
  * - `--modal-close-colour`: Close icon colour (default: var(--token-icon-grey))
72
+ *
73
+ * Props:
74
+ * - `title` (optional): Modal heading text.
75
+ * - `isOpen` (bindable): Controls modal visibility.
76
+ * - `showClose` (default: true): Whether to render the close button.
77
+ * - `children`: Slot content (Snippet).
78
+ * - `class`: Custom CSS class.
79
+ * - `onClose`: Callback when the modal should close.
80
+ * - `transition`: Custom transition function (default: fade).
81
+ * - `transitionParams`: Transition parameters.
71
82
  */
72
83
  declare const Modal: import("svelte").Component<ModalProps, {}, "isOpen">;
73
84
  type Modal = ReturnType<typeof Modal>;
package/dist/components/Modal.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Modal.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAExD,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,gBAAgB,CAAC;AAEhG,MAAM,MAAM,UAAU,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC3C,CAAC;AAsEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Modal.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAExD,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,gBAAgB,CAAC;AAEhG,MAAM,MAAM,UAAU,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC3C,CAAC;AA2EF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ainsleydev/sveltekit-helper",
3
- "version": "0.5.0",
3
+ "version": "0.5.1",
4
4
  "description": "SvelteKit utilities, components and helpers for ainsley.dev builds",
5
5
  "license": "MIT",
6
6
  "type": "module",