Add svelte-ux Vite alias and update all docs (#393)

techniq · Jun 14, 2024 · f096a38 · f096a38
1 parent 8164dc3
commit f096a38
Show file tree

Hide file tree

Showing 116 changed files with 295 additions and 453 deletions.
diff --git a/.changeset/early-elephants-marry.md b/.changeset/early-elephants-marry.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Add `popover` action to top-level exports
diff --git a/packages/svelte-ux/src/docs/Header1.svelte b/packages/svelte-ux/src/docs/Header1.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SectionDivider from '$lib/components/SectionDivider.svelte';
+  import { SectionDivider } from 'svelte-ux';
 </script>
 
 <!--

diff --git a/packages/svelte-ux/src/lib/actions/index.ts b/packages/svelte-ux/src/lib/actions/index.ts
@@ -4,6 +4,7 @@ export * from './layout.js';
 export * from './mouse.js';
 export * from './multi.js';
 export * from './observer.js';
+export * from './popover.js';
 export * from './portal.js';
 export * from './scroll.js';
 export * from './spotlight.js';

diff --git a/packages/svelte-ux/src/lib/utils/index.ts b/packages/svelte-ux/src/lib/utils/index.ts
@@ -1,5 +1,5 @@
 // top-level exports
-export { formatDate } from './date.js';
+export { formatDate, getDateFuncsByPeriodType } from './date.js';
 export { PeriodType, DayOfWeek, DateToken } from './date_types.js';
 export * from './date_types.js';
 export { getDuration, humanizeDuration, DurationUnits } from './duration.js';

diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
@@ -4,29 +4,30 @@
   import 'prism-themes/themes/prism-vsc-dark-plus.css';
   import { mdiArrowTopRight, mdiDotsVertical, mdiGithub, mdiTwitter } from '@mdi/js';
 
-  import AppBar from '$lib/components/AppBar.svelte';
-  import AppLayout from '$lib/components/AppLayout.svelte';
-  import Button from '$lib/components/Button.svelte';
-  import MenuButton from '$lib/components/MenuButton.svelte';
+  import {
+    AppBar,
+    AppLayout,
+    Button,
+    MenuButton,
+    QuickSearch,
+    ThemeInit,
+    ThemeSelect,
+    ThemeSwitch,
+    Tooltip,
+    settings,
+    lgScreen,
+    createLocaleSettings,
+    entries,
+  } from 'svelte-ux';
+
   import NavMenu from './_NavMenu.svelte';
-  import QuickSearch from '$lib/components/QuickSearch.svelte';
-  import ThemeInit from '$lib/components/ThemeInit.svelte';
-  import ThemeSelect from '$lib/components/ThemeSelect.svelte';
-  import ThemeSwitch from '$lib/components/ThemeSwitch.svelte';
-  import Tooltip from '$lib/components/Tooltip.svelte';
+  import LanguageSelect from '$lib/components/LanguageSelect.svelte';
 
   import { dev } from '$app/environment';
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/stores';
 
-  import { settings } from '$lib/components/settings.js';
-  import { lgScreen } from '$lib/stores/matchMedia.js';
-
-  import { createLocaleSettings } from '$lib/utils/locale.js';
-  import LanguageSelect from '$lib/components/LanguageSelect.svelte';
-
   import './app.css';
-  import { entries } from '$lib/types/typeHelpers.js';
 
   export let data;
 

diff --git a/packages/svelte-ux/src/routes/+page.svelte b/packages/svelte-ux/src/routes/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
+  import { Kbd, ToggleGroup, ToggleOption } from 'svelte-ux';
+
   import Code from '$lib/components/Code.svelte';
-  import Kbd from '$lib/components/Kbd.svelte';
-  import ToggleGroup from '$lib/components/ToggleGroup.svelte';
-  import ToggleOption from '$lib/components/ToggleOption.svelte';
 
   let selectedTab = 'cli';
 </script>

diff --git a/packages/svelte-ux/src/routes/_NavMenu.svelte b/packages/svelte-ux/src/routes/_NavMenu.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+  import { NavItem } from 'svelte-ux';
+
   import { page } from '$app/stores';
-  import NavItem from '$lib/components/NavItem.svelte';
   import { entries } from '$lib/types/typeHelpers.js';
   import { mdiCog, mdiFormatListBulleted, mdiHome, mdiPalette } from '@mdi/js';
 

diff --git a/packages/svelte-ux/src/routes/changelog/+page.svelte b/packages/svelte-ux/src/routes/changelog/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { marked } from 'marked';
+  import { TableOfContents } from 'svelte-ux';
 
   import changelog from '../../../CHANGELOG.md?raw';
-  import TableOfContents from '$lib/components/TableOfContents.svelte';
 
   function sanitize(str: string) {
     return str.replace(/</g, '\\<').replace(/>/g, '\\>');

diff --git a/packages/svelte-ux/src/routes/customization/+layout.svelte b/packages/svelte-ux/src/routes/customization/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import TableOfContents from '$lib/components/TableOfContents.svelte';
+  import { TableOfContents } from 'svelte-ux';
 </script>
 
 <div class="grid grid-cols-[1fr,auto] gap-6 pt-2 pb-4">

diff --git a/packages/svelte-ux/src/routes/customization/+page.md b/packages/svelte-ux/src/routes/customization/+page.md
@@ -1,8 +1,6 @@
-<script>
-  import Button from '$lib/components/Button.svelte';
+<script lang="ts">
+  import { Button, ThemeSelect, ThemeSwitch } from 'svelte-ux';
   import Preview from '$lib/components/Preview.svelte';
-  import ThemeSelect from '$lib/components/ThemeSelect.svelte';
-  import ThemeSwitch from '$lib/components/ThemeSwitch.svelte';
 </script>
 
 # Customization

diff --git a/packages/svelte-ux/src/routes/docs/+layout.svelte b/packages/svelte-ux/src/routes/docs/+layout.svelte
@@ -15,20 +15,24 @@
     mdiLink,
   } from '@mdi/js';
 
-  import ApiDocs from '$lib/components/ApiDocs.svelte';
-  import Button from '$lib/components/Button.svelte';
+  import {
+    ApiDocs,
+    Button,
+    Icon,
+    ListItem,
+    TableOfContents,
+    toTitleCase,
+    cls,
+    xlScreen,
+    settings,
+    getSettings,
+  } from 'svelte-ux';
+
   import Code from '$lib/components/Code.svelte';
-  import Icon from '$lib/components/Icon.svelte';
-  import ListItem from '$lib/components/ListItem.svelte';
-  import TableOfContents from '$lib/components/TableOfContents.svelte';
+  import ViewSourceButton from '$docs/ViewSourceButton.svelte';
 
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import { settings, getSettings } from '$lib/components/settings.js';
-  import ViewSourceButton from '$docs/ViewSourceButton.svelte';
-  import { xlScreen } from '$lib/stores/matchMedia.js';
-  import { cls } from '$lib/utils/styles.js';
-  import { toTitleCase } from '$lib/utils/string.js';
 
   $: [type, name] = $page.url.pathname.split('/').slice(2) ?? [];
   $: title = $page.data.meta?.title ?? name;

diff --git a/packages/svelte-ux/src/routes/docs/actions/dataBackground/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/dataBackground/+page.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
   import { sort } from 'd3-array';
 
+  import {
+    Button,
+    Field,
+    NumberStepper,
+    Switch,
+    ToggleGroup,
+    ToggleOption,
+    TweenedValue,
+    cls,
+    dataBackground,
+  } from 'svelte-ux';
+
   import Preview from '$lib/components/Preview.svelte';
-  import Button from '$lib/components/Button.svelte';
   import Code from '$lib/components/Code.svelte';
-  import TweenedValue from '$lib/components/TweenedValue.svelte';
 
-  import { dataBackground } from '$lib/actions/dataBackground.js';
   import { randomInteger } from '$lib/utils/number.js';
-  import ToggleGroup from '$lib/components/ToggleGroup.svelte';
-  import ToggleOption from '$lib/components/ToggleOption.svelte';
-  import Field from '$lib/components/Field.svelte';
-  import Switch from '$lib/components/Switch.svelte';
-  import NumberStepper from '$lib/components/NumberStepper.svelte';
-  import { cls } from '$lib/utils/styles.js';
 
   const originalDomain: [number, number] = [-100, 100];
 

diff --git a/packages/svelte-ux/src/routes/docs/actions/input/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/input/+page.svelte
@@ -1,14 +1,8 @@
 <script lang="ts">
+  import { autoFocus, autoHeight, blurOnEscape, selectOnFocus, debounceEvent } from 'svelte-ux';
+
   import Preview from '$lib/components/Preview.svelte';
   import Code from '$lib/components/Code.svelte';
-
-  import {
-    autoFocus,
-    autoHeight,
-    blurOnEscape,
-    selectOnFocus,
-    debounceEvent,
-  } from '$lib/actions/input.js';
 </script>
 
 <h1>Usage</h1>

diff --git a/packages/svelte-ux/src/routes/docs/actions/layout/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/layout/+page.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
+  import { Button, remainingViewportHeight, remainingViewportWidth, overflow } from 'svelte-ux';
+
   import Preview from '$lib/components/Preview.svelte';
-  import Button from '$lib/components/Button.svelte';
   import Code from '$lib/components/Code.svelte';
   import Blockquote from '$docs/Blockquote.svelte';
 
-  import {
-    remainingViewportHeight,
-    remainingViewportWidth,
-    overflow,
-  } from '$lib/actions/layout.js';
-
   let overflowX = 0;
   let overflowY = 0;
   let overflowItems = 1;

diff --git a/packages/svelte-ux/src/routes/docs/actions/mouse/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/mouse/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { spring } from 'svelte/motion';
+  import { longpress, movable } from 'svelte-ux';
 
   import Preview from '$lib/components/Preview.svelte';
   import Code from '$lib/components/Code.svelte';
-  import { longpress, movable } from '$lib/actions/mouse.js';
 
   let longpressed = false;
 

diff --git a/packages/svelte-ux/src/routes/docs/actions/multi/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/multi/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+  import { multi } from 'svelte-ux';
+
   import Preview from '$lib/components/Preview.svelte';
   import Code from '$lib/components/Code.svelte';
-
-  import { multi } from '$lib/actions/multi.js';
 </script>
 
 <h1>Usage</h1>

diff --git a/packages/svelte-ux/src/routes/docs/actions/observer/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/observer/+page.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
+  import { Toggle, resize, intersection, mutate } from 'svelte-ux';
 
   import Preview from '$lib/components/Preview.svelte';
   import Blockquote from '$docs/Blockquote.svelte';
   import Code from '$lib/components/Code.svelte';
-  import Toggle from '$lib/components/Toggle.svelte';
-
-  import { resize, intersection, mutate } from '$lib/actions/observer.js';
 </script>
 
 <h1>Usage</h1>

diff --git a/packages/svelte-ux/src/routes/docs/actions/popover/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/popover/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+  import { popover } from 'svelte-ux';
+
   import Preview from '$lib/components/Preview.svelte';
   import Blockquote from '$docs/Blockquote.svelte';
   import Code from '$lib/components/Code.svelte';
-
-  import { popover } from '$lib/actions/popover.js';
 </script>
 
 <h1>Usage</h1>

diff --git a/packages/svelte-ux/src/routes/docs/actions/portal/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/portal/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+  import { Button, portal, type PortalOptions } from 'svelte-ux';
+
   import Preview from '$lib/components/Preview.svelte';
   import Code from '$lib/components/Code.svelte';
-  import { portal, type PortalOptions } from '$lib/actions/portal.js';
-  import Button from '$lib/components/Button.svelte';
 
   let optionsBasic: PortalOptions = false;
   let optionsAnscestor: PortalOptions = false;

diff --git a/packages/svelte-ux/src/routes/docs/actions/scroll/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/scroll/+page.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
   import { flip } from 'svelte/animate';
+  import { Button, scrollIntoView, scrollFade, scrollShadow, cls } from 'svelte-ux';
 
-  import Button from '$lib/components/Button.svelte';
   import Code from '$lib/components/Code.svelte';
   import Preview from '$lib/components/Preview.svelte';
 
-  import { scrollIntoView, scrollFade, scrollShadow } from '$lib/actions/scroll.js';
-  import { cls } from '$lib/utils/styles.js';
-
   let filterItems = false;
 
   const itemCount = 30;

diff --git a/packages/svelte-ux/src/routes/docs/actions/spotlight/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/spotlight/+page.svelte
@@ -1,13 +1,9 @@
 <script lang="ts">
-  import { flip } from 'svelte/animate';
+  import { spotlight, cls } from 'svelte-ux';
 
-  import Button from '$lib/components/Button.svelte';
   import Code from '$lib/components/Code.svelte';
   import Preview from '$lib/components/Preview.svelte';
 
-  import { spotlight } from '$lib/actions/spotlight.js';
-  import { cls } from '$lib/utils/styles.js';
-
   const itemCount = 12;
   $: items = Array.from({ length: itemCount }).map((_, i) => `Item ${i + 1}`);
 </script>

diff --git a/packages/svelte-ux/src/routes/docs/actions/sticky/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/sticky/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+  import { sticky, stickyContext } from 'svelte-ux';
+
   import Preview from '$lib/components/Preview.svelte';
   import Blockquote from '$docs/Blockquote.svelte';
   import Code from '$lib/components/Code.svelte';
-
-  import { sticky, stickyContext } from '$lib/actions/sticky.js';
 </script>
 
 <h1>Usage</h1>

diff --git a/packages/svelte-ux/src/routes/docs/actions/styleProps/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/styleProps/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
+  import { TextField, styleProps } from 'svelte-ux';
+
   import Preview from '$lib/components/Preview.svelte';
   import Code from '$lib/components/Code.svelte';
-  import TextField from '$lib/components/TextField.svelte';
-
-  import { styleProps } from '$lib/actions/styleProps.js';
 
   let background = '#ddd';
   let border = '1px solid #aaa';

diff --git a/packages/svelte-ux/src/routes/docs/actions/table/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/table/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+  import { tableCell } from 'svelte-ux';
+
   import Preview from '$lib/components/Preview.svelte';
   import Code from '$lib/components/Code.svelte';
-
-  import { tableCell } from '$lib/actions/table.js';
 </script>
 
 <h1>Usage</h1>

diff --git a/packages/svelte-ux/src/routes/docs/components/AppBar/+page.svelte b/packages/svelte-ux/src/routes/docs/components/AppBar/+page.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
+  import { AppBar, Button, ListItem, cls } from 'svelte-ux';
   import { mdiRefresh, mdiChevronRight, mdiMicrosoftXboxControllerMenu } from '@mdi/js';
 
-  import AppBar from '$lib/components/AppBar.svelte';
-  import Button from '$lib/components/Button.svelte';
   import Preview from '$lib/components/Preview.svelte';
-  import ListItem from '$lib/components/ListItem.svelte';
-  import { cls } from '$lib/utils/styles.js';
 </script>
 
 <h1>Examples</h1>

diff --git a/packages/svelte-ux/src/routes/docs/components/Avatar/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Avatar/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
+  import { Avatar, Icon } from 'svelte-ux';
   import { mdiAccount } from '@mdi/js';
 
-  import Avatar from '$lib/components/Avatar.svelte';
-  import Icon from '$lib/components/Icon.svelte';
   import Preview from '$lib/components/Preview.svelte';
 </script>
 

diff --git a/packages/svelte-ux/src/routes/docs/components/Badge/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Badge/+page.svelte
@@ -1,12 +1,8 @@
 <script lang="ts">
+  import { Badge, Button, Icon, NumberStepper } from 'svelte-ux';
   import { mdiFilterVariant, mdiPlus, mdiMinus } from '@mdi/js';
 
-  import Badge from '$lib/components/Badge.svelte';
-  import Button from '$lib/components/Button.svelte';
-  import Icon from '$lib/components/Icon.svelte';
-  import NumberStepper from '$lib/components/NumberStepper.svelte';
   import Preview from '$lib/components/Preview.svelte';
-  import SectionDivider from '$lib/components/SectionDivider.svelte';
 
   let value = 1;
 </script>