@globalbrain/sefirot 3.24.0 → 3.25.0

package/lib/components/SDropdownSectionFilter.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   search?: boolean
   selected: MaybeRef<DropdownSectionFilterSelectedValue>
   options: MaybeRef<DropdownSectionFilterOption[]>
-  onClick?(value: string | number | boolean): void
+  onClick?(value: any): void
 }>()
 
 const input = ref<HTMLElement | null>(null)
@@ -35,7 +35,7 @@ onMounted(() => {
   input.value?.focus()
 })
 
-function isActive(value: string | number | boolean) {
+function isActive(value: any) {
   const selected = unref(props.selected)
 
   return isArray(selected)
@@ -51,7 +51,7 @@ function focusNext(event: any) {
   event.target.parentNode.nextElementSibling?.firstElementChild?.focus()
 }
 
-function handleClick(option: DropdownSectionFilterOption, value: string | number | boolean) {
+function handleClick(option: DropdownSectionFilterOption, value: any) {
   option.onClick && option.onClick(value)
   props.onClick && props.onClick(value)
 }

package/lib/components/SInputCheckboxes.vue

@@ -8,7 +8,7 @@ import SInputCheckbox from './SInputCheckbox.vue'
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-export type Value = string | number | boolean
+export type Value = any
 
 export interface Option {
   label: string

package/lib/components/SInputDropdown.vue

@@ -16,9 +16,9 @@ import SInputDropdownItem from './SInputDropdownItem.vue'
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-export type PrimitiveValue = string | number | boolean | null
-export type ArrayValue = (string | number | boolean)[]
-export type OptionValue = string | number | boolean
+export type PrimitiveValue = any
+export type ArrayValue = any[]
+export type OptionValue = any
 
 export type Option = OptionText | OptionAvatar
 

package/lib/components/SInputDropdownItem.vue

@@ -6,7 +6,7 @@ export type Item = ItemText | ItemAvatar
 
 export interface ItemBase {
   type?: 'text' | 'avatar'
-  value: string | number | boolean
+  value: any
 }
 
 export interface ItemText extends ItemBase {
@@ -27,7 +27,7 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'remove', value: string | number | boolean): void
+  (e: 'remove', value: any): void
 }>()
 </script>
 

package/lib/components/SInputDropdownItemAvatar.vue

@@ -6,13 +6,13 @@ import SIcon from './SIcon.vue'
 defineProps<{
   label: string
   image?: string | null
-  value: string | number | boolean
+  value: any
   removable: boolean
   disabled: boolean
 }>()
 
 defineEmits<{
-  (e: 'remove', value: string | number | boolean): void
+  (e: 'remove', value: any): void
 }>()
 </script>
 

package/lib/components/SInputDropdownItemText.vue

@@ -4,13 +4,13 @@ import SIcon from './SIcon.vue'
 
 defineProps<{
   label: string
-  value: string | number | boolean
+  value: any
   removable: boolean
   disabled: boolean
 }>()
 
 defineEmits<{
-  (e: 'remove', value: string | number | boolean): void
+  (e: 'remove', value: any): void
 }>()
 </script>
 

package/lib/components/SInputImage.vue

@@ -34,6 +34,7 @@ const props = withDefaults(defineProps<{
   hideError?: boolean
   validation?: Validatable
 }>(), {
+  size: 'small',
   imageType: 'rectangle',
   imageWidth: '96px',
   imageAspectRatio: '1 / 1',

package/lib/components/SInputRadios.vue

@@ -1,4 +1,11 @@
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="
+    T extends string | number | boolean = string | number | boolean,
+    Nullable extends boolean = false
+  "
+>
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent, computed } from 'vue'
 import { type Validatable } from '../composables/V'
@@ -8,12 +15,19 @@ import SInputRadio from './SInputRadio.vue'
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-export interface Option {
+export interface Option<
+  T extends string | number | boolean = string | number | boolean,
+  Nullable extends boolean = false
+> {
   label: string
-  value: string | number | boolean
+  value: Nullable extends true ? T : T
   disabled?: boolean
 }
 
+type ValueType = Nullable extends true ? T : T
+type ValueOrNull = Nullable extends true ? T | null : T
+type NullValue = Nullable extends true ? null : never
+
 const props = withDefaults(defineProps<{
   size?: Size
   name?: string
@@ -24,11 +38,11 @@ const props = withDefaults(defineProps<{
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color
-  options: Option[]
-  nullable?: boolean
+  options: Option<T, Nullable>[]
+  nullable?: Nullable
   disabled?: boolean
-  value?: string | number | boolean | null
-  modelValue?: string | number | boolean | null
+  value?: ValueType | null
+  modelValue?: ValueType | null
   validation?: Validatable
   hideError?: boolean
 }>(), {
@@ -37,8 +51,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: string | number | boolean | null): void
-  (e: 'change', value: string | number | boolean | null): void
+  (e: 'update:model-value', value: ValueOrNull): void
+  (e: 'change', value: ValueOrNull): void
 }>()
 
 const _value = computed(() => {
@@ -47,29 +61,29 @@ const _value = computed(() => {
     : props.value !== undefined ? props.value : null
 })
 
-function isChecked(value: string | number | boolean) {
+function isChecked(value: ValueType) {
   return value === _value.value
 }
 
-function onUpdate(value: string | number | boolean) {
+function onUpdate(value: ValueType) {
   if (value !== _value.value) {
     emit('update:model-value', value)
     return
   }
 
   if (props.nullable) {
-    emit('update:model-value', null)
+    emit('update:model-value', null as NullValue)
   }
 }
 
-function onChange(value: string | number | boolean) {
+function onChange(value: ValueType) {
   if (value !== _value.value) {
     emit('change', value)
     return
   }
 
   if (props.nullable) {
-    emit('change', null)
+    emit('change', null as NullValue)
   }
 }
 </script>

package/lib/components/SInputSelect.vue

@@ -9,11 +9,11 @@ import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
-export type Value = string | number | boolean | null
+export type Value = any
 
 export interface Option {
   label: string
-  value: string | number | boolean
+  value: any
   disabled?: boolean
 }
 

package/lib/components/SInputSwitches.vue

@@ -10,7 +10,7 @@ export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | '
 
 export interface Option {
   label: string
-  value: string | number | boolean
+  value: any
 }
 
 const props = defineProps<{
@@ -25,24 +25,24 @@ const props = defineProps<{
   checkColor?: CheckColor
   options: Option[]
   disabled?: boolean
-  modelValue: (string | number | boolean)[]
+  modelValue: any[]
   hideError?: boolean
   validation?: Validatable
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: (string | number | boolean)[]): void
+  (e: 'update:modelValue', value: any[]): void
 }>()
 
 const classes = computed(() => [
   props.size ?? 'small'
 ])
 
-function isChecked(value: string | number | boolean): boolean {
+function isChecked(value: any): boolean {
   return props.modelValue.includes(value)
 }
 
-function handleChange(value: string | number | boolean): void {
+function handleChange(value: any): void {
   const difference = props.modelValue
     .filter((v) => v !== value)
     .concat(props.modelValue.includes(value) ? [] : [value])

package/lib/composables/Dropdown.ts

@@ -31,15 +31,10 @@ export interface DropdownSectionFilter extends DropdownSectionBase {
   search?: boolean
   selected: MaybeRef<DropdownSectionFilterSelectedValue>
   options: MaybeRef<DropdownSectionFilterOption[]>
-  onClick?(value: string | number | boolean): void
+  onClick?(value: any): void
 }
 
-export type DropdownSectionFilterSelectedValue =
-  | string
-  | number
-  | boolean
-  | null
-  | (string | number | boolean)[]
+export type DropdownSectionFilterSelectedValue = any
 
 export type DropdownSectionFilterOption =
   | DropdownSectionFilterOptionText
@@ -48,9 +43,9 @@ export type DropdownSectionFilterOption =
 export interface DropdownSectionFilterOptionBase {
   type?: 'text' | 'avatar'
   label: string
-  value: string | number | boolean
+  value: any
   disabled?: boolean
-  onClick?(value: string | number | boolean): void
+  onClick?(value: any): void
 }
 
 export interface DropdownSectionFilterOptionText extends DropdownSectionFilterOptionBase {

package/lib/styles/utilities.css

@@ -46,6 +46,7 @@
 .s-shrink   { flex-shrink: 1; }
 .s-shrink-0 { flex-shrink: 0; }
 
+.s-gap-1  { gap: 1px; }
 .s-gap-4  { gap: 4px; }
 .s-gap-8  { gap: 8px; }
 .s-gap-12 { gap: 12px; }

package/lib/support/Day.ts

@@ -2,7 +2,7 @@ import dayjs, { type ConfigType, type Dayjs } from 'dayjs'
 import PluginRelativeTime from 'dayjs/plugin/relativeTime'
 import PluginTimezone from 'dayjs/plugin/timezone'
 import PluginUtc from 'dayjs/plugin/utc'
-import { isNumber, isObject, isString } from './Utils'
+import { isNullish, isNumber, isObject, isString } from './Utils'
 
 dayjs.extend(PluginUtc)
 dayjs.extend(PluginTimezone)
@@ -60,35 +60,55 @@ export function tz(input?: Input, timezone?: string): Day {
 /**
  * Creates a new `Ymd` object.
  */
+export function createYmd(year?: number | null, month?: number | null, date?: number | null): Ymd
+export function createYmd(day?: Day | null): Ymd
 export function createYmd(
-  year: number | null = null,
+  yearOrDay: number | Day | null = null,
   month: number | null = null,
   date: number | null = null
 ): Ymd {
+  if (isNumber(yearOrDay) || isNullish(yearOrDay)) {
+    return {
+      year: yearOrDay,
+      month,
+      date
+    }
+  }
+
   return {
-    year,
-    month,
-    date
+    year: yearOrDay.year(),
+    month: yearOrDay.month() + 1,
+    date: yearOrDay.date()
   }
 }
 
 /**
  * Creates a new `Hms` object.
  */
+export function createHms(hour?: string | null, minute?: string | null, second?: string | null): Hms
+export function createHms(day?: Day | null): Hms
 export function createHms(
-  hour: string | null = null,
+  hourOrDay: string | Day | null = null,
   minute: string | null = null,
   second: string | null = null
 ): Hms {
+  if (isString(hourOrDay) || isNullish(hourOrDay)) {
+    return {
+      hour: hourOrDay,
+      minute,
+      second
+    }
+  }
+
   return {
-    hour,
-    minute,
-    second
+    hour: hourOrDay.format('HH'),
+    minute: hourOrDay.format('mm'),
+    second: hourOrDay.format('ss')
   }
 }
 
 export function isYmd(value: unknown, required: YmdType[] = ['y', 'm', 'd']): value is Ymd {
-  if (!isObject(value)) {
+  if (isNullish(value) || !isObject(value)) {
     return false
   }
 
@@ -101,7 +121,7 @@ export function isYmd(value: unknown, required: YmdType[] = ['y', 'm', 'd']): va
 }
 
 export function isHms(value: unknown, required: HmsType[] = ['h', 'm', 's']): value is Hms {
-  if (!isObject(value)) {
+  if (isNullish(value) || !isObject(value)) {
     return false
   }
 

package/lib/support/Utils.ts

@@ -1,5 +1,5 @@
 export function isNullish(value: unknown): value is undefined | null {
-  return value === null || value === undefined
+  return value == null
 }
 
 export function isString(value: unknown): value is string {

package/lib/validation/Rule.ts

@@ -1,6 +1,7 @@
 import { type ValidationRuleWithParams } from '@vuelidate/core'
 import { type MessageProps as VMessageProps, helpers } from '@vuelidate/validators'
 import { type Lang, useLang } from '../composables/Lang'
+import { _required } from './validators'
 
 export interface RuleOptions {
   optional?: boolean
@@ -22,7 +23,7 @@ export function createRule(
       return options.message({ ...params, lang })
     },
     (value) => {
-      return options.optional && !helpers.req(value)
+      return options.optional && !_required(value)
         ? true
         : options.validation(value)
     }

package/lib/validation/rules/decimal.ts

@@ -9,6 +9,7 @@ export const message = {
 export function decimal(msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang],
+    optional: true,
     validation: (value) => !hyphen(value) && baseDecimal(value)
   })
 }

package/lib/validation/rules/decimalOrHyphen.ts

@@ -9,6 +9,7 @@ export const message = {
 export function decimalOrHyphen(msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang],
+    optional: true,
     validation: (value) => hyphen(value) || baseDecimal(value)
   })
 }

package/lib/validation/rules/email.ts

@@ -9,6 +9,7 @@ export const message = {
 export function email(msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang],
+    optional: true,
     validation: baseEmail
   })
 }

package/lib/validation/rules/maxLength.ts

@@ -3,7 +3,7 @@ import { maxLength as baseMaxLength } from '../validators'
 
 export const message = {
   en: (length: number) => `The value must be less than or equal to ${length} characters.`,
-  ja: (length: number) => `この値は、最大${length}文字までです。`
+  ja: (length: number) => `この値は最大${length}文字までです。`
 }
 
 export function maxLength(length: number, msg?: string) {

package/lib/validation/rules/maxValue.ts

@@ -9,6 +9,7 @@ export const message = {
 export function maxValue(max: number, msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang](max),
+    optional: true,
     validation: (value) => baseMaxValue(value, max)
   })
 }

package/lib/validation/rules/minValue.ts

@@ -9,6 +9,7 @@ export const message = {
 export function minValue(min: number, msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang](min),
+    optional: true,
     validation: (value) => baseMinValue(value, min)
   })
 }

package/lib/validation/rules/negativeInteger.ts

@@ -9,6 +9,7 @@ export const message = {
 export function negativeInteger(msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang],
+    optional: true,
     validation: baseNegativeInteger
   })
 }

package/lib/validation/rules/positiveInteger.ts

@@ -9,6 +9,7 @@ export const message = {
 export function positiveInteger(msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang],
+    optional: true,
     validation: basePositiveInteger
   })
 }

package/lib/validation/rules/requiredYmd.ts

@@ -11,7 +11,6 @@ export const message = {
 export function requiredYmd(required?: YmdType[], msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang],
-    optional: true,
     validation: (value) => baseRequiredYmd(value, required)
   })
 }

package/lib/validation/rules/url.ts

@@ -9,6 +9,7 @@ export const message = {
 export function url(msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang],
+    optional: true,
     validation: baseUrl
   })
 }

package/lib/validation/rules/zeroOrNegativeInteger.ts

@@ -9,6 +9,7 @@ export const message = {
 export function zeroOrNegativeInteger(msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang],
+    optional: true,
     validation: (value) => zero(value) || baseNegativeInteger(value)
   })
 }

package/lib/validation/rules/zeroOrPositiveInteger.ts

@@ -9,6 +9,7 @@ export const message = {
 export function zeroOrPositiveInteger(msg?: string) {
   return createRule({
     message: ({ lang }) => msg ?? message[lang],
+    optional: true,
     validation: (value) => zero(value) || basePositiveInteger(value)
   })
 }

package/lib/validation/validators/email.ts

@@ -3,7 +3,7 @@ import { isString } from '../../support/Utils'
 /* eslint-disable-next-line no-control-regex */
 const regExp = /^(?:[A-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|[\x01-\x09\x0B\x0C\x0E-\x7F])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21-\x5A\x53-\x7F]|\\[\x01-\x09\x0B\x0C\x0E-\x7F])+)\])$/i
 
-export function email(value: string): boolean {
+export function email(value: unknown): boolean {
   if (!isString(value)) {
     return false
   }

package/lib/validation/validators/maxTotalFileSize.ts

@@ -9,6 +9,10 @@ export function maxTotalFileSize(value: unknown, size: string): boolean {
     return false
   }
 
+  if (value.length === 0) {
+    return true
+  }
+
   const factor = /gb/i.test(size)
     ? 1e9
     : /mb/i.test(size)

package/lib/validation/validators/required.ts

@@ -1,6 +1,14 @@
 import { isArray, isNullish, isString } from '../../support/Utils'
 
 export function required(value: unknown): boolean {
+  if (isString(value)) {
+    value = value.trim()
+  }
+
+  return _required(value)
+}
+
+export function _required(value: unknown): boolean {
   if (isArray(value)) {
     return !!value.length
   }
@@ -17,9 +25,5 @@ export function required(value: unknown): boolean {
     return !Number.isNaN(value.getTime())
   }
 
-  if (isString(value)) {
-    value = value.trim()
-  }
-
   return !!String(value).length
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.24.0",
-  "packageManager": "pnpm@8.14.1",
+  "version": "3.25.0",
+  "packageManager": "pnpm@8.14.3",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "@types/markdown-it": "^13.0.7",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.7.1",
+    "@vueuse/core": "^10.7.2",
     "body-scroll-lock": "4.0.0-beta.0",
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
@@ -56,7 +56,7 @@
     "postcss": "^8.4.33",
     "postcss-nested": "^6.0.1",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.10",
+    "vue": "^3.4.15",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
@@ -72,7 +72,7 @@
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.5.2",
-    "@histoire/plugin-vue": "^0.17.6",
+    "@histoire/plugin-vue": "^0.17.8",
     "@iconify-icons/ph": "^1.2.5",
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.1",
@@ -80,18 +80,18 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.11.0",
+    "@types/node": "^20.11.6",
     "@vitejs/plugin-vue": "^5.0.3",
-    "@vitest/coverage-v8": "^1.1.3",
+    "@vitest/coverage-v8": "^1.2.1",
     "@vue/test-utils": "^2.4.3",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.7.1",
+    "@vueuse/core": "^10.7.2",
     "body-scroll-lock": "4.0.0-beta.0",
     "eslint": "^8.56.0",
     "fuse.js": "^7.0.0",
-    "happy-dom": "^13.0.2",
-    "histoire": "^0.17.6",
+    "happy-dom": "^13.3.1",
+    "histoire": "^0.17.8",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.0.0",
     "normalize.css": "^8.0.1",
@@ -99,13 +99,13 @@
     "postcss": "^8.4.33",
     "postcss-nested": "^6.0.1",
     "punycode": "^2.3.1",
-    "release-it": "^17.0.1",
+    "release-it": "^17.0.3",
     "typescript": "~5.3.3",
     "v-calendar": "^3.1.2",
-    "vite": "^5.0.11",
-    "vitepress": "1.0.0-rc.36",
-    "vitest": "^1.1.3",
-    "vue": "^3.4.10",
+    "vite": "^5.0.12",
+    "vitepress": "1.0.0-rc.40",
+    "vitest": "^1.2.1",
+    "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.27"
   }