@globalbrain/sefirot 2.2.1 → 2.3.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/Form.ts

@@ -1,5 +1,5 @@
 import cloneDeep from 'lodash-es/cloneDeep'
-import { Ref, reactive } from 'vue'
+import { Ref, computed, reactive } from 'vue'
 import { useSnackbars } from '../stores/Snackbars'
 import { Validation, useValidation } from './Validation'
 
@@ -13,7 +13,7 @@ export interface Form<T extends Record<string, any>> {
 }
 
 export interface UseFormOptions<T extends Record<string, any>> {
-  data: T,
+  data: T
   rules?: Record<string, any> | ((state: T) => Record<string, any>)
 }
 
@@ -26,9 +26,11 @@ export function useForm<
 
   const data = reactive(options.data)
 
-  const rules = options.rules
-    ? typeof options.rules === 'function' ? options.rules(data) : options.rules
-    : {}
+  const rules = computed(() => {
+    return options.rules
+      ? typeof options.rules === 'function' ? options.rules(data) : options.rules
+      : {}
+  })
 
   const validation = useValidation(data, rules)
 

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/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.3.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",