Fabian Stamm

Repositories

23

Projects Packages Public Activity Starred Repositories

@paul/theme (1.0.0)

Published 2023-10-12 21:10:27 +00:00 by hibas123

Installation

Setup this registry in your project .npmrc file:

@paul:registry=

To install the package using npm, run the following command:

npm install @paul/theme@1.0.0

or add it to the package.json file:

"@paul/theme": "1.0.0"

For more information on the npm registry, see the documentation.

About this package

ELIJAS-THEME DOCS

TODO

• Header <-> Content spacing bug (fixed/nofixed)
• Sidebar
• Docs fertig

Text

Headlines

Headline: big headline for sections NestedHeadline: smaller headline for use inside of components of sections

import NestedHeadline from "./components/text/headlines/Headline.svelte"; import
Headline from "./components/text/headlines/Headline.svelte";

<Headline>Value</Headline>
<NestedHeadline>Value</NestedHeadline>

Containers

Theme:

Container for wrapping all theme-related elements of an app.

import Theme from "./components/container/Theme.svelte";
<Theme> <!-- Subitems --> </Theme>

To access theme-context:

import { getContext } from 'svelte';
const theme = getContext < any > 'theme';

Loading

Container that enables a loading screen once it has been added.

import Loading from "./components/loading/Loading.svelte";

{#if loading === true}
    <Loading />
{/if}

NotificationController & Notifications

Container to wrapp around all items, which easily can acess notification context

import NotificationController from
"./components/notifications/NotificationController.svelte";

<NotificationController> <!-- Subitems --> </NotificationController>

to add a notification

//EROR
notificationContext.addNotification(NotificationType.ERROR, 'message');

//SUCCESS
notificationContext.addNotification(NotificationType.SUCCESS, 'message');

Mobile

Container for wrapping all responsive items of an app.

import Theme from "./components/container/Mobile.svelte";
<Mobile> <!-- Subitems --> </Mobile>

To access the mobile query from everywhere:

import { mobile } from '../../states/media';

Content

Content container for main App content.

import Content from "./components/container/Content.svelte";
<content> <!-- Subitems --> </content>

Components

Header

Svelte component for site header. Per default header appears with default logo-text: "elijas" and theme button. Both are customizable via the default slot (nav) and the slot named "logo". The value for the hideTheme property is false per default. The value for the hideLogin property is true per default.

import Header from "./components/header/Header.svelte"; import HeaderItem from
"./components/header/Item.svelte"; import HeaderLink from
"./components/header/Link.svelte";

<header hideLogin="true|false" hideTheme="false|true">
	<!-- 'logo' slot: Header-Logo -->
	<!-- 'default' slot: nav -->
	<HeaderItem>
		<HeaderLink href="target">Link</HeaderLink>
	</HeaderItem>
</header>

Forms

Validators: number,

import Form from "./components/form/Form.svelte";
import FormHeadline from "./components/form/components/FormHeadline.svelte";
import Input from "./components/form/components/Input.svelte";
import FormButton from "./components/form/components/FormButton.svelte";
import Select from "./components/form/components/Select.svelte";
import Option from "./components/form/components/Option.svelte";

import validator from "./helper/validator";

<Form on:submit={(data) => {functionToCall(data.detail.nameOfInput); }}>
    <FormHeadline>Optional headline</FormHeadline>

    <Input type={text|pw|number} placeholder={placeholder} name={name} validator?={validator.type}/>

    <Select name={name}>
        <Option value={value} selected>If empty = value</Option>
    </Select>

    <FormButton>If empty = Submit</FormButton>
</Form>

Table

import Table from "./components/table/Table.svelte"; import THead from
"./components/table/Head.svelte"; import THeadData from
"./components/table/HeadData.svelte"; import TBody from
"./components/table/Body.svelte"; import TRow from
"./components/table/Row.svelte"; import TData from
"./components/table/Data.svelte";

<table>
	<thead>
		<THeadData>Value</THeadData>
		<THeadData>Value</THeadData>
		<THeadData>Value</THeadData>
	</thead>
	<tbody>
		<TRow>
			<TData>Value</TData>
			<TData>Value</TData>
			<TData>Value</TData>
		</TRow>
	</tbody>
</table>

Dependencies

Dependencies

ID	Version
svelte-loading-spinners	^0.1.3

Development Dependencies

ID	Version
@snowpack/plugin-svelte	^3.4.1
@snowpack/plugin-typescript	^1.1.1
@snowpack/plugin-webpack	^2.2.0
@tsconfig/svelte	^1.0.0
snowpack	^2.18.5
svelte	^3.0.0
svelte-check	^1.0.0
svelte-preprocess	^4.6.1
tslib	^2.0.0
typescript	^3.9.3

Details

npm

2023-10-12 21:10:27 +00:00

21

12 KiB

Assets (1)

theme-1.0.0.tgz 12 KiB

Versions (5) View all

1.2.0 2023-10-12

1.1.1 2023-10-12

1.1.0 2023-10-12

1.0.2 2023-10-12

1.0.0 2023-10-12