Skip to content

Commit

Permalink
v0.0.3
Browse files Browse the repository at this point in the history
  • Loading branch information
@ovatlh
ovatlh authored Jan 20, 2024
1 parent 5834ce6 commit d071310
Show file tree
Hide file tree
Showing 7 changed files with 978 additions and 3 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# tselect

<a href="https://ovatlh.github.io/tselect/dist/v0.0.2/" target="_blank">https://ovatlh.github.io/tselect/dist/v0.0.2/</a>
<a href="https://ovatlh.github.io/tselect/dist/v0.0.3/" target="_blank">https://ovatlh.github.io/tselect/dist/v0.0.3/</a>
32 changes: 32 additions & 0 deletions dist/v0.0.3/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
* {
/* outline: 1px solid rgba(255, 0, 0, 0.1); */
}

body {
background-color: whitesmoke;
color: black;
display: grid;
grid-template-columns: 1fr;
gap: 2em;
padding: 2em;
min-height: 300vh;
align-content: start;
}

form {
display: grid;
grid-template-columns: 1fr;
gap: 2em;
padding: 2em;
}

p {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
}

.t-select-container .t-select-option-list {
max-height: 15em;
}
211 changes: 211 additions & 0 deletions dist/v0.0.3/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tSelect</title>

<link rel="stylesheet" href="tselect.css">
<link rel="stylesheet" href="index.css">

<script src="tselect.js" defer></script>
<script src="index.js" defer></script>
</head>

<body>
<form onsubmit="event.preventDefault();">
<select name="select-single" id="select-single" value="2">
<option value="1">Option - 01</option>
<option value="2">Option - 02</option>
<option value="3">Option - 03</option>
<option value="4">Option - 04</option>
<option value="5">Option - 05</option>
</select>

<select name="select-multiple" id="select-multiple" multiple value="3">
<option value="1">Option - 01</option>
<option value="2">Option - 02</option>
<option value="3">Option - 03</option>
<option value="4">Option - 04</option>
<option value="5">Option - 05</option>
</select>

<select class="t-select class-ex-01 class-ex-02" id="t-select-single" name="t-select-single"></select>

<select class="t-select class-ex-01 class-ex-02" id="t-select-multiple" name="t-select-multiple" multiple></select>

<div class="t-select-container" id="example01_t-select">
<button class="btn-t-select" type="button">
<p>Single</p>
</button>

<div class="t-select-option-list">
<input type="search" id="example01_single-search" placeholder="Buscar: Single">

<label for="example01_single-option-1">
<input type="radio" name="single-value" id="example01_single-option-1">
<div class="t-select-option-content">
<p>Option - 01 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima praesentium optio tempore harum nulla amet, nam ipsam consequuntur, unde ex corporis enim dignissimos earum! Excepturi, cupiditate. Sunt nostrum quaerat tempora.</p>
</div>
</label>

<label for="example01_single-option-2">
<input type="radio" name="single-value" id="example01_single-option-2">
<div class="t-select-option-content">
<p>Option - 02</p>
</div>
</label>

<label for="example01_single-option-3">
<input type="radio" name="single-value" id="example01_single-option-3">
<div class="t-select-option-content">
<p>Option - 03</p>
</div>
</label>

<label for="example01_single-option-4">
<input type="radio" name="single-value" id="example01_single-option-4">
<div class="t-select-option-content">
<p>Option - 04</p>
</div>
</label>

<label for="example01_single-option-5">
<input type="radio" name="single-value" id="example01_single-option-5">
<div class="t-select-option-content">
<p>Option - 05</p>
</div>
</label>

<label for="example01_single-option-6">
<input type="radio" name="single-value" id="example01_single-option-6">
<div class="t-select-option-content">
<p>Option - 06</p>
</div>
</label>

<label for="example01_single-option-7">
<input type="radio" name="single-value" id="example01_single-option-7">
<div class="t-select-option-content">
<p>Option - 07</p>
</div>
</label>

<label for="example01_single-option-8">
<input type="radio" name="single-value" id="example01_single-option-8">
<div class="t-select-option-content">
<p>Option - 08</p>
</div>
</label>

<label for="example01_single-option-9">
<input type="radio" name="single-value" id="example01_single-option-9">
<div class="t-select-option-content">
<p>Option - 09</p>
</div>
</label>

<label for="example01_single-option-10">
<input type="radio" name="single-value" id="example01_single-option-10">
<div class="t-select-option-content">
<p>Option - 10</p>
</div>
</label>
</div>
</div>

<div class="t-select-container" id="example02_t-select">
<button class="btn-t-select" type="button">
<p>Multiple</p>
</button>

<div class="t-select-option-list">
<input type="search" id="example01_single-search" placeholder="Buscar: Multiple">

<label for="example02_multiple-option-1">
<input type="checkbox" name="multiple-value" id="example02_multiple-option-1">
<div class="t-select-option-content">
<p>Option - 01 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad totam soluta modi. Similique cum suscipit officiis deleniti fuga recusandae officia ipsa velit, perferendis assumenda quia. Eaque voluptate ipsum laudantium voluptatibus!</p>
</div>
</label>

<label for="example02_multiple-option-2">
<input type="checkbox" name="multiple-value" id="example02_multiple-option-2">
<div class="t-select-option-content">
<p>Option - 02</p>
</div>
</label>

<label for="example02_multiple-option-3">
<input type="checkbox" name="multiple-value" id="example02_multiple-option-3">
<div class="t-select-option-content">
<p>Option - 03</p>
</div>
</label>

<label for="example02_multiple-option-4">
<input type="checkbox" name="multiple-value" id="example02_multiple-option-4">
<div class="t-select-option-content">
<p>Option - 04</p>
</div>
</label>

<label for="example02_multiple-option-5">
<input type="checkbox" name="multiple-value" id="example02_multiple-option-5">
<div class="t-select-option-content">
<p>Option - 05</p>
</div>
</label>

<label for="example02_multiple-option-6">
<input type="checkbox" name="multiple-value" id="example02_multiple-option-6">
<div class="t-select-option-content">
<p>Option - 06</p>
</div>
</label>

<label for="example02_multiple-option-7">
<input type="checkbox" name="multiple-value" id="example02_multiple-option-7">
<div class="t-select-option-content">
<p>Option - 07</p>
</div>
</label>

<label for="example02_multiple-option-8">
<input type="checkbox" name="multiple-value" id="example02_multiple-option-8">
<div class="t-select-option-content">
<p>Option - 08</p>
</div>
</label>

<label for="example02_multiple-option-9">
<input type="checkbox" name="multiple-value" id="example02_multiple-option-9">
<div class="t-select-option-content">
<p>Option - 09</p>
</div>
</label>

<label for="example02_multiple-option-10">
<input type="checkbox" name="multiple-value" id="example02_multiple-option-10">
<div class="t-select-option-content">
<p>Option - 10</p>
</div>
</label>
</div>
</div>

<select class="class-ex-03 class-ex-04" id="example03" name="example03"></select>

<select class="class-ex-03 class-ex-04" id="example04" name="example04" multiple></select>

<select class="class-ex-03 class-ex-04" id="example05" name="example05" required></select>

<select class="class-ex-03 class-ex-04" id="example06" name="example06" multiple required></select>
<button type="submit">
Enviar
</button>
</form>
</body>

</html>
91 changes: 91 additions & 0 deletions dist/v0.0.3/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
const temp_optionList = [
{
value: 1,
// text: "Opcion - 01 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima praesentium optio tempore harum nulla amet, nam ipsam consequuntur, unde ex corporis enim dignissimos earum! Excepturi, cupiditate. Sunt nostrum quaerat tempora.",
text: "Opcion - 01",
},
{
value: 2,
text: "Opcion - 02",
},
{
value: 3,
text: "Opcion - 03",
},
{
value: 4,
text: "Opcion - 04",
},
{
value: 5,
text: "Opcion - 05",
},
{
value: 6,
text: "Opcion - 06",
},
{
value: 7,
text: "Opcion - 07",
},
{
value: 8,
text: "Opcion - 08",
},
{
value: 9,
text: "Opcion - 09",
},
{
value: 10,
text: "Opcion - 10",
},
];

function _value_change(id, value) {
console.log({ id, value });
}

tselect.fnInit({
id: "example03",
btnPlaceHolder: "tSelect - Simple -Example 03",
isSearchEnable: true,
searchPlaceHolder: "Buscar: example03",
optionList: temp_optionList,
// optionSelectedList: [2],
fnOnValueChange: _value_change,
});
tselect.fnInit({
id: "example04",
btnPlaceHolder: "tSelect - Multiple -Example 04",
isSearchEnable: true,
searchPlaceHolder: "Buscar: example04",
optionList: temp_optionList,
// optionSelectedList: [2],
fnOnValueChange: _value_change,
});

tselect.fnInit({
id: "example05",
btnPlaceHolder: "tSelect - Simple -Example 05",
isSearchEnable: true,
searchPlaceHolder: "Buscar: example05",
optionList: temp_optionList,
isToggleAllEnable: true,
selectAllPlaceHolder: "Todos",
deselectAllPlaceHolder: "Nada",
// optionSelectedList: [2],
fnOnValueChange: _value_change,
});
tselect.fnInit({
id: "example06",
btnPlaceHolder: "tSelect - Multiple -Example 06",
isSearchEnable: true,
searchPlaceHolder: "Buscar: example06",
optionList: temp_optionList,
isToggleAllEnable: true,
selectAllPlaceHolder: "Todos",
deselectAllPlaceHolder: "Nada",
// optionSelectedList: [2],
fnOnValueChange: _value_change,
});
Loading

0 comments on commit d071310

Please sign in to comment.