@globalbrain/sefirot 3.14.0 → 3.16.0

package/lib/components/SInputText.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import { isString } from '../support/Utils'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
-export type Align = 'left' | 'center' | 'right'
-export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
-export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-
-const props = defineProps<{
+export interface Props {
   size?: Size
   name?: string
   label?: string
@@ -32,7 +27,14 @@ const props = defineProps<{
   displayValue?: string | null
   hideError?: boolean
   validation?: Validatable
-}>()
+}
+
+export type Size = 'mini' | 'small' | 'medium'
+export type Align = 'left' | 'center' | 'right'
+export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   (e: 'update:model-value', value: string | null): void

package/lib/components/SInputTextarea.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputYMD.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SPagination.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import IconCaretLeft from '@iconify-icons/ph/caret-left-bold'
+import IconCaretRight from '@iconify-icons/ph/caret-right-bold'
+import { computed } from 'vue'
+import { useTrans } from '../composables/Lang'
+import { format } from '../support/Num'
+import SButton from './SButton.vue'
+
+export type Size = 'mini' | 'small' | 'medium'
+export type Align = 'left' | 'center' | 'right'
+
+const props = withDefaults(defineProps<{
+  size?: Size
+  align?: Align
+  total: number
+  page: number
+  perPage: number
+}>(), {
+  size: 'medium',
+  align: 'center'
+})
+
+const emit = defineEmits<{
+  (e: 'prev'): void
+  (e: 'next'): void
+}>()
+
+const { t } = useTrans({
+  en: { prev: 'Prev', next: 'Next' },
+  ja: { prev: '前へ', next: '次へ' }
+})
+
+const from = computed(() => {
+  return props.page === 1 ? 1 : (props.page - 1) * props.perPage + 1
+})
+
+const to = computed(() => {
+  const value = props.page * props.perPage
+
+  return value > props.total ? props.total : value
+})
+
+const hasPrev = computed(() => {
+  return props.page > 1
+})
+
+const hasNext = computed(() => {
+  return to.value < props.total
+})
+
+function prev() {
+  hasPrev.value && emit('prev')
+}
+
+function next() {
+  hasNext.value && emit('next')
+}
+</script>
+
+<template>
+  <div class="SPagination" :class="[size, align]">
+    <div class="button prev">
+      <SButton
+        type="outline"
+        mode="mute"
+        :size="size"
+        :lead-icon="IconCaretLeft"
+        :label="t.prev"
+        :disabled="!hasPrev"
+        @click="prev"
+      />
+    </div>
+    <div class="text">
+      {{ format(from) }}–{{ format(to) }} of {{ format(props.total) }}
+    </div>
+    <div class="button next">
+      <SButton
+        type="outline"
+        mode="mute"
+        :size="size"
+        :trail-icon="IconCaretRight"
+        :label="t.next"
+        :disabled="!hasNext"
+        @click="next"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SPagination {
+  display: flex;
+  align-items: center;
+}
+
+.text {
+  padding: 0 8px;
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--c-text-2);
+}
+
+.SPagination.mini {
+  gap: 8px;
+}
+
+.SPagination.small {
+  gap: 8px;
+}
+
+.SPagination.medium {
+  gap: 12px;
+}
+
+.SPagination.left {
+  .prev { order: 1; }
+  .next { order: 2; }
+  .text { order: 3; }
+}
+
+.SPagination.center {
+  .prev { order: 1; }
+  .text { order: 2; }
+  .next { order: 3; }
+}
+
+.SPagination.right {
+  .text { order: 1; }
+  .prev { order: 2; }
+  .next { order: 3; }
+}
+</style>

package/lib/components/STable.vue

@@ -491,7 +491,9 @@ function updateSelected(selected: unknown[]) {
   width: 100%;
 
   .STable.borderless & {
+    border-top: 0;
     border-right: 0;
+    border-bottom: 0;
     border-left: 0;
     border-radius: 0;
   }
@@ -523,7 +525,8 @@ function updateSelected(selected: unknown[]) {
     display: none;
   }
 
-  .STable.has-header & {
+  .STable.has-header &,
+  .STable.borderless & {
     border-radius: 0;
   }
 }
@@ -533,7 +536,8 @@ function updateSelected(selected: unknown[]) {
   line-height: 0;
   max-height: var(--table-max-height, 100%);
 
-  .STable.has-footer & {
+  .STable.has-footer &,
+  .STable.borderless & {
     border-radius: 0;
   }
 }

package/lib/components/STableColumn.vue

@@ -148,7 +148,7 @@ function stopDialogPositionListener() {
 
 <style scoped lang="postcss">
 .STableColumn {
-  background-color: var(--c-bg-elv-4);
+  background-color: var(--c-bg-elv-3);
 
   &.has-header {
     border-top: 1px solid var(--c-gutter);

package/lib/components/SW.vue

@@ -1,3 +1,3 @@
 <template>
-  <wbr><span class="u-nowrap"><slot /></span>
+  <wbr><span class="s-nowrap"><slot /></span>
 </template>

package/lib/composables/Card.ts

@@ -1,4 +1,4 @@
-import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'
+import { type ComputedRef, type Ref, computed, inject, provide, ref, toValue } from 'vue'
 
 export interface CardState {
   isCollapsed: Ref<boolean>
@@ -6,7 +6,10 @@ export interface CardState {
   toggleCollapse(): void
 }
 
-export const cardStateKey = Symbol('card-state') as InjectionKey<CardState>
+export type CardBlockSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
+
+export const CardStateKey = 'sefirot-card-state-key'
+export const CardBlockSizeKey = 'sefirot-card-block-size-key'
 
 export function provideCardState(): CardState {
   const isCollapsed = ref(false)
@@ -25,13 +28,17 @@ export function provideCardState(): CardState {
     toggleCollapse
   }
 
-  provide(cardStateKey, cardState)
+  provide(CardStateKey, cardState)
 
   return cardState
 }
 
+export function provideCardBlockSize(cardBlockSize: ComputedRef<CardBlockSize | null>): void {
+  provide(CardBlockSizeKey, cardBlockSize)
+}
+
 export function useCardState(): CardState {
-  const cardState = inject(cardStateKey)
+  const cardState = inject<CardState | null>(CardStateKey, null) || null
 
   if (!cardState) {
     throw new Error(
@@ -43,3 +50,8 @@ export function useCardState(): CardState {
 
   return cardState
 }
+
+export function useCardBlockSize(): ComputedRef<CardBlockSize | null> {
+  const cardSize = inject<ComputedRef<CardBlockSize | null> | null>(CardBlockSizeKey, null) || null
+  return computed(() => toValue(cardSize))
+}

package/lib/composables/Control.ts

@@ -0,0 +1,43 @@
+import { type ComputedRef, computed, inject, provide, toValue } from 'vue'
+
+export type ControlSize = 'small' | 'medium'
+export type ControlPosition = 'left' | 'center' | 'right'
+
+export const ControlSizeKey = 'sefirot-control-size-key'
+export const ControlPositionKey = 'sefirot-control-position-key'
+
+export function provideControlSize(controlSize: ComputedRef<ControlSize>): void {
+  provide(ControlSizeKey, controlSize)
+}
+
+export function provideControlPosition(controlPosition: ControlPosition): void {
+  provide(ControlPositionKey, controlPosition)
+}
+
+export function useControlSize(): ComputedRef<ControlSize> {
+  const controlSize = inject<ComputedRef<ControlSize> | null>(ControlSizeKey, null) || null
+
+  if (!controlSize) {
+    throw new Error(
+      '[sefirot] Unexpected call to `useControlSize`. This probably means'
+      + ' you are using `<SControl>` child component outside of `<SControl>`.'
+      + ' Make sure to wrap the component within `<SControl>` component.'
+    )
+  }
+
+  return computed(() => toValue(controlSize))
+}
+
+export function useControlPosition(): ControlPosition {
+  const controlPosition = inject<ControlPosition | null>(ControlPositionKey, null) || null
+
+  if (!controlPosition) {
+    throw new Error(
+      '[sefirot] Unexpected call to `useControlPosition`. This probably means'
+      + ' you are using `<SControl>` child component outside of `<SControl>`.'
+      + ' Make sure to wrap the component within `<SControl>` component.'
+    )
+  }
+
+  return controlPosition
+}

package/lib/composables/D.ts

@@ -0,0 +1,21 @@
+import { type Ref, ref } from 'vue'
+
+export interface D<T extends Record<string, any>> {
+  data: Ref<T>
+  init(): void
+}
+
+export function useD<T extends Record<string, any>>(data: T): D<T> {
+  const initialData = JSON.parse(JSON.stringify(data))
+
+  const refData = ref(data) as Ref<T>
+
+  function init(): void {
+    refData.value = initialData
+  }
+
+  return {
+    data: refData,
+    init
+  }
+}

package/lib/composables/Data.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated Use `composables/D` module instead.
+ */
+
 import { watchOnce } from '@vueuse/core'
 import cloneDeep from 'lodash-es/cloneDeep'
 import { type WatchSource, reactive } from 'vue'

package/lib/composables/Form.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated Use `composables/D` and `composables/V` modules instead.
+ */
+
 import { type Ref, computed, reactive, toRefs } from 'vue'
 import { type Snackbar, useSnackbars } from '../stores/Snackbars'
 import { type UseDataInput, useData } from './Data'

package/lib/composables/Table.ts

@@ -8,27 +8,29 @@ export interface Table<
   R extends Record<string, any> = any,
   SR extends Record<string, any> = any
 > {
+  records?: MaybeRef<R[] | null | undefined>
   orders: MaybeRef<O[]>
   columns: MaybeRef<TableColumns<O, R, SR>>
-  menu?: MaybeRef<TableMenu[] | TableMenu[][]>
+  summary?: MaybeRef<SR | null | undefined>
+  indexField?: keyof R
+  loading?: MaybeRef<boolean | undefined>
+  rowSize?: MaybeRef<number | undefined>
+  borderless?: MaybeRef<boolean>
+
+  /**
+   * @deprecated Use `<SControl>` to add equivalent features.
+  */
   actions?: MaybeRef<TableHeaderAction[]>
-  records?: MaybeRef<R[] | null | undefined>
+  menu?: MaybeRef<TableMenu[] | TableMenu[][]>
   header?: MaybeRef<boolean | undefined>
   footer?: MaybeRef<boolean | undefined>
-  summary?: MaybeRef<SR | null | undefined>
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>
-  /** @deprecated use `actions` instead */
   reset?: MaybeRef<boolean | undefined>
-  borderless?: MaybeRef<boolean>
-  loading?: MaybeRef<boolean | undefined>
-  rowSize?: MaybeRef<number | undefined>
   borderSize?: MaybeRef<number | undefined>
-  indexField?: keyof R
   onPrev?(): void
   onNext?(): void
-  /** @deprecated use `actions` instead */
   onReset?(): void
 }
 

package/lib/composables/V.ts

@@ -0,0 +1,73 @@
+import { type Validation, type ValidationArgs, useVuelidate } from '@vuelidate/core'
+import { type MaybeRefOrGetter, type Ref, computed, toValue } from 'vue'
+import { type Snackbar, useSnackbars } from '../stores/Snackbars'
+import { useTrans } from './Lang'
+
+export interface V<
+  Data extends { [key in keyof Rules]: any },
+  Rules extends ValidationArgs = ValidationArgs
+> {
+  validation: Ref<Validation<Rules, Data>>
+  validate(): Promise<boolean>
+  validateAndNotify(message?: Snackbar): Promise<boolean>
+  reset(): void
+}
+
+export interface Validatable {
+  readonly $dirty: boolean
+  readonly $invalid: boolean
+  readonly $errors: ValidatableError[]
+  readonly $touch: () => void
+}
+
+export interface ValidatableError {
+  readonly $message: string | Ref<string>
+}
+
+export function useV<
+  Data extends { [key in keyof Rules]: any },
+  Rules extends ValidationArgs = ValidationArgs
+>(
+  data: MaybeRefOrGetter<Data>,
+  rules: MaybeRefOrGetter<Rules>
+): V<Data, Rules> {
+  const { t } = useTrans({
+    en: { notify: 'Form contains errors. Please correct them and try again.' },
+    ja: { notify: 'フォームにエラーがあります。内容を確認し、再度お試しください。' }
+  })
+
+  const snackbars = useSnackbars()
+
+  const d = computed(() => toValue(data))
+  const r = computed(() => toValue(rules))
+
+  const validation = useVuelidate(r, d)
+
+  function reset(): void {
+    validation.value.$reset()
+  }
+
+  function validate(): Promise<boolean> {
+    return validation.value.$validate()
+  }
+
+  async function validateAndNotify(message?: Snackbar): Promise<boolean> {
+    const valid = await validate()
+
+    if (!valid) {
+      snackbars.push(message ?? {
+        mode: 'danger',
+        text: t.notify
+      })
+    }
+
+    return valid
+  }
+
+  return {
+    validation,
+    validate,
+    validateAndNotify,
+    reset
+  }
+}

package/lib/composables/Validation.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated Use `composables/V` module instead.
+ */
+
 import {
   type GlobalConfig,
   type Validation,

package/lib/mixins/Control.ts

@@ -0,0 +1,30 @@
+import { type App } from 'vue'
+import SControl from '../components/SControl.vue'
+import SControlButton from '../components/SControlButton.vue'
+import SControlCenter from '../components/SControlCenter.vue'
+import SControlInputSearch from '../components/SControlInputSearch.vue'
+import SControlLeft from '../components/SControlLeft.vue'
+import SControlRight from '../components/SControlRight.vue'
+import SControlText from '../components/SControlText.vue'
+
+export function mixin(app: App): void {
+  app.component('SControl', SControl)
+  app.component('SControlButton', SControlButton)
+  app.component('SControlCenter', SControlCenter)
+  app.component('SControlInputSearch', SControlInputSearch)
+  app.component('SControlLeft', SControlLeft)
+  app.component('SControlRight', SControlRight)
+  app.component('SControlText', SControlText)
+}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    SControl: typeof SControl
+    SControlButton: typeof SControlButton
+    SControlCenter: typeof SControlCenter
+    SControlInputSearch: typeof SControlInputSearch
+    SControlLeft: typeof SControlLeft
+    SControlRight: typeof SControlRight
+    SControlText: typeof SControlText
+  }
+}

package/lib/styles/utilities.css

@@ -1,3 +1,113 @@
-.u-nowrap {
-  white-space: nowrap;
-}
+.bg-elv-1 { background-color: var(--c-bg-elv-1); }
+.bg-elv-2 { background-color: var(--c-bg-elv-2); }
+.bg-elv-3 { background-color: var(--c-bg-elv-3); }
+.bg-elv-4 { background-color: var(--c-bg-elv-4); }
+
+.s-flex { display: flex; }
+
+.s-font-12 { font-size: 12px; }
+.s-font-14 { font-size: 14px; }
+.s-font-16 { font-size: 16px; }
+.s-font-20 { font-size: 20px; }
+.s-font-24 { font-size: 24px; }
+.s-font-32 { font-size: 32px; }
+
+.s-font-w-100 { font-weight: 100; }
+.s-font-w-200 { font-weight: 200; }
+.s-font-w-300 { font-weight: 300; }
+.s-font-w-400 { font-weight: 400; }
+.s-font-w-500 { font-weight: 500; }
+.s-font-w-600 { font-weight: 600; }
+.s-font-w-700 { font-weight: 700; }
+.s-font-w-800 { font-weight: 800; }
+.s-font-w-900 { font-weight: 900; }
+
+.s-gap-4  { gap: 4px; }
+.s-gap-8  { gap: 8px; }
+.s-gap-12 { gap: 12px; }
+.s-gap-16 { gap: 16px; }
+
+.s-grow   { flex-grow: 1; }
+.s-grow-0 { flex-grow: 0; }
+
+.s-nowrap { white-space: nowrap; }
+
+.s-overflow-hidden { overflow: hidden; }
+
+.s-p-8  { padding: 8px; }
+.s-p-12 { padding: 12px; }
+.s-p-16 { padding: 16px; }
+.s-p-24 { padding: 24px; }
+.s-p-32 { padding: 32px; }
+.s-p-48 { padding: 48px; }
+.s-p-56 { padding: 56px; }
+.s-p-64 { padding: 64px; }
+
+.s-pb-8  { padding-bottom: 8px; }
+.s-pb-12 { padding-bottom: 12px; }
+.s-pb-16 { padding-bottom: 16px; }
+.s-pb-24 { padding-bottom: 24px; }
+.s-pb-32 { padding-bottom: 32px; }
+.s-pb-48 { padding-bottom: 48px; }
+.s-pb-56 { padding-bottom: 56px; }
+.s-pb-64 { padding-bottom: 64px; }
+
+.s-pl-8  { padding-left: 8px; }
+.s-pl-12 { padding-left: 12px; }
+.s-pl-16 { padding-left: 16px; }
+.s-pl-24 { padding-left: 24px; }
+.s-pl-32 { padding-left: 32px; }
+.s-pl-48 { padding-left: 48px; }
+.s-pl-56 { padding-left: 56px; }
+.s-pl-64 { padding-left: 64px; }
+
+.s-pr-8  { padding-right: 8px; }
+.s-pr-12 { padding-right: 12px; }
+.s-pr-16 { padding-right: 16px; }
+.s-pr-24 { padding-right: 24px; }
+.s-pr-32 { padding-right: 32px; }
+.s-pr-48 { padding-right: 48px; }
+.s-pr-56 { padding-right: 56px; }
+.s-pr-64 { padding-right: 64px; }
+
+.s-pt-8  { padding-top: 8px; }
+.s-pt-12 { padding-top: 12px; }
+.s-pt-16 { padding-top: 16px; }
+.s-pt-24 { padding-top: 24px; }
+.s-pt-32 { padding-top: 32px; }
+.s-pt-48 { padding-top: 48px; }
+.s-pt-56 { padding-top: 56px; }
+.s-pt-64 { padding-top: 64px; }
+
+.s-px-8  { padding-right: 8px; padding-left: 8px; }
+.s-px-12 { padding-right: 12px; padding-left: 12px; }
+.s-px-16 { padding-right: 16px; padding-left: 16px; }
+.s-px-24 { padding-right: 24px; padding-left: 24px; }
+.s-px-32 { padding-right: 32px; padding-left: 32px; }
+.s-px-48 { padding-right: 48px; padding-left: 48px; }
+.s-px-56 { padding-right: 56px; padding-left: 56px; }
+.s-px-64 { padding-right: 64px; padding-left: 64px; }
+
+.s-py-8  { padding-top: 8px; padding-bottom: 8px; }
+.s-py-12 { padding-top: 12px; padding-bottom: 12px; }
+.s-py-16 { padding-top: 16px; padding-bottom: 16px; }
+.s-py-24 { padding-top: 24px; padding-bottom: 24px; }
+.s-py-32 { padding-top: 32px; padding-bottom: 32px; }
+.s-py-48 { padding-top: 48px; padding-bottom: 48px; }
+.s-py-56 { padding-top: 56px; padding-bottom: 56px; }
+.s-py-64 { padding-top: 64px; padding-bottom: 64px; }
+
+.s-shrink   { flex-shrink: 1; }
+.s-shrink-0 { flex-shrink: 0; }
+
+.s-text-1 { color: var(--c-text-1); }
+.s-text-2 { color: var(--c-text-2); }
+.s-text-3 { color: var(--c-text-3); }
+
+.s-w-256 { width: 256px; }
+.s-w-320 { width: 320px; }
+.s-w-512 { width: 512px; }
+
+.s-max-w-256 { max-width: 256px; }
+.s-max-w-320 { max-width: 320px; }
+.s-max-w-512 { max-width: 512px; }

package/package.json

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