sveltekit / ui Goto Github PK

I've npm install @sveltekit/ui -D in a fresh Svelte starter project, which installs without errors.

I then added a datepicker component using following the example: https://sveltekit.now.sh/#DatePicker

On compile I get the following errors:

(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
lodash/assignIn (imported by node_modules/@sveltekit/ui/src/components/DatePicker/DatePicker.svelte)
dayjs/plugin/customParseFormat (imported by node_modules/@sveltekit/ui/src/components/DatePicker/DatePicker.svelte)
flatpickr (imported by node_modules/@sveltekit/ui/src/components/DatePicker/DatePicker.svelte)
dayjs (imported by node_modules/@sveltekit/ui/src/components/DatePicker/DatePicker.svelte)
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
lodash/assignIn (guessing 'assignIn')
flatpickr (guessing 'flatpickr')
dayjs (guessing 'dayjs')
dayjs/plugin/customParseFormat (guessing 'customParseFormat')

I was going to install those missing dependencies via npm to address the issue, but even a simple component such a button appears to be missing some CSS.

I added a button following the example: https://sveltekit.now.sh/#Button but it does not match the example (e.g. no green background):

Apologies if this is user error on my part as I am new to Svelte.

I'd be satisfied with a theme that can't be edited, just a switch, but it would be nice if it was configurable.

Are the fallback values for browser support? I don't think this approach really works.
If using components with your own css variables, you are unable to change the fallback value.
This means that the supporting and non-supporting browsers will style the components differently.

I think browser support is best handled by the user, if they require it.

I'm proposing to remove all the fallback values. Also defining a components css vars within its own style block:

html { --Button-default-type-color: var(--green_4); --Button-rounded-border-radius: 50px; }

The user could then globally override these values:

:root { --Button-default-type-color: red; --Button-rounded-border-radius: 120px; }

or use a more specific css selector for overriding these values:

.specialButton { --Button-default-type-color: gold; --Button-rounded-border-radius: 50%; }

Steps to reproduce:

1. Go to https://sveltekit.now.sh/#NumberInput
2. Focus on the input element and clear the value by pressing Backspace button

Actual behavior: NaN value is displayed and can't be cleared/changed even with increase/decrease buttons (arrows).

Expected behavior: value is cleared.

It seems like there's an ongoing discussion on this so this issue might be redundant in the scope of things.

I guess the reason for the verbose naming is to avoid collision with the user's defined values and have a global "theme". If I have a one-off Card or similar, its a lot of typing --Card- in the style attribute.

It might be convenient to expose Component-level CSS variables as props just for that reason:

<script>
  export let borderRadius
</script>

<div style="--Card-border-radius: {borderRadius}">
</div>

edit: Hadn't seen sveltejs/rfcs#13 yet...

In https://sveltekit.now.sh/#Modal, There is import modalService from '../modal'; without explanation. What content is in this file?

With React, there are several frameworks that expose a Box component. This component serves to do simple style resets and such, as well as supplement a div that can access e.g. theme colors and sizes.

Coming from grommet, I've already been tripped up by box sizing. Here's their style reset:

    display: flex;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0px;
    min-height: 0px;
    outline: none;

If something like this does make it in, my vote would be for a default of display: flex. I like using flexbox everywhere and "just writing flexbox" in css is super nice. A flexbox component with some syntactic sugar to get going might be nice.

edit: Still learning svelte... I'm not so sure on the "reset" part now.