@globalbrain/sefirot 3.50.0 → 4.0.0-0

package/lib/validation/validators/minValue.ts

@@ -1,7 +1,7 @@
-import { isNumber, isString } from '../../support/Utils'
+import { isDate, isNumber, isString } from '../../support/Utils'
 
 export function minValue(value: unknown, min: number) {
-  if (isNumber(value) || isString(value) || value instanceof Date) {
+  if (isNumber(value) || isString(value) || isDate(value)) {
     return +value >= min
   }
 

package/lib/validation/validators/required.ts

@@ -1,4 +1,4 @@
-import { isArray, isNullish, isString } from '../../support/Utils'
+import { isDate, isString } from '../../support/Utils'
 
 export function required(value: unknown): boolean {
   if (isString(value)) {
@@ -9,11 +9,11 @@ export function required(value: unknown): boolean {
 }
 
 export function _required(value: unknown): boolean {
-  if (isArray(value)) {
+  if (Array.isArray(value)) {
     return !!value.length
   }
 
-  if (isNullish(value)) {
+  if (value == null) {
     return false
   }
 
@@ -21,7 +21,7 @@ export function _required(value: unknown): boolean {
     return true
   }
 
-  if (value instanceof Date) {
+  if (isDate(value)) {
     return !Number.isNaN(value.getTime())
   }
 

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.50.0",
-  "packageManager": "pnpm@9.1.1",
+  "type": "module",
+  "version": "4.0.0-0",
+  "packageManager": "pnpm@9.5.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -18,7 +19,8 @@
     "vue component"
   ],
   "files": [
-    "lib"
+    "lib",
+    "config"
   ],
   "scripts": {
     "docs": "pnpm docs:dev",
@@ -40,81 +42,79 @@
     "release": "release-it"
   },
   "peerDependencies": {
-    "@iconify-icons/ph": "^1.2.5",
-    "@iconify-icons/ri": "^1.2.10",
-    "@iconify/vue": "^4.1.2",
+    "@iconify-json/ph": "^1.1.13",
+    "@iconify-json/ri": "^1.1.21",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.1",
-    "@vue/reactivity": "^3.4.27",
-    "@vue/runtime-core": "^3.4.27",
+    "@vue/reactivity": "^3.4.33",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.11.0",
     "body-scroll-lock": "4.0.0-beta.0",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.38",
-    "postcss-nested": "^6.0.1",
+    "postcss": "^8.4.39",
+    "postcss-nested": "^6.2.0",
+    "unplugin-icons": "^0.19.0",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.27",
-    "vue-router": "^4.3.2"
+    "vue": "^3.4.33",
+    "vue-router": "^4.4.0"
   },
   "dependencies": {
-    "@sentry/browser": "^8.0.0",
+    "@sentry/browser": "^8.19.0",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
-    "@tinyhttp/content-disposition": "^2.2.0",
-    "@tinyhttp/cookie": "^2.1.0",
+    "@tinyhttp/content-disposition": "^2.2.1",
+    "@tinyhttp/cookie": "^2.1.1",
     "@types/file-saver": "^2.0.7",
     "@types/qs": "^6.9.15",
     "file-saver": "^2.0.5",
     "ofetch": "^1.3.4",
-    "qs": "^6.12.1"
+    "qs": "^6.12.3"
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.6.0",
     "@histoire/plugin-vue": "0.16.5",
-    "@iconify-icons/ph": "^1.2.5",
-    "@iconify-icons/ri": "^1.2.10",
-    "@iconify/vue": "^4.1.2",
+    "@iconify-json/ph": "^1.1.13",
+    "@iconify-json/ri": "^1.1.21",
     "@release-it/conventional-changelog": "^8.0.1",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.1",
-    "@types/node": "^20.12.11",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.6.0",
-    "@vue/reactivity": "^3.4.27",
-    "@vue/runtime-core": "^3.4.27",
+    "@types/node": "^20.14.11",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitest/coverage-v8": "^2.0.3",
+    "@vue/reactivity": "^3.4.33",
     "@vue/test-utils": "^2.4.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.11.0",
     "body-scroll-lock": "4.0.0-beta.0",
-    "dayjs": "^1.11.11",
-    "eslint": "^8.57.0",
+    "dayjs": "^1.11.12",
+    "eslint": "8.57.0",
     "fuse.js": "^7.0.0",
-    "happy-dom": "^14.10.2",
+    "happy-dom": "^14.12.3",
     "histoire": "0.16.5",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.38",
-    "postcss-nested": "^6.0.1",
+    "postcss": "^8.4.39",
+    "postcss-nested": "^6.2.0",
     "punycode": "^2.3.1",
-    "release-it": "^17.2.1",
-    "typescript": "~5.4.5",
+    "release-it": "^17.6.0",
+    "typescript": "~5.5.3",
+    "unplugin-icons": "npm:@globalbrain/unplugin-icons@^0.19.1",
     "v-calendar": "^3.1.2",
-    "vite": "^5.2.11",
-    "vitepress": "^1.1.4",
-    "vitest": "^1.6.0",
-    "vue": "^3.4.27",
-    "vue-router": "^4.3.2",
-    "vue-tsc": "^1.8.27"
+    "vite": "^5.3.4",
+    "vitepress": "^1.3.1",
+    "vitest": "^2.0.3",
+    "vue": "^3.4.33",
+    "vue-router": "^4.4.0",
+    "vue-tsc": "^2.0.26"
   }
 }

package/lib/components/SCardFooter.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-export type Space = 'compact' | 'wide' | 'xwide'
-
-defineProps<{
-  space?: Space
-}>()
-</script>
-
-<template>
-  <div class="SCardFooter" :class="[space ?? 'compact']">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.SCardFooter {
-  display: flex;
-  align-items: center;
-  border-radius: 0 0 5px 5px;
-  background-color: var(--c-bg-elv-3);
-}
-</style>

package/lib/components/SCardFooterAction.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import SButton, { type Mode, type Tooltip } from './SButton.vue'
-
-defineProps<{
-  mode?: Mode
-  label?: string
-  labelMode?: Mode
-  loading?: boolean
-  disabled?: boolean
-  tooltip?: string | Tooltip
-}>()
-
-defineEmits<{
-  (e: 'click'): void
-}>()
-</script>
-
-<template>
-  <div class="SCardFooterAction">
-    <SButton
-      size="medium"
-      :mode="mode"
-      :label="label"
-      :label-mode="labelMode"
-      :loading="loading"
-      :disabled="disabled"
-      :tooltip="tooltip"
-      @click="$emit('click')"
-    />
-  </div>
-</template>

package/lib/components/SCardFooterActions.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="SCardFooterActions">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.SCardFooterActions {
-  display: flex;
-  justify-content: flex-end;
-  flex-grow: 1;
-  gap: 12px;
-
-  .SCardFooter.compact > & { padding: 12px 24px; }
-  .SCardFooter.wide > &    { padding: 16px 32px; }
-  .SCardFooter.xwide > &   { padding: 24px 48px; }
-}
-</style>

package/lib/components/SCardHeader.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="SCardHeader">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.SCardHeader {
-  display: flex;
-  align-items: center;
-  border-radius: 5px 5px 0 0;
-  height: 48px;
-  background-color: var(--c-bg-elv-4);
-}
-</style>

package/lib/components/SCardHeaderAction.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import SButton, { type Tooltip } from './SButton.vue'
-
-defineProps<{
-  icon: IconifyIcon
-  disabled?: boolean
-  tooltip?: string | Tooltip
-}>()
-
-defineEmits<{
-  (e: 'click'): void
-}>()
-</script>
-
-<template>
-  <div class="SCardHeaderAction">
-    <SButton
-      type="text"
-      mode="mute"
-      size="small"
-      :icon="icon"
-      :disabled="disabled"
-      :tooltip="tooltip"
-      @click="$emit('click')"
-    />
-  </div>
-</template>

package/lib/components/SCardHeaderActionClose.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import IconX from '@iconify-icons/ph/x-bold'
-import SButton, { type Tooltip } from './SButton.vue'
-
-defineProps<{
-  disabled?: boolean
-  tooltip?: string | Tooltip
-}>()
-
-defineEmits<{
-  (e: 'click'): void
-}>()
-</script>
-
-<template>
-  <div class="SCardHeaderActionClose">
-    <SButton
-      type="text"
-      mode="mute"
-      size="small"
-      :icon="IconX"
-      :disabled="disabled"
-      :tooltip="tooltip"
-      @click="$emit('click')"
-    />
-  </div>
-</template>

package/lib/components/SCardHeaderActionCollapse.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import IconArrowsInLineVertical from '@iconify-icons/ph/arrows-in-line-vertical-bold'
-import IconArrowsOutLineVertical from '@iconify-icons/ph/arrows-out-line-vertical-bold'
-import { computed, shallowRef } from 'vue'
-import { useCardState } from '../composables/Card'
-import SButton, { type Tooltip } from './SButton.vue'
-
-const props = defineProps<{
-  collapsed?: boolean
-  disabled?: boolean
-  tooltip?: string | Tooltip
-}>()
-
-defineEmits<{
-  (e: 'click'): void
-}>()
-
-const { isCollapsed, setCollapse, toggleCollapse } = useCardState()
-
-setCollapse(props.collapsed)
-
-const el = shallowRef<HTMLElement | null>(null)
-
-const icon = computed(() => {
-  return isCollapsed.value
-    ? IconArrowsOutLineVertical
-    : IconArrowsInLineVertical
-})
-</script>
-
-<template>
-  <div
-    class="SCardHeaderActionCollapse"
-    :class="{ collapsed: isCollapsed }"
-    ref="el"
-  >
-    <SButton
-      type="text"
-      mode="mute"
-      size="small"
-      :icon="icon"
-      :disabled="disabled"
-      :tooltip="tooltip"
-      @click="toggleCollapse"
-    />
-  </div>
-</template>

package/lib/components/SCardHeaderActions.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="SCardHeaderActions">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.SCardHeaderActions {
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 8px;
-}
-</style>

package/lib/components/SCardHeaderTitle.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-
-defineProps<{
-  mode?: Mode
-}>()
-</script>
-
-<template>
-  <p class="SCardHeaderTitle" :class="[mode ?? 'neutral']">
-    <slot />
-  </p>
-</template>
-
-<style scoped lang="postcss">
-.SCardHeaderTitle {
-  flex-grow: 1;
-  padding-left: 24px;
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.SCardHeaderTitle.neutral { color: var(--c-text-1); }
-.SCardHeaderTitle.info    { color: var(--c-text-info-1); }
-.SCardHeaderTitle.success { color: var(--c-text-success-1); }
-.SCardHeaderTitle.warning { color: var(--c-text-warning-1); }
-.SCardHeaderTitle.danger  { color: var(--c-text-danger-1); }
-</style>

package/lib/components/SIcon.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { Icon, type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent } from 'vue'
-
-defineProps<{
-  icon: IconifyIcon | DefineComponent
-}>()
-</script>
-
-<template>
-  <Icon v-if="typeof icon.body === 'string'" :icon="(icon as IconifyIcon)" />
-  <component v-else :is="icon" />
-</template>

package/lib/components/SSheet.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import IconX from '@iconify-icons/ph/x'
-import SIcon from './SIcon.vue'
-import SMount from './SMount.vue'
-
-export interface Props {
-  size?: 'small' | 'medium' | 'large'
-  closable?: boolean
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 'medium',
-  closable: true
-})
-
-defineEmits<{
-  (e: 'close'): void
-}>()
-</script>
-
-<template>
-  <SMount class="SSheet" :class="[size]">
-    <button v-if="closable ?? true" class="close" @click="$emit('close')">
-      <SIcon :icon="IconX" class="icon" />
-    </button>
-
-    <slot />
-  </SMount>
-</template>
-
-<style scoped lang="postcss">
-.SSheet {
-  position: relative;
-  border: 1px solid var(--c-divider);
-  border-radius: 16px;
-  background-color: var(--c-bg-elv-1);
-  transition: opacity 0.25s, transform 0.25s;
-
-  .dark & {
-    background-color: var(--c-bg-mute-1);
-  }
-
-  .SModal & {
-    margin: 96px auto;
-    box-shadow: var(--shadow-depth-5);
-
-    .dark & {
-      background-color: var(--c-bg-elv-4);
-    }
-  }
-}
-
-.SSheet.small  { max-width: 512px; }
-.SSheet.medium { max-width: 768px; }
-.SSheet.large  { max-width: 1024px; }
-
-.SSheet.mount {
-  opacity: 0;
-  transform: translateY(8px);
-}
-
-.close {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  display: none;
-  justify-content: center;
-  align-items: center;
-  width: 48px;
-  height: 48px;
-  color: var(--c-text-3);
-  transition: color 0.25s;
-
-  &:hover {
-    color: var(--c-text-1);
-  }
-
-  .SModal & {
-    display: flex;
-  }
-}
-
-.icon {
-  width: 24px;
-  height: 24px;
-}
-</style>

package/lib/components/SSheetFooter.vue

@@ -1,16 +0,0 @@
-<template>
-  <footer class="SSheetFooter">
-    <slot />
-  </footer>
-</template>
-
-<style scoped lang="postcss">
-.SSheetFooter {
-  border-top: 1px solid var(--c-divider);
-  padding: 0 16px;
-
-  @media (min-width: 512px) {
-    padding: 0 32px;
-  }
-}
-</style>

package/lib/components/SSheetFooterAction.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import SButton, { type Mode, type Type } from './SButton.vue'
-
-defineProps<{
-  type?: Type
-  mode?: Mode
-  label: string
-  loading?: boolean
-}>()
-
-defineEmits<{
-  (e: 'click'): void
-}>()
-</script>
-
-<template>
-  <div class="SSheetFooterAction">
-    <SButton
-      size="medium"
-      :type="type"
-      :mode="mode"
-      :label="label"
-      :loading="loading"
-      block
-      @click="$emit('click')"
-    />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.SSheetFooterAction {
-  min-width: 88px;
-}
-</style>

package/lib/components/SSheetFooterActions.vue

@@ -1,14 +0,0 @@
-<template>
-  <div class="SSheetFooterActions">
-    <slot />
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.SSheetFooterActions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 16px 0 15px;
-}
-</style>

package/lib/components/SSheetForm.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="SSheetForm">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.SSheetForm {
-  padding: 32px;
-
-  .SSheetTitle + & {
-    padding-top: 16px;
-  }
-}
-</style>

package/lib/components/SSheetMedium.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="SSheetMedium">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.SSheetMedium {
-  padding: 32px;
-
-  .SSheetTitle + & {
-    padding-top: 0;
-  }
-}
-
-.SSheetMedium :deep(p) {
-  margin-bottom: 16px;
-}
-
-.SSheetMedium :deep(p:first-child) {
-  margin-top: 0;
-}
-
-.SSheetMedium :deep(p:last-child) {
-  margin-bottom: 0;
-}
-
-.SSheetMedium :deep(a) {
-  font-weight: 500;
-  color: var(--c-text-info-1);
-  transition: color .25s;
-
-  &:hover {
-    color: var(--c-text-info-2);
-  }
-}
-
-.SSheetMedium :deep(ul) {
-  margin: 16px 0;
-}
-
-.SSheetMedium :deep(ul:last-child) {
-  margin-bottom: 0;
-}
-
-.SSheetMedium :deep(li) {
-  position: relative;
-  padding-left: 20px;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.SSheetMedium :deep(li::before) {
-  position: absolute;
-  top: 9px;
-  left: 4px;
-  border-radius: 50%;
-  width: 6px;
-  height: 6px;
-  background-color: var(--c-text-3);
-  content: "";
-}
-
-.SSheetMedium :deep(li + li) {
-  margin-top: 8px;
-}
-
-.SSheetMedium :deep(li > ul) {
-  margin: 4px 0 0;
-  margin-bottom: 16px;
-}
-</style>