danilosampaio / semantic-kanban Goto Github PK
View Code? Open in Web Editor NEWA simple Kanban Component built with Semantic-UI + Vue.js
Home Page: semantic-kanban-orpin.vercel.app
License: MIT License
A simple Kanban Component built with Semantic-UI + Vue.js
Home Page: semantic-kanban-orpin.vercel.app
License: MIT License
The archived
status represents a finished task that it's not viewed on Kanban board.
thank you very much for very useful library.
I have noticed that all the icons in the app disappear as kanban board is overriding them. icons need to be scoped to the component only, to not to break other elements of the UI.
Add a colorpicker on the right side of the name input, to define a color of the new label.
changeAvatar
eventupdateAvatar
on click save
button. The event param can be a Base64
image string.I have git cloned and ran npm run dev
. The example runs but i can't make any changes such as adding new cards, deleting old ones, adding new team members, tasks or anything else, or editing existing cards and any texts. It's as if the whole app is readonly. Am I missing something?
I have noticed that you use jQuery to hide and show dialogs, however, it is recommended not to since it manipulates the DOM. Besides this, I couldn't even use the component since jQuery doesn't even load. Here is the error:
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17 [vue-router] Failed to resolve async component default: ReferenceError: jQuery is not defined
warn @ webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17 [vue-router] uncaught error during route navigation:
warn @ webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1898 ReferenceError: jQuery is not defined
at eval (webpack-internal:///./node_modules/semantic-ui-css/semantic.min.js:11)
at Object../node_modules/semantic-ui-css/semantic.min.js (:8080/2.js:1969)
at __webpack_require__ (app.js:767)
at fn (app.js:130)
at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js&:14)
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js& (:8080/2.js:115)
at __webpack_require__ (app.js:767)
at fn (app.js:130)
at eval (webpack-internal:///./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js&:2)
at Module../node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js& (:8080/2.js:1923)
I am trying to use it in a Quasar Framework app.
Please see my recommendation about your component here, notice the comments about the use of jQuery in Vue. If possible make this Quasar Framework compatible or even a QF component. Quasar has all the dialogs, cards and things you need. A lot of developers consider jQuery deprecated because of modern approaches to reactive designs. This is a very nice component and I would like to see it go far.
Therefore, this issue is related to the use of jQuery instead of VueJS features, Vue actually doesn't want you to do exactly what you are doing; manually manipulate the DOM. Consider using v-show
or v-if
. Create or use QF dialogs instead of jQuery UI dialogs.
I noticed that your component is utilizing Semantic-UI-css to create dialogs. Anyway, the jQuery fact still remains. Do without it pliz. Consider doing this:
<div class="ui basic modal" v-show="showDialog">
....
</div>
// ...
data() {
return {
showDialog: false,
}
},
// ...
methods: {
show () {
// $(this.$el).modal('show')
this.showDialog = true
},
hide () {
// $(this.$el).modal('hide')
this.showDialog = false
},
}
see no need for jQuery there ๐คท๐ฝโโ๏ธ
In order to facilitate to add more unit tests, the base code was rewritten based on the vue-webpack-boilerplace
, that is a full-featured webpack setup, including unit testes configurations.
It will be very useful to have support for adding / removing columns
Set the default value of the status
field to 'backlog', when the newTask
event is emitted (defualtTaskDialog).
Semantic-kanban
depends on two css
files to work properly:
To avoid including <style> tags directly in components, or to add this modules as peerDependencies, probably the best solution is to configure Webpack to load css files.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.