First run on linux

.gitignore

@@ -2,7 +2,7 @@
 /public/
 /dist/
 /example/
-/fomantic/
+/semantic/
 .todo
 .DS_Store
 .todo

README.md

@@ -1,90 +1,98 @@
-# Vomantic UI
+# Svantic UI
 
-This is a project based on Fomantic UI implement for Svelte.js framework
+Svantic is a set of UI components for [Svelte](https://svelte.dev) based on the [Fomantic-UI](http://fomantic-ui.com) framework.
 
-## Get started
+# Documentation
 
-Install the dependencies...
+-- Coming soon --
 
-```bash
-cd svelte-app
-npm install
-```
 
-...then start [Rollup](https://rollupjs.org):
+## Installation
+
+_Note that you will need to have [Node.js](https://nodejs.org) installed_
 
 ```bash
-npm run dev
+npm install --save-dev svantic
 ```
 
-Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
-
-By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+## Usage
 
+```html
+<Textfield bind:value filled label="Name" message="Enter your name" />
 
-## Building and running in production mode
+<h1>Hello {value}!</h1>
 
-To create an optimised version of the app:
+<script>
+    // import any components you want
+    import { Textfield } from 'svantic';
 
-```bash
-npm run build
+    let value = 'world';
+</script>
 ```
+## Quick start with new project
 
-You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
-
-
-## Single-page app mode
+Create a new project based on [sveltejs/template](https://github.com/sveltejs/template)
 
-By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
-
-If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
-
-```js
-"start": "sirv public --single"
+```bash
+npx degit sveltejs/template svantic-app
+cd svantic-app
+npm install
 ```
 
-## Using TypeScript
+_NOTE_: There are of course other ways to set up a project using svelte. This is just the quickest way to start.
 
-This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
+Add components
 
 ```bash
-node scripts/setupTypeScript.js
+npm install --save-dev svantic
 ```
 
-Or remove the script via:
+Modify file `src/App.svelte` in the following way
 
-```bash
-rm scripts/setupTypeScript.js
-```
+```html
+<script>
+    // optional import focus-visible polyfill only once
+    import 'focus-visible';
+    // import any components
+    import { Button, Checkbox } from 'svantic';
 
-## Deploying to the web
+    let checked = true;
+</script>
 
-### With [Vercel](https://vercel.com)
+<Checkbox bind:checked>Checkbox</Checkbox>
 
-Install `vercel` if you haven't already:
+<p>Checkbox is {checked ? 'checked' : 'unchecked'}</p>
 
-```bash
-npm install -g vercel
+<Button
+    outlined
+    shaped
+    color="Red"
+    on:click={() => { checked = !checked }}
+>
+    Inverse
+</Button>
 ```
 
-Then, from within your project folder:
+
+...then start [Rollup](https://rollupjs.org/)
 
 ```bash
-cd public
-vercel deploy --name my-project
+npm run dev
 ```
 
-### With [surge](https://surge.sh/)
+Navigate to [localhost:5000](http://localhost:5000)
 
-Install `surge` if you haven't already:
+# Development
 
-```bash
-npm install -g surge
-```
+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`
+4. Start the automated build: `npm run build`
+5. Open url that console prints in your browser
 
-Then, from within your project folder:
+# License
+
+Code released under MIT license.
+
+Copyright &copy;, ryu-man.
 
-```bash
-npm run build
-surge public my-project.surge.sh
-```

package.json

@@ -5,18 +5,32 @@
   "module": "./dist/index.mjs",
   "svelte": "./src/index.js",
   "types": "./src/index.d.ts",
+  "description": "This is a project based on Fomantic UI implement for Svelte.js framework",
+  "homepage": "https://github.com/ryu-man/svantic#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ryu-man/svantic.git"
+  },
+  "author": "ryu-man",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ryu-man/svantic/issues"
+  },
   "files": [
     "dist",
     "src"
   ],
+  "directories": {
+    "test": "test"
+  },
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
     "start": "sirv public",
     "validate": "svelte-check",
     "pretty": "prettier --write \"src/**/*.{svelte,js,ts}\"",
     "test": "jest",
-    "build:fomantic": "gulp build -f fomantic/gulpfile.js"
+    "build:fomantic": "gulp build -f node_modules/fomantic-ui/gulpfile.js"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.1",

semantic.json

@@ -1,5 +1,5 @@
 {
-  "base": "fomantic",
+  "base": "semantic/",
   "paths": {
     "source": {
       "config": "src/theme.config",
@@ -8,10 +8,10 @@
       "themes": "src/themes/"
     },
     "output": {
-      "packaged": "dist\\",
-      "uncompressed": "dist\\components\\",
-      "compressed": "dist\\components\\",
-      "themes": "dist\\themes\\"
+      "packaged": "dist/",
+      "uncompressed": "dist/components/",
+      "compressed": "dist/components/",
+      "themes": "dist/themes/"
     },
     "clean": "dist/"
   },

src/collections/breadcrumb/breadcrumb.d.ts

@@ -24,7 +24,7 @@ interface BreadcrumbProps extends Component {
     style?: Style;
 }
 /**
- * Vomantic Breadcrumb
+ * Svantic Breadcrumb
  */
 export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps> {
     static Section:new ()=>Section

src/collections/breadcrumb/breadcrumb.svelte

@@ -1,5 +1,5 @@
 <script>
-  import '../../../fomantic/dist/components/breadcrumb.css';
+  import '../../../semantic/dist/components/breadcrumb.css';
   import { register } from '../../utils/events'
   import { css } from '../../utils'
 

src/collections/breadcrumb/divider.d.ts

@@ -7,6 +7,6 @@ interface DividerProps extends Component {
     style?: Style;
 }
 /**
- * Vomantic Divider
+ * Svantic Divider
  */
 export default class Divider extends SvelteComponentTyped<DividerProps> {}

src/collections/breadcrumb/section.d.ts

@@ -22,6 +22,6 @@ interface SectionProps extends Component {
     style?: Style;
 }
 /**
- * Vomantic Section
+ * Svantic Section
  */
 export default class Section extends SvelteComponentTyped<SectionProps> {}

src/collections/form/field.d.ts

@@ -13,7 +13,7 @@ interface FieldProps extends Component {
     required?: boolean;
 }
 /**
- * Vomantic Field
+ * Svantic Field
  */
 declare class Field extends SvelteComponentTyped<FieldProps> {
 }

src/collections/form/fields.d.ts

@@ -11,7 +11,7 @@ interface FieldsProps extends Component {
     grouped?: boolean;
 }
 /**
- * Vomantic Fields
+ * Svantic Fields
  */
 declare class Fields extends SvelteComponentTyped<FieldsProps> {
 }

src/collections/form/form.d.ts

@@ -14,7 +14,7 @@ interface FormProps extends Component {
     equal?: boolean;
 }
 /**
- * Vomantic Form
+ * Svantic Form
  */
 declare class Form extends SvelteComponentTyped<FormProps> {
     static Field: new()=> Field

src/collections/form/form.svelte

@@ -1,5 +1,5 @@
 <script>
-  import '../../../fomantic/dist/components/form.css'
+  import '../../../semantic/dist/components/form.css'
   import { css, register } from '../../utils'
 
   let _class = ''

src/collections/grid/column.d.ts

@@ -15,7 +15,7 @@ interface ColumnProps extends Component {
   visibility?: Visibility
 }
 /**
- * Vomantic Grid Column
+ * Svantic Grid Column
  */
 declare class Column extends SvelteComponentTyped<ColumnProps> {}
 export default Column

src/collections/grid/grid.d.ts

@@ -28,7 +28,7 @@ interface GridProps extends Component {
   reversed?: Reversed
 }
 /**
- * Vomantic Grid
+ * Svantic Grid
  */
 declare class Grid extends SvelteComponentTyped<GridProps> {}
 export default Grid

src/collections/grid/grid.svelte

@@ -1,5 +1,5 @@
 <script>
-  import '../../../fomantic/dist/components/grid.css'
+  import '../../../semantic/dist/components/grid.css'
   import { classNames } from '../../utils'
 
   export let equal = false

src/collections/grid/row.d.ts

@@ -19,7 +19,7 @@ interface RowProps extends Component {
   visibility?: Visibility
 }
 /**
- * Vomantic Grid Row
+ * Svantic Grid Row
  */
 declare class Row extends SvelteComponentTyped<RowProps> {}
 export default Row

src/collections/menu/item.d.ts

@@ -7,7 +7,7 @@ interface ItemProps extends Component {
     fitted?: boolean;
 }
 /**
- * Vomantic Menu Item
+ * Svantic Menu Item
  */
 declare class Item extends SvelteComponentTyped<ItemProps> {
 }

src/collections/menu/menu.d.ts

@@ -20,7 +20,7 @@ interface MenuProps extends Component {
     borderless?: boolean;
 }
 /**
- * Vomantic Menu
+ * Svantic Menu
  */
 declare class Menu extends SvelteComponentTyped<MenuProps> {
     static Item: new ()=> Item

src/collections/menu/menu.svelte

@@ -1,5 +1,5 @@
 <script>
-  import '../../../fomantic/dist/components/menu.css'
+  import '../../../semantic/dist/components/menu.css'
   import { classNames, css } from '../../utils'
 
   let _class = ''

src/collections/message/message.d.ts

@@ -14,7 +14,7 @@ interface MessageProps extends Component {
     compact?: boolean;
 }
 /**
- * Vomantic Message
+ * Svantic Message
  */
 declare class Message extends SvelteComponentTyped<MessageProps> {
 }

src/collections/message/message.svelte

@@ -1,5 +1,5 @@
 <script>
-  import '../../../fomantic/dist/components/message.css'
+  import '../../../semantic/dist/components/message.css'
   import { classNames, css, register } from '../../utils'
 
   export let type = ''

src/collections/table/table.d.ts

@@ -19,7 +19,7 @@ interface TableProps extends Component {
     unstackable?: boolean;
 }
 /**
- * Vomantic Table
+ * Svantic Table
  */
 declare class Table extends SvelteComponentTyped<TableProps> {
 }

src/collections/table/table.svelte

@@ -1,5 +1,5 @@
 <script>
-  import '../../../fomantic/dist/components/table.css'
+  import '../../../semantic/dist/components/table.css'
   import { css, classNames } from '../../utils'
 
   let _class = ''

src/elements/button/button.d.ts

@@ -45,7 +45,7 @@ interface ButtonProps extends Component {
   on?: DOMEvents<HTMLDivElement>
 }
 /**
- * Vomantic Button
+ * Svantic Button
  */
 declare class Button extends SvelteComponentTyped<ButtonProps> {}
 export default Button

src/elements/button/button.svelte

@@ -1,5 +1,5 @@
 <script>
-  import '../../../fomantic/dist/components/button.css'
+  import '../../../semantic/dist/components/button.css'
   import { classNames, css, register } from '../../utils'
 
   let _class = ''

src/elements/button/buttons.d.ts

@@ -5,7 +5,7 @@ interface ButtonsProps extends Component {
     color?: Color;
 }
 /**
- * Vomantic Buttons
+ * Svantic Buttons
  */
 declare class Buttons extends SvelteComponentTyped<ButtonsProps> {
 }