@soave/ui 0.2.2 → 0.3.1

package/dist/components/ui/Textarea.vue

@@ -1,73 +0,0 @@
-<template>
-    <textarea
-        :id="id"
-        :class="[computed_classes, props.class]"
-        :disabled="composable.is_disabled.value"
-        :readonly="composable.is_readonly.value"
-        :placeholder="placeholder"
-        :rows="rows"
-        :value="modelValue"
-        v-bind="composable.aria_attributes.value"
-        @input="handleInput"
-        @focus="composable.handleFocus"
-        @blur="handleBlur"
-    />
-</template>
-
-<script setup lang="ts">
-import { toRef, computed } from "vue"
-import { useTextarea } from "../../composables/useTextarea"
-import { useStyleAdapter, useUI } from "../../composables/useUIConfig"
-import type { TextareaProps } from "../../types/textarea"
-import type { TextareaState } from "../../types/composables"
-
-interface Props extends TextareaProps {
-    id?: string
-    modelValue?: string
-    class?: string
-    unstyled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    rows: 3,
-    resize: "vertical",
-    disabled: false,
-    readonly: false,
-    unstyled: false
-})
-
-const emit = defineEmits<{
-    "update:modelValue": [value: string]
-    blur: [event: FocusEvent]
-}>()
-
-const ui_config = useUI("input")
-const style_adapter = useStyleAdapter()
-const composable = useTextarea(toRef(() => props))
-
-// StyleAdapterからクラスを取得
-const computed_classes = computed(() => {
-    if (props.unstyled) {
-        return ""
-    }
-
-    const state: TextareaState = {
-        size: props.size ?? ui_config.default_size,
-        disabled: composable.is_disabled.value,
-        readonly: composable.is_readonly.value,
-        error: props.error
-    }
-
-    return style_adapter.getClasses("textarea", state)
-})
-
-const handleInput = (event: Event) => {
-    const target = event.target as HTMLTextAreaElement
-    emit("update:modelValue", target.value)
-}
-
-const handleBlur = (event: FocusEvent) => {
-    composable.handleBlur()
-    emit("blur", event)
-}
-</script>

package/dist/components/ui/Toast.vue

@@ -1,116 +0,0 @@
-<template>
-    <div
-        :class="[computed_classes, props.class]"
-        :role="aria_role"
-        :aria-live="aria_live"
-        aria-atomic="true"
-    >
-        <div class="flex-1 space-y-1">
-            <div v-if="title" :class="title_classes">
-                {{ title }}
-            </div>
-            <div v-if="description" :class="description_classes">
-                {{ description }}
-            </div>
-        </div>
-
-        <div v-if="action || dismissible" class="flex items-center gap-2 ml-4">
-            <button
-                v-if="action"
-                type="button"
-                :class="action_classes"
-                @click="action.onClick"
-            >
-                {{ action.label }}
-            </button>
-
-            <button
-                v-if="dismissible"
-                type="button"
-                :class="dismiss_classes"
-                aria-label="Dismiss"
-                @click="emit('dismiss')"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    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>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { ToastVariant, ToastAction } from "../../types/toast"
-import type { ToastState } from "../../types/composables"
-
-export interface Props {
-    title?: string
-    description?: string
-    variant?: ToastVariant
-    dismissible?: boolean
-    action?: ToastAction
-    class?: string
-    unstyled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    variant: "default",
-    dismissible: true,
-    unstyled: false
-})
-
-const emit = defineEmits<{
-    dismiss: []
-}>()
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    const state: ToastState = {
-        variant: props.variant
-    }
-    return style_adapter.getClasses("toast", state)
-})
-
-const title_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("toast-title", {})
-})
-
-const description_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("toast-description", {})
-})
-
-const action_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("toast-action", {})
-})
-
-const dismiss_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("toast-dismiss", {})
-})
-
-const aria_role = computed(() => {
-    return props.variant === "error" ? "alert" : "status"
-})
-
-const aria_live = computed(() => {
-    return props.variant === "error" ? "assertive" : "polite"
-})
-</script>

package/dist/components/ui/Toaster.vue

@@ -1,76 +0,0 @@
-<template>
-    <Teleport to="body">
-        <div
-            :class="[computed_classes, props.class]"
-            aria-label="Notifications"
-        >
-            <TransitionGroup
-                name="toast"
-                tag="div"
-                class="flex flex-col gap-2"
-            >
-                <Toast
-                    v-for="toast in visible_toasts"
-                    :key="toast.id"
-                    :title="toast.title"
-                    :description="toast.description"
-                    :variant="toast.variant"
-                    :dismissible="toast.dismissible"
-                    :action="toast.action"
-                    :unstyled="unstyled"
-                    @dismiss="handleDismiss(toast.id)"
-                />
-            </TransitionGroup>
-        </div>
-    </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watchEffect } from "vue"
-import { useStyleAdapter } from "../../composables"
-import { useToast } from "../../composables/useToast"
-import Toast from "./Toast.vue"
-import type { ToastPosition, ToastItem } from "../../types/toast"
-
-export interface Props {
-    position?: ToastPosition
-    max_toasts?: number
-    gap?: number
-    class?: string
-    unstyled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    position: "bottom-right",
-    max_toasts: 5,
-    gap: 8,
-    unstyled: false
-})
-
-const { toasts, dismiss } = useToast()
-const style_adapter = useStyleAdapter()
-
-const internal_toasts = ref<ToastItem[]>([])
-
-watchEffect(() => {
-    internal_toasts.value = [...toasts]
-})
-
-const visible_toasts = computed(() => {
-    const sorted = [...internal_toasts.value].sort((a, b) => b.created_at - a.created_at)
-    return sorted.slice(0, props.max_toasts)
-})
-
-const handleDismiss = (id: string): void => {
-    dismiss(id)
-}
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("toaster", { position: props.position })
-})
-</script>
-
-<style scoped>
-.toast-enter-active,.toast-leave-active{transition:all .3s ease}.toast-enter-from,.toast-leave-to{opacity:0;transform:translateX(100%)}.toast-move{transition:transform .3s ease}
-</style>

package/dist/components/ui/Tooltip.vue

@@ -1,41 +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 { useTooltip } from "../../composables/useTooltip"
-import type { TooltipSide, TooltipAlign } from "../../types/tooltip"
-import { TOOLTIP_CONTEXT_KEY } from "../../types/tooltip"
-
-interface Props {
-    side?: TooltipSide
-    align?: TooltipAlign
-    delay_duration?: number
-    skip_delay_duration?: number
-    disabled?: boolean
-    class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    side: "top",
-    align: "center",
-    delay_duration: 200,
-    skip_delay_duration: 100,
-    disabled: false
-})
-
-const tooltip_props = ref({
-    side: props.side,
-    align: props.align,
-    delay_duration: props.delay_duration,
-    skip_delay_duration: props.skip_delay_duration,
-    disabled: props.disabled
-})
-
-const tooltip = useTooltip(tooltip_props as Ref<typeof tooltip_props.value>)
-
-provide(TOOLTIP_CONTEXT_KEY, tooltip)
-</script>

package/dist/components/ui/TooltipContent.vue

@@ -1,71 +0,0 @@
-<template>
-    <Transition name="tooltip">
-        <div
-            v-if="is_open"
-            ref="content_element"
-            :id="tooltip_id"
-            role="tooltip"
-            :style="position_styles"
-            :class="[computed_classes, props.class]"
-            @mouseenter="handleContentMouseEnter"
-            @mouseleave="handleContentMouseLeave"
-        >
-            <slot />
-        </div>
-    </Transition>
-</template>
-
-<script setup lang="ts">
-import { inject, ref, computed, watchEffect } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { TooltipContentProps } from "../../types/tooltip"
-import { TOOLTIP_CONTEXT_KEY } from "../../types/tooltip"
-import type { TooltipState } from "../../types/composables"
-
-const props = withDefaults(defineProps<TooltipContentProps>(), {
-    unstyled: false
-})
-
-const context = inject(TOOLTIP_CONTEXT_KEY)
-
-if (!context) {
-    throw new Error("TooltipContent must be used within a Tooltip component")
-}
-
-const {
-    is_open,
-    content_ref,
-    tooltip_id,
-    position_styles,
-    handleMouseEnter,
-    handleMouseLeave
-} = context
-
-const style_adapter = useStyleAdapter()
-const content_element = ref<HTMLElement | null>(null)
-
-watchEffect(() => {
-    content_ref.value = content_element.value
-})
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    const state: TooltipState = {
-        is_open: is_open.value,
-        side: "top"
-    }
-    return style_adapter.getClasses("tooltip", state)
-})
-
-const handleContentMouseEnter = (): void => {
-    handleMouseEnter()
-}
-
-const handleContentMouseLeave = (): void => {
-    handleMouseLeave()
-}
-</script>
-
-<style scoped>
-.tooltip-enter-active,.tooltip-leave-active{transition:opacity .15s ease,transform .15s ease}.tooltip-enter-from,.tooltip-leave-to{opacity:0;transform:scale(.95)}
-</style>

package/dist/components/ui/TooltipTrigger.vue

@@ -1,39 +0,0 @@
-<template>
-    <span
-        ref="trigger_element"
-        :aria-describedby="is_open ? tooltip_id : undefined"
-        @mouseenter="handleMouseEnter"
-        @mouseleave="handleMouseLeave"
-        @focus="handleFocus"
-        @blur="handleBlur"
-    >
-        <slot />
-    </span>
-</template>
-
-<script setup lang="ts">
-import { inject, ref, watchEffect } from "vue"
-import { TOOLTIP_CONTEXT_KEY } from "../../types/tooltip"
-
-const context = inject(TOOLTIP_CONTEXT_KEY)
-
-if (!context) {
-    throw new Error("TooltipTrigger must be used within a Tooltip component")
-}
-
-const {
-    is_open,
-    trigger_ref,
-    tooltip_id,
-    handleMouseEnter,
-    handleMouseLeave,
-    handleFocus,
-    handleBlur
-} = context
-
-const trigger_element = ref<HTMLElement | null>(null)
-
-watchEffect(() => {
-    trigger_ref.value = trigger_element.value
-})
-</script>

package/dist/components/ui/UIProvider.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { DeepPartial } from "../../types/utils"
-import type { UIConfig } from "../../types/config"
-import type { StyleAdapter } from "../../adapters/types"
-import { useUIProvider } from "../../composables/useUIConfig"
-import { tailwindAdapter } from "../../adapters/tailwind"
-
-interface UIProviderProps {
-    config?: DeepPartial<UIConfig>
-    adapter?: StyleAdapter
-}
-
-const props = withDefaults(defineProps<UIProviderProps>(), {
-    config: () => ({}),
-    adapter: () => tailwindAdapter
-})
-
-useUIProvider(props.config, props.adapter)
-</script>
-
-<template>
-    <slot />
-</template>

package/dist/components/ui/index.d.ts

@@ -1,52 +0,0 @@
-export { default as UIProvider } from "./UIProvider.vue";
-export { default as Button } from "./Button.vue";
-export { default as Input } from "./Input.vue";
-export { default as Card } from "./Card.vue";
-export { default as CardHeader } from "./CardHeader.vue";
-export { default as CardTitle } from "./CardTitle.vue";
-export { default as CardDescription } from "./CardDescription.vue";
-export { default as CardContent } from "./CardContent.vue";
-export { default as CardFooter } from "./CardFooter.vue";
-export { default as Alert } from "./Alert.vue";
-export { default as AlertTitle } from "./AlertTitle.vue";
-export { default as AlertDescription } from "./AlertDescription.vue";
-export { default as Dialog } from "./Dialog.vue";
-export { default as DialogHeader } from "./DialogHeader.vue";
-export { default as DialogTitle } from "./DialogTitle.vue";
-export { default as DialogDescription } from "./DialogDescription.vue";
-export { default as DialogFooter } from "./DialogFooter.vue";
-export { default as FormField } from "./FormField.vue";
-export { default as FormLabel } from "./FormLabel.vue";
-export { default as FormInput } from "./FormInput.vue";
-export { default as FormError } from "./FormError.vue";
-export { default as Checkbox } from "./Checkbox.vue";
-export { default as RadioGroup } from "./RadioGroup.vue";
-export { default as RadioItem } from "./RadioItem.vue";
-export { default as Switch } from "./Switch.vue";
-export { default as Textarea } from "./Textarea.vue";
-export { default as Select } from "./Select.vue";
-export { default as SelectTrigger } from "./SelectTrigger.vue";
-export { default as SelectValue } from "./SelectValue.vue";
-export { default as SelectContent } from "./SelectContent.vue";
-export { default as SelectItem } from "./SelectItem.vue";
-export { default as FileInput } from "./FileInput.vue";
-export { default as FormTextarea } from "./FormTextarea.vue";
-export { default as Toast } from "./Toast.vue";
-export { default as Toaster } from "./Toaster.vue";
-export { default as Tooltip } from "./Tooltip.vue";
-export { default as TooltipTrigger } from "./TooltipTrigger.vue";
-export { default as TooltipContent } from "./TooltipContent.vue";
-export { default as Popover } from "./Popover.vue";
-export { default as PopoverTrigger } from "./PopoverTrigger.vue";
-export { default as PopoverContent } from "./PopoverContent.vue";
-export { default as DropdownMenu } from "./DropdownMenu.vue";
-export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
-export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
-export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
-export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
-export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
-export { default as Sheet } from "./Sheet.vue";
-export { default as SheetHeader } from "./SheetHeader.vue";
-export { default as SheetTitle } from "./SheetTitle.vue";
-export { default as SheetDescription } from "./SheetDescription.vue";
-export { default as SheetFooter } from "./SheetFooter.vue";

package/dist/components/ui/index.mjs

@@ -1,52 +0,0 @@
-export { default as UIProvider } from "./UIProvider.vue";
-export { default as Button } from "./Button.vue";
-export { default as Input } from "./Input.vue";
-export { default as Card } from "./Card.vue";
-export { default as CardHeader } from "./CardHeader.vue";
-export { default as CardTitle } from "./CardTitle.vue";
-export { default as CardDescription } from "./CardDescription.vue";
-export { default as CardContent } from "./CardContent.vue";
-export { default as CardFooter } from "./CardFooter.vue";
-export { default as Alert } from "./Alert.vue";
-export { default as AlertTitle } from "./AlertTitle.vue";
-export { default as AlertDescription } from "./AlertDescription.vue";
-export { default as Dialog } from "./Dialog.vue";
-export { default as DialogHeader } from "./DialogHeader.vue";
-export { default as DialogTitle } from "./DialogTitle.vue";
-export { default as DialogDescription } from "./DialogDescription.vue";
-export { default as DialogFooter } from "./DialogFooter.vue";
-export { default as FormField } from "./FormField.vue";
-export { default as FormLabel } from "./FormLabel.vue";
-export { default as FormInput } from "./FormInput.vue";
-export { default as FormError } from "./FormError.vue";
-export { default as Checkbox } from "./Checkbox.vue";
-export { default as RadioGroup } from "./RadioGroup.vue";
-export { default as RadioItem } from "./RadioItem.vue";
-export { default as Switch } from "./Switch.vue";
-export { default as Textarea } from "./Textarea.vue";
-export { default as Select } from "./Select.vue";
-export { default as SelectTrigger } from "./SelectTrigger.vue";
-export { default as SelectValue } from "./SelectValue.vue";
-export { default as SelectContent } from "./SelectContent.vue";
-export { default as SelectItem } from "./SelectItem.vue";
-export { default as FileInput } from "./FileInput.vue";
-export { default as FormTextarea } from "./FormTextarea.vue";
-export { default as Toast } from "./Toast.vue";
-export { default as Toaster } from "./Toaster.vue";
-export { default as Tooltip } from "./Tooltip.vue";
-export { default as TooltipTrigger } from "./TooltipTrigger.vue";
-export { default as TooltipContent } from "./TooltipContent.vue";
-export { default as Popover } from "./Popover.vue";
-export { default as PopoverTrigger } from "./PopoverTrigger.vue";
-export { default as PopoverContent } from "./PopoverContent.vue";
-export { default as DropdownMenu } from "./DropdownMenu.vue";
-export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
-export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
-export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
-export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
-export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
-export { default as Sheet } from "./Sheet.vue";
-export { default as SheetHeader } from "./SheetHeader.vue";
-export { default as SheetTitle } from "./SheetTitle.vue";
-export { default as SheetDescription } from "./SheetDescription.vue";
-export { default as SheetFooter } from "./SheetFooter.vue";