@soave/ui 0.2.2 → 0.3.1

package/dist/components/Button.vue

@@ -0,0 +1,36 @@
+<template>
+    <button
+        :disabled="composable.state.value.disabled || composable.state.value.loading"
+        :type="composable.state.value.type"
+        v-bind="composable.aria_attributes.value"
+        @click="handleClick"
+    >
+        <slot />
+    </button>
+</template>
+
+<script setup lang="ts">
+import { toRef } from "vue"
+import { useButton } from "../../composables/useButton"
+import type { ButtonProps } from "../../types/button"
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+    variant: "primary",
+    size: "md",
+    disabled: false,
+    loading: false,
+    type: "button"
+})
+
+const emit = defineEmits<{
+    click: [event: MouseEvent]
+}>()
+
+const composable = useButton(toRef(() => props))
+
+const handleClick = (event: MouseEvent) => {
+    if (!composable.state.value.disabled && !composable.state.value.loading) {
+        emit("click", event)
+    }
+}
+</script>

package/dist/components/Card.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { toRef } from "vue"
+import { useCard } from "../../composables/useCard"
+import type { CardProps } from "../../types/card"
+
+const props = withDefaults(defineProps<CardProps>(), {
+    padding: "md"
+})
+
+// Composable is available for state access if needed
+const composable = useCard(toRef(() => props))
+
+// Export state for external access
+defineExpose({
+    state: composable.state
+})
+</script>

package/dist/components/Checkbox.vue

@@ -0,0 +1,44 @@
+<template>
+    <button
+        type="button"
+        :disabled="composable.state.value.disabled"
+        :data-state="dataState"
+        v-bind="composable.aria_attributes.value"
+        @click="handleClick"
+        @keydown.space.prevent="handleClick"
+    >
+        <slot :checked="model" :indeterminate="composable.state.value.indeterminate" />
+    </button>
+</template>
+
+<script setup lang="ts">
+import { toRef, computed } from "vue"
+import { useCheckbox } from "../../composables/useCheckbox"
+import type { CheckboxProps } from "../../types/checkbox"
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+    size: "md",
+    disabled: false,
+    indeterminate: false
+})
+
+const model = defineModel<boolean>({ default: false })
+
+const emit = defineEmits<{
+    change: [checked: boolean]
+}>()
+
+const composable = useCheckbox(toRef(() => props), model)
+
+const dataState = computed(() => {
+    if (composable.state.value.indeterminate) return "indeterminate"
+    return model.value ? "checked" : "unchecked"
+})
+
+const handleClick = () => {
+    if (!composable.state.value.disabled) {
+        model.value = !model.value
+        emit("change", model.value)
+    }
+}
+</script>

package/dist/components/Dialog.vue

@@ -0,0 +1,99 @@
+<template>
+    <Teleport to="body">
+        <div
+            v-if="is_open"
+            role="dialog"
+            aria-modal="true"
+            :aria-labelledby="titleId"
+            :aria-describedby="descriptionId"
+        >
+            <!-- Overlay -->
+            <div
+                @click="handleOverlayClick"
+                @keydown.escape="close"
+            />
+            <!-- Content -->
+            <div
+                ref="content_ref"
+                tabindex="-1"
+                @keydown.escape="close"
+            >
+                <slot :close="close" />
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, provide } from "vue"
+import { useDialog } from "../../composables/useDialog"
+import { DIALOG_KEY } from "../../types/dialog"
+import type { DialogContext } from "../../types/dialog"
+
+interface HeadlessDialogProps {
+    closeOnOverlay?: boolean
+    closeOnEscape?: boolean
+    titleId?: string
+    descriptionId?: string
+}
+
+const props = withDefaults(defineProps<HeadlessDialogProps>(), {
+    closeOnOverlay: true,
+    closeOnEscape: true
+})
+
+const model = defineModel<boolean>("open", { default: false })
+
+const content_ref = ref<HTMLElement | null>(null)
+const dialog = useDialog()
+const { is_open, open, close, toggle } = dialog
+
+// Sync with v-model
+watch(model, (value) => {
+    if (value) {
+        open()
+    } else {
+        close()
+    }
+}, { immediate: true })
+
+watch(is_open, (value) => {
+    model.value = value
+})
+
+const handleOverlayClick = () => {
+    if (props.closeOnOverlay) {
+        close()
+    }
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Escape" && props.closeOnEscape && is_open.value) {
+        close()
+    }
+}
+
+// Provide context for child components
+const context: DialogContext = {
+    is_open,
+    close,
+    titleId: props.titleId,
+    descriptionId: props.descriptionId
+}
+provide(DIALOG_KEY, context)
+
+onMounted(() => {
+    document.addEventListener("keydown", handleKeyDown)
+})
+
+onUnmounted(() => {
+    document.removeEventListener("keydown", handleKeyDown)
+})
+
+defineExpose({
+    is_open,
+    open,
+    close,
+    toggle
+})
+</script>

package/dist/components/Input.vue

@@ -0,0 +1,48 @@
+<template>
+    <input
+        :type="composable.state.value.type"
+        :value="modelValue"
+        :disabled="composable.state.value.disabled"
+        :readonly="composable.state.value.readonly"
+        :placeholder="placeholder"
+        :id="id"
+        v-bind="composable.aria_attributes.value"
+        @input="handleInput"
+        @focus="composable.handleFocus"
+        @blur="composable.handleBlur"
+    />
+</template>
+
+<script setup lang="ts">
+import { toRef } from "vue"
+import { useInput } from "../../composables/useInput"
+import type { InputType, InputSize } from "../../types/input"
+
+const props = withDefaults(defineProps<{
+    type?: InputType
+    size?: InputSize
+    placeholder?: string
+    disabled?: boolean
+    readonly?: boolean
+    error?: string
+    error_id?: string
+    id?: string
+    modelValue?: string
+}>(), {
+    type: "text",
+    size: "md",
+    disabled: false,
+    readonly: false
+})
+
+const emit = defineEmits<{
+    "update:modelValue": [value: string]
+}>()
+
+const composable = useInput(toRef(() => props))
+
+const handleInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    emit("update:modelValue", target.value)
+}
+</script>

package/dist/components/RadioGroup.vue

@@ -0,0 +1,35 @@
+<template>
+    <div
+        role="radiogroup"
+        :aria-orientation="orientation"
+    >
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { provide, computed } from "vue"
+import type { RadioGroupProps, RadioGroupContext } from "../../types/radio"
+import { RADIO_GROUP_KEY } from "../../types/radio"
+
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+    disabled: false,
+    orientation: "vertical"
+})
+
+const model = defineModel<string>({ default: "" })
+
+const updateValue = (value: string) => {
+    if (!props.disabled) {
+        model.value = value
+    }
+}
+
+const context: RadioGroupContext = {
+    model_value: model,
+    disabled: computed(() => props.disabled),
+    updateValue
+}
+
+provide(RADIO_GROUP_KEY, context)
+</script>

package/dist/components/RadioItem.vue

@@ -0,0 +1,55 @@
+<template>
+    <button
+        type="button"
+        :disabled="composable.state.value.disabled"
+        :data-state="composable.state.value.checked ? 'checked' : 'unchecked'"
+        v-bind="composable.aria_attributes.value"
+        @click="handleClick"
+        @keydown="handleKeyDown"
+    >
+        <slot :checked="composable.state.value.checked" :disabled="composable.state.value.disabled" />
+    </button>
+</template>
+
+<script setup lang="ts">
+import { inject, toRef } from "vue"
+import { useRadioItem } from "../../composables/useRadio"
+import type { RadioItemProps, RadioGroupContext } from "../../types/radio"
+import { RADIO_GROUP_KEY } from "../../types/radio"
+import { COMPONENT_ERRORS } from "../../constants/errors"
+
+const props = withDefaults(defineProps<RadioItemProps>(), {
+    size: "md",
+    disabled: false
+})
+
+const context = inject<RadioGroupContext | null>(RADIO_GROUP_KEY, null)
+
+if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND)
+}
+
+const composable = useRadioItem(toRef(() => props))
+
+const handleClick = () => {
+    if (!composable.state.value.disabled) {
+        context.updateValue(props.value)
+    }
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+    if (composable.state.value.disabled) return
+
+    switch (event.key) {
+        case "Enter":
+        case " ":
+            event.preventDefault()
+            context.updateValue(props.value)
+            break
+    }
+}
+
+defineExpose({
+    state: composable.state
+})
+</script>

package/dist/components/Select.vue

@@ -0,0 +1,95 @@
+<template>
+    <div ref="root_ref">
+        <slot
+            :is_open="context.is_open.value"
+            :selected_value="model"
+            :open="context.open"
+            :close="context.close"
+            :toggle="context.toggle"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, provide, watch, onMounted, onUnmounted, computed } from "vue"
+import type { SelectProps, SelectContext } from "../../types/select"
+import { SELECT_KEY } from "../../types/select"
+
+const props = withDefaults(defineProps<SelectProps>(), {
+    size: "md",
+    disabled: false,
+    placeholder: ""
+})
+
+const model = defineModel<string>({ default: "" })
+
+const root_ref = ref<HTMLElement | null>(null)
+const trigger_ref = ref<HTMLElement | null>(null)
+const is_open = ref(false)
+
+const open = () => {
+    if (!props.disabled) {
+        is_open.value = true
+    }
+}
+
+const close = () => {
+    is_open.value = false
+}
+
+const toggle = () => {
+    if (is_open.value) {
+        close()
+    } else {
+        open()
+    }
+}
+
+const updateValue = (value: string) => {
+    model.value = value
+    close()
+}
+
+const setTriggerRef = (element: HTMLElement | null) => {
+    trigger_ref.value = element
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+    if (!is_open.value) return
+    const target = event.target as Node
+    if (root_ref.value && !root_ref.value.contains(target)) {
+        close()
+    }
+}
+
+const context: SelectContext = {
+    model_value: model,
+    is_open,
+    disabled: computed(() => props.disabled),
+    size: computed(() => props.size ?? "md"),
+    placeholder: computed(() => props.placeholder ?? ""),
+    trigger_ref,
+    updateValue,
+    open,
+    close,
+    toggle,
+    setTriggerRef
+}
+
+provide(SELECT_KEY, context)
+
+onMounted(() => {
+    document.addEventListener("mousedown", handleClickOutside)
+})
+
+onUnmounted(() => {
+    document.removeEventListener("mousedown", handleClickOutside)
+})
+
+defineExpose({
+    is_open,
+    open,
+    close,
+    toggle
+})
+</script>

package/dist/components/SelectContent.vue

@@ -0,0 +1,40 @@
+<template>
+    <div
+        v-if="composable.state.value.is_open"
+        role="listbox"
+        tabindex="-1"
+        @keydown="handleKeyDown"
+    >
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue"
+import { useSelectContent } from "../../composables/useSelect"
+import type { SelectContext } from "../../types/select"
+import { SELECT_KEY } from "../../types/select"
+import { COMPONENT_ERRORS } from "../../constants/errors"
+
+const context = inject<SelectContext | null>(SELECT_KEY, null)
+
+if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND)
+}
+
+const composable = useSelectContent()
+
+const handleKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+        case "Escape":
+            event.preventDefault()
+            context.close()
+            context.trigger_ref.value?.focus()
+            break
+    }
+}
+
+defineExpose({
+    state: composable.state
+})
+</script>

package/dist/components/SelectItem.vue

@@ -0,0 +1,44 @@
+<template>
+    <div
+        role="option"
+        :aria-selected="composable.state.value.selected"
+        :aria-disabled="composable.state.value.disabled"
+        :data-state="composable.state.value.selected ? 'selected' : undefined"
+        :data-disabled="composable.state.value.disabled ? '' : undefined"
+        @click="handleClick"
+        @keydown.enter="handleClick"
+        @keydown.space.prevent="handleClick"
+    >
+        <slot :selected="composable.state.value.selected" :disabled="composable.state.value.disabled" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { inject, toRef } from "vue"
+import { useSelectItem } from "../../composables/useSelect"
+import type { SelectContext, SelectItemProps } from "../../types/select"
+import { SELECT_KEY } from "../../types/select"
+import { COMPONENT_ERRORS } from "../../constants/errors"
+
+const props = withDefaults(defineProps<SelectItemProps>(), {
+    disabled: false
+})
+
+const context = inject<SelectContext | null>(SELECT_KEY, null)
+
+if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND)
+}
+
+const composable = useSelectItem(toRef(() => ({ value: props.value, disabled: props.disabled })))
+
+const handleClick = () => {
+    if (!composable.state.value.disabled) {
+        context.updateValue(props.value)
+    }
+}
+
+defineExpose({
+    state: composable.state
+})
+</script>

package/dist/components/SelectTrigger.vue

@@ -0,0 +1,61 @@
+<template>
+    <button
+        ref="trigger_element"
+        type="button"
+        :disabled="composable.state.value.disabled"
+        :aria-expanded="composable.state.value.is_open"
+        aria-haspopup="listbox"
+        @click="handleClick"
+        @keydown="handleKeyDown"
+    >
+        <slot :is_open="composable.state.value.is_open" :disabled="composable.state.value.disabled" />
+    </button>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, onMounted } from "vue"
+import { useSelectTrigger } from "../../composables/useSelect"
+import type { SelectContext } from "../../types/select"
+import { SELECT_KEY } from "../../types/select"
+import { COMPONENT_ERRORS } from "../../constants/errors"
+
+const trigger_element = ref<HTMLElement | null>(null)
+const context = inject<SelectContext | null>(SELECT_KEY, null)
+
+if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND)
+}
+
+const composable = useSelectTrigger()
+
+const handleClick = () => {
+    if (!composable.state.value.disabled) {
+        context.toggle()
+    }
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+    if (composable.state.value.disabled) return
+
+    switch (event.key) {
+        case "Enter":
+        case " ":
+        case "ArrowDown":
+            event.preventDefault()
+            context.open()
+            break
+        case "ArrowUp":
+            event.preventDefault()
+            context.open()
+            break
+    }
+}
+
+onMounted(() => {
+    context.setTriggerRef(trigger_element.value)
+})
+
+defineExpose({
+    state: composable.state
+})
+</script>

package/dist/components/Switch.vue

@@ -0,0 +1,43 @@
+<template>
+    <button
+        type="button"
+        :disabled="composable.state.value.disabled"
+        :data-state="model ? 'checked' : 'unchecked'"
+        v-bind="composable.aria_attributes.value"
+        @click="handleClick"
+    >
+        <slot :checked="model">
+            <span :data-state="model ? 'checked' : 'unchecked'" />
+        </slot>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { toRef } from "vue"
+import { useSwitch } from "../../composables/useSwitch"
+import type { SwitchProps } from "../../types/switch"
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+    size: "md",
+    disabled: false
+})
+
+const model = defineModel<boolean>({ default: false })
+
+const emit = defineEmits<{
+    change: [checked: boolean]
+}>()
+
+const composable = useSwitch(toRef(() => props), model)
+
+const handleClick = () => {
+    if (!composable.state.value.disabled) {
+        model.value = !model.value
+        emit("change", model.value)
+    }
+}
+
+defineExpose({
+    state: composable.state
+})
+</script>

package/dist/components/Textarea.vue

@@ -0,0 +1,55 @@
+<template>
+    <textarea
+        :value="modelValue"
+        :disabled="composable.state.value.disabled"
+        :readonly="composable.state.value.readonly"
+        :placeholder="placeholder"
+        :rows="rows"
+        :id="id"
+        v-bind="composable.aria_attributes.value"
+        @input="handleInput"
+        @focus="composable.handleFocus"
+        @blur="composable.handleBlur"
+    />
+</template>
+
+<script setup lang="ts">
+import { toRef } from "vue"
+import { useTextarea } from "../../composables/useTextarea"
+import type { TextareaSize, TextareaResize } from "../../types/textarea"
+
+const props = withDefaults(defineProps<{
+    size?: TextareaSize
+    placeholder?: string
+    disabled?: boolean
+    readonly?: boolean
+    error?: string
+    error_id?: string
+    rows?: number
+    resize?: TextareaResize
+    modelValue?: string
+    id?: string
+}>(), {
+    size: "md",
+    disabled: false,
+    readonly: false,
+    rows: 3,
+    resize: "vertical"
+})
+
+const emit = defineEmits<{
+    "update:modelValue": [value: string]
+}>()
+
+const composable = useTextarea(toRef(() => props))
+
+const handleInput = (event: Event) => {
+    const target = event.target as HTMLTextAreaElement
+    emit("update:modelValue", target.value)
+}
+
+defineExpose({
+    state: composable.state,
+    is_focused: composable.is_focused
+})
+</script>