@globalbrain/sefirot 4.10.0 → 4.12.0

package/lib/composables/Url.ts

@@ -1,5 +1,5 @@
 import isEqual from 'lodash-es/isEqual'
-import { type MaybeRef, nextTick, unref, watch } from 'vue'
+import { type MaybeRef, computed, nextTick, unref, watch } from 'vue'
 import { type LocationQuery, useRoute, useRouter } from 'vue-router'
 
 export interface UseUrlQuerySyncOptions {
@@ -21,13 +21,22 @@ export function useUrlQuerySync(
   const route = useRoute()
   const router = useRouter()
 
+  const routeQuery = computed(() => ({
+    path: route.path,
+    query: route.query
+  }))
+
   const flattenedDefaultState = flattenObject(unref(state))
 
   let isSyncing = false
 
   watch(
-    () => route.query,
-    async () => {
+    routeQuery,
+    async (to, from) => {
+      if (from && from.path !== to.path) {
+        return
+      }
+
       if (!isSyncing) {
         isSyncing = true
         await setState()

package/lib/styles/variables.css

@@ -858,6 +858,8 @@
   --input-focus-border-color: var(--c-border-info-1);
   --input-error-text-color: var(--c-text-danger-1);
   --input-error-border-color: var(--c-border-danger-1);
+  --input-warning-text-color: var(--c-text-warning-1);
+  --input-warning-border-color: var(--c-border-warning-1);
   --input-disabled-border-color: var(--c-border-mute-1);
   --input-disabled-value-color: var(--c-text-1);
   --input-disabled-bg-color: var(--c-bg-mute-1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.10.0",
+  "version": "4.12.0",
   "packageManager": "pnpm@9.15.3",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",

package/lib/components/SInputDropdownItemAvatar.vue

@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import IconX from '~icons/ph/x-bold'
-import SAvatar from './SAvatar.vue'
-
-export type Size = 'mini' | 'small' | 'medium'
-
-defineProps<{
-  size: Size
-  label: string
-  image?: string | null
-  value: any
-  removable: boolean
-  disabled: boolean
-}>()
-
-defineEmits<{
-  (e: 'remove', value: any): void
-}>()
-
-const avatarSizeDict = {
-  mini: 'nano',
-  small: 'mini',
-  medium: 'mini'
-} as const
-</script>
-
-<template>
-  <div class="SInputDropdownItemAvatar" :class="[size, { disabled, removable }]">
-    <div class="user">
-      <div class="avatar">
-        <SAvatar :size="avatarSizeDict[size]" :avatar="image" :name="label" />
-      </div>
-      <p class="name">{{ label }}</p>
-    </div>
-
-    <div v-if="!disabled && removable" class="remove" role="button" @click="$emit('remove', value)">
-      <div class="remove-box">
-        <IconX class="remove-icon" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.SInputDropdownItemAvatar {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--c-border-mute-1);
-  background-color: var(--c-bg-mute-1);
-}
-
-.user {
-  display: flex;
-  align-items: center;
-}
-
-.avatar {
-  display: flex;
-  align-items: center;
-}
-
-.name {
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.remove {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.remove-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  color: var(--c-text-2);
-  transition: color 0.25s, background-color 0.25s;
-
-  .remove:hover & {
-    color: var(--c-text-1);
-    background-color: var(--c-bg-mute-2)
-  }
-}
-
-.SInputDropdownItemAvatar.mini {
-  gap: 2px;
-  border-radius: 12px;
-  padding: 0 8px 0 0;
-  height: 24px;
-
-  .avatar {
-    padding: 0 0 0 1px;
-  }
-
-  .name {
-    margin-left: 6px;
-  }
-
-  .remove {
-    width: 23px;
-    height: 23px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-
-.SInputDropdownItemAvatar.small {
-  border-radius: 14px;
-  padding: 0 12px 0 0;
-  height: 28px;
-
-  .avatar {
-    padding: 0 0 0 1px;
-  }
-
-  .name {
-    margin-left: 6px;
-  }
-
-  .remove {
-    width: 26px;
-    height: 26px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-
-.SInputDropdownItemAvatar.medium {
-  border-radius: 16px;
-  padding: 0 12px 0 0;
-  height: 32px;
-
-  .avatar {
-    padding: 0 0 0 4px;
-  }
-
-  .name {
-    margin-left: 6px;
-  }
-
-  .remove {
-    width: 26px;
-    height: 26px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-</style>

package/lib/components/SInputDropdownItemText.vue

@@ -1,154 +0,0 @@
-<script setup lang="ts">
-import IconX from '~icons/ph/x-bold'
-
-export type Size = 'mini' | 'small' | 'medium'
-
-defineProps<{
-  size: Size
-  label: string
-  value: any
-  removable: boolean
-  disabled: boolean
-}>()
-
-defineEmits<{
-  (e: 'remove', value: any): void
-}>()
-</script>
-
-<template>
-  <div class="SInputDropdownItemText" :class="[size, { disabled, removable }]">
-    <p class="text">{{ label }}</p>
-
-    <div v-if="!disabled && removable" class="remove" role="button" @click.stop="$emit('remove', value)">
-      <div class="remove-box">
-        <IconX class="remove-icon" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.SInputDropdownItemText {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--c-border-mute-1);
-  background-color: var(--c-bg-mute-1);
-}
-
-.text {
-  margin: 0;
-  line-height: 20px;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.remove {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.remove-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  color: var(--c-text-2);
-  transition: color 0.25s, background-color 0.25s;
-
-  .remove:hover & {
-    color: var(--c-text-1);
-    background-color: var(--c-bg-mute-3);
-  }
-}
-
-.SInputDropdownItemText.mini {
-  gap: 2px;
-  border-radius: 12px;
-  padding: 0 8px;
-  height: 24px;
-
-  &.removable {
-    padding: 0 0 0 8px;
-  }
-
-  &.disabled {
-    padding: 0 10px;
-  }
-
-  .remove {
-    width: 23px;
-    height: 23px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-
-.SInputDropdownItemText.small {
-  border-radius: 14px;
-  padding: 0 12px;
-  height: 28px;
-
-  &.removable {
-    padding: 0 0 0 12px;
-  }
-
-  &.disabled {
-    padding: 0 12px;
-  }
-
-  .remove {
-    width: 26px;
-    height: 26px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-
-.SInputDropdownItemText.medium {
-  border-radius: 16px;
-  padding: 0 12px;
-  height: 32px;
-
-  &.removable {
-    padding: 0 0 0 12px;
-  }
-
-  &.disabled {
-    padding: 0 12px;
-  }
-
-  .remove {
-    width: 26px;
-    height: 26px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-</style>