@globalbrain/sefirot 0.71.0 → 2.0.0-draft.3

package/lib/validation/rules/index.ts

@@ -1,74 +1,10 @@
-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'
-import integer from './integer'
-import maxLength from './maxLength'
-import maxValue from './maxValue'
-import minValue from './minValue'
-import month from './month'
-import not from './not'
-import regex from './regex'
-import required from './required'
-import requiredHMS from './requiredHMS'
-import requiredIf from './requiredIf'
-import requiredMonthDate from './requiredMonthDate'
-import requiredYearMonth from './requiredYearMonth'
-import requiredYearMonthDate from './requiredYearMonthDate'
-import rule from './rule'
-import sameAs from './sameAs'
-import url from './url'
-import validateIf from './validateIf'
-import year from './year'
-import yearMonth from './yearMonth'
-import yearMonthDate from './yearMonthDate'
-
-export interface Rule {
-  name: string
-  message: string
-  optional: boolean
-  validate (value: any, data: Record<string, any>): boolean
-}
-
-export type Locator = string | LocatorFunction
-export type LocatorFunction = (data: Record<string, any>) => any
-
-export function locate(data: Record<string, any>, locator: Locator): any {
-  return isString(locator) ? data[locator] : locator(data)
-}
-
-export {
-  checked,
-  day,
-  every,
-  email,
-  fileExtension,
-  hms,
-  include,
-  includeSome,
-  integer,
-  maxLength,
-  maxValue,
-  minValue,
-  month,
-  not,
-  regex,
-  required,
-  requiredHMS,
-  requiredIf,
-  requiredMonthDate,
-  requiredYearMonth,
-  requiredYearMonthDate,
-  rule,
-  sameAs,
-  url,
-  validateIf,
-  year,
-  yearMonth,
-  yearMonthDate
-}
+export * from './checked'
+export * from './fileExtension'
+export * from './hms'
+export * from './maxLength'
+export * from './minLength'
+export * from './required'
+export * from './requiredHms'
+export * from './requiredIf'
+export * from './requiredYmd'
+export * from './ymd'

package/lib/validation/rules/maxLength.ts

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

package/lib/validation/rules/minLength.ts

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

package/lib/validation/rules/required.ts

@@ -1,11 +1,3 @@
-import { required as baseRequired } from '../validators'
-import { Rule } from './'
+import { helpers, required as baseRequired } from '@vuelidate/validators'
 
-export default function required(message?: string): Rule {
-  return {
-    name: 'required',
-    message: message ?? 'The field is required.',
-    optional: false,
-    validate: baseRequired
-  }
-}
+export const required = helpers.withMessage('The field is required.', baseRequired)

package/lib/validation/rules/requiredHms.ts

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

package/lib/validation/rules/requiredIf.ts

@@ -1,13 +1,5 @@
-import { required } from '../validators'
-import { Rule, Locator, locate } from './'
+import { helpers, requiredIf as baseRequiredIf } from '@vuelidate/validators'
 
-export default function requiredIf(locator: Locator, message?: string): Rule {
-  return {
-    name: 'requiredIf',
-    message: message ?? 'The field is required.',
-    optional: false,
-    validate(value, data) {
-      return locate(data, locator) ? required(value) : true
-    }
-  }
+export function requiredIf(prop: boolean | string | (() => boolean | Promise<boolean>)) {
+  return helpers.withMessage('The field is required.', baseRequiredIf(prop))
 }

package/lib/validation/rules/requiredYmd.ts

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

package/lib/validation/rules/ymd.ts

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

package/lib/validation/validators/checked.ts

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

package/lib/validation/validators/fileExtension.ts

@@ -1,6 +1,6 @@
 import { getExtension } from '../../support/File'
 
-export default function fileExtension(file: File, extensions: string[]): boolean {
+export function fileExtension(file: File, extensions: string[]): boolean {
   const fileExtension = getExtension(file)
 
   return extensions.some((extension) => {

package/lib/validation/validators/hms.ts

@@ -1,20 +1,20 @@
-export interface HMS {
+export interface Hms {
   hour?: string
   minute?: string
   second?: string
 }
 
-export type HMSType = 'h' | 'm' | 's'
+export type HmsType = 'h' | 'm' | 's'
 
-const HMSMap = {
+export const HmsMap = {
   h: 'hour',
   m: 'minute',
   s: 'second'
 } as const
 
-export default function hms(hms: HMS, required: HMSType[] = ['h', 'm', 's']): boolean {
+export function hms(hms: Hms, required: HmsType[] = ['h', 'm', 's']): boolean {
   return required.every((r) => {
-    const value = hms[HMSMap[r]]
+    const value = hms[HmsMap[r]]
 
     if (value === undefined) {
       return true

package/lib/validation/validators/requiredHms.ts

@@ -0,0 +1,17 @@
+export interface Hms {
+  hour?: string
+  minute?: string
+  second?: string
+}
+
+export type HmsType = 'h' | 'm' | 's'
+
+export const HmsMap = {
+  h: 'hour',
+  m: 'minute',
+  s: 'second'
+} as const
+
+export function requiredHms(hms: Hms, required: HmsType[] = ['h', 'm', 's']): boolean {
+  return required.every(r => hms[HmsMap[r]] !== undefined)
+}

package/lib/validation/validators/requiredYmd.ts

@@ -0,0 +1,7 @@
+import { Ymd, YmdType, YmdMap } from './ymd'
+
+export type { Ymd, YmdType, YmdMap }
+
+export function requiredYmd(ymd: Ymd, required: YmdType[] = ['y', 'm', 'd']): boolean {
+  return required.every(r => ymd[YmdMap[r]] !== undefined)
+}

package/lib/validation/validators/ymd.ts

@@ -0,0 +1,41 @@
+import day from 'dayjs'
+
+export interface Ymd {
+  year?: number
+  month?: number
+  date?: number
+}
+
+export type YmdType = 'y' | 'm' | 'd'
+
+export const YmdMap = {
+  y: 'year',
+  m: 'month',
+  d: 'date'
+} as const
+
+export function ymd(ymd: Ymd, required: YmdType[] = ['y', 'm', 'd']): boolean {
+  return required.every((r) => {
+    const value = ymd[YmdMap[r]]
+
+    if (value === undefined) {
+      return true
+    }
+
+    if (r === 'y') {
+      return value > 0 && value <= 9999
+    }
+
+    if (r === 'm') {
+      return value > 0 && value <= 12
+    }
+
+    const d = day(new Date(2020, ymd.month ? ymd.month - 1 : 1, value))
+
+    if (d.month() + 1 !== (ymd.month ?? 1)) {
+      return false
+    }
+
+    return d.isValid()
+  })
+}

package/package.json

@@ -1,24 +1,20 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "0.71.0",
+  "version": "2.0.0-draft.3",
   "description": "Vue Components for Global Brain Design System.",
   "files": [
     "lib"
   ],
   "scripts": {
-    "serve": "HOST=0.0.0.0 nuxt",
-    "start": "HOST=0.0.0.0 nuxt start",
-    "build": "nuxt build",
-    "generate": "nuxt generate",
-    "lint": "eslint --fix --ignore-path .gitignore './{lib,docs,test}/**/*.{ts,vue}'",
-    "lint:fail": "eslint --ignore-path .gitignore './{lib,docs,test}/**/*.{ts,vue}'",
+    "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",
-    "test": "yarn lint && yarn coverage",
     "coverage": "jest --collect-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",
-    "release": "node scripts/release.js",
-    "docs:deploy": "yarn generate && push-dir --dir=dist --branch=gh-pages --cleanup",
-    "clean": "rm -rf {.nuxt,node_modules,coverage,yarn-error.log}"
+    "release": "node scripts/release.js"
   },
   "repository": {
     "type": "git",
@@ -34,54 +30,53 @@
   "bugs": {
     "url": "https://github.com/globalbrain/sefirot/issues"
   },
+  "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",
+    "body-scroll-lock": "^4.0.0-beta.0",
+    "fuse.js": "^6.4.6",
+    "lodash-es": "^4.17.21",
+    "normalize.css": "^8.0.1",
+    "postcss": "^8.4.4",
+    "postcss-nested": "^5.0.6",
+    "typescript": "^4.4.0",
+    "vue": "^3.2.0",
+    "vue-router": "^4.0.12",
+    "vue-tsc": "^0.3.0",
+    "vuex": "^4.0.2"
+  },
   "devDependencies": {
-    "@juggle/resize-observer": "^3.3.1",
-    "@nuxt/types": "^2.15.8",
-    "@nuxt/typescript-build": "^2.1.0",
-    "@nuxtjs/color-mode": "^2.1.1",
-    "@nuxtjs/composition-api": "^0.29.3",
-    "@nuxtjs/dotenv": "^1.4.1",
-    "@nuxtjs/eslint-config-typescript": "^6.0.1",
-    "@nuxtjs/google-analytics": "^2.4.0",
-    "@nuxtjs/markdownit": "^1.2.10",
+    "@babel/core": "^7.16.0",
     "@types/body-scroll-lock": "^3.1.0",
-    "@types/escape-html": "^1.0.1",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^27.0.3",
     "@types/lodash-es": "^4.17.5",
-    "@types/markdown-it": "^12.2.3",
-    "@types/prismjs": "^1.16.6",
-    "@vue/composition-api": "^1.2.4",
-    "@vue/test-utils": "^1.2.2",
-    "@vue/vue2-jest": "^27.0.0-alpha.2",
-    "babel-core": "^7.0.0-bridge.0",
-    "body-scroll-lock": "^3.1.5",
+    "@typescript-eslint/parser": "^5.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",
+    "body-scroll-lock": "^4.0.0-beta.0",
     "codecov": "^3.8.3",
     "conventional-changelog-cli": "^2.1.1",
     "dayjs": "^1.10.7",
-    "escape-html": "^1.0.3",
-    "eslint": "^7.32.0",
+    "eslint": "^8.3.0",
+    "eslint-plugin-jest": "^25.3.0",
+    "eslint-plugin-vue": "^8.0.1",
     "fuse.js": "^6.4.6",
-    "jest": "^27.3.1",
-    "jest-serializer-vue": "^2.0.2",
+    "jest": "^26.0.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "markdown-it": "^12.2.0",
-    "markdown-it-anchor": "^8.4.1",
     "normalize.css": "^8.0.1",
-    "nuxt": "^2.15.8",
-    "portal-vue": "^2.1.7",
-    "postcss-custom-properties": "^10.0.0",
-    "postcss-nested": "^4.2.3",
-    "prismjs": "^1.25.0",
-    "push-dir": "^0.4.1",
-    "simplebar-vue": "^1.6.8",
-    "ts-jest": "^27.0.7",
-    "ts-loader": "^8.3.0",
-    "typescript": "^4.4.4",
-    "v-calendar": "^2.3.4",
-    "vue": "^2.6.14",
-    "vue-router": "^3.5.2",
-    "vue-server-renderer": "^2.6.14",
-    "vue-template-compiler": "^2.6.14"
+    "postcss": "^8.4.4",
+    "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",
+    "vue-router": "^4.0.12",
+    "vue-tsc": "^0.3.0",
+    "vuex": "^4.0.2"
   }
 }

package/lib/components/SAction.vue

@@ -1,37 +0,0 @@
-<template>
-  <component :is="component" :action="action" />
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { Action, Types } from '../composables/Action'
-import SActionButton from './SActionButton.vue'
-import SActionPill from './SActionPill.vue'
-import SActionAvatar from './SActionAvatar.vue'
-import SActionSwitch from './SActionSwitch.vue'
-
-export default defineComponent({
-  props: {
-    action: { type: Object as PropType<Action>, required: true }
-  },
-
-  setup(props) {
-    const component = computed(() => {
-      switch (props.action.type) {
-        case Types.Button:
-          return SActionButton
-        case Types.Pill:
-          return SActionPill
-        case Types.Avatar:
-          return SActionAvatar
-        case Types.Switch:
-          return SActionSwitch
-      }
-    })
-
-    return {
-      component
-    }
-  }
-})
-</script>

package/lib/components/SActionAvatar.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="SActionAvatar">
-    <div v-for="(avatar, index) in action.avatars" :key="index" class="avatars">
-      <div class="avatar">
-        <SAvatar :avatar="avatar.avatar" :name="avatar.name" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import { AvatarAction } from '../composables/Action'
-import SAvatar from './SAvatar.vue'
-
-export default defineComponent({
-  components: {
-    SAvatar
-  },
-
-  props: {
-    action: { type: Object as PropType<AvatarAction>, required: true }
-  }
-})
-</script>

package/lib/components/SActionButton.vue

@@ -1,40 +0,0 @@
-<template>
-  <SButton
-    class="SActionButton"
-    :tag="action.link ? 'nuxt-link' : 'button'"
-    :size="action.size"
-    :type="action.kind"
-    :mode="action.mode"
-    :icon="action.icon"
-    :label="action.label"
-    :to="action.link"
-    block
-    @click="emitCallback"
-  />
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import { ButtonAction } from '../composables/Action'
-import SButton from './SButton.vue'
-
-export default defineComponent({
-  components: {
-    SButton
-  },
-
-  props: {
-    action: { type: Object as PropType<ButtonAction>, required: true }
-  },
-
-  setup(props) {
-    function emitCallback() {
-      props.action.callback && props.action.callback()
-    }
-
-    return {
-      emitCallback
-    }
-  }
-})
-</script>

package/lib/components/SActionPill.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="SActionPill" :class="[action.mode]">
-    {{ action.label }}
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import { PillAction } from '../composables/Action'
-
-export default defineComponent({
-  props: {
-    action: { type: Object as PropType<PillAction>, required: true }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SActionPill {
-  border-radius: 12px;
-  padding: 0 12px;
-  line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--c-text-dark-1);
-}
-
-.SActionPill.neutral { background-color: var(--c-black); }
-.SActionPill.info    { background-color: var(--c-info); }
-.SActionPill.success { background-color: var(--c-success); }
-.SActionPill.warning { background-color: var(--c-warning); }
-.SActionPill.danger  { background-color: var(--c-danger); }
-</style>

package/lib/components/SActionSwitch.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="SActionSwitch">
-    <SInputSwitch
-      :value="action.value"
-      :mode="action.mode"
-      :text="action.text"
-      :text-mode="action.textMode"
-      @change="emitCallback"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import { SwitchAction } from '../composables/Action'
-import SInputSwitch from './SInputSwitch.vue'
-
-export default defineComponent({
-  components: {
-    SInputSwitch
-  },
-
-  props: {
-    action: { type: Object as PropType<SwitchAction>, required: true }
-  },
-
-  setup(props) {
-    function emitCallback() {
-      props.action.callback && props.action.callback()
-    }
-
-    return {
-      emitCallback
-    }
-  }
-})
-</script>