@globalbrain/sefirot 4.34.1 → 4.35.0

package/lib/blocks/lens/components/LensCatalogFooter.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { type LensResult } from '../LensResult'
+
+defineProps<{
+  result: LensResult
+  loading: boolean
+}>()
+
+defineEmits<{
+  prev: []
+  next: []
+}>()
+</script>
+
+<template>
+  <div class="LensCatalogFooter">
+    <SControl>
+      <SControlRight>
+        <SControlPagination
+          :total="result.pagination.total"
+          :page="result.pagination.page"
+          :per-page="result.pagination.perPage"
+          :disabled="loading"
+          @prev="$emit('prev')"
+          @next="$emit('next')"
+        />
+      </SControlRight>
+    </SControl>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.LensCatalogFooter {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  margin-top: -1px;
+  border-top: 1px solid var(--c-gutter);
+  border-radius: 0 0 5px 5px;
+  padding: var(--lens-catalog-footer-padding, 0 12px);
+  height: 57px;
+  background-color: var(--c-bg-1);
+}
+</style>

package/lib/blocks/lens/components/LensCatalogStateFilter.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import IconArrowsInLineVertical from '~icons/ph/arrows-in-line-vertical'
+import IconArrowsOutLineVertical from '~icons/ph/arrows-out-line-vertical'
+import IconX from '~icons/ph/x'
+import { computed, ref } from 'vue'
+import { useTrans } from '../../../composables/Lang'
+import { type FieldData } from '../FieldData'
+import LensCatalogStateFilterGroup, { type FilterGroup } from './LensCatalogStateFilterGroup.vue'
+
+export interface Props {
+  fields: Record<string, FieldData>
+  filters: any[]
+}
+
+interface Count {
+  value: number
+}
+
+const props = defineProps<Props>()
+
+defineEmits<{
+  reset: []
+}>()
+
+const { t } = useTrans({
+  en: {
+    filter_count: (count: number) => `${count} filter${count > 1 ? 's' : ''} applied`,
+    reset_filters: 'Reset filters'
+  },
+  ja: {
+    filter_count: (count: number) => `${count}件のフィルターが適用中`,
+    reset_filters: 'フィルターをリセット'
+  }
+})
+
+const isOpen = ref(true)
+
+const group = computed(() => {
+  const count: Count = { value: 0 }
+  const group = lensFiltersToGroup(props.filters, '$and', count)
+  return {
+    count: count.value,
+    group
+  }
+})
+
+function lensFiltersToGroup(filters: any[], connector: '$and' | '$or', count: Count) {
+  const group = newFilterGroup()
+
+  group.connector = connector
+
+  for (const filter of filters) {
+    const [fieldOrConnector, operatorOrFilters, value] = filter
+
+    if (!isConnector(fieldOrConnector)) {
+      group.conditions.push({
+        field: fieldOrConnector,
+        operator: operatorOrFilters,
+        value
+      })
+      count.value++
+      continue
+    }
+
+    if (!Array.isArray(operatorOrFilters)) {
+      throw new TypeError(`Invalid filter format: ${JSON.stringify(filter)}`)
+    }
+
+    group.groups.push(
+      lensFiltersToGroup(operatorOrFilters, fieldOrConnector, count)
+    )
+  }
+
+  return group
+}
+
+function newFilterGroup(): FilterGroup {
+  return {
+    connector: '$and',
+    conditions: [],
+    groups: []
+  }
+}
+
+function isConnector(value: any): value is '$and' | '$or' {
+  return value === '$and' || value === '$or'
+}
+</script>
+
+<template>
+  <SCardBlock class="LensCatalogStateFilter">
+    <div v-if="!isOpen" class="closed">
+      <span class="filter-count">{{ t.filter_count(group.count) }}</span>
+    </div>
+    <div v-else class="filters">
+      <LensCatalogStateFilterGroup
+        :fields
+        :group="group.group"
+        is-root
+      />
+    </div>
+    <div class="actions">
+      <button class="action" @click="$emit('reset')">
+        <span class="action-icon"><IconX class="action-svg" /></span>
+        <span class="action-text">{{ t.reset_filters }}</span>
+      </button>
+      <button class="action icon" @click="isOpen = !isOpen">
+        <span class="action-icon">
+          <IconArrowsInLineVertical v-if="isOpen" class="action-svg" />
+          <IconArrowsOutLineVertical v-else class="action-svg" />
+        </span>
+      </button>
+    </div>
+  </SCardBlock>
+</template>
+
+<style scoped lang="postcss">
+.LensCatalogStateFilter {
+  display: flex;
+  gap: 16px;
+  padding: var(--lens-catalog-filters-block-padding, 12px);
+}
+
+.closed {
+  flex-grow: 1;
+  padding-left: 4px;
+  line-height: 24px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+
+.filters {
+  flex-grow: 1;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border: 1px dashed var(--c-divider);
+  border-radius: 6px;
+  padding: 0 6px;
+  height: 24px;
+  font-size: 12px;
+  color: var(--c-text-2);
+  background-color: var(--c-bg-1);
+  cursor: pointer;
+  transition: background-color 0.25s;
+
+  &.icon {
+    padding: 0;
+    width: 24px;
+  }
+
+  &:hover {
+    background-color: var(--c-bg-2);
+  }
+}
+
+.action-svg {
+  width: 14px;
+  height: 14px;
+}
+</style>

package/lib/blocks/lens/components/LensCatalogStateFilterCondition.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computedAsync } from '@vueuse/core'
+import { computed } from 'vue'
+import { type FieldData } from '../FieldData'
+import { type FilterOperator, FilterOperatorTextDict } from '../FilterOperator'
+import { useFieldFactory } from '../composables/FieldFactory'
+
+export interface Props {
+  fields: Record<string, FieldData>
+  condition: FilterCondition
+}
+
+export interface FilterCondition {
+  field: string
+  operator: FilterOperator
+  value: any
+}
+
+const props = defineProps<Props>()
+
+const fieldFactory = useFieldFactory()
+
+const field = computed(() => {
+  return fieldFactory.make(props.fields[props.condition.field])
+})
+
+const input = computed(() => {
+  return field.value.filterInputByOperator(props.condition.operator)
+})
+
+const fieldText = computed(() => {
+  return field.value.label()
+})
+
+const operatorText = computed(() => {
+  return FilterOperatorTextDict[props.condition.operator]
+})
+
+const valueText = computedAsync(async () => {
+  return input.value.valueToText(props.condition.value)
+}, '...')
+</script>
+
+<template>
+  <div class="LensCatalogStateFilterCondition">
+    <div class="field">{{ fieldText }}</div>
+    <div class="operator">{{ operatorText }}</div>
+    <div v-if="input === null" class="value">
+      ...
+    </div>
+    <div v-else class="value">
+      {{ valueText }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.LensCatalogStateFilterCondition {
+  display: flex;
+  gap: 1px;
+  border: 1px dashed var(--c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: var(--c-gutter);
+}
+
+.field,
+.operator,
+.value {
+  padding: 0 8px;
+  line-height: 22px;
+  font-size: 12px;
+  background-color: var(--c-bg-1);
+}
+
+.operator {
+  color: var(--c-text-2);
+}
+
+.value {
+  max-width: 192px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/lib/blocks/lens/components/LensCatalogStateFilterGroup.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { type FieldData } from '../FieldData'
+import LensCatalogStateFilterCondition, { type FilterCondition } from './LensCatalogStateFilterCondition.vue'
+
+export interface Props {
+  fields: Record<string, FieldData>
+  isRoot: boolean
+  group: FilterGroup
+}
+
+export interface FilterGroup {
+  connector: '$and' | '$or'
+  conditions: FilterCondition[]
+  groups: FilterGroup[]
+}
+
+defineProps<Props>()
+
+const connectorTextDict = {
+  $and: 'AND',
+  $or: 'OR'
+}
+</script>
+
+<template>
+  <div class="LensCatalogStateFilterGroup" :class="{ 'is-root': isRoot }">
+    <div v-if="!isRoot" class="connector">
+      <div class="connector-text">{{ connectorTextDict[group.connector] }}</div>
+    </div>
+    <div class="body">
+      <div v-if="group.conditions.length" class="conditions">
+        <LensCatalogStateFilterCondition
+          v-for="condition, index in group.conditions"
+          :key="index"
+          :fields
+          :condition
+        />
+      </div>
+      <div v-if="group.groups.length" class="groups">
+        <LensCatalogStateFilterGroup
+          v-for="g, i in group.groups"
+          :key="i"
+          :fields
+          :is-root="false"
+          :group="g"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.LensCatalogStateFilterGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px dashed var(--c-divider);
+  border-radius: 6px;
+  padding: 8px;
+
+  &.is-root {
+    border: 0;
+    padding: 0;
+  }
+}
+
+.connector {
+  display: flex;
+}
+
+.connector-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border: 1px dashed var(--c-divider);
+  border-radius: 6px;
+  padding: 0 8px;
+  height: 24px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex-grow: 1;
+}
+
+.conditions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.groups {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>

package/lib/blocks/lens/components/LensCatalogStateSort.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import IconArrowsInLineVertical from '~icons/ph/arrows-in-line-vertical'
+import IconArrowsOutLineVertical from '~icons/ph/arrows-out-line-vertical'
+import IconX from '~icons/ph/x'
+import { ref } from 'vue'
+import { useLang, useTrans } from '../../../composables/Lang'
+import { type FieldData } from '../FieldData'
+import { type LensQuerySort } from '../LensQuery'
+
+export interface Props {
+  fields: Record<string, FieldData>
+  sorts: LensQuerySort[]
+}
+
+const props = defineProps<Props>()
+
+defineEmits<{
+  reset: []
+}>()
+
+const lang = useLang()
+
+const { t } = useTrans({
+  en: {
+    sort_count: (count: number) => `${count} sort${count > 1 ? 's' : ''} applied`,
+    reset_sorts: 'Reset sorts'
+  },
+  ja: {
+    sort_count: (count: number) => `${count}件のソートが適用中`,
+    reset_sorts: 'ソートをリセット'
+  }
+})
+
+const isOpen = ref(true)
+
+const orderTextDict = {
+  asc: 'ASC',
+  desc: 'DESC'
+}
+
+function getFieldName(sort: LensQuerySort): string {
+  return lang === 'ja'
+    ? props.fields[sort[0]].labelJa
+    : props.fields[sort[0]].labelEn
+}
+
+function getOrderText(sort: LensQuerySort): string {
+  return orderTextDict[sort[1]]
+}
+</script>
+
+<template>
+  <SCardBlock class="LensCatalogStateSort">
+    <div v-if="!isOpen" class="closed">
+      <span class="sort-count">{{ t.sort_count(sorts.length) }}</span>
+    </div>
+    <div v-else class="sorts">
+      <div v-for="sort in sorts" :key="sort[0]" class="sort">
+        <div class="field">{{ getFieldName(sort) }}</div>
+        <div class="order">{{ getOrderText(sort) }}</div>
+      </div>
+    </div>
+    <div class="actions">
+      <button class="action" @click="$emit('reset')">
+        <span class="action-icon"><IconX class="action-svg" /></span>
+        <span class="action-text">{{ t.reset_sorts }}</span>
+      </button>
+      <button class="action icon" @click="isOpen = !isOpen">
+        <span class="action-icon">
+          <IconArrowsInLineVertical v-if="isOpen" class="action-svg" />
+          <IconArrowsOutLineVertical v-else class="action-svg" />
+        </span>
+      </button>
+    </div>
+  </SCardBlock>
+</template>
+
+<style scoped lang="postcss">
+.LensCatalogStateSort {
+  display: flex;
+  gap: 16px;
+  padding: var(--lens-catalog-sorts-block-padding, 12px);
+}
+
+.closed {
+  flex-grow: 1;
+  padding-left: 4px;
+  line-height: 24px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+
+.sorts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  flex-grow: 1;
+}
+
+.sort {
+  display: flex;
+  gap: 1px;
+  border: 1px dashed var(--c-divider);
+  border-radius: 6px;
+  background-color: var(--c-gutter);
+  overflow: hidden;
+}
+
+.field,
+.order {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 8px;
+  font-size: 12px;
+  height: 22px;
+  background-color: var(--c-bg-1);
+}
+
+.order {
+  color: var(--c-text-2);
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border: 1px dashed var(--c-divider);
+  border-radius: 6px;
+  padding: 0 6px;
+  height: 24px;
+  font-size: 12px;
+  color: var(--c-text-2);
+  background-color: var(--c-bg-1);
+  cursor: pointer;
+  transition: background-color 0.25s;
+
+  &.icon {
+    padding: 0;
+    width: 24px;
+  }
+
+  &:hover {
+    background-color: var(--c-bg-2);
+  }
+}
+
+.action-svg {
+  width: 14px;
+  height: 14px;
+}
+</style>