@soave/ui 0.2.2 → 0.3.1

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>

package/dist/components/ui/SheetFooter.vue

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

package/dist/components/ui/SheetHeader.vue

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

package/dist/components/ui/SheetTitle.vue

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

package/dist/components/ui/Switch.vue

@@ -1,63 +0,0 @@
-<template>
-    <button
-        type="button"
-        :class="[computed_classes, props.class]"
-        :disabled="composable.is_disabled.value"
-        :data-state="modelValue ? 'checked' : 'unchecked'"
-        v-bind="composable.aria_attributes.value"
-        @click="handleClick"
-    >
-        <span
-            :class="composable.thumb_classes.value"
-            :data-state="modelValue ? 'checked' : 'unchecked'"
-        />
-    </button>
-</template>
-
-<script setup lang="ts">
-import { toRef, computed } from "vue"
-import { useSwitch } from "../../composables/useSwitch"
-import { useStyleAdapter } from "../../composables/useUIConfig"
-import type { SwitchProps } from "../../types/switch"
-import type { SwitchState } from "../../types/composables"
-
-interface Props extends SwitchProps {
-    modelValue?: boolean
-    class?: string
-    unstyled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: false,
-    disabled: false,
-    unstyled: false
-})
-
-const emit = defineEmits<{
-    "update:modelValue": [value: boolean]
-}>()
-
-const style_adapter = useStyleAdapter()
-const checked = toRef(() => props.modelValue)
-const composable = useSwitch(toRef(() => props), checked)
-
-// StyleAdapterからクラスを取得
-const computed_classes = computed(() => {
-    if (props.unstyled) {
-        return ""
-    }
-
-    const state: SwitchState = {
-        checked: props.modelValue,
-        disabled: composable.is_disabled.value
-    }
-
-    return style_adapter.getClasses("switch", state)
-})
-
-const handleClick = () => {
-    if (!composable.is_disabled.value) {
-        emit("update:modelValue", !props.modelValue)
-    }
-}
-</script>