@hyvor/design 0.0.32 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/components/Button/Button.svelte +3 -0
  2. package/dist/components/Button/Button.svelte.d.ts +1 -0
  3. package/dist/components/Checkbox/Checkbox.svelte +1 -1
  4. package/dist/components/Checkbox/Checkbox.svelte.d.ts +1 -0
  5. package/dist/components/FormControl/Validation.svelte +3 -3
  6. package/dist/components/Modal/Modal.svelte +6 -4
  7. package/dist/components/Radio/Radio.svelte +3 -1
  8. package/dist/components/Radio/Radio.svelte.d.ts +1 -0
  9. package/dist/components/Switch/Switch.svelte +3 -1
  10. package/dist/components/Switch/Switch.svelte.d.ts +1 -0
  11. package/dist/components/TabNav/TabNavItem.svelte +2 -0
  12. package/dist/components/TabNav/TabNavItem.svelte.d.ts +2 -0
  13. package/dist/components/TextInput/TextInput.svelte +2 -2
  14. package/dist/components/TextInput/TextInput.svelte.d.ts +1 -0
  15. package/dist/components/Textarea/Textarea.svelte +4 -4
  16. package/dist/components/Textarea/Textarea.svelte.d.ts +1 -0
  17. package/dist/variables.scss +1 -1
  18. package/package.json +1 -1
package/dist/components/Button/Button.svelte CHANGED
@@ -4,6 +4,7 @@ export let color = "accent";
4
4
  export let block = false;
5
5
  export let variant = "fill";
6
6
  export let align = "center";
7
+ export let button = {};
7
8
  </script>
8
9
 
9
10
  <svelte:element
@@ -25,6 +26,8 @@ export let align = "center";
25
26
  role="button"
26
27
  tabindex="0"
27
28
 
29
+ bind:this={button}
30
+
28
31
  {...$$restProps}
29
32
  >
30
33
 
package/dist/components/Button/Button.svelte.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const __propDef: {
8
8
  block?: boolean | undefined;
9
9
  variant?: "fill" | "outline" | "invisible" | "outline-fill" | undefined;
10
10
  align?: "start" | "center" | undefined;
11
+ button?: HTMLButtonElement | HTMLAnchorElement | undefined;
11
12
  };
12
13
  events: {
13
14
  keyup: KeyboardEvent;
package/dist/components/Checkbox/Checkbox.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script>export let checked = void 0;
2
2
  export let group = [];
3
3
  export let value = "on";
4
- let input;
4
+ export let input = {};
5
5
  function handleChange() {
6
6
  const index = group.indexOf(value);
7
7
  if (checked === void 0)
package/dist/components/Checkbox/Checkbox.svelte.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const __propDef: {
5
5
  checked?: boolean | undefined;
6
6
  group?: (string | number)[] | undefined;
7
7
  value?: string | number | undefined;
8
+ input?: HTMLInputElement | undefined;
8
9
  };
9
10
  events: {
10
11
  keyup: KeyboardEvent;
package/dist/components/FormControl/Validation.svelte CHANGED
@@ -6,11 +6,11 @@ export let state = "error";
6
6
  <div class="icon">
7
7
 
8
8
  {#if state === 'error'}
9
- <IconExclamationTriangleFill />
9
+ <IconExclamationTriangleFill style="color:var(--red)" />
10
10
  {:else if state === 'warning'}
11
- <IconInfoCircleFill />
11
+ <IconInfoCircleFill style="color:var(--orange)" />
12
12
  {:else}
13
- <IconCheckCircleFill />
13
+ <IconCheckCircleFill style="color:var(--green)" />
14
14
  {/if}
15
15
 
16
16
  </div>
package/dist/components/Modal/Modal.svelte CHANGED
@@ -53,9 +53,11 @@ export let closeOnEscape = true;
53
53
  <slot />
54
54
  </div>
55
55
 
56
- <div class="footer">
57
- <slot name="footer" />
58
- </div>
56
+ {#if $$slots.footer}
57
+ <div class="footer">
58
+ <slot name="footer" />
59
+ </div>
60
+ {/if}
59
61
 
60
62
  </div>
61
63
 
@@ -68,7 +70,7 @@ export let closeOnEscape = true;
68
70
  position: fixed;
69
71
  top: 0;
70
72
  left: 0;
71
- z-index: 1000;
73
+ z-index: 10000000;
72
74
  width: 100%;
73
75
  height: 100%;
74
76
  background: rgba(0,0,0,0.5);
package/dist/components/Radio/Radio.svelte CHANGED
@@ -1,13 +1,15 @@
1
1
  <script>export let value = "";
2
2
  export let group = "";
3
+ export let input = {};
3
4
  </script>
4
5
 
5
6
  <label>
6
7
 
7
- <input
8
+ <input
8
9
  type="radio"
9
10
 
10
11
  bind:group
12
+ bind:this={input}
11
13
  {value}
12
14
 
13
15
  on:keyup
package/dist/components/Radio/Radio.svelte.d.ts CHANGED
@@ -4,6 +4,7 @@ declare const __propDef: {
4
4
  [x: string]: any;
5
5
  value?: string | number | undefined;
6
6
  group?: string | number | undefined;
7
+ input?: HTMLInputElement | undefined;
7
8
  };
8
9
  events: {
9
10
  keyup: KeyboardEvent;
package/dist/components/Switch/Switch.svelte CHANGED
@@ -1,11 +1,13 @@
1
1
  <script>export let checked = false;
2
+ export let input = {};
2
3
  </script>
3
4
 
4
5
  <label class="switch-wrap">
5
6
  <span class="switch">
6
7
  <input
7
8
  type="checkbox"
8
- bind:checked
9
+ bind:checked
10
+ bind:this={input}
9
11
  {...$$restProps}
10
12
 
11
13
  on:keyup
package/dist/components/Switch/Switch.svelte.d.ts CHANGED
@@ -3,6 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  checked?: boolean | undefined;
6
+ input?: HTMLInputElement | undefined;
6
7
  };
7
8
  events: {
8
9
  keyup: KeyboardEvent;
package/dist/components/TabNav/TabNavItem.svelte CHANGED
@@ -14,6 +14,8 @@ function handleClick() {
14
14
  class:active={isActive}
15
15
  on:click={handleClick}
16
16
  {...$$restProps}
17
+
18
+ on:click
17
19
  >
18
20
  {#if $$slots.start}
19
21
  <span class="start">
package/dist/components/TabNav/TabNavItem.svelte.d.ts CHANGED
@@ -6,6 +6,8 @@ declare const __propDef: {
6
6
  name: string;
7
7
  };
8
8
  events: {
9
+ click: MouseEvent;
10
+ } & {
9
11
  [evt: string]: CustomEvent<any>;
10
12
  };
11
13
  slots: {
package/dist/components/TextInput/TextInput.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  export let size = "medium";
3
3
  export let block = false;
4
4
  export let value = void 0;
5
- let input;
5
+ export let input = {};
6
6
  </script>
7
7
 
8
8
 
@@ -12,7 +12,7 @@ let input;
12
12
  on:click={() => input.focus()}
13
13
  on:keydown={(e) => {
14
14
  if (e.key === 'Enter') {
15
- input.blur();
15
+ input.focus();
16
16
  }
17
17
  }}
18
18
  role="textbox"
package/dist/components/TextInput/TextInput.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ declare const __propDef: {
6
6
  size?: "small" | "medium" | "large" | "x-small" | undefined;
7
7
  block?: boolean | undefined;
8
8
  value?: any;
9
+ input?: HTMLInputElement | undefined;
9
10
  };
10
11
  events: {
11
12
  keyup: KeyboardEvent;
package/dist/components/Textarea/Textarea.svelte CHANGED
@@ -3,16 +3,16 @@ export let block = false;
3
3
  export let rows = 5;
4
4
  export let cols = 40;
5
5
  export let state = "default";
6
- let input;
6
+ export let textarea = {};
7
7
  </script>
8
8
 
9
9
 
10
10
  <span class="input-wrap state-{state}"
11
11
  class:block
12
- on:click={() => input.focus()}
12
+ on:click={() => textarea.focus()}
13
13
  on:keydown={(e) => {
14
14
  if (e.key === 'Enter') {
15
- input.blur();
15
+ textarea.blur();
16
16
  }
17
17
  }}
18
18
  role="textbox"
@@ -29,7 +29,7 @@ let input;
29
29
 
30
30
  <textarea
31
31
  bind:value={value}
32
- bind:this={input}
32
+ bind:this={textarea}
33
33
 
34
34
 
35
35
  on:keyup
package/dist/components/Textarea/Textarea.svelte.d.ts CHANGED
@@ -7,6 +7,7 @@ declare const __propDef: {
7
7
  rows?: number | undefined;
8
8
  cols?: number | undefined;
9
9
  state?: "default" | "error" | "success" | "warning" | undefined;
10
+ textarea?: HTMLTextAreaElement | undefined;
10
11
  };
11
12
  events: {
12
13
  keyup: KeyboardEvent;
package/dist/variables.scss CHANGED
@@ -36,7 +36,7 @@
36
36
  --blue-light: #dae5ff;
37
37
 
38
38
  --orange-dark: #8b5b04;
39
- --orange: #f1c40f;
39
+ --orange: #e2b500;
40
40
  --orange-light: #efe3b4;
41
41
 
42
42
  --gray-light: #ddd;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyvor/design",
3
- "version": "0.0.32",
3
+ "version": "0.0.34",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "scripts": {