@globalbrain/sefirot 3.1.0 → 3.2.1

package/lib/components/SInputDate.vue

@@ -86,7 +86,7 @@ function emitBlur() {
           autocomplete="off"
           :value="inputValue"
           :disabled="disabled"
-          v-on="disabled || inputEvents"
+          v-on="disabled ? {} : inputEvents"
           @blur="emitBlur"
         >
       </DatePicker>

package/lib/components/SM.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useIntersectionObserver } from '@vueuse/core'
+import { ref } from 'vue'
+
+export interface Props {
+  as?: string
+  x?: string
+  y?: string
+  opacity?: string | number
+  duration?: string
+  delay?: string
+  once?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'div',
+  x: '0',
+  y: '0',
+  opacity: 1,
+  duration: '0.75s',
+  delay: '0s',
+  once: true
+})
+
+const target = ref<HTMLElement | null>(null)
+const on = ref(false)
+
+const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
+  on.value = isIntersecting
+  if (on.value && props.once) {
+    stop()
+  }
+})
+</script>
+
+<template>
+  <component :is="as" class="SM" :class="{ on }" ref="target">
+    <slot :on="on" />
+  </component>
+</template>
+
+<style scoped lang="postcss">
+.SM {
+  position: relative;
+  opacity: v-bind(opacity);
+  transform: translate(v-bind(x), v-bind(y));
+  transition: opacity, transform;
+  transition-duration: v-bind(duration);
+  transition-delay: v-bind(delay);
+}
+
+.SM.on {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+</style>

package/lib/components/SMFade.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import SM, { type Props } from './SM.vue'
+
+withDefaults(defineProps<Props>(), {
+  opacity: 0
+})
+</script>
+
+<template>
+  <SM class="SMFade" v-bind="$props" v-slot="{ on }">
+    <slot :on="on" />
+  </SM>
+</template>

package/lib/components/STable.vue

@@ -206,7 +206,11 @@ const resizeObserver = useResizeObserver(head, handleResize)
 
 function stopObserving() {
   const orders = ordersToShow.value
-  colWidths[orders[orders.length - 1]] = 'auto'
+  const lastOrder
+    = orders[orders.length - 1] === 'actions'
+      ? orders[orders.length - 2]
+      : orders[orders.length - 1]
+  colWidths[lastOrder] = 'auto'
   resizeObserver.stop()
 }
 

package/lib/styles/variables.css

@@ -228,9 +228,9 @@
 
 :root {
   --c-bg-elv-1: #ffffff;
-  --c-bg-elv-2: #f9f9f9;
+  --c-bg-elv-2: #f5f5f7;
   --c-bg-elv-3: #ffffff;
-  --c-bg-elv-4: #f9f9f9;
+  --c-bg-elv-4: #fafafa;
 
   --c-bg-mute-1: var(--c-gray-4);
   --c-bg-mute-2: var(--c-gray-5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "packageManager": "pnpm@8.8.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",