From 3a30de270b1c335e92ed5748c5f9957d8e684f95 Mon Sep 17 00:00:00 2001 From: Chris Simmons Date: Tue, 10 Oct 2023 10:51:55 -0500 Subject: [PATCH] Merge fore release 10/10 (#2130) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Mahmoud Zino <74062808+Mahmoud-zino@users.noreply.github.com> Co-authored-by: CokaKoala <31664583+AdrianGonz97@users.noreply.github.com> Co-authored-by: Edrich Hans Chua Co-authored-by: A̴m̴r̴ ع̲مِےـرۅ Co-authored-by: Jordan Watts <91865823+jwatts777@users.noreply.github.com> Co-authored-by: Hugo Korte <63101006+Hugos68@users.noreply.github.com> Co-authored-by: Aaron Crockett --- .changeset/angry-fishes-study.md | 5 + .changeset/empty-trees-fetch.md | 5 + .changeset/fast-camels-sort.md | 6 + .changeset/funny-cows-cry.md | 5 + .changeset/late-cherries-admire.md | 5 + .changeset/little-dingos-repeat.md | 5 + .changeset/modern-bags-join.md | 5 + .changeset/nine-worms-cheat.md | 15 + .changeset/quick-rats-doubt.md | 5 + packages/create-skeleton-app/src/creator.js | 29 +- packages/create-skeleton-app/src/index.js | 2 +- .../src/routes/+page.svelte | 2 +- .../plugin/src/styles/components/forms.css | 6 +- packages/plugin/src/tailwind/tokens/rings.ts | 2 +- .../src/lib/actions/FocusTrap/focusTrap.ts | 3 +- .../components/Accordion/AccordionItem.svelte | 2 +- .../components/FileButton/FileButton.svelte | 11 +- .../FileDropzone/FileDropzone.svelte | 8 + .../lib/components/InputChip/InputChip.svelte | 22 +- .../ProgressRadial/ProgressRadial.svelte | 9 +- .../ProgressRadial/ProgressRadial.test.ts | 3 +- .../TreeView/RecursiveTreeView.svelte | 111 ++++++ .../TreeView/RecursiveTreeViewItem.svelte | 161 +++++++++ .../lib/components/TreeView/TreeView.svelte | 14 +- .../TreeView/TreeViewDataDrivenItem.svelte | 119 ------- .../components/TreeView/TreeViewItem.svelte | 69 +++- .../src/lib/components/TreeView/types.ts | 10 +- packages/skeleton/src/lib/index.ts | 3 +- .../utilities/LightSwitch/LightSwitch.svelte | 5 +- sites/skeleton.dev/package.json | 4 + sites/skeleton.dev/pnpm-lock.yaml | 67 ++++ sites/skeleton.dev/src/app.html | 8 +- .../components/DocsFooter/DocsFooter.svelte | 31 +- .../(inner)/components/app-shell/+page.svelte | 2 + .../components/file-dropzone/+page.svelte | 16 +- .../components/progress-radials/+page.svelte | 72 +++- .../components/tree-views/+page.svelte | 252 +++++++------- .../components/tree-views/exampleData.ts | 223 ++++++++++++ .../routes/(inner)/docs/colors/+page.svelte | 111 +++++- .../contributing/style-guide/+page.svelte | 4 +- .../routes/(inner)/docs/themes/+page.svelte | 2 +- .../(inner)/docs/transitions/+page.svelte | 2 +- .../(inner)/utilities/modals/+page.svelte | 316 ++++++++++++------ .../(inner)/utilities/popups/+page.svelte | 44 +++ sites/skeleton.dev/src/routes/+layout.svelte | 4 + .../static/font-awesome/css/brands.min.css | 6 - .../font-awesome/css/fontawesome.min.css | 9 - .../static/font-awesome/css/solid.min.css | 6 - .../font-awesome/webfonts/fa-brands-400.ttf | Bin 187208 -> 0 bytes .../font-awesome/webfonts/fa-brands-400.woff2 | Bin 108020 -> 0 bytes .../font-awesome/webfonts/fa-solid-900.ttf | Bin 394628 -> 0 bytes .../font-awesome/webfonts/fa-solid-900.woff2 | Bin 150124 -> 0 bytes sites/skeleton.dev/vite.config.ts | 13 +- 53 files changed, 1343 insertions(+), 496 deletions(-) create mode 100644 .changeset/angry-fishes-study.md create mode 100644 .changeset/empty-trees-fetch.md create mode 100644 .changeset/fast-camels-sort.md create mode 100644 .changeset/funny-cows-cry.md create mode 100644 .changeset/late-cherries-admire.md create mode 100644 .changeset/little-dingos-repeat.md create mode 100644 .changeset/modern-bags-join.md create mode 100644 .changeset/nine-worms-cheat.md create mode 100644 .changeset/quick-rats-doubt.md create mode 100644 packages/skeleton/src/lib/components/TreeView/RecursiveTreeView.svelte create mode 100644 packages/skeleton/src/lib/components/TreeView/RecursiveTreeViewItem.svelte delete mode 100644 packages/skeleton/src/lib/components/TreeView/TreeViewDataDrivenItem.svelte create mode 100644 sites/skeleton.dev/src/routes/(inner)/components/tree-views/exampleData.ts delete mode 100644 sites/skeleton.dev/static/font-awesome/css/brands.min.css delete mode 100644 sites/skeleton.dev/static/font-awesome/css/fontawesome.min.css delete mode 100644 sites/skeleton.dev/static/font-awesome/css/solid.min.css delete mode 100644 sites/skeleton.dev/static/font-awesome/webfonts/fa-brands-400.ttf delete mode 100644 sites/skeleton.dev/static/font-awesome/webfonts/fa-brands-400.woff2 delete mode 100644 sites/skeleton.dev/static/font-awesome/webfonts/fa-solid-900.ttf delete mode 100644 sites/skeleton.dev/static/font-awesome/webfonts/fa-solid-900.woff2 diff --git a/.changeset/angry-fishes-study.md b/.changeset/angry-fishes-study.md new file mode 100644 index 0000000000..6e3e24e747 --- /dev/null +++ b/.changeset/angry-fishes-study.md @@ -0,0 +1,5 @@ +--- +"@skeletonlabs/tw-plugin": patch +--- + +bugfix: Separated light/dark classes for input validation variants diff --git a/.changeset/empty-trees-fetch.md b/.changeset/empty-trees-fetch.md new file mode 100644 index 0000000000..20bac497e9 --- /dev/null +++ b/.changeset/empty-trees-fetch.md @@ -0,0 +1,5 @@ +--- +"@skeletonlabs/skeleton": patch +--- + +bugfix: Resolved an issue that allowed focusTrap to escape hidden inputs diff --git a/.changeset/fast-camels-sort.md b/.changeset/fast-camels-sort.md new file mode 100644 index 0000000000..bba04335a6 --- /dev/null +++ b/.changeset/fast-camels-sort.md @@ -0,0 +1,6 @@ +--- +"@skeletonlabs/skeleton": minor +--- + +- feat: File Dropzone and File Button now include a `fileInput` prop to reference to the input element. +- feat: File Dropzone now forwards the `on:focus`, `on:focusin`, and `on:focusout` events. diff --git a/.changeset/funny-cows-cry.md b/.changeset/funny-cows-cry.md new file mode 100644 index 0000000000..58a971656a --- /dev/null +++ b/.changeset/funny-cows-cry.md @@ -0,0 +1,5 @@ +--- +"@skeletonlabs/tw-plugin": patch +--- + +bugfix: Resolved an issue where the Ring design token would generate invalid CSS when using the important modifier `!` diff --git a/.changeset/late-cherries-admire.md b/.changeset/late-cherries-admire.md new file mode 100644 index 0000000000..6488776ad4 --- /dev/null +++ b/.changeset/late-cherries-admire.md @@ -0,0 +1,5 @@ +--- +"@skeletonlabs/skeleton": minor +--- + +feat: Added `input-chip-interface` and `input-chip-wrapper` region classes to Input Chips. diff --git a/.changeset/little-dingos-repeat.md b/.changeset/little-dingos-repeat.md new file mode 100644 index 0000000000..5ddcf585d0 --- /dev/null +++ b/.changeset/little-dingos-repeat.md @@ -0,0 +1,5 @@ +--- +"@skeletonlabs/skeleton": patch +--- + +feat: Added a `strokeLinecap` property to to Progress Radials, enabling rounded styling diff --git a/.changeset/modern-bags-join.md b/.changeset/modern-bags-join.md new file mode 100644 index 0000000000..36bf4e701a --- /dev/null +++ b/.changeset/modern-bags-join.md @@ -0,0 +1,5 @@ +--- +"@skeletonlabs/skeleton": patch +--- + +chore: Accordion now has RTL compatibility via the use of the `text-start` class diff --git a/.changeset/nine-worms-cheat.md b/.changeset/nine-worms-cheat.md new file mode 100644 index 0000000000..6e7ff6aea3 --- /dev/null +++ b/.changeset/nine-worms-cheat.md @@ -0,0 +1,15 @@ +--- +"@skeletonlabs/skeleton": minor +--- + +feat: Multiple revisions to the Tree View component: + +- Enhanced and properly named non-recursive Tree View events. +- Separated the recursive Tree View under the new component RecursiveTreeView. +- RecursiveTreeView now utilizes the `relational` prop to enable relational checking. +- RecursiveTreeView is now using ID arrays with 2-way binding to control the Tree View state, including: + - `expandedNodes` + - `disabledNodes` + - `checkedNodes` + - `indeterminateNodes` (affects only multiple relational mode) +- TreeViewNode now requires a unique ID to support the new checking system. diff --git a/.changeset/quick-rats-doubt.md b/.changeset/quick-rats-doubt.md new file mode 100644 index 0000000000..19277f653d --- /dev/null +++ b/.changeset/quick-rats-doubt.md @@ -0,0 +1,5 @@ +--- +"@skeletonlabs/skeleton": patch +--- + +bugfix: Added `title` prop to Lightswitch component for better i18n support diff --git a/packages/create-skeleton-app/src/creator.js b/packages/create-skeleton-app/src/creator.js index d819722c65..f779fdb9af 100644 --- a/packages/create-skeleton-app/src/creator.js +++ b/packages/create-skeleton-app/src/creator.js @@ -222,9 +222,21 @@ import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; export default defineConfig({ - plugins: [sveltekit(), purgeCss()] -}); -`; + plugins: [sveltekit(), purgeCss(`; + + if (opts.codeblocks) { + contents += `{ + safelist: { + // any selectors that begin with "hljs-" will not be purged + greedy: [/^hljs-/], + }, + }), + ], +});`; + } else { + contents += `)] +});`; + } writeFileSync(filename, contents); } @@ -475,9 +487,18 @@ function copyTemplate(opts) { scriptEndReg, ` // Highlight JS - import hljs from 'highlight.js'; + import hljs from 'highlight.js/lib/core'; import 'highlight.js/styles/github-dark.css'; import { storeHighlightJs } from '@skeletonlabs/skeleton'; + import xml from 'highlight.js/lib/languages/xml'; // for HTML + import css from 'highlight.js/lib/languages/css'; + import javascript from 'highlight.js/lib/languages/javascript'; + import typescript from 'highlight.js/lib/languages/typescript'; + + hljs.registerLanguage('xml', xml); // for HTML + hljs.registerLanguage('css', css); + hljs.registerLanguage('javascript', javascript); + hljs.registerLanguage('typescript', typescript); storeHighlightJs.set(hljs); `, ); diff --git a/packages/create-skeleton-app/src/index.js b/packages/create-skeleton-app/src/index.js index 7160f1253d..8f34b4adaf 100755 --- a/packages/create-skeleton-app/src/index.js +++ b/packages/create-skeleton-app/src/index.js @@ -256,7 +256,7 @@ Problems? Open an issue on ${cyan('https://github.com/skeletonlabs/skeleton/issu let packages = [ { value: 'forms', label: 'Add Tailwind forms?', package: '@tailwindcss/forms', force: false }, { value: 'typography', label: 'Add Tailwind typography?', package: '@tailwindcss/typography', force: false }, - // { value: 'codeblocks', label: 'Add CodeBlock (installs highlight.js)?', package: 'highlight.js', force: false }, + { value: 'codeblocks', label: 'Add CodeBlock (installs highlight.js)?', package: 'highlight.js', force: false }, { value: 'popups', label: 'Add Popups (installs floating-ui)?', package: '@floating-ui/dom', force: false }, // { value: 'mdsvex', label: 'Add Markdown support (installs mdsvex)?', package: 'mdsvex', force: false }, ]; diff --git a/packages/create-skeleton-app/templates/skeleton-template-bare/src/routes/+page.svelte b/packages/create-skeleton-app/templates/skeleton-template-bare/src/routes/+page.svelte index 8fc580e619..9053a99f50 100644 --- a/packages/create-skeleton-app/templates/skeleton-template-bare/src/routes/+page.svelte +++ b/packages/create-skeleton-app/templates/skeleton-template-bare/src/routes/+page.svelte @@ -1,6 +1,6 @@ -
+

Let's get cracking bones!

Start by exploring:

diff --git a/packages/plugin/src/styles/components/forms.css b/packages/plugin/src/styles/components/forms.css index c8f86bfb17..d34d701990 100644 --- a/packages/plugin/src/styles/components/forms.css +++ b/packages/plugin/src/styles/components/forms.css @@ -162,7 +162,7 @@ /* success */ .input-success { - @apply !bg-success-200 !border-success-500 !text-success-700; + @apply bg-success-200 dark:bg-success-200 border-success-500 dark:border-success-500 text-success-700 dark:text-success-700; } .input-success::-moz-placeholder { @apply text-success-700; @@ -176,7 +176,7 @@ /* warning */ .input-warning { - @apply !bg-warning-200 !border-warning-500 !text-warning-700; + @apply bg-warning-200 dark:bg-warning-200 border-warning-500 dark:border-warning-500 text-warning-700 dark:text-warning-700; } .input-warning::-moz-placeholder { @apply text-warning-700; @@ -190,7 +190,7 @@ /* error */ .input-error { - @apply !bg-error-200 !border-error-500 !text-error-500; + @apply bg-error-200 dark:bg-error-200 border-error-500 dark:border-error-500 text-error-500 dark:text-error-500; } .input-error::-moz-placeholder { @apply text-error-500; diff --git a/packages/plugin/src/tailwind/tokens/rings.ts b/packages/plugin/src/tailwind/tokens/rings.ts index e535f089e3..fe1907e1df 100644 --- a/packages/plugin/src/tailwind/tokens/rings.ts +++ b/packages/plugin/src/tailwind/tokens/rings.ts @@ -27,7 +27,7 @@ export const rings = (): CssClasses => { // Example: .ring-outline-token '.ring-outline-token': { ...ringOutlineShared, - '--tw-ring-color': 'rgb(23 23 23 / 0.05);' // neutral-900, 5% opacity + '--tw-ring-color': 'rgb(23 23 23 / 0.05)' // neutral-900, 5% opacity }, '.dark .ring-outline-token': { ...ringOutlineShared, diff --git a/packages/skeleton/src/lib/actions/FocusTrap/focusTrap.ts b/packages/skeleton/src/lib/actions/FocusTrap/focusTrap.ts index 6c5846b879..3deb7a4129 100644 --- a/packages/skeleton/src/lib/actions/FocusTrap/focusTrap.ts +++ b/packages/skeleton/src/lib/actions/FocusTrap/focusTrap.ts @@ -1,6 +1,7 @@ // Action: Focus Trap export function focusTrap(node: HTMLElement, enabled: boolean) { - const elemWhitelist = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'; + const elemWhitelist = + 'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), textarea:not([tabindex="-1"]), select:not([tabindex="-1"]), details:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])'; let elemFirst: HTMLElement; let elemLast: HTMLElement; diff --git a/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte b/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte index c0a7a3c2bd..3cbb2ba580 100644 --- a/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte +++ b/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte @@ -37,7 +37,7 @@ // Classes const cBase = ''; - const cControl = 'text-left w-full flex items-center space-x-4'; + const cControl = 'text-start w-full flex items-center space-x-4'; const cControlCaret = 'fill-current w-3 transition-transform duration-[200ms]'; const cPanel = ''; diff --git a/packages/skeleton/src/lib/components/FileButton/FileButton.svelte b/packages/skeleton/src/lib/components/FileButton/FileButton.svelte index 63f0a1bda8..4eec062435 100644 --- a/packages/skeleton/src/lib/components/FileButton/FileButton.svelte +++ b/packages/skeleton/src/lib/components/FileButton/FileButton.svelte @@ -8,6 +8,10 @@ * @type {FileList} */ export let files: FileList | undefined = undefined; + /** + * File input reference. + */ + export let fileInput: HTMLInputElement | undefined = undefined; /** * Required. Set a unique name for the file input. * @type {string} @@ -18,11 +22,8 @@ /** Provide a button variant or other class styles. */ export let button: CssClasses = 'btn variant-filled'; - // Local - let elemFileInput: HTMLElement; - function onButtonClick(): void { - elemFileInput.click(); + if (fileInput) fileInput.click(); } function prunedRestProps() { @@ -38,7 +39,7 @@