@globalbrain/sefirot 3.15.0 → 3.17.0

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 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 = 'card-state'
+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)
@@ -30,8 +33,12 @@ export function provideCardState(): CardState {
   return cardState
 }
 
+export function provideCardBlockSize(cardBlockSize: ComputedRef<CardBlockSize | null>): void {
+  provide(CardBlockSizeKey, cardBlockSize)
+}
+
 export function useCardState(): CardState {
-  const cardState = inject<CardState | null>(CardStateKey, null)
+  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/Dropdown.ts

@@ -1,13 +1,21 @@
 import { useElementBounding, useWindowSize } from '@vueuse/core'
-import { type Component, type MaybeRef, type Ref, ref, unref } from 'vue'
+import { type Component, type MaybeRef, type MaybeRefOrGetter, type Ref, ref, unref } from 'vue'
+import { type ActionList } from '../components/SActionList.vue'
+import { type DateRange } from '../support/DateRange'
 
 export type DropdownSection =
   | DropdownSectionMenu
   | DropdownSectionFilter
+  | DropdownSectionDateRange
   | DropdownSectionComponent
   | DropdownSectionActions
 
-export type DropdownSectionType = 'menu' | 'filter' | 'actions' | 'component'
+export type DropdownSectionType =
+  | 'menu'
+  | 'filter'
+  | 'date-range'
+  | 'actions'
+  | 'component'
 
 export interface DropdownSectionBase {
   type: DropdownSectionType
@@ -15,13 +23,7 @@ export interface DropdownSectionBase {
 
 export interface DropdownSectionMenu extends DropdownSectionBase {
   type: 'menu'
-  options: DropdownSectionMenuOption[]
-}
-
-export interface DropdownSectionMenuOption {
-  label: string
-  disabled?: boolean
-  onClick(): void
+  options: ActionList
 }
 
 export interface DropdownSectionFilter extends DropdownSectionBase {
@@ -60,6 +62,12 @@ export interface DropdownSectionFilterOptionAvatar extends DropdownSectionFilter
   image?: string | null
 }
 
+export interface DropdownSectionDateRange extends DropdownSectionBase {
+  type: 'date-range'
+  range: MaybeRefOrGetter<DateRange>
+  onApply(range: DateRange): void
+}
+
 export interface DropdownSectionActions extends DropdownSectionBase {
   type: 'actions'
   options: DropdownSectionActionsOption[]
@@ -87,6 +95,36 @@ export function createDropdown(section: DropdownSection[]): DropdownSection[] {
   return section
 }
 
+export function createDropdownDateRange(
+  section: Omit<DropdownSectionDateRange, 'type'>
+): DropdownSectionDateRange {
+  return { type: 'date-range', ...section }
+}
+
+export function createDropdownMenu(
+  section: Omit<DropdownSectionMenu, 'type'>
+): DropdownSectionMenu {
+  return { type: 'menu', ...section }
+}
+
+export function createDropdownFilter(
+  section: Omit<DropdownSectionFilter, 'type'>
+): DropdownSectionFilter {
+  return { type: 'filter', ...section }
+}
+
+export function createDropdownActions(
+  section: Omit<DropdownSectionActions, 'type'>
+): DropdownSectionActions {
+  return { type: 'actions', ...section }
+}
+
+export function createDropdownComponent(
+  section: Omit<DropdownSectionComponent, 'type'>
+): DropdownSectionComponent {
+  return { type: 'component', ...section }
+}
+
 export function useManualDropdownPosition(
   container?: Ref<any>,
   initPosition?: 'top' | 'bottom'

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

@@ -28,8 +28,8 @@ export function useV<
   Data extends { [key in keyof Rules]: any },
   Rules extends ValidationArgs = ValidationArgs
 >(
-  data: MaybeRefOrGetter<Data>,
-  rules: MaybeRefOrGetter<Rules>
+  data?: MaybeRefOrGetter<Data>,
+  rules?: MaybeRefOrGetter<Rules>
 ): V<Data, Rules> {
   const { t } = useTrans({
     en: { notify: 'Form contains errors. Please correct them and try again.' },
@@ -38,10 +38,10 @@ export function useV<
 
   const snackbars = useSnackbars()
 
-  const d = computed(() => toValue(data))
-  const r = computed(() => toValue(rules))
+  const d = computed(() => toValue(data) ?? {})
+  const r = computed(() => toValue(rules) ?? {})
 
-  const validation = useVuelidate(r, d)
+  const validation = useVuelidate(r, d) as any
 
   function reset(): void {
     validation.value.$reset()

package/lib/mixins/Control.ts

@@ -0,0 +1,33 @@
+import { type App } from 'vue'
+import SControl from '../components/SControl.vue'
+import SControlActionMenu from '../components/SControlActionMenu.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('SControlActionMenu', SControlActionMenu)
+  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
+    SControlActionMenu: typeof SControlActionMenu
+    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; }