@iroco/ui 0.20.0 → 0.50.0

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 (95) hide show
  1. package/Alert.svelte +72 -0
  2. package/Alert.svelte.d.ts +18 -0
  3. package/{lib/iroco.css → Button.svelte} +69 -88
  4. package/Button.svelte.d.ts +43 -0
  5. package/DataTable.svelte +94 -0
  6. package/DataTable.svelte.d.ts +27 -0
  7. package/{src/IconBurger.svelte → IconBurger.svelte} +2 -3
  8. package/IconBurger.svelte.d.ts +17 -0
  9. package/{src/IconClose.svelte → IconClose.svelte} +2 -3
  10. package/IconClose.svelte.d.ts +17 -0
  11. package/{src/IconFloppyDisk.svelte → IconFloppyDisk.svelte} +3 -4
  12. package/IconFloppyDisk.svelte.d.ts +18 -0
  13. package/{src/IconInfo.svelte → IconInfo.svelte} +2 -3
  14. package/IconInfo.svelte.d.ts +17 -0
  15. package/{src/IconIrocoLogo.svelte → IconIrocoLogo.svelte} +2 -3
  16. package/IconIrocoLogo.svelte.d.ts +17 -0
  17. package/IconMastodon.svelte +19 -0
  18. package/IconMastodon.svelte.d.ts +18 -0
  19. package/{src/IconMoreSign.svelte → IconMoreSign.svelte} +2 -3
  20. package/IconMoreSign.svelte.d.ts +17 -0
  21. package/{src/IconTrashCan.svelte → IconTrashCan.svelte} +4 -11
  22. package/IconTrashCan.svelte.d.ts +18 -0
  23. package/IrocoLogo.svelte +49 -0
  24. package/IrocoLogo.svelte.d.ts +19 -0
  25. package/{src/Loader.svelte → Loader.svelte} +1 -2
  26. package/Loader.svelte.d.ts +14 -0
  27. package/NavBar.svelte +669 -0
  28. package/NavBar.svelte.d.ts +21 -0
  29. package/Navigation.svelte +325 -0
  30. package/Navigation.svelte.d.ts +19 -0
  31. package/NumberInput.svelte +117 -0
  32. package/NumberInput.svelte.d.ts +25 -0
  33. package/NumberInputSized.svelte +4 -0
  34. package/NumberInputSized.svelte.d.ts +14 -0
  35. package/README.md +21 -31
  36. package/RadioButton.svelte +93 -0
  37. package/RadioButton.svelte.d.ts +23 -0
  38. package/RadioButtonTest.svelte +10 -0
  39. package/RadioButtonTest.svelte.d.ts +19 -0
  40. package/SlottedComponentWrapper.svelte +7 -0
  41. package/SlottedComponentWrapper.svelte.d.ts +23 -0
  42. package/TextInput.svelte +148 -0
  43. package/TextInput.svelte.d.ts +30 -0
  44. package/{src/TopBar.svelte → TopBar.svelte} +0 -0
  45. package/TopBar.svelte.d.ts +23 -0
  46. package/definition.d.ts +28 -0
  47. package/definition.js +35 -0
  48. package/index.d.ts +18 -0
  49. package/index.js +18 -0
  50. package/package.json +71 -113
  51. package/scss/button.scss +57 -55
  52. package/scss/check.scss +45 -46
  53. package/scss/colors.scss +39 -17
  54. package/scss/constants.scss +1 -1
  55. package/scss/containers.scss +126 -130
  56. package/scss/fields/_checkbox.scss +37 -42
  57. package/scss/fields/_input.scss +160 -169
  58. package/scss/fonts.scss +7 -7
  59. package/scss/forms.scss +53 -55
  60. package/scss/iroco.scss +22 -22
  61. package/scss/layouts.scss +21 -7
  62. package/scss/loader.scss +18 -16
  63. package/scss/style.scss +5 -5
  64. package/lib/button.scss +0 -61
  65. package/lib/check.scss +0 -48
  66. package/lib/colors.scss +0 -23
  67. package/lib/constants.scss +0 -1
  68. package/lib/containers.scss +0 -226
  69. package/lib/fields/_checkbox.scss +0 -44
  70. package/lib/fields/_input.scss +0 -171
  71. package/lib/fields/_style.scss +0 -2
  72. package/lib/fonts.scss +0 -11
  73. package/lib/forms.scss +0 -67
  74. package/lib/index.js +0 -5807
  75. package/lib/index.min.js +0 -330
  76. package/lib/index.mjs +0 -5780
  77. package/lib/index.mjs.css +0 -906
  78. package/lib/iroco.css.map +0 -1
  79. package/lib/iroco.scss +0 -37
  80. package/lib/layouts.scss +0 -7
  81. package/lib/loader.scss +0 -20
  82. package/lib/style.scss +0 -5
  83. package/src/Alert.svelte +0 -34
  84. package/src/Button.svelte +0 -24
  85. package/src/DataTable.svelte +0 -72
  86. package/src/Icon.svelte +0 -29
  87. package/src/IconMastodon.svelte +0 -13
  88. package/src/IrocoLogo.svelte +0 -45
  89. package/src/NavBar.svelte +0 -154
  90. package/src/Navigation.svelte +0 -107
  91. package/src/NumberInput.svelte +0 -23
  92. package/src/RadioButton.svelte +0 -56
  93. package/src/TextInput.svelte +0 -119
  94. package/src/definition.ts +0 -30
  95. package/src/index.ts +0 -21
@@ -1,119 +0,0 @@
1
- <script lang="ts">
2
- export enum TextType {
3
- text = 'text',
4
- email = 'email',
5
- password = 'password'
6
- }
7
-
8
- export let id: string;
9
- export let type: TextType;
10
- export let label: string | null = null;
11
- export let placeholder: string | undefined;
12
- export let error: string | null = null;
13
- export let htmlError = false;
14
- export let value: string | null = null;
15
- export let onFocus: (e: FocusEvent) => void;
16
- export let onBlur: (e: Event) => void;
17
- export let readonly = false;
18
- export let border = false;
19
-
20
- function typeAction(node: HTMLInputElement) {
21
- node.type = type;
22
- }
23
- </script>
24
-
25
- <div class="iroco-ui-input">
26
- {#if label}
27
- <label class="iroco-ui-label" for={id}>{label}</label>
28
- {/if}
29
- <input
30
- on:input
31
- bind:value
32
- on:focus={onFocus}
33
- on:blur={onBlur}
34
- {id}
35
- type="text"
36
- {placeholder}
37
- class:border
38
- class:error={error !== null}
39
- class:readonlyInput={readonly == true}
40
- use:typeAction
41
- {readonly}
42
- />
43
- {#if error != null}
44
- <p data-testid="error" class="error">
45
- {#if htmlError}
46
- {@html error !== null ? error : ''}
47
- {:else}
48
- {error !== null ? error : ''}
49
- {/if}
50
- </p>
51
- {/if}
52
- </div>
53
-
54
- <style lang="scss">
55
- @use "../scss/colors";
56
- @use "../scss/constants";
57
-
58
- input,
59
- textarea {
60
- outline: none;
61
- text-decoration: none;
62
- font-size: 14px;
63
-
64
- &:focus {
65
- outline: none;
66
- text-decoration: none;
67
- font-size: 14px;
68
- }
69
- }
70
-
71
- .iroco-ui-input {
72
- display: flex;
73
- flex-direction: column;
74
-
75
- > input {
76
- color: colors.$beige;
77
- background: colors.$darkBlue;
78
- border: 1px solid colors.$darkBlue;
79
- padding: 1em 1.5em;
80
- text-overflow: ellipsis;
81
- white-space: nowrap;
82
- overflow: hidden;
83
- border-radius: constants.$border-radius;
84
-
85
- &.border {
86
- border: 1px solid colors.$beige;
87
- }
88
-
89
- &::placeholder {
90
- color: rgba(colors.$beige, 0.5);
91
- }
92
- &.error {
93
- border-color: colors.$red;
94
- }
95
- &.readonlyInput {
96
- cursor: not-allowed;
97
- }
98
- }
99
-
100
- .error {
101
- color: colors.$red;
102
- }
103
- }
104
-
105
- .iroco-ui-label {
106
- color: rgba(colors.$beige, 0.6);
107
- font-weight: bold;
108
- padding-bottom: 10px;
109
- display: inline-block;
110
- }
111
-
112
- .field {
113
- margin-top: 20px;
114
-
115
- &:first-child {
116
- margin: 0;
117
- }
118
- }
119
- </style>
package/src/definition.ts DELETED
@@ -1,30 +0,0 @@
1
- export class NavigationItem {
2
- hrefOrCallback: string|(() => void);
3
- name: string;
4
- button: boolean;
5
-
6
- constructor (name: string, hrefOrCallback: string|(() => void), button= false) {
7
- this.hrefOrCallback = hrefOrCallback;
8
- this.name = name;
9
- this.button = button
10
- }
11
- }
12
-
13
- export enum Color {
14
- blue= '#00B9FF',
15
- darkBlue= '#211D28',
16
- nightBlue= '#18151E',
17
- green= '#00D692',
18
- red= '#ff504d',
19
- yellow= '#FFE032',
20
- beige= '#f2ebe3',
21
- darkBeige= '#a9a29e',
22
- mediumGrey = '#464452',
23
- darkGrey= '#33323a',
24
- lightGrey= '#f5f5f5'
25
- }
26
-
27
- export enum ButtonKind {
28
- REGULAR = "regular",
29
- DANGER = "danger"
30
- }
package/src/index.ts DELETED
@@ -1,21 +0,0 @@
1
- import '../scss/style.scss';
2
- export { default as Button } from './Button.svelte';
3
- export { default as TextInput } from './TextInput.svelte'
4
- export { default as RadioButton } from './RadioButton.svelte';
5
- export { default as NumberInput } from './NumberInput.svelte'
6
- export { default as Icon } from './Icon.svelte'
7
- export { default as Loader } from './Loader.svelte'
8
- export { default as IconInfo } from './IconInfo.svelte'
9
- export { default as IconMastodon } from './IconMastodon.svelte'
10
- export { default as NavBar } from './NavBar.svelte'
11
- export { default as Navigation } from './Navigation.svelte'
12
- export { default as DataTable } from './DataTable.svelte'
13
- export { default as IconMore } from './IconMoreSign.svelte'
14
- export { default as IconFloppyDisk } from './IconFloppyDisk.svelte'
15
- export { default as IconTrashCan } from './IconTrashCan.svelte'
16
- export { default as Alert } from './Alert.svelte'
17
- export { default as IconIrocoLogo } from './IconIrocoLogo.svelte'
18
- export { default as IrocoLogo } from './IrocoLogo.svelte'
19
- export * from './definition'
20
-
21
-