@globalbrain/sefirot 2.1.1 → 2.1.3

package/lib/components/SButtonGroup.vue

@@ -17,15 +17,14 @@
 <script setup lang="ts">
 import { computed, PropType } from 'vue'
 
-interface ButtonGroupItem {
+export interface ButtonGroupItem {
   label: string
   value: string
-  mode: Mode
+  mode?: Mode
 }
 
-type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
-
+export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
 
 const props = defineProps({
   items: { type: Array as PropType<ButtonGroupItem[]>, required: true },

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/SInputText.vue

@@ -122,30 +122,39 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 
 <style lang="postcss" scoped>
 .SInputText.mini {
-  .input,
-  .input-area {
+  .box {
+    padding: 0 8px;
     min-height: 32px;
-    padding: 3px 12px;
-    font-size: 14px;
+  }
 
-    &.has-icon {
-      padding-left: 30px;
-    }
+  .value,
+  .input,
+  .display {
+    min-height: 30px;
+  }
+
+  .input,
+  .display {
+    padding: 3px 0;
+    letter-spacing: 0;
+    line-height: 24px;
+    font-size: 14px;
   }
 
   .icon {
-    top: 9px;
-    left: 10px;
+    width: 22px;
+    height: 30px;
   }
 
   .icon-svg {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
   }
 }
 
 .SInputText.small {
   .box {
+    padding: 0 12px;
     min-height: 40px;
   }
 
@@ -155,10 +164,6 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     min-height: 38px;
   }
 
-  .box {
-    padding: 0 12px;
-  }
-
   .input,
   .display {
     padding: 5px 0;
@@ -179,25 +184,33 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 }
 
 .SInputText.medium {
-  .input,
-  .input-area {
+  .box {
+    padding: 0 12px;
     min-height: 48px;
-    padding: 11px 16px;
-    font-size: 16px;
+  }
 
-    &.has-icon {
-      padding-left: 36px;
-    }
+  .value,
+  .input,
+  .display {
+    min-height: 46px;
+  }
+
+  .input,
+  .display {
+    padding: 11px 0;
+    letter-spacing: 0;
+    line-height: 24px;
+    font-size: 16px;
   }
 
   .icon {
-    top: 16px;
-    left: 12px;
+    width: 28px;
+    height: 46px;
   }
 
   .icon-svg {
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
   }
 }
 

package/lib/components/SModal.vue

@@ -16,12 +16,12 @@ const emit = defineEmits<{
 
 const el = ref<any>(null)
 
-function onClick(e: any) {
+function onClick(e: MouseEvent) {
   if (!props.closable) {
     return
   }
 
-  if (e.target === el.value) {
+  if (e.button === 0 && e.target === el.value) {
     emit('close')
   }
 }
@@ -30,7 +30,7 @@ function onClick(e: any) {
 <template>
   <Teleport to="#sefirot-modals">
     <transition name="fade">
-      <div v-if="open" class="SModal" ref="el" @click="onClick">
+      <div v-if="open" class="SModal" ref="el" @mousedown="onClick">
         <slot />
       </div>
     </transition>

package/lib/components/SSheet.vue

@@ -13,7 +13,7 @@ withDefaults(defineProps<Props>(), {
   closable: true
 })
 
-const emit = defineEmits<{
+defineEmits<{
   (e: 'close'): void
 }>()
 </script>

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,7 +32,7 @@ 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>
 

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.1",
+  "version": "2.1.3",
   "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"
   },

package/lib/types/Utils.ts

@@ -1,3 +0,0 @@
-export type SyntheticEvent<E extends Event, T extends Element> = E & { target: T }
-export type SyntheticInputEvent<T extends Element = HTMLInputElement> = SyntheticEvent<InputEvent, T>
-export type SyntheticMouseEvent<T extends Element = HTMLElement> = SyntheticEvent<MouseEvent, T>