Check that this is really a bug

• [X] I confirm

Reproduction link

https://stackblitz.com/edit/sveltejs-kit-template-default-yznzfw

Bug description

The iOS theme doesn't apply and won't show correctly in SvelteKit using newer vite version (3.1.0-beta.1 and 3.1.0-beta.2) in dev mode only (when runing npm run dev). But works in build version (npm run preview). When reverting to vite 3.0.9 the iOS theme applies and works perfectly in both dev mode and preview mode.

I guess something changed in newer vite version: https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md

Expected Behavior

iOS theme

Actual Behavior

Material theme

Konsta UI version

v0.11.1 v1.0.0-beta.5

Platform/Target and Browser Versions

Linux/Brave Version 1.42.86 Chromium: 104.0.5112.81 (Official Build) (64-bit)

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [X] I'm willing to open a PR

I can't get konsta to work with nuxt 3.0.0-rc3.

In dev-mode everything is fine, but when i build the app with "nuxt build" I get an Error: TypeError: Cannot read properties of null (reading 'isCE')

Can someone please help me to fix this?

@nolimits4web, any update on svelte ? Svelte support will be added in January

Originally posted by @nolimits4web in https://github.com/konstaui/konsta/issues/2#issuecomment-989826503

Hi @nolimits4web How can i help/ contribute to getting out a svelte version . I see there is currently only react version in the source. I thought i could mix tailwind styling with framework 7 component's given that each component exports a className property , but that didn't seem to take any effect. I happened upon this project while searching for a way to do that.

Check that this is really a bug

• [X] I confirm

Reproduction link

https://github.com/tranhoang1010vn/nextjs-konsta.git

Bug description

error - SyntaxError: Named export 'AppClasses' not found. The requested module '../../../shared/esm/classes/AppClasses.js' is a CommonJS module, which may not support all module.exports as named exports.

file:///D:/Repo-Nextjs-QLGV/node_modules/konsta/react/esm/components/App.js:6 import { AppClasses } from '../../../shared/esm/classes/AppClasses.js'; ^^^^^^^^^^ SyntaxError: Named export 'AppClasses' not found. The requested module '../../../shared/esm/classes/AppClasses.js' is a CommonJS module, which may not support all module.exports as named exports.

I use dependencies : { "axios": "^0.26.1", "konsta": "^0.8.1", "next": "^12.1.5", "next-auth": "^4.3.2", "react": "^18.0.0", "react-dom": "^18.0.0" },

Expected Behavior

No response

Actual Behavior

No response

Konsta UI version

0.8.1

Platform/Target and Browser Versions

Windows 10

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

Have a look on this web components concept & functions, etc. https://developer.mozilla.org/en-US/docs/Web/Web_Components

I would suggest to use Vue js to develop web components. Hence you just write a single codebase, it can be used across any framework. https://v3.vuejs.org/guide/web-components.html#web-components-vs-vue-components

Based on my experience on React js, its hooks is very good to use, but its not friendly to write or use web component, we have to build a wrapper to use it with web component, but its still works well with web components, check this out https://reactjs.org/docs/web-components.html

Clear and concise description of the problem

The premise of the library is "Mobile UI components" except there are no docs on how to run it on mobile.

Suggested solution

Add a script to run each kitchen on a native device, simulator or emulator.

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [ ] I'm willing to open a PR

Check that this is really a bug

• [X] I confirm

Reproduction link

https://konstaui.com/svelte/usage

Bug description

Hi. I just created a basic svelte application with the following App.svelte code:

<script>
	/* App.svelte */
	import { Block, Button } from 'konsta/svelte';
  </script>

  <Block class="space-y-4">
	<p>Here comes the button</p>
	<Button>Action</Button>
  </Block>

I Installed tailwind css and followerd all Instructions, but my application won't buid

────────────────── LOGS ──────────────────

publicFolder is public
rollup v1.16.3
bundles src/main.js → public\bundle.js...
[!] (plugin svelte) ParseError: Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component
node_modules\konsta\svelte\components\ActionsButton.svelte
71: </script>
72:
73: <svelte:element
     ^
74:   this={Component}
75:   bind:this={rippleEl.current}
ParseError: Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component
    at error$1 (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\utils\error.ts:25:16)
    at Parser$2.error (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\index.ts:93:3)
    at read_tag_name (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\state\tag.ts:303:10)
    at tag (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\state\tag.ts:101:15)
    at new Parser$2 (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\index.ts:45:12)
    at parse$2 (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\index.ts:208:17)
    at parse (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\compile\index.ts:68:14)
    at C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\rollup-plugin-svelte\index.js:252:22

Expected Behavior

Should display a basic app

Actual Behavior

Throws an error

Konsta UI version

1.0.2 (just installed it from npm)

Platform/Target and Browser Versions

Firefox

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

Check that this is really a bug

• [ ] I confirm

Reproduction link

https://stackblitz.com/edit/vite-fh6u6e

Bug description

I tried adding simple increment count click handler on one of the buttons in Buttons.svelte ` let count = 0; function incrementCount() { count += 1; }

<Button on:click={incrementCount}> Button {count} ` I get following error.

was created with unknown prop 'location' Buttons.svelte:3578:92 was created with unknown prop 'navigate' Buttons.svelte:3578:92

Expected Behavior

counter should increment and should show on top of button.

Actual Behavior

incremented counter not showing up on button.

Konsta UI version

0.11.1

Platform/Target and Browser Versions

chrome, firefox

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

Clear and concise description of the problem

When using Konsta UI with Svelte or Vue and setting default values for inputs in ListInput via defaultValue, the inputs remain empty. See the documentation example:

    <ListInput
      label="Birthday"
      type="date"
      defaultValue="2014-04-30"
      placeholder="Please choose..."
    >

Suggested solution

defaultValues should be set for inputs

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [ ] I'm willing to open a PR

<svelte:element this="input"> is self-closing and cannot have content.
Error: <svelte:element this="input"> is self-closing and cannot have content.
    at Proxy.validate_void_dynamic_element (/home/ansel/Development/svelte/kudura-app/node_modules/svelte/internal/index.js:2082:15)
    at eval (/node_modules/konsta/svelte/components/ListInput.svelte:243:31)
    at eval (/node_modules/konsta/svelte/components/ListInput.svelte:245:10)
    at Object.inner (ListInput.svelte:198:16)
    at eval (/node_modules/konsta/svelte/components/ListItem.svelte:268:33)
    at eval (/node_modules/konsta/svelte/components/ListItem.svelte:270:13)
    at ListItem.svelte:163:14
    at eval (/node_modules/konsta/svelte/components/ListItem.svelte:318:8)
    at ListItem.svelte:156:10
    at Object.$$render (/home/ansel/Development/svelte/kudura-app/node_modules/svelte/internal/index.js:1758:22)

Dear community, as the maintainer of this project, I have put the repository in "vacation mode" so that I can take a much needed and deserved break without worrying about tasks piling up while I recharge. I hope you can understand the need to take this action and not just "turn off notifications". Anyone who has experienced a company-wide shutdown would understand, that it's much easier to disconnect from work when everyone does at the same time.

Know that your contributions are valuable and appreciated, so please subscribe to this issue and get notified when I'm back and ready to resume actively maintaining this project.

Check that this is really a bug

• [X] I confirm

Reproduction link

https://konstaui.com/svelte/kitchen-sink

Bug description

The shape of the inkwell for the breadcrumb is incorrect

Expected Behavior

No response

Actual Behavior

https://user-images.githubusercontent.com/7126128/209065739-5766a906-f117-4350-8899-8f0e7b24fc7f.mp4

Konsta UI version

Konsta kitchen sink

Platform/Target and Browser Versions

Chrome Android

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

Clear and concise description of the problem

I have a small modal (Popup) and would like to know when its animation ended. onWillClose and onDidClose would be really helpful.

Suggested solution

N/A

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [ ] I'm willing to open a PR

Clear and concise description of the problem

In ListInput the dropdown uses a white background with white text on it so it's not visible. The issue exists in the kitchen-sink example code as well.

Suggested solution

Use dark background with white text by default.

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [ ] I'm willing to open a PR

Clear and concise description of the problem

If we set the element's dir it should change the layout.

But setting html attribute dir = 'rtl' or CSS direction: rtl;:

Suggested solution

Add dir support for components

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [ ] I'm willing to open a PR

Clear and concise description of the problem

Hi, so I noticed that there is a solid js version of Swiper JS. I was wondering if you have considered adding support for Solid JS to Konsta UI?

Suggested solution

Add support for solid js

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [ ] I'm willing to open a PR