iconograph-ui 1.2.0 → 1.2.2

package/index.js

@@ -1,15 +1,19 @@
-import Button from "./lib/form/Button.svelte";
+import FormButton from "./lib/form/FormButton.svelte";
 import Form from "./lib/form/Form.svelte"
 import Input from "./lib/form/Input.svelte"
 import BodySection from "./lib/layout/BodySection.svelte"
 import HeadSection from "./lib/layout/HeadSection.svelte"
 import Card from "./lib/layout/Card.svelte"
 import MainMenu from "./lib/navigation/MainMenu.svelte"
+import Button from "./lib/navigation/Button.svelte"
 import Notification from "./lib/notification/Notification.svelte";
 import NotificationWrapper from "./lib/notification/NotificationWrapper.svelte";
+import Table from "./lib/table/Table.svelte"
+import CellLink from "./lib/table/CellLink.svelte"
 
 export {
     Button,
+    FormButton,
     Form,
     Input,
     BodySection,
@@ -17,5 +21,7 @@ export {
     Card,
     MainMenu,
     Notification,
-    NotificationWrapper
+    NotificationWrapper,
+    Table,
+    CellLink,
 };

package/lib/form/Form.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Button from "./Button.svelte";
+    import FormButton from "./FormButton.svelte";
     import { addNotification } from "../notification/NotificationWrapper.svelte";
 
     export let inputs = [];
@@ -48,16 +48,17 @@
 <form>
 
     {#each inputs as input}
-        <div class="form-row">
-            <div>
-                <label for="{input.props.name}" class="mandatory">{input.props.label}</label>
-
-                <svelte:component this={input.component} {...input.props} bind:value={input.value} />
+        {#if !input.disabled }
+            <div class="form-row">
+                <div>
+                    <label for="{input.props.name}" class="mandatory">{input.props.label}</label>
+                    <svelte:component this={input.component} {...input.props} bind:value={input.value} />
+                </div>
             </div>
-        </div>
+        {/if}
     {/each}
 
-    <Button button={button} clickEvent={handleSubmit} ></Button>
+    <FormButton button={button} clickEvent={handleSubmit} ></FormButton>
 
 </form>
 

package/lib/form/{Button.svelte → FormButton.svelte}

@@ -26,6 +26,7 @@ button {
     border: none;
     cursor: pointer;
     padding: 0px 20px;
+    margin-top: 12px;
 }
 button:hover {
     background-color: var(--theme-main-color-hover);

package/lib/form/Input.svelte

@@ -2,15 +2,15 @@
     export let name;
     export let type;
     export let value;
+    export let required = false;
 </script>
 
 {#if type == "textarea"}
     <textarea name="{name}" bind:value={value} ></textarea>
 {:else}
-    <input type={type} name="{name}" bind:value={value} autocomplete="on" required />
+    <input type={type} name="{name}" bind:value={value} autocomplete="on" required={required} />
 {/if}
 
-
 <style>
 
 input, textarea {

package/lib/form/SexeChoiceInput.svelte

@@ -0,0 +1,44 @@
+<script>
+    export let name;
+    export let value;
+
+    console.log(value);
+</script>
+
+<div class="selector">
+    {#each ['Homme', 'Femme'] as sexe}
+    <div>
+        <input type="radio" name={name} value={sexe} bind:group={value} />
+        <label for={sexe}>{sexe}</label>
+    </div>
+    {/each}
+</div>
+
+<style>
+.selector {
+    display: flex;
+    gap: 12px;
+}
+.selector > div {
+    padding: 6px 3px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+input {
+    background-color: #f5f5fb;
+    border: none;
+    border-radius: 6px;
+    padding: 7px 14px;
+    font-size: 14px;
+    line-height: 14px;
+    font-weight: 500;
+    border: 1px solid #f3f3f3; /*#d1d9e0;*/
+}
+label {
+    font-size: 14px;
+    line-height: 14px;
+    font-weight: 500;
+}
+
+</style>

package/lib/navigation/Button.svelte

@@ -0,0 +1,42 @@
+<script>
+    export let label;
+    export let uri;
+</script>
+
+<a href="{uri}" >
+    {label}
+</a>
+
+<style>
+a {
+    min-width: 100px;
+    display: inline-block;
+    background-color: var(--theme-main-color);
+    color: #ffffff !important;
+    /*box-shadow: #000000a0 0px 1px 3px 0px !important;*/
+    border-radius: 8px;
+    height: 34px;
+    line-height: 34px !important;
+    font-size: 13px;
+    text-decoration: none;
+    text-align: center;
+    font-family: var(--theme-main-font);
+    font-weight: 700;
+    text-transform: uppercase;
+    border: none;
+    cursor: pointer;
+    padding: 0px 20px;
+    margin-top: 12px;
+}
+a:hover {
+    background-color: var(--theme-main-color-hover);
+}
+a:active {
+    background-color: var(--theme-main-color-hover);
+    position: relative;
+    top: 1px;
+}
+a:disabled {
+    background-color: var(--disabled-background-color) !important;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iconograph-ui",
-    "version": "1.2.0",
+    "version": "1.2.2",
     "description": "A Svelte Kit components library",
     "main": "./index.js",
     "svelte": "./index.js",

package/lib/Button.svelte

@@ -1,15 +0,0 @@
-<script>
-  export let label = "Click me";
-</script>
-
-<button>{label}</button>
-
-<style>
-  button {
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    background: #4cafef;
-    color: white;
-    border: none;
-  }
-</style>