@globalbrain/sefirot 3.16.0 → 3.17.1

package/lib/components/SActionList.vue

@@ -15,6 +15,7 @@ defineProps<{
       v-for="item, index in list"
       :key="index"
       :lead-icon="item.leadIcon"
+      :label="item.label"
       :text="item.text"
       :link="item.link"
       :on-click="item.onClick"

package/lib/components/SActionListItem.vue

@@ -1,16 +1,25 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { computed } from 'vue'
 import SIcon from './SIcon.vue'
 import SLink from './SLink.vue'
 
 export interface ActionListItem {
   leadIcon?: IconifyIcon
-  text: string
   link?: string
+  label?: string
+  disabled?: boolean
   onClick?(): void
+
+  /** @deprecated Use `:label` instead. */
+  text?: string
 }
 
-defineProps<ActionListItem>()
+const props = defineProps<ActionListItem>()
+
+const _label = computed(() => {
+  return props.label ?? props.text
+})
 </script>
 
 <template>
@@ -23,7 +32,7 @@ defineProps<ActionListItem>()
     <span v-if="leadIcon" class="lead-icon">
       <SIcon class="lead-icon-svg" :icon="leadIcon" />
     </span>
-    <span class="text">{{ text }}</span>
+    <span class="text">{{ _label }}</span>
   </component>
 </template>
 

package/lib/components/SActionMenu.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { type DropdownSection, useManualDropdownPosition } from '../composables/Dropdown'
+import { useFlyout } from '../composables/Flyout'
+import SButton, { type Mode, type Size, type Tooltip, type Type } from './SButton.vue'
+import SDropdown from './SDropdown.vue'
+
+export type { Mode, Size, Tooltip, Type }
+
+const props = defineProps<{
+  tag?: string
+  size?: Size
+  type?: Type
+  mode?: Mode
+  icon?: any
+  iconMode?: Mode
+  label?: string
+  labelMode?: Mode
+  rounded?: boolean
+  block?: boolean
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: Tooltip
+  options: DropdownSection[]
+}>()
+
+const container = ref<any>(null)
+
+const { isOpen, toggle } = useFlyout(container)
+const { position, update: updatePosition } = useManualDropdownPosition(container)
+
+async function onOpen() {
+  if (!props.disabled) {
+    updatePosition()
+    toggle()
+  }
+}
+</script>
+
+<template>
+  <div class="SActionMenu" :class="[block]" ref="container">
+    <div class="button">
+      <SButton
+        :tag="tag"
+        :size="size"
+        :type="type"
+        :mode="mode"
+        :icon="icon"
+        :icon-mode="iconMode"
+        :label="label"
+        :label-mode="labelMode"
+        :rounded="rounded"
+        :block="block"
+        :loading="loading"
+        :disabled="disabled"
+        :tooltip="tooltip"
+        @click="onOpen"
+      />
+    </div>
+    <div v-if="isOpen" class="dropdown" :class="position">
+      <SDropdown :sections="options" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SActionMenu {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown {
+  position: absolute;
+  left: 0;
+  z-index: var(--z-index-dropdown);
+
+  &.top    { bottom: calc(100% + 8px); }
+  &.bottom { top: calc(100% + 8px); }
+}
+
+.SActionMenu.block {
+  display: block;
+}
+</style>

package/lib/components/SControlActionMenu.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useControlSize } from '../composables/Control'
+import { type DropdownSection } from '../composables/Dropdown'
+import SActionMenu, { type Mode, type Tooltip, type Type } from './SActionMenu.vue'
+
+defineProps<{
+  tag?: string
+  type?: Type
+  mode?: Mode
+  icon?: any
+  iconMode?: Mode
+  label?: string
+  labelMode?: Mode
+  href?: string
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: Tooltip
+  options: DropdownSection[]
+}>()
+
+const size = useControlSize()
+</script>
+
+<template>
+  <div class="SControlActionMenu">
+    <SActionMenu
+      :tag="tag"
+      :size="size"
+      :type="type"
+      :mode="mode"
+      :icon="icon"
+      :icon-mode="iconMode"
+      :label="label"
+      :label-mode="labelMode"
+      :href="href"
+      :tooltip="tooltip"
+      :options="options"
+      block
+      :loading="loading"
+      :disabled="disabled"
+    />
+  </div>
+</template>

package/lib/components/SControlPagination.vue

@@ -9,6 +9,11 @@ defineProps<{
   perPage: number
 }>()
 
+defineEmits<{
+  (e: 'prev'): void
+  (e: 'next'): void
+}>()
+
 const size = useControlSize()
 const position = useControlPosition()
 </script>
@@ -21,6 +26,8 @@ const position = useControlPosition()
       :total="total"
       :page="page"
       :per-page="perPage"
+      @prev="$emit('prev')"
+      @next="$emit('next')"
     />
   </div>
 </template>

package/lib/components/SDropdown.vue

@@ -21,7 +21,7 @@ defineProps<{
 .SDropdown {
   border: 1px solid var(--c-divider);
   border-radius: 6px;
-  min-width: 256px;
+  min-width: 288px;
   max-height: 384px;
   overflow-y: auto;
   white-space: normal;

package/lib/components/SDropdownSection.vue

@@ -2,6 +2,7 @@
 import { type DropdownSection } from '../composables/Dropdown'
 import SDropdownSectionActions from './SDropdownSectionActions.vue'
 import SDropdownSectionComponent from './SDropdownSectionComponent.vue'
+import SDropdownSectionDateRange from './SDropdownSectionDateRange.vue'
 import SDropdownSectionFilter from './SDropdownSectionFilter.vue'
 import SDropdownSectionMenu from './SDropdownSectionMenu.vue'
 
@@ -22,8 +23,13 @@ defineProps<{
     :options="section.options"
     :on-click="section.onClick"
   />
+  <SDropdownSectionDateRange
+    v-else-if="section.type === 'date-range'"
+    :range="section.range"
+    :on-apply="section.onApply"
+  />
   <SDropdownSectionActions
-    v-if="section.type === 'actions'"
+    v-else-if="section.type === 'actions'"
     :options="section.options"
   />
   <SDropdownSectionComponent

package/lib/components/SDropdownSectionDateRange.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { type MaybeRefOrGetter, computed, shallowRef, toValue } from 'vue'
+import { type DropdownSectionActionsOption } from '../composables/Dropdown'
+import { useTrans } from '../composables/Lang'
+import { useV } from '../composables/V'
+import { DateRange, type DateRangePreset, type DateRangePresetType } from '../support/DateRange'
+import SDropdownSectionActions from './SDropdownSectionActions.vue'
+import SDropdownSectionDateRangeDateFromTo from './SDropdownSectionDateRangeDateFromTo.vue'
+import SDropdownSectionDateRangeYear from './SDropdownSectionDateRangeYear.vue'
+import SDropdownSectionDateRangeYearHalf from './SDropdownSectionDateRangeYearHalf.vue'
+import SDropdownSectionDateRangeYearQuarter from './SDropdownSectionDateRangeYearQuarter.vue'
+import SInputSelect from './SInputSelect.vue'
+
+const props = defineProps<{
+  range: MaybeRefOrGetter<DateRange>
+  onApply: (range: DateRange) => void
+}>()
+
+const { t } = useTrans({
+  en: {
+    p_date_from_to: 'Custom period',
+    p_year: 'Year',
+    p_year_half: 'Year half',
+    p_year_quarter: 'Year quarter',
+    a_apply: 'Apply'
+  },
+  ja: {
+    p_date_from_to: '日付指定',
+    p_year: '年',
+    p_year_half: '半期',
+    p_year_quarter: '四半期',
+    a_apply: '適用する'
+  }
+})
+
+const _range = shallowRef(toValue(props.range))
+
+const presetValue = computed(() => {
+  return _range.value.preset.type
+})
+
+const presetOptions = [
+  { label: t.p_date_from_to, value: 'date-from-to' },
+  { label: t.p_year, value: 'year' },
+  { label: t.p_year_half, value: 'year-half' },
+  { label: t.p_year_quarter, value: 'year-quarter' }
+]
+
+const actions: DropdownSectionActionsOption[] = [
+  { label: t.a_apply, mode: 'info', onClick: onApply }
+]
+
+const { validate } = useV()
+
+function onPresetChange(value: any) {
+  _range.value = new DateRange().setPreset(value as DateRangePresetType)
+}
+
+function onValueChange(value: DateRangePreset) {
+  _range.value = new DateRange().setPreset(value)
+}
+
+async function onApply() {
+  if (await validate()) {
+    props.onApply(_range.value)
+  }
+}
+</script>
+
+<template>
+  <div class="SDropdownSectionDateRange">
+    <div class="preset">
+      <SInputSelect
+        size="mini"
+        :options="presetOptions"
+        :value="presetValue"
+        @change="onPresetChange"
+      />
+    </div>
+    <div class="control">
+      <SDropdownSectionDateRangeDateFromTo
+        v-if="_range.preset.type === 'date-from-to'"
+        :preset="_range.preset"
+        @change="onValueChange"
+      />
+      <SDropdownSectionDateRangeYear
+        v-else-if="_range.preset.type === 'year'"
+        :preset="_range.preset"
+        @change="onValueChange"
+      />
+      <SDropdownSectionDateRangeYearHalf
+        v-else-if="_range.preset.type === 'year-half'"
+        :preset="_range.preset"
+        @change="onValueChange"
+      />
+      <SDropdownSectionDateRangeYearQuarter
+        v-else-if="_range.preset.type === 'year-quarter'"
+        :preset="_range.preset"
+        @change="onValueChange"
+      />
+    </div>
+    <div class="actions">
+      <SDropdownSectionActions
+        :options="actions"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDropdownSectionDateRange {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background-color: var(--c-bg-elv-1);
+}
+
+.preset {
+  padding: 8px;
+  background-color: var(--c-bg-elv-3);
+}
+
+.control {
+  background-color: var(--c-bg-elv-3);
+}
+</style>

package/lib/components/SDropdownSectionDateRangeDateFromTo.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useV } from '../composables/V'
+import { DateFromTo } from '../support/DateRange'
+import { type Day } from '../support/Day'
+import { required } from '../validation/rules'
+import SInputDate from './SInputDate.vue'
+
+const props = defineProps<{
+  preset: DateFromTo
+}>()
+
+const emit = defineEmits<{
+  (e: 'change', value: DateFromTo): void
+}>()
+
+const { validation } = useV(() => ({
+  from: props.preset.from,
+  to: props.preset.to
+}), {
+  from: { required: required() },
+  to: { required: required() }
+})
+
+function onFromChange(value: Day | null) {
+  emit('change', new DateFromTo().setFrom(value).setTo(props.preset.to))
+}
+
+function onToChange(value: Day | null) {
+  emit('change', new DateFromTo().setFrom(props.preset.from).setTo(value))
+}
+</script>
+
+<template>
+  <div class="SDropdownSectionDateRangeDateFromTo">
+    <div class="group">
+      <div class="label">From</div>
+      <div class="input">
+        <SInputDate
+          size="mini"
+          block
+          :model-value="preset.from"
+          :validation="validation.from"
+          hide-error
+          @change="onFromChange"
+        />
+      </div>
+    </div>
+    <div class="group">
+      <div class="label">To</div>
+      <div class="input">
+        <SInputDate
+          size="mini"
+          block
+          :model-value="preset.to"
+          :validation="validation.to"
+          hide-error
+          @change="onToChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDropdownSectionDateRangeDateFromTo {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.group {
+  display: flex;
+  align-items: center;
+  padding: 0 8px 0 16px;
+}
+
+.label {
+  flex-shrink: 0;
+  width: 64px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+
+.input {
+  flex-grow: 1;
+}
+</style>

package/lib/components/SDropdownSectionDateRangeYear.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useV } from '../composables/V'
+import { Year } from '../support/DateRange'
+import { maxValue, minValue, required } from '../validation/rules'
+import SInputNumber from './SInputNumber.vue'
+
+const props = defineProps<{
+  preset: Year
+}>()
+
+const emit = defineEmits<{
+  (e: 'change', value: Year): void
+}>()
+
+const { validation } = useV(() => ({
+  year: props.preset.year
+}), {
+  year: {
+    required: required(),
+    minValue: minValue(1),
+    maxValue: maxValue(9999)
+  }
+})
+
+function onInput(value: number | null) {
+  emit('change', new Year().setYear(value))
+}
+</script>
+
+<template>
+  <div class="SDropdownSectionDateRangeYear">
+    <div class="group">
+      <div class="label">Year</div>
+      <div class="input">
+        <SInputNumber
+          size="mini"
+          placeholder="YYYY"
+          block
+          :model-value="preset.year"
+          :validation="validation.year"
+          hide-error
+          @input="onInput"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDropdownSectionDateRangeYear {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.group {
+  display: flex;
+  align-items: center;
+  padding: 0 8px 0 16px;
+}
+
+.label {
+  flex-shrink: 0;
+  width: 64px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+
+.input {
+  flex-grow: 1;
+}
+</style>

package/lib/components/SDropdownSectionDateRangeYearHalf.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { useV } from '../composables/V'
+import { YearHalf } from '../support/DateRange'
+import { maxValue, minValue, required } from '../validation/rules'
+import SInputNumber from './SInputNumber.vue'
+import SInputSelect from './SInputSelect.vue'
+
+const props = defineProps<{
+  preset: YearHalf
+}>()
+
+const emit = defineEmits<{
+  (e: 'change', value: YearHalf): void
+}>()
+
+const { validation } = useV(() => ({
+  year: props.preset.year
+}), {
+  year: {
+    required: required(),
+    minValue: minValue(1),
+    maxValue: maxValue(9999)
+  }
+})
+
+const halfOptions = [
+  { label: 'H1', value: 1 },
+  { label: 'H2', value: 2 }
+]
+
+function onYearInput(value: number | null) {
+  emit('change', new YearHalf().setYear(value).setHalf(props.preset.half))
+}
+
+function onHalfChange(value: any) {
+  emit('change', new YearHalf().setYear(props.preset.year).setHalf(value))
+}
+</script>
+
+<template>
+  <div class="SDropdownSectionDateRangeYearHalf">
+    <div class="group">
+      <div class="label">Year</div>
+      <div class="input">
+        <SInputNumber
+          size="mini"
+          placeholder="YYYY"
+          block
+          :model-value="preset.year"
+          :validation="validation.year"
+          hide-error
+          @input="onYearInput"
+        />
+      </div>
+    </div>
+    <div class="group">
+      <div class="label">Half</div>
+      <div class="input">
+        <SInputSelect
+          size="mini"
+          :options="halfOptions"
+          :model-value="preset.half"
+          @change="onHalfChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDropdownSectionDateRangeYearHalf {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.group {
+  display: flex;
+  align-items: center;
+  padding: 0 8px 0 16px;
+}
+
+.label {
+  flex-shrink: 0;
+  width: 64px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+
+.input {
+  flex-grow: 1;
+}
+</style>

package/lib/components/SDropdownSectionDateRangeYearQuarter.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { useV } from '../composables/V'
+import { YearQuarter } from '../support/DateRange'
+import { maxValue, minValue, required } from '../validation/rules'
+import SInputNumber from './SInputNumber.vue'
+import SInputSelect from './SInputSelect.vue'
+
+const props = defineProps<{
+  preset: YearQuarter
+}>()
+
+const emit = defineEmits<{
+  (e: 'change', value: YearQuarter): void
+}>()
+
+const { validation } = useV(() => ({
+  year: props.preset.year
+}), {
+  year: {
+    required: required(),
+    minValue: minValue(1),
+    maxValue: maxValue(9999)
+  }
+})
+
+const quarterOptions = [
+  { label: 'Q1', value: 1 },
+  { label: 'Q2', value: 2 },
+  { label: 'Q3', value: 3 },
+  { label: 'Q4', value: 4 }
+]
+
+function onYearInput(value: number | null) {
+  emit('change', new YearQuarter().setYear(value).setQuarter(props.preset.quarter))
+}
+
+function onQuarterChange(value: any) {
+  emit('change', new YearQuarter().setYear(props.preset.year).setQuarter(value))
+}
+</script>
+
+<template>
+  <div class="SDropdownSectionDateRangeYearQuarter">
+    <div class="group">
+      <div class="label">Year</div>
+      <div class="input">
+        <SInputNumber
+          size="mini"
+          placeholder="YYYY"
+          block
+          :model-value="preset.year"
+          :validation="validation.year"
+          hide-error
+          @input="onYearInput"
+        />
+      </div>
+    </div>
+    <div class="group">
+      <div class="label">Quarter</div>
+      <div class="input">
+        <SInputSelect
+          size="mini"
+          :options="quarterOptions"
+          :model-value="preset.quarter"
+          @change="onQuarterChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDropdownSectionDateRangeYearQuarter {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.group {
+  display: flex;
+  align-items: center;
+  padding: 0 8px 0 16px;
+}
+
+.label {
+  flex-shrink: 0;
+  width: 64px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+
+.input {
+  flex-grow: 1;
+}
+</style>

package/lib/components/SDropdownSectionMenu.vue

@@ -1,23 +1,15 @@
 <script setup lang="ts">
-import { type DropdownSectionMenuOption } from '../composables/Dropdown'
+import SActionList, { type ActionList } from './SActionList.vue'
 
 defineProps<{
-  options: DropdownSectionMenuOption[]
+  options: ActionList
 }>()
 </script>
 
 <template>
-  <ul class="SDropdownSectionMenu">
-    <li v-for="option in options" :key="option.label" class="item">
-      <button
-        class="button"
-        @click="option.onClick"
-        :disabled="option.disabled"
-      >
-        {{ option.label }}
-      </button>
-    </li>
-  </ul>
+  <div class="SDropdownSectionMenu">
+    <SActionList :list="options" />
+  </div>
 </template>
 
 <style scoped lang="postcss">
@@ -25,25 +17,4 @@ defineProps<{
   padding: 8px;
   background-color: var(--c-bg-elv-3);
 }
-
-.button {
-  display: block;
-  border-radius: 6px;
-  padding: 0 8px;
-  width: 100%;
-  text-align: left;
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 400;
-  transition: color 0.25s, background-color 0.25s;
-
-  &:hover:not(:disabled) {
-    background-color: var(--c-bg-mute-1);
-  }
-
-  &:disabled {
-    color: var(--c-text-3);
-    cursor: not-allowed;
-  }
-}
 </style>

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/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

@@ -1,18 +1,22 @@
 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 SControlPagination from '../components/SControlPagination.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('SControlPagination', SControlPagination)
   app.component('SControlRight', SControlRight)
   app.component('SControlText', SControlText)
 }
@@ -20,10 +24,12 @@ export function mixin(app: App): void {
 declare module 'vue' {
   export interface GlobalComponents {
     SControl: typeof SControl
+    SControlActionMenu: typeof SControlActionMenu
     SControlButton: typeof SControlButton
     SControlCenter: typeof SControlCenter
     SControlInputSearch: typeof SControlInputSearch
     SControlLeft: typeof SControlLeft
+    SControlPagination: typeof SControlPagination
     SControlRight: typeof SControlRight
     SControlText: typeof SControlText
   }

package/lib/support/DateRange.ts

@@ -0,0 +1,227 @@
+import { type Day, day } from './Day'
+
+export type DateRangePreset =
+  | DateFromTo
+  | Year
+  | YearHalf
+  | YearQuarter
+
+export type DateRangePresetType =
+  | 'date-from-to'
+  | 'year'
+  | 'year-half'
+  | 'year-quarter'
+
+export type DateRangePresetDict = {
+  'date-from-to': typeof DateFromTo
+  'year': typeof Year
+  'year-half': typeof YearHalf
+  'year-quarter': typeof YearQuarter
+}
+
+export class DateRange {
+  preset: DateRangePreset
+
+  presetDict: DateRangePresetDict = {
+    'date-from-to': DateFromTo,
+    'year': Year,
+    'year-half': YearHalf,
+    'year-quarter': YearQuarter
+  }
+
+  constructor() {
+    this.preset = new DateFromTo()
+  }
+
+  setPreset(preset: DateRangePreset | DateRangePresetType): this {
+    preset = typeof preset === 'string' ? new this.presetDict[preset]() : preset
+
+    this.preset = preset
+
+    return this
+  }
+
+  getFrom(): Day | null {
+    return this.preset.getFrom()
+  }
+
+  getTo(): Day | null {
+    return this.preset.getTo()
+  }
+
+  getLabeltext(): string {
+    return this.preset.getLabeltext()
+  }
+}
+
+export abstract class DateRangePresetBase {
+  abstract getFrom(): Day | null
+  abstract getTo(): Day | null
+  abstract getLabeltext(): string
+
+  protected getYear(year: number | null): Day | null {
+    if (!year) {
+      return null
+    }
+
+    const d = day().year(year)
+
+    return d.isValid() ? d : null
+  }
+}
+
+export class DateFromTo extends DateRangePresetBase {
+  type = 'date-from-to' as const
+  from: Day | null
+  to: Day | null
+
+  constructor() {
+    super()
+    this.from = day().subtract(30, 'days')
+    this.to = day()
+  }
+
+  getFrom(): Day | null {
+    return this.from
+  }
+
+  getTo(): Day | null {
+    return this.to
+  }
+
+  getLabeltext(): string {
+    const f = this.getFrom()?.format('YYYY-MM-DD')
+    const t = this.getTo()?.format('YYYY-MM-DD')
+
+    return (f && t) ? `${f} – ${t}` : 'Error'
+  }
+
+  setFrom(from: Day | null): this {
+    this.from = from
+    return this
+  }
+
+  setTo(to: Day | null): this {
+    this.to = to
+    return this
+  }
+}
+
+export class Year extends DateRangePresetBase {
+  type = 'year' as const
+  year: number | null = null
+
+  constructor() {
+    super()
+    this.year = day().year()
+  }
+
+  getFrom(): Day | null {
+    return this.getYear(this.year)?.startOf('year') ?? null
+  }
+
+  getTo(): Day | null {
+    return this.getYear(this.year)?.endOf('year') ?? null
+  }
+
+  getLabeltext(): string {
+    return this.getYear(this.year)?.format('YYYY') ?? 'Error'
+  }
+
+  setYear(year: number | null): this {
+    this.year = year
+    return this
+  }
+}
+
+export class YearHalf extends DateRangePresetBase {
+  type = 'year-half' as const
+  year: number | null
+  half: 1 | 2
+
+  protected monthDict: Record<number, number> = {
+    1: 0,
+    2: 6
+  }
+
+  constructor() {
+    super()
+    this.year = day().year()
+    this.half = 1
+  }
+
+  getFrom(): Day | null {
+    return this.getYear(this.year)
+      ?.month(this.monthDict[this.half])
+      .startOf('month') ?? null
+  }
+
+  getTo(): Day | null {
+    return this.getYear(this.year)
+      ?.month(this.monthDict[this.half] + 5)
+      .endOf('month') ?? null
+  }
+
+  getLabeltext(): string {
+    const y = this.getYear(this.year)?.format('YYYY')
+
+    return y ? `${y}H${this.half}` : 'Error'
+  }
+
+  setYear(year: number | null): this {
+    this.year = year
+    return this
+  }
+
+  setHalf(half: 1 | 2): this {
+    this.half = half
+    return this
+  }
+}
+
+export class YearQuarter extends DateRangePresetBase {
+  type = 'year-quarter' as const
+  year: number | null
+  quarter: 1 | 2 | 3 | 4
+
+  protected monthDict: Record<number, number> = {
+    1: 0,
+    2: 3,
+    3: 6,
+    4: 9
+  }
+
+  constructor() {
+    super()
+    this.year = day().year()
+    this.quarter = 1
+  }
+
+  getFrom(): Day | null {
+    return this.getYear(this.year)
+      ?.month(this.monthDict[this.quarter])
+      .startOf('month') ?? null
+  }
+
+  getTo(): Day | null {
+    return this.getYear(this.year)
+      ?.month(this.monthDict[this.quarter] + 2)
+      .endOf('month') ?? null
+  }
+
+  getLabeltext(): string {
+    const y = this.getYear(this.year)?.format('YYYY')
+
+    return y ? `${y}Q${this.quarter}` : 'Error'
+  }
+
+  setYear(year: number | null): this {
+    this.year = year
+    return this
+  }
+
+  setQuarter(quarter: 1 | 2 | 3 | 4): this {
+    this.quarter = quarter
+    return this
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.16.0",
+  "version": "3.17.1",
   "packageManager": "pnpm@8.12.1",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -56,7 +56,7 @@
     "postcss": "^8.4.32",
     "postcss-nested": "^6.0.1",
     "v-calendar": "^3.1.2",
-    "vue": "^3.3.11",
+    "vue": "^3.3.13",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
@@ -79,16 +79,16 @@
     "@types/file-saver": "^2.0.7",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.10.4",
-    "@types/qs": "^6.9.10",
+    "@types/node": "^20.10.5",
+    "@types/qs": "^6.9.11",
     "@vitejs/plugin-vue": "^4.5.2",
-    "@vitest/coverage-v8": "^1.0.4",
+    "@vitest/coverage-v8": "^1.1.0",
     "@vue/test-utils": "^2.4.3",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^10.7.0",
     "body-scroll-lock": "4.0.0-beta.0",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "fuse.js": "^7.0.0",
     "happy-dom": "^12.10.3",
     "histoire": "^0.17.6",
@@ -102,11 +102,11 @@
     "release-it": "^17.0.1",
     "typescript": "~5.3.3",
     "v-calendar": "^3.1.2",
-    "vite": "^5.0.9",
-    "vitepress": "1.0.0-rc.31",
-    "vitest": "^1.0.4",
-    "vue": "^3.3.11",
+    "vite": "^5.0.10",
+    "vitepress": "1.0.0-rc.32",
+    "vitest": "^1.1.0",
+    "vue": "^3.3.13",
     "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.26"
   }
 }