@soave/ui 0.2.2 → 0.3.1

package/dist/components/ui/Button.vue

@@ -1,85 +0,0 @@
-<template>
-    <button
-        :class="[computed_classes, props.class]"
-        :disabled="composable.is_disabled.value"
-        v-bind="composable.aria_attributes.value"
-        @click="handleClick"
-    >
-        <slot name="icon-left" />
-        <span v-if="composable.is_loading.value" class="animate-spin">
-            <slot name="loading">
-                <svg
-                    class="h-4 w-4"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                >
-                    <circle
-                        class="opacity-25"
-                        cx="12"
-                        cy="12"
-                        r="10"
-                        stroke="currentColor"
-                        stroke-width="4"
-                    />
-                    <path
-                        class="opacity-75"
-                        fill="currentColor"
-                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    />
-                </svg>
-            </slot>
-        </span>
-        <slot />
-        <slot name="icon-right" />
-    </button>
-</template>
-
-<script setup lang="ts">
-import { toRef, computed } from "vue"
-import { useButton } from "../../composables/useButton"
-import { useStyleAdapter, useUI } from "../../composables/useUIConfig"
-import type { ButtonProps } from "../../types/button"
-import type { ButtonState } from "../../types/composables"
-
-interface ButtonComponentProps extends ButtonProps {
-    class?: string
-    unstyled?: boolean
-}
-
-const props = withDefaults(defineProps<ButtonComponentProps>(), {
-    disabled: false,
-    loading: false,
-    unstyled: false
-})
-
-const emit = defineEmits<{
-    click: [event: MouseEvent]
-}>()
-
-const ui_config = useUI("button")
-const style_adapter = useStyleAdapter()
-const composable = useButton(toRef(() => props))
-
-// StyleAdapterからクラスを取得
-const computed_classes = computed(() => {
-    if (props.unstyled) {
-        return ""
-    }
-
-    const state: ButtonState = {
-        variant: props.variant ?? ui_config.default_variant,
-        size: props.size ?? ui_config.default_size,
-        disabled: composable.is_disabled.value,
-        loading: composable.is_loading.value
-    }
-
-    return style_adapter.getClasses("button", state)
-})
-
-const handleClick = (event: MouseEvent) => {
-    if (!composable.is_disabled.value && !composable.is_loading.value) {
-        emit("click", event)
-    }
-}
-</script>

package/dist/components/ui/Card.vue

@@ -1,39 +0,0 @@
-<template>
-    <div :class="[computed_classes, props.class]">
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { toRef, computed } from "vue"
-import { useCard } from "../../composables/useCard"
-import { useStyleAdapter, useUI } from "../../composables/useUIConfig"
-import type { CardProps } from "../../types/card"
-import type { CardState } from "../../types/composables"
-
-interface CardComponentProps extends CardProps {
-    class?: string
-    unstyled?: boolean
-}
-
-const props = withDefaults(defineProps<CardComponentProps>(), {
-    unstyled: false
-})
-
-const ui_config = useUI("card")
-const style_adapter = useStyleAdapter()
-const composable = useCard(toRef(() => props))
-
-// StyleAdapterからクラスを取得
-const computed_classes = computed(() => {
-    if (props.unstyled) {
-        return ""
-    }
-
-    const state: CardState = {
-        padding: props.padding ?? ui_config.default_padding
-    }
-
-    return style_adapter.getClasses("card", state)
-})
-</script>

package/dist/components/ui/CardContent.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 { CardContentProps } from "../../types/card"
-
-const props = withDefaults(defineProps<CardContentProps>(), {
-    unstyled: false
-})
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("card-content", {})
-})
-</script>

package/dist/components/ui/CardDescription.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 { CardDescriptionProps } from "../../types/card"
-
-const props = withDefaults(defineProps<CardDescriptionProps>(), {
-    unstyled: false
-})
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("card-description", {})
-})
-</script>

package/dist/components/ui/CardFooter.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 { CardFooterProps } from "../../types/card"
-
-const props = withDefaults(defineProps<CardFooterProps>(), {
-    unstyled: false
-})
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("card-footer", {})
-})
-</script>

package/dist/components/ui/CardHeader.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 { CardHeaderProps } from "../../types/card"
-
-const props = withDefaults(defineProps<CardHeaderProps>(), {
-    unstyled: false
-})
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("card-header", {})
-})
-</script>

package/dist/components/ui/CardTitle.vue

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

package/dist/components/ui/Checkbox.vue

@@ -1,94 +0,0 @@
-<template>
-    <button
-        type="button"
-        :class="[computed_classes, props.class]"
-        :disabled="composable.is_disabled.value"
-        :data-state="dataState"
-        v-bind="composable.aria_attributes.value"
-        @click="handleClick"
-    >
-        <span
-            v-if="modelValue || composable.is_indeterminate.value"
-            :class="composable.indicator_classes.value"
-        >
-            <svg
-                v-if="composable.is_indeterminate.value"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-            >
-                <line x1="5" y1="12" x2="19" y2="12" />
-            </svg>
-            <svg
-                v-else
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-            >
-                <polyline points="20 6 9 17 4 12" />
-            </svg>
-        </span>
-    </button>
-</template>
-
-<script setup lang="ts">
-import { computed, toRef } from "vue"
-import { useCheckbox } from "../../composables/useCheckbox"
-import { useStyleAdapter } from "../../composables/useUIConfig"
-import type { CheckboxProps } from "../../types/checkbox"
-import type { CheckboxState } from "../../types/composables"
-
-interface Props extends CheckboxProps {
-    modelValue?: boolean
-    class?: string
-    unstyled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: false,
-    disabled: false,
-    indeterminate: false,
-    unstyled: false
-})
-
-const emit = defineEmits<{
-    "update:modelValue": [value: boolean]
-}>()
-
-const style_adapter = useStyleAdapter()
-const checked = toRef(() => props.modelValue)
-const composable = useCheckbox(toRef(() => props), checked)
-
-// StyleAdapterからクラスを取得
-const computed_classes = computed(() => {
-    if (props.unstyled) {
-        return ""
-    }
-
-    const state: CheckboxState = {
-        checked: props.modelValue,
-        disabled: composable.is_disabled.value,
-        indeterminate: composable.is_indeterminate.value
-    }
-
-    return style_adapter.getClasses("checkbox", state)
-})
-
-const dataState = computed(() => {
-    if (props.indeterminate) return "indeterminate"
-    return props.modelValue ? "checked" : "unchecked"
-})
-
-const handleClick = () => {
-    if (!composable.is_disabled.value) {
-        emit("update:modelValue", !props.modelValue)
-    }
-}
-</script>

package/dist/components/ui/Dialog.vue

@@ -1,110 +0,0 @@
-<template>
-    <Teleport to="body">
-        <Transition name="dialog">
-            <div
-                v-if="is_open"
-                class="fixed inset-0 z-50 flex items-center justify-center"
-            >
-                <div
-                    :class="overlay_classes"
-                    @click="handleOverlayClick"
-                />
-                <div
-                    :class="[computed_classes, props.class]"
-                    role="dialog"
-                    aria-modal="true"
-                >
-                    <slot />
-                    <button
-                        v-if="show_close_button"
-                        :class="close_button_classes"
-                        @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"
-                            class="h-4 w-4"
-                        >
-                            <path d="M18 6 6 18" />
-                            <path d="m6 6 12 12" />
-                        </svg>
-                        <span class="sr-only">閉じる</span>
-                    </button>
-                </div>
-            </div>
-        </Transition>
-    </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, provide } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { DialogProps } from "../../types/dialog"
-import { DIALOG_KEY } from "../../types/dialog"
-import type { DialogState } from "../../types/composables"
-
-interface DialogComponentProps extends DialogProps {
-    class?: string
-}
-
-const props = withDefaults(defineProps<DialogComponentProps>(), {
-    open: false,
-    modal: true,
-    showCloseButton: true,
-    unstyled: false
-})
-
-const emit = defineEmits<{
-    "update:open": [value: boolean]
-}>()
-
-const style_adapter = useStyleAdapter()
-
-const is_open = computed({
-    get: () => props.open,
-    set: (value) => emit("update:open", value)
-})
-
-const show_close_button = computed(() => props.showCloseButton)
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    const state: DialogState = {
-        is_open: is_open.value
-    }
-    return style_adapter.getClasses("dialog", state)
-})
-
-const overlay_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("dialog-overlay", {})
-})
-
-const close_button_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("dialog-close", {})
-})
-
-const close = () => {
-    is_open.value = false
-}
-
-const handleOverlayClick = () => {
-    if (props.modal) {
-        close()
-    }
-}
-
-provide(DIALOG_KEY, { close })
-</script>
-
-<style scoped>
-.dialog-enter-active,.dialog-leave-active{transition:opacity .2s ease}.dialog-enter-from,.dialog-leave-to{opacity:0}
-</style>

package/dist/components/ui/DialogDescription.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 { DialogDescriptionProps } from "../../types/dialog"
-
-const props = withDefaults(defineProps<DialogDescriptionProps>(), {
-    unstyled: false
-})
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("dialog-description", {})
-})
-</script>

package/dist/components/ui/DialogFooter.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 { DialogFooterProps } from "../../types/dialog"
-
-const props = withDefaults(defineProps<DialogFooterProps>(), {
-    unstyled: false
-})
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("dialog-footer", {})
-})
-</script>

package/dist/components/ui/DialogHeader.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 { DialogHeaderProps } from "../../types/dialog"
-
-const props = withDefaults(defineProps<DialogHeaderProps>(), {
-    unstyled: false
-})
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("dialog-header", {})
-})
-</script>

package/dist/components/ui/DialogTitle.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 { DialogTitleProps } from "../../types/dialog"
-
-const props = withDefaults(defineProps<DialogTitleProps>(), {
-    unstyled: false
-})
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("dialog-title", {})
-})
-</script>

package/dist/components/ui/DropdownMenu.vue

@@ -1,32 +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 { useDropdown } from "../../composables/useDropdown"
-import type { DropdownSide, DropdownAlign } from "../../types/dropdown"
-import { DROPDOWN_CONTEXT_KEY } from "../../types/dropdown"
-
-interface Props {
-    side?: DropdownSide
-    align?: DropdownAlign
-    class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    side: "bottom",
-    align: "start"
-})
-
-const dropdown_props = ref({
-    side: props.side,
-    align: props.align
-})
-
-const dropdown = useDropdown(dropdown_props as Ref<typeof dropdown_props.value>)
-
-provide(DROPDOWN_CONTEXT_KEY, dropdown)
-</script>

package/dist/components/ui/DropdownMenuContent.vue

@@ -1,69 +0,0 @@
-<template>
-    <Transition name="dropdown">
-        <div
-            v-if="is_open"
-            ref="content_element"
-            :id="dropdown_id"
-            role="menu"
-            :aria-labelledby="`${dropdown_id}-trigger`"
-            :style="position_styles"
-            :class="[computed_classes, props.class]"
-            tabindex="-1"
-            @keydown="handleContentKeyDown"
-        >
-            <slot />
-        </div>
-    </Transition>
-</template>
-
-<script setup lang="ts">
-import { inject, ref, computed, watchEffect, nextTick, watch } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { DropdownContentProps } from "../../types/dropdown"
-import { DROPDOWN_CONTEXT_KEY } from "../../types/dropdown"
-import type { DropdownState } from "../../types/composables"
-
-const props = withDefaults(defineProps<DropdownContentProps>(), {
-    unstyled: false
-})
-
-const context = inject(DROPDOWN_CONTEXT_KEY)
-
-if (!context) {
-    throw new Error("DropdownMenuContent must be used within a DropdownMenu component")
-}
-
-const {
-    is_open,
-    content_ref,
-    dropdown_id,
-    position_styles,
-    handleContentKeyDown
-} = context
-
-const style_adapter = useStyleAdapter()
-const content_element = ref<HTMLElement | null>(null)
-
-watchEffect(() => {
-    content_ref.value = content_element.value
-})
-
-watch(is_open, async (open) => {
-    if (open) {
-        await nextTick()
-        content_element.value?.focus()
-    }
-})
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    const state: DropdownState = {
-        is_open: is_open.value
-    }
-    return style_adapter.getClasses("dropdown", state)
-})
-</script>
-
-<style scoped>
-.dropdown-enter-active,.dropdown-leave-active{transition:opacity .15s ease,transform .15s ease}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:scale(.95)}
-</style>