@geostarters/icgc-svelte-components v0.0.21
@geostarters/icgc-svelte-components
A lib of Svelte Components
To use components
Installation
npm i @geostarters/icgc-svelte-components --save
Svelte sample code
import {LogoIcgc,
ButtonIcgc,
LayerTreeIcgc,
OverLayersIcgc,
SliderOpacityIcgc,
ModalIcgc,
CookieGdprIcgc} from "@geostarters/icgc-svelte-components";
<LogoIcgc type="white"/>
<ButtonIcgc label="button" />
<LayerTreeIcgc {mapLayersArray} on:Change={change} bind:group={selected} />
<OverLayersIcgc {layerTree} />
<SliderOpacityIcgc />
<CookieGdprIcgc on:analytics={onAnalytics} />
<ModalIcgc />
View demo
Components
<LogoIcgc/>
Properties
type: "color"|| white;
href :"url to link" || "https://www.icgc.cat";
src : "url to logo" || default url logos;
style : "css style" || "position: absolute;z-index: 1000;right: 50px;bottom:10px";
<ModalIcgc/>
Properties
width: "width"|| "50%";
height: "height" || "50%";
style: "css style" || null;
title: "title" || "Modal";
description: "content" || "";
href: "url to link" || "";
img: "url to image" || "";
infoLabel: "icon" || "info";
closeLabel: "icon" || "close";
<ButtonIcgc/>
Properties
style : "css style" || "background: #c8ffe7";
<LayerTreeIcgc/>
Properties
mapLayersArray : layers array || [
{ id: "building", name: "Edificis", checked: true },
{ id: "place", name: "Llocs", checked: false },
{ id: "water", name: "Aigua", checked: true },
];
Events
on:change={ }
<OverLayersIcgc/>
Properties
layerTree : layers array || [
{
groupLabel: "Group 1",
groupId: "opt_group1",
items: [
{
label: "Layer 1",
id: "layer1",
layout: { visibility: "none" },
},
{
label: "Layer 2",
id: "layer2",
layout: { visibility: "none" },
},
{
label: "Layer 3",
id: "layer3",
layout: { visibility: "visible" },
},
],
},
{
groupLabel: "Group 2",
groupId: "opt_group2",
items: [
{ label: "Layer A", id: "layerA" },
{
label: "Layer B",
id: "layerB",
layout: { visibility: "none" },
},
{
label: "Layer C",
id: "layerC",
layout: { visibility: "none" },
},
],
},
];
Events
on:change={ }
on:click={}
<SliderOpacityIcgc/>
Properties
type="range"
min="0"
max="100"
step="0"
value="50";
Events
on:change={ }
<CookieGdprIcgc/>
Properties
cookieName = "cookieAllowICGC";
heading = "";
description =
"Utilitzem galetes per distingir-vos d'altres usuaris en els nostres webs, per millorar la informació i els serveis que us oferim, i per facilitar-vos l'accés. Per a més informació, consulteu la <strong style='text-decoration: underline;'><a style='color: white; opacity: .8;' href='https://www.icgc.cat/ca/cookies'>política de galetes.</a> </strong> Pots acceptar totes les cookies prement el botó “Acceptar preferències” o configurar-les o rebutjar-ne l'ús prement el botó “Preferències”";
acceptLabel = "Acceptar";
settingsLabel = "Preferències";
closeLabel = "Tancar preferències";
showEditIcon= true;
choices = {
necessary: false,
tracking: false,
analytics: {
label: "Cookies Analítica",
description: "Aquest visor utilitza cookies de Google Analytics.",
value: true,
},
marketing: false,
};
Events
on:analytics={function(status){
console.info(status);
}}
Common functions
import {isWithinCat,getEmptyGeoJSON} from "@geostarters/icgc-svelte-components";
isWithinCat([1.4622,41.7139 ,1.8117 ,42.0330])
Whit this repo
- Create components with Svelte
- Generate a StoryBook
- Publish the components via NPM
- Reuse the components in other applications
To develope components
Local installation
You need Node.js installed
git clone https://github.com/geostarters/icgc-svelte-components.git
cd icgc-svelte-components
git checkout devel
npm install
To start in developement mode
npm run dev
To run storybook
npm run storybook
To deploy storybook
npm run build-storybook
New git branch
git checkout -b "nombranch"
To build for production mode
npm run build
To update code
git pull
git add .
git commit -m "text commit"
git push
In ordre to start developing
-Step 1 : Create a Svelte components in **/src/components/**
-Step 2 : Import and try component in **/src/App.svelte**
-Step 3 : Create storie component in **/src/stories**
-Step 4 : Run StoryBook ```npm run storybook```
-Step 5 : Import component in **/src/export.js** and ```run start build```
In order to publish NPM's components
https://www.npmjs.com/package/@geostarters/icgc-svelte-components
-Step 1: Go to **package.json** and update versión number
"name": "@geostarters/icgc-svelte-components",
"version": "0.0.2",
-Step 2: Open terminal
npm run build
npm login
Username: icgcgeostarters
Password: XXXXXXXX
Email: (this IS public): geostarters [at] gmail [dot] com
npm publish --access public
Used styles
This template use Svelte Material UI
Documentation
Material Icons
https://fonts.google.com/icons?selected=Material+Icons+Outlined:assignment_returned
Version
alpha 0.0.2
License
Reconeixement 4.0 Internacional de Creative Commons (CC-BY 4-0)
Credits
Developed by :
Institut Cartogràfic i Geològic de Catalunya (ICGC) - https://icgc.cat
Àrea d’Innovació i Estratègia Digital - Unitats Geostart i Web SIG
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago