Modal Component & Custom UI Components (#4908)

src/components/button/IconButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <Button unstyled :class="buttonStyle" @click="onClick">
+    <slot></slot>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { BaseButtonProps } from '@/types/buttonTypes'
+import {
+  getBaseButtonClasses,
+  getButtonTypeClasses,
+  getIconButtonSizeClasses
+} from '@/types/buttonTypes'
+
+interface IconButtonProps extends BaseButtonProps {
+  onClick: (event: Event) => void
+}
+
+const {
+  size = 'md',
+  type = 'secondary',
+  class: className,
+  onClick
+} = defineProps<IconButtonProps>()
+
+const buttonStyle = computed(() => {
+  const baseClasses = `${getBaseButtonClasses()} p-0`
+  const sizeClasses = getIconButtonSizeClasses(size)
+  const typeClasses = getButtonTypeClasses(type)
+
+  return [baseClasses, sizeClasses, typeClasses, className]
+    .filter(Boolean)
+    .join(' ')
+})
+</script>

src/components/button/IconGroup.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="flex justify-center items-center flex-shrink-0 outline-none border-none p-0 bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white rounded-lg cursor-pointer"
+  >
+    <slot></slot>
+  </div>
+</template>

src/components/button/IconTextButton.vue

@@ -0,0 +1,44 @@
+<template>
+  <Button unstyled :class="buttonStyle" @click="onClick">
+    <slot v-if="iconPosition !== 'right'" name="icon"></slot>
+    <span>{{ label }}</span>
+    <slot v-if="iconPosition === 'right'" name="icon"></slot>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { BaseButtonProps } from '@/types/buttonTypes'
+import {
+  getBaseButtonClasses,
+  getButtonSizeClasses,
+  getButtonTypeClasses
+} from '@/types/buttonTypes'
+
+interface IconTextButtonProps extends BaseButtonProps {
+  iconPosition?: 'left' | 'right'
+  label: string
+  onClick: () => void
+}
+
+const {
+  size = 'md',
+  type = 'primary',
+  class: className,
+  iconPosition = 'left',
+  label,
+  onClick
+} = defineProps<IconTextButtonProps>()
+
+const buttonStyle = computed(() => {
+  const baseClasses = `${getBaseButtonClasses()} !justify-start gap-2`
+  const sizeClasses = getButtonSizeClasses(size)
+  const typeClasses = getButtonTypeClasses(type)
+
+  return [baseClasses, sizeClasses, typeClasses, className]
+    .filter(Boolean)
+    .join(' ')
+})
+</script>

src/components/button/MoreButton.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="relative inline-flex items-center">
+    <IconButton @click="toggle">
+      <i-lucide:more-vertical class="text-sm" />
+    </IconButton>
+
+    <Popover
+      ref="popover"
+      :append-to="'body'"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="pt"
+    >
+      <div class="flex flex-col gap-1 p-2 min-w-40">
+        <slot :close="hide" />
+      </div>
+    </Popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+
+import IconButton from './IconButton.vue'
+
+const popover = ref<InstanceType<typeof Popover>>()
+
+const toggle = (event: Event) => {
+  popover.value?.toggle(event)
+}
+
+const hide = () => {
+  popover.value?.hide()
+}
+
+const pt = computed(() => ({
+  root: {
+    class: 'absolute z-50'
+  },
+  content: {
+    class: [
+      'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg',
+      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
+    ]
+  }
+}))
+</script>

src/components/button/TextButton.vue

@@ -0,0 +1,40 @@
+<template>
+  <Button unstyled :class="buttonStyle" role="button" @click="onClick">
+    <span>{{ label }}</span>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { BaseButtonProps } from '@/types/buttonTypes'
+import {
+  getBaseButtonClasses,
+  getButtonSizeClasses,
+  getButtonTypeClasses
+} from '@/types/buttonTypes'
+
+interface TextButtonProps extends BaseButtonProps {
+  label: string
+  onClick: () => void
+}
+
+const {
+  size = 'md',
+  type = 'primary',
+  class: className,
+  label,
+  onClick
+} = defineProps<TextButtonProps>()
+
+const buttonStyle = computed(() => {
+  const baseClasses = getBaseButtonClasses()
+  const sizeClasses = getButtonSizeClasses(size)
+  const typeClasses = getButtonTypeClasses(type)
+
+  return [baseClasses, sizeClasses, typeClasses, className]
+    .filter(Boolean)
+    .join(' ')
+})
+</script>