@globalbrain/sefirot 3.29.2 → 3.31.0

package/lib/components/SInputTextarea.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
+import SInputSegments from './SInputSegments.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
@@ -24,6 +25,9 @@ const props = defineProps<{
   modelValue?: string | null
   hideError?: boolean
   validation?: Validatable
+  preview?: (value: string | null) => string
+  previewLabel?: string
+  writeLabel?: string
 }>()
 
 const emit = defineEmits<{
@@ -57,6 +61,8 @@ function emitBlur(e: FocusEvent): void {
   emit('update:model-value', v)
   emit('blur', v)
 }
+
+const isPreview = ref(false)
 </script>
 
 <template>
@@ -74,24 +80,96 @@ function emitBlur(e: FocusEvent): void {
     :hide-error="hideError"
     :validation="validation"
   >
-    <textarea
-      :id="name"
-      class="input"
-      :class="{ fill: rows === 'fill' }"
-      :placeholder="placeholder"
-      :rows="rows ?? 3"
-      :disabled="disabled"
-      :value="_value ?? undefined"
-      @input="emitInput"
-      @blur="emitBlur"
-    />
+    <div class="box">
+      <div v-if="preview !== undefined" class="control">
+        <SInputSegments
+          :options="[
+            { label: writeLabel ?? 'Write', value: false },
+            { label: previewLabel ?? 'Preview', value: true }
+          ]"
+          v-model="isPreview"
+          size="mini"
+        />
+      </div>
+      <textarea
+        v-show="!isPreview"
+        :id="name"
+        class="input"
+        :placeholder="placeholder"
+        :rows="rows ?? 3"
+        :disabled="disabled"
+        :value="_value ?? undefined"
+        @input="emitInput"
+        @blur="emitBlur"
+      />
+      <div
+        v-if="preview !== undefined && isPreview"
+        class="prose"
+        :class="!_value && 'empty'"
+        v-html="preview(_value)"
+      />
+    </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 
 <style scoped lang="postcss">
+.box {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex-grow: 1;
+  border: 1px solid var(--input-border-color);
+  border-radius: 6px;
+  width: 100%;
+  background-color: var(--c-gutter);
+  overflow: hidden;
+  transition: border-color 0.25s;
+
+  &:has(.input:hover) {
+    border-color: var(--input-hover-border-color);
+  }
+
+  &:has(.input:focus) {
+    border-color: var(--input-focus-border-color);
+  }
+}
+
+.control {
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  height: 48px;
+  background-color: var(--c-bg-elv-3);
+}
+
+.input,
+.prose {
+  display: block;
+  flex-grow: 1;
+  width: 100%;
+  font-family: var(--input-value-font-family);
+  font-weight: 400;
+  background-color: var(--input-bg-color);
+}
+
+.input {
+  &::placeholder {
+    color: var(--input-placeholder-color);
+  }
+}
+
+.prose {
+  background-color: var(--c-bg-elv-3);
+
+  &.empty {
+    color: var(--input-placeholder-color);
+  }
+}
+
 .SInputTextarea.mini {
-  .input {
+  .input,
+  .prose {
     padding: 6px 10px;
     width: 100%;
     min-height: 80px;
@@ -101,7 +179,8 @@ function emitBlur(e: FocusEvent): void {
 }
 
 .SInputTextarea.small {
-  .input {
+  .input,
+  .prose {
     padding: 7px 12px;
     width: 100%;
     min-height: 96px;
@@ -111,7 +190,8 @@ function emitBlur(e: FocusEvent): void {
 }
 
 .SInputTextarea.medium {
-  .input {
+  .input,
+  .prose {
     padding: 11px 16px;
     width: 100%;
     min-height: 96px;
@@ -120,10 +200,24 @@ function emitBlur(e: FocusEvent): void {
   }
 }
 
-.SInputTextarea.disabled {
+.SInputTextarea.fill {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+
   .input,
-  .input:hover {
+  .prose {
+    height: 100%;
+  }
+}
+
+.SInputTextarea.disabled {
+  .box {
     border-color: var(--input-disabled-border-color);
+  }
+
+  .input {
     color: var(--input-disabled-value-color);
     background-color: var(--input-disabled-bg-color);
     cursor: not-allowed;
@@ -131,42 +225,8 @@ function emitBlur(e: FocusEvent): void {
 }
 
 .SInputTextarea.has-error {
-  .input {
+  .box {
     border-color: var(--input-error-border-color);
-
-    &:hover,
-    &:focus {
-      border-color: var(--input-error-border-color);
-    }
-  }
-}
-
-.input {
-  display: block;
-  flex-grow: 1;
-  border: 1px solid var(--input-border-color);
-  border-radius: 6px;
-  width: 100%;
-  font-family: var(--input-value-font-family);
-  font-weight: 400;
-  background-color: var(--input-bg-color);
-  transition: border-color 0.25s, background-color 0.25s;
-
-  &::placeholder {
-    color: var(--input-placeholder-color);
-  }
-
-  &:hover {
-    border-color: var(--input-hover-border-color);
-  }
-
-  &:focus,
-  &:hover:focus {
-    border-color: var(--input-focus-border-color);
-  }
-
-  &.fill {
-    height: 100%;
   }
 }
 </style>

package/lib/composables/Markdown.ts

@@ -12,6 +12,7 @@ export interface UseMarkdownOptions extends MarkdownIt.Options {
 
 export function useMarkdown(options: UseMarkdownOptions = {}): UseMarkdown {
   const md = new MarkdownIt({
+    html: true,
     linkify: true,
     ...options
   })

package/lib/composables/Url.ts

@@ -1,128 +1,141 @@
 import isEqual from 'lodash-es/isEqual'
-import isPlainObject from 'lodash-es/isPlainObject'
-import { type MaybeRef, unref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { type MaybeRef, nextTick, unref, watch } from 'vue'
+import { type LocationQuery, useRoute, useRouter } from 'vue-router'
 
 export interface UseUrlQuerySyncOptions {
   casts?: Record<string, (value: any) => any>
   exclude?: string[]
 }
 
+/**
+ * Sync between the given state and the URL query params.
+ *
+ * Caveats:
+ * - Vulnerable to prototype pollution.
+ * - Does not support objects inside arrays.
+ */
 export function useUrlQuerySync(
   state: MaybeRef<Record<string, any>>,
-  { casts = {}, exclude }: UseUrlQuerySyncOptions = {}
+  { casts = {}, exclude = [] }: UseUrlQuerySyncOptions = {}
 ): void {
-  const router = useRouter()
   const route = useRoute()
+  const router = useRouter()
 
-  const flattenInitialState = flattenObject(
-    JSON.parse(JSON.stringify(unref(state)))
-  )
-
-  setStateFromQuery()
-
-  watch(() => unref(state), setQueryFromState, {
-    deep: true,
-    immediate: true
-  })
+  const flattenedDefaultState = flattenObject(unref(state))
 
-  function setStateFromQuery() {
-    const flattenState = flattenObject(unref(state))
-    const flattenQuery = flattenObject(route.query)
+  let isSyncing = false
 
-    Object.keys(flattenQuery).forEach((key) => {
-      if (exclude?.includes(key)) {
-        return
+  watch(
+    () => route.query,
+    async () => {
+      if (!isSyncing) {
+        isSyncing = true
+        await setState()
+        isSyncing = false
       }
+    },
+    { deep: true, immediate: true }
+  )
 
-      const value = flattenQuery[key]
-      if (value === undefined) {
-        return
+  watch(
+    () => unref(state),
+    async () => {
+      if (!isSyncing) {
+        isSyncing = true
+        await setQuery()
+        isSyncing = false
       }
+    },
+    { deep: true }
+  )
 
-      const cast = casts[key]
-      flattenState[key] = cast ? cast(value) : value
-    })
+  async function setState() {
+    const newState = unflattenObject({ ...flattenedDefaultState, ...normalizeQuery(route.query) })
+    deepAssign(unref(state), newState)
 
-    deepAssign(unref(state), unflattenObject(flattenState))
+    await nextTick()
+    await setQuery()
   }
 
-  async function setQueryFromState() {
-    const flattenState = flattenObject(unref(state))
-    const flattenQuery = flattenObject(route.query)
+  async function setQuery() {
+    const flattenedState = flattenObject(unref(state))
+    const newQuery: Record<string, any> = {}
 
-    Object.keys(flattenState).forEach((key) => {
-      if (exclude?.includes(key)) {
-        return
+    for (const key in flattenedState) {
+      if (!exclude.includes(key) && flattenedDefaultState[key] !== flattenedState[key]) {
+        newQuery[key] = flattenedState[key]
       }
+    }
 
-      const value = flattenState[key]
-      const initialValue = flattenInitialState[key]
+    const currentQuery = normalizeQuery(route.query)
 
-      if (isEqual(value, initialValue)) {
-        delete flattenQuery[key]
-      } else {
-        flattenQuery[key] = value
-      }
+    if (!isEqual(newQuery, currentQuery)) {
+      await router.replace({ query: unflattenObject(newQuery) })
+    }
+  }
+
+  function normalizeQuery(query: LocationQuery): Record<string, any> {
+    const flattenedQuery = flattenObject(query)
+    const result: Record<string, any> = {}
 
-      if (flattenQuery[key] === undefined) {
-        delete flattenQuery[key]
+    for (const key in flattenedQuery) {
+      if (!exclude.includes(key)) {
+        result[key] = casts[key] ? casts[key](flattenedQuery[key]) : flattenedQuery[key]
       }
-    })
+    }
 
-    await router.replace({ query: unflattenObject(flattenQuery) })
+    return result
   }
 }
 
-function flattenObject(obj: Record<string, any>, prefix = '') {
-  return Object.keys(obj).reduce((acc, k) => {
-    const pre = prefix.length ? `${prefix}.` : ''
-    if (isPlainObject(obj[k])) {
-      Object.assign(acc, flattenObject(obj[k], pre + k))
+function flattenObject(obj: Record<string, any>, path: string[] = []): Record<string, any> {
+  const result: Record<string, any> = {}
+
+  for (const key in obj) {
+    const value = obj[key]
+
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      Object.assign(result, flattenObject(value, [...path, key]))
     } else {
-      acc[pre + k] = obj[k]
+      result[path.concat(key).join('.')] = value
     }
-    return acc
-  }, {} as Record<string, any>)
-}
+  }
 
-function unflattenObject(obj: Record<string, any>) {
-  return Object.keys(obj).reduce((acc, k) => {
-    const keys = k.split('.')
-    keys.reduce((a, c, i) => {
-      if (i === keys.length - 1) {
-        a[c] = obj[k]
-      } else {
-        a[c] = a[c] || {}
-      }
-      return a[c]
-    }, acc)
-    return acc
-  }, {} as Record<string, any>)
+  return result
 }
 
-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 unflattenObject(obj: Record<string, any>): Record<string, any> {
+  const result: Record<string, any> = {}
+
+  for (const key in obj) {
+    const value = obj[key]
+
+    let target = result
+    const keys = key.split('.')
+
+    for (let i = 0; i < keys.length - 1; i++) {
+      const k = keys[i]
+      target = target[k] = target[k] || {}
+    }
+
+    target[keys[keys.length - 1]] = value
   }
+
+  return result
 }
 
-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]
+function deepAssign(target: Record<string, any>, source: Record<string, any>) {
+  for (const key in source) {
+    const value = source[key]
+
+    if (Array.isArray(value)) {
+      target[key].splice(0, target[key].length, ...value)
+    } else if (value && typeof value === 'object') {
+      target[key] = deepAssign(target[key] || {}, value)
+    } else {
+      target[key] = value
+    }
   }
+
+  return target
 }

package/lib/styles/bootstrap.css

@@ -1,6 +1,6 @@
 @import "normalize.css";
 @import "v-calendar/dist/style.css";
-@import "./variables-deprecated";
-@import "./variables";
-@import "./base";
-@import "./utilities";
+@import "./variables-deprecated.css";
+@import "./variables.css";
+@import "./base.css";
+@import "./utilities.css";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.29.2",
-  "packageManager": "pnpm@8.15.1",
+  "version": "3.31.0",
+  "packageManager": "pnpm@8.15.3",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -53,10 +53,10 @@
     "markdown-it": "^14.0.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.34",
+    "postcss": "^8.4.35",
     "postcss-nested": "^6.0.1",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.15",
+    "vue": "^3.4.19",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
@@ -72,7 +72,7 @@
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.5.2",
-    "@histoire/plugin-vue": "^0.17.9",
+    "@histoire/plugin-vue": "0.17.9",
     "@iconify-icons/ph": "^1.2.5",
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.1",
@@ -80,9 +80,9 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.11.16",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "@vitest/coverage-v8": "^1.2.2",
+    "@types/node": "^20.11.19",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-v8": "^1.3.0",
     "@vue/test-utils": "^2.4.4",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
@@ -91,21 +91,21 @@
     "eslint": "^8.56.0",
     "fuse.js": "^7.0.0",
     "happy-dom": "^13.3.8",
-    "histoire": "^0.17.9",
+    "histoire": "0.17.9",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.0.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.34",
+    "postcss": "^8.4.35",
     "postcss-nested": "^6.0.1",
     "punycode": "^2.3.1",
-    "release-it": "^17.0.3",
+    "release-it": "^17.1.1",
     "typescript": "~5.3.3",
     "v-calendar": "^3.1.2",
-    "vite": "^5.0.12",
-    "vitepress": "1.0.0-rc.41",
-    "vitest": "^1.2.2",
-    "vue": "^3.4.15",
+    "vite": "^5.1.3",
+    "vitepress": "1.0.0-rc.44",
+    "vitest": "^1.3.0",
+    "vue": "^3.4.19",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.27"
   }