@globalbrain/sefirot 2.13.0 → 2.14.0

package/lib/components/STooltip.vue

@@ -1,112 +1,111 @@
 <script setup lang="ts">
-import { PropType, computed, ref } from 'vue'
+import { 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 props = defineProps<{
+  tag?: string
+  text?: string
+  position?: Position
+}>()
 
 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)
+const classes = computed(() => [props.position ?? 'top'])
+
+const { on, show, hide } = useTooltip(
+  content,
+  tip,
+  computed(() => props.position ?? 'top')
+)
 </script>
 
 <template>
-  <component :is="tag" class="STooltip" @mouseenter="show" @mouseleave="hide">
-    <template v-if="text">
-      <span ref="content" class="STooltip-content">
-        <slot />
-      </span>
-
-      <transition name="fade">
-        <span v-show="on" ref="tip" class="STooltip-container" :class="classes">
-          <SMarkdown class="STooltip-tip" :content="text" inline />
-        </span>
-      </transition>
-    </template>
-
-    <template v-else>
-      <span class="STooltip-content">
-        <slot />
+  <component :is="tag ?? 'span'" class="STooltip" @mouseenter="show" @mouseleave="hide">
+    <span class="content" ref="content">
+      <slot />
+    </span>
+
+    <transition name="fade">
+      <span v-show="on" class="container" :class="classes" ref="tip">
+        <span v-if="$slots.text" class="tip"><slot name="text" /></span>
+        <SMarkdown v-else-if="text" tag="span" class="tip" :content="text" inline />
       </span>
-    </template>
+    </transition>
   </component>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .STooltip {
   position: relative;
 }
 
-.STooltip-container {
+.content {
+  white-space: nowrap;
+}
+
+.container {
   position: absolute;
-  display: block;
-  transition: opacity .25s;
   z-index: var(--z-index-tooltip);
+  display: block;
+  transition: opacity 0.25s;
 }
 
-.STooltip-container.fade-enter,
-.STooltip-container.fade-leave-to {
+.container.fade-enter-from,
+.container.fade-leave-to {
   opacity: 0;
-  &.top .STooltip-tip    { transform: translateY(8px); }
-  &.right .STooltip-tip  { transform: translateX(-8px); }
-  &.bottom .STooltip-tip { transform: translateY(-8px); }
-  &.left  .STooltip-tip  { transform: translateX(8px); }
+  &.top .tip    { transform: translateY(8px); }
+  &.right .tip  { transform: translateX(-8px); }
+  &.bottom .tip { transform: translateY(-8px); }
+  &.left  .tip  { transform: translateX(8px); }
 }
 
-.STooltip-container.top {
+.container.top {
   top: 0;
   left: 50%;
   padding-bottom: 8px;
   transform: translate(-50%, -100%);
 }
 
-.STooltip-container.right {
+.container.right {
   top: 50%;
   left: 100%;
   transform: translate(8px, -50%);
 }
 
-.STooltip-container.bottom {
+.container.bottom {
   bottom: 0;
   left: 50%;
   padding-top: 8px;
   transform: translate(-50%, 100%);
 }
 
-.STooltip-container.left {
+.container.left {
   top: 50%;
   right: 100%;
   transform: translate(-8px, -50%);
 }
 
-.STooltip-tip {
+.tip {
   display: block;
-  border-radius: 4px;
+  border: 1px solid var(--tooltip-border-color);
+  border-radius: 6px;
   padding: 12px;
   width: max-content;
-  max-width: 288px;
+  max-width: var(--tooltip-max-width);
   line-height: 18px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--c-text-dark-1);
-  background-color: rgba(0, 0, 0, .9);
-  transition: transform .25s;
+  color: var(--tooltip-text-color);
+  background-color: var(--tooltip-bg-color);
+  transition: transform 0.25s;
 }
 
-.STooltip-tip :deep(a) {
-  color: var(--c-info);
+.tip :deep(a) {
+  color: var(--c-info-text);
 
   &:hover {
-    color: var(--c-info-dark);
+    color: var(--c-info-text-dark);
   }
 }
-
-.STooltip-content {
-  white-space: nowrap;
-}
 </style>

package/lib/composables/Table.ts

@@ -6,6 +6,8 @@ export interface Table {
   orders: string[]
   columns: TableColumns
   records?: Record<string, any>[] | null
+  header?: boolean
+  footer?: boolean
   total?: number | null
   page?: number | null
   perPage?: number | null
@@ -25,6 +27,7 @@ export interface TableColumn {
   label: string
   className?: string
   dropdown?: DropdownSection[]
+  resizable?: boolean
   cell?: TableCell | ((value: any, record: any) => TableCell)
 }
 
@@ -115,6 +118,8 @@ export interface UseTableOptions {
   orders: MaybeRef<string[]>
   columns: MaybeRef<TableColumns>
   records?: MaybeRef<Record<string, any>[] | null | undefined>
+  header?: MaybeRef<boolean | undefined>
+  footer?: MaybeRef<boolean | undefined>
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>

package/lib/composables/Tooltip.ts

@@ -12,7 +12,7 @@ const SCREEN_PADDING = 16
 export function useTooltip(
   content: Ref<HTMLElement | null>,
   tip: Ref<HTMLElement | null>,
-  position: Position
+  position: Ref<Position>
 ) {
   const on = ref(false)
 
@@ -72,7 +72,7 @@ export function useTooltip(
   }
 
   function setTransform(x: number): void {
-    tip.value!.style.transform = `translate(${x}px, ${position === 'top' ? -100 : 100}%)`
+    tip.value!.style.transform = `translate(${x}px, ${position.value === 'top' ? -100 : 100}%)`
   }
 
   function shouldPosition(): boolean {
@@ -80,7 +80,7 @@ export function useTooltip(
       return false
     }
 
-    return position === 'top' || position === 'bottom'
+    return position.value === 'top' || position.value === 'bottom'
   }
 
   return {

package/lib/composables/Utils.ts

@@ -1,5 +1,31 @@
+import { MaybeComputedRef, resolveUnref } from '@vueuse/core'
 import { ComputedRef, computed } from 'vue'
 
+export type WhenCondition<T> = MaybeComputedRef<T>
+
+export function computedWhen<T, C>(
+  condition: WhenCondition<C>,
+  fn: (item: NonNullable<C>) => T
+): ComputedRef<T | undefined>
+
+export function computedWhen<T, C, D>(
+  condition: WhenCondition<C>,
+  fn: (item: NonNullable<C>) => T,
+  whenFalse: D
+): ComputedRef<T | D>
+
+export function computedWhen<T, C, D>(
+  condition: WhenCondition<C>,
+  fn: (item: NonNullable<C>) => T,
+  whenFalse?: D
+): ComputedRef<T | D> {
+  return computed(() => {
+    const c = resolveUnref(condition)
+
+    return c ? fn(c) : whenFalse as D
+  })
+}
+
 export function computedArray<T = any>(fn: (arr: T[]) => void): ComputedRef<T[]> {
   return computed(() => {
     const arr = [] as T[]

package/lib/composables/Validation.ts

@@ -1,5 +1,4 @@
 import {
-  ErrorObject,
   GlobalConfig,
   Validation,
   ValidationArgs,
@@ -11,11 +10,15 @@ export type { Validation, ValidationArgs, GlobalConfig }
 
 export interface Validatable {
   readonly $dirty: boolean
-  readonly $errors: ErrorObject[]
   readonly $invalid: boolean
+  readonly $errors: ValidatableError[]
   readonly $touch: () => void
 }
 
+export interface ValidatableError {
+  readonly $message: string | Ref<string>
+}
+
 export function useValidation<
   T extends { [key in keyof R]: any },
   R extends ValidationArgs = ValidationArgs

package/lib/styles/variables.css

@@ -287,6 +287,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  --z-index-tooltip: 10;
   --z-index-dropdown: 1000;
   --z-index-backdrop: 2000;
 }
@@ -594,6 +595,17 @@
   --pill-fill-danger-active-bg-color: var(--c-danger-bg-darker);
 }
 
+/**
+ * Component: Tooltip
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --tooltip-max-width: 288px;
+  --tooltip-border-color: var(--c-divider-2);
+  --tooltip-text-color: var(--c-text-1);
+  --tooltip-bg-color: var(--c-bg-elv-3);
+}
+
 /**
  * Component: Dropdown
  * -------------------------------------------------------------------------- */
@@ -611,7 +623,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --table-border: 1px solid var(--c-divider-light);
+  --table-border: 1px solid var(--c-divider-2);
   --table-border-top: var(--table-border);
   --table-border-right: var(--table-border);
   --table-border-bottom: var(--table-border);

package/lib/validation/rules/index.ts

@@ -1,19 +1,19 @@
-export { or, and, not } from '@vuelidate/validators'
-
+export { and, not, or } from '@vuelidate/validators'
 export * from './checked'
+export * from './decimal'
 export * from './email'
 export * from './fileExtension'
 export * from './hms'
+export * from './maxFileSize'
 export * from './maxLength'
-export * from './minLength'
 export * from './maxValue'
+export * from './minLength'
 export * from './minValue'
+export * from './month'
 export * from './required'
 export * from './requiredHms'
 export * from './requiredIf'
 export * from './requiredYmd'
+export * from './rule'
 export * from './url'
-export * from './decimal'
-export * from './month'
 export * from './ymd'
-export * from './rule'

package/lib/validation/rules/maxFileSize.ts

@@ -0,0 +1,16 @@
+import { helpers } from '@vuelidate/validators'
+import { maxFileSize as baseMaxFileSize } from '../validators/maxFileSize'
+
+export function maxFileSize(size: string, msg?: string) {
+  return helpers.withParams(
+    { size },
+    helpers.withMessage(
+      ({ $params }) => {
+        return msg ?? `The file must be smaller than ${$params.size}.`
+      },
+      (value: File) => {
+        return !helpers.req(value) || baseMaxFileSize(value, size)
+      }
+    )
+  )
+}

package/lib/validation/validators/maxFileSize.ts

@@ -0,0 +1,10 @@
+export function maxFileSize(file: File, size: string): boolean {
+  const factor = /gb/i.test(size)
+    ? 1e9
+    : /mb/i.test(size)
+      ? 1e6
+      : /kb/i.test(size)
+        ? 1e3
+        : 1
+  return file.size <= factor * +size.replace(/[^\d\.]/g, '')
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -52,9 +52,9 @@
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash-es": "^4.17.6",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^18.11.11",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "@vitest/coverage-c8": "^0.25.3",
+    "@types/node": "^18.11.18",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.27.2",
     "@vue/test-utils": "^2.2.7",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
@@ -63,10 +63,10 @@
     "chalk": "^4.1.2",
     "conventional-changelog-cli": "^2.2.2",
     "enquirer": "^2.3.6",
-    "eslint": "^8.31.0",
+    "eslint": "^8.32.0",
     "execa": "^5.1.1",
     "fuse.js": "^6.6.2",
-    "happy-dom": "^8.1.0",
+    "happy-dom": "^8.1.4",
     "histoire": "^0.12.4",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
@@ -77,12 +77,12 @@
     "semver": "^7.3.8",
     "typescript": "^4.9.4",
     "v-calendar": "3.0.0-alpha.8",
-    "vite": "^3.2.5",
-    "vitepress": "1.0.0-alpha.35",
-    "vitest": "^0.25.3",
+    "vite": "^4.0.4",
+    "vitepress": "1.0.0-alpha.38",
+    "vitest": "^0.27.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vue-tsc": "^1.0.11"
+    "vue-tsc": "^1.0.24"
   },
   "scripts": {
     "docs": "vitepress dev docs --port 4000",