@globalbrain/sefirot 3.15.0 → 3.17.0

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/components/SInputText.vue

@@ -6,12 +6,7 @@ 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