@fastwork/xosmoz-svelte 0.0.29 → 0.0.31
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.
- package/dist/components/Button.svelte +29 -30
- package/package.json +1 -1
|
@@ -8,44 +8,44 @@
|
|
|
8
8
|
| 'danger'
|
|
9
9
|
| 'success'
|
|
10
10
|
| 'white'
|
|
11
|
-
| 'white-secondary'
|
|
11
|
+
| 'white-secondary'
|
|
12
12
|
|
|
13
|
-
export type ButtonSize = 'small' | 'medium' | 'large'
|
|
13
|
+
export type ButtonSize = 'small' | 'medium' | 'large'
|
|
14
14
|
|
|
15
15
|
export interface ButtonProps {
|
|
16
16
|
/** Button variant style */
|
|
17
|
-
variant?: ButtonVariant
|
|
17
|
+
variant?: ButtonVariant
|
|
18
18
|
/** Button size */
|
|
19
|
-
size?: ButtonSize
|
|
19
|
+
size?: ButtonSize
|
|
20
20
|
/** Whether the button is disabled */
|
|
21
|
-
disabled?: boolean
|
|
21
|
+
disabled?: boolean
|
|
22
22
|
/** Whether the button is in loading state */
|
|
23
|
-
loading?: boolean
|
|
23
|
+
loading?: boolean
|
|
24
24
|
/** Whether the button should take full width */
|
|
25
|
-
fluid?: boolean
|
|
25
|
+
fluid?: boolean
|
|
26
26
|
/** Whether the button has pill-shaped border radius */
|
|
27
|
-
pill?: boolean
|
|
27
|
+
pill?: boolean
|
|
28
28
|
/** Whether the button should be square (1:1 aspect ratio) */
|
|
29
|
-
square?: boolean
|
|
29
|
+
square?: boolean
|
|
30
30
|
/** Button type attribute */
|
|
31
|
-
type?: 'button' | 'submit' | 'reset'
|
|
31
|
+
type?: 'button' | 'submit' | 'reset'
|
|
32
32
|
/** Additional CSS classes */
|
|
33
|
-
class?: string
|
|
33
|
+
class?: string
|
|
34
34
|
/** Click handler */
|
|
35
|
-
onclick?: (event: MouseEvent) => void
|
|
35
|
+
onclick?: (event: MouseEvent) => void
|
|
36
36
|
}
|
|
37
37
|
</script>
|
|
38
38
|
|
|
39
39
|
<script lang="ts">
|
|
40
|
-
import type { Snippet } from 'svelte'
|
|
40
|
+
import type { Snippet } from 'svelte'
|
|
41
41
|
|
|
42
42
|
interface Props extends ButtonProps {
|
|
43
43
|
/** Content before the main text */
|
|
44
|
-
startIcon?: Snippet
|
|
44
|
+
startIcon?: Snippet
|
|
45
45
|
/** Main button content */
|
|
46
|
-
children: Snippet
|
|
46
|
+
children: Snippet
|
|
47
47
|
/** Content after the main text */
|
|
48
|
-
endIcon?: Snippet
|
|
48
|
+
endIcon?: Snippet
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
let {
|
|
@@ -61,36 +61,36 @@
|
|
|
61
61
|
onclick,
|
|
62
62
|
startIcon,
|
|
63
63
|
children,
|
|
64
|
-
endIcon
|
|
65
|
-
}: Props = $props()
|
|
64
|
+
endIcon,
|
|
65
|
+
}: Props = $props()
|
|
66
66
|
|
|
67
67
|
const buttonClasses = $derived.by(() => {
|
|
68
|
-
const classes = ['xz-button']
|
|
68
|
+
const classes = ['xz-button']
|
|
69
69
|
|
|
70
70
|
// Variant (only add class if not primary, which is the default)
|
|
71
71
|
if (variant !== 'primary') {
|
|
72
|
-
classes.push(`is-variant-${variant}`)
|
|
72
|
+
classes.push(`is-variant-${variant}`)
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
// Size (only add class if not medium, which is the default)
|
|
76
76
|
if (size !== 'medium') {
|
|
77
|
-
classes.push(`is-size-${size}`)
|
|
77
|
+
classes.push(`is-size-${size}`)
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
// States
|
|
81
|
-
if (loading) classes.push('is-loading')
|
|
82
|
-
if (disabled) classes.push('is-disabled')
|
|
81
|
+
if (loading) classes.push('is-loading')
|
|
82
|
+
if (disabled) classes.push('is-disabled')
|
|
83
83
|
|
|
84
84
|
// Modifiers
|
|
85
|
-
if (fluid) classes.push('is-fluid')
|
|
86
|
-
if (pill) classes.push('is-pill')
|
|
87
|
-
if (square) classes.push('is-square')
|
|
85
|
+
if (fluid) classes.push('is-fluid')
|
|
86
|
+
if (pill) classes.push('is-pill')
|
|
87
|
+
if (square) classes.push('is-square')
|
|
88
88
|
|
|
89
89
|
// Custom classes
|
|
90
|
-
if (className) classes.push(className)
|
|
90
|
+
if (className) classes.push(className)
|
|
91
91
|
|
|
92
|
-
return classes.join(' ')
|
|
93
|
-
})
|
|
92
|
+
return classes.join(' ')
|
|
93
|
+
})
|
|
94
94
|
</script>
|
|
95
95
|
|
|
96
96
|
<button
|
|
@@ -115,4 +115,3 @@
|
|
|
115
115
|
</span>
|
|
116
116
|
{/if}
|
|
117
117
|
</button>
|
|
118
|
-
|