semantic-org / semantic-ui-ember Goto Github PK
View Code? Open in Web Editor NEWOfficial Semantic UI Integration for Ember
License: MIT License
Official Semantic UI Integration for Ember
License: MIT License
If I have a dropdown like
{{#ui-dropdown class="selection" onChange=(action 'change') value=variable}}
// something
{{/ui-dropdown}}
changing variable
changes dropdown's value internally, but the does not update the display
Just to make sure we're not breaking apps we need to detect if value is bound too and update it onChange
-- The 0.9.1 release changed it to selected.
In the latest semantic ui update, closeModal
is deprecated. Checking the code, i found this
// if controller handles approves, they must manually call view.execute('hide')
How do i access view from controller, and run execute
on it. AFAIK, ember only works in one direction. You can only bubble upward, but you can't call view nor send it events. Is there something I'm missing here?
Another issue with popup component:
index.hbs
{{ui-popup content="The text you'd like to show"}}
{{ui-popup tagName="i" class="icon link" content="The text you'd like to show"}}
If a look into html i get this code
<div id="ember427" data-content="The text you'd like to show" class="ember-view"><!----></div>
<hr>
<i id="ember428" data-content="The text you'd like to show" class="icon link ember-view"><!---></i>
</div>
And nothing is visibile.
The same problem with dropdown component
DEBUG: -------------------------------
DEBUG: Ember : 2.0.0
DEBUG: Ember Data : 2.0.0
DEBUG: jQuery : 1.11.3
DEBUG: -------------------------------
ember -v
version: 1.13.8
node: 4.1.1
npm: 2.13.4
os: linux x64
The first time I select any option, it selects the last option in the list and a subsequent click is required to get the desired option.
routes/decide.js:
import Ember from 'ember';
export default Ember.Route.extend({
...
setupController: function(controller, model) {
this._super(controller, model);
controller.set('attrs', {});
controller.set('attrs.status', null);
}
...
});
templates/decide.hbs:
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<i class="big green thumbs outline up icon"></i> {{ui-radio name="status" label="Closed" value="closed" current=attrs.status}}
</div>
</div>
<br>
<div class="field">
<div class="ui radio checkbox">
<i class="big orange thumbs outline up icon"></i> {{ui-radio name="status" label="Suspended" value="suspended" current=attrs.status}}
</div>
</div>
<br>
<div class="field">
<div class="ui radio checkbox">
<i class="big red thumbs outline down icon"></i> {{ui-radio name="status" label="Open" value="open" current=attrs.status}}
</div>
</div>
</div>
<br>
<button class="ui right floated labeled icon positive button" {{action "finish"}}>
<i class="save icon"></i> Finish
</button>
</div>
The HTML rendered by this is:
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<i class="big green thumbs outline up icon"></i>
<div id="ember2623" class="ember-view ui checkbox radio">
<input type="radio" name="status" tabindex="0" class="hidden">
<label>Closed</label>
</div>
</div>
</div>
<br>
<div class="field">
<div class="ui radio checkbox">
<i class="big orange thumbs outline up icon"></i>
<div id="ember2624" class="ember-view ui checkbox radio">
<input type="radio" name="status" tabindex="0" class="hidden">
<label>Suspended</label>
</div>
</div>
</div>
<br>
<div class="field">
<div class="ui radio checkbox">
<i class="big red thumbs outline down icon"></i>
<div id="ember2625" class="ember-view ui checkbox radio checked">
<input type="radio" name="status" tabindex="0" class="hidden">
<label>Open</label>
</div>
</div>
</div>
</div>
<br>
<button class="ui right floated labeled icon positive button" data-ember-action="2626">
<i class="save icon"></i> Finish
</button>
</div>
When using ui-dropdown
, the elements in the dropdown are not clickable.
After debugging, it looks like this is caused by the fact that the content
for the dropdown is being set inside the then
block of a promise. The Semantic component is only being initialized by BaseMixin.didInsertElement
which doesn't fire in this case.
I have installed Semantic-UI-Ember into my ember-cli app and it looks like the default theme is working, however, I would like to change the default theme to one of the other prepackaged themes (like github
).
It looks like your project is not using Gulp, which is what Semantic uses for its build, so I assume changing only the theme.config
file will not work. In this case, why is it even necessary to include all the Semantic-UI project, rather than simply the default .css
, .js
and font files?
Is it intended that we can use the build tools in the semantic-ui directory ourselves?
Sorry if I am missing something obvious...new to this system. ;^)
I'm looking for a way to execute controller actions whenever i click and change a ui-checkbox component. With the current master branch it's possible to write a template like this:
While master is not compatible with Ember 2.0 I'm using the prep-1.0 branch where the template above won't run the default action any more.
Is there another way to declare default actions in the template? I don't want to rely on observers for this case.
Hi,
Is there a way to add HTML markup to dropdown items? For example, a label or icon next to an item name entry? Maybe something like this, which would include a template/partial for rendering the item:
{{ui-dropdown content=myContent optionLabelTemplate="foo"}}
The template would need to be aware of which item it is rendering so it can access its properties.
Any thoughts?
Regards,
Justin
The font-awesome icons.*
font files are 404-ing on page load with ember-cli. In semantic.css
the src property is src: url("themes/default/assets/fonts/icons.eot");
but the font assets are not making it to the dist folder so they can be served by ember-cli.
Installing with ember-cli 0.2.4 gives the error:
Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
at C:\Projects\property-system\front-end\node_modules\ember-cli\lib\models\project.js:475:53
at baseFindIndex (C:\Projects\property-system\front-end\node_modules\ember-cli\node_modules\lodash\internal
\baseFindIndex.js:16:9)
at C:\Projects\property-system\front-end\node_modules\ember-cli\node_modules\lodash\internal\createFind.js:
18:19
at Project.findAddonByName (C:\Projects\property-system\front-end\node_modules\ember-cli\lib\models\project
.js:474:20)
at Class.module.exports.Task.extend.findDefaultBlueprintName (C:\Projects\property-system\front-end\node_mo
dules\ember-cli\lib\tasks\addon-install.js:63:30)
at Class.module.exports.Task.extend.installBlueprint (C:\Projects\property-system\front-end\node_modules\em
ber-cli\lib\tasks\addon-install.js:52:30)
at Class.<anonymous> (C:\Projects\property-system\front-end\node_modules\ember-cli\lib\tasks\addon-install.
js:42:19)
at lib$rsvp$$internal$$tryCatch (C:\Projects\property-system\front-end\node_modules\ember-cli\node_modules\
rsvp\dist\rsvp.js:489:16)
at lib$rsvp$$internal$$invokeCallback (C:\Projects\property-system\front-end\node_modules\ember-cli\node_mo
dules\rsvp\dist\rsvp.js:501:17)
at lib$rsvp$$internal$$publish (C:\Projects\property-system\front-end\node_modules\ember-cli\node_modules\r
svp\dist\rsvp.js:472:11)
We would love to use this add-on in our project. However, the addon currently loads and includes the Semantic UI JS and CSS as vendor files through ember-cli. We already have Semantic UI JS and CSS included elsewhere in the project.
Is there a way to exclude the core Semantic UI JS and CSS and only use these wrapper components?
Is there an option to remove them from the Broccoli tree?
Thank you!
When I install the addon and I copy test/dummy/app into my ember project, I can't get it to run. Is there any steps that I need to do to run the test app directly within the addon.
Thanks,
I'm trying to use semantic-ui sidebar according to https://github.com/Semantic-Org/Semantic-UI-Ember/tree/prep-1.0#sidebar
templates\application.hbs
{{#ui-sidebar class="ui left vertical menu"}}
<a class="item"> 1 </a>
<a class="item"> 2 </a>
<a class="item"> 3 </a>
{{/ui-sidebar}}
<div class="pusher">
<h2 id="title">Welcome to Ember</h2>
<a {{action 'show_sidebar'}}> SHOW SIDEBAR </a>
{{outlet}}
</div>
controllers\application.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions:{
show_sidebar(){
$('.ui.sidebar').sidebar('toggle');
}
}
});
output result:
<body class="ember-application pushable">
<div id="ember422" class="ui left vertical menu ember-view ui sidebar">
<a class="item"> 1 </a>
<a class="item"> 2 </a>
<a class="item"> 3 </a>
</div>
<script src="./xxxxxx_files/vendor.js"></script>
<script src="./xxxxxx_files/xxxxxx.js"></script>
<div class="pusher">
<div data-label="layer-div" style="display: none;"></div>
<div data-label="preview-div" style="pointer-events: none; display: none;"></div>
<div id="ember400" class="ember-view">
<div class="pusher">
<h2 id="title">Welcome to Ember</h2>
<a data-ember-action="423"> SHOW SIDEBAR </a>
</div>
</div>
</div>
</body>
But i get this message in console
semantic.js:15229Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusher element
semantic.js:14753Sidebar: Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag <div id="ember422" class="ui left vertical menu ember-view ui sidebar">…</div>
Sidebar seems to work correctly but i don't know how to fix messages in console.
Ember & ember cli version info
DEBUG: Ember : 2.0.0
ember.debug.js:5165 DEBUG: Ember Data : 2.0.0
ember.debug.js:5165 DEBUG: jQuery : 1.11.3
ember -v
version: 1.13.8
node: 4.1.1
npm: 2.13.4
os: linux x64
master⚡ ⇒ ember serve --proxy http://localhost:3000
version: 1.13.8
Proxying to http://localhost:3000
Livereload server on http://localhost:49153
Serving on http://localhost:4200/
File: templates/components/ui-dropdown.hbs
Assertion Failed: Using `{{view}}` or any path based on it ('templates/components/ui-dropdown.hbs' @ L1:C18) has been removed in Ember 2.0
Error: Assertion Failed: Using `{{view}}` or any path based on it ('templates/components/ui-dropdown.hbs' @ L1:C18) has been removed in Ember 2.0
When I put on my template, for example {{ui-checkbox checked=rememberMe}}
I got this error in my console :
Cannot call compile without the template compiler loaded. Please load ember-template-compiler.js prior to calling compile.
And the application crash. However, when I'm not using your modules it's perfectly ok. Any idea ?
I use ember 1.13.3 and ember-cli 1.13.1
By default after approval, modal view doesn't get dismissed. But calling this.send('closeModal');
doesn't respect transition settings from the view. Also returns this error Uncaught TypeError: Cannot read property 'height' of undefined
On an Ember CLI app 0.2.3. The grid displays funny. As in, instead of the grid taking up 1440px, it takes up 1444px, which forces the horizontal scroll bar to show.
I have app/pods/application/template.hbs
<div class="ui grid">
<div class="row">
<div class="four wide column green">4</div>
<div class="four wide column blue">4</div>
<div class="four wide column yellow">4</div>
<div class="four wide column red">4</div>
</div>
</div>
It looks like:
Any ideas?
just looking to download and include another JS i can use with require.js, to take care of the integration.
I just cloned the semantic-ui-ember project, checked out the prep-1.0 branch, and run npm install && bower install && ember serve
.
I selected the menu item modal and clicked and the button "Open Profile", then clicked the green and black button. The modal closes but no alert dialog appears. Guess this is a bug 😉
Let me know if u need further information.
Running into an error when trying to use this with ember 2.3.0-beta.1, ember-cli 2.2.0-beta.1, and jquery 2.1.4. The Chrome error is "Uncaught TypeError: Can't add property DEBUG, object is not extensible" coming from the // Static properties to ignore
code in the base Mixin.
After setting the content
and value
for a dropdown after an AJAX request, the value isn't being properly set.
Steps to reproduce:
content
and value
.This is not an issue as long as both content
and value
are pre-filled.
Hello and thank you for this project.
I'm trying to use the ui-radio
and setting the value and current to objects, it does the binding well, but it doesn't check the one that is already pre-selected.
I'm using the ui-dropdown module to display a selection. How can I set a certain entry to be active/selected? In my case settings.user.currentLanguage
would map to language.code
.
I am building an Ember app and would like to use Semantic UI. However, I cannot have external access to URLs. It will be on a closed off system that will need to have everything it needs locally in order to work, so the links to things like 'fonts.gstatic.com', for instance, won't work.
Is there a way to download a complete package of Semantic UI somewhere? If not, is there a way to quickly update it so that I can use it without needing those external URLs?
Thanks!
Hey,
Using this package is it possible to do some more complex models? Such as the allowMultiple
?
Is it possible to use "multiple select"? Or search or images in content? Like examples on page: http://semantic-ui.com/modules/dropdown.html
I also can't figure optionValuePath. I have always get "model.label" in "selection" variable.
{{ui-dropdown
content=model
optionValuePath="content.id"
optionLabelPath="content.label"
value=selection
prompt="Select"
}}
ember -v
version: 1.13.8
node: 4.1.1
npm: 2.13.4
os: linux x64`
Using accordion all seems to work but in console a get this error:
DEBUG: -------------------------------
DEBUG: Ember : 2.0.0
DEBUG: Ember Data : 2.0.0
DEBUG: jQuery : 1.11.3
DEBUG: -------------------------------
Ember Inspector Active
Accordion: The method you called is not defined ["set"]
Hello.
I'm searching in docs and i cannot find how to get the selected item in the dropdown to pass it as a parameter in action. I'm trying to get it by jquery from the "content tag" but content tag doesnt change anything. Any ideas?
This code created input without name attribute
{{ui-dropdown
class="ui search dropdown selection"
prompt="Cчет"
content=accounts
optionValuePath="content.id"
optionLabelPath="content.name"
selection=transaction.toAccount
name="account"
}}
Hey there, really interested in this project as I'm currently using Semantic on a project and have implemented many of these components on my own. Definitely interested in contributing to this project in the future.
Anyway, one of the components I have the most problems with is ui-dropdown
specifically when trying to bind to objects rather than values by using the selection
option rather than value
. Do you have any support for this or a method of working around it?
same as here Semantic-Org/Semantic-UI#2977
but calling $(this) I'm getting controller's instance.
It's hard to decide in favor of an Ember addon if the addon does not provide a live demo.
Please add one and publish it via gh-pages
. Thank you. ^_^
I've followed the README docs for the setup, but the modal template doesn't get displayed. The template itself does get inserted into DOM, but nothing appears. Is there anything i'm missing here?
It would be nice to have each modules usage behaviors (I think that's what Semantic UI calls them) be exposed as ember component actions. For example; a sidebar "toggle" behavior/method:
actions: {
toggle() {
this.$().sidebar('toggle');
}
}
Then code that has access to the sidebar instance (parent/child component, controller, whatever) can call upon the action instead of using the jQuery plugin. Seems more Ember'ish anyway.
sidebarComponent.send('toggle');
I'd be willing to work on a PR if I could get some guidance on how you'd like to see it implemented.
Open http://localhost:4200/modules/accordion
Accordion: The method you called is not defined ["set"]module.error @ semantic.js:2428(anonymous function) @ semantic.js:2513jQuery.extend.each @ jquery.js:384module.invoke @ semantic.js:2493(anonymous function) @ semantic.js:2540jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136$.fn.accordion @ semantic.js:2050execute @ base.js:106didInsertElement @ base.js:89_emberRuntimeSystemObject.default.extend.trigger @ ember.debug.js:41549superWrapper @ ember.debug.js:21134Renderer.didInsertElement @ ember.debug.js:11984Renderer_dispatchLifecycleHooks @ ember.debug.js:11906Renderer_revalidateTopLevelView @ ember.debug.js:11888_emberViewsViewsCore_view.default.extend.revalidate @ ember.debug.js:43942Queue.invoke @ ember.debug.js:978Queue.flush @ ember.debug.js:1042DeferredActionQueues.flush @ ember.debug.js:838Backburner.end @ ember.debug.js:166Backburner.run @ ember.debug.js:288Backburner.join @ ember.debug.js:323run.join @ ember.debug.js:19144exports.default._emberRuntimeSystemObject.default.extend._bubbleEvent @ ember.debug.js:40088(anonymous function) @ ember.debug.js:40030jQuery.event.dispatch @ jquery.js:4670elemData.handle @ jquery.js:4338
After I installed Bootstrap via bower and imported less and js files, semantic-ui component like dropdown aren't working, throwing Uncaught TypeError: Cannot read property 'call' of undefined [bootstrap.js:880]
When i bower install semantic-ui and import semantic css and js everything's working
Are you planning on supporting the new features that are to be released in semantic-ui 2.0 (specifically multi-select)?
The following set up doesn't seem to work for me. I have a ui-modal
like:
{{#ui-modal name="update" class="basic" onApprove=( action "update")}}
// ...
<div class="actions">
<div class="ui approve button">OK</div>
</div>
{{/ui-modal}}
and the action set as well:
UpdateComponent = Ember.Component.extend
actions:
update: () ->
alert('updated')
Clicking the OK
approval button closes the modal, but the alert is never fired. I am using the prep-1.0
branch and changed from approve
to onApprove
but can't get this to work.
When I use the {{ui-dropdown}}
component in my template, I got this error :
Uncaught Error: Assertion Failed: You must use Ember.set() to set the `childViews` property (of <bml-admin@component:ui-dropdown::ember1047>) to ``.
Ember 1.13.5 & Ember-data 1.13.5
I'm getting the following build error when using the ui-dropdown component with the onChange action.
Parse error on line 14:
...n class="selection" onChange(action 'upd
-----------------------^
Expecting 'CLOSE_RAW_BLOCK', 'CLOSE', 'CLOSE_UNESCAPED', 'OPEN_SEXPR', 'CLOSE_SEXPR', 'ID', 'OPEN_BLOCK_PARAMS', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'INVALID'
Posting my Ember info below because I'm thinking it's probably a version thing
Ember Inspector 1.9.3
Ember 1.13.7
Ember Data 1.13.9
jQuery 1.11.3
Ember Simple Auth 0.8.0
Ember Simple Auth Torii 0.8.0
I've seen a couple examples in the readme where the module callback was exposed for parent actions. Is this the case for all module callbacks? If not, it would be nice if they were. Ex:
When I served the production version of my application issuing the openModal action led to the following error:
TypeError: Cannot read property 'set' of undefined at exports.default.Ember.default.Mixin.create.actions.openModal (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:72591:21) at Object.triggerEvent (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:33812:36) at trigger (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:53760:16) at Object.Router.trigger (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:52484:9) at EmberObject.default.extend.send (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:33310:40) at mixin.Mixin.create.send (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:36968:29) at confirm (http://localhost:4200/assets/my-blog-aa713d0569e9c7329f64b9279bff4503.js:118:14) at mixin.Mixin.create.send (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:36961:54) at runRegisteredAction (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:28506:25) at Object.Backburner.run (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:10778:27)
Any idea what I am doing wrong?
I'm migrating my UI to use Semantic UI and hit a little sticking point with preventing users from selecting an item in a select box. Currently; the select view has a disabled property. Would it be possible to add this as a property to the component rather than a class?
Here is an example of how it could be setup:
{{ui-dropdown
optionValuePath='content.id'
optionLabelPath='content.label'
disabled=is_own
content=roles
value=model.role
class='ui selection dropdown'}}
Thanks!
use the code in readme, the fruit
property is always undefined
<div class="ui form">
<div class="grouped inline fields">
<div class="field">
{{ui-radio name="fruit" label="Once a week" checked=fruit}}
</div>
<div class="field">
{{ui-radio name="fruit" label="2-3 times a week" checked=fruit}}
</div>
<div class="field">
{{ui-radio name="fruit" label="Once a day" checked=fruit}}
</div>
</div>
</div>
On Ember CLI 0.2.3. I get this in Ember Inspector, console tab:
downloadable font: rejected by sanitizer (font-family: "Icons" style:normal weight:normal stretch:normal src index:1) source: http://localhost:4099/assets/themes/default/assets/fonts/icons.woff2
I am also using Firefox. Any ideas?
The following doesnt seem to work. The animation works, but no icon displays right after.
<div class="ui animated button">
<div class="visible content">Next</div>
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
</div>
ember.js @ 1.13.1
semantic-ui-ember @ 0.0.1-rc.6
I have the following form code:
<div class="sign-up">
<h1>
{{t signUp.header}}
</h1>
<form class="ui form">
<div class="field">
{{input id="username" name="username" type="text" placeholder=usernamePlaceholder}}
</div>
<div class="field">
{{input name="email" type="text" placeholder=emailPlaceholder}}
</div>
<div class="field">
{{input name="password" type="password" placeholder=passwordPlaceholder}}
</div>
<div class="ui blue submit button">Submit</div>
<div class="ui clear button">Clear</div>
</form>
</div>
However, the clear
button is not working, as per the Semantic UI Form Validation examples found here.
Also, I have no idea where I would place the actual validation set-up code, like the following:
$('.sign-up form').form({
fields: {
name: {
identifer: 'username',
rules: [
{
type: 'empty',
prompt: "You must provide a user name!"
}
]
}
},
inline: true,
on: 'blur'
});
Note, if I paste the above into the Chrome console, the validation is not working, still, but somehow the clear
button starts to work!
Any help with this would be greatly appreciated...
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.