@globalbrain/sefirot 2.1.1 → 2.1.2

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Vue Components for Global Brain Design System.",
   "files": [
     "lib"

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>