Skip to content

Commit

Permalink
- Update prettier config
Browse files Browse the repository at this point in the history
- Add ...restProps to GBtn when link
- import GIcon in GSortableCards
  • Loading branch information
ngblaylock committed Feb 20, 2025
1 parent 9958887 commit b9fdb9f
Show file tree
Hide file tree
Showing 13 changed files with 159 additions and 41 deletions.
20 changes: 14 additions & 6 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
{
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 80,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
"useTabs": false,
"singleQuote": true,
"printWidth": 80,
"plugins": ["prettier-plugin-svelte"],
"singleAttributePerLine": true,
"bracketSameLine": false,
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}
19 changes: 15 additions & 4 deletions src/PACKAGE/components/GBtn.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -28,24 +28,35 @@

{#snippet btnContent()}
{#if iconLeft}
<GIcon name={iconLeft} size={1.5} />
<GIcon
name={iconLeft}
size={1.5}
/>
{/if}
{@render children?.()}
{#if iconRight}
<GIcon name={iconRight} size={1.5} />
<GIcon
name={iconRight}
size={1.5}
/>
{/if}
{/snippet}

{#if href}
<a
class="btn btn-{outlineVariant}{variant} {classList}"
class:btn-inner-icon={hasInnerIcon}
{href}>{@render btnContent()}</a
{href}
{...restProps}
>
{@render btnContent()}
</a>
{:else}
<button
class="btn btn-{outlineVariant}{variant} {classList}"
class:btn-inner-icon={hasInnerIcon}
{...restProps}>{@render btnContent()}</button
{...restProps}
>
{@render btnContent()}
</button>
{/if}
13 changes: 11 additions & 2 deletions src/PACKAGE/components/GCheckbox.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,19 @@
aria-describedby={hint ? `${uid}-hint` : null}
{...restProps}
/>
<label class="form-check-label" class:visually-hidden={hideLabel} for={uid}>
<label
class="form-check-label"
class:visually-hidden={hideLabel}
for={uid}
>
{label}
</label>
{#if hint}
<div id="{uid}-hint" class="form-text">{hint}</div>
<div
id="{uid}-hint"
class="form-text"
>
{hint}
</div>
{/if}
</div>
12 changes: 10 additions & 2 deletions src/PACKAGE/components/GCheckboxGroup.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,19 @@
id={uid + index}
aria-describedby={item.hint ? `${uid + index}-hint` : null}
/>
<label class="form-check-label" for={uid + index}>
<label
class="form-check-label"
for={uid + index}
>
{item.label}
</label>
{#if item.hint}
<div id="{uid + index}-hint" class="form-text">{item.hint}</div>
<div
id="{uid + index}-hint"
class="form-text"
>
{item.hint}
</div>
{/if}
</div>
{/each}
Expand Down
9 changes: 6 additions & 3 deletions src/PACKAGE/components/GDebug.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,17 @@
style="--bse-dev-note-title: '{title}'"
>
<div class="dev-note-icon">
<GIcon name="json" size={1.5} />
<GIcon
name="json"
size={1.5}
/>
</div>
{#await codeToHtml( JSON.stringify(data, null, 2), { lang: 'json', theme: 'material-theme' } )}
{#await codeToHtml( JSON.stringify(data, null, 2), { lang: 'json', theme: 'material-theme' }, )}
<div class="m-n3 shiki-example bg-dark">
<pre style="background-color: #263238; color: #EEFFFF;">{JSON.stringify(
data,
null,
2
2,
)}</pre>
</div>
{:then value}
Expand Down
10 changes: 8 additions & 2 deletions src/PACKAGE/components/GDevNote.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,15 @@
</script>

{#if show}
<div class="dev-note {classList}" style="--bse-dev-note-title: '{title}'">
<div
class="dev-note {classList}"
style="--bse-dev-note-title: '{title}'"
>
<div class="dev-note-icon">
<GIcon name="tools" size={1.5} />
<GIcon
name="tools"
size={1.5}
/>
</div>
{@render children()}
</div>
Expand Down
12 changes: 10 additions & 2 deletions src/PACKAGE/components/GIconBtn.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,20 @@
<a
{title}
class="btn btn-{outlineVariant}{variant} btn-icon {classList}"
{href}><GIcon name={icon} size={1.5} /></a
{href}
><GIcon
name={icon}
size={1.5}
/></a
>
{:else}
<button
{title}
class="btn btn-{outlineVariant}{variant} btn-icon {classList}"
{...restProps}><GIcon name={icon} size={1.5} /></button
{...restProps}
><GIcon
name={icon}
size={1.5}
/></button
>
{/if}
12 changes: 10 additions & 2 deletions src/PACKAGE/components/GRadioGroup.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,19 @@
id={uid + index}
aria-describedby={item.hint ? `${uid + index}-hint` : null}
/>
<label class="form-check-label" for={uid + index}>
<label
class="form-check-label"
for={uid + index}
>
{item.label}
</label>
{#if item.hint}
<div id="{uid + index}-hint" class="form-text">{item.hint}</div>
<div
id="{uid + index}-hint"
class="form-text"
>
{item.hint}
</div>
{/if}
</div>
{/each}
Expand Down
20 changes: 16 additions & 4 deletions src/PACKAGE/components/GSegmentedControl.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@
let iconVariant = $derived(items.every((item) => item.icon));
</script>

<div class="btn-check-group {classList}" class:rounded-pill={iconVariant}>
<div
class="btn-check-group {classList}"
class:rounded-pill={iconVariant}
>
{#each items as item, index}
<input
bind:group
Expand All @@ -33,12 +36,21 @@
autocomplete="off"
/>
{#if iconVariant}
<label class="btn btn-icon" for={uid + index}>
<GIcon name={item.icon as IconName} size={1.5} />
<label
class="btn btn-icon"
for={uid + index}
>
<GIcon
name={item.icon as IconName}
size={1.5}
/>
<span class="visually-hidden">{item.label}</span>
</label>
{:else}
<label class="btn" for={uid + index}>
<label
class="btn"
for={uid + index}
>
{item.label}
</label>
{/if}
Expand Down
15 changes: 11 additions & 4 deletions src/PACKAGE/components/GSortableCards.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@
import Sortable from 'sortablejs';
import { onMount, tick, type Snippet } from 'svelte';
import cloneDeep from 'lodash/cloneDeep';
import GIcon from './GIcon.svelte';
let {
children,
items = $bindable(),
}: {
children?: Snippet<[ item: any, index: number ]>;
children?: Snippet<[item: any, index: number]>;
items: unknown[];
} = $props();
Expand All @@ -28,16 +29,22 @@
});
</script>

<div bind:this={el} class="vstack">
<div
bind:this={el}
class="vstack"
>
{#each items as item, index (index)}
<div class="card hstack gap-0">
<div
class="handle bg-base-4 align-self-stretch d-flex align-items-center px-2"
>
<GIcon name="dragVertical" size={1.5} />
<GIcon
name="dragVertical"
size={1.5}
/>
</div>
{#if children}
{@render children( item, index )}
{@render children(item, index)}
{:else}
{item}
{/if}
Expand Down
12 changes: 10 additions & 2 deletions src/PACKAGE/components/GTextInput.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@
</script>

<div class={classList}>
<label for={uid} class="form-label" class:visually-hidden={hideLabel}
<label
for={uid}
class="form-label"
class:visually-hidden={hideLabel}
>{#if required}<span class="text-primary">*</span>{/if}{label}</label
>
<input
Expand All @@ -35,6 +38,11 @@
{...restProps}
/>
{#if hint}
<div id="{uid}-hint" class="form-text">{hint}</div>
<div
id="{uid}-hint"
class="form-text"
>
{hint}
</div>
{/if}
</div>
35 changes: 29 additions & 6 deletions src/PACKAGE/examples/Btn.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
<div class="hstack gap-1 flex-wrap">
<GBtn onclick={() => console.info('hi')}>Button</GBtn>
<GBtn href="/">Link</GBtn>
<GBtn
href="https://github.com/ngblaylock?tab=repositories"
target="_blank">External Link</GBtn
>
</div>
</div>
<div>
Expand All @@ -36,32 +40,51 @@
<h3>Active</h3>
<div class="hstack gap-1 flex-wrap">
{#each variants as variant}
<GBtn class="active" {variant}>Button</GBtn>
<GBtn
class="active"
{variant}>Button</GBtn
>
{/each}
</div>
</div>
<div>
<h3>Disabled</h3>
<div class="hstack gap-1 flex-wrap">
{#each variants as variant}
<GBtn disabled {variant}>Button</GBtn>
<GBtn
disabled
{variant}>Button</GBtn
>
{/each}
</div>
</div>
<div>
<h3>Outline</h3>
<div class="hstack gap-1 flex-wrap">
{#each variants as variant}
<GBtn outline {variant}>Button</GBtn>
<GBtn
outline
{variant}>Button</GBtn
>
{/each}
</div>
</div>
<div>
<h3>Inner Icon Buttons</h3>
<div class="hstack gap-1 flex-wrap">
<GBtn variant="primary" iconLeft="arrowLeft">Button</GBtn>
<GBtn variant="primary" iconRight="arrowRight">Button</GBtn>
<GBtn variant="primary" iconLeft="arrowLeft" iconRight="arrowRight">Button</GBtn>
<GBtn
variant="primary"
iconLeft="arrowLeft">Button</GBtn
>
<GBtn
variant="primary"
iconRight="arrowRight">Button</GBtn
>
<GBtn
variant="primary"
iconLeft="arrowLeft"
iconRight="arrowRight">Button</GBtn
>
</div>
</div>
</div>
11 changes: 9 additions & 2 deletions src/lib/components/ComponentApi.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,12 @@
<td
><span class="code-color">{prop.required ? '* ' : ''}</span
>{#if prop.link}
<a href={prop.link} target="_blank">{prop.name}</a>
<a
href={prop.link}
target="_blank"
>
{prop.name}
</a>
{:else}
{prop.name}
{/if}
Expand All @@ -55,7 +60,9 @@
{#if componentProps.some((cp) => cp.required)}
<tfoot>
<tr
><td colspan="4" class="bg-base-4"
><td
colspan="4"
class="bg-base-4"
><span class="code-color">*</span> <small>Required Prop</small></td
></tr
>
Expand Down

0 comments on commit b9fdb9f

Please sign in to comment.