Skip to content

Commit a7d0f0d

Browse files
oltonolton
committed
fixed options list in input
1 parent ce3a311 commit a7d0f0d

12 files changed

Lines changed: 747 additions & 744 deletions

File tree

‎examples/input.html‎

Lines changed: 14 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -11,75 +11,25 @@
1111
<link href="../lib/metro.css" rel="stylesheet">
1212

1313
<title>Test Input - Metro UI :: Popular HTML, CSS and JS library</title>
14-
<style>
15-
.example {
16-
width: 300px;
17-
margin: 10px;
18-
}
19-
</style>
2014
</head>
21-
<body class="cloak">
22-
<nav data-role="appbar">
23-
<span class="app-bar-item">Inputs</span>
24-
<div class="app-bar-item no-hover">
25-
<input type="checkbox" data-role="theme-switcher" data-state="light"/>
15+
<body class="cloak h-100-vh">
16+
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
17+
<div class="app-bar-item-static no-hover">
18+
<div class="text-leader">Component Name</div>
19+
</div>
20+
<div class="app-bar-item-static no-hover">
21+
<input type="checkbox" data-role="theme-switcher"/>
2622
</div>
2723
</nav>
28-
<div class="container">
29-
<h1>Input test page</h1>
30-
<div class="row">
31-
<!-- <div class="example">-->
32-
<!-- <input type="text" placeholder="Enter your name" />-->
33-
<!-- </div>-->
34-
35-
<!-- <div class="example">-->
36-
<!-- <input type="text" placeholder="Enter your name" class="metro-input" >-->
37-
<!-- </div>-->
38-
39-
<div class="example">
40-
<input type="text" placeholder="Enter text..." data-role="input" data-label="Generate Password" data-random-button="true"/>
41-
</div>
42-
43-
<div class="example">
44-
<input id="testOptions" type="text" placeholder="Enter text..." data-role="input" data-label="Prepend and Append Options" data-prepend-options="http://,https://" data-append-options=".com,.net,.org,.org.ua"/>
45-
<div class="mt-10">
46-
<button onclick="alert(Metro.getPlugin('#testOptions', 'input').val())">Get val</button>
47-
<button onclick="Metro.getPlugin('#testOptions', 'input').val('https://;metroui;.org.ua')">Set val</button>
48-
</div>
49-
</div>
50-
51-
<!-- <div class="example">-->
52-
<!-- <input type="text" placeholder="Input small" data-role="input" class="input-small" data-prepend="Prepend:" data-append=".append">-->
53-
<!-- </div>-->
54-
<!-- <div class="example">-->
55-
<!-- <input type="text" placeholder="Input normal" data-role="input" data-prepend="Prepend:" data-append=".append" data-clear-button="false">-->
56-
<!-- </div>-->
57-
<!-- <div class="example">-->
58-
<!-- <input type="text" placeholder="Input large" data-role="input" class="input-large" data-prepend="Prepend:" data-append=".append">-->
59-
<!-- </div>-->
60-
61-
<!-- <div class="example">-->
62-
<!-- <input type="password" placeholder="Enter password" data-role="input">-->
63-
<!-- </div>-->
6424

65-
<!-- <div class="example">-->
66-
<!-- <input type="text" placeholder="Enter search" data-role="input" data-search-button="true">-->
67-
<!-- </div>-->
68-
69-
<!-- <div class="example">-->
70-
<!-- <input type="text" placeholder="Enter search" data-role="input" data-prepend="Prepend:">-->
71-
<!-- </div>-->
72-
73-
<!-- <div class="example">-->
74-
<!-- <input type="text" placeholder="Enter search" data-role="input" class="pill-input input-small" data-prepend="Prepend:" data-append=".append">-->
75-
<!-- <input type="text" placeholder="Enter search" data-role="input" class="pill-input" data-prepend="Prepend:" data-append=".append">-->
76-
<!-- <input type="text" placeholder="Enter search" data-role="input" class="pill-input input-large" data-prepend="Prepend:" data-append=".append" data-cls-prepend="text-upper">-->
77-
<!-- </div>-->
78-
79-
<!-- <div class="example">-->
80-
<!--&lt;!&ndash; <input type="text" placeholder="Enter search" data-role="input" data-autocomplete-url="https://metroui.org.ua/data/autocomplete.txt">&ndash;&gt;-->
81-
<!-- </div>-->
25+
<div class="container h-100 d-flex flex-column flex-center">
26+
<div class="example">
27+
<input type="text" data-role="input">
28+
</div>
8229

30+
<div class="example mt-4">
31+
<input type="text" data-role="input" data-prepend-options="http://,https://">
32+
<input type="text" data-role="input" data-append-options="http://,https://">
8333
</div>
8434
</div>
8535

‎lib/metro.all.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49408,17 +49408,21 @@ input.pill-input .button {
4940849408
.input .append-options [aria-hidden=true] {
4940949409
position: absolute;
4941049410
right: 2px;
49411-
top: 50%;
49411+
top: calc(var(--input-height) / 2 - 5px);
4941249412
margin-top: -0.5rem;
4941349413
}
49414+
.input .prepend-options .dropdown-caret,
49415+
.input .append-options .dropdown-caret {
49416+
margin-left: 2rem;
49417+
}
4941449418
.input .prepend-options .options-list,
4941549419
.input .append-options .options-list {
4941649420
border: none;
4941749421
border-right: 1px solid var(--input-border-color);
4941849422
height: 100%;
4941949423
border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
4942049424
font-size: var(--input-font-size);
49421-
padding-right: 1rem;
49425+
padding-right: 30px;
4942249426
}
4942349427
.input .append-options .options-list {
4942449428
border-right: none;

‎lib/metro.all.css.map‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/metro.all.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13959,7 +13959,11 @@
1395913959
const hours = Math.floor(sec_num / 3600);
1396013960
const minutes = Math.floor((sec_num - hours * 3600) / 60);
1396113961
const seconds = sec_num - hours * 3600 - minutes * 60;
13962-
return [Str.lpad(hours, "0", 2), Str.lpad(minutes, "0", 2), Str.lpad(seconds, "0", 2)].join(":");
13962+
return [
13963+
Str.lpad(hours, "0", 2),
13964+
Str.lpad(minutes, "0", 2),
13965+
Str.lpad(seconds, "0", 2)
13966+
].join(":");
1396313967
},
1396413968
func: (f5) => new Function("a", f5),
1396513969
exec: function(f5, args, context) {
@@ -13992,7 +13996,9 @@
1399213996
const el = $6(element2)[0];
1399313997
return this.getStyleOne(el, "display") !== "none" && this.getStyleOne(el, "visibility") !== "hidden" && el.offsetParent !== null;
1399413998
},
13995-
isUrl: (val) => /^(\.\/|\.\.\/|ftp|http|https):\/\/(\w+:?\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@\-\/]))?/.test(val),
13999+
isUrl: (val) => /^(\.\/|\.\.\/|ftp|http|https):\/\/(\w+:?\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@\-\/]))?/.test(
14000+
val
14001+
),
1399614002
isTag: (val) => /^<\/?[\w\s="\/.':;#-\/?]+>/gi.test(val),
1399714003
isEmbedObject: (val) => {
1399814004
const embed = ["iframe", "object", "embed", "video"];
@@ -14199,7 +14205,10 @@
1419914205
);
1420014206
},
1420114207
cleanPreCode: (selector) => {
14202-
const els = Array.prototype.slice.call(document.querySelectorAll(selector), 0);
14208+
const els = Array.prototype.slice.call(
14209+
document.querySelectorAll(selector),
14210+
0
14211+
);
1420314212
for (const el of els) {
1420414213
const txt = el.textContent.replace(/^[\r\n]+/, "").replace(/\s+$/g, "");
1420514214
if (/^\S/gm.test(txt)) {
@@ -22638,7 +22647,7 @@
2263822647
}
2263922648
if (this.onclick)
2264022649
btn.on("click", () => {
22641-
this.onclick.apply(btn, [btn[0], element2[0]]);
22650+
Metro2.utils.exec(this.onclick, [btn[0], element2[0]]);
2264222651
});
2264322652
btn.appendTo(buttons);
2264422653
});

‎lib/metro.all.js.map‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/metro.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49408,17 +49408,21 @@ input.pill-input .button {
4940849408
.input .append-options [aria-hidden=true] {
4940949409
position: absolute;
4941049410
right: 2px;
49411-
top: 50%;
49411+
top: calc(var(--input-height) / 2 - 5px);
4941249412
margin-top: -0.5rem;
4941349413
}
49414+
.input .prepend-options .dropdown-caret,
49415+
.input .append-options .dropdown-caret {
49416+
margin-left: 2rem;
49417+
}
4941449418
.input .prepend-options .options-list,
4941549419
.input .append-options .options-list {
4941649420
border: none;
4941749421
border-right: 1px solid var(--input-border-color);
4941849422
height: 100%;
4941949423
border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
4942049424
font-size: var(--input-font-size);
49421-
padding-right: 1rem;
49425+
padding-right: 30px;
4942249426
}
4942349427
.input .append-options .options-list {
4942449428
border-right: none;

‎lib/metro.css.map‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/metro.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13959,7 +13959,11 @@
1395913959
const hours = Math.floor(sec_num / 3600);
1396013960
const minutes = Math.floor((sec_num - hours * 3600) / 60);
1396113961
const seconds = sec_num - hours * 3600 - minutes * 60;
13962-
return [Str.lpad(hours, "0", 2), Str.lpad(minutes, "0", 2), Str.lpad(seconds, "0", 2)].join(":");
13962+
return [
13963+
Str.lpad(hours, "0", 2),
13964+
Str.lpad(minutes, "0", 2),
13965+
Str.lpad(seconds, "0", 2)
13966+
].join(":");
1396313967
},
1396413968
func: (f5) => new Function("a", f5),
1396513969
exec: function(f5, args, context) {
@@ -13992,7 +13996,9 @@
1399213996
const el = $6(element2)[0];
1399313997
return this.getStyleOne(el, "display") !== "none" && this.getStyleOne(el, "visibility") !== "hidden" && el.offsetParent !== null;
1399413998
},
13995-
isUrl: (val) => /^(\.\/|\.\.\/|ftp|http|https):\/\/(\w+:?\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@\-\/]))?/.test(val),
13999+
isUrl: (val) => /^(\.\/|\.\.\/|ftp|http|https):\/\/(\w+:?\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@\-\/]))?/.test(
14000+
val
14001+
),
1399614002
isTag: (val) => /^<\/?[\w\s="\/.':;#-\/?]+>/gi.test(val),
1399714003
isEmbedObject: (val) => {
1399814004
const embed = ["iframe", "object", "embed", "video"];
@@ -14199,7 +14205,10 @@
1419914205
);
1420014206
},
1420114207
cleanPreCode: (selector) => {
14202-
const els = Array.prototype.slice.call(document.querySelectorAll(selector), 0);
14208+
const els = Array.prototype.slice.call(
14209+
document.querySelectorAll(selector),
14210+
0
14211+
);
1420314212
for (const el of els) {
1420414213
const txt = el.textContent.replace(/^[\r\n]+/, "").replace(/\s+$/g, "");
1420514214
if (/^\S/gm.test(txt)) {
@@ -22638,7 +22647,7 @@
2263822647
}
2263922648
if (this.onclick)
2264022649
btn.on("click", () => {
22641-
this.onclick.apply(btn, [btn[0], element2[0]]);
22650+
Metro2.utils.exec(this.onclick, [btn[0], element2[0]]);
2264222651
});
2264322652
btn.appendTo(buttons);
2264422653
});

‎lib/metro.js.map‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)