Skip to content

Commit 9fe7af5

Browse files
oltonolton
committed
Updated emote-dataset, emote-table components - changed property names, added custom params
1 parent c3a152e commit 9fe7af5

29 files changed

Lines changed: 2307 additions & 1752 deletions

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,5 @@
1515
- [x] Improved `split-button` component, added `place-left` class for dropdown menu
1616
- [x] Updated `table`, added padding classes `small-padding`, `medium-padding`, `large-padding`, `largest-padding`
1717
- [x] Updated icons, added tags set
18-
- [x] Improved **custom buttons** in `input`, `dialog`, `panel`, and `window` components
18+
- [x] Improved **custom buttons** in `input`, `dialog`, `panel`, and `window` components
19+
- [x] Updated `remote-dataset`, `remote-table` components - changed property names, added custom params

‎examples/hero1.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div class="hero hero1 bg-cyan fg-white">
2424
<div class="row">
2525
<div class="cell-md-6 d-flex flex-justify-center flex-column">
26-
<h1>Hero Header</h1>
26+
<h1>Hero1</h1>
2727
<div class="text-leader">
2828
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis deleniti distinctio ipsa nemo qui recusandae repellat rerum similique voluptate voluptatibus!
2929
</div>

‎examples/hero2.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div class="hero hero2 bg-cyan fg-white">
2424
<div class="row">
2525
<div class="cell-md-6 d-flex flex-justify-center flex-column">
26-
<h1>Hero Header</h1>
26+
<h1>Hero2</h1>
2727
<div class="text-leader">
2828
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis deleniti distinctio ipsa nemo qui recusandae repellat rerum similique voluptate voluptatibus!
2929
</div>

‎examples/hero3.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div class="hero hero3 bg-cyan fg-white">
2424
<div class="row">
2525
<div class="cell-md-6 d-flex flex-justify-center flex-column">
26-
<h1>Hero Header</h1>
26+
<h1>Hero3</h1>
2727
<div class="text-leader">
2828
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis deleniti distinctio ipsa nemo qui recusandae repellat rerum similique voluptate voluptatibus!
2929
</div>

‎examples/hero4.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div class="hero hero4 bg-cyan fg-white">
2424
<div class="row">
2525
<div class="cell-md-6 d-flex flex-justify-center flex-column">
26-
<h1>Hero Header</h1>
26+
<h1>Hero4</h1>
2727
<div class="text-leader">
2828
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis deleniti distinctio ipsa nemo qui recusandae repellat rerum similique voluptate voluptatibus!
2929
</div>

‎examples/hero5.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div class="hero hero5 bg-cyan fg-white">
2424
<div class="row">
2525
<div class="cell-md-6 d-flex flex-justify-center flex-column">
26-
<h1>Hero Header</h1>
26+
<h1>Hero5</h1>
2727
<div class="text-leader">
2828
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis deleniti distinctio ipsa nemo qui recusandae repellat rerum similique voluptate voluptatibus!
2929
</div>

‎examples/hero6.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<link href="../lib/metro.css" rel="stylesheet">
7+
8+
<title>Hero - Metro UI :: Popular HTML, CSS and JS library</title>
9+
10+
</head>
11+
<body class="cloak h-100-vh">
12+
13+
<div class="container">
14+
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
15+
<div class="app-bar-item-static no-hover">
16+
<div class="text-leader">Component Name</div>
17+
</div>
18+
<div class="app-bar-item-static no-hover ml-auto">
19+
<input type="checkbox" data-role="theme-switcher"/>
20+
</div>
21+
</nav>
22+
23+
<div class="hero hero6 bg-cyan fg-white">
24+
<div class="row">
25+
<div class="cell-md-8 d-flex flex-justify-center flex-column">
26+
<h1>Hero6</h1>
27+
<div class="text-leader mr-20">
28+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis deleniti distinctio ipsa nemo qui recusandae repellat rerum similique voluptate voluptatibus!
29+
</div>
30+
</div>
31+
<div class="cell-md-4 d-flex flex-center">
32+
<img src="./images/rocket.svg" alt="" class="hero-image">
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<script src="../lib/metro.js"></script>
39+
<script>
40+
</script>
41+
</body>
42+
</html>

‎examples/remote-dataset.html‎

Lines changed: 54 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88

99
<title>Test Remote Dataset - Metro UI :: Popular HTML, CSS and JS library</title>
1010
<style>
11-
body {
12-
padding-top: 60px;
13-
}
14-
1511
.product-image {
1612
height: 200px;
1713
display: flex;
@@ -75,57 +71,75 @@
7571
</div>
7672
</nav>
7773

78-
<div class="container-fluid">
74+
<div class="container-fluid pt-10">
7975
<div class="container">
80-
8176
<div data-role="remote-dataset"
82-
data-caption="Products"
83-
data-offset-key="skip"
84-
data-data-key="products"
77+
data-caption="Products:"
78+
data-key-offset="skip"
79+
data-key-data="products"
80+
data-key-limit="limit"
81+
data-key-total="total"
82+
data-key-sort="sortBy"
83+
data-key-order="order"
84+
data-key-search="q"
8585
data-url='https://dummyjson.com/products'
86-
data-search-url='https://dummyjson.com/products/search'
87-
data-search-key="q"
88-
data-template="datasetTemplate"
89-
data-cls-body="row"
90-
data-cls-item="cell-ld-6 cell-md-4"
86+
data-url-search='https://dummyjson.com/products/search'
87+
data-cls-body="row gap-4 mt-4"
9188
data-cls-pagination="mt-4 d-flex flex-justify-center"
9289
data-sort="rating:desc"
93-
data-sort-rules="price:asc:Price:<span class='mif-arrow-up'>,price:desc:Price:<span class='mif-arrow-down'>,rating:desc:By rating:<span class='mif-star-empty'>"
94-
></div>
95-
90+
data-sort-rules="price:asc:Price Asc:<span class='mif-arrow-up'>,price:desc:Price Desc:<span class='mif-arrow-down'>,rating:desc:By rating:<span class='mif-star-empty'>"
91+
data-on-draw-entry="drawEntry"
92+
data-limit="6"
93+
data-rows-steps="6, 24, 48, 96, 192"
94+
></div>
9695
</div>
9796
</div>
9897

9998
<script src="../lib/metro.js"></script>
10099
<script>
101-
function datasetTemplate(data) {
102-
return data ? `
103-
<div class="card p-4 h-100">
104-
<div class="product-image"><img src="${data.thumbnail}" alt="${data.title}"/></div>
105-
<div class="product-title">${data.title}</div>
106-
<div>
107-
<span class="product-brand bg-sand">${data.brand ? data.brand : 'Noname'}</span>
108-
${data.tags.map(sel => `<span class="mr-1 product-brand bg-light-sand">${sel}</span>`).join('')}
109-
</div>
110-
<div><span class="product-desc">${data.description}</span></div>
111-
<div class="row mt-auto">
112-
<div class="cell-4">
113-
<div class="product-price"><span class="">$${data.price}</span></div>
100+
function drawEntry(entry, index, body) {
101+
const productCard = entry ? `
102+
<div class="cell-ld-6 cell-md-4">
103+
<div class="card p-4 h-100">
104+
<div class="product-image"><img src="${entry.thumbnail}" alt="${entry.title}"/></div>
105+
<div class="product-title">${entry.title}</div>
106+
<div>
107+
<span class="product-brand bg-sand">${entry.brand ? entry.brand : 'Noname'}</span>
108+
${entry.tags.map(sel => `<span class="mr-1 product-brand bg-light-sand">${sel}</span>`).join('')}
114109
</div>
115-
<div class="cell-8">
116-
<div class="product-rating text-right">
117-
<input data-role="rating" data-static="true" data-value="${data.rating}" data-stared-color="#f2c313" data-message="(${data.rating})"/>
110+
<div><span class="product-desc">${entry.description}</span></div>
111+
<div class="row mt-auto">
112+
<div class="cell-4">
113+
<div class="product-price"><span class="">$${entry.price}</span></div>
114+
</div>
115+
<div class="cell-8">
116+
<div class="product-rating text-right">
117+
<input data-role="rating" data-static="true" data-value="${entry.rating}" data-stared-color="#f2c313" data-message="(${entry.rating})"/>
118+
</div>
118119
</div>
119120
</div>
120-
</div>
121-
<div class="d-flex flex-row gap-2 mt-4">
122-
<button class="button success"><span data-role="eval">{{ Metro.locale.label_buy}}</span> <span class="mif-add-shopping-cart icon"></span></button>
123-
124-
<button class="ml-auto button square outline fg-orange"><span class="mif-star-empty"></span></button>
125-
<button class="button info"><span data-role="eval">{{ Metro.locale.label_details}}</span></button>
126-
</div>
121+
<div class="d-flex flex-row gap-2 mt-4">
122+
<button class="button success"><span data-role="eval">{{ Metro.locale.label_buy}}</span> <span class="mif-add-shopping-cart icon"></span></button>
123+
124+
<button class="ml-auto button square outline fg-orange"><span class="mif-star-empty"></span></button>
125+
<button class="button info"><span data-role="eval">{{ Metro.locale.label_details}}</span></button>
126+
</div>
127+
</div>
127128
</div>
128129
` : ``;
130+
131+
$(body).append(productCard);
132+
}
133+
134+
function drawPriceHint(value) {
135+
return "$"+(+value).format(0, 3, " ");
136+
}
137+
138+
function addPriceFilter(min, max) {
139+
const ds = Metro.getPlugin(".remote-dataset", "remote-dataset");
140+
ds.addParam("min-price", min);
141+
ds.addParam("max-price", max);
142+
ds.load();
129143
}
130144
</script>
131145
</body>

‎examples/remote-table.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,20 +35,20 @@
3535
<h1>Remote Table Test</h1>
3636
<div data-role="remote-table"
3737
data-caption="Products"
38-
data-offset-key="skip"
39-
data-search-key="q"
40-
data-limit-key="limit"
41-
data-data-key="products"
42-
data-total-key="total"
43-
data-sort-key="sortBy"
44-
data-order-key="order"
38+
data-key-offset="skip"
39+
data-key-search="q"
40+
data-key-limit="limit"
41+
data-key-data="products"
42+
data-key-total="total"
43+
data-key-sort="sortBy"
44+
data-key-order="order"
4545
data-fields="id, title, price, discountPercentage"
4646
data-sortable-fields="id, title, price, discountPercentage"
4747
data-col-size="30,,150,150"
4848
data-captions="ID, Title, Price, Discount Price"
4949
data-sort="id"
5050
data-url='https://dummyjson.com/products'
51-
data-search-url='https://dummyjson.com/products/search'
51+
data-url-search='https://dummyjson.com/products/search'
5252
data-on-draw-cell="drawCell"
5353
data-cls-table="table-border striped row-hover responsive-sm"
5454
data-cls-pagination="mt-4 d-flex flex-justify-center"

‎examples/textarea.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ <h1>Textarea test page</h1>
3737
<textarea data-role="textarea" data-initial-height="36"></textarea>
3838
</div>
3939

40+
<div class="example mt-10 d-flex gap-4 ">
41+
<input type="text" data-role="input" class="medium w-50">
42+
<textarea data-role="textarea" class="w-50"></textarea>
43+
</div>
4044
</div>
4145

4246
<script src="../lib/metro.js"></script>

0 commit comments

Comments
 (0)