idris-maps / svelte-parts Goto Github PK

View Code? Open in Web Editor NEW

48.0 5.0 5.0 1.42 MB

Svelte components

Home Page: https://svelte-parts.surge.sh

JavaScript 0.35% HTML 0.04% Svelte 72.16% CSS 2.98% TypeScript 6.54% Astro 17.94%

svelte

svelte-parts's Introduction

svelte-parts

docs: https://svelte-parts.surge.sh

install

npm install svelte-parts

components

DropFile - Drop files(s) or click to browse file system
Form - Yet another form component
FormBuilder - UI to create form descriptions for Form
Icons - SVG icons from feather icons, maki icons and octicons
Map - Mapping components using leaflet
Markdown - Use markdown blocks in your svelte app
Modal - Just a modal
Zoom - Allow pan and zoom on images

update 2023-01-28

Now using svelte-kit to package the components. It fixes typescript errors in svelte@3. All components are now available under the same npm library: svelte-parts. The old @svelte-parts/... libraries are deprecated but still available.

The @svelte-parts/editor was using an older version of codemirror and is not ported to svelte-parts.

svelte-parts's People

Contributors

Stargazers

Watchers

Forkers

buk1m yakworks plkmarudny tarentino76 stophecom

svelte-parts's Issues

Default values for unchanged form

When a form is created from data and submitted, only changed values are evaluated and sent back to the server, for example:

"fields": [
                            {
                                "type": "text",
                                "property": "upper_line",
                                "label": "Upper Line",
                                "notRequired": true
                            },
                            {
                                "type": "text",
                                "property": "bottom_line",
                                "label": "Bottom Line",
                                "notRequired": true
                            },
                            {
                                "type": "date",
                                "property": "onair_date",
                                "label": "Date"
                            },
                            {
                                "type": "checkbox",
                                "property": "12h",
                                "label": "AM/PM",
                                "value": true
                            },
                            {
                            "type": "radio",
                            "property": "pill",
                            "label": "Choose your pill",
                            "options": [
                                "red",
                                "blue"
                            ],
                            "value": ""
                            }
                        ]

Generates the following form:

Pressing "submit" after setting up a date (required) produces:

It does not seem possible to receive all the fields with the default values instead (but it would be nice to get them)

Svelte says "editor is incorrectly packaged"

I'm trying to use the editor package, almost exactly as you've recommended in the readme

<script lang="ts">
  import { articles } from '$lib/store';
  import Editor from '@svelte-parts/editor';
  import 'codemirror/lib/codemirror.css';
</script>

<Editor initialValue={$articles[0].content} />

But I get the following error

@svelte-parts/editor is incorrectly packaged. Please contact the package author to fix.
7:39:52 PM [vite] Error when evaluating SSR module /node_modules/codemirror/lib/codemirror.js?v=4b019038:
ReferenceError: navigator is not defined
    at /node_modules/codemirror/lib/codemirror.js?v=4b019038:18:19
    at /node_modules/codemirror/lib/codemirror.js?v=4b019038:13:49
    at /node_modules/codemirror/lib/codemirror.js?v=4b019038:14:2
    at instantiateModule (node_modules/vite/dist/node/chunks/dep-7817f5b4.js:67424:15)

Any idea why this might be happening? Or how I can fix it?

Improvements to @svelte-parts/drop-file

Hi A***, great repo!
I just checked out drop-file - it's great. I noticed that newer svelte version complains about typescript.

Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
  import type { SvelteComponentTyped } from "svelte";
  class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}

Also, I was wondering if the property multiple should be optional, since it would be better aligned with the native file input. (Also I only need one file in my app :))

Let me know, I can create PR.

Form: Hook for custom field

I have a ForeignKey.svelte component which implements an autocomplete feature where an inline form facilitates the creation of a new related instance (if it does not exist).

It would be lovely to be able to include it in the json object which creates the initial form:

const fields = {}

Form fixes

Set default for select and radio
Animate choice in builder
Builder, number steps only allow integer
Builder, set default color

disable SSR a page-level ssr export don't work.

markdown.svelte

<script context="module">
  import Editor from '@svelte-parts/editor';

  export const ssr = false;
</script>

<Editor/>

error log:

<Editor> 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