#8 add page components and examples, add page to index.ts and status of v0.0.28

DavidBlaa · DavidBlaa · commit 88a33655ff62 · 2023-05-26T11:20:03.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.27",
   "private": false,
   "scripts": {
-    "dev": "vite dev --host",
+    "dev": "vite dev",
     "package": "svelte-package --watch",
     "build": "vite build",
     "build package": "svelte-kit sync && svelte-package --watch",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.28.1",
-    "@skeletonlabs/skeleton": "^1.2.5",
+    "@skeletonlabs/skeleton": "^1.6.0",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-static": "^2.0.2",
     "@sveltejs/kit": "^1.5.0",
diff --git a/src/app.postcss b/src/app.postcss
@@ -3,3 +3,7 @@ html,
 body {
 	@apply h-full bg-white;
 }
+
+[type='text']:focus{
+	--tw-ring-color:#00000;
+}
diff --git a/src/docs/navigation_link.ts b/src/docs/navigation_link.ts
@@ -22,6 +22,7 @@ export const menuNavLinks: any = [
 		id: 'components',
 		title: 'Components',
 		list: [
+			{ href: base + '/components/core', label: 'Core', keywords: '' },
 			{ href: base + '/components/icon', label: 'Icons', keywords: '' },
 			{ href: base + '/components/form', label: 'Form', keywords: '' },
 			{ href: base + '/components/table', label: 'Table', keywords: '' }
diff --git a/src/lib/components/page/Page.svelte b/src/lib/components/page/Page.svelte
@@ -1,3 +1,28 @@
-<div class="px-5 grid gap-5">
- <slot/>
-</div>
+<script lang="ts">
+
+  import type { Link } from "$lib/models/Models";
+ 
+  export let title = "";
+  export let note = "";
+  export let links:Link[]=[];
+ 
+ </script>
+ 
+ <div class="px-5 grid gap-5" >
+  <h1>{title}</h1>
+  {#if note}
+    <blockquote class="blockquote">{note}</blockquote>
+  {/if}
+
+  <slot name="description" />
+ 
+  {#if links.length>0}
+  <div class="py-5">
+    {#each	links as link}
+     <a class="chip variant-ringed" href={link.url}>{link.label}</a>
+    {/each}
+  </div>
+  {/if}
+  <slot/>
+ </div>
+ 
diff --git a/src/lib/css/core.ui.css b/src/lib/css/core.ui.css
diff --git a/src/lib/css/core.ui.postcss b/src/lib/css/core.ui.postcss
@@ -0,0 +1,10 @@
+/*place global styles here */
+html, body { @apply h-full}
+
+h1{
+ @apply text-primary-500;
+}
+
+:root {
+	--background:rgb(var(--color-surface-200))
+ }
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -6,8 +6,11 @@ import FileIcon from './components/file/FileIcon.svelte';
 import FileInfo from './components/file/FileInfo.svelte';
 import FileUploader from './components/file/FileUploader.svelte';
 
+//page
 import Spinner from './components/spinner/Spinner.svelte';
+import Page from './components/page/Page.svelte';
 
+// input 
 import Checkbox from './components/form/Checkbox.svelte';
 import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
@@ -40,7 +43,7 @@ export {
 export { FileInfo, FileIcon, FileUploader };
 
 //others
-export { ListView, TableView, Spinner };
+export { ListView, TableView, Spinner, Page };
 
 //Api
 export { Api } from './services/Api.js';
diff --git a/src/lib/models/Models.ts b/src/lib/models/Models.ts
@@ -2,6 +2,14 @@ import type { SvelteComponent } from 'svelte';
 import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
 import type { Writable } from 'svelte/store';
 
+// page
+export interface Link
+{
+	label:string,
+	url:string
+}
+
+// Form
 export interface Input {
 	id: string;
 	label: string;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,11 +1,5 @@
 <script lang="ts">
 	// The ordering of these imports is critical to your app working properly
-	// import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
-	import '$lib/css/themes/theme-bexis2.css';
-	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
-	import '@skeletonlabs/skeleton/styles/all.css';
-	// Most of your app wide CSS should be put in this file
-	import '../app.postcss';
 	// For the floating UI elements such as column filters
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 	import { storePopup } from '@skeletonlabs/skeleton';
@@ -23,6 +17,14 @@
 	storeHighlightJs.set(hljs);
 	// storeHighlightJs.set(hljs2);
 
+// import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
+import '$lib/css/themes/theme-bexis2.css';
+	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
+	import '@skeletonlabs/skeleton/styles/all.css';
+	// Most of your app wide CSS should be put in this file
+	import '../app.postcss';
+	
+
 </script>
 
 <AppShell
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,3 +4,6 @@
 	<h3 id="test2">test2</h3>
 	<h2 id="test4">test4</h2>
 </div>
+
+
+<input class="input variant-form-material">
diff --git a/src/routes/components/core/+page.svelte b/src/routes/components/core/+page.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+
+	import CodeContainer from "$docs/components/CodeContainer.svelte";
+	import Page from '$lib/components/page/Page.svelte';
+
+ import PageExample from "./PageExample.svelte";
+ import PageExampleRaw from "./PageExample.svelte?raw";
+
+</script>
+
+<Page title="Core" note="here are listed all basic components for a unified design of the pages.  ">
+	<CodeContainer title="Page" svelte={PageExampleRaw}	>
+		<div slot="info">by using these components a unified border is displayed on the page, furthermore, there are props for title, notes and links, as well as a slot for description</div>
+	 <PageExample/>
+	</CodeContainer>
+</Page>
diff --git a/src/routes/components/core/PageExample.svelte b/src/routes/components/core/PageExample.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+ import Page from "$lib/components/page/Page.svelte";
+ import type { Link } from "$lib/models/Models";
+
+let links:Link[] = [{label:"manual",url:"https://github.com/BEXIS2/Documents/blob/master/Manuals/DCM/Manual.md"}]
+
+
+</script>
+
+<Page 
+title="Create a Dataset" 
+note="On this page you can create a dataset based on a template. please select on template and fill out the form." 
+{links}>
+
+<div slot="description">
+
+ <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+ 
+</div>
+
+<!-- your Page content -->
+<div>My Content HERE</div>
+
+</Page>
diff --git a/src/routes/components/form/+layout.svelte b/src/routes/components/form/+layout.svelte
@@ -8,6 +8,7 @@
 	slotSidebarLeft="flex-none overflow-x-hidden overflow-y-auto bg-surface-50-900-token lg:w-auto"
 >
 
+
 	<svelte:fragment slot="sidebarRight">
 		<TableOfContents target="#toc-target" />
 	</svelte:fragment>
diff --git a/src/routes/components/form/+page.svelte b/src/routes/components/form/+page.svelte
@@ -56,9 +56,7 @@
 </script>
 
 <div id="toc-target">
-<Page>
-	
-
+<Page title="Form components" note="This page lists all the form components and shows how to develop a validation.">
 
 	<div class="p-5 bg-warning-500 text-white gap-5 grid">
 
diff --git a/src/routes/components/icon/+page.svelte b/src/routes/components/icon/+page.svelte
@@ -8,10 +8,10 @@
 	import Page from '$lib/components/page/Page.svelte';
 
 </script>
+<div id="toc-target">
+
+<Page title="Icon Overview" note="this page shows how to use icons in bexis 2. you will also find an overview of all icons and the usecases for them. ">
 
-<Page >
-	<div id="toc-target">
-<h2>Icon Overview</h2>
 	<CodeContainer title="SetIcon" 
 	svelte={SetRaw}
 	external={[
@@ -37,6 +37,5 @@
 		</span>
 	<UsedIcons/>
 	</CodeContainer>
-
-</div>
-</Page>
+</Page>
+</div>
diff --git a/src/routes/general/+page.svelte b/src/routes/general/+page.svelte
@@ -1 +1,2 @@
 <h1>General Page</h1>
+

Original file line number	Diff line number	Diff line change
`@@ -3,3 +3,7 @@ html,`
`3`	`3`	`body {`
`4`	`4`	`@apply h-full bg-white;`
`5`	`5`	`}`
	`6`	`+`
	`7`	`+[type='text']:focus{`
	`8`	`+ --tw-ring-color:#00000;`
	`9`	`+}`