feature: implement Textbutton

src/components/custom/button/TextButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <button :class="buttonStyle" role="button" @click="onClick">
+    <span class="text-sm">{{ label }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const {
+  type = 'primary',
+  label,
+  onClick
+} = defineProps<{
+  type?: 'primary' | 'secondary'
+  label: string
+  onClick: () => void
+}>()
+
+const buttonStyle = computed(() => {
+  const baseClasses =
+    'flex justify-center items-center flex-shrink-0 outline-none border-none px-2.5 py-2 rounded-lg cursor-pointer transition-all duration-200'
+
+  switch (type) {
+    case 'primary':
+      return `${baseClasses} bg-neutral-900 text-white dark-theme:bg-white dark-theme:text-neutral-900`
+    case 'secondary':
+      return `${baseClasses} bg-white text-neutral dark-theme:bg-zinc-700`
+    default:
+      return `${baseClasses} bg-white text-neutral dark-theme:bg-zinc-700`
+  }
+})
+</script>

src/components/custom/input/MultiSelect.vue

@@ -2,16 +2,16 @@
   <div class="relative inline-block">
     <MultiSelect
       v-model="selectedItems"
-      :options="props.options"
+      :options="options"
       option-label="name"
       unstyled
-      :placeholder="props.label"
+      :placeholder="label"
       :max-selected-labels="0"
       :pt="pt"
     >
       <template #value>
         <span class="text-sm text-zinc-700 dark-theme:text-gray-200">
-          {{ props.label }}
+          {{ label }}
         </span>
       </template>
       <template #dropdownicon>
@@ -52,21 +52,20 @@ import MultiSelect, {
 } from 'primevue/multiselect'
 import { computed } from 'vue'
 
-interface Option {
-  name: string
-  value: string
-}
-
-interface Props {
+const { label, options } = defineProps<{
   label?: string
-  options: Option[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label: 'Category Label'
-})
+  options: {
+    name: string
+    value: string
+  }[]
+}>()
 
-const selectedItems = defineModel<Option[]>({ required: true })
+const selectedItems = defineModel<
+  {
+    name: string
+    value: string
+  }[]
+>({ required: true })
 
 const selectedCount = computed(() => selectedItems.value.length)
 

src/components/custom/input/SingleSelect.vue

@@ -2,10 +2,10 @@
   <div class="relative inline-flex items-center">
     <Select
       v-model="selectedItem"
-      :options="props.options"
+      :options="options"
       option-label="name"
       unstyled
-      :placeholder="props.label"
+      :placeholder="label"
       :pt="pt"
     >
       <template #value="slotProps">
@@ -18,7 +18,7 @@
             {{ slotProps.value.name }}
           </span>
           <span v-else class="text-sm text-zinc-400 dark-theme:text-gray-500">
-            {{ props.label }}
+            {{ label }}
           </span>
         </div>
       </template>
@@ -36,24 +36,27 @@
 import Select, { SelectPassThroughMethodOptions } from 'primevue/select'
 import { computed } from 'vue'
 
-interface Option {
-  name: string
-  value: string
-}
-
-interface Props {
+const { label, options } = defineProps<{
   label?: string
-  options: Option[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label: 'Select an option'
-})
+  options: {
+    name: string
+    value: string
+  }[]
+}>()
 
-const selectedItem = defineModel<Option | null>({ required: true })
+const selectedItem = defineModel<{
+  name: string
+  value: string
+} | null>({ required: true })
 
 const pt = computed(() => ({
-  root: ({ props, state }: SelectPassThroughMethodOptions<Option>) => ({
+  root: ({
+    props,
+    state
+  }: SelectPassThroughMethodOptions<{
+    name: string
+    value: string
+  }>) => ({
     class: [
       'relative inline-flex cursor-pointer select-none w-full border border-solid border-transparent',
       'rounded-lg text-neutral dark-theme:text-white',

src/components/custom/widget/ModelSelector.vue

@@ -15,6 +15,21 @@
       <SearchBox v-model:="searchQuery" class="max-w-[384px]" />
     </template>
 
+    <template #header-right-area>
+      <div class="flex gap-2">
+        <TextButton
+          label="Action"
+          type="primary"
+          @click="console.log('Hello World!!')"
+        />
+        <TextButton
+          label="Action"
+          type="secondary"
+          @click="console.log('Hello World!!')"
+        />
+      </div>
+    </template>
+
     <template #content>
       <div class="px-6 pt-2 pb-4 flex gap-2">
         <MultiSelect
@@ -43,6 +58,7 @@ import { useI18n } from 'vue-i18n'
 import { NavGroupData, NavItemData } from '@/types/custom_components/navTypes'
 import { OnCloseKey } from '@/types/custom_components/widgetTypes'
 
+import TextButton from '../button/TextButton.vue'
 import MultiSelect from '../input/MultiSelect.vue'
 import SearchBox from '../input/SearchBox.vue'
 import BaseWidgetLayout from './layout/BaseWidgetLayout.vue'

src/components/custom/widget/layout/BaseWidgetLayout.vue

@@ -45,8 +45,13 @@
               </IconButton>
               <slot name="header"></slot>
             </div>
-            <div class="flex justify-end gap-2 min-w-20">
-              <slot name="header-right-area"></slot>
+            <slot name="header-right-area"></slot>
+            <div
+              class="flex justify-end gap-2 w-0"
+              :class="
+                isRightPanelOpen && hasRightPanel ? 'min-w-8' : 'min-w-18'
+              "
+            >
               <IconButton
                 v-if="isRightPanelOpen && hasRightPanel"
                 @click="toggleRightPanel"
@@ -55,18 +60,17 @@
               </IconButton>
             </div>
           </header>
+
           <main class="flex-1">
             <slot name="content"></slot>
           </main>
         </div>
-        <Transition name="slide-panel-right">
-          <aside
-            v-if="hasRightPanel && isRightPanelOpen"
-            class="w-1/4 min-w-40 max-w-80"
-          >
-            <slot name="rightPanel"></slot>
-          </aside>
-        </Transition>
+        <aside
+          v-if="hasRightPanel && isRightPanelOpen"
+          class="w-1/4 min-w-40 max-w-80"
+        >
+          <slot name="rightPanel"></slot>
+        </aside>
       </div>
     </div>
   </div>
@@ -160,17 +164,4 @@ const toggleRightPanel = () => {
 .slide-panel-leave-to {
   transform: translateX(-100%);
 }
-
-/* Slide transition for right panel */
-.slide-panel-right-enter-active,
-.slide-panel-right-leave-active {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform;
-  backface-visibility: hidden;
-}
-
-.slide-panel-right-enter-from,
-.slide-panel-right-leave-to {
-  transform: translateX(100%);
-}
 </style>