@globalbrain/sefirot 2.14.1 → 2.16.0

package/lib/composables/Dropdown.ts

@@ -1,4 +1,5 @@
-import { MaybeRef } from '@vueuse/core'
+import { MaybeRef, useElementBounding, useWindowSize } from '@vueuse/core'
+import { Ref, ref, unref } from 'vue'
 
 export type DropdownSection =
   | DropdownSectionMenu
@@ -55,6 +56,70 @@ export interface DropdownSectionFilterOptionAvatar extends DropdownSectionFilter
   image?: string | null
 }
 
+export interface ManualDropdownPosition {
+  position: Ref<'top' | 'bottom'>
+  update(): void
+}
+
 export function createDropdown(section: DropdownSection[]): DropdownSection[] {
   return section
 }
+
+export function useManualDropdownPosition(
+  container?: Ref<any>,
+  initPosition?: 'top' | 'bottom'
+): ManualDropdownPosition {
+  const el = container ?? ref<any>(null)
+
+  const { top, bottom } = useElementBounding(el)
+  const { height } = useWindowSize()
+
+  const position = ref<'top' | 'bottom'>('bottom')
+
+  const dialogHeight = 400
+
+  function update(): void {
+    if (initPosition) {
+      return
+    }
+
+    // If the space top of the input is not enough to show dialog, just show
+    // the dialog at the bottom of the input.
+    if (top.value < dialogHeight) {
+      position.value = 'bottom'
+      return
+    }
+
+    // Else show dialog depending on the space bottom of the input.
+    if (bottom.value + dialogHeight <= height.value) {
+      position.value = 'bottom'
+      return
+    }
+
+    position.value = 'top'
+  }
+
+  return {
+    position,
+    update
+  }
+}
+
+export function getSelectedOption(
+  sections: DropdownSection[]
+): DropdownSectionFilterOption | null {
+  for (const section of sections) {
+    if (section.type === 'filter') {
+      const options = unref(section.options)
+      const selected = unref(section.selected)
+
+      for (const option of options) {
+        if (option.value === selected) {
+          return option
+        }
+      }
+    }
+  }
+
+  return null
+}

package/lib/composables/Flyout.ts

@@ -1,7 +1,7 @@
-import { ref, watch } from 'vue'
+import { Ref, ref, watch } from 'vue'
 
-export function useFlyout() {
-  const container = ref<any>(null)
+export function useFlyout(container?: Ref<any>) {
+  const el = container ?? ref<any>(null)
 
   const isOpen = ref(false)
 
@@ -18,7 +18,7 @@ export function useFlyout() {
   }
 
   function closeOnClickOutside(event: any) {
-    if (!container.value.contains(event.target) && isVisible(container.value)) {
+    if (!el.value.contains(event.target) && isVisible(el.value)) {
       isOpen.value = false
     }
   }
@@ -37,7 +37,7 @@ export function useFlyout() {
   })
 
   return {
-    container,
+    container: el,
     isOpen,
     open,
     close,

package/lib/styles/variables.css

@@ -651,6 +651,7 @@
   --input-focus-border-color: var(--c-info-light);
   --input-error-text-color: var(--c-danger-text);
   --input-error-border-color: var(--c-danger-light);
+  --input-disabled-border-color: var(--c-divider-1);
   --input-disabled-value-color: var(--c-text-1);
   --input-disabled-bg-color: var(--c-mute);
 

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.14.1",
+  "version": "2.16.0",
+  "packageManager": "pnpm@7.26.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -20,26 +21,26 @@
     "lib"
   ],
   "peerDependencies": {
-    "@iconify-icons/ph": "^1.2.2",
-    "@iconify/vue": "^4.0.0",
+    "@iconify-icons/ph": "^1.2.3",
+    "@iconify/vue": "^4.0.2",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash-es": "^4.17.6",
     "@types/markdown-it": "^12.2.3",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
-    "@vueuse/core": "^9.3.0",
+    "@vueuse/core": "^9.11.1",
     "body-scroll-lock": "^4.0.0-beta.0",
     "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.17",
-    "postcss-nested": "^5.0.6",
-    "typescript": "^4.8.4",
+    "pinia": "^2.0.29",
+    "postcss": "^8.4.21",
+    "postcss-nested": "^6.0.0",
+    "typescript": "^4.9.4",
     "v-calendar": "^3.0.0-alpha.8",
-    "vue": "^3.2.40",
-    "vue-router": "^4.1.5"
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
   },
   "dependencies": {
     "dayjs": "^1.11.7"
@@ -48,17 +49,17 @@
     "@globalbrain/eslint-config": "^1.2.1",
     "@histoire/plugin-vue": "^0.12.4",
     "@iconify-icons/ph": "^1.2.3",
-    "@iconify/vue": "^4.0.1",
+    "@iconify/vue": "^4.0.2",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash-es": "^4.17.6",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^18.11.18",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vitest/coverage-c8": "^0.27.2",
+    "@vitest/coverage-c8": "^0.28.1",
     "@vue/test-utils": "^2.2.7",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
-    "@vueuse/core": "^9.6.0",
+    "@vueuse/core": "^9.11.1",
     "body-scroll-lock": "^4.0.0-beta.0",
     "chalk": "^4.1.2",
     "conventional-changelog-cli": "^2.2.2",
@@ -66,20 +67,19 @@
     "eslint": "^8.32.0",
     "execa": "^5.1.1",
     "fuse.js": "^6.6.2",
-    "happy-dom": "^8.1.4",
     "histoire": "^0.12.4",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.0.27",
-    "postcss": "^8.4.19",
+    "pinia": "^2.0.29",
+    "postcss": "^8.4.21",
     "postcss-nested": "^6.0.0",
     "semver": "^7.3.8",
     "typescript": "^4.9.4",
     "v-calendar": "3.0.0-alpha.8",
     "vite": "^4.0.4",
-    "vitepress": "1.0.0-alpha.38",
-    "vitest": "^0.27.2",
+    "vitepress": "1.0.0-alpha.40",
+    "vitest": "^0.28.1",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.0.24"