semantic-org / semantic-ui-angular

Semantic UI Angular Integrations

Semantic-UI-Angular

Semantic-UI-Angular is a pure AngularJS 1.x set of directives for Semantic-UI components. We are considering Angular 2 support in the future. We've decided to use TypeScript as a step to Angular 2 friendly environment.

Status

Work in progress

We are working on setting up proper environment, contribution guidelines and everything else for comfortable community contributions. Once we release first alpha.0 we are happy to get community help.

Support

We support AngularJS 1.4.8 version.

Building Semantic-UI-Angular

You have to have nodejs installed before running following commands.

npm install
npm run build

The distribution packages will be stored in dist folder.

Running tests

Single run:

npm test

Dev mode:

npm run test-dev

semantic-ui-angular's Issues

Create Contributing Guidelines

Is this repo no longer active?

Create documentation page and demo

Today we have demonstrations by component. The idea is to centralize all in one app that will be rotated to gulp to be a guide to the developer.

Make page following the semantic UI documentation standard:
http://semantic-ui.com/introduction/getting-started.html

is project live????

is it live gor angular or die?

(sm-search) The clicks on a search result, gives no action

Hi,

Thanks for your directive :)

I have a problem with the user to search through the Directive sm-search-bind, research works perfectly well, but when I click the result search, the model is not updated?

Here is the code used :

<div class="ui search" sm-search-bind="
                    {
                      minCharacters: 1,
                      maxResults   : 1000,
                      fields       : {
                        results: 'results',
                        title  : 'libelle',
                        price  : 'ref',
                      },
                      apiSettings  : {
                        url: init.search.article + '/{query}'
                      }
                    }">

                    <input class="prompt"
                           ng-keypress="searchInput($event)" type="text"
                           placeholder="Recherche : Référence ou Article"
                           ng-model="article.article"
                    >

                    <div style="overflow: auto; height:300px; width:450px;font-size: 10px"
                         class="results">

                    </div>
                  </div>

Using the code with sm-search, it works but I manage not retrieve the item when I press the enter key.

<sm-search
                  icon="search"
                  model="article.article"
                  settings="
                  {
                    maxResults : 100,
                    fields : {
                    results     : 'results',
                    title       : 'libelle',
                    price       : 'ref',
                  }}"
                  remote="@{{init.search.article}}/{query}">
                  </sm-search>

Thank you for your help

Dead?

So is this repo dead? No activity for a couple of months. Did you hit a roadblock? Need some assistance?

Update project dependencies

dependencies:

dev:

npm run build failed

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 silly lifecycle [email protected]prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]build: [email protected]
8 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]build: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\Hejc\Semantic-UI-Angular-master\node_modules.bin;C:\Program Files\nodejs;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit;C:\Program Files\Microsoft SQL Server\110\Tools\Binn;C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0;C:\Program Files\Microsoft\Web Platform Installer;C:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn;C:\Program Files\Microsoft SQL Server\100\Tools\Binn;C:\Program Files\Microsoft SQL Server\100\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\VSShell\Common7\IDE;C:\Program Files (x86)\Microsoft SQL Server\100\DTS\Binn;C:\Program Files (x86)\Git\bin;C:\Program Files\nodejs;C:\Program Files\MongoDB\Server\3.2\bin;C:\Users\Linzc\AppData\Roaming\npm;D:\Program Files (x86)\SSH Communications Security\SSH Secure Shell
10 verbose lifecycle [email protected]build: CWD: D:\Hejc\Semantic-UI-Angular-master
11 silly lifecycle [email protected]build: Args: [ '/d /s /c', 'rm -rf dist && node_modules/.bin/webpack' ]
12 silly lifecycle [email protected]build: Returned: code: 1 signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: rm -rf dist && node_modules/.bin/webpack
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:239:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:850:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid [email protected]
16 verbose cwd D:\Hejc\Semantic-UI-Angular-master
17 error Windows_NT 6.1.7601
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
19 error node v6.1.0
20 error npm v3.8.6
21 error code ELIFECYCLE
22 error [email protected] build: rm -rf dist && node_modules/.bin/webpack
22 error Exit status 1
23 error Failed at the [email protected] build script 'rm -rf dist && node_modules/.bin/webpack'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the semantic-ui-angular package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error rm -rf dist && node_modules/.bin/webpack
23 error You can get information on how to open an issue for this project with:
23 error npm bugs semantic-ui-angular
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls semantic-ui-angular
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

What is the problem?

Refactor radioButton component

style guide:

• https://github.com/rwwagner90/angular-styleguide-es6

notes:

• add documentation code with djeni
• use templateUrl and create a template file
• use $scope on controller rather than this or self

About this project

Will this ever release? Because there are many developers(you can't imagine how much! Some includes Aliens too...) waiting to see Semantic UI in Angular JS. If so when can we expect the first release?

Add a Jasmine custom matcher for elements

See this as a reference.

Refactor checkbox component

style guide:

• https://github.com/rwwagner90/angular-styleguide-es6

notes:

• add documentation code with djeni
• use templateUrl and create a template file
• use $scope on controller rather than this or self

Semantic UI for Angular 2

Please consider creating Angular 2 components for amazing Semantic UI modules without Jquery dependency.

Semantic-UI-Angular should be changed to Semantic-UI-AngularJS

Semantic-UI-Angular is a pure AngularJS 1.x set of directives for Semantic-UI components. We are considering Angular 2 support in the future. We've decided to use TypeScript as a step to Angular 2 friendly environment.

I think the name Semantic-UI-Angular is confusing to Angular developers because Angular refers to https://angular.io/ . Blog: https://blog.angularjs.org/2016/12/ok-let-me-explain-its-going-to-be.html

Rename elements for components

Angular material is a reference project and use the naming components instead of elements. The componentisation will be the main feature of the Angular 2, all of which basically will be a component.

For this, I find it interesting we update the nomenclature so that we can begin to strengthen the structure and design codes. What do you think?

Step forward

Hey guys, I hope I will get more free time soon and get back to this project. I wanna know what do you think we should choose as a step forward for the project.

Well, I am talking about tree options:

• We just upgrade up to angular 1.4, as a big part of which is a new API for animations.
• We're taking step 1 and adding ES6 with its sweet features.
• We're moving even more further and considering to use TypeScript, with its power.

As the code base is really small at this moment but new tech is actively coming we probably need to discuss about plans for the future.

I'd vote for the second option.

Please, share your thoughts

perf(rating): do not rely on ngRepeat

modal directive?

I am wanting to use semantic's modal module in a way similar to the AngularUI-bootstrap modal directive. Unfortunately my Angular-foo is not yet strong enough to write it myself. Is anyone working on more directives for semantic-ui and angular?

(sm-search) tabindex

Hi

Is it possible you to integrate the tabindex parameter for search forms ?

thank you

License?

I never really defined an explicit license for angular-semantic, MIT is always a good pick, so that gets my vote --- I'll leave this up to @m0t0r and Jack, though.

How to use modal directive?

How to use modal directive?

sm-radio-button design questions

I am planning to create a radio button directive (sm-radio-button) which should probably work in conjunction with sm-radio-group directive which manages a set of sm-radio-button directive. This design is borrowed from angular-material. So, in generic case it should look like:

<sm-radio-group ng-model="radio">
    <sm-radio-button value="radio1">Radio 1</sm-radio-button>
    <sm-radio-button value="radio2">Radio 2</sm-radio-button>
    <sm-radio-button value="radio3">Radio 3</sm-radio-button>
</sm-radio-group>

I have a couple of questions:

1. Angular-design has a set of custom services such as '$mdConstant', '$mdUtil'. Should I consider analogues services as well since they look like good ideas.

2. Is design using controller's prototype to set helper methods considered suitable for us as well ?

3. What else should I consider ?

@caitp please take a look once you have a chance.

Convert Semantic-UI-React to Semantic-UI-Angular with Microsoft Angular-React project.

Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another. In the case of Office UI Fabric, where its use is required, the client must be written in React (there is no Angular component library for the latest version). Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons.

Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application. The library of wrappers for Office UI Fabric simplifies the use of these components with Angular. However, any React code can make use of the custom Angular-React renderer.

You can see how Microsoft converts Semantic-UI-React to Semantic-UI-Angular here.

Does the latest version of Semantic-UI support Angular 4 Webpack?

I have an Angular 4 project which will be updated in the future to the latest Angular version. I am thinking about using Semantic-UI-Angular but I am having trouble getting a clear "answer" if Semantic-UI-Angular can be integrated with an Angular 4+ project, the documents seem to stop at Angular 2. Is there support with the Semantic-UI-Angular for an Angular 4 application, (also future versions of Angular)?

Have some directive in javascript, interested?

I wrote directives for modal, pop-up and dropdown. Is there an interest that I up-load them?

I did not find any clear rules in #8 but I noticed that what I have is very different from what is here already.

my approach:
Since there was nothing really working available I took a very simple approach:

• Using semantic-ui's native java script
• Minimum logic, basically passing through all settings and behaviors to semantic-ui's java scripts
• Almost no manipulation of CSS classes from of directive, I think semantic-ui looks really good as it is and matches angular nicely

Refactor rating component

style guide:

• https://github.com/rwwagner90/angular-styleguide-es6

notes:

• add documentation code with djeni
• use templateUrl and create a template file
• use $scope on controller rather than this or self

Update Semantic-UI in the project

Semantic-UI should be updated and be able to work with CI

Refactor divider component

style guide:

• https://github.com/rwwagner90/angular-styleguide-es6

notes:

• add documentation code with djeni
• use templateUrl and create a template file
• use $scope on controller rather than this or self

Angular2 directives completed!

Hi everybody, I finished a set of Angular2 directives. I was hoping you could link to the main site?

http://www.semanticui-ang2.com/

perf(rating): do not rely on ngClass

Update Readme.md

Reference:

• https://github.com/Semantic-Org/Semantic-UI-Ember

Refactor button component

style guide:

• https://github.com/rwwagner90/angular-styleguide-es6

notes:

• add documentation code with djeni
• use templateUrl and create a template file
• use $scope on controller rather than this or self

Dropdown list can't be chosen the option marked with attribute 'selected'!

Dropdown list can't be selected the option marked with attribute 'selected' on the SemanticUI Framework with AngularJS. By default remains placeholder.

.directive('mydropdown', function () {
    return {
        restrict: 'AE',
        replace: true,
        scope: {
            "items": "=",
            "model": "=",
            "inputModel": "@",
            "inputName": "@"
        },
        template: '<select class="ui dropdown" name="{{ inputName }}" ng-model="model[inputName]"><option ng-repeat="item in items" value="{{item.id}}" ng-selected="model[inputName]==item.id" ng-bind="item.title"></option></select>',
        link: function (scope, element, attrs) {
            $(element).dropdown();
        }
    };
})

No Bower Package?

Hi,
I want to use this in my existing yeoman-angular generated project which depends on the bower components to make client-side package management easy but unfortunately i cant see the bower command in docs.

Directives for messages

https://plnkr.co/edit/eTectH

Created a directive for flash message but it does not integrate any animation. Looking for a way to include the transition, fadeIn, fadeOut and closeable.

angular 7 support + new features

Hi,
We are currently working on an Angular 7 project and were wondering if there is going to be a release on new features like in the semantic-react repo. The features we are currently using are from ng2-semantic repo, which are great but not enough.
Do you plan on supporting angular? or the framework support is officially abandoned by you?
thanks.

Checkbox work only once

Hi everyone,

I have got a weird problem with Safari, Firefox and Chrome about checkboxes.

They work but I can only see one time the tick.

Example:

• Checkbox // Click -> $scope.checked = false;
• Checkbox // Click -> $scope.checked = true;
• Checkbox // Click -> $scope.checked = false;
• Checkbox // Click -> $scope.checked = true;
• etc.

I have take a look in the source code, all seems fine. I have also watch the element to see any modifications. Value of the element is correct, when $scope.checked = true the element has checked="checked".

Have you any ideas?

Thanks.

Fix jshint warns