@likable-hair/svelte 3.2.1 → 3.2.3

package/dist/components/composed/search/FilterEditor.svelte

@@ -7,6 +7,7 @@ import Autocomplete from "../../simple/forms/Autocomplete.svelte";
 import Checkbox from "../../simple/forms/Checkbox.svelte";
 import Icon from "../../simple/media/Icon.svelte";
 import ToggleList from "../forms/ToggleList.svelte";
+import { createEventDispatcher } from "svelte";
 export let filter = void 0, lang = "en", betweenFromLabel = lang == "en" ? "From" : "Da", betweenToLabel = lang == "en" ? "To" : "A", labelsMapper, forceApplyValid = false, editFilterMode = "one-edit", tmpFilter = void 0, mobile = false;
 let advancedModeOptions, advancedModeSelectedOptions;
 function initTmpFilter() {
@@ -69,6 +70,7 @@ function handleAdvancedModeSelection() {
       tmpFilter.mode = advancedModeSelectedOptions[0].value;
   }
   dropdownOpened = false;
+  handleChangeValue();
 }
 $:
   applyFilterDisabled = !Validator.isValid(tmpFilter) && !forceApplyValid;
@@ -84,6 +86,10 @@ $:
       tmpFilter.values = [];
     }
   }
+const dispatch = createEventDispatcher();
+function handleChangeValue() {
+  dispatch("change", tmpFilter);
+}
 </script>
 
 
@@ -115,6 +121,7 @@ $:
             type="text"
             placeholder={editFilterMode == 'one-edit' ? tmpFilter?.label : undefined}
             --simple-textfield-width="100%"
+            on:change={handleChangeValue}
           ></SimpleTextField>
         {:else if tmpFilter.type === "date" && tmpFilter.mode !== 'between'}
           <div>
@@ -125,6 +132,7 @@ $:
               on:day-click={() => {calendarOpened = false}}
               --simple-textfield-width="100%"
               flipOnOverflow
+              on:change={handleChangeValue}
             >
               <svelte:fragment slot="append-inner">
                 <Icon
@@ -146,6 +154,7 @@ $:
               type="number"
               placeholder={editFilterMode == 'one-edit' ? tmpFilter?.label : undefined}
               --simple-textfield-width="100%"
+              on:change={handleChangeValue}
             ></SimpleTextField>
           </div>
         {:else if tmpFilter.type === "select" && (tmpFilter.view === undefined || tmpFilter.view === 'autocomplete')}
@@ -160,6 +169,7 @@ $:
               --simple-textfield-width="0px"
               --simple-text-field-margin-left="0px"
               mobileDrawer={mobile}
+              on:change={handleChangeValue}
             ></Autocomplete>
           </div>
         {:else if tmpFilter.type === "select" && (tmpFilter.view === 'toggle')}
@@ -181,6 +191,7 @@ $:
               bind:menuOpened={calendarOpened}
               on:day-click={() => {calendarOpened = false}}
               --simple-textfield-width="100%"
+              on:change={handleChangeValue}
             >
               <svelte:fragment slot="append-inner">
                 <Icon
@@ -204,6 +215,7 @@ $:
               on:day-click={() => {calendarOpened2 = false}}
               --simple-textfield-width="100%"
               flipOnOverflow
+              on:change={handleChangeValue}
             >
               <svelte:fragment slot="append-inner">
                 <Icon
@@ -225,6 +237,7 @@ $:
               type="number"
               placeholder={betweenFromLabel}
               --simple-textfield-width="100%"
+              on:change={handleChangeValue}
             ></SimpleTextField>
           </div>
           <div>
@@ -233,12 +246,14 @@ $:
               type="number"
               placeholder={betweenToLabel}
               --simple-textfield-width="100%"
+              on:change={handleChangeValue}
             ></SimpleTextField>
           </div>
         {:else if tmpFilter.type == 'bool'}
           <div class="bool-filter">
             <Checkbox
               bind:value={tmpFilter.value}
+              on:change={handleChangeValue}
             ></Checkbox>
             <span style:margin-left="10px">
               {tmpFilter.description}

package/dist/components/composed/search/FilterEditor.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
     events: {
         click: MouseEvent;
         keypress: KeyboardEvent;
+        change: CustomEvent<Filter | undefined>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/simple/forms/RadioButton.css

@@ -0,0 +1,10 @@
+:root {
+    --radio-button-default-active-color: rgb(var(--global-color-primary-500));
+    --radio-button-default-active-inner-color: rgb(var(--global-color-grey-50));
+    --radio-button-default-focus-shadow: 2px rgb(var(--global-color-primary-500), .3);
+    --radio-button-default-border-color: rgb(var(--global-color-contrast-300), .2);
+    --radio-button-default-border-hover-color: rgb(var(--global-color-primary-500));
+    --radio-button-default-background-color: rgb(var(--global-color-background-200));
+    --radio-button-default-disabled-color: rgb(var(--global-color-background-200), .5);
+    --radio-button-default-disabled-active-color: rgb(var(--global-color-primary-400));
+}

package/dist/components/simple/forms/RadioButton.svelte

@@ -0,0 +1,101 @@
+<script>import "./RadioButton.css";
+import "../../../css/main.css";
+export let name, value, id = void 0, checked = false, label = void 0, disabled = false;
+</script>
+
+<input
+  type="radio"
+  {name}
+  {value}
+  {id}
+  {disabled}
+  {checked}
+  on:change
+  on:input
+  on:focus
+  on:blur
+  on:keydown
+  on:keypress
+  on:keyup
+/>
+{#if label}
+  <label for={id}>
+    {label}
+  </label>
+{/if}
+
+<style>
+@supports (-webkit-appearance: none) or (-moz-appearance: none) {
+  input[type="radio"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    height: 21px;
+    width: 21px;
+    outline: none;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    margin: 0;
+    cursor: pointer;
+    border-radius: 50%;
+    border: 1px solid var(--bc, var(--radio-button-border-color, var(--radio-button-default-border-color)));
+    background: var(--b, var(--radio-button-background-color, var(--radio-button-default-background-color)));
+    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
+  }
+
+  input[type="radio"]:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 19px;
+    height: 19px;
+    border-radius: 50%;
+    background: var(--radio-button-active-inner-color, var(--radio-button-default-active-inner-color));
+    opacity: var(--o, 0);
+    transform: scale(var(--s, 0.7));
+    transition: transform 0.3s ease, opacity 0.2s;
+  }
+
+  input[type="radio"]:checked:not(:disabled) {
+    --b: var(--radio-button-active-color, var(--radio-button-default-active-color));
+    --bc: var(--radio-button-active-color, var(--radio-button-default-active-color));
+    --o: 1;
+    --s: 0.5;
+  }
+
+  input[type="radio"]:disabled {
+    --b: var(--radio-button-disabled-color, var(--radio-button-default-disabled-color));
+    --bc: var(--radio-button-disabled-active-color, var(--radio-button-default-disabled-active-color));
+    cursor: not-allowed;
+    opacity: 0.9; 
+  }
+
+  input[type="radio"]:disabled:checked {
+    --b: var(--radio-button-disabled-active-color, var(--radio-button-default-disabled-active-color));
+    --bc: var(--radio-button-border-color, var(--radio-button-default-border-color));
+    --o: 1;
+    --s: 0.5;
+  }
+
+  input[type="radio"]:hover:not(:checked):not(:disabled) {
+    --bc: var(--radio-button-border-hover-color, var(--radio-button-default-border-hover-color));
+  }
+
+  input[type="radio"]:focus {
+    box-shadow: 0 0 0 var(--radio-button-focus-shadow, var(--radio-button-default-focus-shadow));
+  }
+
+  input[type="radio"] + label {
+    font-size: 14px;
+    line-height: 21px;
+    display: inline-block;
+    vertical-align: top;
+    cursor: pointer;
+    margin-left: 4px;
+  }
+
+  input[type="radio"]:disabled + label {
+    cursor: not-allowed;
+  }
+}
+</style>

package/dist/components/simple/forms/RadioButton.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import './RadioButton.css';
+import "../../../css/main.css";
+declare const __propDef: {
+    props: {
+        name: string;
+        value: string;
+        id?: string | undefined;
+        checked?: boolean | undefined;
+        label?: string | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        change: Event;
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
+export default class RadioButton extends SvelteComponent<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+}
+export {};

package/dist/components/simple/lists/SimpleTable.svelte

@@ -39,7 +39,6 @@ onMount(() => {
       if (!!th) {
         let { paddingLeft, paddingRight } = getComputedStyle(th);
         let width = resizedColumnSizeWithPadding[head.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
-        console.log(resizedColumnSizeWithPadding[head.value], paddingLeft, paddingRight, width);
         th.style.width = `${width}px`;
       }
     }

package/dist/index.d.ts

@@ -69,6 +69,7 @@ export { default as FilterBuilder } from './utils/filters/builder';
 export { default as FilterConverter } from './utils/filters/filters';
 export { default as FilterValidator } from './utils/filters/validator';
 export { countriesList, countriesOptions, getCountryInfoByAlpha2 } from './utils/countries';
+export { default as FilterEditor } from './components/composed/search/FilterEditor.svelte';
 export { default as GanymedeLineChart } from './components/simple/charts/GanymedeLineChart.svelte';
 export { default as GanymedeBarChart } from './components/simple/charts/GanymedeBarChart.svelte';
 export { default as GanymedePieChart } from './components/simple/charts/GanymedePieChart.svelte';

package/dist/index.js

@@ -69,6 +69,7 @@ export { default as FilterBuilder } from './utils/filters/builder';
 export { default as FilterConverter } from './utils/filters/filters';
 export { default as FilterValidator } from './utils/filters/validator';
 export { countriesList, countriesOptions, getCountryInfoByAlpha2 } from './utils/countries';
+export { default as FilterEditor } from './components/composed/search/FilterEditor.svelte';
 export { default as GanymedeLineChart } from './components/simple/charts/GanymedeLineChart.svelte';
 export { default as GanymedeBarChart } from './components/simple/charts/GanymedeBarChart.svelte';
 export { default as GanymedePieChart } from './components/simple/charts/GanymedePieChart.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.2.1",
+  "version": "3.2.3",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",