oli8 / spaper Goto Github PK
View Code? Open in Web Editor NEWPaperCSS components for Svelte
Home Page: https://oli8.github.io/spaper/
License: MIT License
PaperCSS components for Svelte
Home Page: https://oli8.github.io/spaper/
License: MIT License
Proposition
// Toast.svelte
[...]
export let startedTime: Date;
[...]
function dismiss() {
if (!pauseOnHover || indefinite) return;
if ((new Date().valueOf()) - startedTime.valueOf() < duration) return;
close();
}
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.
[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?
This is due to _tabs.scss: line 9:
.tabs input {
display: none;
}
Sample:
Spaper doesn't recognize the CloseButton tag as plain html and it doesn't render it
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?
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
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.
<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.
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
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.
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.
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';
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
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
First off, huge thanks for your amazing work.
Wouldn't it be better to use the native progress element instead of a simple div
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.