@globalbrain/sefirot 2.39.0 → 2.40.0

package/lib/components/SCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { provideCardState } from '../composables/Card'
 
-export type Size = 'small' | 'medium'
+export type Size = 'small' | 'medium' | 'large'
 
 defineProps<{
   size?: Size
@@ -55,6 +55,13 @@ const { isCollapsed } = provideCardState()
   }
 
   &.medium {
+    @media (min-width: 736px) {
+      margin: 48px auto 128px;
+      max-width: 640px;
+    }
+  }
+
+  &.large {
     @media (min-width: 864px) {
       margin: 48px auto 128px;
       max-width: 768px;

package/lib/components/SCardBlock.vue

@@ -18,7 +18,7 @@ defineProps<{
   background-color: var(--c-bg-elv-3);
 
   &.compact { padding: 24px; }
-  &.wide    { padding: 48px; }
+  &.wide    { padding: 32px; }
 }
 
 .SCard > .SCardBlock:first-child {

package/lib/components/SCardFooter.vue

@@ -1,5 +1,13 @@
+<script setup lang="ts">
+export type Space = 'compact' | 'wide'
+
+defineProps<{
+  space?: Space
+}>()
+</script>
+
 <template>
-  <div class="SCardFooter">
+  <div class="SCardFooter" :class="[space ?? 'compact']">
     <slot />
   </div>
 </template>

package/lib/components/SCardFooterActions.vue

@@ -10,6 +10,8 @@
   justify-content: flex-end;
   flex-grow: 1;
   gap: 12px;
-  padding: 12px 24px;
+
+  .SCardFooter.compact > & { padding: 12px 24px; }
+  .SCardFooter.wide > &    { padding: 16px 32px; }
 }
 </style>

package/lib/components/SContent.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="SContent">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SContent {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.SContent :deep(p) {
+  margin: 0;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--c-text-1);
+}
+
+.SContent :deep(strong) {
+  font-weight: 600;
+}
+
+.SContent :deep(a) {
+  color: var(--c-info-text);
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--c-info-text-dark);
+  }
+}
+
+.SContent :deep(ul),
+.SContent :deep(ol) {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.SContent :deep(ol) {
+  counter-reset: s-medium-counter;
+}
+
+.SContent :deep(li) {
+  position: relative;
+  margin: 0;
+  padding-left: 20px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--c-text-1);
+}
+
+.SContent :deep(ul > li::before) {
+  position: absolute;
+  top: 8px;
+  left: 2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--c-text-3);
+  content: "";
+}
+
+.SContent :deep(ol > li) {
+  counter-increment: s-medium-counter;
+}
+
+.SContent :deep(ol > li::before) {
+  margin-right: 3px;
+  margin-left: -20px;
+  color: var(--c-text-2);
+  font-feature-settings: "tnum";
+  content: counter(s-medium-counter)". ";
+}
+</style>

package/lib/components/SDesc.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import SGrid from './SGrid.vue'
+
+defineProps<{
+  cols?: string | number
+  gap?: string | number
+}>()
+</script>
+
+<template>
+  <SGrid class="SDesc" :cols="cols" :gap="gap">
+    <slot />
+  </SGrid>
+</template>

package/lib/components/SDescDay.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { type Day } from '../support/Day'
+import SDescEmpty from './SDescEmpty.vue'
+
+const props = defineProps<{
+  value?: Day | null
+  format?: string
+}>()
+
+const slots = useSlots()
+
+const _value = computed(() => {
+  const slotValue = slots.default?.()[0].children
+
+  if (typeof slotValue === 'string') {
+    return slotValue
+  }
+
+  if (props.value) {
+    return props.value.format(props.format ?? 'YYYY-MM-DD HH:mm:ss')
+  }
+
+  return null
+})
+</script>
+
+<template>
+  <div v-if="_value" class="SDescDay">
+    <div class="value">
+      {{ _value }}
+    </div>
+  </div>
+  <SDescEmpty v-else />
+</template>
+
+<style scoped lang="postcss">
+.SDescDay {
+  border-bottom: 1px dashed var(--c-divider-1);
+  padding-bottom: 7px;
+}
+
+.value {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  font-feature-settings: "tnum";
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/lib/components/SDescEmpty.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="SDescEmpty">
+    <div class="value">—</div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDescEmpty {
+  border-bottom: 1px dashed var(--c-divider-1);
+  padding-bottom: 7px;
+}
+
+.value {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--c-text-3);
+}
+</style>

package/lib/components/SDescItem.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import SGridItem from './SGridItem.vue'
+
+defineProps<{
+  span?: string | number
+}>()
+</script>
+
+<template>
+  <SGridItem class="SDescItem" :span="span">
+    <slot />
+  </SGridItem>
+</template>

package/lib/components/SDescLabel.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  value?: string | null
+}>()
+</script>
+
+<template>
+  <div class="SDescLabel">
+    <div class="value">
+      <slot v-if="$slots.default" />
+      <template v-else>{{ value }}</template>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDescLabel {
+  display: flex;
+  height: 24px;
+}
+
+.value {
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--c-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/lib/components/SDescLink.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import SDescEmpty from './SDescEmpty.vue'
+import SLink from './SLink.vue'
+
+const props = defineProps<{
+  value?: string | null
+  href?: string
+}>()
+
+const slots = useSlots()
+
+const link = computed(() => {
+  if (props.href) {
+    return props.href
+  }
+
+  const slotValue = slots.default?.()[0].children
+
+  if (typeof slotValue === 'string') {
+    return slotValue
+  }
+
+  return props.value
+})
+</script>
+
+<template>
+  <div v-if="$slots.default || value" class="SDescLink">
+    <SLink class="value" :href="link">
+      <slot v-if="$slots.default" />
+      <template v-else>{{ value }}</template>
+    </SLink>
+  </div>
+  <SDescEmpty v-else />
+</template>
+
+<style scoped lang="postcss">
+.SDescLink {
+  border-bottom: 1px dashed var(--c-divider-1);
+  padding-bottom: 7px;
+}
+
+.value {
+  display: block;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--c-info-text);
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--c-info-text-dark);
+  }
+}
+</style>

package/lib/components/SDescNumber.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { format } from '../support/Num'
+import SDescEmpty from './SDescEmpty.vue'
+
+const props = defineProps<{
+  value?: number | null
+  separator?: boolean
+}>()
+
+const slots = useSlots()
+
+const _value = computed(() => {
+  const slotValue = slots.default?.()[0].children
+
+  const v = (typeof slotValue === 'string') ? Number(slotValue) : props.value
+
+  if (v == null) {
+    return null
+  }
+
+  return props.separator ? format(v) : v
+})
+</script>
+
+<template>
+  <div v-if="_value" class="SDescNumber">
+    <div class="value">
+      {{ _value }}
+    </div>
+  </div>
+  <SDescEmpty v-else />
+</template>
+
+<style scoped lang="postcss">
+.SDescNumber {
+  border-bottom: 1px dashed var(--c-divider-1);
+  padding-bottom: 7px;
+}
+
+.value {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  font-feature-settings: "tnum";
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/lib/components/SDescPill.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { isArray } from '../support/Utils'
+import SDescEmpty from './SDescEmpty.vue'
+import SPill, { type Mode } from './SPill.vue'
+
+export interface Pill {
+  mode?: Mode
+  label: string
+}
+
+const props = defineProps<{
+  pill?: Pill | Pill[] | null
+}>()
+
+const pills = computed(() => {
+  return props.pill
+    ? isArray(props.pill) ? props.pill : [props.pill]
+    : null
+})
+</script>
+
+<template>
+  <div v-if="pills && pills.length" class="SDescPill">
+    <div class="value">
+      <div v-for="pill, index in pills" :key="index" class="pill">
+        <SPill tag="div" size="mini" :mode="pill.mode" :label="pill.label" />
+      </div>
+    </div>
+  </div>
+  <SDescEmpty v-else />
+</template>
+
+<style scoped lang="postcss">
+.SDescPill {
+  border-bottom: 1px dashed var(--c-divider-1);
+  padding-bottom: 7px;
+}
+
+.value {
+  display: flex;
+  gap: 4px 6px;
+  flex-wrap: wrap;
+}
+
+.pill {
+  display: flex;
+  align-items: center;
+  height: 24px;
+}
+</style>

package/lib/components/SDescState.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import SDescEmpty from './SDescEmpty.vue'
+import SState, { type Mode } from './SState.vue'
+
+export interface State {
+  mode?: Mode
+  label: string
+}
+
+defineProps<{
+  state?: State | null
+}>()
+</script>
+
+<template>
+  <div v-if="state" class="SDescState">
+    <div class="value">
+      <SState as="div" size="mini" :mode="state.mode" :label="state.label" />
+    </div>
+  </div>
+  <SDescEmpty v-else />
+</template>
+
+<style scoped lang="postcss">
+.SDescState {
+  border-bottom: 1px dashed var(--c-divider-1);
+  padding-bottom: 7px;
+}
+
+.value {
+  display: flex;
+  align-items: center;
+  height: 24px;
+}
+</style>

package/lib/components/SDescText.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import SDescEmpty from './SDescEmpty.vue'
+
+const props = defineProps<{
+  value?: string | null
+  lineClamp?: string | number
+  preWrap?: boolean
+}>()
+
+const classes = computed(() => [
+  { 'line-clamp': props.lineClamp },
+  { 'pre-wrap': props.preWrap }
+])
+
+const lineClamp = computed(() => props.lineClamp ?? 'none')
+</script>
+
+<template>
+  <div v-if="$slots.default || value" class="SDescText" :class="classes">
+    <div class="value">
+      <slot v-if="$slots.default" />
+      <template v-else>{{ value }}</template>
+    </div>
+  </div>
+  <SDescEmpty v-else />
+</template>
+
+<style scoped lang="postcss">
+.SDescText {
+  border-bottom: 1px dashed var(--c-divider-1);
+  padding-bottom: 7px;
+}
+
+.value {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+
+  .SDescText.line-clamp & {
+    display: -webkit-box;
+    -webkit-line-clamp: v-bind(lineClamp);
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .SDescText.pre-wrap & {
+    white-space: pre-wrap;
+  }
+}
+
+.value :deep(a) {
+  color: var(--c-info-text);
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--c-info-text-dark);
+  }
+}
+</style>

package/lib/components/SDropdown.vue

@@ -24,6 +24,7 @@ defineProps<{
   min-width: 256px;
   max-height: 384px;
   overflow-y: auto;
+  white-space: normal;
 
   &::-webkit-scrollbar {
     display: none;

package/lib/components/SGrid.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  cols?: string | number
+  gap?: string | number
+}>()
+
+const styles = computed(() => {
+  return {
+    gridTemplateColumns: `repeat(${props.cols ?? 1}, minmax(0, 1fr))`,
+    gap: `${props.gap ?? 0}px`
+  }
+})
+</script>
+
+<template>
+  <div class="SGrid" :style="styles">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SGrid {
+  display: grid;
+}
+</style>

package/lib/components/SGridItem.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  span?: string | number
+}>()
+</script>
+
+<template>
+  <div
+    class="SGridItem"
+    :style="{ gridColumn: span ? `span ${span}` : undefined }"
+  >
+    <slot />
+  </div>
+</template>

package/lib/components/SHead.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="SHead">
+    <slot />
+  </div>
+</template>

package/lib/components/SHeadLead.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="SHeadLead">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SHeadLead {
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--c-text-2);
+}
+
+.SHeadLead :deep(a) {
+  color: var(--c-info-text);
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--c-info-text-dark);
+  }
+}
+</style>

package/lib/components/SHeadTitle.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="SHeadTitle">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SHeadTitle {
+  line-height: 32px;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--c-text-1);
+}
+</style>

package/lib/components/SInputHMS.vue

@@ -122,7 +122,7 @@ function getValue(value: string): string | null {
 
   const input = Number(value)
 
-  return isNaN(input) ? null : String(input)
+  return Number.isNaN(input) ? null : String(input)
 }
 
 function emitTouch(type: ValueType): void {

package/lib/composables/Markdown.ts

@@ -86,7 +86,7 @@ export function useLink({ container, callbacks }: UseLinkOptions): UseLink {
     }
 
     if (isCallback) {
-      const idx = parseInt(target.dataset.callbackId || '')
+      const idx = Number.parseInt(target.dataset.callbackId || '')
       const callback = (callbacks ?? [])[idx]
 
       if (!callback) {

package/lib/mixins/Card.ts

@@ -12,19 +12,31 @@ import SCardHeaderActions from '../components/SCardHeaderActions.vue'
 import SCardHeaderTitle from '../components/SCardHeaderTitle.vue'
 
 export function mixin(app: App): void {
-  app.mixin({
-    components: {
-      SCard,
-      SCardBlock,
-      SCardFooter,
-      SCardFooterAction,
-      SCardFooterActions,
-      SCardHeader,
-      SCardHeaderAction,
-      SCardHeaderActionClose,
-      SCardHeaderActionCollapse,
-      SCardHeaderActions,
-      SCardHeaderTitle
-    }
-  })
+  app.component('SCard', SCard)
+  app.component('SCardBlock', SCardBlock)
+  app.component('SCardFooter', SCardFooter)
+  app.component('SCardFooterAction', SCardFooterAction)
+  app.component('SCardFooterActions', SCardFooterActions)
+  app.component('SCardHeader', SCardHeader)
+  app.component('SCardHeaderAction', SCardHeaderAction)
+  app.component('SCardHeaderActionClose', SCardHeaderActionClose)
+  app.component('SCardHeaderActionCollapse', SCardHeaderActionCollapse)
+  app.component('SCardHeaderActions', SCardHeaderActions)
+  app.component('SCardHeaderTitle', SCardHeaderTitle)
+}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    SCard: typeof SCard
+    SCardBlock: typeof SCardBlock
+    SCardFooter: typeof SCardFooter
+    SCardFooterAction: typeof SCardFooterAction
+    SCardFooterActions: typeof SCardFooterActions
+    SCardHeader: typeof SCardHeader
+    SCardHeaderAction: typeof SCardHeaderAction
+    SCardHeaderActionClose: typeof SCardHeaderActionClose
+    SCardHeaderActionCollapse: typeof SCardHeaderActionCollapse
+    SCardHeaderActions: typeof SCardHeaderActions
+    SCardHeaderTitle: typeof SCardHeaderTitle
+  }
 }

package/lib/mixins/Desc.ts

@@ -0,0 +1,39 @@
+import { type App } from 'vue'
+import SDesc from '../components/SDesc.vue'
+import SDescDay from '../components/SDescDay.vue'
+import SDescEmpty from '../components/SDescEmpty.vue'
+import SDescItem from '../components/SDescItem.vue'
+import SDescLabel from '../components/SDescLabel.vue'
+import SDescLink from '../components/SDescLink.vue'
+import SDescNumber from '../components/SDescNumber.vue'
+import SDescPill from '../components/SDescPill.vue'
+import SDescState from '../components/SDescState.vue'
+import SDescText from '../components/SDescText.vue'
+
+export function mixin(app: App): void {
+  app.component('SDesc', SDesc)
+  app.component('SDescDay', SDescDay)
+  app.component('SDescEmpty', SDescEmpty)
+  app.component('SDescItem', SDescItem)
+  app.component('SDescLabel', SDescLabel)
+  app.component('SDescLink', SDescLink)
+  app.component('SDescNumber', SDescNumber)
+  app.component('SDescPill', SDescPill)
+  app.component('SDescState', SDescState)
+  app.component('SDescText', SDescText)
+}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    SDesc: typeof SDesc
+    SDescDay: typeof SDescDay
+    SDescEmpty: typeof SDescEmpty
+    SDescItem: typeof SDescItem
+    SDescLabel: typeof SDescLabel
+    SDescLink: typeof SDescLink
+    SDescNumber: typeof SDescNumber
+    SDescPill: typeof SDescPill
+    SDescState: typeof SDescState
+    SDescText: typeof SDescText
+  }
+}

package/lib/mixins/Grid.ts

@@ -0,0 +1,15 @@
+import { type App } from 'vue'
+import SGrid from '../components/SGrid.vue'
+import SGridItem from '../components/SGridItem.vue'
+
+export function mixin(app: App): void {
+  app.component('SGrid', SGrid)
+  app.component('SGridItem', SGridItem)
+}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    SGrid: typeof SGrid
+    SGridItem: typeof SGridItem
+  }
+}

package/lib/mixins/Head.ts

@@ -0,0 +1,18 @@
+import { type App } from 'vue'
+import SHead from '../components/SHead.vue'
+import SHeadLead from '../components/SHeadLead.vue'
+import SHeadTitle from '../components/SHeadTitle.vue'
+
+export function mixin(app: App): void {
+  app.component('SHead', SHead)
+  app.component('SHeadLead', SHeadLead)
+  app.component('SHeadTitle', SHeadTitle)
+}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    SHead: typeof SHead
+    SHeadLead: typeof SHeadLead
+    SHeadTitle: typeof SHeadTitle
+  }
+}

package/lib/mixins/Sheet.ts

@@ -8,15 +8,23 @@ import SSheetMedium from '../components/SSheetMedium.vue'
 import SSheetTitle from '../components/SSheetTitle.vue'
 
 export function mixin(app: App): void {
-  app.mixin({
-    components: {
-      SSheet,
-      SSheetTitle,
-      SSheetMedium,
-      SSheetForm,
-      SSheetFooter,
-      SSheetFooterActions,
-      SSheetFooterAction
-    }
-  })
+  app.component('SSheet', SSheet)
+  app.component('SSheetFooter', SSheetFooter)
+  app.component('SSheetFooterAction', SSheetFooterAction)
+  app.component('SSheetFooterActions', SSheetFooterActions)
+  app.component('SSheetForm', SSheetForm)
+  app.component('SSheetMedium', SSheetMedium)
+  app.component('SSheetTitle', SSheetTitle)
+}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    SSheet: typeof SSheet
+    SSheetFooter: typeof SSheetFooter
+    SSheetFooterAction: typeof SSheetFooterAction
+    SSheetFooterActions: typeof SSheetFooterActions
+    SSheetForm: typeof SSheetForm
+    SSheetMedium: typeof SSheetMedium
+    SSheetTitle: typeof SSheetTitle
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.39.0",
+  "version": "2.40.0",
   "packageManager": "pnpm@8.6.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -47,7 +47,7 @@
     "dayjs": "^1.11.7"
   },
   "devDependencies": {
-    "@globalbrain/eslint-config": "^1.5.0",
+    "@globalbrain/eslint-config": "^1.5.1",
     "@histoire/plugin-vue": "^0.16.1",
     "@iconify-icons/ph": "^1.2.4",
     "@iconify/vue": "^4.1.1",
@@ -56,7 +56,7 @@
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^20.1.1",
     "@vitejs/plugin-vue": "^4.2.1",
-    "@vitest/coverage-c8": "^0.31.0",
+    "@vitest/coverage-c8": "^0.33.0",
     "@vue/test-utils": "^2.3.2",
     "@vuelidate/core": "^2.0.2",
     "@vuelidate/validators": "^2.0.2",
@@ -65,10 +65,10 @@
     "chalk": "^4.1.2",
     "conventional-changelog-cli": "^2.2.2",
     "enquirer": "^2.3.6",
-    "eslint": "^8.40.0",
+    "eslint": "^8.44.0",
     "execa": "^5.1.1",
     "fuse.js": "^6.6.2",
-    "happy-dom": "^9.10.9",
+    "happy-dom": "^10.1.1",
     "histoire": "^0.16.1",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
@@ -81,7 +81,7 @@
     "v-calendar": "^3.0.3",
     "vite": "^4.3.5",
     "vitepress": "1.0.0-alpha.75",
-    "vitest": "^0.31.0",
+    "vitest": "^0.33.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.7.1",