https://github.com/RedHatter/svelte-devtools

Properties

Slots

• default

Slots

• default

Properties

Slots

• default

Properties

Events

• changed

Properties

Slots

• default

properties

slots

• default

Properties

Events

• changed

Slots

• default

Properties

Slots

• default
• start
• end

currently Alert and Icon has this problem

Properties

Slots

• start
• end
• outer:start
• middle:start
• inner:start
• inner:end
• middle:end
• outer:end

Properties

Properties

Slots

• default

When I import the sass file to SvelteKit,
https://github.com/ubeac/svelte/blob/merge-doc-site/src/routes/__layout.svelte

import '../scss/index.scss'

There's comes and issue with Bootstrap

Error: Can't find stylesheet to import.
  ╷
1 │ @import "~bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@tabler/core/src/scss/_config.scss 1:9  @import
  node_modules/@tabler/core/src/scss/_core.scss 1:9    @import
  src/scss/index.scss 1:9                              root stylesheet

I expect this to work because this was the preprocess config of SvelteKit:
https://github.com/ubeac/svelte/blob/merge-doc-site/svelte.config.js

preprocess({
  scss: {
    importer: (url, prev) => {
      if (url[0] === '~') {
        url = path.resolve('node_modules', url.substr(1))
      }
      return { file: url }
    },
  },
}),

Any ideas about this error? @TheHadiAhmadi @pournasserian

Properties

Slots

• default

Properties

Properties

Input
InputGroup
Textarea
Select
Label
Chckbox
Switch
Radio
NavItem
Menu
MenuItem
Image
Avatar
Progress
ProgressBar
Tooltip
Breadcrumbs
BreadcrumbItem
Spinner

I merged the latest changes from main to my branch merge-doc-site
And there's a problem with Sass extending:

Error: The target selector was not found.
Use "@extend .form-group !optional" to avoid this error.
  ╷
2 │     @extend .form-group;
  │     ^^^^^^^^^^^^^^^^^^^
  ╵
  src/scss/components/form/form-group.scss 2:2  root stylesheet

@pournasserian @TheHadiAhmadi Can you help with that?

Properties

Slots

• default

Properties

Events

• change

Slots

• default

Component Properties:

Slots

• default
• title

Iconify loads icons in frontend and store them in local storage or session storage, we don't have access to svg of icons in server side.

this would be great if we can serve icons as svg in server rendering.

Hey,
I tried to add the doc site I initiated on the other repo to this repo in /docs but that didn't work because components on src/components are using @app/ and that doesn't work well when I'm running another SvelteKit is in another directory.

In this situation I think we can handle everything on the same existing SvelteKit, so I merged my repo to the existing SvelteKit in this repo. I pushed to merge-doc-site branch and everything works fine except the Badge

On merge-doc-site branch when I import the Button from components and run SvelteKit, I get this error from Badge component

/src/components/badge/Badge.svelte:5:13 Unexpected token
 3 |  
 4 |    import { Root } from '@app/components'
 5 |    import type { Colors, PlacementEdge } from '@app/types'
                    ^
 6 |  
 7 |    /**

Do you know what's the problem?
@pournasserian @TheHadiAhmadi

Properties

Slots

• default

Properties

Slots

• default

tabler uses 'danger' instead of error.

we need to edit alert.scss file to add .u-alert-error class and extend alert-danger

Properties

Slots

• default

Properties

Slots

• default

Properties

Slots

• default
• icon
• actions

Events

in current implementation if we pass readonly={false} prop for Input, the read-only style is applied for input

<!-- svelte file -->
<Input readonly={false} />

<!-- result html -->
<input class="u-input" readonly="false" />

disabled prop works as expected

Open-Source / Free libraries:
gridjs.io (pure js, react)
frappe.io (pure js)
react-table (react only | headless)
handsontable (pure js, react, vue, angular | spreadsheet-like)
ag-grid (pure js, react, vue, angular | also has a non-free, enterprise version)

Non-Free / Enterprise:
wijmo flexgrid (pure js, react, vue, angular)

• loading spinner is not shown in default button (without color)
• text prop doesn't work in default button
• outline prop doesn't work in default button

variant: filled

variant:‌ outline

Properties

Slots

• default

Properties

Events

• changed

Properties

Events

• forward all events

properties

slots

• default

Properties

Slots

• default

instance?.close() and instance?.dispose() and similar codes are not working in storybook

Properties

Slots

• default

The loading/refreshing performance in development mode is very low.

pack prop only supports 'tabler'

it is better to add types for all icon packages listed here or at least support string type

import { get_current_component, onDestroy, onMount } from 'svelte/internal';
import { Icon } from '@app/components';
import { forwardEventsBuilder } from '@app/directives';
import { classname, condition } from '@app/utils';

Cannot find module '@app/components' imported from '/Files/files/github/svelte/package/components/alert/Alert.svelte'
Error: Cannot find module '@app/components' imported from '/Files/files/github/svelte/package/components/alert/Alert.svelte'
at viteResolve (/Files/files/github/ubeac-test/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:50310:25)
at nodeImport (/Files/files/github/ubeac-test/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:50345:15)
at ssrImport (/Files/files/github/ubeac-test/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:50241:20)
at eval (/@fs/Files/files/github/svelte/package/components/alert/Alert.svelte:11:37)
at async instantiateModule (/Files/files/github/ubeac-test/node_modules/vite/dist/node/chunks/dep-8f5c9290.js:50286:9

Slots

• default

Properties

Events

• change