@globalbrain/sefirot 2.0.0-draft.2 → 2.0.0-draft.6

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [2.0.0-draft.6](https://github.com/globalbrain/sefirot/compare/v2.0.0-draft.5...v2.0.0-draft.6) (2022-02-21)
+
+### Features
+
+* **input-select:** add SInputSelect component ([1d0608e](https://github.com/globalbrain/sefirot/commit/1d0608e8aaa3f7007bb4aff18255ce2b528a7d76))
+* **validation:** add custom error message support ([acb0894](https://github.com/globalbrain/sefirot/commit/acb0894ec5fdcc052100e3623525fbf030854a2f))
+
+
+# [2.0.0-draft.5](https://github.com/globalbrain/sefirot/compare/v2.0.0-draft.4...v2.0.0-draft.5) (2022-02-16)
+
+### Features
+
+* **icon:** add a mail icon ([#115](https://github.com/globalbrain/sefirot/issues/115)) ([b3c24a7](https://github.com/globalbrain/sefirot/commit/b3c24a7602936fcba3fdc5ea51a8600adb15ec2c))
+
+# [2.0.0-draft.4](https://github.com/globalbrain/sefirot/compare/v2.0.0-draft.3...v2.0.0-draft.4) (2021-12-22)
+
+### Features
+
+* refactor modals ([36d0d1e](https://github.com/globalbrain/sefirot/commit/36d0d1e7747935aff4d909d4023751002875d6c8))
+
+# [2.0.0-draft.3](https://github.com/globalbrain/sefirot/compare/v2.0.0-draft.2...v2.0.0-draft.3) (2021-12-17)
+
+### Features
+
+* **input-text:** emit "enter" and "blur" event ([a7b2b38](https://github.com/globalbrain/sefirot/commit/a7b2b38dc5f4880e7b680601be6e607d9b180c68))
+
 # [2.0.0-draft.2](https://github.com/globalbrain/sefirot/compare/v2.0.0-draft.1...v2.0.0-draft.2) (2021-12-14)
 
 ### Bug Fixes

package/lib/components/SInputHMS.vue

@@ -59,7 +59,7 @@ interface Value {
 
 type ValueType = 'hour' | 'minute' | 'second'
 
-export interface Fields {
+interface Fields {
   hour?: boolean
   minute?: boolean
   second?: boolean

package/lib/components/SInputNumber.vue

@@ -37,7 +37,7 @@ defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-function emitUpdate(value: string): void {
+function emitUpdate(value: string | null): void {
   emit('update:modelValue', value ? Number(value): null)
 }
 </script>

package/lib/components/SInputSelect.vue

@@ -0,0 +1,235 @@
+<template>
+  <SInputBase
+    class="SInputSelect"
+    :class="classes"
+    :label="label"
+    :note="note"
+    :help="help"
+    :error-message="errorMessage ?? true"
+    :validation="validation"
+  >
+    <div class="box" :class="{ focus: isFocused }">
+      <select
+        class="select"
+        :class="{ 'is-not-selected': isNotSelected }"
+        :disabled="disabled"
+        @focus="focus"
+        @blur="blur"
+        @change="emitChange"
+      >
+        <option
+          v-if="placeholder || nullable"
+          :value="JSON.stringify({ value: null })"
+          :selected="isNotSelected"
+          :disabled="!nullable"
+        >
+          {{ placeholder || 'Please select' }}
+        </option>
+
+        <option
+          v-for="(option, index) in options"
+          :key="index"
+          :style="{ display: option.disabled ? 'none' : undefined }"
+          :value="JSON.stringify(option)"
+          :selected="isSelectedOption(option)"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+
+      <div class="icon" role="button">
+        <SIconChevronUp class="icon-svg up" />
+        <SIconChevronDown class="icon-svg down" />
+      </div>
+    </div>
+  </SInputBase>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, computed } from 'vue'
+import { Validation, Validatable } from '../composables/Validation'
+import SIconChevronUp from './icons/SIconChevronUp.vue'
+import SIconChevronDown from './icons/SIconChevronDown.vue'
+import SInputBase from './SInputBase.vue'
+
+type Size = 'mini' | 'small' | 'medium'
+
+interface Option {
+  label: string
+  value: boolean | number | string
+  disabled?: boolean
+}
+
+const props = defineProps({
+  size: { type: String as PropType<Size>, default: 'small' },
+  label: { type: String, default: null },
+  note: { type: String, default: null },
+  help: { type: String, default: null },
+  placeholder: { type: String, default: null },
+  options: { type: Array as PropType<Option[]>, required: true },
+  disabled: { type: Boolean, default: false },
+  nullable: { type: Boolean, default: false },
+  errorMessage: { type: Boolean, default: true },
+  modelValue: { type: [String, Number, Boolean] as PropType<string | number | boolean | null>, default: null },
+  validation: { type: Object as PropType<Validatable>, default: null }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isFocused = ref(false)
+
+const classes = computed(() => [
+  props.size ?? 'small',
+  { disabled: props.disabled ?? false }
+])
+
+const isNotSelected = computed(() => {
+  return props.modelValue === undefined || props.modelValue === null || props.modelValue === ''
+})
+
+function isSelectedOption(option: Option): boolean {
+  return option.value === props.modelValue
+}
+
+function focus() {
+  isFocused.value = true
+}
+
+function blur() {
+  isFocused.value = false
+}
+
+function emitChange(e: any): void {
+  props.validation?.$touch()
+
+  const option = JSON.parse(e.target.value)
+
+  emit('update:modelValue', option.value)
+}
+</script>
+
+<style scoped lang="postcss">
+.SInputSelect.mini {
+  .box {
+    height: 32px;
+  }
+
+  .select {
+    padding: 3px 30px 3px 12px;
+    line-height: 24px;
+    font-size: 14px;
+  }
+
+  .icon {
+    top: 3px;
+    right: 8px;
+  }
+}
+
+.SInputSelect.small {
+  .box {
+    height: 40px;
+  }
+
+  .select {
+    padding: 7px 30px 5px 12px;
+    line-height: 24px;
+    font-size: 16px;
+  }
+
+  .icon {
+    top: 7px;
+    right: 10px;
+  }
+}
+
+.SInputSelect.medium {
+  .box {
+    height: 48px;
+  }
+
+  .select {
+    padding: 11px 44px 11px 16px;
+    line-height: 24px;
+    font-size: 16px;
+  }
+
+  .icon {
+    top: 11px;
+    right: 12px;
+  }
+}
+
+.SInputSelect.disabled {
+  .box {
+    background-color: var(--c-bg-mute);
+  }
+
+  .box:hover .select {
+    cursor: not-allowed;
+  }
+}
+
+.SInputSelect.has-error {
+  .box {
+    border-color: var(--c-danger);
+  }
+
+  .select {
+    border-color: var(--c-danger);
+  }
+}
+
+.box {
+  position: relative;
+  border: 1px solid var(--input-border);
+  border-radius: 4px;
+  width: 100%;
+  color: var(--input-text);
+  cursor: pointer;
+  transition: border-color .25s, background-color .25s;
+
+  &:hover,
+  &.focus {
+    border-color: var(--input-border);
+  }
+
+  &:focus:not(:focus-visible) {
+    border-color: var(--input-border);
+    outline: 0;
+  }
+}
+
+.select {
+  position: relative;
+  z-index: 20;
+  display: block;
+  border: 0;
+  border-radius: 4px;
+  width: 100%;
+  background-color: transparent;
+  cursor: pointer;
+
+  &.select.is-not-selected {
+    color: var(--input-placeholder);
+    font-weight: 500;
+  }
+}
+
+.icon {
+  position: absolute;
+  z-index: 10;
+  cursor: pointer;
+}
+
+.icon-svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+  fill: var(--input-placeholder);
+}
+
+.icon-svg.up {
+  margin-bottom: -4px;
+}
+</style>

package/lib/components/SInputText.vue

@@ -16,6 +16,7 @@
       :value="modelValue"
       @input="emitInput"
       @blur="emitBlur"
+      @keypress.enter="emitEnter"
     >
   </SInputBase>
 </template>
@@ -40,7 +41,11 @@ const props = defineProps({
   validation: { type: Object as PropType<Validatable>, default: null }
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+  (e: 'blur', value: string | null): void
+  (e: 'enter', value: string | null): void
+}>()
 
 const classes = computed(() => [
   props.size,
@@ -52,11 +57,24 @@ function emitInput(e: Event): void {
 }
 
 function emitBlur(e: FocusEvent): void {
+  const value = getValue(e)
+
   props.validation?.$touch()
-  emit('update:modelValue', getValue(e))
+
+  emit('update:modelValue', value)
+  emit('blur', value)
+}
+
+function emitEnter(e: KeyboardEvent): void {
+  const value = getValue(e)
+
+  props.validation?.$touch()
+
+  emit('update:modelValue', value)
+  emit('enter', value)
 }
 
-function getValue(e: Event | FocusEvent): string | null {
+function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   const value = (e.target as HTMLInputElement).value
 
   return value === '' ? null : value

package/lib/components/SModal.vue

@@ -1,7 +1,7 @@
 <template>
-  <div v-show="show" class="SModal" ref="el" @click="closeIfClosable">
-    <div class="content" @click="closeIfClosable">
-      <component :is="component" v-bind="data" @close="close" />
+  <div v-show="show" class="SModal" ref="el">
+    <div class="content">
+      <component :is="component" v-bind="data ?? {}" @close="close" />
     </div>
   </div>
 </template>
@@ -10,15 +10,16 @@
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 
-const props = defineProps({
-  id: { type: Number, default: null },
-  component: { type: Object, default: () => ({}) },
-  data: { type: Object, default: () => ({}) },
-  show: { type: Boolean, required: true },
-  closable: { type: Boolean, default: true }
-})
+const props = defineProps<{
+  id?: number
+  component: any
+  data?: Record<string, any>
+  show: boolean
+}>()
 
-const emit = defineEmits(['close'])
+const emit = defineEmits<{
+  (e: 'close', id?: number): void
+}>()
 
 const el = ref<any>(null)
 
@@ -29,34 +30,16 @@ function close() {
   emit('close', props.id)
 }
 
-function closeIfClosable(e: any): void {
-  if (props.closable) {
-    if (!isDescendant(e.target)) {
-      close()
-    }
-  }
-}
-
-function isDescendant(el: any): boolean {
-  if (el.classList && el.classList.contains('content')) {
-    return false
-  }
-
-  const parent = document.getElementsByClassName('content')[0]
-
-  return parent && parent.contains(el)
-}
-
-function lock(): void {
+function lock() {
   disableBodyScroll(el.value!, { reserveScrollBarGap: true })
 }
 
-function release(): void {
+function release() {
   enableBodyScroll(el.value!)
 }
 </script>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SModal {
   position: absolute;
   top: 0;
@@ -64,13 +47,8 @@ function release(): void {
   bottom: 0;
   left: 0;
   height: 100vh;
-  padding: 32px 16px 96px;
   overflow: hidden;
   overflow-y: auto;
-
-  @media (min-width: 768px) {
-    padding: 48px 24px 96px;
-  }
 }
 
 .SModal.fade-enter-active .content,

package/lib/components/SPortalModals.vue

@@ -9,7 +9,6 @@
           :show="index === items.length - 1"
           :component="item.component"
           :data="item.data"
-          :closable="item.options && item.options.closable"
           @close="id => close(id)"
         />
       </transition-group>
@@ -43,7 +42,7 @@ watch(hasItem, (value) => {
 
 watch(route, closeAll)
 
-function close(id: number) {
+function close(id?: number) {
   store.dispatch('modal/close', id)
 }
 
@@ -52,7 +51,7 @@ function closeAll() {
 }
 </script>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SPortalModals {
   position: fixed;
   top: 0;

package/lib/components/SSheet.vue

@@ -1,34 +1,92 @@
 <template>
-  <article class="SSheet" :class="[size ?? 'medium']">
-    <slot :close="close" />
-  </article>
+  <div class="SSheet" :class="[size ?? 'medium']" @click="closeIfClosable">
+    <article class="box" @click.stop>
+      <div v-if="closable !== false" class="close">
+        <button class="close-button" @click="$emit('close')">
+          <SIconX class="close-icon" />
+        </button>
+      </div>
+
+      <slot :close="() => emit('close')" />
+    </article>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { useStore } from 'vuex'
+import SIconX from './icons/SIconX.vue'
 
-defineProps<{
+const props = defineProps<{
   size?: 'small' | 'medium' | 'large'
+  closable?: boolean
 }>()
 
-const store = useStore()
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
 
-function close() {
-  store.dispatch('modal/close')
+function closeIfClosable() {
+  if (props.closable !== false) {
+    emit('close')
+  }
 }
 </script>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SSheet {
+  padding: 16px 16px 96px;
+  min-height: 100vh;
+
+  @media (min-width: 512px) {
+    padding: 32px 24px 96px;
+  }
+
+  @media (min-width: 768px) {
+    padding: 48px 32px 128px;
+  }
+}
+
+.SSheet.small .box  { max-width: 392px; }
+.SSheet.medium .box { max-width: 512px; }
+.SSheet.large .box  { max-width: 768px; }
+
+.box {
+  position: relative;
   margin: 0 auto;
   border: 1px solid var(--c-divider-light);
   border-radius: 8px;
   background-color: var(--c-bg);
   box-shadow: var(--shadow-depth-3);
-  overflow: hidden;
 }
 
-.SSheet.small  { max-width: 392px; }
-.SSheet.medium { max-width: 512px; }
-.SSheet.large  { max-width: 768px; }
+.close {
+  position: absolute;
+  top: 10px;
+  right: 4px;
+  z-index: 10;
+
+  @media (min-width: 512px) {
+    top: 14px;
+    right: 12px;
+  }
+}
+
+.close-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+  color: var(--c-text-3);
+  transition: color .25s;
+
+  &:hover {
+    color: var(--c-text-1);
+  }
+}
+
+.close-icon {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
 </style>

package/lib/components/SSheetFooter.vue

@@ -4,9 +4,13 @@
   </footer>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SSheetFooter {
   border-top: 1px solid var(--c-divider-light);
   padding: 0 16px;
+
+  @media (min-width: 512px) {
+    padding: 0 24px;
+  }
 }
 </style>

package/lib/components/SSheetFooterAction.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="SSheetFooterAction">
     <SButton
-      size="medium"
+      size="small"
       :type="type ?? 'primary'"
       :mode="mode ?? 'neutral'"
       :label="label"

package/lib/components/SSheetFooterActions.vue

@@ -8,7 +8,7 @@
 .SSheetFooterActions {
   display: flex;
   justify-content: flex-end;
-  padding: 12px 0 11px;
+  padding: 16px 0 15px;
 }
 
 .SSheetFooterActions :deep(.SSheetFooterAction + .SSheetFooterAction) {

package/lib/components/SSheetMedium.vue

@@ -6,17 +6,11 @@
 
 <style lang="postcss" scoped>
 .SSheetMedium {
-  padding: 16px;
-}
+  padding: 12px 16px 20px;
 
-.SSheetMedium :deep(h1) {
-  line-height: 32px;
-  font-size: 20px;
-  font-weight: 500;
-}
-
-.SSheetMedium :deep(h1 + p) {
-  margin-top: 8px;
+  @media (min-width: 512px) {
+    padding: 16px 24px 26px;
+  }
 }
 
 .SSheetMedium :deep(p) {

package/lib/components/SSheetTitle.vue

@@ -0,0 +1,20 @@
+<template>
+  <header class="SSheetTitle">
+    <h1 class="title">
+      <slot />
+    </h1>
+  </header>
+</template>
+
+<style lang="postcss" scoped>
+.title {
+  padding: 20px 48px 0 16px;
+  line-height: 28px;
+  font-size: 20px;
+  font-weight: 500;
+
+  @media (min-width: 512px) {
+    padding: 24px 64px 0 24px;
+  }
+}
+</style>

package/lib/components/icons/SIconMail.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M20,21H4a3,3,0,0,1-3-3V6A3,3,0,0,1,4,3H20a3,3,0,0,1,3,3V18A3,3,0,0,1,20,21ZM4,5A1,1,0,0,0,3,6V18a1,1,0,0,0,1,1H20a1,1,0,0,0,1-1V6a1,1,0,0,0-1-1Z" />
+    <path d="M12,14a1,1,0,0,1-.57-.18l-10-7A1,1,0,1,1,2.57,5.18L12,11.78l9.43-6.6a1,1,0,1,1,1.14,1.64l-10,7A1,1,0,0,1,12,14Z" />
+  </svg>
+</template>

package/lib/composables/Dropdown.ts

@@ -14,7 +14,7 @@ export interface Search {
   placeholder: string
   missing: string
   value: Ref<string>
-  onInput (text: string): void
+  onInput (text: string | null): void
 }
 
 export type Item = TextItem | UserItem

package/lib/composables/Modal.ts

@@ -1,29 +1,21 @@
 import { useStore } from 'vuex'
-import { Options as ModalOptions } from '../store/modal'
 
 export interface Modal {
-  open(item?: OpenOptions): Promise<any>
+  open(data?: Record<string, any>): Promise<any>
   close(): Promise<any>
 }
 
-export interface OpenOptions {
-  id?: number
-  component?: any
-  data?: Record<string, any>
-  options?: ModalOptions
-}
-
 let modalId = 0
 
 export function useModal(component: any): Modal {
   const store = useStore()
   const id = useModalId()
 
-  function open(item: OpenOptions = {}) {
+  function open(data: Record<string, any> = {}): Promise<any> {
     return store.dispatch('modal/open', {
       id,
       component,
-      ...item
+      data
     })
   }
 

package/lib/mixins/Sheet.ts

@@ -1,7 +1,6 @@
 import { App } from 'vue'
 import SSheet from '../components/SSheet.vue'
-import SSheetHeader from '../components/SSheetHeader.vue'
-import SSheetHeaderTitle from '../components/SSheetHeaderTitle.vue'
+import SSheetTitle from '../components/SSheetTitle.vue'
 import SSheetMedium from '../components/SSheetMedium.vue'
 import SSheetFooter from '../components/SSheetFooter.vue'
 import SSheetFooterActions from '../components/SSheetFooterActions.vue'
@@ -11,8 +10,7 @@ export function mixin(app: App): void {
   app.mixin({
     components: {
       SSheet,
-      SSheetHeader,
-      SSheetHeaderTitle,
+      SSheetTitle,
       SSheetMedium,
       SSheetFooter,
       SSheetFooterActions,

package/lib/store/modal/index.ts

@@ -9,11 +9,6 @@ export interface Item {
   id?: number
   component: any
   data?: Record<string, any>
-  options?: Options
-}
-
-export interface Options {
-  closable?: boolean
 }
 
 function state(): State {

package/lib/validation/rules/checked.ts

@@ -1,7 +1,9 @@
 import { helpers } from '@vuelidate/validators'
 import { checked as baseChecked } from '../validators/checked'
 
-export const checked = helpers.withMessage(
-  'You must check the field.',
-  (value: boolean) => !helpers.req(value) || baseChecked(value)
-)
+export function checked(msg?: string) {
+  return helpers.withMessage(
+    () => msg ?? 'You must check the field.',
+    (value: boolean) => !helpers.req(value) || baseChecked(value)
+  )
+}

package/lib/validation/rules/email.ts

@@ -0,0 +1,8 @@
+import { helpers, email as baseEmail } from '@vuelidate/validators'
+
+export function email(msg?: string) {
+  return helpers.withMessage(
+    () => msg ?? 'The Email is invalid.',
+    baseEmail
+  )
+}

package/lib/validation/rules/fileExtension.ts

@@ -1,9 +1,9 @@
 import { helpers } from '@vuelidate/validators'
 import { fileExtension as baseFileExtension } from '../validators/fileExtension'
 
-export function fileExtension(extensions: string[], message?: string) {
+export function fileExtension(extensions: string[], msg?: string) {
   return helpers.withMessage(
-    'The file extension is invalid.',
+    () => msg ?? 'The file extension is invalid.',
     (value: File) => {
       return !helpers.req(value) || baseFileExtension(value, extensions)
     }

package/lib/validation/rules/hms.ts

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

package/lib/validation/rules/index.ts

@@ -1,4 +1,5 @@
 export * from './checked'
+export * from './email'
 export * from './fileExtension'
 export * from './hms'
 export * from './maxLength'
@@ -7,4 +8,5 @@ export * from './required'
 export * from './requiredHms'
 export * from './requiredIf'
 export * from './requiredYmd'
+export * from './url'
 export * from './ymd'

package/lib/validation/rules/maxLength.ts

@@ -1,11 +1,9 @@
 import { helpers, maxLength as baseMaxLength } from '@vuelidate/validators'
 
-export function maxLength(length: number) {
+export function maxLength(length: number, msg?: string) {
   return helpers.withMessage(
     ({ $params }) => {
-      return `
-        The value must be less or equal to ${($params as any).max} characters.
-      `
+      return msg ?? `The value must be less or equal to ${($params as any).max} characters.`
     },
     baseMaxLength(length)
   )

package/lib/validation/rules/minLength.ts

@@ -1,11 +1,9 @@
 import { helpers, minLength as baseMinLength } from '@vuelidate/validators'
 
-export function minLength(length: number) {
+export function minLength(length: number, msg?: string) {
   return helpers.withMessage(
     ({ $params }) => {
-      return `
-        The value must be greater or equal to ${($params as any).min} characters.
-      `
+      return msg ?? `The value must be greater or equal to ${($params as any).min} characters.`
     },
     baseMinLength(length)
   )

package/lib/validation/rules/required.ts

@@ -1,3 +1,8 @@
 import { helpers, required as baseRequired } from '@vuelidate/validators'
 
-export const required = helpers.withMessage('The field is required.', baseRequired)
+export function required(msg?: string) {
+  return helpers.withMessage(
+    () => msg ?? 'The field is required.',
+    baseRequired
+  )
+}

package/lib/validation/rules/requiredHms.ts

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

package/lib/validation/rules/requiredIf.ts

@@ -1,5 +1,11 @@
 import { helpers, requiredIf as baseRequiredIf } from '@vuelidate/validators'
 
-export function requiredIf(prop: boolean | string | (() => boolean | Promise<boolean>)) {
-  return helpers.withMessage('The field is required.', baseRequiredIf(prop))
+export function requiredIf(
+  prop: boolean | string | (() => boolean | Promise<boolean>),
+  msg?: string
+) {
+  return helpers.withMessage(
+    () => msg ?? 'The field is required.',
+    baseRequiredIf(prop)
+  )
 }

package/lib/validation/rules/requiredYmd.ts

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

package/lib/validation/rules/url.ts

@@ -0,0 +1,8 @@
+import { helpers, url as baseUrl } from '@vuelidate/validators'
+
+export function url(msg?: string) {
+  return helpers.withMessage(
+    () => msg ?? 'The URL is invalid.',
+    baseUrl
+  )
+}

package/lib/validation/rules/ymd.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.0.0-draft.2",
+  "version": "2.0.0-draft.6",
   "description": "Vue Components for Global Brain Design System.",
   "files": [
     "lib"
@@ -9,8 +9,8 @@
     "type": "vue-tsc --noEmit",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix './{lib,tests}/**/*.{ts,vue}'",
     "lint:fail": "eslint --ext .js,.vue --ignore-path .gitignore './{lib,tests}/**/*.{ts,vue}'",
-    "jest": "jest",
-    "coverage": "jest --collect-coverage",
+    "vitest": "vitest",
+    "coverage": "vitest run --coverage",
     "test": "yarn type && yarn lint && yarn coverage",
     "test:fail": "yarn type && yarn lint:fail && yarn coverage",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
@@ -33,50 +33,50 @@
   "peerDependencies": {
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash-es": "^4.17.5",
-    "@vuelidate/core": "^2.0.0-alpha.32",
-    "@vuelidate/validators": "^2.0.0-alpha.25",
+    "@vuelidate/core": "^2.0.0-alpha.34",
+    "@vuelidate/validators": "^2.0.0-alpha.26",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "fuse.js": "^6.4.6",
+    "fuse.js": "^6.5.3",
     "lodash-es": "^4.17.21",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.4.4",
+    "postcss": "^8.4.6",
     "postcss-nested": "^5.0.6",
-    "typescript": "^4.4.0",
-    "vue": "^3.2.0",
+    "typescript": "^4.5.5",
+    "vue": "^3.2.31",
     "vue-router": "^4.0.12",
-    "vue-tsc": "^0.3.0",
+    "vue-tsc": "^0.31.4",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
+    "@babel/core": "^7.17.4",
     "@types/body-scroll-lock": "^3.1.0",
-    "@types/jest": "^27.0.3",
-    "@types/lodash-es": "^4.17.5",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@types/lodash-es": "^4.17.6",
+    "@typescript-eslint/parser": "^5.12.0",
+    "@vitejs/plugin-vue": "^2.2.0",
     "@vue/test-utils": "^2.0.0-rc.17",
-    "@vuelidate/core": "^2.0.0-alpha.32",
-    "@vuelidate/validators": "^2.0.0-alpha.25",
-    "babel-jest": "^26.0.0",
+    "@vuelidate/core": "^2.0.0-alpha.34",
+    "@vuelidate/validators": "^2.0.0-alpha.26",
     "body-scroll-lock": "^4.0.0-beta.0",
+    "c8": "^7.11.0",
     "codecov": "^3.8.3",
-    "conventional-changelog-cli": "^2.1.1",
+    "conventional-changelog-cli": "^2.2.2",
     "dayjs": "^1.10.7",
-    "eslint": "^8.3.0",
-    "eslint-plugin-jest": "^25.3.0",
-    "eslint-plugin-vue": "^8.0.1",
-    "fuse.js": "^6.4.6",
-    "jest": "^26.0.0",
-    "lodash": "^4.17.21",
+    "enquirer": "^2.3.6",
+    "eslint": "^8.9.0",
+    "eslint-plugin-vue": "^8.4.1",
+    "execa": "^5.1.1",
+    "fuse.js": "^6.5.3",
+    "happy-dom": "^2.31.1",
     "lodash-es": "^4.17.21",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.4.4",
+    "postcss": "^8.4.6",
     "postcss-nested": "^5.0.6",
-    "ts-jest": "^26.0.0",
-    "typescript": "^4.4.0",
-    "vue": "^3.2.0",
-    "vue-jest": "^5.0.0-alpha.10",
+    "typescript": "^4.5.5",
+    "vite": "^2.8.3",
+    "vitest": "^0.3.5",
+    "vue": "^3.2.31",
     "vue-router": "^4.0.12",
-    "vue-tsc": "^0.3.0",
+    "vue-tsc": "^0.31.4",
     "vuex": "^4.0.2"
   }
 }

package/lib/components/SSheetHeader.vue

@@ -1,60 +0,0 @@
-<template>
-  <header class="SSheetHeader">
-    <slot />
-
-    <div v-if="closable" class="close">
-      <button class="close-button" @click="close">
-        <SIconX class="close-icon" />
-      </button>
-    </div>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { useStore } from 'vuex'
-import SIconX from './icons/SIconX.vue'
-
-defineProps({
-  closable: { type: Boolean, default: true }
-})
-
-const store = useStore()
-
-function close() {
-  store.dispatch('modal/close')
-}
-</script>
-
-<style lang="postcss" scoped>
-.SSheetHeader {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--c-divider-light);
-  min-height: 48px;
-  background-color: var(--c-bg-soft);
-}
-
-.close {
-  margin: 0 0 0 auto;
-}
-
-.close-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 48px;
-  height: 47px;
-  color: var(--c-text-3);
-  transition: color .25s;
-
-  &:hover {
-    color: var(--c-text-1);
-  }
-}
-
-.close-icon {
-  width: 20px;
-  height: 20px;
-  fill: currentColor;
-}
-</style>

package/lib/components/SSheetHeaderTitle.vue

@@ -1,15 +0,0 @@
-<template>
-  <h1 class="SSheetHeaderTitle">
-    <slot />
-  </h1>
-</template>
-
-<style lang="postcss" scoped>
-.SSheetHeaderTitle {
-  margin: 0;
-  padding: 14px 16px 10px;
-  line-height: 20px;
-  font-size: 14px;
-  font-weight: 500;
-}
-</style>