@soave/ui 0.3.2 → 0.4.0

package/dist/components/RadioItem.vue

@@ -1,65 +0,0 @@
-<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 type { Ref, ComputedRef, InjectionKey } from "vue"
-import { useRadioItem } from "../../composables/useRadio"
-
-interface RadioGroupContext {
-    model_value: Ref<string>
-    disabled: ComputedRef<boolean>
-    updateValue: (value: string) => void
-}
-
-const RADIO_GROUP_KEY: InjectionKey<RadioGroupContext> = Symbol("radio-group")
-
-const props = withDefaults(defineProps<{
-    value: string
-    size?: "sm" | "md" | "lg"
-    disabled?: boolean
-}>(), {
-    size: "md",
-    disabled: false
-})
-
-const context = inject<RadioGroupContext | null>(RADIO_GROUP_KEY, null)
-
-if (!context) {
-    throw new Error("RadioItem must be used within RadioGroup")
-}
-
-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

@@ -1,114 +0,0 @@
-<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 { Ref, ComputedRef, InjectionKey } from "vue"
-
-interface SelectContext {
-    model_value: Ref<string>
-    is_open: Ref<boolean>
-    disabled: ComputedRef<boolean>
-    size: ComputedRef<"sm" | "md" | "lg">
-    placeholder: ComputedRef<string>
-    trigger_ref: Ref<HTMLElement | null>
-    updateValue: (value: string) => void
-    open: () => void
-    close: () => void
-    toggle: () => void
-    setTriggerRef: (element: HTMLElement | null) => void
-}
-
-const SELECT_KEY: InjectionKey<SelectContext> = Symbol("select")
-
-const props = withDefaults(defineProps<{
-    size?: "sm" | "md" | "lg"
-    disabled?: boolean
-    placeholder?: string
-}>(), {
-    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

@@ -1,54 +0,0 @@
-<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 type { Ref, ComputedRef, InjectionKey } from "vue"
-import { useSelectContent } from "../../composables/useSelect"
-
-interface SelectContext {
-    model_value: Ref<string>
-    is_open: Ref<boolean>
-    disabled: ComputedRef<boolean>
-    size: ComputedRef<"sm" | "md" | "lg">
-    placeholder: ComputedRef<string>
-    trigger_ref: Ref<HTMLElement | null>
-    updateValue: (value: string) => void
-    open: () => void
-    close: () => void
-    toggle: () => void
-    setTriggerRef: (element: HTMLElement | null) => void
-}
-
-const SELECT_KEY: InjectionKey<SelectContext> = Symbol("select")
-
-const context = inject<SelectContext | null>(SELECT_KEY, null)
-
-if (!context) {
-    throw new Error("SelectContent must be used within Select")
-}
-
-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

@@ -1,61 +0,0 @@
-<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 type { Ref, ComputedRef, InjectionKey } from "vue"
-import { useSelectItem } from "../../composables/useSelect"
-
-interface SelectContext {
-    model_value: Ref<string>
-    is_open: Ref<boolean>
-    disabled: ComputedRef<boolean>
-    size: ComputedRef<"sm" | "md" | "lg">
-    placeholder: ComputedRef<string>
-    trigger_ref: Ref<HTMLElement | null>
-    updateValue: (value: string) => void
-    open: () => void
-    close: () => void
-    toggle: () => void
-    setTriggerRef: (element: HTMLElement | null) => void
-}
-
-const SELECT_KEY: InjectionKey<SelectContext> = Symbol("select")
-
-const props = withDefaults(defineProps<{
-    value: string
-    disabled?: boolean
-}>(), {
-    disabled: false
-})
-
-const context = inject<SelectContext | null>(SELECT_KEY, null)
-
-if (!context) {
-    throw new Error("SelectItem must be used within Select")
-}
-
-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

@@ -1,75 +0,0 @@
-<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 type { Ref, ComputedRef, InjectionKey } from "vue"
-import { useSelectTrigger } from "../../composables/useSelect"
-
-interface SelectContext {
-    model_value: Ref<string>
-    is_open: Ref<boolean>
-    disabled: ComputedRef<boolean>
-    size: ComputedRef<"sm" | "md" | "lg">
-    placeholder: ComputedRef<string>
-    trigger_ref: Ref<HTMLElement | null>
-    updateValue: (value: string) => void
-    open: () => void
-    close: () => void
-    toggle: () => void
-    setTriggerRef: (element: HTMLElement | null) => void
-}
-
-const SELECT_KEY: InjectionKey<SelectContext> = Symbol("select")
-
-const trigger_element = ref<HTMLElement | null>(null)
-const context = inject<SelectContext | null>(SELECT_KEY, null)
-
-if (!context) {
-    throw new Error("SelectTrigger must be used within Select")
-}
-
-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

@@ -1,45 +0,0 @@
-<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"
-
-const props = withDefaults(defineProps<{
-    size?: "sm" | "md" | "lg"
-    disabled?: boolean
-}>(), {
-    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

@@ -1,55 +0,0 @@
-<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>

package/dist/components/index.mjs

@@ -1,13 +0,0 @@
-export { default as Button } from "./Button.vue";
-export { default as Input } from "./Input.vue";
-export { default as Textarea } from "./Textarea.vue";
-export { default as Card } from "./Card.vue";
-export { default as Checkbox } from "./Checkbox.vue";
-export { default as Switch } from "./Switch.vue";
-export { default as Dialog } from "./Dialog.vue";
-export { default as Select } from "./Select.vue";
-export { default as SelectTrigger } from "./SelectTrigger.vue";
-export { default as SelectContent } from "./SelectContent.vue";
-export { default as SelectItem } from "./SelectItem.vue";
-export { default as RadioGroup } from "./RadioGroup.vue";
-export { default as RadioItem } from "./RadioItem.vue";

package/dist/composables/index.mjs

@@ -1,17 +0,0 @@
-export { useButton } from "./useButton.mjs";
-export { useInput } from "./useInput.mjs";
-export { useCard } from "./useCard.mjs";
-export { useDialog } from "./useDialog.mjs";
-export { useForm } from "./useForm.mjs";
-export { useUIProvider, useUI, useUIConfig, useStyleAdapter, UI_PROVIDER_KEY, UI_CONFIG_KEY } from "./useUIConfig.mjs";
-export { useCheckbox } from "./useCheckbox.mjs";
-export { useRadioItem } from "./useRadio.mjs";
-export { useSwitch } from "./useSwitch.mjs";
-export { useTextarea } from "./useTextarea.mjs";
-export { useSelectTrigger, useSelectContent, useSelectItem } from "./useSelect.mjs";
-export { useFileInput } from "./useFileInput.mjs";
-export { useToast, toast } from "./useToast.mjs";
-export { useTooltip } from "./useTooltip.mjs";
-export { usePopover } from "./usePopover.mjs";
-export { useDropdown } from "./useDropdown.mjs";
-export { useTheme, generateThemeCSS } from "./useTheme.mjs";

package/dist/composables/useButton.mjs

@@ -1,22 +0,0 @@
-import { computed, readonly } from "vue";
-import { useUI } from "./useUIConfig.mjs";
-export const useButton = (props) => {
-  const ui_config = useUI("button");
-  const state = computed(() => ({
-    variant: props.value.variant ?? ui_config.default_variant,
-    size: props.value.size ?? ui_config.default_size,
-    disabled: props.value.disabled ?? false,
-    loading: props.value.loading ?? false,
-    type: props.value.type ?? "button"
-  }));
-  const aria_attributes = computed(() => ({
-    "aria-disabled": state.value.disabled || void 0,
-    "aria-busy": state.value.loading || void 0,
-    role: "button",
-    type: state.value.type
-  }));
-  return {
-    state: readonly(state),
-    aria_attributes: readonly(aria_attributes)
-  };
-};

package/dist/composables/useCard.mjs

@@ -1,11 +0,0 @@
-import { computed, readonly } from "vue";
-import { useUI } from "./useUIConfig.mjs";
-export const useCard = (props) => {
-  const ui_config = useUI("card");
-  const state = computed(() => ({
-    padding: props.value.padding ?? ui_config.default_padding
-  }));
-  return {
-    state: readonly(state)
-  };
-};

package/dist/composables/useCheckbox.mjs

@@ -1,18 +0,0 @@
-import { computed, readonly } from "vue";
-export const useCheckbox = (props, checked) => {
-  const state = computed(() => ({
-    size: props.value.size ?? "md",
-    disabled: props.value.disabled ?? false,
-    indeterminate: props.value.indeterminate ?? false,
-    checked: checked.value
-  }));
-  const aria_attributes = computed(() => ({
-    role: "checkbox",
-    "aria-checked": state.value.indeterminate ? "mixed" : state.value.checked,
-    "aria-disabled": state.value.disabled || void 0
-  }));
-  return {
-    state: readonly(state),
-    aria_attributes: readonly(aria_attributes)
-  };
-};

package/dist/composables/useDialog.mjs

@@ -1,19 +0,0 @@
-import { ref, readonly } from "vue";
-export const useDialog = () => {
-  const is_open = ref(false);
-  const open = () => {
-    is_open.value = true;
-  };
-  const close = () => {
-    is_open.value = false;
-  };
-  const toggle = () => {
-    is_open.value = !is_open.value;
-  };
-  return {
-    is_open: readonly(is_open),
-    open,
-    close,
-    toggle
-  };
-};