Skip to content

Expose internal paddings #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
murilobd wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Expose internal paddings #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dd583f8
expose defaultPadding and zeroLevelItemPadding
murilobd Feb 16, 2024
a8d7821
add example of noGroup and zeroLevelItemPadding
murilobd Feb 16, 2024
0a8c8fe
updated readme.md with new exposed props
murilobd Feb 16, 2024
e3868ba
fixed padding for groups
murilobd Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,8 @@ Name | Type (default) | Description
**direction** | String (auto) | A force direction for the list. Supported values: `auto`, `top`, `bottom`.
**expandSelected** | Boolean (false) | All groups which have checked values will be expanded on the init.
**saveScrollPosition** | Boolean (true) | The list saves the last scroll position before close. If you open the list your scroll will be on the previous position. If you set the value to `false` - the scroll will have position 0 and the first item will be focused every time.
**defaultPadding** | Number (20) | Default padding-left for items in groups (each level add this value as padding-left)
**zeroLevelItemPadding** | Number (5) | Default padding-left for main item in group or single items

#### Input settings props
Name | Type (default) | Description
Expand Down
2 changes: 2 additions & 0 deletions app/examples/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { runDisabledExample } from './disabled'
import { runSingleSelectExample } from './singleSelect'
import { runIndependentNodesExample } from './independentNodes'
import { runIconsExample } from './icons'
import { runNoGroupsExample } from './noGroups'

export const runApp = (Treeselect) => {
runDefaultExample(Treeselect)
Expand All @@ -12,4 +13,5 @@ export const runApp = (Treeselect) => {
runSingleSelectExample(Treeselect)
runIndependentNodesExample(Treeselect)
runIconsExample(Treeselect)
runNoGroupsExample(Treeselect)
}
52 changes: 52 additions & 0 deletions app/examples/noGroups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
const options = [
{
name: 'England',
value: 1,
},
{
name: 'London',
value: 2,
},
{
name: 'Chelsea',
value: 3
},
{
name: 'West End',
value: 4
},
{
name: 'Brighton',
value: 5
},
{
name: 'France',
value: 6
},
{
name: 'Paris',
value: 7
},
{
name: 'Lyon',
value: 8
},
]

const className = '.treeselect-demo-no-groups'

export const runNoGroupsExample = (Treeselect) => {
const domElement = document.querySelector(className)
const treeselect = new Treeselect({
parentHtmlContainer: domElement,
value: 4,
options: options,
isSingleSelect: true,
showTags: false,
zeroLevelItemPadding: 20
})

treeselect.srcElement.addEventListener('input', (e) => {
console.log('singleSelect: Selected value ', e.detail)
})
}
194 changes: 124 additions & 70 deletions app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="../public/tree.png" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./app.css" />
<script type="module" src="./app.js"></script>
<title>Treeselect JS App</title>
<base href="." />
</head>
<body>
<main class="root">
<h1 class="root__title">Treeselect JS Demo</h1>
<!-- Default section -->
<section class="section">
<p class="section__title">Treeselect with default props</p>
<div class="section__data">
<div class="section__select treeselect-demo-default"></div>
<pre class="section__props">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="../public/tree.png" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./app.css" />
<script type="module" src="./app.js"></script>
<title>Treeselect JS App</title>
<base href="." />
</head>

<body>
<main class="root">
<h1 class="root__title">Treeselect JS Demo</h1>
<!-- Default section -->
<section class="section">
<p class="section__title">Treeselect with default props</p>
<div class="section__data">
<div class="section__select treeselect-demo-default"></div>
<pre class="section__props">
<code data-language="javascript">
<b>parentHtmlContainer:</b> document.querySelector(className),
<b>value:</b> [4, 7, 8],
Expand Down Expand Up @@ -70,16 +72,16 @@ <h1 class="root__title">Treeselect JS Demo</h1>
]
</code>
</pre>
</div>
</section>
</div>
</section>

<hr />
<!-- Slot section -->
<section class="section">
<p class="section__title">Treeselect with slot</p>
<div class="section__data">
<div class="section__select treeselect-demo-slot"></div>
<pre class="section__props">
<hr />
<!-- Slot section -->
<section class="section">
<p class="section__title">Treeselect with slot</p>
<div class="section__data">
<div class="section__select treeselect-demo-slot"></div>
<pre class="section__props">
<code data-language="javascript">
const slot = document.createElement('div')
slot.innerHTML = '&lt;a href=""&gt;Click!&lt;/a&gt;'
Expand Down Expand Up @@ -118,16 +120,16 @@ <h1 class="root__title">Treeselect JS Demo</h1>
]
</code>
</pre>
</div>
</section>
</div>
</section>

<hr />
<!-- Disabled section -->
<section class="section">
<p class="section__title">Treeselect with disabled</p>
<div class="section__data">
<div class="section__select treeselect-demo-disabled"></div>
<pre class="section__props">
<hr />
<!-- Disabled section -->
<section class="section">
<p class="section__title">Treeselect with disabled</p>
<div class="section__data">
<div class="section__select treeselect-demo-disabled"></div>
<pre class="section__props">
<code data-language="javascript">
<b>parentHtmlContainer:</b> document.querySelector(className),
<b>value:</b> [],
Expand Down Expand Up @@ -180,16 +182,16 @@ <h1 class="root__title">Treeselect JS Demo</h1>
]
</code>
</pre>
</div>
</section>
</div>
</section>

<hr />
<!-- Single select section -->
<section class="section">
<p class="section__title">Treeselect with single select prop</p>
<div class="section__data">
<div class="section__select treeselect-demo-single-select"></div>
<pre class="section__props">
<hr />
<!-- Single select section -->
<section class="section">
<p class="section__title">Treeselect with single select prop</p>
<div class="section__data">
<div class="section__select treeselect-demo-single-select"></div>
<pre class="section__props">
<code data-language="javascript">
<b>parentHtmlContainer:</b> document.querySelector(className),
<b>value:</b> 4,
Expand Down Expand Up @@ -242,16 +244,67 @@ <h1 class="root__title">Treeselect JS Demo</h1>
]
</code>
</pre>
</div>
</section>
</div>
</section>

<hr />
<!-- Independent Nodes section -->
<section class="section">
<p class="section__title">Treeselect with independent nodes prop</p>
<div class="section__data">
<div class="section__select treeselect-demo-independent-nodes"></div>
<pre class="section__props">
<hr />
<!-- No Groups section -->
<section class="section">
<p class="section__title">Treeselect with no groups</p>
<div class="section__data">
<div class="section__select treeselect-demo-no-groups"></div>
<pre class="section__props">
<code data-language="javascript">
<b>parentHtmlContainer:</b> document.querySelector(className),
<b>value:</b> 4,
<b>isSingleSelect:</b> true,
<b>showTags:</b> false,
<b>options:</b> [
{
name: 'England',
value: 1,
},
{
name: 'London',
value: 2,
},
{
name: 'Chelsea',
value: 3
},
{
name: 'West End',
value: 4
},
{
name: 'Brighton',
value: 5
},
{
name: 'France',
value: 6
},
{
name: 'Paris',
value: 7
},
{
name: 'Lyon',
value: 8
},
]
</code>
</pre>
</div>
</section>

<hr />
<!-- Independent Nodes section -->
<section class="section">
<p class="section__title">Treeselect with independent nodes prop</p>
<div class="section__data">
<div class="section__select treeselect-demo-independent-nodes"></div>
<pre class="section__props">
<code data-language="javascript">
<b>parentHtmlContainer:</b> document.querySelector(className),
<b>value:</b> [1, 4, 7, 8],
Expand Down Expand Up @@ -303,16 +356,16 @@ <h1 class="root__title">Treeselect JS Demo</h1>
]
</code>
</pre>
</div>
</section>
</div>
</section>

<hr />
<!-- Example with icons (workaround) -->
<section class="section" style="max-width: 1980px; margin: 0 auto">
<p class="section__title">Treeselect example with icons for appendToBody: false (workaround approach)</p>
<div class="section__data" style="flex-wrap: wrap">
<div class="section__select treeselect-demo-icons"></div>
<pre class="section__props" style="width: 100%; max-width: 100%">
<hr />
<!-- Example with icons (workaround) -->
<section class="section" style="max-width: 1980px; margin: 0 auto">
<p class="section__title">Treeselect example with icons for appendToBody: false (workaround approach)</p>
<div class="section__data" style="flex-wrap: wrap">
<div class="section__select treeselect-demo-icons"></div>
<pre class="section__props" style="width: 100%; max-width: 100%">
<code data-language="javascript">
const icons = {
check: 'ico-check',
Expand Down Expand Up @@ -424,8 +477,9 @@ <h1 class="root__title">Treeselect JS Demo</h1>
}
</code>
</pre>
</div>
</section>
</main>
</body>
</html>
</div>
</section>
</main>
</body>

</html>
Loading