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

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [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

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/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.5",
+  "version": "2.0.0-draft.6",
   "description": "Vue Components for Global Brain Design System.",
   "files": [
     "lib"