ryu-man / svantic

Svantic is a set of UI components for Svelte framework based on the Fomantic-UI library

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.

svantic's Issues

export of Statistic component is missing

While there is an export of Comment and Comments (group), there is only export of
Statistics (group)

// index

{
 Card,
  Item,
  Ad,
  Feed,
  Comment,
  Items,
  Statistics,  // group only
  Comments
} from './views'

Failed to resolve import "./item.svelte" from "node_modules/svantic/src/views/item/index.js". Does the file exist?

Hello, after having installed SvelteKit demo app, I tried to install svantic by simply npm install svantic. Then I add a button directly in the __layout.js to test and got the error of the title of this issue.
I noticed that indeed item.svelte does not exist as it's written Item.svelte with an uppercase "i". It's the only file in the directory that has its first letter in uppercase so I suppose it's a mistake.
Renaming the file to item.svelte seems to do the trick.

Update to FUI 2.9.0?

Is this project still alive?

svelte-kit / ssr error because of client side only library (jquery)

Hi,

I created a new svelte-kit app, added svantic and got some errors to deal with because of fomantics jquery depency as well as some
design problems.
I would like to discuss a possible solution for this problem.

Here is what I did to get it working.

First I had to add a typeof window check at src/modules/utils/loader.js

const loader = async (type) => {
    if(typeof window === 'undefined')
        return 

    await loadJQ()
    return import(`../../../semantic/dist/components/${type}.min`)
}

Then I made some changes on the components.

• remove the {#await isReady } because it leads to ugly flickering and design resizings at the client side as there is nothing to render before the promise resolves
• add variable instance and use it to reference the components outer element instead of directly bind to $executer
• await isReady in onMount callback. after, set $executer to elements instace.

For example, src/modules/dropdown/dropdown.svelte

<script context="module">
  import { dropdownLoader, transitionLoader, load } from '../utils'
  const isReady = load(transitionLoader, dropdownLoader)
</script>

<script>
  import '../../../semantic/dist/components/site.min.css'
  import '../../../semantic/dist/components/reset.min.css'

/* .....  */

  const  executer = dropdown(settings)

  const dispatch = createEventDispatcher()

  let instance
  
  onMounted(async () => {
    await isReady
    $executer = instance
    onMount?.($executer)
    dispatch('mount', $executer)
  })

  $: executer.setSettings(settings)

/* .....  */

</script>

  {#if as === 'div'}
    <div bind:this="{instance}" use:css="{style}" class="{classnames}">
      <slot />
    </div>
  {:else}
    <select
      bind:this="{instance}"
      use:css="{style}"
      multiple="{multiple}"
      class="{classnames}" >
      <slot />
    </select>
  {/if}