Modal Standardization (#4784)

src/components/custom/widget/ModelSelector.vue

@@ -0,0 +1,67 @@
+<template>
+  <BaseWidgetLayout>
+    <template #leftPanel>
+      <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
+        <template #header-icon>
+          <i-lucide:puzzle class="text-neutral" />
+        </template>
+        <template #header-title>
+          <span class="text-neutral text-base">{{ t('g.title') }}</span>
+        </template>
+      </LeftSidePanel>
+    </template>
+
+    <template #header>
+      <!-- here -->
+    </template>
+
+    <template #content>
+      <!-- here -->
+    </template>
+
+    <template #rightPanel>
+      <RightSidePanel></RightSidePanel>
+    </template>
+  </BaseWidgetLayout>
+</template>
+
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { NavGroupData, NavItemData } from '@/types/custom_components/navTypes'
+import { OnCloseKey } from '@/types/custom_components/widgetTypes'
+
+import BaseWidgetLayout from './layout/BaseWidgetLayout.vue'
+import LeftSidePanel from './panel/LeftSidePanel.vue'
+import RightSidePanel from './panel/RightSidePanel.vue'
+
+const { t } = useI18n()
+
+const { onClose } = defineProps<{
+  onClose: () => void
+}>()
+
+provide(OnCloseKey, onClose)
+
+const tempNavigation = ref<(NavItemData | NavGroupData)[]>([
+  { id: 'installed', label: 'Installed' },
+  {
+    title: 'TAGS',
+    items: [
+      { id: 'tag-sd15', label: 'SD 1.5' },
+      { id: 'tag-sdxl', label: 'SDXL' },
+      { id: 'tag-utility', label: 'Utility' }
+    ]
+  },
+  {
+    title: 'CATEGORIES',
+    items: [
+      { id: 'cat-models', label: 'Models' },
+      { id: 'cat-nodes', label: 'Nodes' }
+    ]
+  }
+])
+
+const selectedNavItem = ref<string | null>('installed')
+</script>

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

@@ -0,0 +1,176 @@
+<template>
+  <div
+    class="base-widget-layout rounded-2xl overflow-hidden relative bg-zinc-100 dark-theme:bg-zinc-800"
+  >
+    <IconButton
+      v-show="!isRightPanelOpen && hasRightPanel"
+      class="absolute top-4 right-16 z-10 transition-opacity duration-200"
+      :class="{
+        'opacity-0 pointer-events-none': isRightPanelOpen || !hasRightPanel
+      }"
+      @click="toggleRightPanel"
+    >
+      <i-lucide:panel-right class="text-sm" />
+    </IconButton>
+    <IconButton
+      class="absolute top-4 right-6 z-10 transition-opacity duration-200"
+      @click="closeDialog"
+    >
+      <i class="pi pi-times text-sm"></i>
+    </IconButton>
+    <div class="flex w-full h-full">
+      <Transition name="slide-panel">
+        <nav
+          v-if="$slots.leftPanel && showLeftPanel"
+          :class="[
+            PANEL_SIZES.width,
+            PANEL_SIZES.minWidth,
+            PANEL_SIZES.maxWidth
+          ]"
+        >
+          <slot name="leftPanel"></slot>
+        </nav>
+      </Transition>
+
+      <div class="flex-1 flex bg-zinc-100 dark-theme:bg-neutral-900">
+        <div class="w-full h-full flex flex-col">
+          <header
+            v-if="$slots.header"
+            class="w-full h-16 px-6 py-4 flex justify-between gap-2"
+          >
+            <div class="flex-1 flex gap-2 flex-shrink-0">
+              <IconButton v-if="!notMobile" @click="toggleLeftPanel">
+                <i-lucide:panel-left v-if="!showLeftPanel" class="text-sm" />
+                <i-lucide:panel-left-close v-else class="text-sm" />
+              </IconButton>
+              <slot name="header"></slot>
+            </div>
+            <div class="flex justify-end gap-2 min-w-20">
+              <slot name="header-right-area"></slot>
+              <IconButton
+                v-if="isRightPanelOpen && hasRightPanel"
+                @click="toggleRightPanel"
+              >
+                <i-lucide:panel-right-close class="text-sm" />
+              </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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBreakpoints } from '@vueuse/core'
+import { computed, inject, ref, useSlots, watch } from 'vue'
+
+import IconButton from '@/components/custom/button/IconButton.vue'
+import { OnCloseKey } from '@/types/custom_components/widgetTypes'
+
+const BREAKPOINTS = { sm: 480 }
+const PANEL_SIZES = {
+  width: 'w-1/3',
+  minWidth: 'min-w-40',
+  maxWidth: 'max-w-56'
+}
+
+const slots = useSlots()
+const closeDialog = inject(OnCloseKey, () => {})
+
+const breakpoints = useBreakpoints(BREAKPOINTS)
+const notMobile = breakpoints.greater('sm')
+
+const isLeftPanelOpen = ref<boolean>(true)
+const isRightPanelOpen = ref<boolean>(false)
+const mobileMenuOpen = ref<boolean>(false)
+
+const hasRightPanel = computed(() => !!slots.rightPanel)
+
+watch(notMobile, (isDesktop) => {
+  if (!isDesktop) {
+    mobileMenuOpen.value = false
+  }
+})
+
+const showLeftPanel = computed(() => {
+  const shouldShow = notMobile.value
+    ? isLeftPanelOpen.value
+    : mobileMenuOpen.value
+  return shouldShow
+})
+
+const toggleLeftPanel = () => {
+  if (notMobile.value) {
+    isLeftPanelOpen.value = !isLeftPanelOpen.value
+  } else {
+    mobileMenuOpen.value = !mobileMenuOpen.value
+  }
+}
+
+const toggleRightPanel = () => {
+  isRightPanelOpen.value = !isRightPanelOpen.value
+}
+</script>
+<style scoped>
+.base-widget-layout {
+  height: 80vh;
+  width: 90vw;
+  max-width: 1280px;
+  aspect-ratio: 20/13;
+}
+
+@media (min-width: 1450px) {
+  .base-widget-layout {
+    max-width: 1724px;
+  }
+}
+
+/* Fade transition for buttons */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Slide transition for left panel */
+.slide-panel-enter-active,
+.slide-panel-leave-active {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+  backface-visibility: hidden;
+}
+
+.slide-panel-enter-from,
+.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>

src/components/custom/widget/nav/NavItem.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="flex items-center gap-2 px-4 py-2 text-xs rounded-md transition-colors cursor-pointer"
+    :class="
+      active
+        ? 'bg-neutral-100 dark-theme:bg-zinc-700 text-neutral'
+        : 'text-neutral hover:bg-zinc-100 hover:dark-theme:bg-zinc-700/50'
+    "
+    role="button"
+    @click="onClick"
+  >
+    <i-lucide:folder class="text-xs text-neutral" />
+    <span>
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { active, onClick } = defineProps<{
+  active?: boolean
+  onClick: () => void
+}>()
+</script>

src/components/custom/widget/nav/NavTitle.vue

@@ -0,0 +1,13 @@
+<template>
+  <h3
+    class="m-0 px-3 py-0 pt-5 text-sm font-bold uppercase text-neutral-400 dark-theme:text-neutral-400"
+  >
+    {{ title }}
+  </h3>
+</template>
+
+<script setup lang="ts">
+const { title } = defineProps<{
+  title: string
+}>()
+</script>

src/components/custom/widget/panel/LeftSidePanel.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-zinc-800">
+    <PanelHeader>
+      <template #icon>
+        <slot name="header-icon"></slot>
+      </template>
+      <slot name="header-title"></slot>
+    </PanelHeader>
+
+    <nav class="flex-1 px-3 py-4 flex flex-col gap-2">
+      <template v-for="(item, index) in navItems" :key="index">
+        <div v-if="'items' in item" class="flex flex-col gap-2">
+          <NavTitle :title="item.title" />
+          <NavItem
+            v-for="subItem in item.items"
+            :key="subItem.id"
+            :active="activeItem === subItem.id"
+            @click="activeItem = subItem.id"
+          >
+            {{ subItem.label }}
+          </NavItem>
+        </div>
+        <div v-else class="flex flex-col gap-2">
+          <NavItem
+            :active="activeItem === item.id"
+            @click="activeItem = item.id"
+          >
+            {{ item.label }}
+          </NavItem>
+        </div>
+      </template>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { NavGroupData, NavItemData } from '@/types/custom_components/navTypes'
+
+import NavItem from '../nav/NavItem.vue'
+import NavTitle from '../nav/NavTitle.vue'
+import PanelHeader from './PanelHeader.vue'
+
+const { navItems = [], modelValue } = defineProps<{
+  navItems?: (NavItemData | NavGroupData)[]
+  modelValue?: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null]
+}>()
+
+const getFirstItemId = () => {
+  if (!navItems || navItems.length === 0) {
+    return null
+  }
+
+  const firstEntry = navItems[0]
+
+  if ('items' in firstEntry && firstEntry.items.length > 0) {
+    return firstEntry.items[0].id
+  }
+  if ('id' in firstEntry) {
+    return firstEntry.id
+  }
+
+  return null
+}
+
+const activeItem = computed({
+  get: () => modelValue ?? getFirstItemId(),
+  set: (value: string | null) => emit('update:modelValue', value)
+})
+</script>

src/components/custom/widget/panel/PanelHeader.vue

@@ -0,0 +1,12 @@
+<template>
+  <header class="flex items-center justify-between h-16 px-6">
+    <div class="flex items-center gap-2 pl-1">
+      <slot name="icon">
+        <i-lucide:puzzle class="text-neutral text-base" />
+      </slot>
+      <h2 class="font-bold text-base text-neutral">
+        <slot></slot>
+      </h2>
+    </div>
+  </header>
+</template>

src/components/custom/widget/panel/RightSidePanel.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full h-full pl-4 pr-6 pb-8 bg-white dark-theme:bg-zinc-800">
+    <slot></slot>
+  </div>
+</template>