@globalbrain/sefirot 3.10.0 → 3.11.0

package/lib/components/SCardBlock.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-export type Space = 'compact' | 'wide'
+export type Space = 'compact' | 'wide' | 'xwide'
 
 defineProps<{
   space?: Space
@@ -19,6 +19,7 @@ defineProps<{
 
   &.compact { padding: 24px; }
   &.wide    { padding: 32px; }
+  &.xwide   { padding: 48px; }
 }
 
 .SCard > .SCardBlock:first-child {

package/lib/components/SCardFooter.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-export type Space = 'compact' | 'wide'
+export type Space = 'compact' | 'wide' | 'xwide'
 
 defineProps<{
   space?: Space

package/lib/components/SCardFooterActions.vue

@@ -13,5 +13,6 @@
 
   .SCardFooter.compact > & { padding: 12px 24px; }
   .SCardFooter.wide > &    { padding: 16px 32px; }
+  .SCardFooter.xwide > &   { padding: 24px 48px; }
 }
 </style>

package/lib/components/SContent.vue

@@ -11,8 +11,31 @@
   gap: 12px;
 }
 
+.SContent :deep(h1),
+.SContent :deep(.h1) {
+  margin: 0;
+  max-width: 640px;
+  line-height: 40px;
+  font-size: 32px;
+  font-weight: 500;
+  color: var(--c-text-1);
+}
+
+.SContent :deep(h2),
+.SContent :deep(.h2) {
+  border-top: 0;
+  margin: 0;
+  padding: 0;
+  max-width: 640px;
+  line-height: 28px;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--c-text-1);
+}
+
 .SContent :deep(p) {
   margin: 0;
+  max-width: 640px;
   line-height: 24px;
   font-size: 14px;
   font-weight: 400;
@@ -36,6 +59,7 @@
 .SContent :deep(ol) {
   margin: 0;
   padding-left: 0;
+  max-width: 640px;
   list-style: none;
 }
 

package/lib/components/SDivider.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="SDivider">
+    <div class="line" />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDivider {
+  padding: var(--divider-padding);
+}
+
+.line {
+  height: 1px;
+  background-color: var(--c-divider);
+}
+</style>

package/lib/components/SDoc.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="SDoc">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDoc {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.SDoc {
+  --divider-padding: 24px 0;
+}
+</style>

package/lib/components/SDocSection.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="SDocSection">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDocSection {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+</style>

package/lib/composables/Url.ts

@@ -1,3 +1,4 @@
+import isEqual from 'lodash-es/isEqual'
 import isPlainObject from 'lodash-es/isPlainObject'
 import { watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -38,7 +39,7 @@ export function useUrlQuerySync(
       flattenState[key] = cast ? cast(value) : value
     })
 
-    Object.assign(state, unflattenObject(flattenState))
+    deepAssign(state, unflattenObject(flattenState))
   }
 
   async function setQueryFromState() {
@@ -53,7 +54,7 @@ export function useUrlQuerySync(
       const value = flattenState[key]
       const initialValue = flattenInitialState[key]
 
-      if (value === initialValue) {
+      if (isEqual(value, initialValue)) {
         delete flattenQuery[key]
       } else {
         flattenQuery[key] = value
@@ -94,3 +95,25 @@ function unflattenObject(obj: Record<string, any>) {
     return acc
   }, {} as Record<string, any>)
 }
+
+function deepAssign(target: Record<string, any>, source: Record<string, any>) {
+  const dest = target
+  const src = source
+
+  if (isPlainObject(src)) {
+    Object.keys(src).forEach((key) => deepAssignBase(dest, src, key))
+  } else if (Array.isArray(src)) {
+    dest.length = src.length
+    src.forEach((_, key) => deepAssignBase(dest, src, key))
+  } else {
+    throw new TypeError('[deepAssign] src must be an object or array')
+  }
+}
+
+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 {
+    dest[key] = src[key]
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.10.0",
-  "packageManager": "pnpm@8.11.0",
+  "version": "3.11.0",
+  "packageManager": "pnpm@8.12.1",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -56,7 +56,7 @@
     "postcss": "^8.4.32",
     "postcss-nested": "^6.0.1",
     "v-calendar": "^3.1.2",
-    "vue": "^3.3.10",
+    "vue": "^3.3.11",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
@@ -82,7 +82,7 @@
     "@types/node": "^20.10.4",
     "@types/qs": "^6.9.10",
     "@vitejs/plugin-vue": "^4.5.2",
-    "@vitest/coverage-v8": "^1.0.2",
+    "@vitest/coverage-v8": "^1.0.4",
     "@vue/test-utils": "^2.4.3",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
@@ -99,13 +99,13 @@
     "postcss": "^8.4.32",
     "postcss-nested": "^6.0.1",
     "punycode": "^2.3.1",
-    "release-it": "^17.0.0",
+    "release-it": "^17.0.1",
     "typescript": "~5.3.3",
     "v-calendar": "^3.1.2",
-    "vite": "^5.0.6",
+    "vite": "^5.0.9",
     "vitepress": "1.0.0-rc.31",
-    "vitest": "^1.0.2",
-    "vue": "^3.3.10",
+    "vitest": "^1.0.4",
+    "vue": "^3.3.11",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.25"
   }