@globalbrain/sefirot 0.69.0 → 0.72.0

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+# [0.72.0](https://github.com/globalbrain/sefirot/compare/v0.71.0...v0.72.0) (2021-12-01)
+
+### Features
+
+* **icon:** add `copy` icon ([#109](https://github.com/globalbrain/sefirot/issues/109)) ([a5dfd72](https://github.com/globalbrain/sefirot/commit/a5dfd726691baecc454efb7b14c9b0028305577b))
+* **input-select:** add `small` size and `nullable` option ([b416612](https://github.com/globalbrain/sefirot/commit/b416612e8c2881920499dc36deb7f7c2b74d9bd3))
+* **input-checkbox:** add size option to input checkbox ([cfddd90](https://github.com/globalbrain/sefirot/commit/cfddd9003685a4b4984f69bafaead92bc84219e3))
+
+# [0.71.0](https://github.com/globalbrain/sefirot/compare/v0.70.1...v0.71.0) (2021-11-18)
+
+### Features
+
+* **icon:** add `send` icon ([683a57a](https://github.com/globalbrain/sefirot/commit/683a57ad712952b1de122c35a8113cf8f1a738ee))
+
+## [0.70.1](https://github.com/globalbrain/sefirot/compare/v0.70.0...v0.70.1) (2021-11-17)
+
+### Bug Fixes
+
+* **input-text:** fix long text getting wrapped inside display value ([19f3ccd](https://github.com/globalbrain/sefirot/commit/19f3ccdf78600a28cd16f970319c46c44100fc26))
+
+# [0.70.0](https://github.com/globalbrain/sefirot/compare/v0.69.0...v0.70.0) (2021-11-17)
+
+### Bug Fixes
+
+* **link:** remove unexpected trailing white space ([9e5592c](https://github.com/globalbrain/sefirot/commit/9e5592c33e111834229fa2e7c95a4f44284088f8))
+
+### Features
+
+* **input-text:** make small and outlined style as default and fix small styling issues ([2ba7691](https://github.com/globalbrain/sefirot/commit/2ba76916e9ab8a2df2002686695e63fea9bcdd35))
+* **input-select:** add error-message option for select input ([#108](https://github.com/globalbrain/sefirot/issues/108)) ([b949136](https://github.com/globalbrain/sefirot/commit/b949136bd0df6cc041ace47a7e16c31e2985ffbe))
+* **input-checkbox:** improve styling and add validation support ([1da8bf1](https://github.com/globalbrain/sefirot/commit/1da8bf163260ecde620e7e485f9b1b2bcda71a2c))
+* **input-file:** add SInputFile component ([#107](https://github.com/globalbrain/sefirot/issues/107)) ([03eb6bb](https://github.com/globalbrain/sefirot/commit/03eb6bbcbba94e6c31693406c41efd402f23c4aa))
+* **validation:** add "checked" rule ([a24c3ba](https://github.com/globalbrain/sefirot/commit/a24c3ba6186fa6ac2c6cf3b361301c5a6a8a62ee))
+
 # [0.69.0](https://github.com/globalbrain/sefirot/compare/v0.68.0...v0.69.0) (2021-10-28)
 
 ### Bug Fixes

package/lib/assets/styles/variables.css

@@ -38,7 +38,7 @@
   --c-divider-light-2: rgba(60, 60, 67, .12);
 
   --c-divider-dark-1: rgba(84, 84, 88, .65);
-  --c-divider-dark-2: rgba(84, 84, 88, .65);
+  --c-divider-dark-2: rgba(84, 84, 84, .48);
 
   --c-text-light-1: var(--c-black);
   --c-text-light-2: rgba(60, 60, 67, .6);
@@ -300,6 +300,7 @@
 
   --input-outlined-bg-disabled: var(--c-white-mute);
   --input-outlined-border: var(--c-divider);
+  --input-outlined-border-focus: var(--c-black);
 
   --input-clear-bg-disabled: var(--c-white);
 
@@ -320,6 +321,7 @@
 
 .dark-mode {
   --input-outlined-bg-disabled: var(--c-black-mute);
+  --input-outlined-border-focus: var(--c-gray);
 
   --input-focus-border: var(--c-gray);
 }

package/lib/components/SInputCheckbox.vue

@@ -1,10 +1,12 @@
 <template>
   <SInputBase
     class="SInputCheckbox"
+    :class="[size]"
     :name="name"
     :label="label"
     :note="note"
     :help="help"
+    :validation="validation"
   >
     <div class="container">
       <div class="input" :class="{ on: value }" role="button" @click="emitChange">
@@ -21,10 +23,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { PropType, defineComponent } from '@vue/composition-api'
+import { Validation } from '../validation/Validation'
 import SIconCheck from './icons/SIconCheck.vue'
 import SInputBase from './SInputBase.vue'
 
+type Size = 'mini' | 'small' | 'medium'
+
 export default defineComponent({
   components: {
     SIconCheck,
@@ -37,12 +42,14 @@ export default defineComponent({
   },
 
   props: {
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },
     help: { type: String, default: null },
     text: { type: String, required: true },
-    value: { type: Boolean, required: true }
+    value: { type: Boolean, required: true },
+    validation: { type: Object as PropType<Validation>, default: null }
   },
 
   setup(props, { emit }) {
@@ -92,7 +99,7 @@ export default defineComponent({
 
 .box {
   position: relative;
-  border: 2px solid var(--c-gray-dark-1);
+  border: 2px solid var(--c-text-3);
   border-radius: 2px;
   width: 18px;
   height: 18px;
@@ -122,5 +129,6 @@ export default defineComponent({
   padding-left: 12px;
   line-height: 20px;
   font-size: 14px;
+  font-weight: 500;
 }
 </style>

package/lib/components/SInputCheckboxes.vue

@@ -1,6 +1,7 @@
 <template>
   <SInputBase
     class="SInputCheckboxes"
+    :class="[size]"
     :name="name"
     :label="label"
     :note="note"
@@ -21,10 +22,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { PropType, defineComponent } from '@vue/composition-api'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 
+type Size = 'mini' | 'small' | 'medium'
+
 export default defineComponent({
   components: {
     SInputBase,
@@ -37,6 +40,7 @@ export default defineComponent({
   },
 
   props: {
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },

package/lib/components/SInputFile.vue

@@ -0,0 +1,227 @@
+<template>
+  <SInputBase
+    class="SInputFile"
+    :class="classes"
+    :name="name"
+    :label="label"
+    :note="note"
+    :help="help"
+    :error-message="errorMessage"
+    :validation="validation"
+  >
+    <input
+      ref="input"
+      class="input"
+      type="file"
+      @change="e => handleChange(e.target.files[0])"
+    >
+
+    <div class="box" role="button" @click="open">
+      <div class="action">
+        <button class="button">
+          {{ text }}
+        </button>
+      </div>
+
+      <div class="text">
+        <p v-if="fileName" class="file-name">{{ fileName }}</p>
+        <p v-else-if="placeholder" class="placeholder">{{ placeholder }}</p>
+      </div>
+    </div>
+  </SInputBase>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref, computed } from '@vue/composition-api'
+import { Validation } from '../validation/Validation'
+import SInputBase from './SInputBase.vue'
+
+type Size = 'mini' | 'small' | 'medium'
+
+export default defineComponent({
+  components: {
+    SInputBase
+  },
+
+  props: {
+    size: { type: String as PropType<Size>, default: 'small' },
+    name: { type: String, default: null },
+    label: { type: String, default: null },
+    note: { type: String, default: null },
+    text: { type: String, default: 'Choose File' },
+    help: { type: String, default: null },
+    placeholder: { type: String, default: null },
+    errorMessage: { type: Boolean, default: true },
+    value: { type: File, default: null },
+    validation: { type: Object as PropType<Validation>, default: null }
+  },
+
+  setup(props, { emit }) {
+    const input = ref<HTMLInputElement | null>(null)
+
+    const classes = computed(() => [props.size])
+
+    const fileName = computed(() => {
+      return props.value ? props.value.name : null
+    })
+
+    function open(): void {
+      input.value!.click()
+    }
+
+    function handleChange(file?: File): void {
+      emit('input', file ?? null)
+      file && props.validation?.$touch()
+    }
+
+    return {
+      input,
+      classes,
+      fileName,
+      open,
+      handleChange
+    }
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+@import "@/assets/styles/variables";
+
+.SInputFile.mini {
+  .action {
+    padding: 2px 8px 2px 2px;
+  }
+
+  .button {
+    padding: 0 8px;
+    line-height: 22px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .file-name,
+  .placeholder {
+    line-height: 30px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+}
+
+.SInputFile.small {
+  .action {
+    padding: 5px 8px 5px 5px;
+  }
+
+  .button {
+    padding: 0 8px;
+    line-height: 26px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .file-name,
+  .placeholder {
+    line-height: 38px;
+    font-size: 14px;
+  }
+
+  .placeholder {
+    font-weight: 500;
+  }
+}
+
+.SInputFile.medium {
+  .action {
+    padding: 7px 8px 7px 7px;
+  }
+
+  .button {
+    padding: 0 12px;
+    line-height: 30px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .file-name,
+  .placeholder {
+    line-height: 46px;
+    font-size: 14px;
+  }
+
+  .placeholder {
+    font-weight: 500;
+  }
+}
+
+.SInputFile.has-error {
+  .box,
+  .box:hover {
+    border-color: var(--c-danger);
+  }
+}
+
+.input {
+  display: none;
+}
+
+.box {
+  display: flex;
+  border: 1px solid var(--input-outlined-border);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color .25s;
+
+  &:hover {
+    border-color: var(--input-outlined-border-focus);
+
+    .button {
+      background-color: var(--c-gray-light-4);
+    }
+  }
+}
+
+.dark-mode .box {
+  &:hover {
+    .button {
+      background-color: var(--c-gray-dark-3);
+    }
+  }
+}
+
+.action {
+  flex-shrink: 0;
+}
+
+.button {
+  border: 1px solid var(--c-divider-light);
+  border-radius: 4px;
+  color: var(--c-text-1);
+  background-color: var(--c-white-mute);
+  transition: background-color .25s;
+}
+
+.dark-mode .button {
+  background-color: var(--c-black-mute);
+  transition: background-color .25s;
+}
+
+.text {
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.file-name,
+.placeholder {
+  margin: 0;
+  padding-right: 12px;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.placeholder {
+  color: var(--input-placeholder);
+}
+</style>

package/lib/components/SInputNumber.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, PropType } from '@vue/composition-api'
+import { PropType, defineComponent, computed } from '@vue/composition-api'
 import { isNullish } from '../support/Util'
 import { Validation } from '../validation/Validation'
 import SInputText, { Size, Mode, Align, Color, Action } from './SInputText.vue'

package/lib/components/SInputRadio.vue

@@ -19,9 +19,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { PropType, defineComponent } from '@vue/composition-api'
 import SInputBase from './SInputBase.vue'
 
+type Size = 'mini' | 'small' | 'medium'
+
 export default defineComponent({
   components: {
     SInputBase
@@ -33,6 +35,7 @@ export default defineComponent({
   },
 
   props: {
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },

package/lib/components/SInputRadios.vue

@@ -26,7 +26,7 @@ import { PropType, defineComponent } from '@vue/composition-api'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+type Size = 'mini' | 'small' | 'medium'
 
 export default defineComponent({
   components: {
@@ -40,7 +40,7 @@ export default defineComponent({
   },
 
   props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },

package/lib/components/SInputSelect.vue

@@ -7,6 +7,7 @@
     :note="note"
     :help="help"
     :validation="validation"
+    :error-message="errorMessage"
   >
     <div class="box" :class="{ focus: isFocused }">
       <select
@@ -19,12 +20,12 @@
         @change="emitChange"
       >
         <option
-          v-if="placeholder"
-          value=""
+          v-if="placeholder || nullable"
+          :value="JSON.stringify({ value: null })"
           :selected="isNotSelected"
-          disabled
+          :disabled="!nullable"
         >
-          {{ placeholder }}
+          {{ placeholder || 'Please select' }}
         </option>
 
         <option
@@ -53,8 +54,8 @@ import SIconChevronUp from './icons/SIconChevronUp.vue'
 import SIconChevronDown from './icons/SIconChevronDown.vue'
 import SInputBase from './SInputBase.vue'
 
-type Size = 'medium' | 'mini'
-type Mode = 'filled' | 'outlined'
+type Size = 'mini' | 'small' | 'medium'
+type Mode = 'outlined' | 'filled'
 
 interface Option {
   label: string
@@ -75,29 +76,29 @@ export default defineComponent({
   },
 
   props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
-    mode: { type: String as PropType<Mode>, default: 'filled' },
+    size: { type: String as PropType<Size>, default: 'small' },
+    mode: { type: String as PropType<Mode>, default: 'outlined' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },
     help: { type: String, default: null },
     placeholder: { type: String, default: null },
-    disabled: { type: Boolean, default: false },
     options: { type: Array as PropType<Option[]>, required: true },
-    validation: { type: Object, default: null },
-    value: { type: [String, Number, Boolean], default: null }
+    nullable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    errorMessage: { type: Boolean, default: true },
+    value: { type: [String, Number, Boolean], default: null },
+    validation: { type: Object, default: null }
   },
 
   setup(props, { emit }) {
     const isFocused = ref(false)
 
-    const classes = computed(() => ({
-      medium: props.size === 'medium',
-      mini: props.size === 'mini',
-      filled: props.mode === 'filled',
-      outlined: props.mode === 'outlined',
-      disabled: props.disabled
-    }))
+    const classes = computed(() => [
+      props.size,
+      props.mode,
+      { disabled: props.disabled }
+    ])
 
     const isNotSelected = computed(() => {
       return props.value === undefined || props.value === null || props.value === ''
@@ -116,7 +117,7 @@ export default defineComponent({
     }
 
     function emitChange(e: SyntheticInputEvent): void {
-      props.validation && props.validation.$touch()
+      props.validation?.$touch()
 
       const option = JSON.parse(e.target.value)
 
@@ -156,6 +157,23 @@ export default defineComponent({
   }
 }
 
+.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;
@@ -194,6 +212,12 @@ export default defineComponent({
 }
 
 .SInputSelect.outlined {
+  &.has-error {
+    .box {
+      border-color: var(--c-danger);
+    }
+  }
+
   .box {
     border-color: var(--input-outlined-border);
 

package/lib/components/SInputText.vue

@@ -96,7 +96,7 @@ import SIconX from './icons/SIconX.vue'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
-export type Mode = 'filled' | 'outlined'
+export type Mode = 'outlined' | 'filled'
 export type Align = 'left' | 'center' | 'right'
 export type Color = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 export type ColorCallback = (value: string | number) => Color
@@ -117,8 +117,8 @@ export default defineComponent({
   },
 
   props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
-    mode: { type: String as PropType<Mode>, default: 'filled' },
+    size: { type: String as PropType<Size>, default: 'small' },
+    mode: { type: String as PropType<Mode>, default: 'outlined' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },
@@ -322,8 +322,8 @@ export default defineComponent({
   }
 
   .clear-svg {
-    width: 10px;
-    height: 10px;
+    width: 16px;
+    height: 16px;
   }
 }
 
@@ -357,7 +357,7 @@ export default defineComponent({
     font-size: 16px;
 
     &.has-icon {
-      padding-left: 30px;
+      padding-left: 36px;
     }
 
     &.is-clearable {
@@ -366,13 +366,13 @@ export default defineComponent({
   }
 
   .icon {
-    top: 9px;
-    left: 10px;
+    top: 12px;
+    left: 12px;
   }
 
   .icon-svg {
-    width: 14px;
-    height: 14px;
+    width: 15px;
+    height: 15px;
   }
 
   .text {
@@ -390,13 +390,13 @@ export default defineComponent({
   .clear {
     top: 0;
     right: 0;
-    width: 32px;
-    height: 32px;
+    width: 40px;
+    height: 40px;
   }
 
   .clear-svg {
-    width: 10px;
-    height: 10px;
+    width: 16px;
+    height: 16px;
   }
 }
 
@@ -466,8 +466,8 @@ export default defineComponent({
   }
 
   .clear-svg {
-    width: 10px;
-    height: 10px;
+    width: 16px;
+    height: 16px;
   }
 }
 
@@ -617,6 +617,7 @@ export default defineComponent({
   .value {
     display: block;
     line-height: 24px;
+    white-space: nowrap;
     overflow: hidden;
   }
 }

package/lib/components/SLink.vue

@@ -8,8 +8,7 @@
     :target="target"
     :rel="rel"
   >
-    <slot />
-    <SIconExternalLink v-if="showExternal" class="SLink-icon" />
+    <slot /><SIconExternalLink v-if="showExternal" class="SLink-icon" />
   </component>
 </template>
 

package/lib/components/SSheetHeaderTitle.vue

@@ -11,7 +11,7 @@
   margin: 0;
   padding: 14px 16px 10px;
   line-height: 20px;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
 }
 </style>

package/lib/components/SSheetMedium.vue

@@ -8,17 +8,7 @@
 @import "@/assets/styles/variables";
 
 .SSheetMedium {
-  padding: 24px 16px;
-
-  @media (min-width: 768px) {
-    padding: 24px;
-  }
-}
-
-.SSheet.small .SSheetMedium {
-  @media (min-width: 768px) {
-    padding: 24px 16px;
-  }
+  padding: 16px;
 }
 
 .SSheetMedium >>> h1 {

package/lib/components/icons/SIconCopy.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M20,23H11a2.9,2.9,0,0,1-3-3V11a2.9,2.9,0,0,1,3-3h9a2.9,2.9,0,0,1,3,3v9A2.9,2.9,0,0,1,20,23ZM11,10a.9.9,0,0,0-1,1v9a.9.9,0,0,0,1,1h9a.9.9,0,0,0,1-1V11a.9.9,0,0,0-1-1Z" />
+    <path d="M5,16H4a2.9,2.9,0,0,1-3-3V4A2.9,2.9,0,0,1,4,1h9a2.9,2.9,0,0,1,3,3V5a1,1,0,0,1-2,0V4a.9.9,0,0,0-1-1H4A.9.9,0,0,0,3,4v9a.9.9,0,0,0,1,1H5a1,1,0,0,1,0,2Z" />
+  </svg>
+</template>

package/lib/components/icons/SIconSend.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M23,1.9c0-0.1,0-0.2-0.1-0.3c0,0,0-0.1,0-0.1c0-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.1-0.3-0.2c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3-0.1C22,1,22,1,22,1c-0.1,0-0.2,0-0.3,0.1l-20,7C1.3,8.2,1,8.5,1,9c0,0.4,0.2,0.8,0.6,1l8.6,3.8l3.8,8.6c0.2,0.4,0.5,0.6,0.9,0.6c0,0,0,0,0,0c0.4,0,0.8-0.3,0.9-0.7l7-20C23,2.2,23,2.1,23,1.9C23,2,23,2,23,1.9z M18.2,4.4l-7.4,7.4L4.7,9.1L18.2,4.4z M14.9,19.3l-2.7-6.1l7.4-7.4L14.9,19.3z" />
+  </svg>
+</template>

package/lib/support/File.ts

@@ -0,0 +1,8 @@
+/**
+ * Get extension of the given file.
+ */
+export function getExtension(file: File): string {
+  const name = file.name
+
+  return name.slice((name.lastIndexOf('.') - 1 >>> 0) + 2)
+}

package/lib/validation/rules/checked.ts

@@ -0,0 +1,11 @@
+import { checked as baseChecked } from '../validators'
+import { Rule } from './'
+
+export default function checked(message?: string): Rule {
+  return {
+    name: 'checked',
+    message: message ?? 'You must check the field.',
+    optional: true,
+    validate: baseChecked
+  }
+}

package/lib/validation/rules/fileExtension.ts

@@ -0,0 +1,11 @@
+import { fileExtension as baseFileExtension } from '../validators'
+import { Rule } from './'
+
+export default function hms(extensions: string[], message?: string): Rule {
+  return {
+    name: 'fileExtension',
+    message: message ?? 'The file extension is invalid.',
+    optional: true,
+    validate: v => baseFileExtension(v, extensions)
+  }
+}

package/lib/validation/rules/index.ts

@@ -1,7 +1,9 @@
 import { isString } from '../../support/Util'
+import checked from './checked'
 import day from './day'
 import every from './every'
 import email from './email'
+import fileExtension from './fileExtension'
 import hms from './hms'
 import include from './include'
 import includeSome from './includeSome'
@@ -41,9 +43,11 @@ export function locate(data: Record<string, any>, locator: Locator): any {
 }
 
 export {
+  checked,
   day,
   every,
   email,
+  fileExtension,
   hms,
   include,
   includeSome,

package/lib/validation/validators/checked.ts

@@ -0,0 +1,3 @@
+export default function checked(value: boolean): boolean {
+  return value === true
+}

package/lib/validation/validators/fileExtension.ts

@@ -0,0 +1,15 @@
+import { getExtension } from '../../support/File'
+
+export default function fileExtension(file: File, extensions: string[]): boolean {
+  const fileExtension = getExtension(file)
+
+  return extensions.some((extension) => {
+    // If the extention option is `jpg`, we'll consider other variants such as
+    // `JPG`, `jpeg`, or `JPEG` to be valid as well for the sake of simplicity.
+    if (extension === 'jpg') {
+      return ['jpg', 'jpeg', 'JPG', 'JPEG'].includes(fileExtension)
+    }
+
+    return fileExtension === extension
+  })
+}

package/lib/validation/validators/index.ts

@@ -1,5 +1,7 @@
+import checked from './checked'
 import day from './day'
 import email from './email'
+import fileExtension from './fileExtension'
 import hms from './hms'
 import include from './include'
 import includeSome from './includeSome'
@@ -22,8 +24,10 @@ import yearMonthDate from './yearMonthDate'
 import yearMonth from './yearMonth'
 
 export {
+  checked,
   day,
   email,
+  fileExtension,
   hms,
   include,
   includeSome,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "0.69.0",
+  "version": "0.72.0",
   "description": "Vue Components for Global Brain Design System.",
   "files": [
     "lib"