nightswinger / vue-fomantic-ui

Fomantic-UI component library for Vue.js 3.0

VueFomanticUI

VueFomanticUI is a component library for Vue.js 3.0 that wraps Fomantic-UI.

Documentation

To check out live examples and docs, see the Documentation.

Install

You need Vue.js version 3.0+.

# npm
npm install vue-fomantic-ui
npm install fomantic-ui-css

# yarn
yarn add vue-fomantic-ui
yarn add fomantic-ui-css

Usage

You can import all components as Vue plugin.

import { createApp } from 'vue'
import App from './App.vue'
import FomanticUI from 'vue-fomantic-ui'
import 'fomantic-ui-css/semantic.min.css'

const app = createApp(App)
app.use(FomanticUI)

Or pick a component indivisually, add it to your components option.

import { SuiButton } from 'vue-fomantic-ui'

export default {
  components: { SuiButton },
  // ...
}

vue-fomantic-ui's Issues

"event.Path" doesnot work on firefox

The code snippet attached below does not work for firefox, is working only for chromium based browsers.
https://github.com/nightswinger/vue-fomantic-ui/blob/master/src/modules/Sidebar/Sidebar.tsx

Dropdown value not set after initialization

Since v0.26 the Dropdown v-model cannot be updated after the component is rendered.

<template>
  <Dropdown
    v-model="selected"
    :options="options"
    search
    selection
    placeholder="Pet"
  />
</template>

<script setup>
import { ref } from 'vue'
import { Dropdown } from 'vue-fomantic-ui'
import 'fomantic-ui-css/semantic.min.css'

const selected = ref()
const options = [
  'Cat',
  'Dog',
  'Bird',
  'Rabbit',
  'Squirrel',
  'Horse',
  'Turtle',
  'Parrot',
]

setTimeout(function () {
  console.log('called')
  selected.value = 'Dog'
}, 2000)
</script>

In this example the value is set to "Dog" after two seconds. It works with v0.25, but doesn work with v0.26 anymore. Setting the value outside of the timeout works as expected.

Vue.js v3 RENDER_FUNCTION compat warning

When I use simple component as:

{
    name: 'atk-multiline',
    template: `<div>
                <sui-table></sui-table>
             </div>`,
}

with "@vue/compat": "^3.2.45" dep installed I get:

when I drop the <sui-table></sui-table> from the component, the warning is gone, so I belive it must come from this library.

Theming

How do I customize the theme as it's done in the original library?

Add input type=radio support

At first, I would like to thank you for this project, it allowed us to upgrade from Fomantic-UI vue v2 to v3.

In semantic-ui-vue repo (but only for vue v2) input type=radio was supported using SuiCheckbox - https://github.com/Semantic-UI-Vue/Semantic-UI-Vue/blob/v0.11.0/src/modules/Checkbox/Checkbox.jsx#L104.

This is a feature request to allow input tag of type radio about the same here as well.

How to access old documentation in rendered form?

I am helping with a project where they use vue-fomantic-ui v0.13. Is there a place where I can access the rendered docs for that version? Alternatively how can I render them locally from the git repo? I did not find instructions on this in the Readme.

Being accustomed to readthedocs.org I would have expected different versions of the docs to be accessible in rendered form from the main documentation web page. Is that possible for you?

V-model not working in SUI Form Fields

Hi, firstly I'm happy to be using Fomantic UI Vue.

Currently using Vue3 + Vite + Composition Api. However it works with "sui-input".

<sui-form>
        
        <sui-form-field
        v-model="input"
          label="Input
        />
        
</sui-form>        

How does the rating component work?

Hi,
the docs are a bit minimal. How is the rating component actually working? Does it support v-model? Any events that we can use to get the actual value?

Unable to make input to password type

By looking at the code I am unable to make to password.

<sui-form-field> does not render if there is no label tag used

Renders
<sui-form-field label="Password" type="password" />

Does not renders
<sui-form-field type="password" />

Modal enhancement

add closable boolean setting from SUI library to prevent closing the modal by clicking on the surrounding dimmer

Accordion enhancement

Thank you for writing this wrapper lib, it's been extremely helpful so far.

I was wondering, is there currently a way to display a custom accordion title, to include things like icons or buttons?

Also, is there a way to set an accordion tab to default to active?

Modal not scrollable

If the modal is bigger than the size of the screen all content below is not shown. The only thing that gets to scroll is the background but not the modal.

Dropdown menu multiple search selection not working

It only works when is multiple or search but not both. According to FOMANTIC documentation this is posible to have.

Error while starting new project with Vue CLI

Hi,

I just wanted to create new project using the library which worked creat in the past but at the moment I face an issue I can't seem to solve. After installation of the vue3 / cli etc and the fomantic ui packages I get the following error when starting dev server:

TypeError: Cannot read properties of undefined (reading 'get')
during rendering of asset asset/inline|data:application/x-font-ttf;charset=utf-8;;base64,..

I've read somewhere it should be an webpack issue? Any idea?

my package json:

{
"name": "website",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"fomantic-ui-css": "^2.8.8",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-fomantic-ui": "^0.11.1",
"vue-property-decorator": "^9.1.2",
"vue-router": "^4.0.3"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"@vue/compiler-sfc": "^3.2.31",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"typescript": "~4.5.5"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {
"@typescript-eslint/ban-ts-comment": "off",
"prefer-const": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

Vue 2 support via vue-demi or Vue 2.7??

Created as a discussion point. I can't see anything with thick Vue 3 lock-in at a quick glance.

Problem:

A heap of legacy code is still sitting on semantic-ui-vue and a migration pathway out is littered with road blocks everywhere. In particular for codebases using Nuxt 2.

What is the viability of providing Vue 2 support via vue-demi? And is vue-demi even required given the Vue 2.7 update? Thanks in advance.

Multiple Selection Dropdown closes onchange instead of onBlur

Hey this is really great!

One thing, multiple selection dropdown closes onchange.

This differs from Fomantic UI, which closes multiple selection dropdowns onBlur.

Unable to add icons to <sui-form-field>

No icons can be added to input when using <sui-form-field>

The filename of "module" and "import" of "exports" in package.json is not correct.

When I try to import the "vue-fomantic-ui" in the main.ts that create App, there will always an error message:

Internal server error: Failed to resolve entry for package vue- "fomantic-" ui . The package may have incorrect main/module/exports specified in its package.json.

So I try to check the package.json of "vue-fomantic-ui" and find out that the value of "module" attribute and "import" of "exports" is "./dist/vue-fomantic-ui.es.js", which is not matched to the filename "vue-fomantic-ui.mjs" under dist folder.

After modifying the value to "./dist/vue-fomantic-ui.mjs"，I can successfully import this package and use fomantic UI.

I install "vue-fomantic-ui" version is 0.15.0

Fixed property missing in Menu