flowbite-svelte 0.27.15 → 0.27.16

package/utils/backdrop.js

@@ -0,0 +1,90 @@
+import { createEventDispatcher } from 'svelte';
+export let open = false;
+const backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
+export let placement;
+// const placement:
+// 		| 'top-left'
+// 		| 'top-center'
+// 		| 'top-right'
+// 		| 'center-left'
+// 		| 'center'
+// 		| 'center-right'
+// 		| 'bottom-left'
+// 		| 'bottom-center'
+// 		| 'bottom-right'='center';
+export const init = (node, _open) => {
+    getPlacementClasses().map((c) => node.classList.add(c));
+    _open && createBackdrop(node);
+    console.log('init clicked');
+    return {
+        update(_open) {
+            allPlacementClasses.map((c) => node.classList.remove(c));
+            getPlacementClasses().map((c) => node.classList.add(c));
+            _open ? createBackdrop(node) : destroyBackdrop(node);
+        },
+        destroy() {
+            destroyBackdrop(node);
+        }
+    };
+};
+const getPlacementClasses = () => {
+    switch (placement) {
+        // top
+        case 'top-left':
+            return ['justify-start', 'items-start'];
+        case 'top-center':
+            return ['justify-center', 'items-start'];
+        case 'top-right':
+            return ['justify-end', 'items-start'];
+        // center
+        case 'center-left':
+            return ['justify-start', 'items-center'];
+        case 'center':
+            return ['justify-center', 'items-center'];
+        case 'center-right':
+            return ['justify-end', 'items-center'];
+        // bottom
+        case 'bottom-left':
+            return ['justify-start', 'items-end'];
+        case 'bottom-center':
+            return ['justify-center', 'items-end'];
+        case 'bottom-right':
+            return ['justify-end', 'items-end'];
+        default:
+            return ['justify-center', 'items-center'];
+    }
+};
+const createBackdrop = (node) => {
+    if (!backdropEl) {
+        backdropEl = document.createElement('div');
+        backdropEl.classList.add(...backdropClasses.split(' '));
+        const body = document.querySelector('body');
+        body.append(backdropEl);
+        body.style.overflow = 'hidden';
+        document.addEventListener('keydown', handleEscape, true);
+    }
+    dispatch('show', node);
+};
+const destroyBackdrop = (node) => {
+    const body = document.querySelector('body');
+    body.style.overflow = 'auto';
+    if (backdropEl)
+        backdropEl.remove();
+    backdropEl = undefined;
+    document.removeEventListener('keydown', handleEscape, true);
+    dispatch('hide', node);
+};
+let backdropEl;
+const handleEscape = (e) => {
+    if (open && e.key === 'Escape')
+        open = false;
+};
+const dispatch = createEventDispatcher();
+const allPlacementClasses = [
+    'justify-start',
+    'justify-center',
+    'justify-end',
+    'items-start',
+    'items-center',
+    'items-end'
+];

package/utils/clickOutside.d.ts

@@ -0,0 +1,3 @@
+export declare const clickOutside: (node: HTMLElement, callback: () => void) => {
+    destroy(): void;
+};

package/utils/clickOutside.js

@@ -0,0 +1,15 @@
+export const clickOutside = (node, callback) => {
+    const handleClick = (event) => {
+        if (!event?.target)
+            return;
+        if (node && !node.contains(event.target) && !event.defaultPrevented) {
+            callback();
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        },
+    };
+};

package/utils/createEventDispatcher.d.ts

@@ -0,0 +1 @@
+export default function createEventDispatcher(): (type: any, target: any, detail: any) => void;

package/utils/focusTrap.d.ts

@@ -0,0 +1,3 @@
+export default function focusTrap(node: any): {
+    destroy(): void;
+};

package/utils/generateId.d.ts

@@ -0,0 +1 @@
+export default function _default(): string;

package/video/Video.svelte

@@ -0,0 +1,22 @@
+<script>import classNames from 'classnames';
+// export let width;
+// export let controls: boolean = true;
+// export let autoplay: boolean = false;
+export let src;
+export let type = 'video/mp4';
+export let trackSrc = '';
+export let srclang = 'en';
+export let label = 'english_captions';
+// export let attribute = '';
+let videoClass = classNames($$props.class);
+// const setAttribute = (node, params) => {
+//   node.setAttribute(params, '');
+// };
+</script>
+
+<video {...$$restProps} class={videoClass}>
+  <source {src} {type} />
+  <slot />
+  <track src={trackSrc} kind="captions" {srclang} {label} />
+  Your browser does not support the video tag.
+</video>

package/video/Video.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        src: string;
+        type?: string | undefined;
+        trackSrc?: string | undefined;
+        srclang?: string | undefined;
+        label?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type VideoProps = typeof __propDef.props;
+export declare type VideoEvents = typeof __propDef.events;
+export declare type VideoSlots = typeof __propDef.slots;
+export default class Video extends SvelteComponentTyped<VideoProps, VideoEvents, VideoSlots> {
+}
+export {};

package/.eslintrc.cjs

@@ -1,20 +0,0 @@
-module.exports = {
-	root: true,
-	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	}
-};

package/.github/FUNDING.yml

@@ -1,13 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
-ko_fi: flowbitesvelte # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-otechie: # Replace with a single Otechie username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,33 +0,0 @@
-name: "\U0001F41E Bug report"
-description: Report an issue with Flowbite-Svelte
-labels: ['triage: bug']
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to fill out this bug report!
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: Describe the bug
-      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
-      placeholder: Bug description
-    validations:
-      required: true
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: Reproduction
-      description: Please provide a link to a repo or REPL that can reproduce the problem you ran into. Use this [Flowbite-Svelte template](https://svelte.dev/repl/930d39fbd10b4e5b8581fb20d3a3192e?version=3.50.1). If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided within a reasonable time-frame, the issue will be closed.
-      placeholder: REPL
-    validations:
-      required: true
-  - type: textarea
-    id: system-info
-    attributes:
-      label: Flowbite version and System Info
-      description: Output of `npx envinfo --system --npmPackages svelte,@sveltejs/kit,flowbite-svelte,vite,rollup,webpack --binaries --browsers`
-      render: shell
-      placeholder: Version, System, Binaries, Browsers
-    validations:
-      required: true

package/.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Discord Chat
-    url: https://discord.gg/4eeurUVvTy
-    about: Ask questions and discuss with other Flowbite users in real time.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,17 +0,0 @@
----
-name: Feature Request 💡
-about: Suggest a new idea for the project.
-labels: enhancement
----
-
-## Summary
-
-Brief explanation of the feature.
-
-### Basic example
-
-If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.
-
-### Motivation
-
-Why are we doing this? What use cases does it support? What is the expected outcome?

package/.github/pull_request_template.md

@@ -1,67 +0,0 @@
-<!-- 
-Thanks for creating this pull request 🤗
-
-Please make sure that the pull request is limited to one type (docs, feature, etc.) and keep it as small as possible. You can open multiple prs instead of opening a huge one.
--->
-
-<!-- If this pull request closes an issue, please mention the issue number below -->
-Closes #<!-- Issue # here -->
-
-## 📑 Description
-<!-- Add a brief description of the PR -->
-
-<!-- You can also choose to add a list of changes and if they have been completed or not by using the markdown to-do list syntax
-- [ ] Not Completed
-- [x] Completed
--->
-
-## ✅ Checks
-<!-- Make sure your PR passes the tests and do check the following fields as needed - -->
-
-- [ ] My pull request adheres to the code style of this project
-- [ ] My code requires changes to the documentation
-- [ ] I have updated the documentation as required
-- [ ] I have checked the page with https://validator.unl.edu/
-- [ ] All the tests have passed
-- [ ] My pull request is based on the latest commit (not the npm version).
-
-<!--
-
-Sync fork from GitHub dropdown and update your local branch. 
-
-```sh
-git pull origin main
-git checkout your-branch
-git rebase main
-npm run test
-git push
-```
-
-Then create a PR from your GitHub repo.
-
-Or if you are using the command line:
-
-```sh
-git checkout main
-git fetch upstream // I'm assuming you set the upstream
-git merge upstream/main
-```
-
-Then change to your branch:
-
-```sh
-git checkout my-new-feature
-git merge main
-```
-
-If you may need to resolve merge conficts if your local branch had unique commits. 
-
-Now you are ready to submit your PR.
-
-It’s a good idea to sync from time to
-time, so you aren’t left too far behind the parent branch.
-
--->
-
-## ℹ Additional Information
-<!-- Any additional information like breaking changes, dependencies added, screenshots, comparisons between new and old behavior, etc. -->

package/.prettierrc

@@ -1,8 +0,0 @@
-{
-	"useTabs": false,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 109,
-	"embeddedLanguageFormatting": "auto",
-	"bracketSameLine": true
-}

package/CONTRIBUTING.md

@@ -1,67 +0,0 @@
-
-# How to Contribute
-
-Here are some guidelines we'd like you to follow before submitting a PR.
-
-## Frontend pages
-
-<p><a href="https://tailwindcss.com/docs/content-configuration#dynamic-class-names">Tailwind warns</a> that you don't construct class names dynamically. In stead of this:</p>
-
-```html
-<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
-```
-
-### Always use complete class names:
-
-```html
-<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
-```
-
-## Types and Props
-
-Please add a type to `export`ed variables. When we generate props files, it will automatically pick up types from your file. If you don't add a type, it will break.
-
-Please run the following to update prop files.
-
-```sh
-npm run gen:props
-```
-
-This script will update/generate files in `src/routes/props`.
-
-Again avoid type inference for `export`ed variables.
-
-Please put all export variables before functions to avoid breaking props tables.
-
-## One or two at a time
-
-Please don't send a large amount of changes at once. It takes time to go through all changes. It is easier to check and update the repo asap.
-
-## Conventional commit
-
-<p>When make a commit, we recommend using <a href="https://www.conventionalcommits.org/en/v1.0.0/">the Coventional commits</a>.</p>
-
-Some examples are:
-
-```sh
-feat: add rating component
-fix: add if statement to Button component
-chore: clean up About page
-docs: add timeline page
-style: update home page
-test: add modal test
-```
-
-When you have a breaking change:
-
-```
-git commit -a "feat: change btnClass name to bClass" -m "BREAKING CHANGE: change the Button component attributes"
-```
-
-## Testing
-
-<p>Before submitting a PR, please run a test:</p>
-
-```sh
-npm run test
-```

package/mdsvex.config.js

@@ -1,22 +0,0 @@
-import { defineMDSveXConfig as defineConfig } from 'mdsvex';
-import examples from 'mdsvexamples';
-
-const config = defineConfig({
-  layout: {
-    componentLayout: './src/routes/layouts/component/+page.svelte',
-    pageLayout: './src/routes/layouts/pageLayout/+page.svelte',
-    formLayout: './src/routes/layouts/formLayout/+page.svelte',
-    typographyLayout: './src/routes/layouts/typographyLayout/+page.svelte',
-    utilitiesLayout: './src/routes/layouts/utilitiesLayout/+page.svelte'
-  },
-  extensions: ['.svelte.md', '.md', '.svx'],
-
-  smartypants: {
-    dashes: 'oldschool'
-  },
-
-  remarkPlugins: [[examples, { defaults: { Wrapper: '/src/routes/utils/ExampleWrapper.svelte' } }]],
-  rehypePlugins: []
-});
-
-export default config;

package/playwright.config.ts

@@ -1,10 +0,0 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-
-const config: PlaywrightTestConfig = {
-	webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
-	}
-};
-
-export default config;

package/postcss.config.cjs

@@ -1,13 +0,0 @@
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
-
-const config = {
-	plugins: [
-		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
-		tailwindcss(),
-		//But others, like autoprefixer, need to run after,
-		autoprefixer
-	]
-};
-
-module.exports = config;

package/src/app.css

@@ -1,41 +0,0 @@
-/* Write your global styles here, in PostCSS syntax */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-pre {
-	background-color: rgb(242, 242, 242);
-	white-space: pre-wrap;
-	width: 100%;
-}
-
-@layer base {
-	html {
-		-webkit-text-size-adjust: 100%;
-		font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-		line-height: 1.5;
-		-moz-tab-size: 4;
-		tab-size: 4;
-	}
-
-	/* Do not change these. Changing this affect components as well */
-	main p {
-		@apply text-gray-900 dark:text-white;
-	}
-  
-  .related-components,
-	.references {
-		@apply w-full flex flex-wrap;
-	}
-
-	.related-components p,
-	.references p {
-		@apply w-full md:w-1/2 lg:w-1/3;
-	}
-
-	main p>code,
-	main ul>li>code,
-	main ol>li>code {
-		@apply px-1 font-mono text-sm text-blue-600 break-all dark:text-blue-400 whitespace-nowrap;
-	}
-}

package/src/app.d.ts

@@ -1,9 +0,0 @@
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
-// and what to do when importing types
-declare namespace App {
-	// interface Locals {}
-	// interface PageData {}
-	// interface Error {}
-	// interface Platform {}
-}

package/src/app.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="utf-8" />
-
-	<link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
-	<link rel="icon" type="image/png" href="/images/favicon.png">
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<!-- Google fonts -->
-	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
-		rel="stylesheet">
-
-	<!-- Global site tag (gtag.js) - Google Analytics -->
-	<script async src="https://www.googletagmanager.com/gtag/js?id=G-4Y9Y3WGG11"></script>
-	<script>
-		window.dataLayer = window.dataLayer || [];
-		function gtag () { dataLayer.push(arguments); }
-		gtag('js', new Date());
-
-		gtag('config', 'G-4Y9Y3WGG11');
-	</script>
-	%sveltekit.head%
-</head>
-
-<body data-sveltekit-prefetch class="bg-white dark:bg-gray-900">
-	<div id="svelte" class="max-h-screen overflow-auto">%sveltekit.body%</div>
-</body>
-
-</html>

package/src/app.postcss

@@ -1,4 +0,0 @@
-/* Write your global styles here, in PostCSS syntax */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/hooks.server.js

@@ -1,76 +0,0 @@
-export const handle = async ({ event, resolve }) => {
-  // vite function to get all md files from components dir
-  const componentFiles = import.meta.glob('/src/routes/components/*.md')
-  const formFiles = import.meta.glob('/src/routes/forms/*.md')
-  const typographyFiles = import.meta.glob('/src/routes/typography/*.md')
-  const utilFiles = import.meta.glob('/src/routes/utilities/*.md')
-  const pageFiles = import.meta.glob('/src/routes/pages/*.md')
-  const extendFiles = import.meta.glob('/src/routes/extend/*.md')
-  // returns an array of files
-  const iterableComponentFiles = Object.entries(componentFiles)
-  const iterableFormFiles = Object.entries(formFiles)
-  const iterableTypographyFiles = Object.entries(typographyFiles)
-  const iterableUtilFiles = Object.entries(utilFiles)
-  const iterablePageFiles = Object.entries(pageFiles)
-  const iterableExtendFiles = Object.entries(extendFiles)
-  // returns an array of paths, /accordion from /src/routes/components/accordion.md
-  const allComponents = await Promise.all(
-    iterableComponentFiles.map(async ([path]) => {
-      const filePath = path.slice(22, -3)
-      return filePath
-    })
-  )
-  // returns an array of paths, /radio from /src/routes/forms/radio.md
-  const allForms = await Promise.all(
-    iterableFormFiles.map(async ([path]) => {
-      const filePath = path.slice(17, -3)
-      return filePath
-    })
-  )
-  // returns an array of paths, /hr from /src/routes/typography/hr.md
-  const allTypographys = await Promise.all(
-    iterableTypographyFiles.map(async ([path]) => {
-      const filePath = path.slice(22, -3)
-      return filePath
-    })
-  )
-  // returns an array of paths, /closebutton from /src/routes/utilities/closebutton.md
-  const allUtils = await Promise.all(
-    iterableUtilFiles.map(async ([path]) => {
-      const filePath = path.slice(21, -3)
-      return filePath
-    })
-  )
-  // returns an array of paths, /about from /src/routes/pages/about.md
-  const allPages = await Promise.all(
-    iterablePageFiles.map(async ([path]) => {
-      const filePath = path.slice(17, -3)
-      return filePath
-    })
-  )
-  // returns an array of paths, /icons from /src/routes/extend/icons.md
-  const allExtends = await Promise.all(
-    iterableExtendFiles.map(async ([path]) => {
-      const filePath = path.slice(18, -3)
-      return filePath
-    })
-  )
-
-  // check if pathname is included itn allComponents
-  if (allComponents.includes(event.url.pathname)) {
-    // redirect
-    return Response.redirect(`${event.url.origin}/components${event.url.pathname}`, 301)
-  } else if (allForms.includes(event.url.pathname)) {
-    return Response.redirect(`${event.url.origin}/forms${event.url.pathname}`, 301)
-  } else if (allTypographys.includes(event.url.pathname)) {
-    return Response.redirect(`${event.url.origin}/typography${event.url.pathname}`, 301)
-  } else if (allPages.includes(event.url.pathname)) {
-    return Response.redirect(`${event.url.origin}/pages${event.url.pathname}`, 301)
-  } else if (allExtends.includes(event.url.pathname)) {
-    return Response.redirect(`${event.url.origin}/extend${event.url.pathname}`, 301)
-  } else if (allUtils.includes(event.url.pathname)) {
-    return Response.redirect(`${event.url.origin}/utilities${event.url.pathname}`, 301)
-  }
-
-  return await resolve(event);
-}