@soave/ui 0.3.0 → 0.3.2
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.vue +7 -2
- package/dist/components/Card.vue +3 -2
- package/dist/components/Checkbox.vue +5 -2
- package/dist/components/Dialog.vue +12 -6
- package/dist/components/Input.vue +11 -5
- package/dist/components/RadioGroup.vue +13 -3
- package/dist/components/RadioItem.vue +15 -5
- package/dist/components/Select.vue +22 -3
- package/dist/components/SelectContent.vue +18 -4
- package/dist/components/SelectItem.vue +22 -5
- package/dist/components/SelectTrigger.vue +18 -4
- package/dist/components/Switch.vue +4 -2
- package/dist/components/Textarea.vue +11 -5
- package/package.json +1 -1
|
@@ -12,9 +12,14 @@
|
|
|
12
12
|
<script setup lang="ts">
|
|
13
13
|
import { toRef } from "vue"
|
|
14
14
|
import { useButton } from "../../composables/useButton"
|
|
15
|
-
import type { ButtonProps } from "../../types/button"
|
|
16
15
|
|
|
17
|
-
const props = withDefaults(defineProps<
|
|
16
|
+
const props = withDefaults(defineProps<{
|
|
17
|
+
variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive"
|
|
18
|
+
size?: "sm" | "md" | "lg"
|
|
19
|
+
disabled?: boolean
|
|
20
|
+
loading?: boolean
|
|
21
|
+
type?: "button" | "submit" | "reset"
|
|
22
|
+
}>(), {
|
|
18
23
|
variant: "primary",
|
|
19
24
|
size: "md",
|
|
20
25
|
disabled: false,
|
package/dist/components/Card.vue
CHANGED
|
@@ -7,9 +7,10 @@
|
|
|
7
7
|
<script setup lang="ts">
|
|
8
8
|
import { toRef } from "vue"
|
|
9
9
|
import { useCard } from "../../composables/useCard"
|
|
10
|
-
import type { CardProps } from "../../types/card"
|
|
11
10
|
|
|
12
|
-
const props = withDefaults(defineProps<
|
|
11
|
+
const props = withDefaults(defineProps<{
|
|
12
|
+
padding?: "none" | "sm" | "md" | "lg"
|
|
13
|
+
}>(), {
|
|
13
14
|
padding: "md"
|
|
14
15
|
})
|
|
15
16
|
|
|
@@ -14,9 +14,12 @@
|
|
|
14
14
|
<script setup lang="ts">
|
|
15
15
|
import { toRef, computed } from "vue"
|
|
16
16
|
import { useCheckbox } from "../../composables/useCheckbox"
|
|
17
|
-
import type { CheckboxProps } from "../../types/checkbox"
|
|
18
17
|
|
|
19
|
-
const props = withDefaults(defineProps<
|
|
18
|
+
const props = withDefaults(defineProps<{
|
|
19
|
+
size?: "sm" | "md" | "lg"
|
|
20
|
+
disabled?: boolean
|
|
21
|
+
indeterminate?: boolean
|
|
22
|
+
}>(), {
|
|
20
23
|
size: "md",
|
|
21
24
|
disabled: false,
|
|
22
25
|
indeterminate: false
|
|
@@ -26,18 +26,24 @@
|
|
|
26
26
|
|
|
27
27
|
<script setup lang="ts">
|
|
28
28
|
import { ref, watch, onMounted, onUnmounted, provide } from "vue"
|
|
29
|
+
import type { Ref, InjectionKey } from "vue"
|
|
29
30
|
import { useDialog } from "../../composables/useDialog"
|
|
30
|
-
import { DIALOG_KEY } from "../../types/dialog"
|
|
31
|
-
import type { DialogContext } from "../../types/dialog"
|
|
32
31
|
|
|
33
|
-
interface
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
interface DialogContext {
|
|
33
|
+
is_open: Ref<boolean>
|
|
34
|
+
close: () => void
|
|
36
35
|
titleId?: string
|
|
37
36
|
descriptionId?: string
|
|
38
37
|
}
|
|
39
38
|
|
|
40
|
-
const
|
|
39
|
+
const DIALOG_KEY: InjectionKey<DialogContext> = Symbol("dialog")
|
|
40
|
+
|
|
41
|
+
const props = withDefaults(defineProps<{
|
|
42
|
+
closeOnOverlay?: boolean
|
|
43
|
+
closeOnEscape?: boolean
|
|
44
|
+
titleId?: string
|
|
45
|
+
descriptionId?: string
|
|
46
|
+
}>(), {
|
|
41
47
|
closeOnOverlay: true,
|
|
42
48
|
closeOnEscape: true
|
|
43
49
|
})
|
|
@@ -16,13 +16,19 @@
|
|
|
16
16
|
<script setup lang="ts">
|
|
17
17
|
import { toRef } from "vue"
|
|
18
18
|
import { useInput } from "../../composables/useInput"
|
|
19
|
-
import type {
|
|
19
|
+
import type { InputType, InputSize } from "../../types/input"
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
const props = withDefaults(defineProps<{
|
|
22
|
+
type?: InputType
|
|
23
|
+
size?: InputSize
|
|
24
|
+
placeholder?: string
|
|
25
|
+
disabled?: boolean
|
|
26
|
+
readonly?: boolean
|
|
27
|
+
error?: string
|
|
28
|
+
error_id?: string
|
|
29
|
+
id?: string
|
|
22
30
|
modelValue?: string
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
const props = withDefaults(defineProps<HeadlessInputProps>(), {
|
|
31
|
+
}>(), {
|
|
26
32
|
type: "text",
|
|
27
33
|
size: "md",
|
|
28
34
|
disabled: false,
|
|
@@ -9,10 +9,20 @@
|
|
|
9
9
|
|
|
10
10
|
<script setup lang="ts">
|
|
11
11
|
import { provide, computed } from "vue"
|
|
12
|
-
import type {
|
|
13
|
-
import { RADIO_GROUP_KEY } from "../../types/radio"
|
|
12
|
+
import type { Ref, ComputedRef, InjectionKey } from "vue"
|
|
14
13
|
|
|
15
|
-
|
|
14
|
+
interface RadioGroupContext {
|
|
15
|
+
model_value: Ref<string>
|
|
16
|
+
disabled: ComputedRef<boolean>
|
|
17
|
+
updateValue: (value: string) => void
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const RADIO_GROUP_KEY: InjectionKey<RadioGroupContext> = Symbol("radio-group")
|
|
21
|
+
|
|
22
|
+
const props = withDefaults(defineProps<{
|
|
23
|
+
disabled?: boolean
|
|
24
|
+
orientation?: "horizontal" | "vertical"
|
|
25
|
+
}>(), {
|
|
16
26
|
disabled: false,
|
|
17
27
|
orientation: "vertical"
|
|
18
28
|
})
|
|
@@ -13,12 +13,22 @@
|
|
|
13
13
|
|
|
14
14
|
<script setup lang="ts">
|
|
15
15
|
import { inject, toRef } from "vue"
|
|
16
|
+
import type { Ref, ComputedRef, InjectionKey } from "vue"
|
|
16
17
|
import { useRadioItem } from "../../composables/useRadio"
|
|
17
|
-
import type { RadioItemProps, RadioGroupContext } from "../../types/radio"
|
|
18
|
-
import { RADIO_GROUP_KEY } from "../../types/radio"
|
|
19
|
-
import { COMPONENT_ERRORS } from "../../constants/errors"
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
interface RadioGroupContext {
|
|
20
|
+
model_value: Ref<string>
|
|
21
|
+
disabled: ComputedRef<boolean>
|
|
22
|
+
updateValue: (value: string) => void
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const RADIO_GROUP_KEY: InjectionKey<RadioGroupContext> = Symbol("radio-group")
|
|
26
|
+
|
|
27
|
+
const props = withDefaults(defineProps<{
|
|
28
|
+
value: string
|
|
29
|
+
size?: "sm" | "md" | "lg"
|
|
30
|
+
disabled?: boolean
|
|
31
|
+
}>(), {
|
|
22
32
|
size: "md",
|
|
23
33
|
disabled: false
|
|
24
34
|
})
|
|
@@ -26,7 +36,7 @@ const props = withDefaults(defineProps<RadioItemProps>(), {
|
|
|
26
36
|
const context = inject<RadioGroupContext | null>(RADIO_GROUP_KEY, null)
|
|
27
37
|
|
|
28
38
|
if (!context) {
|
|
29
|
-
throw new Error(
|
|
39
|
+
throw new Error("RadioItem must be used within RadioGroup")
|
|
30
40
|
}
|
|
31
41
|
|
|
32
42
|
const composable = useRadioItem(toRef(() => props))
|
|
@@ -12,10 +12,29 @@
|
|
|
12
12
|
|
|
13
13
|
<script setup lang="ts">
|
|
14
14
|
import { ref, provide, watch, onMounted, onUnmounted, computed } from "vue"
|
|
15
|
-
import type {
|
|
16
|
-
import { SELECT_KEY } from "../../types/select"
|
|
15
|
+
import type { Ref, ComputedRef, InjectionKey } from "vue"
|
|
17
16
|
|
|
18
|
-
|
|
17
|
+
interface SelectContext {
|
|
18
|
+
model_value: Ref<string>
|
|
19
|
+
is_open: Ref<boolean>
|
|
20
|
+
disabled: ComputedRef<boolean>
|
|
21
|
+
size: ComputedRef<"sm" | "md" | "lg">
|
|
22
|
+
placeholder: ComputedRef<string>
|
|
23
|
+
trigger_ref: Ref<HTMLElement | null>
|
|
24
|
+
updateValue: (value: string) => void
|
|
25
|
+
open: () => void
|
|
26
|
+
close: () => void
|
|
27
|
+
toggle: () => void
|
|
28
|
+
setTriggerRef: (element: HTMLElement | null) => void
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const SELECT_KEY: InjectionKey<SelectContext> = Symbol("select")
|
|
32
|
+
|
|
33
|
+
const props = withDefaults(defineProps<{
|
|
34
|
+
size?: "sm" | "md" | "lg"
|
|
35
|
+
disabled?: boolean
|
|
36
|
+
placeholder?: string
|
|
37
|
+
}>(), {
|
|
19
38
|
size: "md",
|
|
20
39
|
disabled: false,
|
|
21
40
|
placeholder: ""
|
|
@@ -11,15 +11,29 @@
|
|
|
11
11
|
|
|
12
12
|
<script setup lang="ts">
|
|
13
13
|
import { inject } from "vue"
|
|
14
|
+
import type { Ref, ComputedRef, InjectionKey } from "vue"
|
|
14
15
|
import { useSelectContent } from "../../composables/useSelect"
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
|
|
17
|
+
interface SelectContext {
|
|
18
|
+
model_value: Ref<string>
|
|
19
|
+
is_open: Ref<boolean>
|
|
20
|
+
disabled: ComputedRef<boolean>
|
|
21
|
+
size: ComputedRef<"sm" | "md" | "lg">
|
|
22
|
+
placeholder: ComputedRef<string>
|
|
23
|
+
trigger_ref: Ref<HTMLElement | null>
|
|
24
|
+
updateValue: (value: string) => void
|
|
25
|
+
open: () => void
|
|
26
|
+
close: () => void
|
|
27
|
+
toggle: () => void
|
|
28
|
+
setTriggerRef: (element: HTMLElement | null) => void
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const SELECT_KEY: InjectionKey<SelectContext> = Symbol("select")
|
|
18
32
|
|
|
19
33
|
const context = inject<SelectContext | null>(SELECT_KEY, null)
|
|
20
34
|
|
|
21
35
|
if (!context) {
|
|
22
|
-
throw new Error(
|
|
36
|
+
throw new Error("SelectContent must be used within Select")
|
|
23
37
|
}
|
|
24
38
|
|
|
25
39
|
const composable = useSelectContent()
|
|
@@ -15,19 +15,36 @@
|
|
|
15
15
|
|
|
16
16
|
<script setup lang="ts">
|
|
17
17
|
import { inject, toRef } from "vue"
|
|
18
|
+
import type { Ref, ComputedRef, InjectionKey } from "vue"
|
|
18
19
|
import { useSelectItem } from "../../composables/useSelect"
|
|
19
|
-
import type { SelectContext, SelectItemProps } from "../../types/select"
|
|
20
|
-
import { SELECT_KEY } from "../../types/select"
|
|
21
|
-
import { COMPONENT_ERRORS } from "../../constants/errors"
|
|
22
20
|
|
|
23
|
-
|
|
21
|
+
interface SelectContext {
|
|
22
|
+
model_value: Ref<string>
|
|
23
|
+
is_open: Ref<boolean>
|
|
24
|
+
disabled: ComputedRef<boolean>
|
|
25
|
+
size: ComputedRef<"sm" | "md" | "lg">
|
|
26
|
+
placeholder: ComputedRef<string>
|
|
27
|
+
trigger_ref: Ref<HTMLElement | null>
|
|
28
|
+
updateValue: (value: string) => void
|
|
29
|
+
open: () => void
|
|
30
|
+
close: () => void
|
|
31
|
+
toggle: () => void
|
|
32
|
+
setTriggerRef: (element: HTMLElement | null) => void
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const SELECT_KEY: InjectionKey<SelectContext> = Symbol("select")
|
|
36
|
+
|
|
37
|
+
const props = withDefaults(defineProps<{
|
|
38
|
+
value: string
|
|
39
|
+
disabled?: boolean
|
|
40
|
+
}>(), {
|
|
24
41
|
disabled: false
|
|
25
42
|
})
|
|
26
43
|
|
|
27
44
|
const context = inject<SelectContext | null>(SELECT_KEY, null)
|
|
28
45
|
|
|
29
46
|
if (!context) {
|
|
30
|
-
throw new Error(
|
|
47
|
+
throw new Error("SelectItem must be used within Select")
|
|
31
48
|
}
|
|
32
49
|
|
|
33
50
|
const composable = useSelectItem(toRef(() => ({ value: props.value, disabled: props.disabled })))
|
|
@@ -14,16 +14,30 @@
|
|
|
14
14
|
|
|
15
15
|
<script setup lang="ts">
|
|
16
16
|
import { ref, inject, onMounted } from "vue"
|
|
17
|
+
import type { Ref, ComputedRef, InjectionKey } from "vue"
|
|
17
18
|
import { useSelectTrigger } from "../../composables/useSelect"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
|
|
20
|
+
interface SelectContext {
|
|
21
|
+
model_value: Ref<string>
|
|
22
|
+
is_open: Ref<boolean>
|
|
23
|
+
disabled: ComputedRef<boolean>
|
|
24
|
+
size: ComputedRef<"sm" | "md" | "lg">
|
|
25
|
+
placeholder: ComputedRef<string>
|
|
26
|
+
trigger_ref: Ref<HTMLElement | null>
|
|
27
|
+
updateValue: (value: string) => void
|
|
28
|
+
open: () => void
|
|
29
|
+
close: () => void
|
|
30
|
+
toggle: () => void
|
|
31
|
+
setTriggerRef: (element: HTMLElement | null) => void
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const SELECT_KEY: InjectionKey<SelectContext> = Symbol("select")
|
|
21
35
|
|
|
22
36
|
const trigger_element = ref<HTMLElement | null>(null)
|
|
23
37
|
const context = inject<SelectContext | null>(SELECT_KEY, null)
|
|
24
38
|
|
|
25
39
|
if (!context) {
|
|
26
|
-
throw new Error(
|
|
40
|
+
throw new Error("SelectTrigger must be used within Select")
|
|
27
41
|
}
|
|
28
42
|
|
|
29
43
|
const composable = useSelectTrigger()
|
|
@@ -15,9 +15,11 @@
|
|
|
15
15
|
<script setup lang="ts">
|
|
16
16
|
import { toRef } from "vue"
|
|
17
17
|
import { useSwitch } from "../../composables/useSwitch"
|
|
18
|
-
import type { SwitchProps } from "../../types/switch"
|
|
19
18
|
|
|
20
|
-
const props = withDefaults(defineProps<
|
|
19
|
+
const props = withDefaults(defineProps<{
|
|
20
|
+
size?: "sm" | "md" | "lg"
|
|
21
|
+
disabled?: boolean
|
|
22
|
+
}>(), {
|
|
21
23
|
size: "md",
|
|
22
24
|
disabled: false
|
|
23
25
|
})
|
|
@@ -16,14 +16,20 @@
|
|
|
16
16
|
<script setup lang="ts">
|
|
17
17
|
import { toRef } from "vue"
|
|
18
18
|
import { useTextarea } from "../../composables/useTextarea"
|
|
19
|
-
import type {
|
|
19
|
+
import type { TextareaSize, TextareaResize } from "../../types/textarea"
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
const props = withDefaults(defineProps<{
|
|
22
|
+
size?: TextareaSize
|
|
23
|
+
placeholder?: string
|
|
24
|
+
disabled?: boolean
|
|
25
|
+
readonly?: boolean
|
|
26
|
+
error?: string
|
|
27
|
+
error_id?: string
|
|
28
|
+
rows?: number
|
|
29
|
+
resize?: TextareaResize
|
|
22
30
|
modelValue?: string
|
|
23
31
|
id?: string
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const props = withDefaults(defineProps<HeadlessTextareaProps>(), {
|
|
32
|
+
}>(), {
|
|
27
33
|
size: "md",
|
|
28
34
|
disabled: false,
|
|
29
35
|
readonly: false,
|