Dev cleaning (#106)

app/components/pub/ui/select/Select.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+import SelectContent from './SelectContent.vue'
+import SelectGroup from './SelectGroup.vue'
+import SelectItem from './SelectItem.vue'
+import SelectSeparator from './SelectSeparator.vue'
+import SelectTrigger from './SelectTrigger.vue'
+import SelectValue from './SelectValue.vue'
+
+interface Item {
+  value: string
+  label: string
+}
+
+const props = defineProps<
+  SelectRootProps & {
+    items: Item[]
+    iconName?: string
+    placeholder?: string
+    label?: string
+    separator?: boolean
+  }
+>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <SelectTrigger :icon-name="iconName" class="flex justify-between items-center">
+      <SelectValue :placeholder="placeholder" />
+    </SelectTrigger>
+
+    <SelectContent class="rounded border bg-white">
+      <SelectGroup>
+        <SelectLabel v-if="label" class="px-2 py-1 text-sm font-semibold">
+          {{ label }}
+        </SelectLabel>
+
+        <SelectItem
+          v-for="item in items"
+          :key="item.value"
+          :value="item.value"
+          class="cursor-pointer px-2 py-1 hover:bg-gray-100"
+        >
+          {{ item.label }}
+        </SelectItem>
+
+        <SelectSeparator v-if="separator" class="my-1 h-px bg-gray-200" />
+      </SelectGroup>
+    </SelectContent>
+  </SelectRoot>
+</template>

app/components/pub/ui/select/SelectContent.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+import SelectScrollDownButton from './SelectScrollDownButton.vue'
+import SelectScrollUpButton from './SelectScrollUpButton.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper',
+})
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
+          position === 'popper'
+            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          props.class,
+        )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport
+        :class="
+          cn(
+            'p-1',
+            position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]',
+          )
+        "
+      >
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>

app/components/pub/ui/select/SelectGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectGroup } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>

app/components/pub/ui/select/SelectItem.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SelectItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  SelectItem,
+  SelectItemIndicator,
+
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 h-3.5 w-3.5 flex items-center justify-center">
+      <SelectItemIndicator>
+        <Icon name="i-radix-icons-check" class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>

app/components/pub/ui/select/SelectItemText.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectItemTextProps } from 'radix-vue'
+import { SelectItemText } from 'radix-vue'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>

app/components/pub/ui/select/SelectLabel.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectLabel } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>

app/components/pub/ui/select/SelectScrollDownButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectScrollDownButton, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <Icon name="i-radix-icons-chevron-down" />
+    </slot>
+  </SelectScrollDownButton>
+</template>

app/components/pub/ui/select/SelectScrollUpButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectScrollUpButton, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <Icon name="i-radix-icons-chevron-up" />
+    </slot>
+  </SelectScrollUpButton>
+</template>

app/components/pub/ui/select/SelectSeparator.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectSeparator } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>

app/components/pub/ui/select/SelectTrigger.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], iconName?: string }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+const iconName = computed(() => props.iconName || 'i-radix-icons-caret-sort')
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input ring-offset-background placeholder:text-muted-foreground relative flex h-9 md:h-8 xl:h-9 w-full rounded-md border border-gray-400 pl-3 pr-8 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+    <SelectIcon as-child class="absolute right-3 top-1/2 -translate-y-1/2">
+      <Icon :name="iconName" class="h-4 w-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

app/components/pub/ui/select/SelectValue.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'radix-vue'
+import { SelectValue } from 'radix-vue'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>

app/components/pub/ui/select/index.ts

@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'