mirror of
https://github.com/tabler/tabler.git
synced 2026-10-21 07:14:30 +04:00
Update dependencies to the latest minor and patch versions (#3315)
This commit is contained in:
Paweł Kuna authored and 
GitHub committed
1 parent
9fb69302de
commit
fbf2bdb9e3
18 files changed
+1005
-924
No files matched your search
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Updated bundled `dropzone` to v6.3.5, `driver.js` to v1.10.1, `fslightbox` to v3.8.0, `fullcalendar` to v6.1.22, `hugerte` to v1.0.14 and `plyr` to v3.8.5.
|
||||
+7
-7
@@ -302,7 +302,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@melloware/coloris": "^0.25.0",
|
||||
"@types/node": "^26.4.0",
|
||||
"@types/node": "^26.6.5",
|
||||
"@vitest/browser-playwright": "4.1.11",
|
||||
"@vitest/coverage-istanbul": "4.1.11",
|
||||
"apexcharts": "7.0.0",
|
||||
@@ -310,13 +310,13 @@
|
||||
"choices.js": "^11.2.4",
|
||||
"clipboard": "^2.0.11",
|
||||
"countup.js": "^2.10.1",
|
||||
"driver.js": "^1.8.0",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"driver.js": "^1.10.1",
|
||||
"dropzone": "^6.3.5",
|
||||
"find-unused-sass-variables": "^6.2.1",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.7.6",
|
||||
"fullcalendar": "^6.1.21",
|
||||
"hugerte": "^1.0.12",
|
||||
"fslightbox": "^3.8.0",
|
||||
"fullcalendar": "^6.1.22",
|
||||
"hugerte": "^1.0.14",
|
||||
"imask": "^7.6.1",
|
||||
"jsvectormap": "^1.7.0",
|
||||
"list.js": "^2.3.1",
|
||||
@@ -324,7 +324,7 @@
|
||||
"maplibre-gl": "^6.11.2",
|
||||
"nouislider": "^15.8.1",
|
||||
"playwright": "1.62.1",
|
||||
"plyr": "^3.8.4",
|
||||
"plyr": "^3.8.5",
|
||||
"sass": "1.103.1",
|
||||
"sass-true": "^10.1.0",
|
||||
"signature_pad": "^5.1.4",
|
||||
|
||||
@@ -266,7 +266,7 @@ When `--tblr-illustrations-primary` is not set, the illustrations fall back to `
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<script> document.querySelectorAll(".form-colorinput-input").forEach(input => input.addEventListener("change", event => document.documentElement.style.setProperty("--tblr-primary", "var(--tblr-" + event.target.value + ")"))); </script>
|
||||
<script is:inline set:html={`document.querySelectorAll(".form-colorinput-input").forEach(input => input.addEventListener("change", event => document.documentElement.style.setProperty("--tblr-primary", "var(--tblr-" + event.target.value + ")")));`} />
|
||||
</Example>
|
||||
|
||||
## Dark version of the illustration
|
||||
@@ -324,5 +324,5 @@ The `svg-css-autodark` folder holds a version that switches its colors on its ow
|
||||
```
|
||||
|
||||
<Example column>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600"> <style>{`:where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-a { fill: black; opacity: 0.07; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-b { fill: #1a2030; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-c { fill: #454c5e; } @media (prefers-color-scheme: dark) { .tblr-illustrations-boy-girl-a { fill: black; opacity: 0.07; } .tblr-illustrations-boy-girl-b { fill: #1a2030; } .tblr-illustrations-boy-girl-c { fill: #454c5e; } }`}</style> <path d="M658.744 282.266C658.744 325.973 612.535 357.656 592.114 392.937C571.053 429.346 565.991 484.976 529.581 506.037C494.299 526.458 444.065 503.618 400.367 503.618C356.669 503.618 306.435 526.458 271.153 506.037C234.753 484.976 229.681 429.346 208.62 392.937C188.209 357.656 142 325.953 142 282.266C142 238.579 188.209 206.865 208.62 171.584C229.681 135.185 234.753 79.5143 271.153 58.4839C306.435 38.0736 356.669 60.9031 400.367 60.9031C444.065 60.9031 494.299 38.0736 529.581 58.4839C565.991 79.5448 571.053 135.185 592.114 171.584C612.535 206.865 658.744 238.568 658.744 282.266Z" fill="#F7F8FC" class="tblr-illustrations-boy-girl-a" /> <path d="M397.248 550C534.459 550 645.689 545.836 645.689 540.7C645.689 535.564 534.459 531.401 397.248 531.401C260.038 531.401 148.808 535.564 148.808 540.7C148.808 545.836 260.038 550 397.248 550Z" fill="#A6A9B3" class="tblr-illustrations-boy-girl-b" /> <path d="M479.179 238.829C475.497 244.691 456.146 274.402 421.211 280.161C408.559 282.198 395.593 280.84 383.637 276.225C376.963 273.704 370.647 270.322 364.85 266.164L373.304 245.592C374.244 246.41 375.7 247.659 377.607 249.049C384.182 253.84 395.868 260.321 407.863 256.273C414.608 254.009 419.323 249.697 428.36 240.849C436.25 233.084 443.39 224.592 449.683 215.486C455.319 205.153 466.977 202.626 474.943 209.512C482.598 215.974 484.609 229.097 479.179 238.829Z" fill="#FFCB9D" style="fill: #ffcb9d; fill: var(--tblr-illustrations-skin, #ffcb9d)" /> <path d="M383.666 276.159C376.992 273.638 370.676 270.256 364.879 266.098L373.333 245.526C374.272 246.344 375.728 247.593 377.635 248.983C377.119 253.445 376.818 260.697 379.035 266.568C380.328 269.88 381.876 273.087 383.666 276.159Z" fill="black" opacity="0.15" /> <path d="M324.054 160.289C332.183 175.733 345.737 187.624 362.107 193.674L307.502 198.718C313.026 185.906 318.543 173.096 324.054 160.289Z" fill="#232B41" class="tblr-illustrations-boy-girl-c" /> <path d="M302.083 425.902L299.434 457.398L295.601 503.211H291.872L282.206 455.679L278.073 435.333L302.083 425.902ZM355.701 425.902L353.221 455.548L349.229 503.211H345.5L336.153 457.314L331.682 435.333L355.701 425.902Z" fill="#DADBE0" /> <path d="M278.063 435.333L302.083 425.939L299.434 457.436C293.46 457.051 287.692 456.496 282.206 455.717L278.063 435.333ZM355.701 425.902L353.212 455.548C347.782 456.318 342.071 456.91 336.153 457.314L331.682 435.333L355.701 425.902Z" fill="black" opacity="0.15" /> <path d="M318.108 202.692C302.571 204.392 285.231 199.874 278.063 195.017C276.833 194.294 275.8 193.278 275.057 192.058C274.278 190.508 273.592 188.902 272.916 187.202C271.976 184.872 271.169 182.449 270.445 180.025C268.518 173.72 267.17 167.252 266.415 160.703C266.415 160.167 266.218 158.57 266.021 156.72C265.345 148.425 265.006 141.69 264.809 137.069C265.204 137.745 267.139 140.901 268.886 140.61C270.765 140.225 272.333 136.092 271.901 130.174H307.136L321.847 142.893C321.847 142.893 322.279 144.931 323.199 148.031C324.69 153.477 326.558 158.813 328.789 164C330.667 168.321 332.912 172.304 335.364 174.727C343.49 182.468 336.745 200.747 318.108 202.692Z" fill="#FFCB9D" style="fill: #ffcb9d; fill: var(--tblr-illustrations-skin, #ffcb9d)" /> <path d="M328.788 164C315.373 168.775 300.746 168.931 287.231 164.441C283.781 164.927 280.531 166.354 277.838 168.565C273.855 171.919 273.958 175.018 270.755 179.584L270.464 180.025C268.537 173.72 267.188 167.252 266.434 160.703C266.434 160.167 266.237 158.57 266.039 156.72C265.363 148.425 265.025 141.69 264.828 137.069C265.222 137.745 267.157 140.901 268.904 140.61C270.783 140.225 272.352 136.092 271.92 130.174H307.155L321.865 142.893C321.865 142.893 322.297 144.931 323.218 148.031C324.703 153.476 326.564 158.812 328.788 164Z" fill="black" opacity="0.1" /> <path d="M353.502 268.466C356.893 286.755 359.298 300.197 360.951 309.666C361.045 310.192 361.13 310.718 361.224 311.244C363.196 322.244 365.225 333.253 367.198 344.272C330.2 344.935 293.193 345.649 256.176 346.413C256.232 343.868 256.27 341.238 256.335 338.673V338.542C255.228 310.418 255.658 282.255 257.622 254.178C257.763 252.102 257.913 250.045 258.083 247.978L252.54 260.923L230.334 247.772C231.132 244.258 233.922 233.681 242.132 226.448C242.132 226.448 249.581 219.967 257.895 218.792C258.667 218.721 259.432 218.596 260.187 218.417C260.319 218.382 260.454 218.357 260.591 218.342C265.334 217.665 269.928 217.055 274.249 216.726C284.754 215.813 295.312 215.656 305.Line truncated
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600"> <style>{`:where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-a { fill: black; opacity: 0.07; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-b { fill: #1a2030; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-c { fill: #454c5e; } @media (prefers-color-scheme: dark) { .tblr-illustrations-boy-girl-a { fill: black; opacity: 0.07; } .tblr-illustrations-boy-girl-b { fill: #1a2030; } .tblr-illustrations-boy-girl-c { fill: #454c5e; } }`}</style> <path d="M658.744 282.266C658.744 325.973 612.535 357.656 592.114 392.937C571.053 429.346 565.991 484.976 529.581 506.037C494.299 526.458 444.065 503.618 400.367 503.618C356.669 503.618 306.435 526.458 271.153 506.037C234.753 484.976 229.681 429.346 208.62 392.937C188.209 357.656 142 325.953 142 282.266C142 238.579 188.209 206.865 208.62 171.584C229.681 135.185 234.753 79.5143 271.153 58.4839C306.435 38.0736 356.669 60.9031 400.367 60.9031C444.065 60.9031 494.299 38.0736 529.581 58.4839C565.991 79.5448 571.053 135.185 592.114 171.584C612.535 206.865 658.744 238.568 658.744 282.266Z" fill="#F7F8FC" class="tblr-illustrations-boy-girl-a" /> <path d="M397.248 550C534.459 550 645.689 545.836 645.689 540.7C645.689 535.564 534.459 531.401 397.248 531.401C260.038 531.401 148.808 535.564 148.808 540.7C148.808 545.836 260.038 550 397.248 550Z" fill="#A6A9B3" class="tblr-illustrations-boy-girl-b" /> <path d="M479.179 238.829C475.497 244.691 456.146 274.402 421.211 280.161C408.559 282.198 395.593 280.84 383.637 276.225C376.963 273.704 370.647 270.322 364.85 266.164L373.304 245.592C374.244 246.41 375.7 247.659 377.607 249.049C384.182 253.84 395.868 260.321 407.863 256.273C414.608 254.009 419.323 249.697 428.36 240.849C436.25 233.084 443.39 224.592 449.683 215.486C455.319 205.153 466.977 202.626 474.943 209.512C482.598 215.974 484.609 229.097 479.179 238.829Z" fill="#FFCB9D" style="fill: #ffcb9d; fill: var(--tblr-illustrations-skin, #ffcb9d)" /> <path d="M383.666 276.159C376.992 273.638 370.676 270.256 364.879 266.098L373.333 245.526C374.272 246.344 375.728 247.593 377.635 248.983C377.119 253.445 376.818 260.697 379.035 266.568C380.328 269.88 381.876 273.087 383.666 276.159Z" fill="black" opacity="0.15" /> <path d="M324.054 160.289C332.183 175.733 345.737 187.624 362.107 193.674L307.502 198.718C313.026 185.906 318.543 173.096 324.054 160.289Z" fill="#232B41" class="tblr-illustrations-boy-girl-c" /> <path d="M302.083 425.902L299.434 457.398L295.601 503.211H291.872L282.206 455.679L278.073 435.333L302.083 425.902ZM355.701 425.902L353.221 455.548L349.229 503.211H345.5L336.153 457.314L331.682 435.333L355.701 425.902Z" fill="#DADBE0" /> <path d="M278.063 435.333L302.083 425.939L299.434 457.436C293.46 457.051 287.692 456.496 282.206 455.717L278.063 435.333ZM355.701 425.902L353.212 455.548C347.782 456.318 342.071 456.91 336.153 457.314L331.682 435.333L355.701 425.902Z" fill="black" opacity="0.15" /> <path d="M318.108 202.692C302.571 204.392 285.231 199.874 278.063 195.017C276.833 194.294 275.8 193.278 275.057 192.058C274.278 190.508 273.592 188.902 272.916 187.202C271.976 184.872 271.169 182.449 270.445 180.025C268.518 173.72 267.17 167.252 266.415 160.703C266.415 160.167 266.218 158.57 266.021 156.72C265.345 148.425 265.006 141.69 264.809 137.069C265.204 137.745 267.139 140.901 268.886 140.61C270.765 140.225 272.333 136.092 271.901 130.174H307.136L321.847 142.893C321.847 142.893 322.279 144.931 323.199 148.031C324.69 153.477 326.558 158.813 328.789 164C330.667 168.321 332.912 172.304 335.364 174.727C343.49 182.468 336.745 200.747 318.108 202.692Z" fill="#FFCB9D" style="fill: #ffcb9d; fill: var(--tblr-illustrations-skin, #ffcb9d)" /> <path d="M328.788 164C315.373 168.775 300.746 168.931 287.231 164.441C283.781 164.927 280.531 166.354 277.838 168.565C273.855 171.919 273.958 175.018 270.755 179.584L270.464 180.025C268.537 173.72 267.188 167.252 266.434 160.703C266.434 160.167 266.237 158.57 266.039 156.72C265.363 148.425 265.025 141.69 264.828 137.069C265.222 137.745 267.157 140.901 268.904 140.61C270.783 140.225 272.352 136.092 271.92 130.174H307.155L321.865 142.893C321.865 142.893 322.297 144.931 323.218 148.031C324.703 153.476 326.564 158.812 328.788 164Z" fill="black" opacity="0.1" /> <path d="M353.502 268.466C356.893 286.755 359.298 300.197 360.951 309.666C361.045 310.192 361.13 310.718 361.224 311.244C363.196 322.244 365.225 333.253 367.198 344.272C330.2 344.935 293.193 345.649 256.176 346.413C256.232 343.868 256.27 341.238 256.335 338.673V338.542C255.228 310.418 255.658 282.255 257.622 254.178C257.763 252.102 257.913 250.045 258.083 247.978L252.54 260.923L230.334 247.772C231.132 244.258 233.922 233.681 242.132 226.448C242.132 226.448 249.581 219.967 257.895 218.792C258.667 218.721 259.432 218.596 260.187 218.417C260.319 218.382 260.454 218.357 260.591 218.342C265.334 217.665 269.928 217.055 274.249 216.726C284.754 215.813 295.312 215.656 305.Line truncated
|
||||
</Example>
|
||||
@@ -357,7 +357,7 @@ Add a [range slider](/ui/plugins/range-slider) to make it possible for users to
|
||||
The track and the thumb read `--tblr-range-*` custom properties on `.form-range`: `--tblr-range-track-height`, `--tblr-range-track-bg`, `--tblr-range-thumb-width`, `--tblr-range-thumb-bg`, `--tblr-range-thumb-border` and the rest of the `track-*` and `thumb-*` set.
|
||||
|
||||
<Example column>
|
||||
<div class="mb-3"> <label class="form-label">Range input</label> <input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10" /> <div class="form-range mb-2 text-green" id="range-color"></div> </div> <script>{`document.addEventListener("DOMContentLoaded", function () { window.noUiSlider && noUiSlider.create(document.getElementById("range-color"), { start: 40, connect: [true, false], step: 10, range: { min: 0, max: 100, }, }); });`}</script>
|
||||
<div class="mb-3"> <label class="form-label">Range input</label> <input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10" /> <div class="form-range mb-2 text-green" id="range-color"></div> </div> <script is:inline set:html={`document.addEventListener("DOMContentLoaded", function () { window.noUiSlider && noUiSlider.create(document.getElementById("range-color"), { start: 40, connect: [true, false], step: 10, range: { min: 0, max: 100, }, }); });`} />
|
||||
</Example>
|
||||
|
||||
## Input group
|
||||
|
||||
@@ -226,7 +226,7 @@ These are the options you will need most often. Tom Select has more, and they ar
|
||||
- When using `render.option`, keep enough text content in the rendered HTML - an avatar or flag alone does not tell a screen reader user which option it is.
|
||||
- Escape user-supplied text in custom render functions with the `escape` argument, so option text can never break out of the generated HTML.
|
||||
|
||||
<script>{`
|
||||
<script is:inline set:html={`
|
||||
window.addEventListener('load', function () {
|
||||
if (typeof TomSelect === 'undefined') return;
|
||||
|
||||
@@ -253,4 +253,4 @@ window.addEventListener('load', function () {
|
||||
}
|
||||
});
|
||||
});
|
||||
`}</script>
|
||||
`} />
|
||||
@@ -182,7 +182,7 @@ Use the picker like any other form field: a label, the input, and a hint below i
|
||||
- Do not use the color as the only meaning. If a color marks a status, repeat the status in text.
|
||||
- The picker can be used with the keyboard, and the input accepts a typed value, so a mouse is never required.
|
||||
|
||||
<script>{`
|
||||
<script is:inline set:html={`
|
||||
window.addEventListener('load', function () {
|
||||
if (typeof Coloris === 'undefined') return;
|
||||
|
||||
@@ -194,4 +194,4 @@ window.addEventListener('load', function () {
|
||||
Coloris.setInstance('#colorpicker-alpha', { format: 'mixed', alpha: true, swatchesOnly: false, swatches: swatches });
|
||||
Coloris.setInstance('#colorpicker-swatches-only', { format: 'hex', alpha: false, swatchesOnly: true, swatches: swatches });
|
||||
});
|
||||
`}</script>
|
||||
`} />
|
||||
@@ -58,7 +58,7 @@ Then create a `Dropzone` instance for the form:
|
||||
From now on a file dropped on the form is uploaded right away, to the URL in the form's `action` attribute.
|
||||
|
||||
<Example>
|
||||
<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="..." type="file" /> </div> </form> <script>{`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-default"); });`}</script>
|
||||
<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="..." type="file" /> </div> </form> <script is:inline set:html={`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-default"); });`} />
|
||||
</Example>
|
||||
|
||||
## Add multiple files
|
||||
@@ -70,7 +70,7 @@ Add the `multiple` attribute to the input to accept several files at once, for e
|
||||
```
|
||||
|
||||
<Example>
|
||||
<form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form> <script>{`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-mulitple"); });`}</script>
|
||||
<form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form> <script is:inline set:html={`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-mulitple"); });`} />
|
||||
</Example>
|
||||
|
||||
## Custom dropzone
|
||||
@@ -78,7 +78,7 @@ Add the `multiple` attribute to the input to accept several files at once, for e
|
||||
You can replace the default message in the drop area with your own markup, for example an icon and a hint about the accepted file types:
|
||||
|
||||
<Example>
|
||||
<form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="file" type="file" /> </div> <div class="dz-message"> <h3>Your text here</h3> <span>Your custom description here</span> <button type="button" class="btn btn-sm mt-3">Select files</button> </div> </form> <script>{`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-custom"); });`}</script>
|
||||
<form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="file" type="file" /> </div> <div class="dz-message"> <h3>Your text here</h3> <span>Your custom description here</span> <button type="button" class="btn btn-sm mt-3">Select files</button> </div> </form> <script is:inline set:html={`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-custom"); });`} />
|
||||
</Example>
|
||||
|
||||
Custom content replaces the button Dropzone renders by default, and that button is the only part of the drop area a keyboard can reach. Keep a focusable control - such as the one above - inside your own message.
|
||||
|
||||
@@ -163,7 +163,7 @@ Put the calendar in a card body. This is the usual layout for a full page calend
|
||||
- Do not use color alone to mark a type of event. Repeat the type in the event title.
|
||||
- Keep the toolbar buttons visible. They are real buttons, so they work with the keyboard.
|
||||
|
||||
<script>{`
|
||||
<script is:inline set:html={`
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
if (typeof FullCalendar === 'undefined') return;
|
||||
|
||||
@@ -208,4 +208,4 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
new FullCalendar.Calendar(el, item.options).render();
|
||||
});
|
||||
});
|
||||
`}</script>
|
||||
`} />
|
||||
@@ -33,7 +33,7 @@ Or include it from a CDN. Plyr draws its own controls, so the stylesheet is requ
|
||||
For a YouTube video, add a `div` with the provider and the video id, then create the player from it:
|
||||
|
||||
<Example>
|
||||
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-youtube"); });`}</script>
|
||||
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script is:inline set:html={`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-youtube"); });`} />
|
||||
</Example>
|
||||
|
||||
## Vimeo file
|
||||
@@ -41,7 +41,7 @@ For a YouTube video, add a `div` with the provider and the video id, then create
|
||||
For the Vimeo video you just need to change the `data-plyr-provider`.
|
||||
|
||||
<Example>
|
||||
<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="707012696"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-vimeo"); });`}</script>
|
||||
<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="707012696"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script is:inline set:html={`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-vimeo"); });`} />
|
||||
</Example>
|
||||
|
||||
## HTML5 video and audio
|
||||
|
||||
@@ -16,7 +16,7 @@ import { site } from '@shared/lib/site.ts';
|
||||
A range slider lets users pick a value by dragging a handle instead of typing it. Use it when the exact number matters less than the rough position, for example a price range or a volume level. Tabler styles the [noUiSlider](https://refreshless.com/nouislider/) plugin to match the rest of the interface.
|
||||
|
||||
<Example>
|
||||
<div id="range-overview"></div> <script>{`document.addEventListener("DOMContentLoaded", function () { window.noUiSlider && noUiSlider.create(document.getElementById("range-overview"), { start: 20, connect: [true, false], step: 10, range: { min: 0, max: 100 } }); });`}</script>
|
||||
<div id="range-overview"></div> <script is:inline set:html={`document.addEventListener("DOMContentLoaded", function () { window.noUiSlider && noUiSlider.create(document.getElementById("range-overview"), { start: 20, connect: [true, false], step: 10, range: { min: 0, max: 100 } }); });`} />
|
||||
</Example>
|
||||
|
||||
## Installation
|
||||
@@ -42,7 +42,7 @@ Create an empty element and call `noUiSlider.create()` on it. `start` sets the i
|
||||
`connect: [true, false]` fills the track before the handle, which shows how far along the value is.
|
||||
|
||||
<Example>
|
||||
<div id="range-single"></div> <script>{`document.addEventListener("DOMContentLoaded", function () { window.noUiSlider && noUiSlider.create(document.getElementById("range-single"), { start: 20, connect: [true, false], step: 10, range: { min: 0, max: 100 } }); });`}</script>
|
||||
<div id="range-single"></div> <script is:inline set:html={`document.addEventListener("DOMContentLoaded", function () { window.noUiSlider && noUiSlider.create(document.getElementById("range-single"), { start: 20, connect: [true, false], step: 10, range: { min: 0, max: 100 } }); });`} />
|
||||
</Example>
|
||||
|
||||
```js
|
||||
@@ -59,7 +59,7 @@ noUiSlider.create(document.getElementById('range-single'), {
|
||||
Pass two values in `start` to get a range with a lower and an upper handle. With `connect: true` the fill sits between them.
|
||||
|
||||
<Example>
|
||||
<div id="range-two"></div> <script>{`document.addEventListener("DOMContentLoaded", function () { window.noUiSlider && noUiSlider.create(document.getElementById("range-two"), { start: [20, 70], connect: true, step: 5, range: { min: 0, max: 100 } }); });`}</script>
|
||||
<div id="range-two"></div> <script is:inline set:html={`document.addEventListener("DOMContentLoaded", function () { window.noUiSlider && noUiSlider.create(document.getElementById("range-two"), { start: [20, 70], connect: true, step: 5, range: { min: 0, max: 100 } }); });`} />
|
||||
</Example>
|
||||
|
||||
### Reading the value
|
||||
|
||||
@@ -181,7 +181,7 @@ Put the pad in a form group with a label, the same as any other field. Add the l
|
||||
- Tell users what happens with the drawing. A signature is personal data, so say where you store it and for how long.
|
||||
- Do not rely on the dashed border alone. Add a short hint, for example `Sign inside the box`.
|
||||
|
||||
<script>{`
|
||||
<script is:inline set:html={`
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
if (typeof SignaturePad === 'undefined') return;
|
||||
|
||||
@@ -213,4 +213,4 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
});
|
||||
});
|
||||
`}</script>
|
||||
`} />
|
||||
+7
-7
@@ -16,20 +16,20 @@
|
||||
"type-check": "astro check"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/vercel": "^11.0.10",
|
||||
"@docsearch/js": "^5.0.4",
|
||||
"@astrojs/vercel": "^11.0.15",
|
||||
"@docsearch/js": "^5.1.2",
|
||||
"@tabler/core": "workspace:*",
|
||||
"@vercel/functions": "^3.9.5",
|
||||
"astro": "^7.3.1",
|
||||
"shiki": "^4.4.3"
|
||||
"@vercel/functions": "^3.10.1",
|
||||
"astro": "^7.4.0",
|
||||
"shiki": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.9.10",
|
||||
"@astrojs/markdown-satteri": "^0.3.8",
|
||||
"@astrojs/mdx": "^7.0.8",
|
||||
"@docsearch/css": "^5.0.4",
|
||||
"@docsearch/css": "^5.1.2",
|
||||
"@tabler/preview": "workspace:*",
|
||||
"@types/node": "^26.4.0",
|
||||
"@types/node": "^26.6.5",
|
||||
"js-beautify": "^2.0.3",
|
||||
"sharp": "^0.35.5",
|
||||
"shx": "^0.4.0",
|
||||
|
||||
+11
-11
@@ -59,31 +59,31 @@
|
||||
"shx": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@changesets/cli": "^3.0.1",
|
||||
"@changesets/cli": "^3.0.3",
|
||||
"@eslint/compat": "^2.1.1",
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@mdx-js/mdx": "^3.1.1",
|
||||
"@stylistic/stylelint-config": "^2.0.0",
|
||||
"@tabler/icons": "^3.49.0",
|
||||
"@types/node": "^26.4.0",
|
||||
"@types/node": "^26.6.5",
|
||||
"adm-zip": "^0.6.1",
|
||||
"autoprefixer": "^10.5.4",
|
||||
"autoprefixer": "^10.6.1",
|
||||
"bundlewatch": "^0.4.2",
|
||||
"clean-css": "^5.3.3",
|
||||
"concurrently": "^10.0.5",
|
||||
"concurrently": "^10.0.6",
|
||||
"cross-env": "^10.1.0",
|
||||
"eslint": "^10.11.0",
|
||||
"eslint": "^10.13.0",
|
||||
"eslint-plugin-astro": "^3.2.1",
|
||||
"github-slugger": "^2.0.0",
|
||||
"glob": "^13.0.6",
|
||||
"globals": "^17.12.0",
|
||||
"globals": "^17.13.0",
|
||||
"js-beautify": "^2.0.3",
|
||||
"markdownlint-cli": "^0.49.1",
|
||||
"nodemon": "^3.1.14",
|
||||
"playwright": "1.62.1",
|
||||
"postcss": "^8.5.28",
|
||||
"postcss": "^8.5.30",
|
||||
"postcss-prefix-custom-properties": "^0.1.0",
|
||||
"prettier": "^3.9.6",
|
||||
"prettier": "^3.9.10",
|
||||
"prettier-plugin-astro": "^0.14.1",
|
||||
"rtlcss": "^4.3.0",
|
||||
"sass": "1.103.1",
|
||||
@@ -91,10 +91,10 @@
|
||||
"stylelint-config-twbs-bootstrap": "^16.1.0",
|
||||
"svgo": "^4.1.0",
|
||||
"terser": "^5.51.2",
|
||||
"tsx": "^4.23.13",
|
||||
"tsx": "^4.23.15",
|
||||
"turbo": "2.10.12",
|
||||
"typescript": "^6.0.3",
|
||||
"typescript-eslint": "^8.71.0",
|
||||
"vite": "^8.2.2"
|
||||
"typescript-eslint": "^8.71.2",
|
||||
"vite": "^8.3.4"
|
||||
}
|
||||
}
|
||||
Generated
+948
-873
File diff suppressed because it is too large.
Load diff
@@ -10,6 +10,7 @@ allowBuilds:
|
||||
core-js: false
|
||||
core-js-pure: false
|
||||
esbuild: false
|
||||
plyr: false
|
||||
sharp: false
|
||||
|
||||
minimumReleaseAge: 1440
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*",
|
||||
"astro": "^7.3.1"
|
||||
"astro": "^7.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.9.10",
|
||||
@@ -28,8 +28,8 @@
|
||||
"@astrojs/mdx": "^7.0.8",
|
||||
"@types/js-beautify": "^1.14.3",
|
||||
"js-beautify": "^2.0.3",
|
||||
"prettier": "^3.9.6",
|
||||
"shiki": "^4.4.3",
|
||||
"prettier": "^3.9.10",
|
||||
"shiki": "^4.5.0",
|
||||
"shx": "^0.4.0",
|
||||
"typescript": "^6.0.3"
|
||||
}
|
||||
|
||||
@@ -18,11 +18,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*",
|
||||
"astro": "^7.3.1"
|
||||
"astro": "^7.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.9.10",
|
||||
"@types/node": "^26.4.0",
|
||||
"@types/node": "^26.6.5",
|
||||
"playwright": "1.62.1",
|
||||
"sharp": "0.35.5",
|
||||
"shx": "^0.4.0",
|
||||
|
||||
+2
-2
@@ -11,12 +11,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*",
|
||||
"shiki": "^4.4.3"
|
||||
"shiki": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.9.10",
|
||||
"@types/js-beautify": "^1.14.3",
|
||||
"astro": "^7.3.1",
|
||||
"astro": "^7.4.0",
|
||||
"js-beautify": "^2.0.3",
|
||||
"typescript": "^6.0.3",
|
||||
"vitest": "4.1.11"
|
||||
|
||||
Reference in new issue
Block a user