diff --git a/demo/src/lib/TabsDemo.svelte b/demo/src/lib/TabsDemo.svelte new file mode 100644 index 0000000..ddaeb1a --- /dev/null +++ b/demo/src/lib/TabsDemo.svelte @@ -0,0 +1,48 @@ + + + + + one + two + three + + + + + + nested one + nested two + nested three + + + +

First nested panel

+
+ + +

Second nested panel

+
+ + +

Third nested panel

+
+
+
+ + +

Second panel

+
+ + +

Third panel

+
+
+ + + diff --git a/demo/src/lib/tabs/TabButton.svelte b/demo/src/lib/tabs/TabButton.svelte new file mode 100644 index 0000000..86b913e --- /dev/null +++ b/demo/src/lib/tabs/TabButton.svelte @@ -0,0 +1,29 @@ + + + + + diff --git a/demo/src/lib/tabs/TabList.svelte b/demo/src/lib/tabs/TabList.svelte new file mode 100644 index 0000000..2f63475 --- /dev/null +++ b/demo/src/lib/tabs/TabList.svelte @@ -0,0 +1,9 @@ +
+ +
+ + diff --git a/demo/src/lib/tabs/TabPanel.svelte b/demo/src/lib/tabs/TabPanel.svelte new file mode 100644 index 0000000..5ef2682 --- /dev/null +++ b/demo/src/lib/tabs/TabPanel.svelte @@ -0,0 +1,26 @@ + + +
+ +
+ + + diff --git a/demo/src/lib/tabs/TabsWrapper.svelte b/demo/src/lib/tabs/TabsWrapper.svelte new file mode 100644 index 0000000..904461a --- /dev/null +++ b/demo/src/lib/tabs/TabsWrapper.svelte @@ -0,0 +1,50 @@ + + + + +
+ +
diff --git a/demo/src/lib/tabs/index.js b/demo/src/lib/tabs/index.js new file mode 100644 index 0000000..58e1285 --- /dev/null +++ b/demo/src/lib/tabs/index.js @@ -0,0 +1,4 @@ +export { default as TabsWrapper } from './TabsWrapper.svelte'; +export { default as TabList } from './TabList.svelte'; +export { default as TabPanel } from './TabPanel.svelte'; +export { default as TabButton } from './TabButton.svelte'; diff --git a/demo/src/main.js b/demo/src/main.js index 8849758..8804419 100644 --- a/demo/src/main.js +++ b/demo/src/main.js @@ -7,29 +7,74 @@ import Counter from './lib/Counter.svelte'; import Example from './lib/Example.svelte'; const params = new URLSearchParams(location.search); +const debugMode = false; const hydratable = !!params.get('hydratable'); svelteRetag({ component: App, tagname: 'app-tag', attributes: ['pagetitle'], + debugMode, hydratable, }); svelteRetag({ component: Intro, tagname: 'intro-tag', + debugMode, hydratable, }); svelteRetag({ component: Counter, tagname: 'counter-tag', + debugMode, hydratable, }); svelteRetag({ component: Example, tagname: 'example-tag', + debugMode, hydratable, }); + + +/** + * TabsWrapper.svelte for testing context + * + * TODO: ISSUE-10: WIP + */ + +import TabsDemo from './lib/TabsDemo.svelte'; +import { TabsWrapper, TabList, TabPanel, TabButton } from './lib/tabs'; + +svelteRetag({ + component: TabsDemo, + tagname: 'tabs-demo', + debugMode, +}); + +svelteRetag({ + component: TabsWrapper, + tagname: 'tabs-wrapper', + debugMode, +}); + +svelteRetag({ + component: TabList, + tagname: 'tab-list', + debugMode, +}); + +svelteRetag({ + component: TabPanel, + tagname: 'tab-panel', + debugMode, +}); + +svelteRetag({ + component: TabButton, + tagname: 'tab-button', + debugMode, +}); diff --git a/demo/tabs.html b/demo/tabs.html new file mode 100644 index 0000000..ecff500 --- /dev/null +++ b/demo/tabs.html @@ -0,0 +1,124 @@ + + + + + + + svelte-retag demo (tabs demo) + + + + +
+

Tabs demo

+ +

Thanks to + AmirPournasserian + from + + this StackOverflow post for the tab components which rely on this context.

+ + + + + + + + + + + + + + + + + +
+ + diff --git a/demo/vite.config.js b/demo/vite.config.js index 64e5fd2..4b0ea47 100644 --- a/demo/vite.config.js +++ b/demo/vite.config.js @@ -24,6 +24,7 @@ export default defineConfig({ 'index.html', 'hydratable.html', 'hydratable.source.html', // Used for generating content in hydratable.html above. + 'tabs.html', ], output: {