@soave/ui 0.2.1 → 0.3.0

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>

package/dist/components/ui/DropdownMenuItem.vue

@@ -1,71 +0,0 @@
-<template>
-    <div
-        role="menuitem"
-        :tabindex="disabled ? -1 : 0"
-        :class="[computed_classes, props.class]"
-        :aria-disabled="disabled"
-        :data-highlighted="is_active ? '' : undefined"
-        :data-disabled="disabled ? '' : undefined"
-        @click="handleClick"
-        @mouseenter="handleMouseEnter"
-        @keydown.enter="handleClick"
-        @keydown.space.prevent="handleClick"
-    >
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { inject, computed, onMounted } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { DropdownItemProps } from "../../types/dropdown"
-import { DROPDOWN_CONTEXT_KEY } from "../../types/dropdown"
-
-const props = withDefaults(defineProps<DropdownItemProps>(), {
-    disabled: false,
-    destructive: false,
-    unstyled: false
-})
-
-const emit = defineEmits<{
-    select: []
-}>()
-
-const context = inject(DROPDOWN_CONTEXT_KEY)
-
-if (!context) {
-    throw new Error("DropdownMenuItem must be used within a DropdownMenu component")
-}
-
-const { active_item_index, close, registerItem, setActiveItem } = context
-const style_adapter = useStyleAdapter()
-
-let item_index = -1
-
-onMounted(() => {
-    if (!props.disabled) {
-        item_index = registerItem()
-    }
-})
-
-const is_active = computed(() => {
-    return active_item_index.value === item_index && !props.disabled
-})
-
-const handleClick = (): void => {
-    if (props.disabled) return
-    emit("select")
-    close()
-}
-
-const handleMouseEnter = (): void => {
-    if (!props.disabled && item_index >= 0) {
-        setActiveItem(item_index)
-    }
-}
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("dropdown-item", {})
-})
-</script>

package/dist/components/ui/DropdownMenuLabel.vue

@@ -1,20 +0,0 @@
-<template>
-    <div
-        :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
-    >
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { cn } from "../../utils/cn"
-
-export interface Props {
-    inset?: boolean
-    class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    inset: false
-})
-</script>

package/dist/components/ui/DropdownMenuSeparator.vue

@@ -1,16 +0,0 @@
-<template>
-    <div
-        role="separator"
-        :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
-    />
-</template>
-
-<script setup lang="ts">
-import { cn } from "../../utils/cn"
-
-export interface Props {
-    class?: string
-}
-
-const props = defineProps<Props>()
-</script>

package/dist/components/ui/DropdownMenuTrigger.vue

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

package/dist/components/ui/FileInput.vue

@@ -1,153 +0,0 @@
-<template>
-    <div :class="composable.base_classes.value">
-        <input
-            ref="input_ref"
-            type="file"
-            :accept="accept"
-            :multiple="multiple"
-            :disabled="composable.is_disabled.value"
-            class="sr-only"
-            @change="handleChange"
-        />
-
-        <div
-            :class="composable.dropzone_classes.value"
-            v-bind="composable.aria_attributes.value"
-            @click="composable.openFilePicker"
-            @dragenter="composable.handleDragEnter"
-            @dragleave="composable.handleDragLeave"
-            @dragover.prevent
-            @drop="composable.handleDrop"
-        >
-            <slot name="dropzone">
-                <svg
-                    class="w-10 h-10 mb-3 text-muted-foreground"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                >
-                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                    <polyline points="17 8 12 3 7 8" />
-                    <line x1="12" y1="3" x2="12" y2="15" />
-                </svg>
-                <p class="text-sm text-muted-foreground">
-                    <span class="font-semibold text-primary">クリック</span>
-                    または ドラッグ&ドロップ
-                </p>
-                <p v-if="accept" class="mt-1 text-xs text-muted-foreground">
-                    {{ accept }}
-                </p>
-            </slot>
-        </div>
-
-        <p
-            v-if="composable.error.value"
-            class="mt-2 text-sm text-destructive"
-        >
-            {{ composable.error.value }}
-        </p>
-
-        <ul
-            v-if="composable.files.value.length > 0"
-            class="mt-4 space-y-2"
-        >
-            <li
-                v-for="(file, index) in composable.files.value"
-                :key="file.name + index"
-                class="flex items-center gap-3 p-2 rounded-md border bg-muted/50"
-            >
-                <img
-                    v-if="file.preview_url"
-                    :src="file.preview_url"
-                    :alt="file.name"
-                    class="w-10 h-10 object-cover rounded"
-                />
-                <svg
-                    v-else
-                    class="w-10 h-10 text-muted-foreground"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                >
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                    <polyline points="14 2 14 8 20 8" />
-                </svg>
-                <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium truncate">{{ file.name }}</p>
-                    <p class="text-xs text-muted-foreground">
-                        {{ formatSize(file.size) }}
-                    </p>
-                </div>
-                <button
-                    type="button"
-                    class="p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
-                    @click.stop="composable.removeFile(index)"
-                >
-                    <svg
-                        class="w-4 h-4"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                    >
-                        <line x1="18" y1="6" x2="6" y2="18" />
-                        <line x1="6" y1="6" x2="18" y2="18" />
-                    </svg>
-                </button>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, toRef, watch } from "vue"
-import { useFileInput } from "../../composables/useFileInput"
-import type { FileInputProps, FileInfo } from "../../types/file-input"
-
-interface Props extends FileInputProps {
-    modelValue?: File | File[] | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    multiple: false,
-    disabled: false
-})
-
-const emit = defineEmits<{
-    "update:modelValue": [value: File | File[] | null]
-}>()
-
-const input_ref = ref<HTMLInputElement | null>(null)
-const composable = useFileInput(toRef(() => props), input_ref)
-
-const formatSize = (bytes: number): string => {
-    if (bytes < 1024) return `${bytes}B`
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`
-    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`
-}
-
-const handleChange = (event: Event) => {
-    const target = event.target as HTMLInputElement
-    composable.handleFiles(target.files)
-    target.value = ""
-}
-
-watch(
-    () => composable.files.value,
-    (new_files: FileInfo[]) => {
-        if (props.multiple) {
-            emit("update:modelValue", new_files.map(f => f.file))
-        } else {
-            emit("update:modelValue", new_files[0]?.file ?? null)
-        }
-    },
-    { deep: true }
-)
-</script>

package/dist/components/ui/FormError.vue

@@ -1,20 +0,0 @@
-<template>
-    <p
-        v-if="$slots.default"
-        :id="id"
-        :class="cn('text-sm font-medium text-destructive', props.class)"
-    >
-        <slot />
-    </p>
-</template>
-
-<script setup lang="ts">
-import { cn } from "../../utils/cn"
-import type { FormErrorProps } from "../../types/form"
-
-interface Props extends FormErrorProps {
-    id?: string
-}
-
-const props = defineProps<Props>()
-</script>

package/dist/components/ui/FormField.vue

@@ -1,12 +0,0 @@
-<template>
-    <div :class="cn('space-y-2', props.class)">
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { cn } from "../../utils/cn"
-import type { FormFieldProps } from "../../types/form"
-
-const props = defineProps<FormFieldProps>()
-</script>

package/dist/components/ui/FormInput.vue

@@ -1,46 +0,0 @@
-<template>
-    <Input
-        :id="id"
-        :type="type"
-        :size="size"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
-        :error="error"
-        :error_id="error_id"
-        :model-value="modelValue"
-        :class="props.class"
-        @update:model-value="emit('update:modelValue', $event)"
-        @blur="emit('blur', $event)"
-    />
-</template>
-
-<script setup lang="ts">
-import Input from "./Input.vue"
-import type { InputType, InputSize } from "../../types/input"
-
-interface Props {
-    id?: string
-    type?: InputType
-    size?: InputSize
-    placeholder?: string
-    disabled?: boolean
-    readonly?: boolean
-    error?: string
-    error_id?: string
-    modelValue?: string | number
-    class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    type: "text",
-    size: "md",
-    disabled: false,
-    readonly: false
-})
-
-const emit = defineEmits<{
-    "update:modelValue": [value: string | number]
-    blur: [event: FocusEvent]
-}>()
-</script>

package/dist/components/ui/FormLabel.vue

@@ -1,19 +0,0 @@
-<template>
-    <label
-        :for="props.for"
-        :class="cn(
-            'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-            props.class
-        )"
-    >
-        <slot />
-        <span v-if="props.required" class="text-destructive ml-1">*</span>
-    </label>
-</template>
-
-<script setup lang="ts">
-import { cn } from "../../utils/cn"
-import type { FormLabelProps } from "../../types/form"
-
-const props = defineProps<FormLabelProps>()
-</script>

package/dist/components/ui/FormTextarea.vue

@@ -1,39 +0,0 @@
-<template>
-    <Textarea
-        :id="id"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
-        :error="error"
-        :error_id="error_id"
-        :rows="rows"
-        :resize="resize"
-        :model-value="modelValue"
-        :class="props.class"
-        @update:model-value="emit('update:modelValue', $event)"
-        @blur="emit('blur', $event)"
-    />
-</template>
-
-<script setup lang="ts">
-import Textarea from "./Textarea.vue"
-import type { TextareaProps } from "../../types/textarea"
-
-interface Props extends TextareaProps {
-    id?: string
-    modelValue?: string
-    class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    rows: 3,
-    resize: "vertical",
-    disabled: false,
-    readonly: false
-})
-
-const emit = defineEmits<{
-    "update:modelValue": [value: string]
-    blur: [event: FocusEvent]
-}>()
-</script>

package/dist/components/ui/Input.vue

@@ -1,72 +0,0 @@
-<template>
-    <input
-        :id="id"
-        :type="type"
-        :class="[computed_classes, props.class]"
-        :disabled="composable.is_disabled.value"
-        :readonly="composable.is_readonly.value"
-        :placeholder="placeholder"
-        :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 { useInput } from "../../composables/useInput"
-import { useStyleAdapter, useUI } from "../../composables/useUIConfig"
-import type { InputProps, InputType } from "../../types/input"
-import type { InputState } from "../../types/composables"
-
-interface Props extends InputProps {
-    id?: string
-    modelValue?: string | number
-    class?: string
-    unstyled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    type: "text" as InputType,
-    disabled: false,
-    readonly: false,
-    unstyled: false
-})
-
-const emit = defineEmits<{
-    "update:modelValue": [value: string | number]
-    blur: [event: FocusEvent]
-}>()
-
-const ui_config = useUI("input")
-const style_adapter = useStyleAdapter()
-const composable = useInput(toRef(() => props))
-
-// StyleAdapterからクラスを取得
-const computed_classes = computed(() => {
-    if (props.unstyled) {
-        return ""
-    }
-
-    const state: InputState = {
-        size: props.size ?? ui_config.default_size,
-        disabled: composable.is_disabled.value,
-        readonly: composable.is_readonly.value,
-        error: props.error
-    }
-
-    return style_adapter.getClasses("input", state)
-})
-
-const handleInput = (event: Event) => {
-    const target = event.target as HTMLInputElement
-    emit("update:modelValue", target.value)
-}
-
-const handleBlur = (event: FocusEvent) => {
-    composable.handleBlur()
-    emit("blur", event)
-}
-</script>