@spectrum-web-components/grid 0.1.4 → 0.1.6-react.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +121 -33
  2. package/custom-elements.json +5 -5
  3. package/package.json +4 -4
package/README.md CHANGED
@@ -29,38 +29,126 @@ import { Grid } from '@spectrum-web-components/grid';
29
29
 
30
30
  ## Example
31
31
 
32
- ```ts
33
- const items = generateItems(1000);
34
-
35
- const renderItem = (
36
- item: Item,
37
- index: number,
38
- selected: boolean
39
- ): TemplateResult => {
40
- return html`
41
- <sp-card
42
- toggles
43
- variant="quiet"
44
- heading="Card Heading ${item.id}"
45
- subheading="JPG Photo"
46
- style="contain: strict; padding: 1px;"
47
- value="card-${item.id}"
48
- .selected=${selected}
49
- key=${index}
50
- >
51
- <img
52
- alt=""
53
- slot="preview"
54
- src="https://picsum.photos/id/${item.id}/200/300"
55
- decoding="async"
56
- />
57
- <div slot="description">10/15/18</div>
58
- <div slot="footer">Footer</div>
59
- </sp-card>
60
- `;
61
- };
62
-
63
- // ...
32
+ ```html-live
33
+ <sp-grid
34
+ id="grid-demo"
35
+ style="
36
+ margin:
37
+ calc(-1 * var(--spectrum-global-dimension-size-400))
38
+ calc(-1 * var(--spectrum-global-dimension-size-500))
39
+ "
40
+ ></sp-grid>
41
+ <script type="module">
42
+ const initItems = (count) => {
43
+ const total = count;
44
+ const items = [];
45
+ while (count) {
46
+ count--;
47
+ items.push({
48
+ name: String(total - count),
49
+ date: count,
50
+ });
51
+ }
52
+ return items;
53
+ };
54
+ const initGrid = () => {
55
+ const grid = document.querySelector('#grid-demo');
56
+ grid.items = initItems(100);
57
+ grid.focusableSelector = 'sp-card';
58
+ grid.gap = '10px';
59
+ grid.itemSize = {
60
+ width: 200,
61
+ height: 300,
62
+ };
63
+
64
+ grid.renderItem = (
65
+ item,
66
+ index,
67
+ selected
68
+ ) => {
69
+ const card = document.createElement('sp-card');
70
+ const img = document.createElement('img');
71
+ const description = document.createElement('div');
72
+ const footer = document.createElement('div');
73
+ card.toggles = true;
74
+ card.variant = 'quiet';
75
+ card.heading = `Card Heading ${index}`
76
+ card.subheading = 'JPG Photo'
77
+ card.style = 'contain: strict; padding: 1px;'
78
+ card.value = `card-${index}`
79
+ card.selected = selected;
80
+ card.key = index;
81
+ img.alt = '';
82
+ img.slot = 'preview';
83
+ img.src = `https://picsum.photos/id/${index}/200/300`;
84
+ img.decoding = 'async';
85
+ description.slot = 'description';
86
+ description.textContent = '10/15/18';
87
+ footer.slot = 'footer';
88
+ footer.textContent = 'Footer';
89
+ card.append(img, description, footer);
90
+ return card;
91
+ }
92
+ };
93
+ customElements.whenDefined('sp-grid').then(() => {
94
+ initGrid();
95
+ });
96
+ </script>
64
97
  ```
65
98
 
66
-
99
+ <script type="module">
100
+ const initItems = (count) => {
101
+ const total = count;
102
+ const items = [];
103
+ while (count) {
104
+ count--;
105
+ items.push({
106
+ name: String(total - count),
107
+ date: count,
108
+ });
109
+ }
110
+ return items;
111
+ };
112
+ const initGrid = () => {
113
+ const grid = document.querySelector('#grid-demo');
114
+ grid.items = initItems(100);
115
+ grid.focusableSelector = 'sp-card';
116
+ grid.gap = '10px';
117
+ grid.itemSize = {
118
+ width: 200,
119
+ height: 300,
120
+ };
121
+
122
+ grid.renderItem = (
123
+ item,
124
+ index,
125
+ selected
126
+ ) => {
127
+ const card = document.createElement('sp-card');
128
+ const img = document.createElement('img');
129
+ const description = document.createElement('div');
130
+ const footer = document.createElement('div');
131
+ card.toggles = true;
132
+ card.variant = 'quiet';
133
+ card.heading = `Card Heading ${index}`
134
+ card.subheading = 'JPG Photo'
135
+ card.style = 'contain: strict; padding: 1px;'
136
+ card.value = `card-${index}`
137
+ card.selected = selected;
138
+ card.key = index;
139
+ img.alt = '';
140
+ img.slot = 'preview';
141
+ img.src = `https://picsum.photos/id/${index}/200/300`;
142
+ img.decoding = 'async';
143
+ description.slot = 'description';
144
+ description.textContent = '10/15/18';
145
+ footer.slot = 'footer';
146
+ footer.textContent = 'Footer';
147
+ card.append(img, description, footer);
148
+ return card;
149
+ }
150
+ };
151
+ customElements.whenDefined('sp-grid').then(() => {
152
+ initGrid();
153
+ });
154
+ </script>
package/custom-elements.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "sp-grid.js",
7
+ "path": "sp-grid.ts",
8
8
  "declarations": [],
9
9
  "exports": [
10
10
  {
@@ -19,7 +19,7 @@
19
19
  },
20
20
  {
21
21
  "kind": "javascript-module",
22
- "path": "src/Grid.js",
22
+ "path": "src/Grid.ts",
23
23
  "declarations": [
24
24
  {
25
25
  "kind": "class",
@@ -193,14 +193,14 @@
193
193
  "name": "Grid",
194
194
  "declaration": {
195
195
  "name": "Grid",
196
- "module": "src/Grid.js"
196
+ "module": "src/Grid.ts"
197
197
  }
198
198
  }
199
199
  ]
200
200
  },
201
201
  {
202
202
  "kind": "javascript-module",
203
- "path": "src/GridController.js",
203
+ "path": "src/GridController.ts",
204
204
  "declarations": [
205
205
  {
206
206
  "kind": "class",
@@ -416,7 +416,7 @@
416
416
  "name": "GridController",
417
417
  "declaration": {
418
418
  "name": "GridController",
419
- "module": "src/GridController.js"
419
+ "module": "src/GridController.ts"
420
420
  }
421
421
  }
422
422
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/grid",
3
- "version": "0.1.4",
3
+ "version": "0.1.6-react.54+c59ca07be",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -64,8 +64,8 @@
64
64
  "dependencies": {
65
65
  "@lit-labs/observers": "^1.0.1",
66
66
  "@lit-labs/virtualizer": "0.7.2",
67
- "@spectrum-web-components/base": "^0.7.1",
68
- "@spectrum-web-components/reactive-controllers": "^0.3.3"
67
+ "@spectrum-web-components/base": "^0.7.3-react.54+c59ca07be",
68
+ "@spectrum-web-components/reactive-controllers": "^0.3.5-react.54+c59ca07be"
69
69
  },
70
70
  "types": "./src/index.d.ts",
71
71
  "customElements": "custom-elements.json",
@@ -73,5 +73,5 @@
73
73
  "./sp-*.js",
74
74
  "./**/*.dev.js"
75
75
  ],
76
- "gitHead": "8bd87724e91e23df83dbf63a434bbbe10b8daaa6"
76
+ "gitHead": "c59ca07bef1633dd16241d4be7d87b037ce7ddbf"
77
77
  }