feat: scafolder filters panel components

components.d.ts

@@ -73,6 +73,7 @@ declare module 'vue' {
     ColumnFilterBadge: typeof import('./src/components/ColumnFilterBadge.vue')['default']
     ColumnFilterDropdown: typeof import('./src/components/ColumnFilterDropdown.vue')['default']
     ContentTypeBadge: typeof import('./src/components/ContentTypeBadge.vue')['default']
+    copy: typeof import('./src/components/FiltersPanelSection copy.vue')['default']
     DismissableAlert: typeof import('./src/components/DismissableAlert.vue')['default']
     DocumentActions: typeof import('./src/components/DocumentActions.vue')['default']
     DocumentAttachments: typeof import('./src/components/DocumentAttachments.vue')['default']
@@ -113,6 +114,13 @@ declare module 'vue' {
     FilterSearch: typeof import('./src/components/filter/FilterSearch.vue')['default']
     FilterSortByDropdown: typeof import('./src/components/filter/FilterSortByDropdown.vue')['default']
     FiltersPanel: typeof import('./src/components/FiltersPanel.vue')['default']
+    FiltersPanelSearch: typeof import('./src/components/FiltersPanelSearch.vue')['default']
+    FiltersPanelSection: typeof import('./src/components/FiltersPanelSection.vue')['default']
+    FiltersPanelSectionFilter: typeof import('./src/components/FiltersPanelSectionFilter.vue')['default']
+    FiltersPanelSectionFilterEntry: typeof import('./src/components/FiltersPanelSectionFilterEntry.vue')['default']
+    FiltersPanelSectionFilterFooter: typeof import('./src/components/FiltersPanelSectionFilterFooter.vue')['default']
+    FiltersPanelSectionTitle: typeof import('./src/components/FiltersPanelSectionTitle.vue')['default']
+    FiltersPanelToggler: typeof import('./src/components/FiltersPanelToggler.vue')['default']
     FilterStarred: typeof import('./src/components/filter/types/FilterStarred.vue')['default']
     FilterText: typeof import('./src/components/filter/types/FilterText.vue')['default']
     FindNamedEntitiesForm: typeof import('./src/components/FindNamedEntitiesForm.vue')['default']

src/components/FiltersPanelSearch.vue

@@ -0,0 +1,24 @@
+<script setup>
+import SearchFormControl from '@/components/SearchFormControl.vue'
+
+defineProps({
+  modelValue: {
+    type: String
+  },
+  placeholder: {
+    type: String,
+    default: 'Search in filters'
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <search-form-control
+    :model-value="modelValue"
+    :placeholder="placeholder"
+    class="filters-panel-search"
+    @update:modelValue="emit('update:modelValue', $event)"
+  />
+</template>

src/components/FiltersPanelSection.vue

@@ -0,0 +1,17 @@
+<script setup>
+import FiltersPanelSectionTitle from '@/components/FiltersPanelSectionTitle.vue'
+
+defineProps({
+  title: {
+    type: String
+  }
+})
+</script>
+
+<template>
+  <div class="filters-panel-section">
+    <filters-panel-section-title :title="title">
+      <slot name="title"></slot>
+    </filters-panel-section-title>
+  </div>
+</template>

src/components/FiltersPanelSectionFilter.vue

@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <div class="filters-panel-section-filter"></div>
+</template>

src/components/FiltersPanelSectionFilterEntry.vue

@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <div class="filters-panel-section-filter-entry"></div>
+</template>

src/components/FiltersPanelSectionFilterFooter.vue

@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <div class="filters-panel-section-filter-footer"></div>
+</template>

src/components/FiltersPanelSectionTitle.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  title: {
+    type: String
+  }
+})
+</script>
+
+<template>
+  <h3 class="filters-panel-section-title text-primary-emphasis">
+    <slot>{{ title }}</slot>
+  </h3>
+</template>
+
+<style lang="scss" scoped>
+.filters-panel-section-title {
+  font-size: 1em;
+}
+</style>

src/components/FiltersPanelToggler.vue

@@ -0,0 +1,11 @@
+<script setup>
+import IconButton from '@/components/IconButton.vue'
+
+const emit = defineEmits(['close'])
+</script>
+
+<template>
+  <icon-button class="filters-panel-toggler" variant="outline-dark" icon-left="x" @click="emit('close')">
+    <slot>Close filters</slot>
+  </icon-button>
+</template>

src/stories/components/FiltersPanel.stories.js

@@ -0,0 +1,46 @@
+import FiltersPanelToggler from "@/components/FiltersPanelToggler.vue"
+import FiltersPanelSearch from "@/components/FiltersPanelSearch.vue"
+import FiltersPanelSection from "@/components/FiltersPanelSection.vue"
+import FiltersPanelSectionTitle from "@/components/FiltersPanelSectionTitle.vue"
+import FiltersPanelSectionFilter from "@/components/FiltersPanelSectionFilter.vue"
+import FiltersPanelSectionFilterEntry from "@/components/FiltersPanelSectionFilterEntry.vue"
+import FiltersPanelSectionFilterFooter from "@/components/FiltersPanelSectionFilterFooter.vue"
+
+export default {
+  title: 'Components/FiltersPanel',
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+  render: (args) => ({
+    components: {
+      FiltersPanelToggler,
+      FiltersPanelSearch,
+      FiltersPanelSection,
+      FiltersPanelSectionTitle,
+      FiltersPanelSectionFilter,
+      FiltersPanelSectionFilterEntry,
+      FiltersPanelSectionFilterFooter
+    },
+    setup: () => ({ args }),
+    template: `
+      <div style="max-width: 320px; background-color: var(--bs-light-bg-subtle);" class="p-3">
+        <filters-panel-toggler class="mb-5" />
+        <filters-panel-search class="mb-5" />
+        <filters-panel-section title="Documents info">
+          <filters-panel-section-filter name="project" title="Project">
+            <filters-panel-section-filter-entry label="Banana Papers" value="banana-papers" />
+            <filters-panel-section-filter-entry label="Citrus Confidential" value="citrus-confidential" />
+            <filters-panel-section-filter-entry label="FigCEN Files" value="figcen-files" />
+          </filters-panel-section-filter>
+          <filters-panel-section-filter name="contentType" title="File type">
+            <filters-panel-section-filter-entry label="Portable Document Format (PDF)" value="application/pdf" />
+            <filters-panel-section-filter-entry label="JPEG" value="image/jpg" />
+            <filters-panel-section-filter-entry label="Excel 95-2003 Wordbook" value="application/vnd.ms-excel" />
+          </filters-panel-section-filter>
+        </filters-panel-section>
+      </div>
+    `
+  })
+}
+
+export const Default = {}

src/stories/components/FiltersPanelSearch.stories.js

@@ -0,0 +1,13 @@
+export default {
+  title: 'Components/FiltersPanel/Search',
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+  render: (args) => ({
+    components: { },
+    setup: () => ({ args }),
+    template: ``
+  })
+}
+
+export const Default = {}

src/stories/components/FiltersPanelSection.stories.js

@@ -0,0 +1,13 @@
+export default {
+  title: 'Components/FiltersPanel/Section',
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+  render: (args) => ({
+    components: { },
+    setup: () => ({ args }),
+    template: ``
+  })
+}
+
+export const Default = {}

src/stories/components/FiltersPanelSectionFilter.stories.js

@@ -0,0 +1,13 @@
+export default {
+  title: 'Components/FiltersPanel/Section/Filter',
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+  render: (args) => ({
+    components: { },
+    setup: () => ({ args }),
+    template: ``
+  })
+}
+
+export const Default = {}

src/stories/components/FiltersPanelSectionFilterEntry.stories.js

@@ -0,0 +1,13 @@
+export default {
+  title: 'Components/FiltersPanel/Section/Filter/Entry',
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+  render: (args) => ({
+    components: { },
+    setup: () => ({ args }),
+    template: ``
+  })
+}
+
+export const Default = {}

src/stories/components/FiltersPanelSectionFilterFooter.stories.js

@@ -0,0 +1,13 @@
+export default {
+  title: 'Components/FiltersPanel/Section/Filter/Footer',
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+  render: (args) => ({
+    components: { },
+    setup: () => ({ args }),
+    template: ``
+  })
+}
+
+export const Default = {}

src/stories/components/FiltersPanelSectionTitle.stories.js

@@ -0,0 +1,13 @@
+export default {
+  title: 'Components/FiltersPanel/Section/Title',
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+  render: (args) => ({
+    components: { },
+    setup: () => ({ args }),
+    template: ``
+  })
+}
+
+export const Default = {}

src/stories/components/FiltersPanelToggler.stories.js

@@ -0,0 +1,13 @@
+export default {
+  title: 'Components/FiltersPanel/Toggler',
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+  render: (args) => ({
+    components: { },
+    setup: () => ({ args }),
+    template: ``
+  })
+}
+
+export const Default = {}