fix(ButtonGroup): removed material icons dependency

docs(button-group): updated examples
N00nDay · Oct 18, 2022 · 9eb0691 · 9eb0691
1 parent bebd3f9
commit 9eb0691
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 47 deletions.
diff --git a/src/lib/components/button-group/Icon.svelte b/src/lib/components/button-group/Icon.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { BUTTON_GROUP_BUTTON_CONTEXT_ID } from './Button.svelte';
+	import { getContext } from 'svelte/internal';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
+
+	const { iconSize }: { iconSize: string } = getContext(BUTTON_GROUP_BUTTON_CONTEXT_ID);
+
+	export let data = '';
+	export let viewBox = extractViewBox(data);
+
+	export let size = iconSize;
+	export let width = size;
+	export let height = size;
+
+	export let color = 'currentColor';
+	export let stroke = color;
+	export let fill = color;
+
+	$: elements = data.replace(/<svg ([^>]*)>/, '').replace('</svg>', '');
+
+	function extractViewBox(svg: string) {
+		const regex = /viewBox="([\d\- ]+)"/;
+		const res = regex.exec(svg);
+		if (!res) return '0 0 24 24'; // default value
+		return res[1];
+	}
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	{width}
+	{height}
+	{viewBox}
+	{stroke}
+	{fill}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'fill', 'viewBox', 'width', 'height', 'stroke'])}
+>
+	{@html elements}
+</svg>
diff --git a/src/lib/components/button-group/index.ts b/src/lib/components/button-group/index.ts
@@ -1,18 +1,14 @@
 import OriginalButtonGroup from './ButtonGroup.svelte';
 import OriginalButton from './Button.svelte';
 import Loader from './Loader.svelte';
-// import OriginalLeading from './Leading.svelte';
-// import OriginalTrailing from './Trailing.svelte';
-// import Icon from './Icon.svelte';
+import Icon from './Icon.svelte';
 
 const ButtonGroup = OriginalButtonGroup as ButtonGroupStatic;
 ButtonGroup.Button = OriginalButton as ButtonStatic;
 ButtonGroup.Button.Loader = Loader;
-// ButtonGroup.Button.Leading = OriginalLeading as LeadingStatic;
-// ButtonGroup.Button.Trailing = OriginalTrailing as TrailingStatic;
-// ButtonGroup.Button.Icon = Icon;
-// ButtonGroup.Button.Leading.Icon = Icon;
-// ButtonGroup.Button.Trailing.Icon = Icon;
+ButtonGroup.Button.Icon = Icon;
+ButtonGroup.Button.Leading = Icon;
+ButtonGroup.Button.Trailing = Icon;
 
 export default ButtonGroup;
 
@@ -25,17 +21,7 @@ export interface ButtonStatic {
 	new (...args: ConstructorParameters<typeof OriginalButton>): OriginalButton;
 	Button: ButtonStatic;
 	Loader: typeof Loader;
-	// Icon: typeof Icon;
-	// Leading: LeadingStatic;
-	// Trailing: TrailingStatic;
+	Icon: typeof Icon;
+	Leading: typeof Icon;
+	Trailing: typeof Icon;
 }
-
-// export interface LeadingStatic {
-// 	new (...args: ConstructorParameters<typeof OriginalLeading>): OriginalLeading;
-// 	Icon: typeof Icon;
-// }
-
-// export interface TrailingStatic {
-// 	new (...args: ConstructorParameters<typeof OriginalTrailing>): OriginalTrailing;
-// 	Icon: typeof Icon;
-// }
diff --git a/src/lib/components/button/Icon.svelte b/src/lib/components/button/Icon.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { BUTTON_CONTEXT_ID } from './Button.svelte';
-	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte/internal';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';

diff --git a/src/routes/button-group/+page.svelte b/src/routes/button-group/+page.svelte
@@ -9,7 +9,8 @@
 		exampleLoading,
 		slots,
 		buttonProps,
-		buttonSlots
+		buttonSlots,
+		iconProps
 	} from './examples';
 	import { PropsTable, SlotsTable, CodeBlock } from '../../docs';
 	import { lock, send, home } from '../../docs/icons';
@@ -107,13 +108,13 @@
 		<Card.Content slot="content" class="p-4">
 			<ButtonGroup>
 				<ButtonGroup.Button on:click={() => changeActive1(0)} active={activeItem1 === 0}>
-					<Icon slot="icon" data={home} />
+					<ButtonGroup.Button.Icon slot="icon" data={home} />
 				</ButtonGroup.Button>
 				<ButtonGroup.Button on:click={() => changeActive1(1)} active={activeItem1 === 1}>
-					<Icon slot="icon" data={send} />
+					<ButtonGroup.Button.Icon slot="icon" data={send} />
 				</ButtonGroup.Button>
 				<ButtonGroup.Button on:click={() => changeActive1(2)} active={activeItem1 === 2}>
-					<Icon slot="icon" data={lock} />
+					<ButtonGroup.Button.Icon slot="icon" data={lock} />
 				</ButtonGroup.Button>
 			</ButtonGroup>
 
@@ -131,15 +132,15 @@
 		<Card.Content slot="content" class="p-4">
 			<ButtonGroup>
 				<ButtonGroup.Button on:click={() => changeActive1(0)} active={activeItem1 === 0}>
-					<Icon slot="leading" data={home} />
+					<ButtonGroup.Button.Leading slot="leading" data={home} />
 					Paid
 				</ButtonGroup.Button>
 				<ButtonGroup.Button on:click={() => changeActive1(1)} active={activeItem1 === 1}>
-					<Icon slot="leading" data={send} />
+					<ButtonGroup.Button.Leading slot="leading" data={send} />
 					Add
 				</ButtonGroup.Button>
 				<ButtonGroup.Button on:click={() => changeActive1(2)} active={activeItem1 === 2}>
-					<Icon slot="leading" data={lock} />
+					<ButtonGroup.Button.Leading slot="leading" data={lock} />
 					Workspaces
 				</ButtonGroup.Button>
 			</ButtonGroup>
@@ -162,21 +163,21 @@
 					active={activeItem2 === 0}
 					loading={activeItem2 === 0 && loading}
 				>
-					<Icon slot="icon" data={home} />
+					<ButtonGroup.Button.Icon slot="icon" data={home} />
 				</ButtonGroup.Button>
 				<ButtonGroup.Button
 					on:click={() => changeActive2(1)}
 					active={activeItem2 === 1}
 					loading={activeItem2 === 1 && loading}
 				>
-					<Icon slot="icon" data={send} />
+					<ButtonGroup.Button.Icon slot="icon" data={send} />
 				</ButtonGroup.Button>
 				<ButtonGroup.Button
 					on:click={() => changeActive2(2)}
 					active={activeItem2 === 2}
 					loading={activeItem2 === 2 && loading}
 				>
-					<Icon slot="icon" data={lock} />
+					<ButtonGroup.Button.Icon slot="icon" data={lock} />
 				</ButtonGroup.Button>
 			</ButtonGroup>
 
@@ -199,3 +200,15 @@
 <Col class="col-24">
 	<SlotsTable component="ButtonGroup.Button" slots={buttonSlots} />
 </Col>
+
+<Col class="col-24">
+	<PropsTable component="ButtonGroup.Button.Leading" props={iconProps} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="ButtonGroup.Button.Icon" props={iconProps} />
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="ButtonGroup.Button.Trailing" props={iconProps} />
+</Col>
diff --git a/src/routes/button-group/examples.ts b/src/routes/button-group/examples.ts
@@ -69,12 +69,12 @@ export const buttonSlots: Slot[] = [
 	{
 		id: '1',
 		slot: 'leading',
-		component: ''
+		component: '<ButtonGroup.Button.Leading slot="leading" />'
 	},
 	{
 		id: '2',
 		slot: 'icon',
-		component: ''
+		component: '<ButtonGroup.Button.Icon slot="icon" />'
 	},
 	{
 		id: '3',
@@ -84,15 +84,58 @@ export const buttonSlots: Slot[] = [
 	{
 		id: '4',
 		slot: 'trailing',
-		component: ''
+		component: '<ButtonGroup.Button.Trailing slot="trailing" />'
 	}
 ];
 
-export const iconSlots: Slot[] = [
+export const iconProps: Prop[] = [
 	{
 		id: '1',
-		slot: 'default',
-		component: ''
+		prop: 'data',
+		type: '<a href="/types#IconData" class="link">string (IconData)</a>',
+		default: ''
+	},
+	{
+		id: '2',
+		prop: 'viewBox',
+		type: 'string',
+		default: '0 0 24 24'
+	},
+	{
+		id: '3',
+		prop: 'size',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '4',
+		prop: 'width',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '5',
+		prop: 'height',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '6',
+		prop: 'color',
+		type: 'string',
+		default: 'currentColor'
+	},
+	{
+		id: '7',
+		prop: 'stroke',
+		type: 'string',
+		default: 'currentColor'
+	},
+	{
+		id: '8',
+		prop: 'fill',
+		type: 'string',
+		default: 'currentColor'
 	}
 ];
 
@@ -160,13 +203,13 @@ export const exampleIcon = `
 
 <ButtonGroup>
 	<ButtonGroup.Button>
-		<Icon slot="icon" data={home} />
+		<ButtonGroup.Button.Icon slot="icon" data={home} />
 	</ButtonGroup.Button>
 	<ButtonGroup.Button>
-		<Icon slot="icon" data={send} />
+		<ButtonGroup.Button.Icon slot="icon" data={send} />
 	</ButtonGroup.Button>
 	<ButtonGroup.Button>
-		<Icon slot="icon" data={lock} />
+		<ButtonGroup.Button.Icon slot="icon" data={lock} />
 	</ButtonGroup.Button>
 </ButtonGroup>`;
 
@@ -181,15 +224,15 @@ export const exampleLeading = `
 
 <ButtonGroup>
 	<ButtonGroup.Button>
-		<Icon slot="leading" data={home} />
+		<ButtonGroup.Button.Leading slot="leading" data={home} />
 		Paid
 	</ButtonGroup.Button>
 	<ButtonGroup.Button>
-		<Icon slot="leading" data={send} />
+		<ButtonGroup.Button.Leading slot="leading" data={send} />
 		Add
 	</ButtonGroup.Button>
 	<ButtonGroup.Button>
-		<Icon slot="leading" data={lock} />
+		<ButtonGroup.Button.Leading slot="leading" data={lock} />
 		Workspaces
 	</ButtonGroup.Button>
 </ButtonGroup>`;
@@ -221,20 +264,20 @@ export const exampleLoading = `
 		active={activeItem === 0}
 		loading={activeItem === 0 && loading}
 	>
-		<Icon slot="icon" data={home} />
+		<ButtonGroup.Button.Icon slot="icon" data={home} />
 	</ButtonGroup.Button>
 	<ButtonGroup.Button
 		on:click={() => changeActive(1)}
 		active={activeItem === 1}
 		loading={activeItem === 1 && loading}
 	>
-		<Icon slot="icon" data={send} />
+		<ButtonGroup.Button.Icon slot="icon" data={send} />
 	</ButtonGroup.Button>
 	<ButtonGroup.Button
 		on:click={() => changeActive(2)}
 		active={activeItem === 2}
 		loading={activeItem === 2 && loading}
 	>
-		<Icon slot="icon" data={lock} />
+		<ButtonGroup.Button.Icon slot="icon" data={lock} />
 	</ButtonGroup.Button>
 </ButtonGroup>`;