@globalbrain/sefirot 3.19.0 → 3.20.0

package/lib/composables/D.ts

@@ -6,12 +6,12 @@ export interface D<T extends Record<string, any>> {
 }
 
 export function useD<T extends Record<string, any>>(data: T): D<T> {
-  const initialData = JSON.parse(JSON.stringify(data))
+  const initialData = JSON.stringify(data)
 
   const refData = ref(data) as Ref<T>
 
   function init(): void {
-    refData.value = initialData
+    refData.value = JSON.parse(initialData)
   }
 
   return {

package/lib/composables/Url.ts

@@ -1,6 +1,6 @@
 import isEqual from 'lodash-es/isEqual'
 import isPlainObject from 'lodash-es/isPlainObject'
-import { watch } from 'vue'
+import { type MaybeRef, unref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 export interface UseUrlQuerySyncOptions {
@@ -9,20 +9,25 @@ export interface UseUrlQuerySyncOptions {
 }
 
 export function useUrlQuerySync(
-  state: Record<string, any>,
+  state: MaybeRef<Record<string, any>>,
   { casts = {}, exclude }: UseUrlQuerySyncOptions = {}
 ): void {
   const router = useRouter()
   const route = useRoute()
 
-  const flattenInitialState = flattenObject(JSON.parse(JSON.stringify(state)))
+  const flattenInitialState = flattenObject(
+    JSON.parse(JSON.stringify(unref(state)))
+  )
 
   setStateFromQuery()
 
-  watch(() => state, setQueryFromState, { deep: true, immediate: true })
+  watch(() => unref(state), setQueryFromState, {
+    deep: true,
+    immediate: true
+  })
 
   function setStateFromQuery() {
-    const flattenState = flattenObject(state)
+    const flattenState = flattenObject(unref(state))
     const flattenQuery = flattenObject(route.query)
 
     Object.keys(flattenQuery).forEach((key) => {
@@ -39,11 +44,11 @@ export function useUrlQuerySync(
       flattenState[key] = cast ? cast(value) : value
     })
 
-    deepAssign(state, unflattenObject(flattenState))
+    deepAssign(unref(state), unflattenObject(flattenState))
   }
 
   async function setQueryFromState() {
-    const flattenState = flattenObject(state)
+    const flattenState = flattenObject(unref(state))
     const flattenQuery = flattenObject(route.query)
 
     Object.keys(flattenState).forEach((key) => {
@@ -110,7 +115,11 @@ function deepAssign(target: Record<string, any>, source: Record<string, any>) {
   }
 }
 
-function deepAssignBase(dest: Record<string, any>, src: Record<string, any>, key: string | number) {
+function deepAssignBase(
+  dest: Record<string, any>,
+  src: Record<string, any>,
+  key: string | number
+) {
   if (typeof src[key] === 'object' && src[key] !== null) {
     deepAssign(dest[key], src[key])
   } else {

package/lib/styles/utilities.css

@@ -67,9 +67,9 @@
  * Spacing
  * -------------------------------------------------------------------------- */
 
-.m-auto  { margin: auto; }
-.my-auto { margin-top: auto; margin-bottom: auto; }
-.mx-auto { margin-right: auto; margin-left: auto; }
+.s-m-auto  { margin: auto; }
+.s-my-auto { margin-top: auto; margin-bottom: auto; }
+.s-mx-auto { margin-right: auto; margin-left: auto; }
 
 .s-p-8  { padding: 8px; }
 .s-p-12 { padding: 12px; }

package/package.json

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