@globalbrain/sefirot 0.65.0 → 0.68.0

package/lib/components/icons/SIconPreloader.vue

@@ -0,0 +1,239 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+    <g transform="rotate(0 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="-0.9166666666666666s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g><g transform="rotate(30 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="-0.8333333333333334s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g><g transform="rotate(60 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="-0.75s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g><g transform="rotate(90 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="-0.6666666666666666s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g><g transform="rotate(120 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="-0.5833333333333334s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g><g transform="rotate(150 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="-0.5s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g><g transform="rotate(180 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="-0.4166666666666667s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g><g transform="rotate(210 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="-0.3333333333333333s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g><g transform="rotate(240 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="-0.25s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g><g transform="rotate(270 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="-0.16666666666666666s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g><g transform="rotate(300 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="-0.08333333333333333s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g><g transform="rotate(330 50 50)">
+      <rect
+        class="bar"
+        x="48"
+        y="23"
+        rx="9.6"
+        ry="4.6000000000000005"
+        width="4"
+        height="14"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          keyTimes="0;1"
+          dur="1s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </g></svg>
+</template>
+
+<style lang="postcss" scoped>
+.bar {
+  fill: var(--preloader-color);
+  transition: fill .5s;
+}
+</style>

package/lib/composables/Modal.ts

@@ -1,19 +1,30 @@
-import { Item } from '../store/modal'
+import { Options as ModalOptions } from '../store/modal'
 import { useStore } from './Store'
 
 export interface Modal {
-  open(item: Omit<Item, 'uid'>): Promise<any>
+  open(item?: OpenOptions): Promise<any>
   close(): Promise<any>
 }
 
+export interface OpenOptions {
+  component?: any
+  uid?: number
+  data?: Record<string, any>
+  options?: ModalOptions
+}
+
 let modalUid = 0
 
-export function useModal(): Modal {
+export function useModal(component?: any): Modal {
   const store = useStore()
   const uid = useModalUid()
 
-  function open(item: Omit<Item, 'uid'>) {
-    return store.dispatch('modal/open', { ...item, uid })
+  function open(item: OpenOptions = {}) {
+    return store.dispatch('modal/open', {
+      uid,
+      component,
+      ...item
+    })
   }
 
   function close() {

package/lib/composables/Tooltip.ts

@@ -22,7 +22,7 @@ export function useTooltip(
   }
 
   function hide(): void {
-    on.value = false
+    setTimeout(() => { on.value = false })
   }
 
   function setPosition(): void {

package/lib/mixins/Sheet.ts

@@ -0,0 +1,22 @@
+import { defineComponent } from '@vue/composition-api'
+import SSheet from '../components/SSheet.vue'
+import SSheetHeader from '../components/SSheetHeader.vue'
+import SSheetHeaderTitle from '../components/SSheetHeaderTitle.vue'
+import SSheetMedium from '../components/SSheetMedium.vue'
+import SSheetFooter from '../components/SSheetFooter.vue'
+import SSheetFooterActions from '../components/SSheetFooterActions.vue'
+import SSheetFooterAction from '../components/SSheetFooterAction.vue'
+
+export default function Sheet() {
+  return defineComponent({
+    components: {
+      SSheet,
+      SSheetHeader,
+      SSheetHeaderTitle,
+      SSheetMedium,
+      SSheetFooter,
+      SSheetFooterActions,
+      SSheetFooterAction
+    }
+  })
+}

package/lib/validation/rules/every.ts

@@ -0,0 +1,38 @@
+import { Rule } from './'
+
+interface Options {
+  [name: string]: Rule[]
+}
+
+export default function every(options: Options): Rule {
+  return {
+    name: 'each',
+    message: 'Error found in items.',
+    optional: true,
+    validate(value: Record<string, any>[], data): boolean {
+      return value.every(item => check(options, item, data))
+    }
+  }
+}
+
+function check(
+  options: Options,
+  item: Record<string, any>,
+  data: any
+): boolean {
+  for (const key in item) {
+    const rules = options[key]
+
+    if (!rules) {
+      continue
+    }
+
+    const result = rules.every(rule => rule.validate(item[key], data))
+
+    if (!result) {
+      return false
+    }
+  }
+
+  return true
+}

package/lib/validation/rules/index.ts

@@ -1,5 +1,6 @@
 import { isString } from '../../support/Util'
 import day from './day'
+import every from './every'
 import email from './email'
 import include from './include'
 import includeSome from './includeSome'
@@ -12,11 +13,16 @@ import not from './not'
 import regex from './regex'
 import required from './required'
 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
@@ -34,6 +40,7 @@ export function locate(data: Record<string, any>, locator: Locator): any {
 
 export {
   day,
+  every,
   email,
   include,
   includeSome,
@@ -46,9 +53,14 @@ export {
   regex,
   required,
   requiredIf,
+  requiredMonthDate,
+  requiredYearMonth,
+  requiredYearMonthDate,
   rule,
   sameAs,
   url,
   validateIf,
-  year
+  year,
+  yearMonth,
+  yearMonthDate
 }

package/lib/validation/rules/requiredMonthDate.ts

@@ -0,0 +1,11 @@
+import { requiredMonthDate as baseRequiredMonthDate } from '../validators'
+import { Rule } from './'
+
+export default function requiredMonthDate(message?: string): Rule {
+  return {
+    name: 'requiredMonthDate',
+    message: message ?? 'The field is required.',
+    optional: true,
+    validate: baseRequiredMonthDate
+  }
+}

package/lib/validation/rules/requiredYearMonth.ts

@@ -0,0 +1,11 @@
+import { requiredYearMonth as baseRequiredYearMonth } from '../validators'
+import { Rule } from './'
+
+export default function requiredYearMonth(message?: string): Rule {
+  return {
+    name: 'requiredYearMonth',
+    message: message ?? 'The field is required.',
+    optional: true,
+    validate: baseRequiredYearMonth
+  }
+}

package/lib/validation/rules/requiredYearMonthDate.ts

@@ -0,0 +1,11 @@
+import { requiredYearMonthDate as baseRequiredYearMonthDate } from '../validators'
+import { Rule } from './'
+
+export default function requiredYearMonthDate(message?: string): Rule {
+  return {
+    name: 'requiredYearMonthDate',
+    message: message ?? 'The field is required.',
+    optional: true,
+    validate: baseRequiredYearMonthDate
+  }
+}

package/lib/validation/rules/yearMonth.ts

@@ -0,0 +1,11 @@
+import { yearMonth as baseYearMonth } from '../validators'
+import { Rule } from './'
+
+export default function yearMonth(message?: string): Rule {
+  return {
+    name: 'yearMonth',
+    message: message ?? 'The date is invalid.',
+    optional: true,
+    validate: baseYearMonth
+  }
+}

package/lib/validation/rules/yearMonthDate.ts

@@ -0,0 +1,11 @@
+import { yearMonthDate as baseYearMonthDate } from '../validators'
+import { Rule } from './'
+
+export default function year(message?: string): Rule {
+  return {
+    name: 'yearMonthDate',
+    message: message ?? 'The date is invalid.',
+    optional: true,
+    validate: baseYearMonthDate
+  }
+}

package/lib/validation/validators/index.ts

@@ -7,11 +7,17 @@ import maxLength from './maxLength'
 import maxValue from './maxValue'
 import minValue from './minValue'
 import month from './month'
+import monthDate from './monthDate'
 import regex from './regex'
 import required from './required'
+import requiredMonthDate from './requiredMonthDate'
+import requiredYearMonth from './requiredYearMonth'
+import requiredYearMonthDate from './requiredYearMonthDate'
 import sameAs from './sameAs'
 import url from './url'
 import year from './year'
+import yearMonthDate from './yearMonthDate'
+import yearMonth from './yearMonth'
 
 export {
   day,
@@ -23,9 +29,15 @@ export {
   maxValue,
   minValue,
   month,
+  monthDate,
   regex,
   required,
+  requiredMonthDate,
+  requiredYearMonth,
+  requiredYearMonthDate,
   sameAs,
   url,
-  year
+  year,
+  yearMonthDate,
+  yearMonth
 }

package/lib/validation/validators/monthDate.ts

@@ -0,0 +1,20 @@
+import day from 'dayjs'
+
+export interface MonthDate {
+  month?: number
+  date?: number
+}
+
+export default function monthDate(value: MonthDate): boolean {
+  if (value.month === undefined || value.date === undefined) {
+    return true
+  }
+
+  const d = day(new Date(2020, value.month - 1, value.date))
+
+  if (d.month() + 1 !== value.month) {
+    return false
+  }
+
+  return d.isValid()
+}

package/lib/validation/validators/requiredMonthDate.ts

@@ -0,0 +1,8 @@
+export interface MonthDate {
+  month?: number
+  date?: number
+}
+
+export default function requiredMonthDate(value: MonthDate): boolean {
+  return !(value.month === undefined || value.date === undefined)
+}

package/lib/validation/validators/requiredYearMonth.ts

@@ -0,0 +1,8 @@
+export interface YearMonth {
+  year?: number
+  month?: number
+}
+
+export default function requiredYearMonth(value: YearMonth): boolean {
+  return !(value.year === undefined || value.month === undefined)
+}

package/lib/validation/validators/requiredYearMonthDate.ts

@@ -0,0 +1,9 @@
+export interface YearMonthDate {
+  year?: number
+  month?: number
+  date?: number
+}
+
+export default function requiredYearMonthDate(value: YearMonthDate): boolean {
+  return !(value.year === undefined || value.month === undefined || value.date === undefined)
+}

package/lib/validation/validators/yearMonth.ts

@@ -0,0 +1,20 @@
+export interface YearMonth {
+  year?: number
+  month?: number
+}
+
+export default function yearMonth(value: YearMonth): boolean {
+  if (value.year === undefined || value.month === undefined) {
+    return true
+  }
+
+  if (value.year < 0 || value.year > 9999) {
+    return false
+  }
+
+  if (value.month < 0 || value.month > 12) {
+    return false
+  }
+
+  return true
+}

package/lib/validation/validators/yearMonthDate.ts

@@ -0,0 +1,21 @@
+import day from 'dayjs'
+
+export interface YearMonthDate {
+  year?: number
+  month?: number
+  date?: number
+}
+
+export default function yearMonthDate(value: YearMonthDate): boolean {
+  if (value.year === undefined || value.month === undefined || value.date === undefined) {
+    return true
+  }
+
+  const d = day(new Date(value.year, value.month - 1, value.date))
+
+  if (d.month() + 1 !== value.month) {
+    return false
+  }
+
+  return d.isValid()
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "0.65.0",
+  "version": "0.68.0",
   "description": "Vue Components for Global Brain Design System.",
   "files": [
     "lib"
@@ -36,51 +36,52 @@
   },
   "devDependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@nuxt/types": "^2.15.4",
+    "@nuxt/types": "^2.15.8",
     "@nuxt/typescript-build": "^2.1.0",
-    "@nuxtjs/composition-api": "^0.22.4",
+    "@nuxtjs/color-mode": "^2.1.1",
+    "@nuxtjs/composition-api": "^0.29.3",
     "@nuxtjs/dotenv": "^1.4.1",
-    "@nuxtjs/eslint-config-typescript": "^6.0.0",
+    "@nuxtjs/eslint-config-typescript": "^6.0.1",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/markdownit": "^1.2.10",
-    "@types/body-scroll-lock": "^2.6.1",
+    "@types/body-scroll-lock": "^3.1.0",
     "@types/escape-html": "^1.0.1",
-    "@types/jest": "^26.0.23",
-    "@types/lodash-es": "^4.17.4",
-    "@types/markdown-it": "^12.0.1",
-    "@types/prismjs": "^1.16.5",
-    "@vue/composition-api": "^1.0.0-rc.6",
-    "@vue/test-utils": "^1.1.3",
+    "@types/jest": "^27.0.2",
+    "@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",
-    "codecov": "^3.8.2",
+    "codecov": "^3.8.3",
     "conventional-changelog-cli": "^2.1.1",
-    "dayjs": "^1.10.4",
+    "dayjs": "^1.10.7",
     "escape-html": "^1.0.3",
-    "eslint": "^7.26.0",
+    "eslint": "^7.32.0",
     "fuse.js": "^6.4.6",
-    "jest": "^26.6.3",
+    "jest": "^27.3.1",
     "jest-serializer-vue": "^2.0.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "markdown-it": "^12.0.6",
-    "markdown-it-anchor": "^7.1.0",
+    "markdown-it": "^12.2.0",
+    "markdown-it-anchor": "^8.4.1",
     "normalize.css": "^8.0.1",
-    "nuxt": "^2.15.4",
+    "nuxt": "^2.15.8",
     "portal-vue": "^2.1.7",
     "postcss-custom-properties": "^10.0.0",
     "postcss-nested": "^4.2.3",
-    "prismjs": "^1.23.0",
+    "prismjs": "^1.25.0",
     "push-dir": "^0.4.1",
-    "simplebar-vue": "^1.6.3",
-    "ts-jest": "^26.5.6",
-    "ts-loader": "^8.1.0",
-    "typescript": "^4.2.4",
-    "v-calendar": "^2.3.0",
-    "vue": "^2.6.12",
-    "vue-jest": "^3.0.7",
-    "vue-router": "^3.5.1",
-    "vue-server-renderer": "^2.6.12",
-    "vue-template-compiler": "^2.6.12"
+    "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"
   }
 }