@globalbrain/sefirot 2.2.1 → 2.4.0

package/lib/components/SSteps.vue

@@ -1,20 +1,6 @@
-<template>
-  <div class="SSteps">
-    <SStep
-      v-for="(step, index) in steps"
-      :key="index"
-      class="item"
-      :style="{ width }"
-      :bar-left="getBarLeftMode(index)"
-      :bar-right="getBarRightMode(index)"
-      v-bind="step"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
-import { Step, BarMode } from '../composables/Step'
+import { PropType, computed } from 'vue'
+import { BarMode, Step } from '../composables/Step'
 import SStep from './SStep.vue'
 
 const props = defineProps({
@@ -52,6 +38,20 @@ function isActive(step: Step): boolean {
 }
 </script>
 
+<template>
+  <div class="SSteps">
+    <SStep
+      v-for="(step, index) in steps"
+      :key="index"
+      class="item"
+      :style="{ width }"
+      :bar-left="getBarLeftMode(index)"
+      :bar-right="getBarRightMode(index)"
+      v-bind="step"
+    />
+  </div>
+</template>
+
 <style lang="postcss" scoped>
 .SSteps {
   display: flex;

package/lib/components/STable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, computed, watch, toRefs } from 'vue'
+import { computed, reactive, ref, toRefs, watch } from 'vue'
 import { Table } from '../composables/Table'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
@@ -24,7 +24,7 @@ const {
   loading,
   onPrev,
   onNext,
-  onReset,
+  onReset
 } = toRefs(props.options)
 
 const head = ref<HTMLElement | null>(null)

package/lib/components/STableCellAvatar.vue

@@ -17,7 +17,7 @@ const _name = computed(() => props.name?.(props.value, props.record))
 </script>
 
 <template>
-  <div class="STableCellAvatar" :class="[{ link}, color]">
+  <div class="STableCellAvatar" :class="[{ link }, color]">
     <SLink class="container" :href="link?.(value, record)">
       <div v-if="_image" class="avatar">
         <SAvatar size="mini" :avatar="_image" :name="_name" />

package/lib/components/STableCellAvatars.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { TableCellAvatarsOption } from '../composables/Table'
+import { TableCellAvatarsOption } from '../composables/Table'
 import SAvatar from './SAvatar.vue'
 
 const props = defineProps<{

package/lib/components/STableCellDay.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Day } from '../support/Day'
+import { Day } from '../support/Day'
 
 defineProps<{
   value?: Day | null

package/lib/components/STableColumn.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import IconDotsThree from '@iconify-icons/ph/dots-three'
-import { ref, computed, unref, watch, nextTick } from 'vue'
+import { computed, nextTick, ref, unref, watch } from 'vue'
 import { DropdownSection } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { isArray } from '../support/Utils'
@@ -93,11 +93,11 @@ async function adjustDialogPosition() {
   const position = (window.innerWidth - rect.right) > dialogWidth ? 'right' : 'left'
 
   top.value = `${rect.top + rect.height - 8}px`
-  left.value =
-    Math.max(
+  left.value
+    = `${Math.max(
       16,
       position === 'right' ? rect.left - 4 : rect.right - dialogWidth - 4
-    ) + 'px'
+    )}px`
 }
 
 function startDialogPositionListener() {

package/lib/components/STooltip.vue

@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import { PropType, computed, ref } from 'vue'
+import { Position, useTooltip } from '../composables/Tooltip'
+import SMarkdown from './SMarkdown.vue'
+
+const props = defineProps({
+  tag: { type: String, default: 'span' },
+  text: { type: String, default: null },
+  position: { type: String as PropType<Position>, default: 'top' }
+})
+
+const tip = ref<HTMLElement | null>(null)
+const content = ref<HTMLElement | null>(null)
+const classes = computed(() => [props.position])
+const { on, show, hide } = useTooltip(content, tip, props.position)
+</script>
+
 <template>
   <component :is="tag" class="STooltip" @mouseenter="show" @mouseleave="hide">
     <template v-if="text">
@@ -20,23 +37,6 @@
   </component>
 </template>
 
-<script setup lang="ts">
-import { computed, PropType, ref } from 'vue'
-import { Position, useTooltip } from '../composables/Tooltip'
-import SMarkdown from './SMarkdown.vue'
-
-const props = defineProps({
-  tag: { type: String, default: 'span' },
-  text: { type: String, default: null },
-  position: { type: String as PropType<Position>, default: 'top' }
-})
-
-const tip = ref<HTMLElement | null>(null)
-const content = ref<HTMLElement | null>(null)
-const classes = computed(() => [props.position])
-const { on, show, hide } = useTooltip(content, tip, props.position)
-</script>
-
 <style lang="postcss" scoped>
 .STooltip {
   position: relative;

package/lib/composables/Data.ts

@@ -0,0 +1,108 @@
+import { watchOnce } from '@vueuse/core'
+import cloneDeep from 'lodash-es/cloneDeep'
+import { WatchSource, reactive } from 'vue'
+import { isObject } from '../support/Utils'
+
+export interface Data<T extends Record<string, any>> {
+  state: T
+  init(): void
+}
+
+export type DataWithDef = Record<string, any>
+
+export interface Def<T = any> {
+  __isDef: true
+  value: any
+  source: WatchSource<T>
+  cb: (value: Exclude<T, undefined>) => void
+}
+
+export type UseDataInput<
+  T extends Record<string, any>
+> = T | ((utils: UseDataInputUtils) => DataWithDef)
+
+export interface UseDataInputUtils {
+  def<T>(
+    value: any,
+    source: WatchSource<T>,
+    cb: (value: Exclude<T, undefined>) => void
+  ): Def<T>
+}
+
+export function useData<T extends Record<string, any>>(
+  data: UseDataInput<T>
+): Data<T> {
+  const { state, defs } = createState(data)
+
+  const initialState = cloneDeep(state)
+  const reactiveState = reactive(state)
+
+  handleDefs(defs, reactiveState)
+
+  function init(): void {
+    Object.assign(reactiveState, initialState)
+  }
+
+  return {
+    state: reactiveState,
+    init
+  }
+}
+
+function createState<T extends Record<string, any>>(
+  data: UseDataInput<T>
+): { state: T; defs: [string, Def][] } {
+  if (typeof data !== 'function') {
+    return { state: data, defs: [] }
+  }
+
+  const dataWithDef = data({ def })
+
+  const state = {} as T
+  const defs = [] as [string, Def][]
+
+  for (const key in dataWithDef) {
+    const maybeDef = dataWithDef[key]
+
+    if (!isDef(maybeDef)) {
+      (state as any)[key] = maybeDef
+      continue
+    }
+
+    (state as any)[key] = maybeDef.value
+
+    defs.push([key, maybeDef])
+  }
+
+  return {
+    state,
+    defs
+  }
+}
+
+function handleDefs<T extends Record<string, any>>(
+  defs: [string, Def][], state: T
+): void {
+  defs.forEach(([key, def]) => {
+    watchOnce(def.source, (value: any) => {
+      (state as any)[key] = def.cb(value)
+    })
+  })
+}
+
+function def<T>(
+  value: any,
+  source: WatchSource<T>,
+  cb: (value: Exclude<T, undefined>) => void
+): Def {
+  return {
+    __isDef: true,
+    value,
+    source,
+    cb
+  }
+}
+
+function isDef(value: any): boolean {
+  return isObject(value) ? !!value.__isDef : false
+}

package/lib/composables/Form.ts

@@ -1,6 +1,6 @@
-import cloneDeep from 'lodash-es/cloneDeep'
-import { Ref, reactive } from 'vue'
+import { Ref, computed } from 'vue'
 import { useSnackbars } from '../stores/Snackbars'
+import { UseDataInput, useData } from './Data'
 import { Validation, useValidation } from './Validation'
 
 export interface Form<T extends Record<string, any>> {
@@ -13,7 +13,7 @@ export interface Form<T extends Record<string, any>> {
 }
 
 export interface UseFormOptions<T extends Record<string, any>> {
-  data: T,
+  data: UseDataInput<T>
   rules?: Record<string, any> | ((state: T) => Record<string, any>)
 }
 
@@ -22,18 +22,18 @@ export function useForm<
 >(options: UseFormOptions<T>): Form<T> {
   const snackbars = useSnackbars()
 
-  const initialData = cloneDeep(options.data)
+  const data = useData(options.data)
 
-  const data = reactive(options.data)
+  const rules = computed(() => {
+    return options.rules
+      ? typeof options.rules === 'function' ? options.rules(data.state) : options.rules
+      : {}
+  })
 
-  const rules = options.rules
-    ? typeof options.rules === 'function' ? options.rules(data) : options.rules
-    : {}
-
-  const validation = useValidation(data, rules)
+  const validation = useValidation(data.state, rules)
 
   function init(): void {
-    Object.assign(data, initialData)
+    data.init()
     reset()
   }
 
@@ -59,7 +59,7 @@ export function useForm<
   }
 
   return {
-    data,
+    data: data.state,
     init,
     reset,
     validation,

package/lib/composables/Grid.ts

@@ -1,4 +1,4 @@
-import { Ref, ref, watchEffect, onMounted, onUnmounted } from 'vue'
+import { Ref, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 
 export interface Grid {
   container: Ref<HTMLElement | null>
@@ -69,7 +69,7 @@ export function useGrid(options: UseGridOptions): Grid {
 }
 
 function toClassSelector(name: string) {
-  return name.startsWith('.') ? name : '.' + name
+  return name.startsWith('.') ? name : `.${name}`
 }
 
 function toClassName(name: string) {
@@ -84,7 +84,7 @@ function createSpacers(size: number, tag: string, classes: string, type: 'fill'
   }
 
   if (type === 'fill') {
-    const spacer = createSpacer(tag, classes, { gridColumn: `span ${size}`})
+    const spacer = createSpacer(tag, classes, { gridColumn: `span ${size}` })
 
     fragment.appendChild(spacer)
 

package/lib/composables/Markdown.ts

@@ -1,7 +1,7 @@
 import MarkdownIt from 'markdown-it'
-import { onUnmounted, Ref } from 'vue'
+import { Ref, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { isCallbackUrl, isExternalUrl, LinkAttrs, linkPlugin } from './markdown/LinkPlugin'
+import { LinkAttrs, isCallbackUrl, isExternalUrl, linkPlugin } from './markdown/LinkPlugin'
 
 export type UseMarkdown = (source: string, inline: boolean) => string
 

package/lib/composables/Tooltip.ts

@@ -46,7 +46,8 @@ export function useTooltip(
 
     if (tipRect.x < 0) {
       adjustLeftPosition(contentRect.x)
-    } else if (tipRightX > window.outerWidth) {
+    }
+    else if (tipRightX > window.outerWidth) {
       adjustRightPosition(contentRightX)
     }
 

package/lib/composables/Validation.ts

@@ -1,8 +1,8 @@
 import {
+  ErrorObject,
+  GlobalConfig,
   Validation,
   ValidationArgs,
-  GlobalConfig,
-  ErrorObject,
   useVuelidate
 } from '@vuelidate/core'
 import { Ref, ToRefs } from 'vue'

package/lib/support/Day.ts

@@ -1,4 +1,4 @@
-import dayjs, { Dayjs, ConfigType } from 'dayjs'
+import dayjs, { ConfigType, Dayjs } from 'dayjs'
 
 export type Day = Dayjs
 export type Input = ConfigType

package/lib/support/Utils.ts

@@ -13,3 +13,7 @@ export function isNumber(value: unknown): value is number {
 export function isArray(value: unknown): value is unknown[] {
   return Array.isArray(value)
 }
+
+export function isObject(value: unknown): value is Record<string, any> {
+  return typeof value === 'object' && value !== null && !isArray(value)
+}

package/lib/validation/rules/email.ts

@@ -1,4 +1,4 @@
-import { helpers, email as baseEmail } from '@vuelidate/validators'
+import { email as baseEmail, helpers } from '@vuelidate/validators'
 
 export function email(msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/hms.ts

@@ -1,5 +1,5 @@
 import { helpers } from '@vuelidate/validators'
-import { hms as baseHms, Hms, HmsType } from '../validators/hms'
+import { Hms, HmsType, hms as baseHms } from '../validators/hms'
 
 export function hms(required?: HmsType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/maxLength.ts

@@ -1,4 +1,4 @@
-import { helpers, maxLength as baseMaxLength } from '@vuelidate/validators'
+import { maxLength as baseMaxLength, helpers } from '@vuelidate/validators'
 
 export function maxLength(length: number, msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/maxValue.ts

@@ -1,4 +1,4 @@
-import { helpers, maxValue as baseMaxValue } from '@vuelidate/validators'
+import { maxValue as baseMaxValue, helpers } from '@vuelidate/validators'
 
 export function maxValue(value: number, msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/minLength.ts

@@ -1,4 +1,4 @@
-import { helpers, minLength as baseMinLength } from '@vuelidate/validators'
+import { minLength as baseMinLength, helpers } from '@vuelidate/validators'
 
 export function minLength(length: number, msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/minValue.ts

@@ -1,4 +1,4 @@
-import { helpers, minValue as baseMinValue } from '@vuelidate/validators'
+import { minValue as baseMinValue, helpers } from '@vuelidate/validators'
 
 export function minValue(value: number, msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/required.ts

@@ -1,4 +1,4 @@
-import { helpers, required as baseRequired } from '@vuelidate/validators'
+import { required as baseRequired, helpers } from '@vuelidate/validators'
 
 export function required(msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/requiredHms.ts

@@ -1,5 +1,5 @@
 import { helpers } from '@vuelidate/validators'
-import { requiredHms as baseRequiredHms, Hms, HmsType } from '../validators/requiredHms'
+import { Hms, HmsType, requiredHms as baseRequiredHms } from '../validators/requiredHms'
 
 export function requiredHms(required?: HmsType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/requiredIf.ts

@@ -1,4 +1,4 @@
-import { helpers, requiredIf as baseRequiredIf } from '@vuelidate/validators'
+import { requiredIf as baseRequiredIf, helpers } from '@vuelidate/validators'
 
 export function requiredIf(
   prop: boolean | string | (() => boolean | Promise<boolean>),

package/lib/validation/rules/requiredYmd.ts

@@ -1,5 +1,5 @@
 import { helpers } from '@vuelidate/validators'
-import { requiredYmd as baseRequiredYmd, Ymd, YmdType } from '../validators/requiredYmd'
+import { Ymd, YmdType, requiredYmd as baseRequiredYmd } from '../validators/requiredYmd'
 
 export function requiredYmd(required?: YmdType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/url.ts

@@ -1,4 +1,4 @@
-import { helpers, url as baseUrl } from '@vuelidate/validators'
+import { url as baseUrl, helpers } from '@vuelidate/validators'
 
 export function url(msg?: string) {
   return helpers.withMessage(

package/lib/validation/rules/ymd.ts

@@ -1,5 +1,5 @@
 import { helpers } from '@vuelidate/validators'
-import { ymd as baseYmd, Ymd, YmdType } from '../validators/ymd'
+import { Ymd, YmdType, ymd as baseYmd } from '../validators/ymd'
 
 export function ymd(required?: YmdType[], msg?: string) {
   return helpers.withMessage(

package/lib/validation/validators/requiredYmd.ts

@@ -1,4 +1,4 @@
-import { Ymd, YmdType, YmdMap } from './ymd'
+import { Ymd, YmdMap, YmdType } from './ymd'
 
 export type { Ymd, YmdType, YmdMap }
 

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "description": "Vue Components for Global Brain Design System.",
-  "files": [
-    "lib"
-  ],
+  "author": "Kia Ishii <ka.ishii@globalbrains.com>",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git@github.com:globalbrain/sefirot.git"
   },
+  "bugs": {
+    "url": "https://github.com/globalbrain/sefirot/issues"
+  },
   "keywords": [
     "sefirot",
     "vue",
     "vue component"
   ],
-  "author": "Kia Ishii <ka.ishii@globalbrains.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/globalbrain/sefirot/issues"
-  },
+  "files": [
+    "lib"
+  ],
   "peerDependencies": {
     "@iconify-icons/ph": "^1.2.2",
     "@iconify/vue": "^4.0.0",
@@ -43,6 +43,7 @@
     "vue-router": "^4.1.5"
   },
   "devDependencies": {
+    "@globalbrain/eslint-config": "^0.1.0",
     "@histoire/plugin-vue": "^0.10.7",
     "@iconify-icons/ph": "^1.2.2",
     "@iconify/vue": "^4.0.0",
@@ -50,8 +51,6 @@
     "@types/lodash-es": "^4.17.6",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^18.8.0",
-    "@typescript-eslint/eslint-plugin": "^5.38.0",
-    "@typescript-eslint/parser": "^5.38.0",
     "@vitejs/plugin-vue": "^3.1.2",
     "@vitest/coverage-c8": "^0.23.4",
     "@vue/test-utils": "^2.1.0",
@@ -64,8 +63,6 @@
     "dayjs": "^1.11.5",
     "enquirer": "^2.3.6",
     "eslint": "^8.23.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-vue": "^9.5.1",
     "execa": "^5.1.1",
     "fuse.js": "^6.6.2",
     "happy-dom": "^6.0.4",
@@ -94,8 +91,8 @@
     "story:build": "histoire build",
     "story:preview": "histoire preview --port 3000",
     "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}'",
+    "lint": "eslint --fix .",
+    "lint:fail": "eslint .",
     "vitest": "vitest",
     "coverage": "vitest run --coverage",
     "test": "pnpm run type && pnpm run lint && pnpm run coverage",