Feature: PCascadePanels

demo/components/cascade/AdvancedDemo.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="advanced-demo">
+    <div ref="target">
+      <p-label label="Region">
+        <p-button class="advanced-demo__target" small icon-append="ChevronDownIcon" @click.stop="toggle">
+          <span v-if="emptyContinent" class="advanced-demo__placeholder">Select a continent to begin</span>
+          <span v-else>{{ continent }}</span>
+
+          <template v-if="!emptyContinent">
+            <span class="advanced-demo__separator"> / </span>
+            <span v-if="emptyCountry" class="advanced-demo__placeholder">Select a country</span>
+            <span v-else-if="continent">{{ country }}</span>
+          </template>
+
+          <template v-if="!emptyCountry">
+            <span class="advanced-demo__separator"> / </span>
+            <span v-if="emptyBorders" class="advanced-demo__placeholder">Select borders</span>
+            <span v-else>{{ borders.join(', ') }}</span>
+          </template>
+        </p-button>
+      </p-label>
+
+      <teleport to="body">
+        <div ref="content" :style="styles">
+          <PCascadePanels :panels="panels" class="advanced-demo__panels">
+            <template #continents>
+              <Continents v-model:value="continent" class="advanced-demo__panel" />
+            </template>
+
+            <template #countries>
+              <Countries v-model:value="country" v-model:continent="continent" class="advanced-demo__panel" />
+            </template>
+
+            <template #borders>
+              <keep-alive>
+                <Borders v-model:value="borders" v-model:country="country" class="advanced-demo__panel" />
+              </keep-alive>
+            </template>
+          </PCascadePanels>
+        </div>
+      </teleport>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { PCascadePanels } from '@/components'
+  import { CascadePanel, useCascadePanels, useMostVisiblePositionStyles } from '@/compositions'
+  import { keys } from '@/types'
+  import { positions } from '@/utilities'
+  import { useKeyDown } from '@prefecthq/vue-compositions'
+  import { computed, ref, watch } from 'vue'
+  import Borders from '@/demo/components/cascade/Borders.vue'
+  import Continents from '@/demo/components/cascade/Continents.vue'
+  import Countries from '@/demo/components/cascade/Countries.vue'
+
+  const continent = ref<string>()
+  const country = ref<string>()
+  const borders = ref<string[]>([])
+
+  const panels: CascadePanel[] = [
+    {
+      id: 'continents',
+      level: 0,
+    },
+    {
+      id: 'countries',
+      level: 1,
+    },
+    {
+      id: 'borders',
+      level: 2,
+    },
+  ]
+
+  const { openPanelById, closePanelById, toggle, close } = useCascadePanels(panels)
+
+  const placement = ref([positions.bottomLeft])
+  const { styles, target, container, content } = useMostVisiblePositionStyles(placement)
+  container.value = document.body
+
+  const emptyContinent = computed(() => !continent.value)
+  const emptyCountry = computed(() => !country.value)
+  const emptyBorders = computed(() => !borders.value.length)
+
+  watch(() => continent.value, (value) => {
+    if (value) {
+      openPanelById('countries')
+    } else {
+      country.value = undefined
+      closePanelById('countries')
+    }
+  })
+
+  watch(() => country.value, (value) => {
+    if (value) {
+      openPanelById('borders')
+    } else {
+      borders.value = []
+      closePanelById('borders')
+    }
+  })
+
+  useKeyDown(keys.escape, close)
+</script>
+
+<style>
+.advanced-demo__target { @apply
+  min-w-48
+}
+
+.advanced-demo__target .p-button__content {@apply
+  justify-between
+  px-1
+}
+
+.p-overflow-menu { @apply
+  bg-transparent
+  shadow-none
+  }
+
+.advanced-demo__panels { @apply
+  flex
+  gap-1
+}
+
+.advanced-demo__placeholder,
+.advanced-demo__separator { @apply
+  text-subdued
+}
+</style>

demo/components/cascade/BasicDemo.vue

@@ -0,0 +1,47 @@
+<template>
+  <p-button small @click="toggle">
+    Toggle Cascade Panels
+  </p-button>
+
+  <PCascadePanels :panels="panels">
+    <template #level-0>
+      <Level0 />
+    </template>
+
+    <template #level-1>
+      <Level1 />
+    </template>
+
+    <template #level-2="{ close }">
+      No component for level-2 but we can still access the panel state
+
+      <p-button small @click="close">
+        Close
+      </p-button>
+    </template>
+  </PCascadePanels>
+</template>
+
+<script lang="ts" setup>
+  import { PCascadePanels } from '@/components'
+  import { CascadePanel, useCascadePanels } from '@/compositions'
+  import Level0 from '@/demo/components/cascade/Level0.vue'
+  import Level1 from '@/demo/components/cascade/Level1.vue'
+
+  const panels: CascadePanel[] = [
+    {
+      id: 'level-0',
+      level: 0,
+    },
+    {
+      id: 'level-1',
+      level: 1,
+    },
+    {
+      id: 'level-2',
+      level: 2,
+    },
+  ]
+
+  const { toggle } = useCascadePanels(panels)
+</script>

demo/components/cascade/Borders.vue

@@ -0,0 +1,148 @@
+<template>
+  <p-card class="borders">
+    <p-text-input v-model="search" class="borders__search" placeholder="Search borders" />
+
+    <transition name="fade" mode="out-in">
+      <p-loading-icon v-if="loading" class="borders__loading-icon" />
+
+      <div v-else-if="empty" class="borders__empty">
+        No borders found
+      </div>
+
+      <div v-else class="borders__content">
+        <template v-for="border in filteredborders" :key="border">
+          <p-overflow-menu-item class="borders__item" :class="classes.border(border)" @click="toggle(border)">
+            {{ border }}
+            <p-icon v-if="value.includes(border)" size="small" icon="CheckIcon" class="ml-auto" />
+          </p-overflow-menu-item>
+        </template>
+      </div>
+    </transition>
+  </p-card>
+</template>
+
+<script setup lang="ts">
+  import { useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+  import { computed, ref } from 'vue'
+
+  const search = ref()
+  const loading = ref(false)
+  const country = defineModel<string | undefined>('country', { required: true })
+  const value = defineModel<string[]>('value', { default: [] })
+
+  type CountryResponse = {
+    borders: string[],
+  }
+
+
+  const fetchBorders = async (country: string): Promise<string[]> => {
+    if (!country) {
+      return []
+    }
+
+    loading.value = true
+
+    try {
+      const response = await fetch(`https://restcountries.com/v3.1/name/${country.toLowerCase()}?fullText=true`)
+      const data = await response.json()
+      return data.map((country: CountryResponse) => country.borders).flat().filter((border: string) => border)
+    } catch {
+      return []
+    } finally {
+      setTimeout(() => loading.value = false, 1000)
+    }
+  }
+
+  const subscriptionArgs = computed <[string] | null>(() => {
+    if (!country.value) {
+      return null
+    }
+
+    return [country.value]
+  })
+
+  const subscription = useSubscriptionWithDependencies(fetchBorders, subscriptionArgs)
+  const borders = computed<string[]>(() => subscription.response ?? [])
+  const empty = computed(() => filteredborders.value.length === 0 && !loading.value)
+
+  const filteredborders = computed(() => {
+    if (!search.value) {
+      return borders.value
+    }
+
+    return borders.value.filter(border => border.toLowerCase().includes(search.value.toLowerCase()))
+  })
+
+  const classes = computed(() => ({
+    border: (border: string) => ({
+      'p-overflow-menu-item--active': value.value.includes(border),
+    }),
+  }))
+
+  function toggle(country: string): void {
+    if (value.value.includes(country)) {
+      value.value = value.value.filter(border => border !== country)
+    } else {
+      value.value = [...value.value, country]
+    }
+  }
+</script>
+
+
+<style>
+.borders { @apply
+  px-0
+  flex
+  flex-col
+  min-w-64
+}
+
+.borders__item { @apply
+  text-xs
+  rounded
+}
+
+.borders__search { @apply
+  mx-4
+  shrink
+  w-auto
+  mb-4
+}
+
+.borders__search .p-text-input__control { @apply
+  text-xs
+}
+
+.borders__content { @apply
+  overflow-y-auto
+  max-h-64
+  px-4
+  grow
+  relative
+}
+
+.borders__close { @apply
+  ml-auto
+  text-subdued
+}
+
+.borders__loading-icon { @apply
+  mx-auto
+}
+
+.borders__empty { @apply
+  flex
+  justify-center
+  text-xs
+  items-center
+  text-subdued
+}
+
+.fade-enter-active, .fade-leave-active { @apply
+  transition-opacity
+}
+
+.fade-enter, .fade-leave-to { @apply
+  opacity-0
+}
+</style>