@globalbrain/sefirot 2.1.2 → 2.1.4

package/lib/components/SDropdownSectionFilter.vue

@@ -11,7 +11,7 @@ import SIcon from './SIcon.vue'
 const props = defineProps<{
   search?: boolean
   selected: MaybeRef<DropdownSectionFilterSelectedValue>
-  options: DropdownSectionFilterOption[]
+  options: MaybeRef<DropdownSectionFilterOption[]>
   onClick?(value: string | number | boolean): void
 }>()
 
@@ -19,12 +19,12 @@ const input = ref<HTMLElement | null>(null)
 const query = ref('')
 
 const fuse = computed(() => {
-  return new Fuse(props.options, { keys: ['label'] })
+  return new Fuse(unref(props.options), { keys: ['label'] })
 })
 
 const filteredOptions = computed(() => {
   return !props.search || !query.value
-    ? props.options
+    ? unref(props.options)
     : fuse.value.search(query.value).map((r) => r.item)
 })
 

package/lib/components/STable.vue

@@ -192,7 +192,7 @@ function updateColWidth(key: string, value: string) {
   &.head {
     position: var(--table-head-position, static);
     top: var(--table-head-top, auto);
-    z-index: 20;
+    z-index: 100;
     background-color: var(--bg-elv);
 
     &::-webkit-scrollbar {

package/lib/components/STableCellAvatars.vue

@@ -80,6 +80,10 @@ const names = computed(() => {
   border: 2px solid var(--c-bg-elv-up);
   border-radius: 50%;
   width: 28px;
+
+  .row:hover & {
+    border: 2px solid var(--c-bg-elv);
+  }
 }
 
 .names {

package/lib/components/STableCellPill.vue

@@ -32,13 +32,13 @@ const _color = computed(() => {
 
 <template>
   <div class="STableCellPill" :class="[_color ?? 'mute']">
-    <div class="value">{{ _value }}</div>
+    <div v-if="_value" class="value">{{ _value }}</div>
   </div>
 </template>
 
 <style scoped lang="postcss">
 .STableCellPill {
-  padding: 9px 16px 10px;
+  padding: 7px 16px 9px;
   min-height: 40px;
 }
 

package/lib/components/STableCellText.vue

@@ -76,6 +76,8 @@ const _value = computed(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
+  margin-left: -3px;
   width: 24px;
   height: 24px;
   transition: color 0.25s;

package/lib/components/STableColumn.vue

@@ -44,7 +44,7 @@ const active = computed(() => {
       return false
     }
 
-    return item.options.some((option) => {
+    return unref(item.options).some((option) => {
       return selected.includes(option.value)
     })
   })
@@ -93,7 +93,11 @@ async function adjustDialogPosition() {
   const position = (window.innerWidth - rect.right) > dialogWidth ? 'right' : 'left'
 
   top.value = `${rect.top + rect.height - 8}px`
-  left.value = position === 'right' ? `${rect.left - 4}px` : `${rect.right - dialogWidth - 4}px`
+  left.value =
+    Math.max(
+      16,
+      position === 'right' ? rect.left - 4 : rect.right - dialogWidth - 4
+    ) + 'px'
 }
 
 function startDialogPositionListener() {

package/lib/components/STableFooter.vue

@@ -43,10 +43,10 @@ const hasNext = computed(() => {
       <p class="info">{{ format(from) }}–{{ format(to) }} of {{ format(_total) }}</p>
 
       <div class="actions">
-        <button class="button prev" :class="{ active: hasPrev }" @click="onPrev">
+        <button class="button prev" :class="{ active: hasPrev }" @click="() => hasPrev && onPrev?.()">
           <SIcon :icon="IconCaretLeft" class="icon" />
         </button>
-        <button class="button next" :class="{ active: hasNext }" @click="onNext">
+        <button class="button next" :class="{ active: hasNext }" @click="() => hasNext && onNext?.()">
           <SIcon :icon="IconCaretRight" class="icon" />
         </button>
       </div>

package/lib/composables/Dropdown.ts

@@ -24,7 +24,7 @@ export interface DropdownSectionFilter extends DropdownSectionBase {
   type: 'filter'
   search?: boolean
   selected: MaybeRef<DropdownSectionFilterSelectedValue>
-  options: DropdownSectionFilterOption[]
+  options: MaybeRef<DropdownSectionFilterOption[]>
   onClick?(value: string | number | boolean): void
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "Vue Components for Global Brain Design System.",
   "files": [
     "lib"
@@ -23,24 +23,24 @@
     "@iconify-icons/ph": "^1.2.2",
     "@iconify/vue": "^4.0.0",
     "@types/body-scroll-lock": "^3.1.0",
-    "@types/markdown-it": "^12.2.3",
     "@types/lodash-es": "^4.17.6",
-    "@vuelidate/core": "^2.0.0-alpha.38",
-    "@vuelidate/validators": "^2.0.0-alpha.28",
-    "@vueuse/core": "^9.1.0",
+    "@types/markdown-it": "^12.2.3",
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
+    "@vueuse/core": "^9.3.0",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "dayjs": "^1.11.0",
-    "fuse.js": "^6.5.3",
+    "dayjs": "^1.11.5",
+    "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
     "normalize.css": "^8.0.1",
     "pinia": "^2.0.22",
-    "postcss": "^8.4.12",
+    "postcss": "^8.4.17",
     "postcss-nested": "^5.0.6",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.4",
     "v-calendar": "^3.0.0-alpha.8",
-    "vue": "^3.2.31",
-    "vue-router": "^4.0.14"
+    "vue": "^3.2.40",
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.10.7",
@@ -49,15 +49,15 @@
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash-es": "^4.17.6",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^18.7.18",
+    "@types/node": "^18.8.0",
     "@typescript-eslint/eslint-plugin": "^5.38.0",
     "@typescript-eslint/parser": "^5.38.0",
-    "@vitejs/plugin-vue": "^3.1.0",
+    "@vitejs/plugin-vue": "^3.1.2",
     "@vitest/coverage-c8": "^0.23.4",
-    "@vue/test-utils": "^2.0.2",
-    "@vuelidate/core": "^2.0.0-alpha.44",
-    "@vuelidate/validators": "^2.0.0-alpha.31",
-    "@vueuse/core": "^9.2.0",
+    "@vue/test-utils": "^2.1.0",
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
+    "@vueuse/core": "^9.3.0",
     "body-scroll-lock": "^4.0.0-beta.0",
     "chalk": "^4.1.2",
     "conventional-changelog-cli": "^2.2.2",
@@ -74,15 +74,15 @@
     "markdown-it": "^13.0.1",
     "normalize.css": "^8.0.1",
     "pinia": "^2.0.22",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.17",
     "postcss-nested": "^5.0.6",
     "semver": "^7.3.7",
-    "typescript": "^4.8.3",
+    "typescript": "^4.8.4",
     "v-calendar": "3.0.0-alpha.8",
-    "vite": "^3.1.3",
-    "vitepress": "1.0.0-alpha.15",
+    "vite": "^3.1.4",
+    "vitepress": "1.0.0-alpha.19",
     "vitest": "^0.23.4",
-    "vue": "^3.2.39",
+    "vue": "^3.2.40",
     "vue-router": "^4.1.5",
     "vue-tsc": "^0.40.13"
   },