oli8/spaper

PaperCSS components for Svelte

spaper's Issues

node-sass

Node a big deal, but node-sass should be added to this package's dependencies as it is a requirement to run in svelte-kit. At the very least, it should be added to a svelte-kit instruction guide.

J

Add components for Flexgrid

I thought it might be nice to have <Row> and <Col> components for using the grid organically in Svelte.

I took the liberty of making a proposal here.

• The two components allow you to rewrite the flexgrid demo page like this.
• Additional props are passed down, including classes
• <Row> has these boolean props which translate to the respective "flex-xxx" classes: right, center, edges, spaces, top, middle, bottom
• <Col> has similar boolean props (fill, top, middle, bottom), and additionally accepts props on how wide the column should be (col, or sm, md, lg). These can be given as strings (col="4") or numbers (col={3}).

The implementation is inspired by carbon-components-svelte.

This is my first attempt at a contribution to a project on Github, so I'm happy to get feedback or be pointed in the right direction.

Consider adding font dependency through npm to reduce font loading related flash of unstyled text

For local development, downloading fonts from google cdn adds a flash due to font replacement.

This can be eliminated by using local fonts.
Instead of adding the font reference in the css file, you can add them through package.json

"dependencies": {
"@fontsource/neucha": "^4.5.0",
"@fontsource/patrick-hand-sc": "^4.5.0",
...
}

then in some source file:
import '@fontsource/patrick-hand-sc';
import '@fontsource/neucha';

Collapsible broken in Tab

This Collapsible is contained in a Modal, under normal circumstances, it should be displayed like this:

but, if i put him in a tab: (it's in the EnvList component)

How to style elements of Imported Card

Hello @Oli8,

I had a question regarding styling the elements that constitute a card. This may be a general question, but I was hoping I could find help here as I am using this theme on my website.

Code:

<Card title={name} {image} imageAlt="{name}'s pic" subTitle={description} width="15.5em" >

I have a card defined as above. I want to change the specific color of the title and subTitle. How might I do this? I was not sure how to add styling to the elements of the card.

Form Component missing types

[Issue]
The Form.svelte component is missing types, see Image:

I was able to fix that locally by adding extends SvelteComponentTyped<FormProps, FormEvents, FormSlots> to export default class Form inside the npm module in the Form.svelte.dt.ts file. Though these files seem to be auto generated as they dont appear in the actual source code. How to fix this?

Label Warning with Vite in Svelte Kit

I am getting these eslint warnings (I guess vite uses it in the background). Should be a simple fix.

Thanks!

J

Cannot insert a CloseButton as Table content

Spaper doesn't recognize the CloseButton tag as plain html and it doesn't render it

SvelteKit Updates

Ran across this recently and went to play with it. Love it, thank you for the hard work.

I believe some work needs to be done to work out of the box for SvelteKit. Upon running you will get this error

1:47:54 PM [vite] Error when evaluating SSR module /node_modules/lodash.omit/index.js?v=ded03013:
ReferenceError: module is not defined
    at /node_modules/lodash.omit/index.js?v=ded03013:1488:1
    at instantiateModule (/Users/clarksell/source/scratch/KitNow/node_modules/vite/dist/node/chunks/dep-85dbaaa7.js:66541:15)

You can resolve it by adding this to your svelte.config.js file but I think it really needs to be converted to a module.

  vite: {
    optimizeDeps: {
      include: ['lodash.omit', 'lodash.pick']
      }
    }

I didn't have a chance to look through the source yet but I wanted to drop this here for others.

Multiple toast at the same time throws error

you can reproduce it directly in the documentation:

https://oli8.github.io/spaper/#/components/Toast

Stacktrace from my project:

Uncaught TypeError: container is null
    removeContainer Toast.svelte:80
    setTimeout handler*removeContainer Toast.svelte:79
    close Toast.svelte:60
    setTimeout handler*instance3/< Toast.svelte:42
    run index.mjs:20
    mount_component index.mjs:2101
    flush index.mjs:1329
    init index.mjs:2197

My guess is that both set a timeout to remove the container for the toast and when one came first the other doesn't find the container anymore. My suggestion hold a variable to the timeout and remove timeout when new toast comes and override the timeout like this.

Burnt toast

Hello sir,

I've found a glitch with the Toast component on the demo website. On this page, when I click the "Go" button it opens the Toast well, but then I can't click on the navigation buttons no more (in the main navigation menu).

I guess it has something to do with the paper-toast-container div that would prevent reaching the nav bar?

I'm on FIrefox 78.15.0esr, also tested on Brave 1.33.106.

Best regards

<Input /> does not work inside a <Tab>

This is due to _tabs.scss: line 9:
.tabs input {
display: none;
}

Sample:

Hovering on a toast then leave the area closes the toast even if there's remaining time (when `pause on hover` is checked)

Proposition

// Toast.svelte

[...]

export let startedTime: Date;

[...]

function dismiss() {
  if (!pauseOnHover || indefinite) return;
  if ((new Date().valueOf()) - startedTime.valueOf() < duration) return;

  close();
}

Documentation should state this needs to be added as devDependency

otherwise will get error:

Error: is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

Unexpected behaviour with dynamic tabs

I need to implement a tab system like this

<script lang="ts">
    import Tabs from "spaper/components/Tabs/Tabs.svelte";
    import Tab from "spaper/components/Tabs/Tab.svelte";

    let tabs = [{id: 0}];
    let i = 0;

    function addTab() {
        tabs = [...tabs, {id: ++i}]
    }
</script>
<Tabs>
    {#each tabs as tab}
        <Tab label={tab.id}>
            {tab.id}
        </Tab>
    {/each}
    <Tab label="Add">
        <button on:click={addTab}>Click</button>
    </Tab>
</Tabs>

If at first, there is no problem, the newly created tabs are not placed as expected. I won't try an explanation, testing the snippet should be sufficient to understand.

Tried with Sveltekit, not with Svelte, but I don't think that makes a difference

Using native HTML progress element for <Progress> component

Hello

First off, huge thanks for your amazing work.

Wouldn't it be better to use the native progress element instead of a simple div

Svelte 4 support?

Thanks for the library, I'm using it at https://scheduleyour.social and its working great 🙏

I'm going to try upgrading to Svelte 4 and check everything still works, my understanding is that most libraries won't be broken by upgrading to Svelte 4 but just wanna check if there are any known reasons why this definitely won't work before I invest too much time? And if any changes are required, will you accept a PR?