@tuspe/components 1.9.9 → 1.9.10

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 (8) hide show
  1. package/dist/Button.svelte +5 -70
  2. package/dist/Checkbox.svelte +3 -14
  3. package/dist/Image.svelte +4 -27
  4. package/dist/Input.svelte +11 -75
  5. package/dist/Modal.svelte +4 -14
  6. package/dist/Select.svelte +14 -9
  7. package/dist/types.d.ts +3 -3
  8. package/package.json +1 -1
package/dist/Button.svelte CHANGED
@@ -2,62 +2,9 @@
2
2
  import {cx, loading} from './'
3
3
  import type {ButtonView} from './types'
4
4
 
5
- let {
6
- ariaControls,
7
- ariaExpanded,
8
- ariaLabel,
9
- ariaPopup,
10
- borderColor = 'content',
11
- borderSize = 0,
12
- children,
13
- color = 'white',
14
- colorBg = 'primary',
15
- control,
16
- disabled = $bindable(),
17
- extraClass,
18
- fill,
19
- fontWeight = 'bold',
20
- fullWidth,
21
- hover = 'secondary',
22
- hoverText = 'white',
23
- href,
24
- id,
25
- noCenter = false,
26
- noHeight,
27
- noPadding,
28
- noSpinner,
29
- onclick = undefined,
30
- preload,
31
- rel = 'noopener noreferrer',
32
- role,
33
- rounded = 'sm',
34
- spinnerColor = 'white',
35
- target,
36
- title,
37
- type,
38
- uppercase = true,
39
- value
40
- }: ButtonView = $props()
5
+ let {ariaControls, ariaExpanded, ariaLabel, ariaPopup, borderColor = 'content', borderSize = 0, children, color = 'white', colorBg = 'primary', control, disabled = $bindable(), extraClass, fill, fontWeight = 'bold', fullWidth, hover = 'secondary', hoverText = 'white', href, id, noCenter = false, noHeight, noPadding, noSpinner, onclick = undefined, preload, rel = 'noopener noreferrer', role, rounded = 'sm', spinnerColor = 'white', target, title, type, uppercase = true, value}: ButtonView = $props()
41
6
 
42
- let classes = $derived(
43
- cx(
44
- 'btn',
45
- `text-${color}`,
46
- control ? 'control' : `bg-${colorBg}`,
47
- borderSize ? `border-solid border-${borderSize} border-${borderColor}` : false,
48
- extraClass,
49
- fill && 'fill',
50
- fontWeight && `font-${fontWeight}`,
51
- fullWidth && 'w-full',
52
- hover && `hover-${hover}`,
53
- hoverText && `hover-text-${hoverText}`,
54
- !noCenter && 'center',
55
- noHeight && 'no-height',
56
- noPadding && 'no-padding',
57
- rounded && `radius-${rounded}`,
58
- uppercase && 'uppercase'
59
- )
60
- )
7
+ let classes = $derived(cx('btn', `text-${color}`, control ? 'control' : `bg-${colorBg}`, borderSize ? `border-solid border-${borderSize} border-${borderColor}` : false, extraClass, fill && 'fill', fontWeight && `font-${fontWeight}`, fullWidth && 'w-full', hover && `hover-${hover}`, hoverText && `hover-text-${hoverText}`, !noCenter && 'center', noHeight && 'no-height', noPadding && 'no-padding', rounded && `radius-${rounded}`, uppercase && 'uppercase'))
61
8
  </script>
62
9
 
63
10
  {#if href}
@@ -65,19 +12,7 @@
65
12
  {@render children?.()}
66
13
  </a>
67
14
  {:else if control}
68
- <button
69
- {id}
70
- {onclick}
71
- {role}
72
- {title}
73
- {value}
74
- aria-controls={ariaControls}
75
- aria-expanded={ariaExpanded}
76
- aria-haspopup={ariaPopup}
77
- aria-label={ariaLabel}
78
- class={classes}
79
- {disabled}
80
- >
15
+ <button {id} {onclick} {role} {title} {value} aria-controls={ariaControls} aria-expanded={ariaExpanded} aria-haspopup={ariaPopup} aria-label={ariaLabel} class={classes} {disabled}>
81
16
  {@render children?.()}
82
17
  </button>
83
18
  {:else}
@@ -129,11 +64,11 @@
129
64
  }
130
65
  .bg-success:not(:hover),
131
66
  .hover-success:hover {
132
- background-color: green;
67
+ background-color: var(--color-success, green);
133
68
  }
134
69
  .bg-danger:not(:hover),
135
70
  .hover-danger:hover {
136
- background-color: darkred;
71
+ background-color: var(--color-danger, darkred);
137
72
  }
138
73
  .bg-black:not(:hover),
139
74
  .hover-black:hover {
package/dist/Checkbox.svelte CHANGED
@@ -1,18 +1,7 @@
1
1
  <script lang="ts">
2
2
  import {cx, isDisabled, loading} from './'
3
3
  import type {CheckboxView} from './types'
4
- let {
5
- children,
6
- onchange,
7
- checked = $bindable(false),
8
- disabled = $bindable(false),
9
- group = $bindable(),
10
- id,
11
- outerClass,
12
- required,
13
- value,
14
- ...props
15
- }: CheckboxView = $props()
4
+ let {children, onchange, checked = $bindable(false), disabled = $bindable(false), group = $bindable(), id, outerClass, required, value, ...props}: CheckboxView = $props()
16
5
  let classes = $derived(cx('input-checkbox', outerClass))
17
6
  </script>
18
7
 
@@ -27,7 +16,7 @@
27
16
  <style scoped>
28
17
  input {
29
18
  accent-color: var(--color-primary);
30
- border: 1px solid var(--color-border);
19
+ border: 1px solid var(--color-border, #999);
31
20
  height: 20px;
32
21
  margin-top: 3px;
33
22
  outline: none;
@@ -53,6 +42,6 @@
53
42
  }
54
43
 
55
44
  sup {
56
- color: darkred;
45
+ color: var(--color-danger, darkred);
57
46
  }
58
47
  </style>
package/dist/Image.svelte CHANGED
@@ -1,36 +1,13 @@
1
1
  <script lang="ts">
2
2
  import {cx} from './'
3
3
  import type {ImageView} from './types'
4
- let {
5
- ariaHidden,
6
- aspect,
7
- ball = false,
8
- border,
9
- center = false,
10
- display = 'inline-block',
11
- extraClasses,
12
- fullWidth,
13
- image,
14
- loading = 'lazy',
15
- objectFit
16
- }: ImageView = $props()
4
+ let {ariaHidden, aspect, ball = false, border, center = false, display = 'inline-block', extraClasses, fullWidth, image, loading = 'lazy', objectFit}: ImageView = $props()
17
5
 
18
- let classes = $derived(
19
- cx(display, aspect && `aspect-${aspect}`, objectFit, ball && 'radius-full', border && 'border-full', center && 'mx-auto', fullWidth && 'full', extraClasses)
20
- )
6
+ let classes = $derived(cx(display, aspect && `aspect-${aspect}`, objectFit, ball && 'radius-full', border && 'border-full', center && 'mx-auto', fullWidth && 'full', extraClasses))
21
7
  </script>
22
8
 
23
9
  {#if image?.src}
24
- <img
25
- {loading}
26
- alt={image.alt}
27
- aria-hidden={ariaHidden}
28
- class={classes}
29
- decoding="async"
30
- height={image.height}
31
- src={image.src}
32
- width={image.width}
33
- />
10
+ <img {loading} alt={image.alt} aria-hidden={ariaHidden} class={classes} decoding="async" height={image.height} src={image.src} width={image.width} />
34
11
  {/if}
35
12
 
36
13
  <style scoped>
@@ -54,7 +31,7 @@
54
31
  display: block;
55
32
  }
56
33
  .border-full {
57
- border: 1px solid var(--color-content);
34
+ border: 1px solid var(--color-content, #222);
58
35
  }
59
36
  .contain {
60
37
  object-fit: contain;
package/dist/Input.svelte CHANGED
@@ -2,24 +2,7 @@
2
2
  import {cx, isDisabled, loading} from './'
3
3
  import type {InputView} from './types'
4
4
 
5
- let {
6
- bgColor = 'transparent',
7
- borderColor = 'default',
8
- disabled,
9
- id,
10
- inputClass,
11
- label,
12
- max,
13
- min,
14
- onchange,
15
- outerClass,
16
- placeholder,
17
- required = false,
18
- step,
19
- type = 'text',
20
- value = $bindable(),
21
- ...props
22
- }: InputView = $props()
5
+ let {bgColor = 'transparent', borderColor = 'default', disabled, id, inputClass, label, max, min, onchange, outerClass, placeholder, required = false, step, type = 'text', value = $bindable(), ...props}: InputView = $props()
23
6
 
24
7
  let classesIn = $derived(cx(inputClass, bgColor !== 'none' && `bg-${bgColor}`, borderColor !== 'none' && `border-color-${borderColor}`)),
25
8
  classesOut = $derived(cx(`input-${type}`, outerClass)),
@@ -30,61 +13,14 @@
30
13
  {label}{#if required}<sup>*</sup>{/if}
31
14
 
32
15
  {#if type === 'textarea'}
33
- <textarea
34
- bind:value
35
- class={classesIn}
36
- disabled={inputDisabled}
37
- {id}
38
- maxlength={max ? Number(max) : undefined}
39
- {required}
40
- {placeholder}
41
- rows={4}
42
- {...props}
43
- ></textarea>
16
+ <textarea bind:value class={classesIn} disabled={inputDisabled} {id} maxlength={max ? Number(max) : undefined} {required} {placeholder} rows={4} {...props}></textarea>
44
17
  {:else if ['date', 'number'].includes(type)}
45
- <input
46
- bind:value
47
- class={classesIn}
48
- disabled={inputDisabled}
49
- lang="fi-FI"
50
- {max}
51
- {min}
52
- {onchange}
53
- {required}
54
- {step}
55
- {type}
56
- {placeholder}
57
- {...props}
58
- />
18
+ <input bind:value class={classesIn} disabled={inputDisabled} lang="fi-FI" {max} {min} {onchange} {required} {step} {type} {placeholder} {...props} />
59
19
  {:else}
60
- <input
61
- bind:value
62
- {id}
63
- {placeholder}
64
- {required}
65
- {type}
66
- class={classesIn}
67
- disabled={inputDisabled}
68
- maxlength={max ? Number(max) : undefined}
69
- minlength={min ? Number(min) : undefined}
70
- onkeyup={onchange}
71
- {...props}
72
- />
20
+ <input bind:value {id} {placeholder} {required} {type} class={classesIn} disabled={inputDisabled} maxlength={max ? Number(max) : undefined} minlength={min ? Number(min) : undefined} onkeyup={onchange} {...props} />
73
21
  {#if type === 'search'}
74
- <svg
75
- clip-rule="evenodd"
76
- fill-rule="evenodd"
77
- stroke-linejoin="round"
78
- stroke-miterlimit="2"
79
- viewBox="0 0 24 24"
80
- xmlns="http://www.w3.org/2000/svg"
81
- height="20"
82
- width="20"
83
- >
84
- <path
85
- d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z"
86
- fill-rule="nonzero"
87
- />
22
+ <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" height="20" width="20">
23
+ <path d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z" fill-rule="nonzero" />
88
24
  </svg>
89
25
  {/if}
90
26
  {/if}
@@ -100,7 +36,7 @@
100
36
  border-radius: 0.375rem;
101
37
  border-style: solid;
102
38
  border-width: 1px;
103
- color: var(--color-content);
39
+ color: var(--color-content, #222);
104
40
  display: block;
105
41
  font-size: 1rem;
106
42
  margin-top: 0.25rem;
@@ -127,7 +63,7 @@
127
63
  }
128
64
 
129
65
  label.filter {
130
- font-size: var(--text-sm);
66
+ font-size: var(--text-sm, 0.95rem);
131
67
  }
132
68
 
133
69
  label svg {
@@ -137,7 +73,7 @@
137
73
  }
138
74
 
139
75
  sup {
140
- color: darkred;
76
+ color: var(--color-danger, darkred);
141
77
  }
142
78
 
143
79
  textarea {
@@ -155,7 +91,7 @@
155
91
  }
156
92
 
157
93
  .border-color-default {
158
- border-color: var(--color-border);
94
+ border-color: var(--color-border, #999);
159
95
  }
160
96
 
161
97
  .border-color-primary {
@@ -163,6 +99,6 @@
163
99
  }
164
100
 
165
101
  .border-color-content {
166
- border-color: var(--color-content);
102
+ border-color: var(--color-content, #222);
167
103
  }
168
104
  </style>
package/dist/Modal.svelte CHANGED
@@ -1,17 +1,7 @@
1
1
  <script lang="ts">
2
2
  import ButtonClose from './ButtonClose.svelte'
3
3
  import type {ModalView} from './types'
4
- let {
5
- children,
6
- buttonAriaLabel,
7
- colorButton = 'white',
8
- headerClass = 'bg-primary text-white',
9
- innerClass,
10
- open = $bindable(),
11
- outerClass = 'bg-white text-content',
12
- title,
13
- titleClass = 'text-white'
14
- }: ModalView = $props()
4
+ let {children, buttonAriaLabel, colorButton = 'white', headerClass = 'bg-primary text-white', innerClass, open = $bindable(), outerClass = 'bg-white text-content', title, titleClass = 'text-white'}: ModalView = $props()
15
5
  const handleClose = () => {
16
6
  open = false
17
7
  }
@@ -53,7 +43,7 @@
53
43
  #modal-content {
54
44
  border-radius: 1rem;
55
45
  border: 2px solid var(--color-primary);
56
- color: var(--color-content);
46
+ color: var(--color-content, #222);
57
47
  margin-left: auto;
58
48
  margin-right: auto;
59
49
  max-width: 95vw;
@@ -69,7 +59,7 @@
69
59
  padding: 1rem;
70
60
  }
71
61
  header {
72
- border-bottom: 1px solid var(--color-border);
62
+ border-bottom: 1px solid var(--color-border, #999);
73
63
  padding: 1rem;
74
64
  }
75
65
  h2 {
@@ -85,7 +75,7 @@
85
75
  background-color: #fff;
86
76
  }
87
77
  .text-content {
88
- color: var(--color-content);
78
+ color: var(--color-content, #222);
89
79
  }
90
80
  .text-white {
91
81
  color: #fff;
package/dist/Select.svelte CHANGED
@@ -1,8 +1,8 @@
1
1
  <script lang="ts">
2
2
  import {cx, isDisabled, loading} from './'
3
3
  import type {SelectView} from './types'
4
- let {colorBg = 'bg-transparent', disabled, id, innerClass, label, onchange, outerClass, placeholder, required = false, value = $bindable(), values}: SelectView = $props()
5
- let classes = $derived(cx(colorBg, innerClass))
4
+ let {disabled, id, innerClass, label, onchange, outerClass, placeholder, required = false, value = $bindable(), values}: SelectView = $props()
5
+ let classes = $derived(cx(innerClass))
6
6
  </script>
7
7
 
8
8
  <label class={outerClass}>
@@ -17,11 +17,17 @@
17
17
 
18
18
  <style scoped>
19
19
  select {
20
- background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 98% 50%;
21
- background-color: initial;
20
+ appearance: none;
21
+ background-attachment: scroll;
22
+ background-color: var(--color-input-bg, #fff);
23
+ background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+');
24
+ background-position-x: 98%;
25
+ background-position-y: 50%;
26
+ background-repeat: no-repeat;
27
+ background-size: auto;
22
28
  border-radius: 0.375rem;
23
- border: 1px solid var(--color-border);
24
- color: var(--color-content);
29
+ border: 1px solid var(--color-border, #999);
30
+ color: var(--color-content, #222);
25
31
  font-size: 1rem;
26
32
  height: 48px;
27
33
  margin-top: 0.25rem;
@@ -29,7 +35,6 @@
29
35
  width: 100%;
30
36
  -moz-appearance: none;
31
37
  -webkit-appearance: none;
32
- appearance: none;
33
38
  }
34
39
 
35
40
  select:disabled {
@@ -44,10 +49,10 @@
44
49
 
45
50
  label.filter {
46
51
  position: relative;
47
- font-size: var(--text-sm);
52
+ font-size: var(--text-sm, 0.95rem);
48
53
  }
49
54
 
50
55
  sup {
51
- color: darkred;
56
+ color: var(--color-danger, darkred);
52
57
  }
53
58
  </style>
package/dist/types.d.ts CHANGED
@@ -16,9 +16,9 @@ export interface ButtonArrowView {
16
16
  }
17
17
  export interface ButtonCloseView {
18
18
  onclick?: any;
19
- ariaLabel?: string;
19
+ ariaLabel?: string | undefined;
20
20
  color?: string;
21
- hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
21
+ hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent' | undefined;
22
22
  id?: string;
23
23
  }
24
24
  export interface ButtonMenuView {
@@ -50,7 +50,7 @@ export interface ButtonView {
50
50
  hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
51
51
  hoverText?: 'black' | 'primary' | 'secondary' | 'white';
52
52
  href?: string | undefined;
53
- id?: string;
53
+ id?: string | undefined;
54
54
  noCenter?: boolean;
55
55
  noHeight?: boolean;
56
56
  noPadding?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tuspe/components",
3
- "version": "1.9.9",
3
+ "version": "1.9.10",
4
4
  "description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
5
5
  "keywords": [
6
6
  "svelteKit",