@soave/ui 0.2.1 → 0.3.0

package/dist/types/textarea.d.ts

@@ -1,25 +1,38 @@
-import type { ComputedRef, Ref } from "vue";
+import type { ComputedRef, Ref, DeepReadonly } from "vue";
+export type TextareaSize = "sm" | "md" | "lg";
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
 export interface TextareaProps {
+    size?: TextareaSize;
     placeholder?: string;
     disabled?: boolean;
     readonly?: boolean;
     error?: string;
     error_id?: string;
     rows?: number;
-    resize?: "none" | "vertical" | "horizontal" | "both";
+    resize?: TextareaResize;
+}
+/**
+ * テキストエリアの状態（StyleAdapterに渡す用）
+ */
+export interface TextareaState {
+    size: TextareaSize;
+    disabled: boolean;
+    readonly: boolean;
+    has_error: boolean;
+    resize: TextareaResize;
 }
 export interface TextareaAriaAttributes {
     "aria-invalid"?: boolean;
     "aria-describedby"?: string;
     "aria-readonly"?: boolean;
 }
+/**
+ * useTextarea の戻り値（ヘッドレス - スタイル情報なし）
+ */
 export interface TextareaReturn {
-    base_classes: ComputedRef<string>;
+    state: DeepReadonly<ComputedRef<TextareaState>>;
     is_focused: Ref<boolean>;
-    has_error: ComputedRef<boolean>;
-    is_disabled: ComputedRef<boolean>;
-    is_readonly: ComputedRef<boolean>;
-    aria_attributes: ComputedRef<TextareaAriaAttributes>;
+    aria_attributes: DeepReadonly<ComputedRef<TextareaAriaAttributes>>;
     handleFocus: () => void;
     handleBlur: () => void;
 }

package/dist/types/toast.d.ts

@@ -15,7 +15,7 @@ export interface ToastAction {
     label: string;
     onClick: () => void;
 }
-export interface Toast extends Required<Pick<ToastProps, "id" | "variant" | "duration" | "dismissible">> {
+export interface ToastItem extends Required<Pick<ToastProps, "id" | "variant" | "duration" | "dismissible">> {
     title?: string;
     description?: string;
     action?: ToastAction;
@@ -27,7 +27,7 @@ export interface ToasterProps {
     gap?: number;
 }
 export interface ToastReturn {
-    toasts: Toast[];
+    toasts: ToastItem[];
     add: (props: ToastProps) => string;
     dismiss: (id: string) => void;
     dismissAll: () => void;

package/dist/types/tooltip.d.ts

@@ -1,3 +1,5 @@
+import type { InjectionKey } from "vue";
+import type { UseTooltipReturn } from "../composables/useTooltip";
 export type TooltipSide = "top" | "right" | "bottom" | "left";
 export type TooltipAlign = "start" | "center" | "end";
 export interface TooltipProps {
@@ -29,3 +31,4 @@ export interface TooltipAriaAttributes {
 export interface TooltipTriggerAriaAttributes {
     "aria-describedby": string;
 }
+export declare const TOOLTIP_CONTEXT_KEY: InjectionKey<UseTooltipReturn>;

package/dist/types/tooltip.mjs

@@ -0,0 +1 @@
+export const TOOLTIP_CONTEXT_KEY = Symbol("tooltip-context");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@soave/ui",
-    "version": "0.2.1",
+    "version": "0.3.0",
     "description": "soave UI - Composable-First UI Framework for Vue 3 / Nuxt 4",
     "author": "Arata Ouchi (Original SIN Architecture)",
     "license": "MIT",
@@ -22,17 +22,9 @@
             "import": "./dist/composables/index.mjs",
             "types": "./dist/composables/index.d.ts"
         },
-        "./components": {
-            "import": "./dist/components/ui/index.mjs",
-            "types": "./dist/components/ui/index.d.ts"
-        },
         "./adapters": {
             "import": "./dist/adapters/index.mjs",
             "types": "./dist/adapters/index.d.ts"
-        },
-        "./styles/css-variables.css": {
-            "import": "./dist/styles/css-variables.css",
-            "default": "./dist/styles/css-variables.css"
         }
     },
     "files": [

package/dist/components/ui/Alert.vue

@@ -1,41 +0,0 @@
-<template>
-    <div
-        role="alert"
-        :class="[computed_classes, props.class]"
-    >
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-import { useUI, useStyleAdapter } from "../../composables/useUIConfig"
-import type { AlertVariant } from "../../types/alert"
-import type { AlertState } from "../../types/composables"
-
-interface Props {
-    variant?: AlertVariant
-    class?: string
-    unstyled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    unstyled: false
-})
-
-const ui_config = useUI("alert")
-const style_adapter = useStyleAdapter()
-
-// StyleAdapterからクラスを取得
-const computed_classes = computed(() => {
-    if (props.unstyled) {
-        return ""
-    }
-
-    const state: AlertState = {
-        variant: props.variant ?? ui_config.default_variant
-    }
-
-    return style_adapter.getClasses("alert", state)
-})
-</script>

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

package/dist/components/ui/AlertTitle.vue

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

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>