Creating a new project for Svelte + UTFPR

$ npm create vite@latest my-project -- --template svelte-ts
$ cd my-project

$ npm i utfpr-svelte

$ npm run dev

Require import utfpr.css in your app.css

Warning: This library require FontAwesome 4.6 ou 4.7 for some purposes (it will be removed in future).

@import "utfpr-svelte/lib/utfpr.css";

for theming, set css variables after this import (current values are):

  --bg-primary: #edeff1;
  --bg-secondary: #E0EEF0;

  --bg-hover: #d0e5f5;
  --bg-disabled: #c5dbec;
  --bg-active: #f5f8f9;
  --bg-content: #fcfdfd;
  --bg-aside: #ddd;

  --border-default: #a6c9e2;
  --border-focus: #2e6e9e;
  --border-highlight: #1659bf;
  --border-active: #79b7e7;

  --cell-hover: rgba(208, 229, 245, 0.8);

  --text-active: #1d5987;
  --font-active: #e17009;

  --placeholder: rgba(46, 110, 158, 0.5);

  --shadow: rgba(64, 64, 64, .35);
  --shadow-lt: rgba(128, 128, 128, .3);
  --warning: #700;

Disponible Components:

Router

• UHashRouter (router that uses Location.Hash 'without storage' - goot for share or link externally / or inside some IFrame)

Containers:

• UPanel (a collapsable panel - inspired from PrimeUi Panel)
• UTabs (a tab component like jQueryUI Tabs - hide unselected inner TabPanels for keep they states)
• UDialog (under construction - a Modal/Dialog container)
• ~~Accordion~~ (you can do it stacking some UPanels like UHashRouter does)

Notification:

• UToast (upper-right-sided messages)
• tooltip (internally used to show onHover messages)

Visual:

• UTitle (create a simple title bar)
• UStaticText (apresentation text with aspect of any 'input')
• UButtonSet (grouped buttons - a kind of radioGroup)

Form:

• UForm (form container - you can choose Panel or Dialog - with some 'pre-defined' buttons - and auto-validate/Serialize on submit)

FormElements:

• Specialized inputs to Text, Integer, Date, Time and DateTime - inspired from MaterialUI) - form validations ready
• USearchCombo (Deprecated)
• ULookUpCombo - uses internally: svelte-select

Table

• UTable (a table with caption, align, sort, filter, and CSV download)
• Specialized TableColumn components to show (and format) text, integer, currency, date/time, buttons

Example:

App.svelte

<script>
  import UHashRouter from "utfpr-svelte/lib/hashRouter/UHashRouter.svelte";
  import URoute from "utfpr-svelte/lib/hashRouter/URoute.svelte";
  import UTitle from "utfpr-svelte/lib/visualElements/UTitle.svelte";
  import UToast from "utfpr-svelte/lib/tooltip/UToast.svelte";
  import BasicExample from './pages/BasicExample.svelte';
  import TableExample from './pages/TableExample.svelte';
</script>
<UTitle title="My 1st Utfpr-Svelte" />
<UHashRouter defaultRoute="#">
  <URoute
    group="Examples"
    label="basic example"
    route="#example"
    component={BasicExample}
  />
  <URoute
    group="Examples"
    label="table example"
    route="#example"
    component={TableExample}
  />
</UHashRouter>
<UToast />

BasicExample.svelte

<script>
  // imports
  let options = [
    { id: 1, label: "1st", hint: "see my hint" },
    { id: 2, label: "2nd", hint: "another hint" },
    { id: 3, label: "3rd", hint: "greatest hint ever!" },
  ];
  let ButtonSetValue = 1;
</script>
<UPanel title="UButtonSet">
  <UButtonSet
    label="Selecione:"
    name="btset"
    options={options}
    bind:value={ButtonSetValue}
    on:change={(e) => (console.log( e.detail.selected.label ) )}
  />
</UPanel>
<UTabs>
   <UTabPanel label="my tab" hint="the slot is correctly rendered!">
     <p>This is my Tab!</p>
   </UTabPanel>
   <UTabPanel label="another tab" hint="can you see me ?">
     <p>This is the another Tab!</p>
   </UTabPanel>
</UTabs>

TableExample.svelte

when sorter is ZERO or Empty - then data is 'un-ordered'. Column position was not zero based, so the 1st column is 1, 2nd is 2... Positive values are ASC and Negatives are DESC, so [-4,2] is ordered by Salary Desc + Name Asc

<script>
  // imports
  const name = "Table Example";      
  let tableData = [
    {id: "101", name: "Rick", sal: 85200, day: new Date(), position: "Boss"},
    {id: "246", name: "John", sal: 72500, position: "Manager"},
    {id: "375", name: "Marty", sal: 64321.75, position: "Chief"},
  ];
  
</script>
<UTable data={tableData} caption={name} sorter={[-2, 3]}>
  <UTableCounterCol />
  <UTableCol key="name" title="Name" isStrong hintKey="position" />
  <UTableIntegerCol key="id" title="ID Code" />
  <UTableCurrencyCol key="sal" title="Salary" symbol="USD" />
  <UTableDateCol key="day" title="Date" format="date" align="center"/>
  <UTableButton
    title="detail"
    hint="show this line on console"
    on:click={(ev) => console.log(ev.detail)}}
  />      
</UTable>

Notes:

• the initial version is set as 1.0.0 wrongly (as all 1.0.0-? versions), please ignore them!