@soave/ui 0.3.1 → 0.4.0

package/dist/components/RadioItem.vue

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

@@ -1,95 +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 { 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

@@ -1,40 +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 { 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

@@ -1,44 +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 { 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

@@ -1,61 +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 { 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

@@ -1,43 +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"
-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

@@ -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
-  };
-};

package/dist/composables/useDropdown.mjs

@@ -1,170 +0,0 @@
-import { ref, computed, onMounted, onUnmounted } from "vue";
-let dropdown_counter = 0;
-export function useDropdown(props) {
-  const is_open = ref(false);
-  const trigger_ref = ref(null);
-  const content_ref = ref(null);
-  const dropdown_id = `dropdown-${++dropdown_counter}`;
-  const active_item_index = ref(-1);
-  const items_count = ref(0);
-  let item_counter = 0;
-  const open = () => {
-    is_open.value = true;
-    active_item_index.value = 0;
-  };
-  const close = () => {
-    is_open.value = false;
-    active_item_index.value = -1;
-  };
-  const toggle = () => {
-    if (is_open.value) {
-      close();
-    } else {
-      open();
-    }
-  };
-  const handleTriggerClick = () => {
-    toggle();
-  };
-  const handleTriggerKeyDown = (event) => {
-    switch (event.key) {
-      case "Enter":
-      case " ":
-      case "ArrowDown":
-        event.preventDefault();
-        open();
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        open();
-        active_item_index.value = items_count.value - 1;
-        break;
-    }
-  };
-  const handleContentKeyDown = (event) => {
-    switch (event.key) {
-      case "ArrowDown":
-        event.preventDefault();
-        active_item_index.value = Math.min(active_item_index.value + 1, items_count.value - 1);
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        active_item_index.value = Math.max(active_item_index.value - 1, 0);
-        break;
-      case "Home":
-        event.preventDefault();
-        active_item_index.value = 0;
-        break;
-      case "End":
-        event.preventDefault();
-        active_item_index.value = items_count.value - 1;
-        break;
-      case "Escape":
-        event.preventDefault();
-        close();
-        trigger_ref.value?.focus();
-        break;
-      case "Tab":
-        close();
-        break;
-    }
-  };
-  const handleClickOutside = (event) => {
-    if (!is_open.value) return;
-    const target = event.target;
-    const trigger = trigger_ref.value;
-    const content = content_ref.value;
-    if (trigger && trigger.contains(target)) return;
-    if (content && content.contains(target)) return;
-    close();
-  };
-  const registerItem = () => {
-    const index = item_counter++;
-    items_count.value = item_counter;
-    return index;
-  };
-  const setActiveItem = (index) => {
-    active_item_index.value = index;
-  };
-  const position_styles = computed(() => {
-    if (!trigger_ref.value || !is_open.value) {
-      return {};
-    }
-    const side = props.value.side ?? "bottom";
-    const align = props.value.align ?? "start";
-    const offset = 4;
-    const styles = {
-      position: "absolute",
-      zIndex: "50"
-    };
-    switch (side) {
-      case "top":
-        styles.bottom = "100%";
-        styles.marginBottom = `${offset}px`;
-        break;
-      case "bottom":
-        styles.top = "100%";
-        styles.marginTop = `${offset}px`;
-        break;
-      case "left":
-        styles.right = "100%";
-        styles.marginRight = `${offset}px`;
-        break;
-      case "right":
-        styles.left = "100%";
-        styles.marginLeft = `${offset}px`;
-        break;
-    }
-    if (side === "top" || side === "bottom") {
-      switch (align) {
-        case "start":
-          styles.left = "0";
-          break;
-        case "center":
-          styles.left = "50%";
-          styles.transform = "translateX(-50%)";
-          break;
-        case "end":
-          styles.right = "0";
-          break;
-      }
-    } else {
-      switch (align) {
-        case "start":
-          styles.top = "0";
-          break;
-        case "center":
-          styles.top = "50%";
-          styles.transform = "translateY(-50%)";
-          break;
-        case "end":
-          styles.bottom = "0";
-          break;
-      }
-    }
-    return styles;
-  });
-  onMounted(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-  });
-  onUnmounted(() => {
-    document.removeEventListener("mousedown", handleClickOutside);
-  });
-  return {
-    is_open,
-    trigger_ref,
-    content_ref,
-    dropdown_id,
-    active_item_index,
-    items_count,
-    position_styles,
-    open,
-    close,
-    toggle,
-    handleTriggerClick,
-    handleTriggerKeyDown,
-    handleContentKeyDown,
-    registerItem,
-    setActiveItem
-  };
-}