@globalbrain/sefirot 2.22.0 → 2.24.0

package/lib/components/SInputCheckbox.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import IconCheck from '@iconify-icons/ph/check'
-import type { DefineComponent, PropType } from 'vue'
+import IconCheck from '@iconify-icons/ph/check-bold'
+import { computed } from 'vue'
 import type { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
@@ -9,31 +9,46 @@ import SInputBase from './SInputBase.vue'
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  label: { type: String, default: null },
-  info: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  checkIcon: { type: Object as PropType<IconifyIcon | DefineComponent>, default: null },
-  checkText: { type: String, default: null },
-  checkColor: { type: String as PropType<Color>, default: null },
-  text: { type: String, required: true },
-  modelValue: { type: Boolean, required: true },
-  validation: { type: Object as PropType<Validatable>, default: null }
+const props = withDefaults(defineProps<{
+  size?: Size
+  label?: string
+  info?: string
+  note?: string
+  help?: string
+  checkIcon?: IconifyIcon
+  checkText?: string
+  checkColor?: Color
+  text?: string
+  value?: boolean
+  modelValue?: boolean
+  validation?: Validatable
+  hideError?: boolean
+}>(), {
+  value: undefined,
+  modelValue: undefined
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:model-value', value: boolean): void
+  (e: 'change', value: boolean): void
+}>()
 
-function emitChange() {
-  emit('update:modelValue', !props.modelValue)
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : false
+})
+
+function onClick() {
+  emit('update:model-value', !_value.value)
+  emit('change', !_value.value)
 }
 </script>
 
 <template>
   <SInputBase
     class="SInputCheckbox"
-    :class="[size]"
+    :class="[size ?? 'small']"
     :label="label"
     :note="note"
     :info="info"
@@ -44,21 +59,21 @@ function emitChange() {
     :validation="validation"
   >
     <div class="container">
-      <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
+      <div class="input" :class="{ on: _value }" role="button" @click="onClick">
         <div class="box">
           <div class="check">
             <SIcon :icon="IconCheck" class="check-icon" />
           </div>
         </div>
 
-        <p class="text">{{ text }}</p>
+        <p v-if="text" class="text">{{ text }}</p>
       </div>
     </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .container {
   display: flex;
 }
@@ -68,19 +83,19 @@ function emitChange() {
   display: flex;
   align-items: center;
   height: 32px;
+  cursor: pointer;
 
   &:hover {
     .box {
-      border-color: var(--c-black);
+      border-color: var(--c-info-light);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-black);
-    background-color: var(--c-black);
-    box-shadow: var(--shadow-depth-3);
+    border-color: var(--c-info-light);
+    background-color: var(--c-info-light);
   }
 
   .check {
@@ -91,11 +106,12 @@ function emitChange() {
 
 .box {
   position: relative;
-  border: 2px solid var(--c-text-3);
-  border-radius: 2px;
-  width: 18px;
-  height: 18px;
-  transition: border-color .25s, background-color .25s, box-shadow .25s;
+  border: 1px solid var(--c-divider-1);
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+  background-color: var(--input-bg-color);
+  transition: border-color 0.25s, background-color 0.25s;
 }
 
 .check {
@@ -118,9 +134,9 @@ function emitChange() {
 
 .text {
   margin: 0;
-  padding-left: 12px;
+  padding-left: 10px;
   line-height: 20px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
 }
 </style>

package/lib/components/SInputCheckboxes.vue

@@ -1,50 +1,73 @@
 <script setup lang="ts">
 import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent, PropType } from 'vue'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-interface CheckboxOption {
+export type Value = string | number | boolean
+
+export interface Option {
   label: string
-  value: any
+  value: Value
 }
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  name: { type: String, default: null },
-  label: { type: String, default: null },
-  info: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  checkIcon: { type: Object as PropType<IconifyIcon | DefineComponent>, default: null },
-  checkText: { type: String, default: null },
-  checkColor: { type: String as PropType<Color>, default: null },
-  options: { type: Array as PropType<CheckboxOption[]>, required: true },
-  modelValue: { type: Array, required: true }
+const props = withDefaults(defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  info?: string
+  note?: string
+  help?: string
+  checkIcon?: IconifyIcon
+  checkText?: string
+  checkColor?: Color
+  options: Option[]
+  nullable?: boolean
+  value?: Value[]
+  modelValue?: Value[]
+  validation?: Validatable
+  hideError?: boolean
+}>(), {
+  nullable: true
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:model-value', value: Value[]): void
+  (e: 'change', value: Value[]): void
+}>()
+
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : []
+})
 
-function isChecked(value: unknown): boolean {
-  return props.modelValue.includes(value)
+function isChecked(value: Value): boolean {
+  return _value.value.includes(value)
 }
 
-function handleChange(value: unknown): void {
-  const distinct = props.modelValue
+function handleChange(value: Value): void {
+  const distinct = _value.value
     .filter((v) => v !== value)
-    .concat(props.modelValue.includes(value) ? [] : [value])
+    .concat(_value.value.includes(value) ? [] : [value])
 
-  emit('update:modelValue', distinct)
+  if (distinct.length === 0 && !props.nullable) {
+    return
+  }
+
+  emit('update:model-value', distinct)
+  emit('change', distinct)
 }
 </script>
 
 <template>
   <SInputBase
     class="SInputCheckboxes"
-    :class="[size]"
+    :class="[size ?? 'small']"
     :name="name"
     :label="label"
     :note="note"
@@ -56,7 +79,7 @@ function handleChange(value: unknown): void {
   >
     <div class="container">
       <div class="row">
-        <div v-for="option in options" :key="option.value" class="col">
+        <div v-for="option in options" :key="String(option.value)" class="col">
           <SInputCheckbox
             :text="option.label"
             :model-value="isChecked(option.value)"
@@ -68,17 +91,3 @@ function handleChange(value: unknown): void {
     <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
-
-<style lang="postcss" scoped>
-.container {
-  display: flex;
-}
-
-.row {
-  margin: -2px -8px;
-}
-
-.col {
-  padding: 2px 8px;
-}
-</style>

package/lib/components/SInputFile.vue

@@ -111,7 +111,7 @@ function onChange(e: Event) {
   .placeholder {
     line-height: 30px;
     font-size: var(--input-font-size, var(--input-mini-font-size));
-    font-weight: 500;
+    font-weight: 400;
   }
 }
 
@@ -123,7 +123,7 @@ function onChange(e: Event) {
   .button {
     padding: 0 8px;
     line-height: 26px;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
   }
 
@@ -133,10 +133,6 @@ function onChange(e: Event) {
     font-size: var(--input-font-size, var(--input-small-font-size));
     font-weight: 400;
   }
-
-  .placeholder {
-    font-weight: 500;
-  }
 }
 
 .SInputFile.medium {
@@ -157,10 +153,6 @@ function onChange(e: Event) {
     font-size: var(--input-font-size, var(--input-medium-font-size));
     font-weight: 400;
   }
-
-  .placeholder {
-    font-weight: 500;
-  }
 }
 
 .SInputFile.has-error {

package/lib/components/SInputRadio.vue

@@ -112,7 +112,7 @@ function onClick() {
   align-items: center;
   border-radius: 50%;
   width: 100%;
-  background-color: var(--c-info-bg);
+  background-color: var(--c-info-light);
   opacity: 0;
   transform: scale(0);
   transition: opacity 0.25s, transform 0.1s;

package/lib/components/SMarkdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, shallowRef, watch } from 'vue'
 import type { LinkCallback, LinkSubscriberPayload } from '../composables/Markdown'
 import { useLink, useMarkdown } from '../composables/Markdown'
 
@@ -14,7 +14,7 @@ const emit = defineEmits<{
   (e: 'clicked', payload: LinkSubscriberPayload): void
 }>()
 
-const container = ref<Element | null>(null)
+const container = shallowRef<Element | null>(null)
 
 const { addListeners, subscribe } = useLink({
   container,

package/lib/components/STable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, ref, toRefs, watch } from 'vue'
+import { computed, reactive, shallowRef, toRefs, watch } from 'vue'
 import type { Table } from '../composables/Table'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
@@ -29,8 +29,8 @@ const {
   onReset
 } = toRefs(props.options)
 
-const head = ref<HTMLElement | null>(null)
-const body = ref<HTMLElement | null>(null)
+const head = shallowRef<HTMLElement | null>(null)
+const body = shallowRef<HTMLElement | null>(null)
 
 let headLock = false
 let bodyLock = false

package/lib/components/STooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 import type { Position } from '../composables/Tooltip'
 import { useTooltip } from '../composables/Tooltip'
 import SMarkdown from './SMarkdown.vue'
@@ -10,8 +10,8 @@ const props = defineProps<{
   position?: Position
 }>()
 
-const tip = ref<HTMLElement | null>(null)
-const content = ref<HTMLElement | null>(null)
+const tip = shallowRef<HTMLElement | null>(null)
+const content = shallowRef<HTMLElement | null>(null)
 const classes = computed(() => [props.position ?? 'top'])
 
 const { on, show, hide } = useTooltip(

package/lib/support/Day.ts

@@ -4,13 +4,31 @@ import PluginRelativeTime from 'dayjs/plugin/relativeTime'
 import PluginTimezone from 'dayjs/plugin/timezone'
 import PluginUtc from 'dayjs/plugin/utc'
 
-export type Day = Dayjs
-export type Input = ConfigType
-
 dayjs.extend(PluginUtc)
 dayjs.extend(PluginTimezone)
 dayjs.extend(PluginRelativeTime)
 
+export type Day = Dayjs
+export type Input = ConfigType
+
+/**
+ * The year, month, and date object interface.
+ */
+export interface Ymd {
+  year: number | null
+  month: number | null
+  date: number | null
+}
+
+/**
+ * The hour, minute, and second object interface.
+ */
+export interface Hms {
+  hour: string | null
+  minute: string | null
+  second: string | null
+}
+
 export function day(input?: Input): Day {
   return dayjs(input)
 }
@@ -22,3 +40,33 @@ export function utc(input?: Input): Day {
 export function tz(input?: Input, timezone?: string): Day {
   return dayjs.tz(input, timezone)
 }
+
+/**
+ * Creates a new `Ymd` object.
+ */
+export function createYmd(
+  year: number | null = null,
+  month: number | null = null,
+  date: number | null = null
+): Ymd {
+  return {
+    year,
+    month,
+    date
+  }
+}
+
+/**
+ * Creates a new `Hms` object.
+ */
+export function createHms(
+  hour: string | null = null,
+  minute: string | null = null,
+  second: string | null = null
+): Hms {
+  return {
+    hour,
+    minute,
+    second
+  }
+}

package/lib/validation/rules/hms.ts

@@ -1,7 +1,9 @@
 import { helpers } from '@vuelidate/validators'
-import type { Hms, HmsType } from '../validators/hms'
+import type { Hms } from '../../support/Day'
 import { hms as baseHms } from '../validators/hms'
 
+type HmsType = 'h' | 'm' | 's'
+
 export function hms(required?: HmsType[], msg?: string) {
   return helpers.withMessage(
     () => msg ?? 'The time is invalid.',

package/lib/validation/rules/index.ts

@@ -5,6 +5,7 @@ export * from './email'
 export * from './fileExtension'
 export * from './hms'
 export * from './maxFileSize'
+export * from './maxTotalFileSize'
 export * from './maxLength'
 export * from './maxValue'
 export * from './minLength'

package/lib/validation/rules/maxTotalFileSize.ts

@@ -0,0 +1,16 @@
+import { helpers } from '@vuelidate/validators'
+import { maxTotalFileSize as baseMaxTotalFileSize } from '../validators/maxTotalFileSize'
+
+export function maxTotalFileSize(size: string, msg?: string) {
+  return helpers.withParams(
+    { size },
+    helpers.withMessage(
+      ({ $params }) => {
+        return msg ?? `The total file size must be smaller than ${$params.size}.`
+      },
+      (files: File[]) => {
+        return !helpers.req(files) || baseMaxTotalFileSize(files, size)
+      }
+    )
+  )
+}

package/lib/validation/rules/requiredHms.ts

@@ -1,7 +1,9 @@
 import { helpers } from '@vuelidate/validators'
-import type { Hms, HmsType } from '../validators/requiredHms'
+import type { Hms } from '../../support/Day'
 import { requiredHms as baseRequiredHms } from '../validators/requiredHms'
 
+type HmsType = 'h' | 'm' | 's'
+
 export function requiredHms(required?: HmsType[], msg?: string) {
   return helpers.withMessage(
     () => msg ?? 'The field is required.',

package/lib/validation/rules/requiredYmd.ts

@@ -1,7 +1,9 @@
 import { helpers } from '@vuelidate/validators'
-import type { Ymd, YmdType } from '../validators/requiredYmd'
+import type { Ymd } from '../../support/Day'
 import { requiredYmd as baseRequiredYmd } from '../validators/requiredYmd'
 
+type YmdType = 'y' | 'm' | 'd'
+
 export function requiredYmd(required?: YmdType[], msg?: string) {
   return helpers.withMessage(
     () => msg ?? 'The field is required.',

package/lib/validation/rules/ymd.ts

@@ -1,7 +1,9 @@
 import { helpers } from '@vuelidate/validators'
-import type { Ymd, YmdType } from '../validators/ymd'
+import type { Ymd } from '../../support/Day'
 import { ymd as baseYmd } from '../validators/ymd'
 
+type YmdType = 'y' | 'm' | 'd'
+
 export function ymd(required?: YmdType[], msg?: string) {
   return helpers.withMessage(
     () => msg ?? 'The date is invalid.',

package/lib/validation/validators/hms.ts

@@ -1,12 +1,8 @@
-export interface Hms {
-  hour?: string | null
-  minute?: string | null
-  second?: string | null
-}
+import type { Hms } from '../../support/Day'
 
-export type HmsType = 'h' | 'm' | 's'
+type HmsType = 'h' | 'm' | 's'
 
-export const HmsMap = {
+const HmsMap = {
   h: 'hour',
   m: 'minute',
   s: 'second'
@@ -16,7 +12,7 @@ export function hms(hms: Hms, required: HmsType[] = ['h', 'm', 's']): boolean {
   return required.every((r) => {
     const value = hms[HmsMap[r]]
 
-    if (value === undefined) {
+    if (value === null) {
       return true
     }
 

package/lib/validation/validators/index.ts

@@ -0,0 +1,9 @@
+export * from './checked'
+export * from './fileExtension'
+export * from './hms'
+export * from './maxFileSize'
+export * from './maxTotalFileSize'
+export * from './month'
+export * from './requiredHms'
+export * from './requiredYmd'
+export * from './ymd'

package/lib/validation/validators/maxTotalFileSize.ts

@@ -0,0 +1,17 @@
+/**
+ * Validates if the total size of the given files is smaller than the
+ * given size.
+ */
+export function maxTotalFileSize(files: File[], size: string): boolean {
+  const factor = /gb/i.test(size)
+    ? 1e9
+    : /mb/i.test(size)
+      ? 1e6
+      : /kb/i.test(size)
+        ? 1e3
+        : 1
+
+  const total = files.reduce((total, file) => total + file.size, 0)
+
+  return total <= factor * +size.replace(/[^\d\.]/g, '')
+}

package/lib/validation/validators/requiredHms.ts

@@ -1,12 +1,8 @@
-export interface Hms {
-  hour?: string | null
-  minute?: string | null
-  second?: string | null
-}
+import type { Hms } from '../../support/Day'
 
-export type HmsType = 'h' | 'm' | 's'
+type HmsType = 'h' | 'm' | 's'
 
-export const HmsMap = {
+const HmsMap = {
   h: 'hour',
   m: 'minute',
   s: 'second'

package/lib/validation/validators/requiredYmd.ts

@@ -1,7 +1,12 @@
-import type { Ymd, YmdType } from './ymd'
-import { YmdMap } from './ymd'
+import type { Ymd } from '../../support/Day'
 
-export type { Ymd, YmdType, YmdMap }
+type YmdType = 'y' | 'm' | 'd'
+
+const YmdMap = {
+  y: 'year',
+  m: 'month',
+  d: 'date'
+} as const
 
 export function requiredYmd(ymd: Ymd, required: YmdType[] = ['y', 'm', 'd']): boolean {
   return required.every((r) => ymd[YmdMap[r]] != null)

package/lib/validation/validators/ymd.ts

@@ -1,14 +1,9 @@
 import day from 'dayjs'
+import type { Ymd } from '../../support/Day'
 
-export interface Ymd {
-  year: number | null
-  month: number | null
-  date: number | null
-}
-
-export type YmdType = 'y' | 'm' | 'd'
+type YmdType = 'y' | 'm' | 'd'
 
-export const YmdMap = {
+const YmdMap = {
   y: 'year',
   m: 'month',
   d: 'date'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.22.0",
+  "version": "2.24.0",
   "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -53,10 +53,10 @@
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash-es": "^4.17.6",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^18.11.18",
+    "@types/node": "^18.14.6",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vitest/coverage-c8": "^0.28.1",
-    "@vue/test-utils": "^2.2.7",
+    "@vitest/coverage-c8": "^0.29.2",
+    "@vue/test-utils": "^2.3.0",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^9.11.1",
@@ -77,12 +77,12 @@
     "semver": "^7.3.8",
     "typescript": "^4.9.4",
     "v-calendar": "3.0.0-alpha.8",
-    "vite": "^4.0.4",
-    "vitepress": "1.0.0-alpha.40",
-    "vitest": "^0.28.1",
+    "vite": "^4.1.4",
+    "vitepress": "1.0.0-alpha.50",
+    "vitest": "^0.29.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vue-tsc": "^1.0.24"
+    "vue-tsc": "^1.2.0"
   },
   "scripts": {
     "docs": "vitepress dev docs --port 4000",