@globalbrain/sefirot 4.38.1 → 4.40.0

package/config/vite.js

@@ -84,6 +84,7 @@ export const baseConfig = {
       'file-saver',
       'markdown-it > argparse',
       'markdown-it > entities',
+      'pinia',
       'qs'
     ],
     // @keep-sorted

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
+import SDivider from '../../../components/SDivider.vue'
 import { useQuery } from '../../../composables/Api'
 import { usePower } from '../../../composables/Power'
 import { type FieldData } from '../FieldData'
@@ -67,7 +68,7 @@ export interface Props {
   clickableFields?: string[]
 
   // Whether to show border around the catalog.
-  border?: boolean
+  showBorder?: boolean
 
   // Padding to add around various blocks in the catalog. This padding only
   // applies to the X axis (left and right). The default is `16px`.
@@ -180,14 +181,17 @@ const hasConditions = computed(() => {
   return _filters.value.length > 0 || _sort.value.length > 0
 })
 
-const borderWidth = computed(() => {
-  return props.border ? 'var(--lens-catalog-border-width, 1px)' : '0'
+const containerClasses = computed(() => {
+  return {
+    'show-empty-state': _showEmptyState.value,
+    'has-border': props.showBorder
+  }
 })
 
 const paddings = computed(() => ({
   '--lens-catalog-control-padding': `0 ${props.padding ?? '16px'}`,
-  '--lens-catalog-filters-block-padding': `12px ${props.padding ?? '16px'}`,
-  '--lens-catalog-sorts-block-padding': `12px ${props.padding ?? '16px'}`,
+  '--lens-catalog-filters-block-padding': `8px ${props.padding ?? '16px'}`,
+  '--lens-catalog-sorts-block-padding': `8px ${props.padding ?? '16px'}`,
   '--lens-catalog-footer-padding': `0 ${props.padding ?? '16px'}`,
   '--table-padding-left': `calc(${props.padding ?? '16px'} - 16px)`
 }))
@@ -195,7 +199,7 @@ const paddings = computed(() => ({
 const conditionBlocksSize = useElementSize(conditionBlocksEl)
 
 const headerHeight = 'var(--lens-catalog-global-height-offset)'
-const controlHeight = '48px - 1px'
+const controlHeight = '56px - 1px'
 const conditionBlocksHeight = computed(() => conditionBlocksSize.height.value > 0 ? `${conditionBlocksSize.height.value}px - 1px` : '0px')
 const columnsHeight = '40px - 1px'
 const footerHeight = '56px - 1px'
@@ -212,7 +216,6 @@ const containerMinHeight = computed(() => {
 
 const containerStyles = computed(() => {
   return {
-    borderWidth: borderWidth.value,
     ...paddings.value,
     ...(containerMinHeight.value ?? {})
   }
@@ -364,7 +367,7 @@ defineExpose({
 </script>
 
 <template>
-  <SCard class="LensCatalog" :class="{ 'show-empty-state': _showEmptyState }" :style="containerStyles">
+  <div class="LensCatalog" :class="containerClasses" :style="containerStyles">
     <template v-if="_showEmptyState">
       <slot name="empty-state" />
     </template>
@@ -397,20 +400,25 @@ defineExpose({
       </LensCatalogControl>
       <div v-else class="control-skeleton" />
       <div v-if="!hideConditions && result && (_filters.length > 0 || _sort.length > 0)" ref="conditionBlocksEl" class="condition-blocks">
-        <LensCatalogStateFilter
-          v-if="_filters.length > 0"
-          :filters="_filters"
-          :fields="result.fields"
-          @reset="onResetFilters"
-        />
-        <LensCatalogStateSort
-          v-if="_sort.length > 0"
-          :fields="result.fields"
-          :sorts="_sort"
-          @reset="onResetSorts"
-        />
+        <template v-if="_filters.length > 0">
+          <SDivider />
+          <LensCatalogStateFilter
+            :filters="_filters"
+            :fields="result.fields"
+            @reset="onResetFilters"
+          />
+        </template>
+        <template v-if="_sort.length > 0">
+          <SDivider />
+          <LensCatalogStateSort
+            :fields="result.fields"
+            :sorts="_sort"
+            @reset="onResetSorts"
+          />
+        </template>
       </div>
-      <SCardBlock class="list" :style="tableMaxHeight">
+      <SDivider />
+      <div class="list" :style="tableMaxHeight">
         <LensTable
           :result
           :loading
@@ -430,7 +438,7 @@ defineExpose({
           @prev="onPrev"
           @next="onNext"
         />
-      </SCardBlock>
+      </div>
     </div>
 
     <SModal :open="filterDialog.state.value" @close="filterDialog.off">
@@ -455,16 +463,15 @@ defineExpose({
         @apply="onViewUpdated"
       />
     </SModal>
-  </SCard>
+  </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalog {
-  --c-bg-elv-2: var(--c-bg-1);
-  --c-bg-elv-3: var(--c-bg-1);
-  --c-bg-elv-4: var(--c-bg-2);
-
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+  background-color: var(--c-bg-1);
 }
 
 .LensCatalog.show-empty-state {
@@ -472,10 +479,25 @@ defineExpose({
   background-color: var(--c-bg-1);
 }
 
+.LensCatalog.has-border {
+  .container {
+    border: 1px solid var(--c-border);
+    border-radius: 12px;
+  }
+
+  :deep(.LensCatalogControl) {
+    border-radius: 11px 11px 0 0;
+  }
+
+  :deep(.LensCatalogFooter) {
+    border-radius: 0 0 11px 11px;
+  }
+}
+
 .container {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  flex-grow: 1;
   min-height: 100%;
 }
 
@@ -483,18 +505,10 @@ defineExpose({
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  border-radius: 0 0 5px 5px;
 }
 
 .control-skeleton {
-  height: 48px;
+  height: 56px;
   background-color: var(--c-bg-1);
 }
-
-.condition-blocks {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  background-color: var(--c-gutter);
-}
 </style>

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

@@ -81,7 +81,7 @@ function createFilterPresetOptions(): ActionList {
 </script>
 
 <template>
-  <SCardBlock class="LensCatalogControl">
+  <div class="LensCatalogControl">
     <template v-if="!selected || selected.length === 0">
       <div class="main">
         <SInputText
@@ -95,7 +95,6 @@ function createFilterPresetOptions(): ActionList {
         />
         <SActionMenu
           v-if="filterPresets?.length"
-          type="outline"
           size="sm"
           :icon="IconLightning"
           :label="t.a_filter_preset"
@@ -103,14 +102,12 @@ function createFilterPresetOptions(): ActionList {
         />
         <SButton
           v-if="showFilters"
-          type="outline"
           size="sm"
           :icon="IconFunnelSimple"
           :label="t.a_filter"
           @click="$emit('filter')"
         />
         <SButton
-          type="outline"
           size="sm"
           :icon="IconSlidersHorizontal"
           :label="t.a_view"
@@ -120,7 +117,6 @@ function createFilterPresetOptions(): ActionList {
       <div class="sub">
         <slot name="sub-left" />
         <SButton
-          type="outline"
           size="sm"
           :icon="isConditionActive ? IconBookOpenText : IconBook"
           :disabled="isConditionDisabled"
@@ -142,16 +138,16 @@ function createFilterPresetOptions(): ActionList {
         </div>
       </div>
     </template>
-  </SCardBlock>
+  </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogControl {
   display: flex;
   align-items: center;
-  border-radius: 5px 5px 0 0;
   padding: var(--lens-catalog-control-padding, 0 12px);
-  height: 48px;
+  height: 56px;
+  background-color: var(--c-bg-1);
 }
 
 .main {

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import SPagination from '../../../components/SPagination.vue'
 import { type LensResult } from '../LensResult'
 
 defineProps<{
@@ -14,28 +15,27 @@ defineEmits<{
 
 <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>
+    <SPagination
+      size="small"
+      align="right"
+      :total="result.pagination.total"
+      :page="result.pagination.page"
+      :per-page="result.pagination.perPage"
+      :disabled="loading"
+      @prev="$emit('prev')"
+      @next="$emit('next')"
+    />
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogFooter {
   position: relative;
   z-index: 10;
   display: flex;
-  flex-shrink: 0;
+  justify-content: flex-end;
   align-items: center;
+  flex-shrink: 0;
   margin-top: -1px;
   border-top: 1px solid var(--c-gutter);
   border-radius: 0 0 5px 5px;

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

@@ -88,7 +88,7 @@ function isConnector(value: any): value is '$and' | '$or' {
 </script>
 
 <template>
-  <SCardBlock class="LensCatalogStateFilter">
+  <div class="LensCatalogStateFilter">
     <div v-if="!isOpen" class="closed">
       <span class="filter-count">{{ t.filter_count(group.count) }}</span>
     </div>
@@ -111,10 +111,10 @@ function isConnector(value: any): value is '$and' | '$or' {
         </span>
       </button>
     </div>
-  </SCardBlock>
+  </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogStateFilter {
   display: flex;
   gap: 16px;

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

@@ -54,7 +54,7 @@ const valueText = computedAsync(async () => {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogStateFilterCondition {
   display: flex;
   gap: 1px;

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

@@ -49,7 +49,7 @@ const connectorTextDict = {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogStateFilterGroup {
   display: flex;
   flex-direction: column;

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

@@ -50,7 +50,7 @@ function getOrderText(sort: LensQuerySort): string {
 </script>
 
 <template>
-  <SCardBlock class="LensCatalogStateSort">
+  <div class="LensCatalogStateSort">
     <div v-if="!isOpen" class="closed">
       <span class="sort-count">{{ t.sort_count(sorts.length) }}</span>
     </div>
@@ -72,10 +72,10 @@ function getOrderText(sort: LensQuerySort): string {
         </span>
       </button>
     </div>
-  </SCardBlock>
+  </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogStateSort {
   display: flex;
   gap: 16px;

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

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import SButton from '../../../components/SButton.vue'
+import SCard from '../../../components/SCard.vue'
+import SCardBlock from '../../../components/SCardBlock.vue'
+import SCardClose from '../../../components/SCardClose.vue'
+import SCardFooter from '../../../components/SCardFooter.vue'
+import SContent from '../../../components/SContent.vue'
+import SDoc from '../../../components/SDoc.vue'
 import { useData } from '../../../composables/Data'
 import { useLang, useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
@@ -129,6 +136,7 @@ async function onApply() {
 
 <template>
   <SCard class="LensFormFilters" size="xlarge">
+    <SCardClose @click="$emit('cancel')" />
     <SCardBlock class="s-p-32">
       <SDoc>
         <SContent>
@@ -143,27 +151,18 @@ async function onApply() {
         />
       </SDoc>
     </SCardBlock>
-    <SCardBlock class="s-py-16 s-px-32">
-      <SControl size="md">
-        <SControlRight>
-          <SControlButton
-            :label="t.a_cancel"
-            @click="$emit('cancel')"
-          />
-          <SControlButton
-            mode="info"
-            :label="t.a_apply"
-            @click="onApply"
-          />
-        </SControlRight>
-      </SControl>
-    </SCardBlock>
+    <SCardFooter class="s-py-16 s-px-32">
+      <SButton
+        size="md"
+        :label="t.a_cancel"
+        @click="$emit('cancel')"
+      />
+      <SButton
+        size="md"
+        mode="info"
+        :label="t.a_apply"
+        @click="onApply"
+      />
+    </SCardFooter>
   </SCard>
 </template>
-
-<style scoped lang="postcss">
-.LensFormFilters {
-  --c-bg-elv-2: var(--c-bg-1);
-  --c-bg-elv-3: var(--c-bg-1);
-}
-</style>

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

@@ -175,7 +175,7 @@ async function resolveInput() {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensFormSearchCondition {
   display: grid;
   grid-template-columns: 256px 160px minmax(0, 1fr) 32px;

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

@@ -129,7 +129,7 @@ function onAddGroup() {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensFormFilterGroup {
   display: flex;
   flex-direction: column;

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

@@ -1,4 +1,11 @@
 <script setup lang="ts">
+import SButton from '../../../components/SButton.vue'
+import SCard from '../../../components/SCard.vue'
+import SCardBlock from '../../../components/SCardBlock.vue'
+import SCardClose from '../../../components/SCardClose.vue'
+import SCardFooter from '../../../components/SCardFooter.vue'
+import SContent from '../../../components/SContent.vue'
+import SDoc from '../../../components/SDoc.vue'
 import SInputCheckbox from '../../../components/SInputCheckbox.vue'
 import SInputNumber from '../../../components/SInputNumber.vue'
 import SInputText from '../../../components/SInputText.vue'
@@ -91,6 +98,7 @@ async function onSave() {
 
 <template>
   <SCard class="LensFormOverrideBase" size="large">
+    <SCardClose @click="$emit('cancel')" />
     <SCardBlock class="s-p-32">
       <SDoc>
         <SContent>
@@ -147,30 +155,23 @@ async function onSave() {
         </div>
       </SDoc>
     </SCardBlock>
-    <SCardBlock class="s-py-16 s-px-32">
-      <SControl size="md">
-        <SControlRight>
-          <SControlButton
-            :label="t.a_cancel"
-            @click="$emit('cancel')"
-          />
-          <SControlButton
-            mode="info"
-            :label="t.a_apply"
-            @click="onSave"
-          />
-        </SControlRight>
-      </SControl>
-    </SCardBlock>
+    <SCardFooter class="s-py-16 s-px-32">
+      <SButton
+        size="md"
+        :label="t.a_cancel"
+        @click="$emit('cancel')"
+      />
+      <SButton
+        size="md"
+        mode="info"
+        :label="t.a_apply"
+        @click="onSave"
+      />
+    </SCardFooter>
   </SCard>
 </template>
 
-<style scoped lang="postcss">
-.LensFormOverrideBase {
-  --c-bg-elv-2: var(--c-bg-1);
-  --c-bg-elv-3: var(--c-bg-1);
-}
-
+<style scoped>
 .fieldset {
   display: flex;
   flex-direction: column;

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

@@ -8,7 +8,14 @@ import { cloneDeep } from 'lodash-es'
 import { computed, ref } from 'vue'
 import { useDraggable } from 'vue-draggable-plus'
 import SButton from '../../../components/SButton.vue'
+import SCard from '../../../components/SCard.vue'
+import SCardBlock from '../../../components/SCardBlock.vue'
+import SCardClose from '../../../components/SCardClose.vue'
+import SCardFooter from '../../../components/SCardFooter.vue'
+import SContent from '../../../components/SContent.vue'
+import SDoc from '../../../components/SDoc.vue'
 import SInputCheckbox from '../../../components/SInputCheckbox.vue'
+import SModal from '../../../components/SModal.vue'
 import { useLang, useTrans } from '../../../composables/Lang'
 import { usePower } from '../../../composables/Power'
 import { type FieldData } from '../FieldData'
@@ -149,6 +156,7 @@ async function onApply() {
 
 <template>
   <SCard class="LensFormView" size="medium">
+    <SCardClose @click="$emit('cancel')" />
     <SCardBlock class="s-p-32">
       <SDoc>
         <SContent>
@@ -217,21 +225,19 @@ async function onApply() {
         </div>
       </SDoc>
     </SCardBlock>
-    <SCardBlock class="s-py-16 s-px-32">
-      <SControl size="md">
-        <SControlRight>
-          <SControlButton
-            :label="t.a_cancel"
-            @click="$emit('cancel')"
-          />
-          <SControlButton
-            mode="info"
-            :label="t.a_apply"
-            @click="onApply"
-          />
-        </SControlRight>
-      </SControl>
-    </SCardBlock>
+    <SCardFooter class="s-py-16 s-px-32">
+      <SButton
+        size="md"
+        :label="t.a_cancel"
+        @click="$emit('cancel')"
+      />
+      <SButton
+        size="md"
+        mode="info"
+        :label="t.a_apply"
+        @click="onApply"
+      />
+    </SCardFooter>
 
     <SModal :open="editDialog.state.value" @close="editDialog.off()">
       <LensFormOverride
@@ -246,12 +252,7 @@ async function onApply() {
   </SCard>
 </template>
 
-<style scoped lang="postcss">
-.LensFormView {
-  --c-bg-elv-2: var(--c-bg-1);
-  --c-bg-elv-3: var(--c-bg-1);
-}
-
+<style scoped>
 .main {
   display: flex;
   flex-direction: column;
@@ -286,15 +287,13 @@ async function onApply() {
 .input {
   display: flex;
   flex-grow: 1;
-  gap: 1px;
-  border: 1px dashed var(--c-divider);
+  border: 1px dashed var(--input-border-color);
   border-radius: 6px;
-  background-color: var(--c-gutter);
   overflow: hidden;
   transition: border-color 0.25s;
 
   &:hover {
-    border-color: var(--c-border-mute-2);
+    border-color: var(--input-hover-border-color);
   }
 }
 
@@ -318,7 +317,7 @@ async function onApply() {
   display: flex;
   align-items: center;
   flex-grow: 1;
-  padding: 0 8px;
+  padding: 0 8px 0 0;
   background-color: var(--c-bg-1);
 }
 

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

@@ -117,7 +117,7 @@ function onSortUpdated(sort: LensQuerySort) {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensTable {
   display: flex;
   flex-direction: column;
@@ -132,8 +132,6 @@ function onSortUpdated(sort: LensQuerySort) {
    * but it is quite tricky to scope the desired field in CSS at the moment.
    */
   font-feature-settings: "tnum";
-
-  --c-bg-elv-3: var(--c-bg-1);
 }
 
 .LensTable.is-loading,

package/lib/components/SAvatar.vue

@@ -55,7 +55,7 @@ const tooltipPosition = computed(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--c-bg-elv-1);
+  background-color: var(--c-bg-1);
   border-radius: 50%;
   overflow: hidden;
 }
@@ -115,6 +115,11 @@ const tooltipPosition = computed(() => {
 }
 
 .SAvatar.no-image {
-  border: 1px solid var(--c-border-mute-1);
+  border: 1px solid var(--c-border);
+  background-color: var(--c-bg-3);
+
+  .dark & {
+    border-color: transparent;
+  }
 }
 </style>

package/lib/components/SAvatarStack.vue

@@ -42,11 +42,12 @@ const count = computed(() => {
 .SAvatarStack {
   display: flex;
 
-  :slotted(.SAvatar), :deep(.SAvatar), .more {
+  :slotted(.SAvatar),
+  :deep(.SAvatar),
+  .more {
     flex-shrink: 0;
-    border: 2px solid var(--c-bg-elv-2);
-    border-radius: 50%;
     overflow: hidden;
+    box-shadow: 0 0 0 2px var(--c-bg-1);
   }
 
   &.mini > :deep(*):not(:last-child)   { margin-right: -6px; }
@@ -62,7 +63,7 @@ const count = computed(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--c-bg-mute-1);
+  background-color: var(--c-bg-3);
   border-radius: 50%;
   line-height: 1;
   color: var(--c-text-2);