@soave/ui 0.2.1 → 0.3.0

package/dist/components/ui/Popover.vue

@@ -1,35 +0,0 @@
-<template>
-    <div class="relative inline-block" :class="props.class">
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { provide, ref, type Ref } from "vue"
-import { usePopover } from "../../composables/usePopover"
-import type { PopoverSide, PopoverAlign } from "../../types/popover"
-import { POPOVER_CONTEXT_KEY } from "../../types/popover"
-
-interface Props {
-    side?: PopoverSide
-    align?: PopoverAlign
-    modal?: boolean
-    class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    side: "bottom",
-    align: "center",
-    modal: false
-})
-
-const popover_props = ref({
-    side: props.side,
-    align: props.align,
-    modal: props.modal
-})
-
-const popover = usePopover(popover_props as Ref<typeof popover_props.value>)
-
-provide(POPOVER_CONTEXT_KEY, popover)
-</script>

package/dist/components/ui/PopoverContent.vue

@@ -1,66 +0,0 @@
-<template>
-    <Transition name="popover">
-        <div
-            v-if="is_open"
-            ref="content_element"
-            :id="popover_id"
-            role="dialog"
-            aria-modal="false"
-            :style="position_styles"
-            :class="[computed_classes, props.class]"
-            tabindex="-1"
-        >
-            <slot />
-        </div>
-    </Transition>
-</template>
-
-<script setup lang="ts">
-import { inject, ref, computed, watchEffect, onMounted } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { PopoverContentProps } from "../../types/popover"
-import { POPOVER_CONTEXT_KEY } from "../../types/popover"
-import type { PopoverState } from "../../types/composables"
-
-const props = withDefaults(defineProps<PopoverContentProps>(), {
-    unstyled: false
-})
-
-const context = inject(POPOVER_CONTEXT_KEY)
-
-if (!context) {
-    throw new Error("PopoverContent must be used within a Popover component")
-}
-
-const {
-    is_open,
-    content_ref,
-    popover_id,
-    position_styles
-} = context
-
-const style_adapter = useStyleAdapter()
-const content_element = ref<HTMLElement | null>(null)
-
-watchEffect(() => {
-    content_ref.value = content_element.value
-})
-
-onMounted(() => {
-    if (is_open.value && content_element.value) {
-        content_element.value.focus()
-    }
-})
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    const state: PopoverState = {
-        is_open: is_open.value
-    }
-    return style_adapter.getClasses("popover", state)
-})
-</script>
-
-<style scoped>
-.popover-enter-active,.popover-leave-active{transition:opacity .2s ease,transform .2s ease}.popover-enter-from,.popover-leave-to{opacity:0;transform:scale(.95)}
-</style>

package/dist/components/ui/PopoverTrigger.vue

@@ -1,36 +0,0 @@
-<template>
-    <button
-        ref="trigger_element"
-        type="button"
-        :aria-expanded="is_open"
-        :aria-controls="popover_id"
-        :aria-haspopup="true"
-        @click="handleTriggerClick"
-    >
-        <slot />
-    </button>
-</template>
-
-<script setup lang="ts">
-import { inject, ref, watchEffect } from "vue"
-import { POPOVER_CONTEXT_KEY } from "../../types/popover"
-
-const context = inject(POPOVER_CONTEXT_KEY)
-
-if (!context) {
-    throw new Error("PopoverTrigger must be used within a Popover component")
-}
-
-const {
-    is_open,
-    trigger_ref,
-    popover_id,
-    handleTriggerClick
-} = context
-
-const trigger_element = ref<HTMLElement | null>(null)
-
-watchEffect(() => {
-    trigger_ref.value = trigger_element.value
-})
-</script>

package/dist/components/ui/RadioGroup.vue

@@ -1,47 +0,0 @@
-<template>
-    <div
-        role="radiogroup"
-        :class="[computed_classes, props.class]"
-    >
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { provide, toRef, computed } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { RadioGroupProps, RadioGroupContext } from "../../types/radio"
-import { RADIO_GROUP_KEY } from "../../types/radio"
-
-interface Props extends RadioGroupProps {
-    modelValue?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: "",
-    disabled: false,
-    orientation: "vertical",
-    unstyled: false
-})
-
-const emit = defineEmits<{
-    "update:modelValue": [value: string]
-}>()
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("radio-group", { orientation: props.orientation })
-})
-
-const context: RadioGroupContext = {
-    model_value: toRef(() => props.modelValue),
-    disabled: toRef(() => props.disabled),
-    updateValue: (value: string) => {
-        emit("update:modelValue", value)
-    }
-}
-
-provide(RADIO_GROUP_KEY, context)
-</script>

package/dist/components/ui/RadioItem.vue

@@ -1,62 +0,0 @@
-<template>
-    <button
-        type="button"
-        :class="[computed_classes, props.class]"
-        :disabled="is_disabled"
-        role="radio"
-        :aria-checked="is_checked"
-        :aria-disabled="is_disabled || undefined"
-        @click="handleClick"
-    >
-        <span
-            v-if="is_checked"
-            :class="indicator_classes"
-        >
-            <svg
-                class="fill-current"
-                viewBox="0 0 24 24"
-            >
-                <circle cx="12" cy="12" r="6" />
-            </svg>
-        </span>
-    </button>
-</template>
-
-<script setup lang="ts">
-import { inject, computed } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { RadioItemProps, RadioGroupContext } from "../../types/radio"
-import { RADIO_GROUP_KEY } from "../../types/radio"
-import type { RadioState } from "../../types/composables"
-
-const props = withDefaults(defineProps<RadioItemProps>(), {
-    disabled: false,
-    unstyled: false
-})
-
-const context = inject<RadioGroupContext>(RADIO_GROUP_KEY)
-const style_adapter = useStyleAdapter()
-
-const is_checked = computed(() => context?.model_value.value === props.value)
-const is_disabled = computed(() => props.disabled || context?.disabled.value || false)
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    const state: RadioState = {
-        checked: is_checked.value,
-        disabled: is_disabled.value
-    }
-    return style_adapter.getClasses("radio", state)
-})
-
-const indicator_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("radio-indicator", {})
-})
-
-const handleClick = () => {
-    if (!is_disabled.value && context) {
-        context.updateValue(props.value)
-    }
-}
-</script>

package/dist/components/ui/Select.vue

@@ -1,62 +0,0 @@
-<template>
-    <div class="relative">
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { provide, ref, toRef } from "vue"
-import type { SelectProps, SelectContext, SelectSize } from "../../types/select"
-import { SELECT_KEY } from "../../types/select"
-
-interface Props extends SelectProps {
-    modelValue?: string
-    class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: "",
-    size: "md" as SelectSize,
-    disabled: false,
-    placeholder: "Select...",
-    unstyled: false
-})
-
-const emit = defineEmits<{
-    "update:modelValue": [value: string]
-}>()
-
-const is_open = ref(false)
-const trigger_ref = ref<HTMLElement | null>(null)
-
-const context: SelectContext = {
-    model_value: toRef(() => props.modelValue),
-    is_open,
-    disabled: toRef(() => props.disabled),
-    size: toRef(() => props.size ?? "md"),
-    placeholder: toRef(() => props.placeholder ?? "Select..."),
-    trigger_ref,
-    updateValue: (value: string) => {
-        emit("update:modelValue", value)
-        is_open.value = false
-    },
-    open: () => {
-        if (!props.disabled) {
-            is_open.value = true
-        }
-    },
-    close: () => {
-        is_open.value = false
-    },
-    toggle: () => {
-        if (!props.disabled) {
-            is_open.value = !is_open.value
-        }
-    },
-    setTriggerRef: (element: HTMLElement | null) => {
-        trigger_ref.value = element
-    }
-}
-
-provide(SELECT_KEY, context)
-</script>

package/dist/components/ui/SelectContent.vue

@@ -1,55 +0,0 @@
-<template>
-    <Teleport to="body">
-        <div
-            v-if="context?.is_open.value"
-            class="fixed inset-0 z-40"
-            @click="context?.close()"
-        />
-        <div
-            v-if="context?.is_open.value"
-            :class="[computed_classes, props.class]"
-            :style="content_style"
-            :data-state="context?.is_open.value ? 'open' : 'closed'"
-            data-side="bottom"
-            role="listbox"
-        >
-            <div class="p-1">
-                <slot />
-            </div>
-        </div>
-    </Teleport>
-</template>
-
-<script setup lang="ts">
-import { inject, computed } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { SelectContext, SelectContentProps } from "../../types/select"
-import { SELECT_KEY } from "../../types/select"
-
-const props = withDefaults(defineProps<SelectContentProps>(), {
-    unstyled: false
-})
-
-const context = inject<SelectContext>(SELECT_KEY)
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("select-content", {})
-})
-
-const content_style = computed(() => {
-    const trigger_element = context?.trigger_ref.value
-    if (!trigger_element) {
-        return {}
-    }
-
-    const rect = trigger_element.getBoundingClientRect()
-    return {
-        position: "fixed" as const,
-        top: `${rect.bottom + 4}px`,
-        left: `${rect.left}px`,
-        width: `${rect.width}px`
-    }
-})
-</script>

package/dist/components/ui/SelectItem.vue

@@ -1,55 +0,0 @@
-<template>
-    <div
-        :class="[computed_classes, props.class]"
-        :data-disabled="is_disabled ? '' : undefined"
-        role="option"
-        :aria-selected="is_selected"
-        @click="handleClick"
-    >
-        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-            <svg
-                v-if="is_selected"
-                class="h-4 w-4"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-            >
-                <polyline points="20 6 9 17 4 12" />
-            </svg>
-        </span>
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { inject, computed } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { SelectContext, SelectItemProps } from "../../types/select"
-import { SELECT_KEY } from "../../types/select"
-
-const props = withDefaults(defineProps<SelectItemProps>(), {
-    disabled: false,
-    unstyled: false
-})
-
-const context = inject<SelectContext>(SELECT_KEY)
-const style_adapter = useStyleAdapter()
-
-const is_selected = computed(() => context?.model_value.value === props.value)
-const is_disabled = computed(() => props.disabled)
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("select-item", {})
-})
-
-const handleClick = () => {
-    if (!is_disabled.value && context) {
-        context.updateValue(props.value)
-    }
-}
-</script>

package/dist/components/ui/SelectTrigger.vue

@@ -1,70 +0,0 @@
-<template>
-    <button
-        ref="button_ref"
-        type="button"
-        :class="[computed_classes, props.class]"
-        :disabled="is_disabled"
-        :aria-expanded="context?.is_open.value"
-        aria-haspopup="listbox"
-        @click="handleClick"
-    >
-        <slot />
-        <svg
-            :class="icon_classes"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        >
-            <path d="m6 9 6 6 6-6" />
-        </svg>
-    </button>
-</template>
-
-<script setup lang="ts">
-import { inject, ref, computed, onMounted, onUnmounted } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { SelectContext, SelectTriggerProps } from "../../types/select"
-import { SELECT_KEY } from "../../types/select"
-import type { SelectState } from "../../types/composables"
-
-const props = withDefaults(defineProps<SelectTriggerProps>(), {
-    unstyled: false
-})
-
-const context = inject<SelectContext>(SELECT_KEY)
-const style_adapter = useStyleAdapter()
-const button_ref = ref<HTMLButtonElement | null>(null)
-
-const is_disabled = computed(() => context?.disabled.value ?? false)
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    const state: SelectState = {
-        size: context?.size.value ?? "md",
-        disabled: is_disabled.value,
-        is_open: context?.is_open.value ?? false
-    }
-    return style_adapter.getClasses("select", state)
-})
-
-const icon_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("select-trigger-icon", {})
-})
-
-onMounted(() => {
-    context?.setTriggerRef(button_ref.value)
-})
-
-onUnmounted(() => {
-    context?.setTriggerRef(null)
-})
-
-const handleClick = () => {
-    context?.toggle()
-}
-</script>

package/dist/components/ui/SelectValue.vue

@@ -1,27 +0,0 @@
-<template>
-    <span :class="[computed_classes, props.class]">
-        <slot v-if="hasValue" />
-        <template v-else>{{ context?.placeholder.value }}</template>
-    </span>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { SelectContext, SelectValueProps } from "../../types/select"
-import { SELECT_KEY } from "../../types/select"
-
-const props = withDefaults(defineProps<SelectValueProps>(), {
-    unstyled: false
-})
-
-const context = inject<SelectContext>(SELECT_KEY)
-const style_adapter = useStyleAdapter()
-
-const hasValue = computed(() => !!context?.model_value.value)
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("select-value", { hasValue: hasValue.value })
-})
-</script>

package/dist/components/ui/Sheet.vue

@@ -1,148 +0,0 @@
-<template>
-    <Teleport to="body">
-        <Transition name="sheet-overlay">
-            <div
-                v-if="is_open"
-                :class="overlay_classes"
-                @click="handleOverlayClick"
-            />
-        </Transition>
-
-        <Transition :name="transition_name">
-            <div
-                v-if="is_open"
-                ref="sheet_element"
-                role="dialog"
-                aria-modal="true"
-                :class="[computed_classes, props.class]"
-                tabindex="-1"
-                @keydown.escape="close"
-            >
-                <slot />
-
-                <button
-                    v-if="show_close_button"
-                    type="button"
-                    :class="close_button_classes"
-                    aria-label="Close"
-                    @click="close"
-                >
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    >
-                        <path d="M18 6 6 18" />
-                        <path d="m6 6 12 12" />
-                    </svg>
-                </button>
-            </div>
-        </Transition>
-    </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, provide, onMounted, onUnmounted } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { SheetSide, SheetContext, SheetProps } from "../../types/sheet"
-import { SHEET_CONTEXT_KEY } from "../../types/sheet"
-import type { SheetState } from "../../types/composables"
-
-interface Props extends SheetProps {}
-
-const props = withDefaults(defineProps<Props>(), {
-    open: false,
-    side: "right",
-    showCloseButton: true,
-    unstyled: false
-})
-
-const emit = defineEmits<{
-    "update:open": [value: boolean]
-}>()
-
-
-const style_adapter = useStyleAdapter()
-const is_open = ref(props.open)
-const sheet_element = ref<HTMLElement | null>(null)
-
-watch(() => props.open, (value) => {
-    is_open.value = value
-})
-
-const open = (): void => {
-    is_open.value = true
-    emit("update:open", true)
-}
-
-const close = (): void => {
-    is_open.value = false
-    emit("update:open", false)
-}
-
-const handleOverlayClick = (): void => {
-    close()
-}
-
-const handleKeyDown = (event: KeyboardEvent): void => {
-    if (event.key === "Escape" && is_open.value) {
-        close()
-    }
-}
-
-onMounted(() => {
-    document.addEventListener("keydown", handleKeyDown)
-})
-
-onUnmounted(() => {
-    document.removeEventListener("keydown", handleKeyDown)
-})
-
-watch(is_open, (open) => {
-    if (open) {
-        document.body.style.overflow = "hidden"
-    } else {
-        document.body.style.overflow = ""
-    }
-})
-
-const side = computed(() => props.side ?? "right")
-const show_close_button = computed(() => props.showCloseButton)
-const transition_name = computed(() => `sheet-${side.value}`)
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    const state: SheetState = {
-        is_open: is_open.value,
-        side: side.value
-    }
-    return style_adapter.getClasses("sheet", state)
-})
-
-const overlay_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("sheet-overlay", {})
-})
-
-const close_button_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("sheet-close", {})
-})
-
-provide(SHEET_CONTEXT_KEY, {
-    is_open: is_open.value,
-    side: side.value,
-    open,
-    close
-})
-</script>
-
-<style scoped>
-.sheet-overlay-enter-active,.sheet-overlay-leave-active{transition:opacity .3s ease}.sheet-overlay-enter-from,.sheet-overlay-leave-to{opacity:0}.sheet-bottom-enter-active,.sheet-bottom-leave-active,.sheet-left-enter-active,.sheet-left-leave-active,.sheet-right-enter-active,.sheet-right-leave-active,.sheet-top-enter-active,.sheet-top-leave-active{transition:transform .3s ease}.sheet-right-enter-from,.sheet-right-leave-to{transform:translateX(100%)}.sheet-left-enter-from,.sheet-left-leave-to{transform:translateX(-100%)}.sheet-top-enter-from,.sheet-top-leave-to{transform:translateY(-100%)}.sheet-bottom-enter-from,.sheet-bottom-leave-to{transform:translateY(100%)}
-</style>

package/dist/components/ui/SheetDescription.vue

@@ -1,22 +0,0 @@
-<template>
-    <p :class="[computed_classes, props.class]">
-        <slot />
-    </p>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { SheetDescriptionProps } from "../../types/sheet"
-
-const props = withDefaults(defineProps<SheetDescriptionProps>(), {
-    unstyled: false
-})
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("sheet-description", {})
-})
-</script>