A set of UI components for Svelte framework based on Fomantic-UI library

Documentation

-- Coming soon --

Installation

# npm
npm install svantic
# yarn
yarn add svantic

Quick start with new project

Create a new project based on sveltejs/template

npx degit sveltejs/template svantic-app
cd svantic-app
# npm
npm install
# yarn
yarn install

Or you can use our svantic template, it comes pre-configured

npx degit ryu-man/svantic-template#main svantic-app
cd svantic-app
# npm
npm install
# yarn
yarn install

NOTE: There are of course other ways to set up a project using svelte. This is just the quickest way to start.

Rollup Configuration

Because svantic uses dymanic import for better footprint and performance you have to configure rollup as following:

output: {
  ...,
  dir: "path to output directory",
  entryFileNames: "index.js",
  chunkFileNames: "[name].js"
},

Breaking Change

Svantic component

used to load global scripts and stylesheets, must mounted on the top level of the app

<script>
 import { Svantic, ... } from 'svantic'
</script>

// 
<Svantic>
 ...
</Svantic>

onMount prop

allows acces to the top level dom elem instead of module controller

module controller

to controll a module you use bind:this={varname} on the component to save an instance of its controller

controllable store

is a reactive store that allows subscribtion to a module and execute a callback when the component is mounted

<script>
    // import modules
    import { Dropdown, controllable, Svantic } from 'svantic';

    const dropdownController = controllable(controller=>{
      // do something
    })
</script>

<Svantic>
  <Dropdown bind:this={$dropdownController}>
      // ...
  </Dropdown>
</Svantic>

Usage

Add svantic and modify src/App.svelte file in the following way

<script>
  // import any components you want
  import { Button, Svantic } from 'svantic'
</script>

<Svantic>
  <Button>Hello world</Button>
</Svantic>

or

<script>
    // import modules
    import { Dropdown, initDropdown, controllable, Icon, Svantic } from 'svantic';

    // call this function if you want to use Module.SubModule syntax, ex: Dropdown.Item
    initDropdown()

    const dropdownController = controllable(controller=>{
      // called when the component is mounted and ready
      // access the controller and manupilate dropdown
    })


</script>

// mount Svantic component on the top level of the app
<Svantic>
  // onMount: allows control module behaviors
  // settings: pass module settings
  <Dropdown 
    bind:this={$dropdownController} 
    onMount={(domElem) => {}} 
    settings={{}}
    selection >
    <Icon name="caret down" />
    <Dropdown.Text>Select language</Dropdown.Text>
    <Dropdown.Menu>
      <Dropdown.Item>English</Dropdown.Item>
      <Dropdown.Item>Arabic</Dropdown.Item>
      <Dropdown.Item>Spanish</Dropdown.Item>
      <Dropdown.Item>German</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
</Svantic>

Another way to use Module.SubModule syntax

<script>
    import { Icon, Svantic } from 'svantic'
    import * as Dropdown from 'svantic/modules/dropdown';
</script>

<Svantic>
  <Dropdown.default selection >
    <Icon name="caret down" />
    <Dropdown.Text>Select language</Dropdown.Text>
    <Dropdown.Menu>
      <Dropdown.Item>English</Dropdown.Item>
      <Dropdown.Item>Arabic</Dropdown.Item>
      <Dropdown.Item>Spanish</Dropdown.Item>
      <Dropdown.Item>German</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown.default>
</Svantic>

Development

1. Clone this repo: git clone https://github.com/ryu-man/svantic.git
2. Install dependencies: npm i
3. Start building fomantic: npm run build:fomantic

License

Code released under MIT license

Copyright © - ryu-man.