Skip to content

Commit 42cbb20

Browse files
ardentiaardentia
authored
Merge pull request #25 from SQ-UI/develop
Develop
2 parents 7212d8f + 1511a94 commit 42cbb20

27 files changed

+449
-161
lines changed

‎README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,28 @@ ng-sq-ui does not come with a specific font. Including the default theme is also
6161

6262
Need a grid? [We've got you covered](https://sq-ui.github.io/sq-grid/)!
6363

64+
### Add styles to angular.json
65+
66+
```json
67+
"styles": [
68+
"src/styles.css",
69+
"./node_modules/@sq-ui/ng-sq-ui/sq-ui-theme.scss",
70+
"./node_modules/font-awesome/scss/font-awesome.scss"
71+
],
72+
```
73+
74+
### Apply styling to the components
75+
76+
To use our styling just add the `class="sq"` on a parent element.
77+
78+
```html
79+
<body class="sq">
80+
<div class="row">
81+
<sq-input ...></sq-input>
82+
</div>
83+
</body>
84+
```
85+
6486
## Dependencies
6587

6688
ng-sq-ui depends on:

‎docs/form-elements-module.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@ In [app.component.html](https://github.com/SQ-UI/ng-sq-ui/blob/master/src/app/ap
271271

272272
```html
273273
<sq-typeahead name="typeahead"
274+
displayProp="displayName"
274275
formControlName="typeahead"
275276
[searchResults]="searchResults"
276277
(onUserInputEnd)="searchMethod($event)"
@@ -303,6 +304,8 @@ export class AppComponent {
303304
}
304305
```
305306
307+
> If you wish to pass just an array of string, you must omit the property `displayProp` in the html.
308+
306309
### Component properties:
307310
308311
- **`@Input()` name:** `string` - Name of the typeahead. If not provided, a generic name is generated, using the following pattern: `'sq-form-control' + new Date().getTime().toString()`.
@@ -327,6 +330,8 @@ export class AppComponent {
327330
328331
- **`@Input()` multiple:** `boolean` - Allow the user to choose multiple items from the search results list. Defaults to `false`.
329332
333+
- **`@Input()` displayProp:** `string` - Specify which property of the object to use as display property. If you are just passing an array of strings you must not assign a value to this property.
334+
330335
### Class properties:
331336
332337
- **queryInputControl:** `FormControl` - The model for the input where the user types in a `query`.

‎docs/installation.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,34 @@ export class AppModule {}
4545
"./node_modules/font-awesome/scss/font-awesome.scss"
4646
],
4747
```
48+
49+
## Apply styling to the components
50+
51+
To use our styling just add the `class="sq"` on a parent element.
52+
53+
> If you want to use our sq theme, add the `sq` class on the body of the document or the app wrapper
54+
55+
```html
56+
<body class="sq">
57+
<div class="row">
58+
<sq-input ...></sq-input>
59+
</div>
60+
</body>
61+
```
62+
63+
```html
64+
<body>
65+
<app class="sq">
66+
<sq-input ...></sq-input>
67+
</app>
68+
</body>
69+
```
70+
71+
> If you would like to use our theme on a specific component (or a set of components) just add the `sq` class on a parent wrapper
72+
73+
```html
74+
<div class="sq">
75+
<sq-input ...></sq-input>
76+
<sq-droprdown ...></sq-droprdown>
77+
</div>
78+
```

‎docs/interfaces.md‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,3 @@ interface LabelValuePair {
66
value: any;
77
}
88
```
9-
10-
```typescript
11-
interface SearchResult {
12-
displayName: string;
13-
value: any;
14-
}
15-
```

‎projects/ng-sq-ui/src/README.md‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ The components are grouped by modules. Any properties you can see through code i
1212
Any types of public interfaces and services are also included.
1313

1414
- [Home Page](https://sq-ui.github.io/ng-sq-ui)
15+
- [Installation](https://sq-ui.github.io/ng-sq-ui/#/installation)
1516
- [Form Elements](https://sq-ui.github.io/ng-sq-ui/#/form-elements-module)
1617
- [Modal](https://sq-ui.github.io/ng-sq-ui/#/modal-module)
1718
- [Interfaces](https://sq-ui.github.io/ng-sq-ui/#/interfaces)
@@ -32,10 +33,12 @@ yarn add @sq-ui/ng-sq-ui
3233
## Usage
3334

3435
Import the NgSqUiModule in your module:
36+
3537
```
3638
import { NgSqUiModule } from '@sq-ui/ng-sq-ui';
3739
```
38-
and then include it in the `imports` array of your @NgModule() decorator:
40+
41+
and then include it in the `imports` array of your @NgModule() decorator:
3942

4043
```
4144
@NgModule({
@@ -49,6 +52,28 @@ and then include it in the `imports` array of your @NgModule() decorator:
4952

5053
ng-sq-ui does not come with a specific font. Including the default theme is also optional. Refer to our [Live examples page](https://ng-sq-ui-examples.surge.sh).
5154

55+
### Add styles to angular.json
56+
57+
```json
58+
"styles": [
59+
"src/styles.css",
60+
"./node_modules/@sq-ui/ng-sq-ui/sq-ui-theme.scss",
61+
"./node_modules/font-awesome/scss/font-awesome.scss"
62+
],
63+
```
64+
65+
### Apply styling to the components
66+
67+
To use our styling just add the `class="sq"` on a parent element.
68+
69+
```html
70+
<body class="sq">
71+
<div class="row">
72+
<sq-input ...></sq-input>
73+
</div>
74+
</body>
75+
```
76+
5277
## Dependencies
5378

5479
ng-sq-ui depends on font-awesome and immutable.js
@@ -58,4 +83,4 @@ ng-sq-ui depends on font-awesome and immutable.js
5883
- Use NG-SQ-UI in your daily work.
5984
- **Star** it if you like.
6085
- [Join slack chat](https://join.slack.com/t/ng-sq-ui/shared_invite/enQtNDE2NDQxMjA4NzU4LTNiOWZjMGU5Mzc1N2NiMjRkMjJlM2U5OWY4ZGUyOWNjNjFmY2EyMzQ0Zjg0Mjk5OTE4MGUyMjQwMmU3NDI2Yzg) to help solve problems.
61-
86+
- Follow us on [twitter](https://twitter.com/squi97817882) to get latest updates.

‎projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,14 @@
44
position: relative;
55
flex-wrap: wrap;
66
justify-content: flex-start;
7+
&:hover {
8+
cursor: pointer;
9+
}
710
.options {
811
width: 100%;
912
margin-top: 5px;
13+
max-height: 200px;
14+
overflow-y: scroll;
1015
}
1116
.options .option {
1217
padding: 5px 10px;
@@ -21,3 +26,11 @@
2126
top: 11px;
2227
}
2328
}
29+
30+
@media (max-width: 450px) {
31+
.sq .input-field.dropdown {
32+
.chosen-item {
33+
margin-top: 10px;
34+
}
35+
}
36+
}

‎projects/ng-sq-ui/src/lib/form-elements/input/input.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{{controlLabel}}
66
</label>
77

8-
<input type="text"
8+
<input type="{{type}}"
99
name="{{name}}"
1010
id="{{controlId}}"
1111
placeholder="{{controlPlaceholder}}"

‎projects/ng-sq-ui/src/lib/form-elements/input/input.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { Component, OnInit, ViewEncapsulation, forwardRef } from '@angular/core';
1+
import {
2+
Component, OnInit, ViewEncapsulation, forwardRef,
3+
Input } from '@angular/core';
24
import { InputCoreComponent } from '../../shared/entities/input-core-component';
35
import { NG_VALUE_ACCESSOR } from '@angular/forms';
46

@@ -16,6 +18,8 @@ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
1618
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
1719
})
1820
export class InputComponent extends InputCoreComponent implements OnInit {
21+
@Input() type: string = 'text';
22+
1923
constructor() {
2024
super();
2125
}

‎projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{controlLabel}}
77
</label>
88

9-
<div class="entered-items">
9+
<div class="entered-items" *ngIf="enteredItems.size > 0">
1010
<div class="inner display-flex wrap">
1111
<div class="entered-item"
1212
*ngFor="let enteredValue of enteredItems; index as tagIndex">
@@ -18,12 +18,13 @@
1818
</div>
1919
</div>
2020

21-
<input type="text"
21+
<input #tagsInput
22+
type="text"
2223
id="{{controlId}}"
2324
name="{{name}}"
2425
[disabled]="disabled"
26+
(keyup)="onUserInput($event)"
2527
placeholder="{{controlPlaceholder}}"
26-
[(ngModel)]="newTagName"
27-
(keyup)="onUserInput($event)">
28+
[(ngModel)]="newTagName">
2829
</div>
2930
</div>

‎projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,17 @@
1515
}
1616
}
1717
}
18+
19+
@media (max-width: 450px) {
20+
.sq .tags-input-wrapper {
21+
.input-field input, .entered-items {
22+
margin-top: 10px;
23+
}
24+
25+
.input-field .entered-items {
26+
display: block;
27+
width: 100%;
28+
}
29+
}
30+
}
31+

0 commit comments

Comments
 (0)