Skip to content

Commit a18a9b8

Browse files
author
Graham Butler
committed
update readme
1 parent 28070db commit a18a9b8

File tree

4 files changed

+51
-91
lines changed

4 files changed

+51
-91
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ The simplest way to use `author-select` is in combination with [author-control](
5252

5353
`npm install @author.io/element-select -S`
5454

55-
3. If using with `author-control`, install it:
55+
3. If using with [`author-control`](https://github.com/author-elements/control)
5656

5757
`npm install @author.io/element-control -S`
5858

@@ -92,11 +92,11 @@ If using without `author-control`, lay out `author-select` manually using the fo
9292
<!-- <slot name="afterbegin"></slot> -->
9393

9494
<!-- <slot name="beforeselectedoptions"></slot> -->
95-
<author-selected-options></author-selected-options>
95+
<author-selected-options slot="selectedoptions"></author-selected-options>
9696
<!-- <slot name="afterselectedoptions"></slot> -->
9797

9898
<!-- <slot name="beforeoptions"></slot> -->
99-
<author-options>
99+
<author-options slot="options">
100100
<author-option value="Option 1">Option 1</author-option>
101101
<author-option value="Option 2">Option 2</author-option>
102102
<author-option value="Option 3">Option 3</author-option>

‎showroom/src/css/main.css‎

Lines changed: 8 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
@chassis init;
22
@chassis include anchor buttons form-controls;
33

4-
.demo {
5-
& author-control .label-wrapper {
6-
background: blue;
7-
}
8-
4+
.author-select {
95
& pre {
106
@chassis apply inline-block margin-bottom padding;
117
background: var(--grey-n00);
@@ -24,6 +20,10 @@
2420
}
2521
}
2622

23+
& .theme {
24+
@chassis font-size small;
25+
}
26+
2727
& > header {
2828
padding: 1.46em 0 .90169942em;
2929
border-bottom: 4px solid var(--header-border-color);
@@ -65,64 +65,8 @@
6565
}
6666
}
6767

68-
& .example {
69-
border: 1px solid var(--grey-n04);
70-
71-
& pre {
72-
&:first-child {
73-
margin-top: 0;
74-
}
75-
76-
&:last-child {
77-
margin-bottom: 0;
78-
}
79-
}
80-
81-
& .description {
82-
@chassis apply inline-block padding-x;
83-
}
84-
85-
& .output {
86-
@chassis apply inline-block margin-top padding-x;
87-
88-
& author-control {
89-
margin-bottom: 0;
90-
}
91-
92-
&:first-child {
93-
margin-top: 0;
94-
}
95-
96-
&:last-child {
97-
margin-bottom: 0;
98-
}
99-
}
100-
101-
& .toolbar {
102-
display: flex;
103-
justify-content: flex-end;
104-
@chassis apply inline-block margin-top padding-x;
105-
106-
& button {
107-
@chassis apply inline-block margin-left;
108-
@chassis font-size small;
109-
110-
&:first-child {
111-
margin-left: 0;
112-
}
113-
}
114-
115-
&:last-child {
116-
padding-bottom: var(--inline-block-padding-y);
117-
}
118-
}
119-
120-
& > :first-child:not(pre) {
121-
padding-top: var(--inline-block-padding-x);
122-
}
123-
124-
& > :last-child:not(pre) {
125-
padding-bottom: var(--inline-block-padding-x);
126-
}
68+
&[data-theme="dark"] {
69+
background: var(--grey-n10);
70+
color: white;
12771
}
12872
}

‎showroom/src/index.html‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99
<link rel="stylesheet" href="css/main.css">
1010
<link rel="stylesheet" href="lib/prismjs/prism.css">
1111

12+
<script src="https://cdn.author.io/ngn/latest/legacy.complete.min.js"></script>
13+
<script src="https://cdn.author.io/ngnx/latest/complete.min.js"></script>
14+
1215
<script src="webcomponents/author-base.js"></script>
13-
<script src="webcomponents/author-cycle.js"></script>
1416
<script src="webcomponents/author-control.js"></script>
1517
<script src="webcomponents/author-selected-options.js"></script>
1618
<script src="webcomponents/author-options.js"></script>
@@ -20,10 +22,10 @@
2022
<script src="webcomponents/author-select.js"></script>
2123
</head>
2224

23-
<body class="demo">
25+
<body class="author-select" data-theme="dark">
2426
<header>
2527
<div class="width constraint">
26-
<h1>author-select Element Demo</h1>
28+
<h1>&lt;author-select&gt; Element Demo</h1>
2729
<aside class="links">
2830
<h2 class="hidden">Navigation</h2>
2931
<a href="https://author.io" target="_blank">author.io</a>
@@ -33,31 +35,37 @@ <h2 class="hidden">Navigation</h2>
3335

3436
<main>
3537
<div class="content">
36-
<section class="example">
37-
<div class="output">
38-
<author-control>
39-
<label>Basic Select Menu</label>
40-
<select placeholder="Select an Option">
41-
<option value="Option 1">Option 1</option>
42-
<option value="Option 2">Option 2</option>
43-
<option value="Option 3">Option 3</option>
44-
45-
<optgroup label="Grouped Options">
46-
<option value="Grouped Option 1">Grouped Option 1</option>
47-
<option value="Grouped Option 2">Grouped Option 2</option>
48-
<option value="Grouped Option 3">Grouped Option 3</option>
49-
</optgroup>
50-
</select>
51-
</author-control>
52-
</div>
53-
54-
<div class="toolbar">
55-
<button>Multiple</button>
56-
</div>
38+
<author-control class="theme">
39+
<label>Theme</label>
40+
<select placeholder="Select a Theme">
41+
<option value="1">Default</option>
42+
<option value="2">Dark</option>
43+
<option value="3">Other</option>
44+
</select>
45+
</author-control>
46+
47+
<section class="demo">
48+
<author-control class="default">
49+
<label>Basic Select Menu</label>
50+
<select placeholder="Select an Option">
51+
<option value="Option 1">Option 1</option>
52+
<option value="Option 2">Option 2</option>
53+
<option value="Option 3">Option 3</option>
54+
55+
<optgroup label="Grouped Options">
56+
<option value="Grouped Option 1">Grouped Option 1</option>
57+
<option value="Grouped Option 2">Grouped Option 2</option>
58+
<option value="Grouped Option 3">Grouped Option 3</option>
59+
</optgroup>
60+
</select>
61+
</author-control>
62+
63+
<button>Multiple</button>
5764
</section>
5865
</div>
5966
</main>
6067
</body>
6168

6269
<script src="lib/prismjs/prism.js"></script>
70+
<script src="js/index.js"></script>
6371
</html>

‎showroom/src/js/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const Demo = new NGNX.VIEW.Registry({
2+
selector: '.demo',
3+
namespace: 'demo.',
4+
5+
init () {
6+
console.log('works');
7+
}
8+
})

0 commit comments

Comments
 (0)