├── .changeset ├── README.md └── config.json ├── .editorconfig ├── .gitattributes ├── .github ├── FUNDING.yml ├── renovate.json5 └── workflows │ ├── build-preview.yml │ ├── ci.yml │ ├── deploy-preview.yml │ ├── deploy-prod.yml │ ├── pkg-pr-new.yml │ └── release.yml ├── .gitignore ├── .npmrc ├── .prettierrc ├── LICENSE ├── README.md ├── package.json ├── packages └── svelte-ux │ ├── .prettierignore │ ├── CHANGELOG.md │ ├── CHANGELOG_COMMITS.md │ ├── LICENSE │ ├── README.md │ ├── git-changelog.js │ ├── mdsvex.config.js │ ├── package.json │ ├── postcss.config.cjs │ ├── src │ ├── app.d.ts │ ├── app.html │ ├── docs │ │ ├── Blockquote.svelte │ │ ├── Header1.svelte │ │ ├── Layout.svelte │ │ ├── Link.svelte │ │ └── ViewSourceButton.svelte │ ├── lib │ │ ├── components │ │ │ ├── ApiDocs.d.ts │ │ │ ├── ApiDocs.svelte │ │ │ ├── AppBar.svelte │ │ │ ├── AppLayout.svelte │ │ │ ├── Avatar.svelte │ │ │ ├── Backdrop.svelte │ │ │ ├── Badge.svelte │ │ │ ├── BarStack.svelte │ │ │ ├── Breadcrumb.svelte │ │ │ ├── Button.svelte │ │ │ ├── ButtonGroup.svelte │ │ │ ├── Card.svelte │ │ │ ├── Checkbox.svelte │ │ │ ├── Code.svelte │ │ │ ├── Collapse.svelte │ │ │ ├── CopyButton.svelte │ │ │ ├── DateButton.svelte │ │ │ ├── DateField.svelte │ │ │ ├── DatePickerField.svelte │ │ │ ├── DateRange.svelte │ │ │ ├── DateRangeDisplay.svelte │ │ │ ├── DateRangeField.svelte │ │ │ ├── DateSelect.svelte │ │ │ ├── Dialog.svelte │ │ │ ├── DividerDot.svelte │ │ │ ├── Drawer.svelte │ │ │ ├── Duration.svelte │ │ │ ├── EmptyMessage.svelte │ │ │ ├── ErrorNotification.svelte │ │ │ ├── ExpansionPanel.svelte │ │ │ ├── Field.svelte │ │ │ ├── Form.svelte │ │ │ ├── Gooey.svelte │ │ │ ├── Grid.svelte │ │ │ ├── Header.svelte │ │ │ ├── Icon.svelte │ │ │ ├── InfiniteScroll.svelte │ │ │ ├── Input.svelte │ │ │ ├── Kbd.svelte │ │ │ ├── LanguageSelect.svelte │ │ │ ├── Lazy.svelte │ │ │ ├── ListItem.svelte │ │ │ ├── Maybe.svelte │ │ │ ├── Menu.svelte │ │ │ ├── MenuButton.svelte │ │ │ ├── MenuField.svelte │ │ │ ├── MenuItem.svelte │ │ │ ├── Month.svelte │ │ │ ├── MonthList.svelte │ │ │ ├── MonthListByYear.svelte │ │ │ ├── MultiSelect.svelte │ │ │ ├── MultiSelectField.svelte │ │ │ ├── MultiSelectMenu.svelte │ │ │ ├── MultiSelectOption.svelte │ │ │ ├── NavItem.svelte │ │ │ ├── Notification.svelte │ │ │ ├── NumberStepper.svelte │ │ │ ├── Overflow.svelte │ │ │ ├── Overlay.svelte │ │ │ ├── Paginate.svelte │ │ │ ├── Pagination.svelte │ │ │ ├── Popover.svelte │ │ │ ├── Preview.svelte │ │ │ ├── Progress.svelte │ │ │ ├── ProgressCircle.svelte │ │ │ ├── QuickSearch.svelte │ │ │ ├── Radio.svelte │ │ │ ├── RangeField.svelte │ │ │ ├── RangeSlider.svelte │ │ │ ├── ResponsiveMenu.svelte │ │ │ ├── ScrollContainer.svelte │ │ │ ├── ScrollingValue.svelte │ │ │ ├── SectionDivider.svelte │ │ │ ├── SelectField.svelte │ │ │ ├── Selection.svelte │ │ │ ├── Settings.svelte │ │ │ ├── Shine.svelte │ │ │ ├── SpringValue.svelte │ │ │ ├── Stack.svelte │ │ │ ├── State.svelte │ │ │ ├── Step.svelte │ │ │ ├── Steps.svelte │ │ │ ├── StoreSubscribe.svelte │ │ │ ├── Switch.svelte │ │ │ ├── Tab.svelte │ │ │ ├── Table.svelte │ │ │ ├── TableOfContents.svelte │ │ │ ├── TableOrderIcon.svelte │ │ │ ├── Tabs.svelte │ │ │ ├── TextField.svelte │ │ │ ├── ThemeInit.svelte │ │ │ ├── ThemeSelect.svelte │ │ │ ├── ThemeSwitch.svelte │ │ │ ├── Tilt.svelte │ │ │ ├── Timeline.svelte │ │ │ ├── TimelineEvent.svelte │ │ │ ├── Toggle.svelte │ │ │ ├── ToggleButton.svelte │ │ │ ├── ToggleGroup.svelte │ │ │ ├── ToggleOption.svelte │ │ │ ├── TogglePanel.svelte │ │ │ ├── Tooltip.svelte │ │ │ ├── TreeList.svelte │ │ │ ├── TweenedValue.svelte │ │ │ ├── ViewportCenter.svelte │ │ │ ├── YearList.svelte │ │ │ ├── _SelectListOptions.svelte │ │ │ ├── index.ts │ │ │ ├── settings.ts │ │ │ └── theme.ts │ │ ├── index.ts │ │ ├── placeholder.test.ts │ │ ├── plugins │ │ │ ├── svelte.js │ │ │ └── vite.js │ │ ├── types │ │ │ └── index.ts │ │ └── utils │ │ │ └── icons.ts │ ├── routes │ │ ├── +error.svelte │ │ ├── +layout.server.ts │ │ ├── +layout.svelte │ │ ├── +layout.ts │ │ ├── +page.svelte │ │ ├── _NavMenu.svelte │ │ ├── app.css │ │ ├── changelog │ │ │ └── +page.svelte │ │ ├── customization │ │ │ ├── +layout.svelte │ │ │ └── +page.md │ │ ├── docs │ │ │ ├── +layout.svelte │ │ │ └── components │ │ │ │ ├── AppBar │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── AppLayout │ │ │ │ ├── +page.md │ │ │ │ └── +page.ts │ │ │ │ ├── Avatar │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Badge │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── BarStack │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Breadcrumb │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Button │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── ButtonGroup │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Card │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Checkbox │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Collapse │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── CopyButton │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── DateField │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── DatePickerField │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── DateRange │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── DateRangeField │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Dialog │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Drawer │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Duration │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── ExpansionPanel │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Field │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Form │ │ │ │ ├── +page.server.ts │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Gooey │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Grid │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── GridTailwind │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Icon │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── InfiniteScroll │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Input │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Lazy │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── ListItem │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Menu │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── MenuButton │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── MenuField │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── MenuItem │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Month │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── MonthList │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── MonthListByYear │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── MultiSelect │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── MultiSelectField │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── MultiSelectMenu │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── NavItem │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Notification │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── NumberStepper │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Overflow │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Overlay │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Paginate │ │ │ │ ├── +page.md │ │ │ │ └── +page.ts │ │ │ │ ├── Pagination │ │ │ │ ├── +page.md │ │ │ │ └── +page.ts │ │ │ │ ├── Popover │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Progress │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── ProgressCircle │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Radio │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── RangeField │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── RangeSlider │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── ResponsiveMenu │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── ScrollContainer │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── ScrollingValue │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── SelectField │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Selection │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Settings │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Shine │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── SpringValue │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Stack │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── StackTailwind │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── State │ │ │ │ ├── +page.md │ │ │ │ └── +page.ts │ │ │ │ ├── Steps │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── StoreSubscribe │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Switch │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Table │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── TableOfContents │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Tabs │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── TextField │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── ThemeInit │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── ThemeSelect │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── ThemeSwitch │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Tilt │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Timeline │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Toggle │ │ │ │ ├── +page.md │ │ │ │ └── +page.ts │ │ │ │ ├── ToggleButton │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── ToggleGroup │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── Tooltip │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── TreeList │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ ├── TweenedValue │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ │ └── YearList │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ └── theme │ │ │ ├── +page.server.ts │ │ │ ├── +page.svelte │ │ │ ├── ColorField.svelte │ │ │ └── colors.ts │ └── vite-plugin-sveld.d.ts │ ├── static │ └── favicon.jpg │ ├── svelte.config.js │ ├── tailwind.config.cjs │ ├── themes.json │ ├── tsconfig.json │ └── vite.config.js ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── static └── logos └── logo.jpg /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json", 3 | "changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "techniq/svelte-ux" }], 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [] 11 | } 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | indent_style = space 7 | indent_size = 2 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [techniq] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko Fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/renovate.json5: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | 4 | // Extend the base config 5 | "extends": ["config:base", ":semanticCommitTypeAll(chore)"], 6 | 7 | // Some tuning that works well for my repos 8 | "automerge": false, 9 | "rangeStrategy": "replace", 10 | "baseBranches": ["main"], 11 | 12 | // For a nice dashboard 13 | "dependencyDashboardTitle": "📦 Dependency Dashboard", 14 | "labels": ["dependencies"], 15 | 16 | // Avoid noise in the middle of the day 17 | "timezone": "EST", 18 | "schedule": ["after 1am and before 5am"], 19 | 20 | "packageRules": [ 21 | // Let's update each patch for these libs 22 | { 23 | "matchUpdateTypes": ["patch"], 24 | "enabled": false, 25 | "excludePackagePrefixes": ["layerchart", "svelte-ux"] 26 | }, 27 | // devDependencies will be prioritized last 28 | { 29 | "matchDepTypes": ["devDependencies"], 30 | "prPriority": -1 31 | }, 32 | // Groupings 33 | { 34 | "groupName": "Svelte", 35 | "matchPackagePrefixes": ["@sveltejs", "svelte-check", "svelte"] 36 | }, 37 | { 38 | "groupName": "Tailwind", 39 | "matchPackagePrefixes": [ 40 | "@tailwindcss", 41 | "tailwindcss", 42 | "tailwind-scrollbar" 43 | ] 44 | } 45 | ] 46 | } -------------------------------------------------------------------------------- /.github/workflows/build-preview.yml: -------------------------------------------------------------------------------- 1 | name: Build Preview Deployment 2 | 3 | # cancel in-progress runs on new commits to same PR (github.event.number) 4 | concurrency: 5 | group: ${{ github.workflow }}-${{ github.event.number || github.sha }} 6 | cancel-in-progress: true 7 | 8 | on: 9 | pull_request: 10 | types: [opened, synchronize] 11 | 12 | jobs: 13 | build-preview: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - uses: actions/checkout@v4 17 | - uses: pnpm/action-setup@v4 18 | - uses: actions/setup-node@v4 19 | with: 20 | node-version: 20.x 21 | cache: pnpm 22 | 23 | - name: Install dependencies 24 | run: pnpm install 25 | 26 | - name: Build site 27 | run: pnpm build 28 | 29 | - name: Upload build artifact 30 | uses: actions/upload-artifact@v4 31 | with: 32 | name: preview-build 33 | path: packages/svelte-ux/.svelte-kit 34 | include-hidden-files: true 35 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node 2 | # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs 3 | 4 | name: CI 5 | 6 | on: 7 | push: 8 | branches: ['main'] 9 | pull_request: 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | 15 | strategy: 16 | matrix: 17 | node-version: [20.x] 18 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 19 | 20 | steps: 21 | - uses: actions/checkout@v4 22 | - uses: pnpm/action-setup@v4.1.0 23 | - uses: actions/setup-node@v4 24 | with: 25 | node-version: ${{ matrix.node-version }} 26 | cache: pnpm 27 | 28 | - run: pnpm install --frozen-lockfile 29 | 30 | - run: pnpm check 31 | 32 | - run: pnpm lint 33 | 34 | - run: pnpm test:unit 35 | env: 36 | CI: true 37 | 38 | - run: pnpm build 39 | -------------------------------------------------------------------------------- /.github/workflows/deploy-preview.yml: -------------------------------------------------------------------------------- 1 | name: Upload Preview Deployment 2 | 3 | on: 4 | workflow_run: 5 | workflows: [Build Preview Deployment] 6 | types: 7 | - completed 8 | 9 | permissions: 10 | actions: read 11 | deployments: write 12 | contents: read 13 | pull-requests: write 14 | 15 | jobs: 16 | deploy-preview: 17 | runs-on: ubuntu-latest 18 | if: ${{ github.event.workflow_run.conclusion == 'success' }} 19 | steps: 20 | - name: Download build artifact 21 | uses: actions/download-artifact@v4 22 | id: preview-build-artifact 23 | with: 24 | name: preview-build 25 | path: build 26 | github-token: ${{ secrets.GITHUB_TOKEN }} 27 | run-id: ${{ github.event.workflow_run.id }} 28 | 29 | - name: Deploy to Cloudflare Pages 30 | uses: AdrianGonz97/refined-cf-pages-action@v1 31 | with: 32 | apiToken: ${{ secrets.CF_API_TOKEN }} 33 | accountId: ${{ secrets.CF_ACCOUNT_ID }} 34 | githubToken: ${{ secrets.GITHUB_TOKEN }} 35 | projectName: svelte-ux 36 | deploymentName: Preview 37 | directory: ${{ steps.preview-build-artifact.outputs.download-path }}/cloudflare 38 | -------------------------------------------------------------------------------- /.github/workflows/deploy-prod.yml: -------------------------------------------------------------------------------- 1 | name: Production Deployment 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | paths: 8 | - packages/svelte-ux/** 9 | 10 | jobs: 11 | deploy-production: 12 | runs-on: ubuntu-latest 13 | permissions: 14 | contents: read 15 | deployments: write 16 | name: Deploy Production Site to Cloudflare Pages 17 | steps: 18 | - uses: actions/checkout@v4 19 | - uses: pnpm/action-setup@v4 20 | - uses: actions/setup-node@v4 21 | with: 22 | node-version: 20.x 23 | cache: pnpm 24 | 25 | - name: Install dependencies 26 | run: pnpm install 27 | 28 | - name: Build site 29 | run: pnpm build 30 | 31 | - name: Deploy to Cloudflare Pages 32 | uses: AdrianGonz97/refined-cf-pages-action@v1 33 | with: 34 | apiToken: ${{ secrets.CF_API_TOKEN }} 35 | accountId: ${{ secrets.CF_ACCOUNT_ID }} 36 | githubToken: ${{ secrets.GITHUB_TOKEN }} 37 | projectName: svelte-ux 38 | directory: ./.svelte-kit/cloudflare 39 | workingDirectory: packages/svelte-ux 40 | deploymentName: Production 41 | -------------------------------------------------------------------------------- /.github/workflows/pkg-pr-new.yml: -------------------------------------------------------------------------------- 1 | name: Package PR 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | - uses: actions/checkout@v4 11 | - uses: pnpm/action-setup@v4.1.0 12 | - uses: actions/setup-node@v4 13 | with: 14 | node-version: 20.x 15 | cache: pnpm 16 | 17 | - run: pnpm install --frozen-lockfile 18 | 19 | - run: pnpm build 20 | 21 | - run: pnpm package 22 | 23 | - run: pnpx pkg-pr-new publish --compact './packages/*' 24 | 25 | - run: ls -R . 26 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - next 8 | 9 | permissions: {} 10 | jobs: 11 | release: 12 | # prevents this action from running on forks 13 | if: github.repository == 'techniq/svelte-ux' 14 | permissions: 15 | contents: write # to create release (changesets/action) 16 | pull-requests: write # to create pull request (changesets/action) 17 | name: Release 18 | runs-on: ubuntu-latest 19 | steps: 20 | - name: Checkout Repo 21 | uses: actions/checkout@v4 22 | with: 23 | # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits 24 | fetch-depth: 0 25 | - uses: pnpm/action-setup@v4.1.0 26 | - name: Setup Node.js 27 | uses: actions/setup-node@v4 28 | with: 29 | node-version: 20.x 30 | cache: pnpm 31 | 32 | - run: pnpm install --frozen-lockfile 33 | 34 | - name: Create Release Pull Request or Publish to npm 35 | id: changesets 36 | uses: changesets/action@v1 37 | with: 38 | # This expects you to have a script called release which does a build for your packages and calls changeset publish 39 | publish: pnpm changeset:release 40 | version: pnpm changeset:version 41 | env: 42 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 43 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 44 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | tsconfig.tsbuildinfo 4 | coverage/ 5 | .next/ 6 | .idea/ 7 | .svelte-kit/ 8 | .env 9 | .DS_Store 10 | 11 | test-* -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | 3 | # Fix "ERR_PNPM_BAD_PM_VERSION  This project is configured to use v9.1.1 of pnpm. Your current pnpm is v9.0.4" on Vercel 4 | # https://github.com/pnpm/pnpm/issues/8087#issuecomment-2118489643 5 | package-manager-strict=false 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "printWidth": 100, 4 | "trailingComma": "es5", 5 | "plugins": ["prettier-plugin-svelte"], 6 | "overrides": [ 7 | { 8 | "files": "*.svelte", 9 | "options": { 10 | "parser": "svelte" 11 | } 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2024 Sean Lynch 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-ux-monorepo", 3 | "version": "0.0.1", 4 | "author": "Sean Lynch ", 5 | "license": "MIT", 6 | "type": "module", 7 | "scripts": { 8 | "test:unit": "pnpm -r test:unit", 9 | "build": "rimraf packages/*/dist && pnpm -r build", 10 | "package": "pnpm -r package", 11 | "check": "pnpm -r check", 12 | "lint": "pnpm -r lint", 13 | "format": "pnpm -r format", 14 | "changeset": "changeset", 15 | "changeset:version": "changeset version", 16 | "changeset:release": "changeset publish", 17 | "up-deps": "pnpm update -r -i --latest" 18 | }, 19 | "devDependencies": { 20 | "@changesets/cli": "^2.27.8", 21 | "@svitejs/changesets-changelog-github-compact": "^1.2.0", 22 | "prettier-plugin-svelte": "^3.3.3", 23 | "rimraf": "6.0.1", 24 | "wrangler": "^4.14.4" 25 | }, 26 | "packageManager": "pnpm@10.5.1" 27 | } 28 | -------------------------------------------------------------------------------- /packages/svelte-ux/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /dist 5 | /.svelte-kit 6 | /package 7 | .env 8 | .env.* 9 | !.env.example 10 | coverage/ 11 | 12 | # Ignore files for PNPM, NPM and YARN 13 | pnpm-lock.yaml 14 | package-lock.json 15 | yarn.lock 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2024 Sean Lynch 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/svelte-ux/README.md: -------------------------------------------------------------------------------- 1 | # Svelte UX 2 | 3 | ![](https://img.shields.io/github/license/techniq/svelte-ux?style=flat) 4 | [![](https://img.shields.io/github/actions/workflow/status/techniq/svelte-ux/ci.yml?style=flat)](https://github.com/techniq/svelte-ux/actions/workflows/ci.yml) 5 | [![](https://img.shields.io/npm/v/svelte-ux?style=flat)](https://www.npmjs.com/package/svelte-ux) 6 | ![npm](https://img.shields.io/npm/dw/svelte-ux?style=flat&color=orange) 7 | 8 | ![](https://img.shields.io/github/license/svelte-ux?style=flat) 9 | [![](https://dcbadge.vercel.app/api/server/697JhMPD3t?style=flat)](https://discord.gg/697JhMPD3t) 10 | 11 | The projects aims to simplify building highly interactive and visual applications. It provides over 200 components, actions, stores, and utils, with many more planned. 12 | 13 | The components are built using Tailwind with extensibility and customization in mind through the use of theming, variants, granule class overrides, and slots. A rich design token system is also currently in the works. 14 | 15 | See also [LayerChart](https://layerchart.com) for a large collection of composable chart components to build a wide range of visualizations. 16 | 17 | ## Publishing 18 | 19 | - `npm run changeset` for each changelog worthy change 20 | - `npm run version` to bump `package.json` version based on changesets, materialize changesets into CHANGELOG.md 21 | - Commit as `Version bump to x.y.z` (TODO: automate) 22 | - `npm run publish` to publish version to npm 23 | - `git push --tags` to publish tags to Github 24 | -------------------------------------------------------------------------------- /packages/svelte-ux/git-changelog.js: -------------------------------------------------------------------------------- 1 | import { $ } from 'execa'; 2 | import * as fs from 'fs/promises'; 3 | 4 | const logs = (await $`git log --pretty=oneline`).stdout.split('\n'); 5 | 6 | const commitsByVersion = new Map(); 7 | let currentVersion = 'next'; 8 | commitsByVersion.set(currentVersion, []); 9 | 10 | for (const log of logs) { 11 | const [s1, sha, message] = log.match(/^(\w*) (.*)/); 12 | const [s2, version] = message?.match(/(\d+\.\d+\.\d+)/) ?? []; 13 | 14 | if (version) { 15 | currentVersion = version; 16 | commitsByVersion.set(currentVersion, []); 17 | } else { 18 | const commits = commitsByVersion.get(currentVersion); 19 | commits.push({ 20 | sha, 21 | message, 22 | }); 23 | } 24 | } 25 | 26 | let changelog = ''; 27 | for (const [version, commits] of commitsByVersion) { 28 | changelog += `## ${version}\n\n`; 29 | 30 | changelog += `### Commits\n\n`; 31 | 32 | for (const { sha, message } of commits) { 33 | changelog += `- ${message} ([${sha.slice( 34 | 0, 35 | 6 36 | )}](https://github.com/techniq/svelte-ux/commit/${sha}))\n`; 37 | } 38 | 39 | changelog += `\n`; 40 | } 41 | 42 | await fs.writeFile('CHANGELOG_COMMITS.md', changelog); 43 | -------------------------------------------------------------------------------- /packages/svelte-ux/mdsvex.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'node:url'; 2 | import { dirname } from 'node:path'; 3 | import slug from 'rehype-slug'; 4 | 5 | export default { 6 | extensions: ['.md', '.svx'], 7 | // https://github.com/pngwn/MDsveX/issues/556 8 | layout: dirname(fileURLToPath(import.meta.url)) + '/src/docs/Layout.svelte', 9 | rehypePlugins: [slug], 10 | // highlight: false 11 | }; 12 | -------------------------------------------------------------------------------- /packages/svelte-ux/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'tailwindcss/nesting': {}, 4 | tailwindcss: {}, 5 | autoprefixer: {}, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | // and what to do when importing types 4 | declare namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | 8 | interface PageData { 9 | meta: { 10 | title?: string; 11 | description?: string; 12 | source?: string; 13 | pageSource?: string; 14 | api?: SveldJson; 15 | features?: string[]; 16 | related?: string[]; 17 | hideUsage?: boolean; 18 | hideTableOfContents?: boolean; 19 | status?: string; 20 | }; 21 | } 22 | 23 | // interface PageState {} 24 | // interface Platform {} 25 | } 26 | 27 | // TODO: Can this be referenced from `@layerstack/svelte-actions` types.d.ts without breaking other things? 28 | // https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md 29 | declare namespace svelteHTML { 30 | interface HTMLAttributes { 31 | // use:intersection 32 | 'on:intersecting'?: (event: CustomEvent) => void; 33 | 34 | // use:mutate 35 | 'on:mutate'?: (event: CustomEvent) => void; 36 | 37 | // use:movable 38 | 'on:movestart'?: (event: CustomEvent<{ x: number; y: number }>) => void; 39 | 'on:move'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void; 40 | 'on:moveend'?: (event: CustomEvent<{ x: number; y: number }>) => void; 41 | 42 | // use:popover 43 | 'on:clickOutside'?: (event: CustomEvent) => void; 44 | 45 | // use:overflow 46 | 'on:overflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void; 47 | 48 | // use:longpress 49 | 'on:longpress'?: (event: CustomEvent) => void; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Svelte UX 7 | 11 | 12 | %sveltekit.head% 13 | 14 | 15 |
%sveltekit.body%
16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/docs/Blockquote.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2' 11 | )} 12 | > 13 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/docs/Header1.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/docs/Layout.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/docs/Link.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/docs/ViewSourceButton.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | {#if source} 18 | 19 | 20 | 25 |
26 |
27 |
{label}
28 |
{href}
29 |
30 | 31 | {#if href} 32 | 35 | {/if} 36 |
37 | 38 |
39 | 40 |
41 | 42 |
43 | 44 |
45 | 46 | 47 | {:else if href} 48 | 49 | 52 | 53 | {/if} 54 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/ApiDocs.d.ts: -------------------------------------------------------------------------------- 1 | // See: https://github.com/carbon-design-system/sveld/blob/main/src/ComponentParser.ts#L26 2 | // See: https://github.com/mattjennings/vite-plugin-sveld/blob/main/types.d.ts 3 | 4 | interface SveldProp { 5 | name: string; 6 | kind: 'let' | 'const' | 'function'; 7 | constant: boolean; 8 | type?: string; 9 | value?: any; 10 | description?: string; 11 | isFunction: boolean; 12 | isFunctionDeclaration: boolean; 13 | isRequired: boolean; 14 | reactive: boolean; 15 | } 16 | 17 | interface SveldSlot { 18 | name?: string; 19 | default: boolean; 20 | fallback?: string; 21 | slot_props?: string; 22 | description?: string; 23 | } 24 | 25 | interface ForwardedEvent { 26 | type: 'forwarded'; 27 | name: string; 28 | element: ComponentInlineElement | ComponentElement; 29 | } 30 | 31 | interface DispatchedEvent { 32 | type: 'dispatched'; 33 | name: string; 34 | detail?: any; 35 | description?: string; 36 | } 37 | 38 | type SvelteEvent = ForwardedEvent | DispatchedEvent; 39 | 40 | interface SveldRestProps { 41 | type: 'InlineComponent' | 'Element'; 42 | name: string; 43 | } 44 | 45 | interface SveldTypedefs { 46 | type: string; 47 | name: string; 48 | description?: string; 49 | ts: string; 50 | } 51 | 52 | interface SveldJson { 53 | props: SveldProp[]; 54 | slots: SveldSlot[]; 55 | events: SveldEvent[]; 56 | typedefs: SveldTypedefs[]; 57 | rest_props: SveldRestProps; 58 | moduleExports: SveldProp[]; 59 | componentComment?: string; 60 | extends?: { 61 | interface: string; 62 | import: string; 63 | }; 64 | } 65 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/AppBar.svelte: -------------------------------------------------------------------------------- 1 | 35 | 36 |
39 | {#if menuIcon} 40 | 41 |
63 | 64 | 65 | {#if head} 66 | {titleString} 67 | {/if} 68 | 69 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Avatar.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
28 | 29 | {#if icon} 30 | 31 | {/if} 32 | 33 |
34 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Backdrop.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
37 | 38 |
39 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/BarStack.svelte: -------------------------------------------------------------------------------- 1 | 30 | 31 |
32 | {#each data as item} 33 | {@const valuePercent = item.value / (total ?? sum(data, (d) => d.value))} 34 | 35 | {#if item.value} 36 | 58 | {/if} 59 | {/each} 60 |
61 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Breadcrumb.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 |
29 | {#each displayItems as item, index} 30 | 31 |
{item}
32 | 33 | 34 | {#if index < displayItems.length - 1} 35 | 36 | {#if divider} 37 |
{divider}
38 | {:else} 39 | 40 | {/if} 41 | 42 | {/if} 43 | {/each} 44 |
45 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Card.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | 33 | 34 |
44 | {#if loading} 45 | 46 | 47 | 48 | {/if} 49 | 50 | {#if title || subheading || $$slots.header} 51 |
52 | 53 |
54 | 55 |
56 | {/if} 57 | 58 | 59 | 60 | {#if $$slots.contents} 61 |
62 | 63 |
64 | {/if} 65 | 66 | {#if $$slots.actions} 67 |
68 | 69 |
70 | {/if} 71 |
72 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Code.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
22 | {#if source} 23 |
24 | 
27 |           {@html highlightedSource}
28 |
29 | 30 |
31 | 36 |
37 |
38 | {/if} 39 |
40 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/CopyButton.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | 44 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/DateSelect.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 | {#if periodType === PeriodType.Month || periodType === PeriodType.Quarter} 27 | 28 | {:else if periodType === PeriodType.CalendarYear} 29 | 30 | {:else if periodType === PeriodType.FiscalYearOctober} 31 | 37 | 38 | {:else} 39 | 40 | 41 | {/if} 42 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/DividerDot.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | • 9 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Duration.svelte: -------------------------------------------------------------------------------- 1 | 65 | 66 | {displayDuration} 67 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/EmptyMessage.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
20 | 21 |
22 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/ErrorNotification.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 21 |
22 | 23 |
24 |
{title}
25 | 26 |
27 | {#if description} 28 |
29 | {#each description.split('\n') as line} 30 |
{line}
31 | {/each} 32 |
33 | {/if} 34 |
35 | 36 |
37 | {#if hasDetails} 38 | 47 | {/if} 48 | 49 |
50 | 51 | 52 | 53 |
54 | {#if message} 55 | {#each message.split('\n') as msg} 56 |
{msg}
57 | {/each} 58 | {/if} 59 |
60 | 61 |
62 | {#if stackTrace} 63 |
64 |
Stacktrace:
65 | 
66 |             {stackTrace ?? ''}
67 |
68 |
69 | {/if} 70 |
71 | 72 |
73 | 74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/ExpansionPanel.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | 48 | 49 | 50 | 51 | {#if enabled} 52 |
53 | 54 |
55 | {/if} 56 | 57 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Form.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 |
{ 36 | const result = draft.commit(); 37 | if (!result || method === undefined) { 38 | // Prevent submitted to server if validation failed, or no server side action/method set 39 | e.preventDefault(); 40 | } 41 | }} 42 | on:reset={(e) => { 43 | e.preventDefault(); 44 | draft.revert(); 45 | }} 46 | class={cls(settingsClasses.root, className)} 47 | {...$$restProps} 48 | > 49 | 60 | 61 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Gooey.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | 31 | {#if blur} 32 | 33 | {/if} 34 | 35 | 44 | 45 | {#if composite} 46 | 47 | {/if} 48 | 49 | 50 | 51 |
56 | 57 |
58 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Header.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
24 | 25 | 26 |
27 | 28 | {#if title} 29 | {#if Array.isArray(title)} 30 | 31 | {:else} 32 |
{title}
33 | {/if} 34 | {/if} 35 | 36 | 37 | 38 | {#if subheading} 39 | {#if Array.isArray(subheading)} 40 | 44 | {:else} 45 |
{subheading}
46 | {/if} 47 | {/if} 48 | 49 |
50 | 51 | 52 |
53 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/InfiniteScroll.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | {#if !disabled} 17 | 18 |
{ 22 | if (e.detail.isIntersecting) { 23 | page += 1; 24 | } 25 | }} 26 | on:intersecting 27 | >
28 | {/if} 29 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Kbd.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 21 | {#if control} 22 | ⌃ 23 | {/if} 24 | 25 | {#if option} 26 | ⌥ 27 | {/if} 28 | 29 | {#if shift} 30 | ⇧ 31 | {/if} 32 | 33 | {#if command} 34 | ⌘ 35 | {/if} 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/LanguageSelect.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 | 50 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Lazy.svelte: -------------------------------------------------------------------------------- 1 | 33 | 34 |
{ 41 | if (e.detail.isIntersecting) { 42 | show = true; 43 | } else if (unmount) { 44 | height = e.detail.boundingClientRect.height; 45 | show = false; 46 | } 47 | }} 48 | on:intersecting 49 | style:min-height={typeof height === 'number' ? `${height}px` : height} 50 | {...$$restProps} 51 | class={cls('Lazy', settingsClasses.root, className)} 52 | > 53 | {#if show} 54 | 55 | {/if} 56 |
57 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Maybe.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | {#if self} 9 | 10 | 11 | 12 | {:else} 13 | 14 | {/if} 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/MenuItem.svelte: -------------------------------------------------------------------------------- 1 | 43 | 44 | 66 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/MonthList.svelte: -------------------------------------------------------------------------------- 1 | 32 | 33 | 34 | {#each getMonths(year) ?? [] as month (month.valueOf())} 35 | 43 | {/each} 44 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/MonthListByYear.svelte: -------------------------------------------------------------------------------- 1 | 32 | 33 |
34 | 35 | 36 | {#each years ?? [] as year (year)} 37 |
38 |
39 | {year} 40 |
41 |
42 | 43 |
44 |
45 | {/each} 46 | 47 | 48 |
49 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/NavItem.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | { 47 | // Close if use temporary drawer 48 | if (!$mdScreen) { 49 | $showDrawer = false; 50 | } 51 | }} 52 | > 53 | {#if $$slots.avatar} 54 | 55 | {/if} 56 | 57 | {#if icon} 58 | 63 | {/if} 64 | 65 | {text} 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/NumberStepper.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 | [selectOnFocus(node)]} 35 | {...$$restProps} 36 | > 37 |
38 |
45 |
46 |
53 | 54 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Overflow.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
{ 16 | overflowX = e.detail.overflowX; 17 | overflowY = e.detail.overflowY; 18 | }} 19 | {...$$restProps} 20 | class={cls('Overflow', settingsClasses.root, $$props.class)} 21 | > 22 | 23 |
24 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Overlay.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
31 | 32 |
33 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Paginate.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Popover.svelte: -------------------------------------------------------------------------------- 1 | 64 | 65 | 66 | 67 | {#if open} 68 | 69 |
{ 75 | e.stopPropagation(); 76 | close('clickOutside'); 77 | }} 78 | > 79 | close()} /> 80 |
81 | {/if} 82 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Preview.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
19 |
20 | 21 |
22 | 23 | {#if code && showCode} 24 |
25 | 26 |
27 | {/if} 28 |
29 | 30 | {#if code} 31 | 38 | {/if} 39 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Progress.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 41 | 42 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/RangeField.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 | 27 | 28 | 41 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/TableOrderIcon.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | {#if $order.by && ($order.by === column.value || $order.by === column.name || $order.by === column.orderBy)} 14 | 15 | 20 | 21 | {/if} 22 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Tabs.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 |
39 |
53 | 54 | {#each options as tab (tab.value)} 55 | (value = tab.value)} 59 | classes={{ ...settingsClasses.tab, ...classes.tab }} 60 | > 61 | {tab.label} 62 | 63 | {/each} 64 | 65 |
66 | 67 |
80 | 81 |
82 |
83 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/ThemeInit.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | {@html headSnippet} 12 | 13 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/ThemeSwitch.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | { 24 | // @ts-expect-error: has `checked`, but difficult to type without dispatching custom event 25 | let newTheme = e.target?.checked ? 'dark' : 'light'; 26 | currentTheme.setTheme(newTheme); 27 | }} 28 | classes={clsMerge( 29 | { 30 | switch: 'dark:bg-primary dark:border-primary', 31 | toggle: 'translate-x-0 dark:translate-x-full', 32 | }, 33 | otherClasses, 34 | classes 35 | )} 36 | {...$$restProps} 37 | > 38 |
39 | 48 | 57 |
58 | 59 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Tilt.svelte: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 |
*]:[transform:rotateX(var(--rotateX))_rotateY(var(--rotateY))]', 50 | '[&>*]:brightness-[var(--brightness)]', 51 | settingsClasses.root, 52 | className 53 | )} 54 | bind:clientWidth={width} 55 | bind:clientHeight={height} 56 | on:mousemove={onMouseMove} 57 | on:mouseleave={onMouseLeave} 58 | > 59 | 60 |
61 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Timeline.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 63 | 64 |
    74 | 75 | {#each data as item} 76 | 77 | {/each} 78 | 79 |
80 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/Toggle.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/ToggleButton.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | {#if buttonPlacement === 'before'} 21 | 24 | {/if} 25 | 26 | {#if transition} 27 | {#if on} 28 | 29 |
30 | 31 |
32 | {/if} 33 | {:else if on} 34 | 35 | {/if} 36 | 37 | {#if buttonPlacement === 'after'} 38 | 41 | {/if} 42 | 43 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/TogglePanel.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | {#if $selectedPanel === panel} 17 | 18 | {/if} 19 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/TreeList.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 |
    23 | {#each nodes ?? [] as node} 24 |
  • 30 | 31 | {#if node.children} 32 | 33 | 34 | 35 | {/if} 36 |
    • 37 | {/each} 38 |
39 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/TweenedValue.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 21 | {$formatUtil(displayValue, format)} 22 | 23 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/components/ViewportCenter.svelte: -------------------------------------------------------------------------------- 1 |
4 | 5 |
6 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components/index.js'; 2 | export * from './types/index.js'; 3 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/placeholder.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from 'vitest'; 2 | 3 | test('adds 1 + 2 to equal 3', () => { 4 | expect(1 + 1).toBe(2); 5 | }); 6 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/plugins/svelte.js: -------------------------------------------------------------------------------- 1 | import { format } from 'prettier'; 2 | import typescriptPlugin from 'prettier/plugins/typescript'; 3 | import sveltePlugin from 'prettier-plugin-svelte'; 4 | import Prism from 'prismjs'; 5 | import 'prism-svelte'; 6 | 7 | /** 8 | * Add `code` and `highlightedCode` props to from slot contents 9 | */ 10 | export function codePreview() { 11 | return { 12 | /** 13 | * @param {Object} options 14 | * @param {string} options.content 15 | * @param {string} options.filename 16 | */ 17 | async markup({ content, filename }) { 18 | let code = content; 19 | 20 | // Process ... to `... 21 | const previewMatches = content.match(//g) ?? []; 22 | 23 | for await (const previewMatch of previewMatches) { 24 | const previewContent = previewMatch.match(/([^]*)<\/Preview>/)?.[1] ?? ''; 25 | 26 | const formattedCode = await format(previewContent, { 27 | parser: 'svelte', 28 | plugins: [typescriptPlugin, sveltePlugin], 29 | }); 30 | const highlightedCode = Prism.highlight(formattedCode, Prism.languages.svelte, 'svelte'); 31 | 32 | if (!previewMatch.includes('code=')) { 33 | code = code.replace( 34 | previewMatch, 35 | previewMatch.replace( 36 | ' = { 11 | label: string; 12 | value: T; 13 | icon?: string; 14 | group?: string; 15 | disabled?: boolean; 16 | } & Record; 17 | 18 | export type LabelPlacement = 'inset' | 'float' | 'top' | 'left'; 19 | export const DEFAULT_LABEL_PLACEMENT: LabelPlacement = 'inset'; 20 | 21 | export type ButtonVariant = 22 | | 'default' 23 | | 'outline' 24 | | 'fill' 25 | | 'fill-outline' 26 | | 'fill-light' 27 | | 'text' 28 | | 'none'; 29 | 30 | export type ButtonColor = ThemeColors | 'default'; 31 | export type ButtonSize = 'sm' | 'md' | 'lg'; 32 | export type ButtonRounded = boolean | 'full'; 33 | 34 | export type TransitionParams = BlurParams | FadeParams | FlyParams | SlideParams | ScaleParams; 35 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/lib/utils/icons.ts: -------------------------------------------------------------------------------- 1 | import type { ComponentProps } from 'svelte'; 2 | import { isLiteralObject } from '@layerstack/utils/object'; 3 | 4 | import type { default as Icon } from '../components/Icon.svelte'; 5 | 6 | export type IconInput = ComponentProps['data'] | ComponentProps; 7 | export type IconData = ComponentProps['data']; 8 | 9 | export function asIconData(v: IconInput): IconData { 10 | return isIconComponentProps(v) ? v.data : v; 11 | } 12 | 13 | function isIconComponentProps(v: IconInput): v is ComponentProps { 14 | // `iconName` is a required property of `IconDefinition`, the only other object that `IconInput` supports. 15 | // If it is undefined, then only ComponentProps is viable. 16 | return isLiteralObject(v) && typeof v['iconName'] === 'undefined'; 17 | } 18 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/+error.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |
9 | Error: {$page.status} 10 | 11 | {#if $page.error} 12 |
13 |

Message:

14 | 
{$page
16 |             .error.message}
17 |
18 | {/if} 19 |
20 |
21 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/+layout.server.ts: -------------------------------------------------------------------------------- 1 | import { redirect } from '@sveltejs/kit'; 2 | import { getThemeNames } from '@layerstack/tailwind'; 3 | 4 | import { env } from '$env/dynamic/private'; 5 | 6 | import themes from '../../themes.json' with { type: 'json' }; 7 | 8 | export async function load({ url }) { 9 | // Redirect `svelte-ux.vercel.app` to `svelte-ux.techniq.dev` 10 | if (url.host === 'svelte-ux.vercel.app') { 11 | const newUrl = new URL(url); 12 | newUrl.host = 'svelte-ux.techniq.dev'; 13 | redirect(302, newUrl.toString()); 14 | } 15 | 16 | return { 17 | themes: getThemeNames(themes), 18 | // themes: { light: ['light'], dark: ['dark'] }, 19 | pr_id: env.VERCEL_GIT_PULL_REQUEST_ID, 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | import posthog from 'posthog-js'; 2 | import { BROWSER, DEV } from 'esm-env'; 3 | 4 | // Disable server-side rendering until AppLayout shift is fixed (issue #22) 5 | export const ssr = false; 6 | 7 | export const load = async ({ data }) => { 8 | // Setup Posthog 9 | if (BROWSER && !DEV) { 10 | // @ts-expect-error: `posthog.init()` is valid - https://posthog.com/docs/product-analytics/installation 11 | posthog.init('phc_F78mUWQpKPpsXS1mamJFzDWM8bivZrwIx4Nm1cI8BSb', { 12 | api_host: 'https://app.posthog.com', 13 | capture_pageview: false, 14 | capture_pageleave: false, 15 | }); 16 | } 17 | 18 | return data; 19 | }; 20 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/app.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html { 6 | @apply bg-surface-200 accent-primary scroll-smooth; 7 | /* background-image: 8 | radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%), 9 | radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */ 10 | } 11 | 12 | nav h1 { 13 | @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b; 14 | } 15 | 16 | nav h2 { 17 | @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold; 18 | } 19 | 20 | main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *) { 21 | scroll-margin-top: calc(var(--headerHeight) + 148px); /* app header + docs header */ 22 | } 23 | 24 | main h1:not(.prose *, .related *, .ApiDocs *) { 25 | @apply text-xl font-semibold mt-4 mb-2 border-b pb-1; 26 | } 27 | 28 | main h2:not(.prose *, .related *, .ApiDocs *) { 29 | @apply text-lg font-semibold mt-4 mb-1; 30 | } 31 | 32 | main h3:not(.prose *, .related *, .ApiDocs *) { 33 | @apply text-xs text-surface-content/50 mb-1; 34 | } 35 | main :not(.prose) h2 + h3 { 36 | @apply -mt-1; 37 | } 38 | 39 | main small { 40 | @apply text-xs text-surface-content/50 inline-block; 41 | } 42 | 43 | .TableOfContents small { 44 | @apply hidden; 45 | } 46 | 47 | /* Code/Preview backgrounds */ 48 | pre[class*='language-'] { 49 | @apply bg-surface-content; 50 | } 51 | 52 | .dark pre[class*='language-'] { 53 | @apply bg-surface-300; 54 | } 55 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/changelog/+page.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
14 |
15 | {@html marked.parse(sanitize(changelog))} 16 |
17 |
18 | 19 | 27 |
28 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/customization/+layout.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |
7 |
8 | 9 |
10 |
11 | 12 | 20 |
21 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/AppBar/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |

Examples

11 | 12 |

Default

13 | 14 | 15 | 16 | 17 | 18 |

Title as string

19 | 20 | 21 | 22 | 23 | 24 |

Title as array

25 | 26 | 27 | 28 | 29 | 30 |

Title as slot

31 | 32 | 33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 |

Actions

41 | 42 | 43 | 44 |
45 |
47 | 48 | 49 | 50 |

Color

51 | 52 | 53 |
54 | 55 | 56 |
57 | 58 | 59 |

menuIcon prop

60 | 61 | 62 | 63 | 64 | 65 |

menuIcon slot

66 | 67 | 68 | 69 | 70 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/DatePickerField/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/DatePickerField.svelte?raw&sveld'; 2 | import source from '$lib/components/DatePickerField.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/DateRange/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/DateRange.svelte?raw&sveld'; 2 | import source from '$lib/components/DateRange.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/DateRangeField/+page.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |

Examples

19 | 20 |

Default

21 | 22 | 23 | 24 | 25 | 26 |

Controlled

27 | 28 | 29 | 30 | 31 | 32 |

Clearable

33 | 34 | 35 | 36 | 37 | 38 |

PeriodType options

39 | 40 | 41 | 45 | 46 | 47 |

Single PeriodType options with presets

48 | 49 | 50 | 51 | 52 | 53 |

Single PeriodType options without presets

54 | 55 | 56 | []} /> 57 | 58 | 59 |

Icon

60 | 61 | 62 | 63 | 64 | 65 |

Stepper

66 | 67 | 68 | 69 | 70 | 71 |

Stepper w/ icon

72 | 73 | 74 | 75 | 76 | 77 |

Stepper w/ rounded & centered

78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/DateRangeField/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/DateRangeField.svelte?raw&sveld'; 2 | import source from '$lib/components/DateRangeField.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Dialog/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Dialog.svelte?raw&sveld'; 2 | import source from '$lib/components/Dialog.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Drawer/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Drawer.svelte?raw&sveld'; 2 | import source from '$lib/components/Drawer.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Duration/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |

Examples

11 | 12 |

Duration

13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 |

Fixed range

26 | 27 | 28 | 29 | 30 | 31 |

Age

32 | 33 | 34 | old 35 | 36 | 37 |

Explicit duration

38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Duration/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Duration.svelte?raw&sveld'; 2 | import source from '$lib/components/Duration.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['stores/timerStore', 'utils/duration'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ExpansionPanel/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ExpansionPanel.svelte?raw&sveld'; 2 | import source from '$lib/components/ExpansionPanel.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Collapse'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Field/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Field.svelte?raw&sveld'; 2 | import source from '$lib/components/Field.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/TextField'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Form/+page.server.ts: -------------------------------------------------------------------------------- 1 | export const actions = { 2 | default: async (event) => { 3 | console.log('Default action'); 4 | }, 5 | // example: async (event) => { 6 | // console.log('Example action'); 7 | // }, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Form/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Form.svelte?raw&sveld'; 2 | import source from '$lib/components/Form.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['stores/formStore'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Gooey/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Gooey.svelte?raw&sveld'; 2 | import source from '$lib/components/Gooey.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Shine'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Grid/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Examples

7 | 8 |

Default

9 | 10 | 11 | 12 |
item
13 |
item
14 |
item
15 |
item
16 |
item
17 |
item
18 | 19 | 20 | 21 |

Gap

22 | 23 | 24 | 25 |
item
26 |
item
27 |
item
28 |
item
29 |
item
30 |
item
31 | 32 | 33 | 34 |

Columns

35 | 36 | 37 | 38 |
item
39 |
item
40 |
item
41 |
item
42 |
item
43 |
item
44 | 45 | 46 | 47 |

Columns with gap

48 | 49 | 50 | 51 |
item
52 |
item
53 |
item
54 |
item
55 |
item
56 |
item
57 | 58 | 59 | 60 |

Auto Columns

61 | 62 | 63 | 64 |
item
65 |
item
66 |
item
67 |
item
68 |
item
69 |
item
70 | 71 | 72 | 73 |

Template

74 | 75 | 76 | 77 |
item
78 |
item
79 |
item
80 | 81 | 82 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Grid/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Grid.svelte?raw&sveld'; 2 | import source from '$lib/components/Grid.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 'Use tailwind classes instead', 12 | status: 'deprecated', 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/GridTailwind/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

Examples

6 | 7 |

Default

8 | 9 | 10 |
11 |
item
12 |
item
13 |
item
14 |
item
15 |
item
16 |
item
17 |
18 | 19 | 20 |

Gap

21 | 22 | 23 |
24 |
item
25 |
item
26 |
item
27 |
item
28 |
item
29 |
item
30 |
31 | 32 | 33 |

Columns

34 | 35 | 36 |
37 |
item
38 |
item
39 |
item
40 |
item
41 |
item
42 |
item
43 |
44 | 45 | 46 |

Columns with gap

47 | 48 | 49 |
50 |
item
51 |
item
52 |
item
53 |
item
54 |
item
55 |
item
56 |
57 | 58 | 59 |

Auto Columns

60 | 61 | 62 |
63 |
item
64 |
item
65 |
item
66 |
item
67 |
item
68 |
item
69 |
70 | 71 | 72 |

Template

73 | 74 | 75 |
76 |
item
77 |
item
78 |
item
79 |
80 | 81 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/GridTailwind/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | title: 'Grid', 8 | description: 'Uses tailwind classes', 9 | hideUsage: true, 10 | }, 11 | }; 12 | } 13 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Icon/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Icon.svelte?raw&sveld'; 2 | import source from '$lib/components/Icon.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | features: [ 12 | 'Supports loading icons as path data, SVG as string, SVG from URL, or as an SVG element via slot', 13 | 'Convenient `data` prop to support most of the above use cases via a single prop through introspection', 14 | 'Supports most icon collections. Verified with Material Design Icons and Font Awesome', 15 | 'Simple in-memory cache when loaded via URL and only fetches once', 16 | ], 17 | related: ['components/Button'], 18 | }, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/InfiniteScroll/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |

Examples

11 | 12 |

Default

13 | 14 | 15 |
16 | 17 | {#each visibleItems as item} 18 | 19 | {/each} 20 | 21 |
22 | 23 | 24 |

Per page

25 | 26 | 27 |
28 | 29 | {#each visibleItems as item} 30 | 31 | {/each} 32 | 33 |
34 | 35 | 36 |

Viewport root (no overflown parent/ancestor)

37 | 38 | 39 | 40 | {#each visibleItems as item} 41 | 42 | {/each} 43 | 44 | 45 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/InfiniteScroll/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/InfiniteScroll.svelte?raw&sveld'; 2 | import source from '$lib/components/InfiniteScroll.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'Continues to render additional items as bottom is reached. Does not perform virtualized scrolling.', 13 | related: ['actions/observer'], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Input/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Input.svelte?raw&sveld'; 2 | import source from '$lib/components/Input.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 'input with mask support', 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Lazy/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |

Examples

11 | 12 |

Default

13 | 14 | 15 |
16 | {#each items as item} 17 | 18 | 19 | 20 | {/each} 21 |
22 | 23 | 24 |

Unmount

25 | 26 | 27 |
28 | {#each items as item} 29 | 30 | 31 | 32 | {/each} 33 |
34 | 35 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Lazy/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Lazy.svelte?raw&sveld'; 2 | import source from '$lib/components/Lazy.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'Waits to render a component until visible. Requires placeholder size (min-height)', 13 | related: ['actions/observer'], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ListItem/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ListItem.svelte?raw&sveld'; 2 | import source from '$lib/components/ListItem.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'A list item that provides a standard layout and works best with multiple instances in the same parent element.', 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Menu/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Menu.svelte?raw&sveld'; 2 | import source from '$lib/components/Menu.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'components/MenuItem', 13 | 'components/MenuButton', 14 | 'components/MenuField', 15 | 'components/SelectField', 16 | 'components/ResponsiveMenu', 17 | ], 18 | }, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/MenuButton/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/MenuButton.svelte?raw&sveld'; 2 | import source from '$lib/components/MenuButton.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'components/Menu', 13 | 'components/MenuItem', 14 | 'components/MenuField', 15 | 'components/SelectField', 16 | ], 17 | }, 18 | }; 19 | } 20 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/MenuField/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/MenuField.svelte?raw&sveld'; 2 | import source from '$lib/components/MenuField.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'components/Field', 13 | 'components/Menu', 14 | 'components/MenuItem', 15 | 'components/MenuButton', 16 | 'components/SelectField', 17 | ], 18 | }, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/MenuItem/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/MenuItem/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/MenuItem.svelte?raw&sveld'; 2 | import source from '$lib/components/MenuItem.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'components/Menu', 13 | 'components/MenuButton', 14 | 'components/MenuField', 15 | 'components/ResponsiveMenu', 16 | 'components/SelectField', 17 | ], 18 | }, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Month/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Month.svelte?raw&sveld'; 2 | import source from '$lib/components/Month.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/MonthList/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/MonthList.svelte?raw&sveld'; 2 | import source from '$lib/components/MonthList.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/MonthListByYear/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |

Examples

11 | 12 |

Default

13 | 14 | 15 | 16 | 17 | 18 |

Selected

19 | 20 | 21 | { 24 | selected = e.detail; 25 | }} 26 | /> 27 | 28 | 29 |

Selected w/ Scroll into view

30 | 31 | 32 |
33 | { 38 | selected = e.detail; 39 | }} 40 | /> 41 |
42 | 43 | 44 |

Min / Max date

45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/MonthListByYear/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/MonthListByYear.svelte?raw&sveld'; 2 | import source from '$lib/components/MonthListByYear.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/MultiSelect.svelte?raw&sveld'; 2 | import source from '$lib/components/MultiSelect.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'components/InfiniteScroll', 13 | 'components/MultiSelectField', 14 | 'components/MultiSelectMenu', 15 | ], 16 | }, 17 | }; 18 | } 19 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/MultiSelectField.svelte?raw&sveld'; 2 | import source from '$lib/components/MultiSelectField.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/MultiSelect', 'components/MultiSelectMenu', 'components/TextField'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/MultiSelectMenu.svelte?raw&sveld'; 2 | import source from '$lib/components/MultiSelectMenu.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Menu', 'components/MultiSelect', 'components/MultiSelectField'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/NavItem/+page.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

Examples

9 | 10 |

Default

11 | 12 | 13 | 14 | 15 | 16 |

Active path

17 | 18 | 19 | 25 | 26 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/NavItem/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/NavItem.svelte?raw&sveld'; 2 | import source from '$lib/components/NavItem.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Notification/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Notification.svelte?raw&sveld'; 2 | import source from '$lib/components/Notification.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/NumberStepper/+page.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

Examples

9 | 10 |

basic

11 | 12 | 13 | 14 | 15 | 16 |

bind:value

17 | 18 | 19 | 20 | {value} 21 | 22 | 23 |

on:change

24 | 25 | 26 | console.log(e.detail.value)} /> 27 | 28 | 29 |

dense

30 | 31 | 32 | 33 | 34 | 35 |

min / max

36 | 37 | 38 | 39 | 40 | 41 |

step

42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/NumberStepper/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/NumberStepper.svelte?raw&sveld'; 2 | import source from '$lib/components/NumberStepper.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/ScrollingValue'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Overflow/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

Examples

10 | 11 |

Default

12 | 13 | 14 | 15 | 18 | 19 |
overflowX: {overflowX}
20 |
overflowY: {overflowY}
21 |
22 | {#each { length: overflowItems } as _} 23 |
Resize the window to see text truncate and watch values
24 | {/each} 25 |
26 | 27 | 28 | 29 |

Conditional tooltip

30 | 31 | 32 | 33 | 0}>{text} 34 | 35 | 36 | 37 | 38 | 51 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Overflow/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Overflow.svelte?raw&sveld'; 2 | import source from '$lib/components/Overflow.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['actions/layout', 'components/Tooltip'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Overlay/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Examples

7 | 8 |

Loading overlay

9 | 10 | 11 |
12 | 13 | 14 | 15 |
Some content
16 |
Some content
17 |
Some content
18 |
Some content
19 |
20 | 21 | 22 |

Change color

23 | 24 | 25 |
26 | 27 | 28 | 29 |
Some content
30 |
Some content
31 |
Some content
32 |
Some content
33 |
34 | 35 | 36 |

Prompt

37 | 38 | 39 | 40 |
41 | {#if show} 42 | 43 | 44 | 45 | {/if} 46 |
Some content
47 |
Some content
48 |
Some content
49 |
Some content
50 | 51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Overlay/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Overlay.svelte?raw&sveld'; 2 | import source from '$lib/components/Overlay.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Paginate/+page.md: -------------------------------------------------------------------------------- 1 | 8 | 9 |

Usage

10 | 11 | ```svelte 12 | 15 | 16 | 17 | {#each pageData as d} 18 | 19 | {/each} 20 | 21 | 22 | ``` 23 | 24 |

Examples

25 | 26 |

Default

27 | 28 | 29 | 30 | {#each pageData as d} 31 | 32 | {/each} 33 | {#if pageData.length > 0} 34 | 35 | {/if} 36 | 37 | 38 | 39 |

Per page

40 | 41 | 42 | 43 | {#each pageData as d} 44 | 45 | {/each} 46 | {#if pageData.length > 0} 47 | 48 | {/if} 49 | 50 | 51 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Paginate/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Paginate.svelte?raw&sveld'; 2 | import source from '$lib/components/Paginate.svelte?raw'; 3 | import pageSource from './+page.md?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | description: 'Client-side paginate through items', 9 | api, 10 | source, 11 | pageSource, 12 | hideUsage: true, 13 | related: ['components/Pagination', 'stores/paginationStore'], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Pagination/+page.md: -------------------------------------------------------------------------------- 1 | 10 | 11 |

Usage

12 | 13 | ```svelte 14 | 20 | 21 | 22 | ``` 23 | 24 |

Examples

25 | 26 |

Default

27 | 28 | 29 | 30 | 31 | 32 |

First/Last page

33 | 34 | 35 | 36 | 37 | 38 |

Center pagination

39 | 40 | 41 | 42 | 43 | 44 |

format

45 | 46 | 47 | 'Page ' + pagination.page + ' of ' + pagination.totalPages} /> 48 | 49 | 50 |

Pagination slot

51 | 52 | 53 | 54 |
55 | Page {pagination.page} of {pagination.totalPages} 56 |
57 | 58 | 59 | 60 |

Table pagination

61 | 62 | 63 | 64 | 65 | 66 |

Table pagination with actions slot

67 | 68 | 69 | 70 |
71 | 72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Pagination/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Pagination.svelte?raw&sveld'; 2 | import source from '$lib/components/Pagination.svelte?raw'; 3 | import pageSource from './+page.md?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | description: 9 | 'Controls to navigate through paginated results. Works with `paginationStore()` or `Paginate` component', 10 | api, 11 | source, 12 | pageSource, 13 | hideUsage: true, 14 | features: ['Easily customize display of results and controls'], 15 | related: ['components/Paginate', 'stores/paginationStore'], 16 | }, 17 | }; 18 | } 19 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Popover/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Popover.svelte?raw&sveld'; 2 | import source from '$lib/components/Popover.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Progress/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |

Examples

11 | 12 |

Value

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |

Max

25 | 26 | 27 | 28 | 29 | 30 |

Color

31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |

Track color

39 | 40 | 41 | 42 | 46 | 50 | 54 | 55 | 56 |

Color based on value

57 | 58 | 59 | 90 63 | ? '[--color:theme(colors.danger)]' 64 | : value > 50 65 | ? '[--color:theme(colors.warning)]' 66 | : '[--color:theme(colors.success)]' 67 | )} 68 | max={100} 69 | /> 70 | 71 | 72 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Progress/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Progress.svelte?raw&sveld'; 2 | import source from '$lib/components/Progress.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/BarStack', 'components/ProgressCircle'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ProgressCircle/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ProgressCircle.svelte?raw&sveld'; 2 | import source from '$lib/components/ProgressCircle.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Progress'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Radio/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Radio.svelte?raw&sveld'; 2 | import source from '$lib/components/Radio.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/RangeField/+page.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

Examples

9 | 10 |

basic

11 | 12 | 13 | 14 | 15 | 16 |

label

17 | 18 | 19 | 20 | 21 | 22 |

bind:value

23 | 24 | 25 | 26 | {value} 27 | 28 | 29 |

on:change

30 | 31 | 32 | console.log(e.detail.value)} /> 33 | 34 | 35 |

min / max

36 | 37 | 38 | 39 | 40 | 41 |

step

42 | 43 | 44 | 45 | 46 | 47 |

format

48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/RangeField/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/RangeField.svelte?raw&sveld'; 2 | import source from '$lib/components/RangeField.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/RangeSlider'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/RangeSlider/+page.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

Examples

9 | 10 |

Description

11 | 12 |

basic

13 | 14 | 15 | 16 | 17 | 18 |

disabled

19 | 20 | 21 | 22 | 23 | 24 |

bind:value

25 | 26 | 27 | 28 | 29 | 30 |

min/max

31 | 32 | 33 | 34 | 35 | 36 |

step

37 | 38 |

small

39 | 40 | 41 | 42 | 43 | 44 |

step

45 | 46 |

large

47 | 48 | 49 | 50 | 51 | 52 |

disableTooltips

53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/RangeSlider/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/RangeSlider.svelte?raw&sveld'; 2 | import source from '$lib/components/RangeSlider.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/RangeField'], 12 | status: 'beta', 13 | features: [ 14 | 'Drag start and end points individually, or drag the middle together', 15 | 'Double click start, end or range to set min/max', 16 | 'Use keyboard arrow keys to adjust last changed', 17 | ], 18 | }, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ResponsiveMenu.svelte?raw&sveld'; 2 | import source from '$lib/components/ResponsiveMenu.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 'Dynamically switch between Menu and bottom Drawer based on viewport width', 12 | related: ['components/Menu', 'components/Drawer'], 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ScrollContainer/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Examples

7 | 8 |

Basic

9 | 10 | 11 | 12 | 15 | {#each { length: 100 } as _, i} 16 |
Item: {i + 1}
17 | {/each} 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ScrollContainer/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ScrollContainer.svelte?raw&sveld'; 2 | import source from '$lib/components/ScrollContainer.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ScrollingValue/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ScrollingValue.svelte?raw&sveld'; 2 | import source from '$lib/components/ScrollingValue.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/NumberStepper', 'components/SpringValue', 'components/TweenedValue'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/SelectField/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/SelectField.svelte?raw&sveld'; 2 | import source from '$lib/components/SelectField.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | features: [ 12 | 'Asynchronous loading of options', 13 | 'Grouped options', 14 | 'Field actions, Menu actions, and per-option actions', 15 | 'Smart placement of menu (with granular control and overflow handling)', 16 | ], 17 | related: [ 18 | 'components/TextField', 19 | 'components/Menu', 20 | 'components/MenuItem', 21 | 'components/MenuButton', 22 | 'components/MenuField', 23 | ], 24 | }, 25 | }; 26 | } 27 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Selection/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Selection.svelte?raw&sveld'; 2 | import source from '$lib/components/Selection.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Settings/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Examples

7 | 8 |

Basic

9 | 10 | 11 | 18 | 19 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Settings/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Settings.svelte?raw&sveld'; 2 | import source from '$lib/components/Settings.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'Create settings context as a component. Useful to scope theme, numbers, ... within a component tree, although typically `settings()` is used directly', 13 | related: ['components/ThemeInit', '/customization'], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Shine/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Shine.svelte?raw&sveld'; 2 | import source from '$lib/components/Shine.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['actions/spotlight', 'components/Tilt'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/SpringValue/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/SpringValue.svelte?raw&sveld'; 2 | import source from '$lib/components/SpringValue.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/TweenedValue', 'components/ScrollingValue'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Stack/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Stack.svelte?raw&sveld'; 2 | import source from '$lib/components/Stack.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 'Use tailwind classes instead', 12 | status: 'deprecated', 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/StackTailwind/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | title: 'Stack', 8 | description: 'Uses tailwind classes', 9 | hideUsage: true, 10 | }, 11 | }; 12 | } 13 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/State/+page.md: -------------------------------------------------------------------------------- 1 | 4 | 5 |

Examples

6 | 7 | ```svelte 8 | 9 | {#each items as item} 10 | 13 | {/each} 14 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/State/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/State.svelte?raw&sveld'; 2 | import source from '$lib/components/State.svelte?raw'; 3 | import pageSource from './+page.md?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Steps/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Steps.svelte?raw&sveld'; 2 | import source from '$lib/components/Steps.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | description: 9 | 'List of steps in a process with consistent width (horizontal) or height (vertical)', 10 | api, 11 | source, 12 | pageSource, 13 | related: ['components/Timeline'], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/StoreSubscribe/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/StoreSubscribe/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/StoreSubscribe.svelte?raw&sveld'; 2 | import source from '$lib/components/StoreSubscribe.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'Wrapper component to convenient subscribe to a store value when impractical (for example, slot `let:value`)', 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Switch/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Switch.svelte?raw&sveld'; 2 | import source from '$lib/components/Switch.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/ToggleGroup'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Table/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Table.svelte?raw&sveld'; 2 | import source from '$lib/components/Table.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['actions/table', 'actions/dataBackground', 'stores/tableOrderStore'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/TableOfContents/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Examples

7 | 8 | Let's build some example TableOfContents for the following masterpiece: 9 | 10 | 11 |
12 |

The Epic Novel

13 |

Chapter 1

14 |

New Beginnings

15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu ornare purus. Praesent auctor 16 | tellus leo, ac ornare nisi egestas eu. Nam tincidunt finibus pretium. Pellentesque habitant morbi 17 | tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor urna, congue at 18 | convallis vel, accumsan ut ante. 19 |

A Brief Interlude

20 | Proin congue augue ex, eget laoreet nisi tempor ac. Sed a sapien convallis, mollis lectus quis, mollis 21 | lorem. 22 |

The Journey

23 | Donec nec rhoncus libero, ut euismod augue. Curabitur lacus dolor, pellentesque nec suscipit at, 24 | faucibus id odio. Sed ullamcorper quam nibh, eget hendrerit metus viverra vel. Etiam elementum gravida 25 | ipsum, eget vestibulum felis vulputate eget. Vivamus at volutpat sapien. Pellentesque lobortis aliquam 26 | mauris, ac volutpat magna convallis et. Praesent hendrerit finibus dui in ullamcorper. 27 |

Chapter 2

28 |

Chapter 3

29 | Donec eget nulla non eros elementum rutrum eu sed nulla. Nam dignissim, neque in elementum vestibulum, 30 | nisl libero fringilla nunc, et pellentesque ex nibh porta sem. In sed vehicula justo. Etiam non sagittis 31 | tortor. Pellentesque ut sagittis enim. Nulla eget dictum erat. Mauris eu semper nisl, quis posuere 32 | arcu. Nunc ut purus quis felis lobortis vehicula. Aliquam varius luctus lectus, in egestas mauris 33 | sollicitudin eget. Etiam suscipit, nunc vitae blandit convallis, lorem est laoreet ante, sit amet 34 | gravida arcu ligula vitae ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas 35 | mattis ac turpis quis luctus. 36 |
37 | 38 | 39 |

Basic

40 | 41 | 42 | 43 | 44 | 45 |

Limit Max Depth

46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/TableOfContents/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/TableOfContents.svelte?raw&sveld'; 2 | import source from '$lib/components/TableOfContents.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/TreeList'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Tabs/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Tabs.svelte?raw&sveld'; 2 | import source from '$lib/components/Tabs.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/ToggleGroup'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/TextField/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/TextField.svelte?raw&sveld'; 2 | import source from '$lib/components/TextField.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Field'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ThemeInit/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ThemeInit/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ThemeInit.svelte?raw&sveld'; 2 | import source from '$lib/components/ThemeInit.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'Initialize theme from localStorage before anything renders, including when SSR is used.\nUsing component instead of `settings()` will setup internally', 13 | related: [ 14 | 'components/Settings', 15 | 'components/ThemeSelect', 16 | 'components/ThemeSwitch', 17 | '/customization', 18 | ], 19 | }, 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ThemeSelect/+page.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

Examples

9 | 10 |

Default (based on settings)

11 | 12 | 13 | 14 | 15 |

Single light/dark theme

16 | 17 | 18 | 19 | 20 | 21 |

Multiple light/dark themes

22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ThemeSelect/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ThemeSelect.svelte?raw&sveld'; 2 | import source from '$lib/components/ThemeSelect.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'Supports selecting a theme when more than one light and/or dark themes are defined', 13 | related: ['components/ThemeSwitch', '/customization'], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ThemeSwitch/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Examples

7 | 8 |

Default

9 | 10 | 11 | 12 | 13 | 14 |

Customize Switch

15 | 16 | 17 | 20 | 21 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ThemeSwitch/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ThemeSwitch.svelte?raw&sveld'; 2 | import source from '$lib/components/ThemeSwitch.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 'Toggle between `light` and `dark` themes', 12 | related: ['components/ThemeSelect', 'components/Switch', '/customization'], 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Tilt/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Tilt.svelte?raw&sveld'; 2 | import source from '$lib/components/Tilt.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Shine'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Timeline/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Timeline.svelte?raw&sveld'; 2 | import source from '$lib/components/Timeline.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | description: 'List of events with variable width (horizontal) or height (vertical)', 9 | api, 10 | source, 11 | pageSource, 12 | related: ['components/Steps'], 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Toggle/+page.md: -------------------------------------------------------------------------------- 1 | 4 | 5 |

Examples

6 | 7 | ```svelte 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Toggle/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Toggle.svelte?raw&sveld'; 2 | import source from '$lib/components/Toggle.svelte?raw'; 3 | import pageSource from './+page.md?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'components/Dialog', 13 | 'components/Drawer', 14 | 'components/Menu', 15 | 'components/ToggleButton', 16 | ], 17 | }, 18 | }; 19 | } 20 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ToggleButton/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ToggleButton.svelte?raw&sveld'; 2 | import source from '$lib/components/ToggleButton.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'Simplifies using Button/Toggle, and helps coordinate unmounting of toggled content (i.e. delays unmount to allow children to transition (ex. Drawer/Dialog))', 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/ToggleGroup/+page.ts: -------------------------------------------------------------------------------- 1 | import source from '$lib/components/ToggleGroup.svelte?raw'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load() { 5 | return { 6 | meta: { 7 | source, 8 | pageSource, 9 | related: ['components/Switch', 'components/Tabs'], 10 | }, 11 | }; 12 | } 13 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/Tooltip/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Tooltip.svelte?raw&sveld'; 2 | import source from '$lib/components/Tooltip.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Overflow'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/TreeList/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |

Examples

8 | 9 |
TODO
10 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/TreeList/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/TreeList.svelte?raw&sveld'; 2 | import source from '$lib/components/TreeList.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 'Recursively render
    and
  • children at each level', 12 | related: ['components/TableOfContents'], 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/TweenedValue/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/TweenedValue.svelte?raw&sveld'; 2 | import source from '$lib/components/TweenedValue.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/SpringValue', 'components/ScrollingValue'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/YearList/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |

    Examples

    11 | 12 |

    Default

    13 | 14 | 15 | 16 | 17 | 18 |

    Selected

    19 | 20 | 21 | { 24 | selected = e.detail; 25 | }} 26 | /> 27 | 28 | 29 |

    Selected w/ Scroll into view

    30 | 31 | 32 |
    33 | { 38 | selected = e.detail; 39 | }} 40 | /> 41 |
    42 |     43 | 44 |

    Min / Max date

    45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/docs/components/YearList/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/YearList.svelte?raw&sveld'; 2 | import source from '$lib/components/YearList.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/theme/+page.server.ts: -------------------------------------------------------------------------------- 1 | import { themes as daisyThemes } from '@layerstack/tailwind/daisy'; 2 | import { themes as skeletonThemes } from '@layerstack/tailwind/skeleton'; 3 | 4 | export async function load() { 5 | return { 6 | themes: { 7 | daisy: daisyThemes, 8 | skeleton: skeletonThemes, 9 | }, 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/theme/ColorField.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | { 23 | // @ts-expect-error 24 | value = formatColor(e.detail.inputValue, colorSpace); 25 | dispatch('change', { value }); 26 | }} 27 | {...$$restProps} 28 | > 29 |
    30 |
    31 | { 35 | // @ts-expect-error 36 | value = formatColor(e.target.value, colorSpace); 37 | dispatch('change', { value }); 38 | }} 39 | class="w-6 h-6 rounded opacity-0 cursor-pointer" 40 | /> 41 |
    42 |     43 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/routes/theme/colors.ts: -------------------------------------------------------------------------------- 1 | import { colorVariableValue, type SupportedColorSpace } from '@layerstack/tailwind'; 2 | import { formatHex } from 'culori'; 3 | 4 | export function formatColor(value: string, colorSpace: SupportedColorSpace | 'hex') { 5 | if (value) { 6 | if (colorSpace === 'hex') { 7 | // Only format if not already formatted. Fixes `#123` becoming `#112233` 8 | return value.startsWith('#') ? value : formatHex(value); 9 | } else { 10 | const colorValue = colorVariableValue(value, colorSpace); 11 | if (colorValue) { 12 | return `${colorSpace}(${colorValue})`; 13 | } else { 14 | // Return original if unable to convert (i.e invalid such as `rgb( 20 30)`) 15 | return value; 16 | } 17 | } 18 | } else { 19 | return value; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/svelte-ux/src/vite-plugin-sveld.d.ts: -------------------------------------------------------------------------------- 1 | // Copied from: https://github.com/mattjennings/vite-plugin-sveld/blob/main/types.d.ts 2 | 3 | declare module 'vite-plugin-sveld' { 4 | export default function sveld(): { 5 | name: string; 6 | transform: ( 7 | src: string, 8 | id: string 9 | ) => Promise<{ 10 | code: string; 11 | map: any; 12 | }>; 13 | }; 14 | } 15 | 16 | declare module '*.svelte?raw&sveld' { 17 | interface SveldProp { 18 | name: string; 19 | kind: 'let' | 'const' | 'function'; 20 | constant: boolean; 21 | type?: string; 22 | value?: any; 23 | description?: string; 24 | isFunction: boolean; 25 | isFunctionDeclaration: boolean; 26 | isRequired: boolean; 27 | reactive: boolean; 28 | } 29 | 30 | interface SveldSlot { 31 | name?: string; 32 | default: boolean; 33 | fallback?: string; 34 | slot_props?: string; 35 | description?: string; 36 | } 37 | 38 | interface ForwardedEvent { 39 | type: 'forwarded'; 40 | name: string; 41 | element: ComponentInlineElement | ComponentElement; 42 | } 43 | 44 | interface DispatchedEvent { 45 | type: 'dispatched'; 46 | name: string; 47 | detail?: any; 48 | description?: string; 49 | } 50 | 51 | type SvelteEvent = ForwardedEvent | DispatchedEvent; 52 | 53 | interface SveldRestProps { 54 | type: 'InlineComponent' | 'Element'; 55 | name: string; 56 | } 57 | 58 | interface SveldTypedefs { 59 | type: string; 60 | name: string; 61 | description?: string; 62 | ts: string; 63 | } 64 | 65 | interface SveldJson { 66 | props: SveldProp[]; 67 | slots: SveldSlot[]; 68 | events: SveldEvent[]; 69 | typedefs: SveldTypedefs[]; 70 | rest_props: SveldRestProps; 71 | moduleExports: SveldProp[]; 72 | componentComment?: string; 73 | extends?: { 74 | interface: string; 75 | import: string; 76 | }; 77 | } 78 | 79 | const json: SveldJson; 80 | 81 | export default json; 82 | } 83 | -------------------------------------------------------------------------------- /packages/svelte-ux/static/favicon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techniq/svelte-ux/a39b1dd2884a3f55375a98f25271d341ff6f7491/packages/svelte-ux/static/favicon.jpg -------------------------------------------------------------------------------- /packages/svelte-ux/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-cloudflare'; 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 3 | import { mdsvex } from 'mdsvex'; 4 | 5 | import mdsvexConfig from './mdsvex.config.js'; 6 | import { codePreview } from './src/lib/plugins/svelte.js'; 7 | 8 | /** @type {import('@sveltejs/kit').Config} */ 9 | const config = { 10 | extensions: ['.svelte', ...mdsvexConfig.extensions], 11 | preprocess: [mdsvex(mdsvexConfig), vitePreprocess(), codePreview()], 12 | 13 | vitePlugin: { 14 | inspector: { 15 | toggleKeyCombo: 'alt-shift', 16 | toggleButtonPos: 'bottom-right', 17 | }, 18 | }, 19 | 20 | kit: { 21 | adapter: adapter(), 22 | alias: { 23 | 'svelte-ux': 'src/lib/index.js', 24 | $docs: 'src/docs', 25 | }, 26 | }, 27 | }; 28 | 29 | export default config; 30 | -------------------------------------------------------------------------------- /packages/svelte-ux/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin'); 2 | const colors = require('tailwindcss/colors'); 3 | 4 | const layerstack = require('@layerstack/tailwind/plugin'); 5 | 6 | module.exports = { 7 | content: ['./src/**/*.{html,svelte,md,ts,js}'], 8 | ux: { 9 | themes: require('./themes.json'), 10 | // themes: { 11 | // light: { 12 | // primary: colors['blue']['500'], 13 | // 'primary-content': 'white', 14 | // secondary: colors['cyan']['300'], 15 | // 'surface-100': 'white', 16 | // 'surface-200': colors['gray']['100'], 17 | // 'surface-300': colors['gray']['300'], 18 | // 'surface-content': colors['gray']['900'], 19 | // }, 20 | // }, 21 | }, 22 | theme: { 23 | extend: { 24 | backgroundImage: { 25 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 26 | 'gradient-conic': 'conic-gradient(var(--tw-gradient-stops))', 27 | }, 28 | typography: (theme) => ({ 29 | DEFAULT: { 30 | css: { 31 | // Reduce font size 32 | h1: { 33 | fontSize: theme('fontSize.2xl')[0], 34 | fontWeight: theme('fontWeight.extrabold'), 35 | }, 36 | h2: { 37 | fontSize: theme('fontSize.xl')[0], 38 | fontWeight: theme('fontWeight.bold'), 39 | marginTop: theme('spacing.3'), 40 | }, 41 | h3: { 42 | fontSize: theme('fontSize.lg')[0], 43 | fontWeight: theme('fontWeight.semibold'), 44 | }, 45 | }, 46 | }, 47 | }), 48 | }, 49 | }, 50 | plugins: [ 51 | layerstack({ colorSpace: 'hsl' }), 52 | require('@tailwindcss/typography'), 53 | 54 | plugin(function ({ addComponents }) { 55 | // Consider moving to tailwind plugin 56 | addComponents({ 57 | '.grid-cols-xs': { 58 | '@apply grid-cols-[repeat(auto-fill,minmax(200px,1fr))]': {}, 59 | }, 60 | '.grid-cols-sm': { 61 | '@apply grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(300px,1fr))]': {}, 62 | }, 63 | '.grid-cols-md': { 64 | '@apply grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(400px,1fr))]': {}, 65 | }, 66 | '.grid-cols-lg': { 67 | '@apply grid-cols-1 md:grid-cols-[repeat(auto-fill,minmax(600px,1fr))]': {}, 68 | }, 69 | }); 70 | }), 71 | ], 72 | }; 73 | -------------------------------------------------------------------------------- /packages/svelte-ux/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "module": "NodeNext", 13 | "moduleResolution": "NodeNext" 14 | } 15 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 16 | // 17 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 18 | // from the referenced tsconfig.json - TypeScript does not merge them in 19 | } 20 | -------------------------------------------------------------------------------- /packages/svelte-ux/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | import { sveltekit } from '@sveltejs/kit/vite'; 3 | import { sveld } from './src/lib/plugins/vite.js'; 4 | 5 | export default defineConfig({ 6 | plugins: [sveltekit() /*, sveld()*/], 7 | resolve: { 8 | noExternal: true, // https://github.com/AdrianGonz97/refined-cf-pages-action/issues/26#issuecomment-2878397440 9 | }, 10 | test: { 11 | include: ['src/**/*.{test,spec}.{js,ts}'], 12 | deps: { 13 | optimizer: { 14 | ssr: { 15 | exclude: ['sveld'], 16 | }, 17 | }, 18 | }, 19 | coverage: { 20 | reporter: ['html'], 21 | }, 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "packages/*" 3 | -------------------------------------------------------------------------------- /static/logos/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techniq/svelte-ux/a39b1dd2884a3f55375a98f25271d341ff6f7491/static/logos/logo.jpg --------------------------------------------------------------------------------