@soave/ui 0.1.0 → 0.2.0

package/dist/components/ui/RadioGroup.vue

@@ -1,18 +1,15 @@
 <template>
     <div
         role="radiogroup"
-        :class="cn(
-            'grid gap-2',
-            orientation === 'horizontal' && 'grid-flow-col'
-        )"
+        :class="[computed_classes, props.class]"
     >
         <slot />
     </div>
 </template>
 
 <script setup lang="ts">
-import { provide, toRef } from "vue"
-import { cn } from "../../utils/cn"
+import { provide, toRef, computed } from "vue"
+import { useStyleAdapter } from "../../composables"
 import type { RadioGroupProps, RadioGroupContext } from "../../types/radio"
 import { RADIO_GROUP_KEY } from "../../types/radio"
 
@@ -23,13 +20,21 @@ interface Props extends RadioGroupProps {
 const props = withDefaults(defineProps<Props>(), {
     modelValue: "",
     disabled: false,
-    orientation: "vertical"
+    orientation: "vertical",
+    unstyled: false
 })
 
 const emit = defineEmits<{
     "update:modelValue": [value: string]
 }>()
 
+const style_adapter = useStyleAdapter()
+
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("radio-group", { orientation: props.orientation })
+})
+
 const context: RadioGroupContext = {
     model_value: toRef(() => props.modelValue),
     disabled: toRef(() => props.disabled),

package/dist/components/ui/RadioItem.vue

@@ -1,14 +1,16 @@
 <template>
     <button
         type="button"
-        :class="composable.base_classes.value"
-        :disabled="composable.is_disabled.value"
-        v-bind="composable.aria_attributes.value"
+        :class="[computed_classes, props.class]"
+        :disabled="is_disabled"
+        role="radio"
+        :aria-checked="is_checked"
+        :aria-disabled="is_disabled || undefined"
         @click="handleClick"
     >
         <span
-            v-if="composable.is_checked.value"
-            :class="composable.indicator_classes.value"
+            v-if="is_checked"
+            :class="indicator_classes"
         >
             <svg
                 class="fill-current"
@@ -21,20 +23,39 @@
 </template>
 
 <script setup lang="ts">
-import { inject, toRef } from "vue"
-import { useRadioItem } from "../../composables/useRadio"
+import { inject, computed } from "vue"
+import { useStyleAdapter } from "../../composables"
 import type { RadioItemProps, RadioGroupContext } from "../../types/radio"
 import { RADIO_GROUP_KEY } from "../../types/radio"
+import type { RadioState } from "../../types/composables"
 
 const props = withDefaults(defineProps<RadioItemProps>(), {
-    disabled: false
+    disabled: false,
+    unstyled: false
 })
 
 const context = inject<RadioGroupContext>(RADIO_GROUP_KEY)
-const composable = useRadioItem(toRef(() => props))
+const style_adapter = useStyleAdapter()
+
+const is_checked = computed(() => context?.model_value.value === props.value)
+const is_disabled = computed(() => props.disabled || context?.disabled.value || false)
+
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    const state: RadioState = {
+        checked: is_checked.value,
+        disabled: is_disabled.value
+    }
+    return style_adapter.getClasses("radio", state)
+})
+
+const indicator_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("radio-indicator", {})
+})
 
 const handleClick = () => {
-    if (!composable.is_disabled.value && context) {
+    if (!is_disabled.value && context) {
         context.updateValue(props.value)
     }
 }

package/dist/components/ui/Select.vue

@@ -11,13 +11,15 @@ import { SELECT_KEY } from "../../types/select"
 
 interface Props extends SelectProps {
     modelValue?: string
+    class?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
     modelValue: "",
     size: "md" as SelectSize,
     disabled: false,
-    placeholder: "Select..."
+    placeholder: "Select...",
+    unstyled: false
 })
 
 const emit = defineEmits<{
@@ -25,6 +27,7 @@ const emit = defineEmits<{
 }>()
 
 const is_open = ref(false)
+const trigger_ref = ref<HTMLElement | null>(null)
 
 const context: SelectContext = {
     model_value: toRef(() => props.modelValue),
@@ -32,6 +35,7 @@ const context: SelectContext = {
     disabled: toRef(() => props.disabled),
     size: toRef(() => props.size ?? "md"),
     placeholder: toRef(() => props.placeholder ?? "Select..."),
+    trigger_ref,
     updateValue: (value: string) => {
         emit("update:modelValue", value)
         is_open.value = false
@@ -48,6 +52,9 @@ const context: SelectContext = {
         if (!props.disabled) {
             is_open.value = !is_open.value
         }
+    },
+    setTriggerRef: (element: HTMLElement | null) => {
+        trigger_ref.value = element
     }
 }
 

package/dist/components/ui/SelectContent.vue

@@ -7,8 +7,10 @@
         />
         <div
             v-if="context?.is_open.value"
-            :class="composable.base_classes.value"
+            :class="[computed_classes, props.class]"
+            :style="content_style"
             :data-state="context?.is_open.value ? 'open' : 'closed'"
+            data-side="bottom"
             role="listbox"
         >
             <div class="p-1">
@@ -19,11 +21,35 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from "vue"
-import { useSelectContent } from "../../composables/useSelect"
-import type { SelectContext } from "../../types/select"
+import { inject, computed } from "vue"
+import { useStyleAdapter } from "../../composables"
+import type { SelectContext, SelectContentProps } from "../../types/select"
 import { SELECT_KEY } from "../../types/select"
 
+const props = withDefaults(defineProps<SelectContentProps>(), {
+    unstyled: false
+})
+
 const context = inject<SelectContext>(SELECT_KEY)
-const composable = useSelectContent()
+const style_adapter = useStyleAdapter()
+
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("select-content", {})
+})
+
+const content_style = computed(() => {
+    const trigger_element = context?.trigger_ref.value
+    if (!trigger_element) {
+        return {}
+    }
+
+    const rect = trigger_element.getBoundingClientRect()
+    return {
+        position: "fixed" as const,
+        top: `${rect.bottom + 4}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`
+    }
+})
 </script>

package/dist/components/ui/SelectItem.vue

@@ -1,14 +1,14 @@
 <template>
     <div
-        :class="composable.base_classes.value"
-        :data-disabled="composable.is_disabled.value ? '' : undefined"
+        :class="[computed_classes, props.class]"
+        :data-disabled="is_disabled ? '' : undefined"
         role="option"
-        :aria-selected="composable.is_selected.value"
+        :aria-selected="is_selected"
         @click="handleClick"
     >
         <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
             <svg
-                v-if="composable.is_selected.value"
+                v-if="is_selected"
                 class="h-4 w-4"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -26,25 +26,29 @@
 </template>
 
 <script setup lang="ts">
-import { inject, toRef } from "vue"
-import { useSelectItem } from "../../composables/useSelect"
-import type { SelectContext } from "../../types/select"
+import { inject, computed } from "vue"
+import { useStyleAdapter } from "../../composables"
+import type { SelectContext, SelectItemProps } from "../../types/select"
 import { SELECT_KEY } from "../../types/select"
 
-interface Props {
-    value: string
-    disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    disabled: false
+const props = withDefaults(defineProps<SelectItemProps>(), {
+    disabled: false,
+    unstyled: false
 })
 
 const context = inject<SelectContext>(SELECT_KEY)
-const composable = useSelectItem(toRef(() => props))
+const style_adapter = useStyleAdapter()
+
+const is_selected = computed(() => context?.model_value.value === props.value)
+const is_disabled = computed(() => props.disabled)
+
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("select-item", {})
+})
 
 const handleClick = () => {
-    if (!composable.is_disabled.value && context) {
+    if (!is_disabled.value && context) {
         context.updateValue(props.value)
     }
 }

package/dist/components/ui/SelectTrigger.vue

@@ -1,15 +1,16 @@
 <template>
     <button
+        ref="button_ref"
         type="button"
-        :class="composable.base_classes.value"
-        :disabled="composable.is_disabled.value"
+        :class="[computed_classes, props.class]"
+        :disabled="is_disabled"
         :aria-expanded="context?.is_open.value"
         aria-haspopup="listbox"
         @click="handleClick"
     >
         <slot />
         <svg
-            class="h-4 w-4 opacity-50"
+            :class="icon_classes"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             fill="none"
@@ -24,13 +25,44 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from "vue"
-import { useSelectTrigger } from "../../composables/useSelect"
-import type { SelectContext } from "../../types/select"
+import { inject, ref, computed, onMounted, onUnmounted } from "vue"
+import { useStyleAdapter } from "../../composables"
+import type { SelectContext, SelectTriggerProps } from "../../types/select"
 import { SELECT_KEY } from "../../types/select"
+import type { SelectState } from "../../types/composables"
+
+const props = withDefaults(defineProps<SelectTriggerProps>(), {
+    unstyled: false
+})
 
 const context = inject<SelectContext>(SELECT_KEY)
-const composable = useSelectTrigger()
+const style_adapter = useStyleAdapter()
+const button_ref = ref<HTMLButtonElement | null>(null)
+
+const is_disabled = computed(() => context?.disabled.value ?? false)
+
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    const state: SelectState = {
+        size: context?.size.value ?? "md",
+        disabled: is_disabled.value,
+        is_open: context?.is_open.value ?? false
+    }
+    return style_adapter.getClasses("select", state)
+})
+
+const icon_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("select-trigger-icon", {})
+})
+
+onMounted(() => {
+    context?.setTriggerRef(button_ref.value)
+})
+
+onUnmounted(() => {
+    context?.setTriggerRef(null)
+})
 
 const handleClick = () => {
     context?.toggle()

package/dist/components/ui/SelectValue.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="!hasValue && 'text-muted-foreground'">
+    <span :class="[computed_classes, props.class]">
         <slot v-if="hasValue" />
         <template v-else>{{ context?.placeholder.value }}</template>
     </span>
@@ -7,10 +7,21 @@
 
 <script setup lang="ts">
 import { computed, inject } from "vue"
-import type { SelectContext } from "../../types/select"
+import { useStyleAdapter } from "../../composables"
+import type { SelectContext, SelectValueProps } from "../../types/select"
 import { SELECT_KEY } from "../../types/select"
 
+const props = withDefaults(defineProps<SelectValueProps>(), {
+    unstyled: false
+})
+
 const context = inject<SelectContext>(SELECT_KEY)
+const style_adapter = useStyleAdapter()
 
 const hasValue = computed(() => !!context?.model_value.value)
+
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("select-value", { hasValue: hasValue.value })
+})
 </script>

package/dist/components/ui/Sheet.vue

@@ -3,7 +3,7 @@
         <Transition name="sheet-overlay">
             <div
                 v-if="is_open"
-                class="fixed inset-0 z-50 bg-black/80"
+                :class="overlay_classes"
                 @click="handleOverlayClick"
             />
         </Transition>
@@ -14,7 +14,7 @@
                 ref="sheet_element"
                 role="dialog"
                 aria-modal="true"
-                :class="cn(base_classes, side_classes[side], props.class)"
+                :class="[computed_classes, props.class]"
                 tabindex="-1"
                 @keydown.escape="close"
             >
@@ -23,7 +23,7 @@
                 <button
                     v-if="show_close_button"
                     type="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"
+                    :class="close_button_classes"
                     aria-label="Close"
                     @click="close"
                 >
@@ -49,20 +49,17 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, provide, onMounted, onUnmounted, type InjectionKey } from "vue"
-import { cn } from "../../utils/cn"
-import type { SheetSide, SheetContext } from "../../types/sheet"
-
-export interface Props {
-    open?: boolean
-    side?: SheetSide
-    show_close_button?: boolean
-    class?: string
-}
+import { useStyleAdapter } from "../../composables"
+import type { SheetSide, SheetContext, SheetProps } from "../../types/sheet"
+import type { SheetState } from "../../types/composables"
+
+interface Props extends SheetProps {}
 
 const props = withDefaults(defineProps<Props>(), {
     open: false,
     side: "right",
-    show_close_button: true
+    showCloseButton: true,
+    unstyled: false
 })
 
 const emit = defineEmits<{
@@ -71,6 +68,7 @@ const emit = defineEmits<{
 
 export const SHEET_CONTEXT_KEY: InjectionKey<SheetContext> = Symbol("sheet-context")
 
+const style_adapter = useStyleAdapter()
 const is_open = ref(props.open)
 const sheet_element = ref<HTMLElement | null>(null)
 
@@ -114,25 +112,35 @@ watch(is_open, (open) => {
     }
 })
 
-const side = computed(() => props.side)
-
+const side = computed(() => props.side ?? "right")
+const show_close_button = computed(() => props.showCloseButton)
 const transition_name = computed(() => `sheet-${side.value}`)
 
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    const state: SheetState = {
+        is_open: is_open.value,
+        side: side.value
+    }
+    return style_adapter.getClasses("sheet", state)
+})
+
+const overlay_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("sheet-overlay", {})
+})
+
+const close_button_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("sheet-close", {})
+})
+
 provide(SHEET_CONTEXT_KEY, {
     is_open: is_open.value,
     side: side.value,
     open,
     close
 })
-
-const base_classes = "fixed z-50 gap-4 bg-background p-6 shadow-lg"
-
-const side_classes: Record<SheetSide, string> = {
-    top: "inset-x-0 top-0 border-b",
-    bottom: "inset-x-0 bottom-0 border-t",
-    left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-    right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
-}
 </script>
 
 <style scoped>

package/dist/components/ui/SheetDescription.vue

@@ -1,15 +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 { SheetDescriptionProps } from "../../types/sheet"
 
-export interface Props {
-    class?: string
-}
+const props = withDefaults(defineProps<SheetDescriptionProps>(), {
+    unstyled: false
+})
 
-const props = defineProps<Props>()
+const style_adapter = useStyleAdapter()
+
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("sheet-description", {})
+})
 </script>

package/dist/components/ui/SheetFooter.vue

@@ -1,15 +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 { SheetFooterProps } from "../../types/sheet"
 
-export interface Props {
-    class?: string
-}
+const props = withDefaults(defineProps<SheetFooterProps>(), {
+    unstyled: false
+})
 
-const props = defineProps<Props>()
+const style_adapter = useStyleAdapter()
+
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("sheet-footer", {})
+})
 </script>

package/dist/components/ui/SheetHeader.vue

@@ -1,15 +1,22 @@
 <template>
-    <div :class="cn('flex flex-col space-y-2 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 { SheetHeaderProps } from "../../types/sheet"
 
-export interface Props {
-    class?: string
-}
+const props = withDefaults(defineProps<SheetHeaderProps>(), {
+    unstyled: false
+})
 
-const props = defineProps<Props>()
+const style_adapter = useStyleAdapter()
+
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("sheet-header", {})
+})
 </script>

package/dist/components/ui/SheetTitle.vue

@@ -1,15 +1,22 @@
 <template>
-    <h2 :class="cn('text-lg font-semibold text-foreground', 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 { SheetTitleProps } from "../../types/sheet"
 
-export interface Props {
-    class?: string
-}
+const props = withDefaults(defineProps<SheetTitleProps>(), {
+    unstyled: false
+})
 
-const props = defineProps<Props>()
+const style_adapter = useStyleAdapter()
+
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("sheet-title", {})
+})
 </script>

package/dist/components/ui/Switch.vue

@@ -1,7 +1,7 @@
 <template>
     <button
         type="button"
-        :class="composable.track_classes.value"
+        :class="[computed_classes, props.class]"
         :disabled="composable.is_disabled.value"
         :data-state="modelValue ? 'checked' : 'unchecked'"
         v-bind="composable.aria_attributes.value"
@@ -15,26 +15,46 @@
 </template>
 
 <script setup lang="ts">
-import { toRef } from "vue"
+import { toRef, computed } from "vue"
 import { useSwitch } from "../../composables/useSwitch"
+import { useStyleAdapter } from "../../composables/useUIConfig"
 import type { SwitchProps } from "../../types/switch"
+import type { SwitchState } from "../../types/composables"
 
 interface Props extends SwitchProps {
     modelValue?: boolean
+    class?: string
+    unstyled?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
     modelValue: false,
-    disabled: false
+    disabled: false,
+    unstyled: false
 })
 
 const emit = defineEmits<{
     "update:modelValue": [value: boolean]
 }>()
 
+const style_adapter = useStyleAdapter()
 const checked = toRef(() => props.modelValue)
 const composable = useSwitch(toRef(() => props), checked)
 
+// StyleAdapterからクラスを取得
+const computed_classes = computed(() => {
+    if (props.unstyled) {
+        return ""
+    }
+
+    const state: SwitchState = {
+        checked: props.modelValue,
+        disabled: composable.is_disabled.value
+    }
+
+    return style_adapter.getClasses("switch", state)
+})
+
 const handleClick = () => {
     if (!composable.is_disabled.value) {
         emit("update:modelValue", !props.modelValue)