@soave/ui 0.1.0 → 0.2.1

package/dist/components/ui/Card.vue

@@ -1,15 +1,39 @@
 <template>
-    <div :class="composable.base_classes.value">
+    <div :class="[computed_classes, props.class]">
         <slot />
     </div>
 </template>
 
 <script setup lang="ts">
-import { toRef } from "vue"
+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"
 
-const props = defineProps<CardProps>()
+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,12 +1,22 @@
 <template>
-    <div :class="cn('p-6 pt-0', props.class)">
+    <div :class="[computed_classes, props.class]">
         <slot />
     </div>
 </template>
 
 <script setup lang="ts">
-import { cn } from "../../utils/cn"
+import { computed } from "vue"
+import { useStyleAdapter } from "../../composables"
 import type { CardContentProps } from "../../types/card"
 
-const props = defineProps<CardContentProps>()
+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,12 +1,22 @@
 <template>
-    <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <p :class="[computed_classes, props.class]">
         <slot />
     </p>
 </template>
 
 <script setup lang="ts">
-import { cn } from "../../utils/cn"
+import { computed } from "vue"
+import { useStyleAdapter } from "../../composables"
 import type { CardDescriptionProps } from "../../types/card"
 
-const props = defineProps<CardDescriptionProps>()
+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,12 +1,22 @@
 <template>
-    <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <div :class="[computed_classes, props.class]">
         <slot />
     </div>
 </template>
 
 <script setup lang="ts">
-import { cn } from "../../utils/cn"
+import { computed } from "vue"
+import { useStyleAdapter } from "../../composables"
 import type { CardFooterProps } from "../../types/card"
 
-const props = defineProps<CardFooterProps>()
+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,12 +1,22 @@
 <template>
-    <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+    <div :class="[computed_classes, props.class]">
         <slot />
     </div>
 </template>
 
 <script setup lang="ts">
-import { cn } from "../../utils/cn"
+import { computed } from "vue"
+import { useStyleAdapter } from "../../composables"
 import type { CardHeaderProps } from "../../types/card"
 
-const props = defineProps<CardHeaderProps>()
+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,12 +1,22 @@
 <template>
-    <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
+    <h3 :class="[computed_classes, props.class]">
         <slot />
     </h3>
 </template>
 
 <script setup lang="ts">
-import { cn } from "../../utils/cn"
+import { computed } from "vue"
+import { useStyleAdapter } from "../../composables"
 import type { CardTitleProps } from "../../types/card"
 
-const props = defineProps<CardTitleProps>()
+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,7 +1,7 @@
 <template>
     <button
         type="button"
-        :class="composable.base_classes.value"
+        :class="[computed_classes, props.class]"
         :disabled="composable.is_disabled.value"
         :data-state="dataState"
         v-bind="composable.aria_attributes.value"
@@ -41,25 +41,46 @@
 <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
+    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"

package/dist/components/ui/Dialog.vue

@@ -6,18 +6,18 @@
                 class="fixed inset-0 z-50 flex items-center justify-center"
             >
                 <div
-                    class="fixed inset-0 bg-black/80"
+                    :class="overlay_classes"
                     @click="handleOverlayClick"
                 />
                 <div
-                    class="relative z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg sm:rounded-lg"
+                    :class="[computed_classes, props.class]"
                     role="dialog"
                     aria-modal="true"
                 >
                     <slot />
                     <button
                         v-if="show_close_button"
-                        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+                        :class="close_button_classes"
                         @click="close"
                     >
                         <svg
@@ -44,24 +44,29 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide, type InjectionKey } from "vue"
+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 Props {
-    open?: boolean
-    modal?: boolean
-    showCloseButton?: boolean
+interface DialogComponentProps extends DialogProps {
+    class?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<DialogComponentProps>(), {
     open: false,
     modal: true,
-    showCloseButton: 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)
@@ -69,6 +74,24 @@ const is_open = computed({
 
 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
 }
@@ -79,13 +102,7 @@ const handleOverlayClick = () => {
     }
 }
 
-export interface DialogContext {
-    close: () => void
-}
-
-export const DialogKey: InjectionKey<DialogContext> = Symbol("dialog")
-
-provide(DialogKey, { close })
+provide(DIALOG_KEY, { close })
 </script>
 
 <style scoped>

package/dist/components/ui/DialogDescription.vue

@@ -1,12 +1,22 @@
 <template>
-    <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <p :class="[computed_classes, props.class]">
         <slot />
     </p>
 </template>
 
 <script setup lang="ts">
-import { cn } from "../../utils/cn"
+import { computed } from "vue"
+import { useStyleAdapter } from "../../composables"
 import type { DialogDescriptionProps } from "../../types/dialog"
 
-const props = defineProps<DialogDescriptionProps>()
+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,12 +1,22 @@
 <template>
-    <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', props.class)">
+    <div :class="[computed_classes, props.class]">
         <slot />
     </div>
 </template>
 
 <script setup lang="ts">
-import { cn } from "../../utils/cn"
+import { computed } from "vue"
+import { useStyleAdapter } from "../../composables"
 import type { DialogFooterProps } from "../../types/dialog"
 
-const props = defineProps<DialogFooterProps>()
+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,12 +1,22 @@
 <template>
-    <div :class="cn('flex flex-col space-y-1.5 text-center sm:text-left', props.class)">
+    <div :class="[computed_classes, props.class]">
         <slot />
     </div>
 </template>
 
 <script setup lang="ts">
-import { cn } from "../../utils/cn"
+import { computed } from "vue"
+import { useStyleAdapter } from "../../composables"
 import type { DialogHeaderProps } from "../../types/dialog"
 
-const props = defineProps<DialogHeaderProps>()
+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,12 +1,22 @@
 <template>
-    <h2 :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+    <h2 :class="[computed_classes, props.class]">
         <slot />
     </h2>
 </template>
 
 <script setup lang="ts">
-import { cn } from "../../utils/cn"
+import { computed } from "vue"
+import { useStyleAdapter } from "../../composables"
 import type { DialogTitleProps } from "../../types/dialog"
 
-const props = defineProps<DialogTitleProps>()
+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

@@ -5,11 +5,12 @@
 </template>
 
 <script setup lang="ts">
-import { provide, ref, type InjectionKey, type Ref } from "vue"
-import { useDropdown, type UseDropdownReturn } from "../../composables/useDropdown"
+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"
 
-export interface Props {
+interface Props {
     side?: DropdownSide
     align?: DropdownAlign
     class?: string
@@ -20,8 +21,6 @@ const props = withDefaults(defineProps<Props>(), {
     align: "start"
 })
 
-export const DROPDOWN_CONTEXT_KEY: InjectionKey<UseDropdownReturn> = Symbol("dropdown-context")
-
 const dropdown_props = ref({
     side: props.side,
     align: props.align

package/dist/components/ui/DropdownMenuContent.vue

@@ -7,7 +7,7 @@
             role="menu"
             :aria-labelledby="`${dropdown_id}-trigger`"
             :style="position_styles"
-            :class="cn(base_classes, props.class)"
+            :class="[computed_classes, props.class]"
             tabindex="-1"
             @keydown="handleContentKeyDown"
         >
@@ -17,15 +17,15 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, watchEffect, nextTick, watch } from "vue"
-import { cn } from "../../utils/cn"
-import { DROPDOWN_CONTEXT_KEY } from "./DropdownMenu.vue"
+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"
 
-export interface Props {
-    class?: string
-}
-
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<DropdownContentProps>(), {
+    unstyled: false
+})
 
 const context = inject(DROPDOWN_CONTEXT_KEY)
 
@@ -41,6 +41,7 @@ const {
     handleContentKeyDown
 } = context
 
+const style_adapter = useStyleAdapter()
 const content_element = ref<HTMLElement | null>(null)
 
 watchEffect(() => {
@@ -54,11 +55,13 @@ watch(is_open, async (open) => {
     }
 })
 
-const base_classes = cn(
-    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1",
-    "text-popover-foreground shadow-md outline-none",
-    "animate-in fade-in-0 zoom-in-95"
-)
+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>

package/dist/components/ui/DropdownMenuItem.vue

@@ -2,7 +2,7 @@
     <div
         role="menuitem"
         :tabindex="disabled ? -1 : 0"
-        :class="cn(item_classes, props.class)"
+        :class="[computed_classes, props.class]"
         :aria-disabled="disabled"
         :data-highlighted="is_active ? '' : undefined"
         :data-disabled="disabled ? '' : undefined"
@@ -17,18 +17,14 @@
 
 <script setup lang="ts">
 import { inject, computed, onMounted } from "vue"
-import { cn } from "../../utils/cn"
-import { DROPDOWN_CONTEXT_KEY } from "./DropdownMenu.vue"
+import { useStyleAdapter } from "../../composables"
+import type { DropdownItemProps } from "../../types/dropdown"
+import { DROPDOWN_CONTEXT_KEY } from "../../types/dropdown"
 
-export interface Props {
-    disabled?: boolean
-    destructive?: boolean
-    class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<DropdownItemProps>(), {
     disabled: false,
-    destructive: false
+    destructive: false,
+    unstyled: false
 })
 
 const emit = defineEmits<{
@@ -42,6 +38,7 @@ if (!context) {
 }
 
 const { active_item_index, close, registerItem, setActiveItem } = context
+const style_adapter = useStyleAdapter()
 
 let item_index = -1
 
@@ -67,11 +64,8 @@ const handleMouseEnter = (): void => {
     }
 }
 
-const item_classes = computed(() => cn(
-    "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-    "transition-colors focus:bg-accent focus:text-accent-foreground",
-    "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
-    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-    props.destructive && "text-destructive focus:text-destructive"
-))
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("dropdown-item", {})
+})
 </script>

package/dist/components/ui/DropdownMenuTrigger.vue

@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { inject, ref, watchEffect } from "vue"
-import { DROPDOWN_CONTEXT_KEY } from "./DropdownMenu.vue"
+import { DROPDOWN_CONTEXT_KEY } from "../../types/dropdown"
 
 const context = inject(DROPDOWN_CONTEXT_KEY)
 

package/dist/components/ui/Input.vue

@@ -2,7 +2,7 @@
     <input
         :id="id"
         :type="type"
-        :class="composable.base_classes.value"
+        :class="[computed_classes, props.class]"
         :disabled="composable.is_disabled.value"
         :readonly="composable.is_readonly.value"
         :placeholder="placeholder"
@@ -15,19 +15,24 @@
 </template>
 
 <script setup lang="ts">
-import { toRef } from "vue"
+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
+    readonly: false,
+    unstyled: false
 })
 
 const emit = defineEmits<{
@@ -35,8 +40,26 @@ const emit = defineEmits<{
     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)