adarshpastakia / aurelia-ui-framework Goto Github PK

Getting a 404 when trying to view your HTTP Client info:

https://adarshpastakia.github.io/aurelia-ui-framework/src/api/http.js

Tried to reach it from here:

https://adarshpastakia.github.io/aurelia-ui-framework/#/

The same goes for data.js and event.js and I noticed this link is also not working:

https://adarshpastakia.github.io/aurelia-ui-framework/#/api/http/

Create column-group element to create grouped headers

<ui-datagrid>
 <ui-column>..</ui-column>
 <ui-column>..</ui-column>
 <ui-column-group label="..">
  <ui-column>..</ui-column>
  <ui-column>..</ui-column>
  <ui-column>..</ui-column>
 </ui-column-group>
 <ui-column>..</ui-column>
</ui-datagrid>

Guys,

I'm in the middle on starting my new job and move back home, so the work on the framework might be a bit slow but will try to get all the pull-requests as and when i can. Also the updates for Data-Model and Data-Source will be worked on the v4.0.0 branch.

Shall keep you guys posted of the progress...

Thanks for all your pull-requests and help on this project 👍

Repo is available by https://github.com/nowinfinity/nowinfinity.abr.site

Initial dir property value 'inherit' causes and exception in edge

Aurelia Webpack plugin requires that you use the PLATFORM.moduleName() method to wrap your moduleIds. See this discussion: aurelia/pal#17

basically anywhere in source code where you have moduleId: "./foo/bar" needs to be changed to moduleId: PLATFORM.moduleName("./foo/bar").

• Combo
• List
• Tag
• Simple Dropdown

Dialogs are said to work in IE 11 (since a few days ago), but closing a dialog in IE still fails.
dlgView passes by the detached state but the window stays open with the waiting spinner on.

Firefox, Chrome.

Issue with select event been triggered once with valid value and next with undefined

sometimes we want to add private properties to the child that inherits from the UIModel,
and we want them to be excluded from serialization/deserialization/save/discard/isDirty etc..
also: the properties of the UIModel himself should always be excluded in that sense.

the init() function should receive an optional Array<string> of property names to explicitly exclude.

I'm working on this, I will create a PR shortly.

edit: the word private is misleading.
I mean that this property should be accessible from the outside of the class, but should be excluded from all UIModel logic.

Links in Getting Started docs Using U18N and Building the app are not routing when clicked at.

https://adarshpastakia.github.io/aurelia-ui-framework/#/start/

This is very nice but it is just the example application, is the framework also open source?

I don't think this is a bug but I can't get it to work right. If you have stackoverflow setup please let me know and I will post it there.

I am trying to setup a layout with sidebar exactly like you have when clicking Get Started. The only difference is that I do not want to navigate from one view to this one, instead I just want the view to load as is.

In app.html

header...

  <ui-section row-layout animate>
    <ui-sidebar label="Input Elements" collapsible scroll class="ui-hidden-lg-down">
      <ui-menu>
        <ui-menu-item repeat.for="route of router.navigation" href.bind="route.href" active.bind="route.isActive" icon.bind="route.settings.icon" disabled.bind="route.settings.disabled">${route.settings.title || route.title}</ui-menu-item>
      </ui-menu>
    </ui-sidebar>
    <ui-router-view></ui-router-view>
  </ui-section>

footer...

app.js has your normal routes setup

The problem is when the page is displayed I see the sidebar and it works but there are no menu items.

I can get this to work using a redirect to a view with this menu but it is a hack and causes a promise timeout.

Thanks

The new Aurelia webpack plugin is able to pick dist files from a /dist/es2015 folder during build. The benefit is that any export that isn't directly used by the built app can be removed (tree shaking).

from the looks of the dist at the moment, its require module format?

Might be worth having a /dist/es2015 folder in the publish package so applications can take advantage of tree shaking (see https://github.com/jods4/aurelia-webpack-build/tree/master/demos/04-Small_ES6_build). Its pretty much exactly the same output as you have now, but just targetting es2015 and in the /dist/es2015 folder.

First a comment: I have not seen this UI framework before, but have done many Aurelia project. I really like aurelia-ui-framework.

Question: Is the data grid editable? I have a project I am just starting and I was going to use Syncfusion datagrid. But I would rather use the aurelia-UI-framework and use the grid as well as the other widgets.

Thank you for you work on this project.

Hi,

I am trying to position a ui-menubar next to a ui-app-title inside a ui-app-header, i.e. something like this:

    <ui-app-header>
      <ui-app-title>
        <div style="display: inline-block">app title</div>
        <ui-menubar style="display: inline-flex">
          <ui-menu-item
            repeat.for="option of menuOptions">
            ${option.label}
          </ui-menu-item>
        </ui-menubar>
      </ui-app-title>
    </ui-app-header>

The menu bar is displayed briefly and then it gets replaced by a small button which, when clicked, displays the menu options. This looks like an overflow mechanism in case the browser window gets too small to contain the menu bar, but it seems to get activated regardless of the window's size.

Am I missing something?

Can you provide theme of Aurelia ui framework for bootstrap too ?
like https://bootswatch.com

Sometimes we use Aurelia ui framework controls beside some bootstrap plug-ins and controls so we need to have same theme for whole the site and controls.

Is it possible ?

Dear,

The aurelia-ui-framework is an replacement of the sigma-ui-framework project?

I'm confused.

JM

• Enhance date-input for time input
• Add time selection for date-view

Update date input element size='1'

• Page
• Section
• Content

the isDirty() function of the UIModel could be more useful as a property/getter that we can bind into.

let's say we have a save button that we want to enable only if there are actual changes to the model.
we cannot do that using the current functional behaviour.

if it's a problem regarding performance (because of all the listener involved) - can it be an optional feature that we can turn on on individual models?

First of all congratulations for your amazing work!

I need to have a ui-sidebar with variable width (i.e. responsive). I tried something like this:

<ui-page page-title="page">
    <ui-section row-layout>
      <ui-sidebar label="options" scroll collapsible style="flex: 1 1 0;">
        here go the options
      </ui-sidebar>
      <ui-content padded scroll style="flex: 2 1 0;">
        here goes the content
      </ui-content>
    </ui-section>
</ui-page>

This doesn't work probably because ui-sidebar's default styling includes max-width = 15em. I tried to change this (e.g. set it to none or some other value) either by css or code. This works (the sidebar's width does change) but then the sidebar stops collapsing.

Am I doing something wrong? Is this a bug?

Thanks

The current implementation of the tabs is:

<ui-tab id.bind="tab.id" label.bind="tab.label">
    <compose view-model.bind="tab.viewModel"></compose>
</ui-tab>

the label of the tab is bounded to a string, and the content (slot) of the tab is HTML (in this example, it's a compose tag).

it will be helpful to switch that.
the compose content can be bounded, and the title can go in the slot - that way you have much more freedom over the content of the title. (you can have custom bounded HTML as the title), while maintaining the same freedom that you already have for the content of the tab, because you can write anything you want using the compose tag.

also, the tab id can be generated by the framework (using the index of the tab) - and then we can also support API function like tabs.ChangeSelection(5)

<ui-tab compose.bind="{view: '...', viewModel: '...', model: '...'}">
    <span>the title is HTML</span>
    <ui-glyph if.bind="showGlyph" glyph="glyph-alert-notif" class="ui-anim-color"></ui-glyph>
</ui-tab>

I created a project with an implementation of this vision of tabs.
https://github.com/avrahamcool/auf-tabs-showcase
this is a simple and naive implementation that lacks styling, event's etc... I only showcase the custom title.

Would be great if you use/support aurelia-dialog for your dialogs.

calling discardChanges() on a model instance that inherits from UIModel is not doing anything if you didn't call saveChanges() or isDirty() at least once before that.

modifying a freshly initialized model, and then discarding the changes should be a valid scenario.

Taskbar button for dialogs not working when clicking on the text span element

• App Header
• App Footer

• Tab Panel
• Tabs
• Closeable Tab

Hi, first of all, this looks like a great framework library, thanks for all the work on this!
I have a question about the events. I would like to generate a tab strip with closable tabs based on clicks in a tree. As I understand it, the tree component generates UIevents (a shell for eventaggregator) which I can use to build up an array of clicked items for the tab bar, and for use in selecting the tab If I use the generic mouseclick, events are coming through but not for nodeclick, as defined in ui-tree.ts. I cannot find any examples in the for the rest pretty complete docs. What am I missing? Cheers!

import {autoinject} from 'aurelia-framework';
import {UIEvent} from "../resources/utils/ui-event";
import {UIUtils} from "../resources/utils/ui-utils";
import {UITreeOptions} from "../resources/utils/ui-tree-model";

import * as _ from "lodash";

@autoinject()

export class TreeComponent {
  tree;
  private subscriber: { dispose: () => void };
  private observer: { dispose: () => void };
  attached() {
        this.subscriber = UIEvent.subscribe('nodeclick', (value) => {
          console.log(JSON.stringify(value));
        });

        this.observer = UIEvent.observe(this.tree, 'nodeclick', (value) => {
          console.log(JSON.stringify(value));
        });
  }

  detached() {
      this.subscriber.dispose();
      this.observer.dispose();
  } 

Due to issues with css3 position: sticky need to update the data grid structure.

Solution
Left wrapper div to hold thead tbody and tfoot for locked columns
Right wrapper div to hold thead tbody and tfoot for non locked columns

Downside
Need to create six tables, 2 each for header, footer and body

Selected label not being updated on locale change

• Checkbox
• Radio
• Switch

Button with busy state is not rendered correctly in RTL. (no padding between the loading glyph and the button glyph)

Dialogs are not opening correctly in RTL. (they open half outside the browser - and the restriction on the modal movement is wrong)

Update sass styling to split into two sections, generic styles and color themes

1. framework.scss applies generic styling for components
2. theme.scss applies color themes
3. extras.scss applies color themes for extra colors

Reason

When having multiple themes in a project the styles are mostly repeated for each themed css creating multiple large css files.

Usage

can be included into a single css, or when having multiple themes the framework and extra color themes can be separated from the app themes

single css

@import "colors";
@import "framework";
@import "theme";
@import "extras";

multiple themes

framework styles

@import "framework";

theme1

@import "colors";

$primary: orange;

@import "theme";

theme2

@import "colors";

$primary: teal;

@import "theme";

    <link rel="stylesheet" href="css/app.css" id="baseStyle">
    <link rel="stylesheet" href="css/theme1.css" id="theme">
    <link rel="stylesheet alternate" href="css/theme2.css">

• Grid System
• Visibility

DataSource implementation for data components

Affected Components

• (!!!) Datagrid
• (!!) Combo
• (!!) List
• (!!) Tags
• (!) Tree
• (!) Textarea auto-complete

BaseDataSource

fetchData(): Promise | Array
loadPage(n): Promise | Array
loadSummary(): Promise | Array

sort(dataId, order): Promise | Array
filter({ dataId: value }): Promise | Array

LocalData

constructor(Array)

remoteSorting = false
remoteFilter = false
remoteSummary = false

RemoteData

Can implement RemoteData in an extended class to override base methods

constructor(Array)

url
dataProperty = 'data'
pageProperty = 'page'
totalProperty = 'records'

remoteSorting = optional
remoteFilter = optional
remoteSummary = optional

I was looking at the source code and I'm seeing stuff like:

  // aurelia hooks
  canActivate(model) { return true; }
  activate(model) { return true; }
  bind(bindingContext) { }
  attached() { }
  detached() { }
  unbind() { }
  deactivate() { }
  // end aurelia hooks

repeatedly. Why are all of these empty callbacks being added? Aurelia doesn't require these callback methods be added to a viewmodel. If the callback isn't implemented, Aurelia won't call it.

• Added panel group to create accordion styled panels

Major Update

• Changed datagrid layout from table to flex box divs
• Locking columns using css transform

Issues

• Stuttered scrolling in Safari
• Untested in browsers on Windows

Tested

• Chrome
• Firefox
• Opera

#20
#24

Added options for making server-side request from datagrid.

<ui-datagrid server.bind="serverOptions" pager.bind="pagerRef">...</ui-datagrid>

serverOptions = {
url: 'http://api.test.com/users/{page}/{count}',
pageSize: 50,
totalProperty: 'total',
dataProperty: 'data'
}

// Server Result
{
total: 100,
data: [...]
}

Will total return total pages or total records?

Datagrids fail to load in edge due to undefined width value

• Form
• Fieldset
• Text Input
• Textarea
• Phone

Any chance of adding new features to grid?
I'm thinking of server data, grouping, nested grids...
Right now i'm using some other libraries in my applications, but Aurelia looks very promissing and this ui framework makes it even more appealing. Fetching data from server would be a great enhancement...

Your framework looks awesome.

After setting up the example app the css does not seem to be working. If anyone has a working example they could link to that would be great.

Greetings! Thanks for making this awesome library.

Currently, this package can be installed via jspm without a prefix

$ jspm install aurelia-ui-framework

Unfortunately, no dependencies are installed, because, as the output from jspm indicates, there is no registry property set in the package.json.

This can be fixed on a per install basis by using an override

$ jspm install aurelia-ui-framework -o "{registry: 'npm'}"

but requires extra configuration maintenance and more advanced knowledge of jspm.

Another alternative is

$ jspm install npm:aurelia-ui-framework

but that defeats the purpose of the entry that was created in the jspm registry for this package and does not match the behavior of other aurelia libraries.

To remedy this, I propose adding

  "registry": "npm"

to package.json.

Thank you.

• Simple Tree
• Checkbox Nodes

Router title transformation not working.

The UIModel class exposes a HTTPClient property for fetching resources.
It also exposes 4 unimplemented functions (Get, Post, etc..) [I don't see any reason for that in the current implementation]

a common use case is to inherit this class and immediately add 2 bound properties for state tracking.
isBusy - should be true whenever the model is currently using the HTTPClient - can be use to show a loading spinner in the view.
hasError - (can hold the error itself instead of a simple boolean) whenever an error occurred while using the HTTPClient - can be used for displaying the view accordingly.

those properties should not be serialized, deserialized, saved, discarded or watched for changes for isDirty like other properties of the class that inherits from UIModel.

I think it should be implemented Out-Of-The-Box inside the UIModel class so we don't need to replicate this in every child class.

I see a couple of ways to do this.

1. the child class can implement 4 function _Get, _Post etc..
   but the caller of the function calls for Get, Post etc..
   calling Get will kick of initialization code, and then run _Get.

something like:

Get(...rest)
{
   this.isBusy = true;
   this.hasError = false;
   this._Get(rest)
   .catch(e => this.hasError = e)
   .then(_ => this.isBusy = false);
}

the child class can implement the _Get function as he wants..

.. do the same for Post, Put, Delete..

2. the child implements the 4 function just like he does now.
   Get, Post etc...
   but we expose one additional function in the UIModel class InvokeHttpWithState, that receive the function to call as a parameter.

something like:

InvokeHttpWithState(methodName, ...rest)
{
   this.isBusy = true;
   this.hasError = false;
   this[methodName](rest)
   .catch(e => this.hasError = e)
   .then(_ => this.isBusy = false);
}

what do you think?
I can work on this and create a PR + add examples to the DEMO + add documentation.
(a reminder about the demo app - it's not the same as the code currently in the repo)

Possible views

1. Composed view
2. Drilldown type inner grid